@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
50 lines • 1.64 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from "react";
import { BUTTON_STATES } from "../../primitives/ButtonPrimitive/common/consts";
import getBoxShadow from "./helpers/getBoxShadow";
import getPadding from "../../primitives/ButtonPrimitive/common/getPadding";
import useTheme from "../../hooks/useTheme";
import ButtonPrimitive from "../../primitives/ButtonPrimitive";
import { ICON_SIZE, BUTTON_SIZE } from "./consts";
const Button = ({
selected,
iconLeft,
iconRight,
disabled,
height = BUTTON_SIZE,
width = BUTTON_SIZE,
children,
...props
}) => {
const theme = useTheme();
const onlyIcon = Boolean(iconLeft && !children);
const padding = getPadding(onlyIcon, iconRight, iconLeft, "small", theme);
const wrappedBoxShadow = state => getBoxShadow({
state,
disabled,
theme,
selected
});
const boxShadow = {
boxShadow: wrappedBoxShadow(BUTTON_STATES.DEFAULT),
boxShadowHover: wrappedBoxShadow(BUTTON_STATES.HOVER),
boxShadowActive: wrappedBoxShadow(BUTTON_STATES.ACTIVE),
boxShadowFocus: wrappedBoxShadow(BUTTON_STATES.FOCUS)
};
return /*#__PURE__*/React.createElement(ButtonPrimitive, _extends({
circled: true,
contentAlign: "center",
icons: {
width: ICON_SIZE,
height: ICON_SIZE,
foreground: selected ? theme.orbit.paletteWhite : theme.orbit.paletteInkDark
},
background: selected ? theme.orbit.paletteBlueNormal : theme.orbit.paletteCloudNormal,
iconLeft: iconLeft,
height: height,
width: width,
disabled: disabled,
padding: padding
}, props, boxShadow));
};
export default Button;