@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
97 lines (96 loc) • 4.06 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SegmentedControlButton = void 0;
const react_1 = __importDefault(require("react"));
const button_1 = require("@workday/canvas-kit-react/button");
const common_1 = require("@workday/canvas-kit-react/common");
const tokens_1 = require("@workday/canvas-kit-react/tokens");
const getIconButtonColors = (toggled) => {
return {
default: {
background: toggled ? tokens_1.colors.blueberry400 : tokens_1.colors.soap200,
icon: toggled ? tokens_1.colors.frenchVanilla100 : tokens_1.colors.licorice200,
},
hover: {
background: toggled ? tokens_1.colors.blueberry400 : tokens_1.colors.soap300,
icon: toggled ? tokens_1.colors.frenchVanilla100 : tokens_1.colors.licorice500,
},
active: {
background: toggled ? tokens_1.colors.blueberry400 : tokens_1.colors.soap500,
icon: toggled ? tokens_1.colors.frenchVanilla100 : tokens_1.colors.licorice500,
},
focus: {
background: toggled ? tokens_1.colors.blueberry400 : tokens_1.colors.soap200,
icon: toggled ? tokens_1.colors.frenchVanilla100 : tokens_1.colors.licorice500,
border: toggled ? 'transparent' : tokens_1.colors.soap500,
},
disabled: {
background: toggled ? tokens_1.colors.soap100 : tokens_1.colors.soap100,
border: tokens_1.colors.soap500,
icon: tokens_1.colors.soap600,
opacity: '1',
},
};
};
const getSizeStyles = (size) => {
const sizeValue = size === 'large' ? `calc(${tokens_1.space.xl} + ${tokens_1.space.xxs})` : size === 'small' ? tokens_1.space.l : tokens_1.space.xl;
return {
width: sizeValue,
height: sizeValue,
};
};
const StyledButton = (0, common_1.styled)(button_1.BaseButton)({
borderRadius: tokens_1.borderRadius.zero,
border: `1px solid ${tokens_1.colors.soap500}`,
borderLeft: 'none',
minWidth: 'auto',
'&:first-of-type': {
borderRadius: `${tokens_1.borderRadius.m} 0 0 ${tokens_1.borderRadius.m}`,
borderLeft: `1px solid ${tokens_1.colors.soap500}`,
},
'&:last-of-type': {
borderRadius: `0 ${tokens_1.borderRadius.m} ${tokens_1.borderRadius.m} 0`,
},
'&[aria-pressed="true"]': {
borderColor: `${tokens_1.colors.blueberry400} !important`,
'&:hover, &:focus:hover': {
background: tokens_1.colors.blueberry400,
},
},
'&:focus': {
borderRadius: tokens_1.borderRadius.m,
zIndex: 1,
animation: 'none',
transition: 'all 120ms, border-radius 1ms',
...(0, common_1.mouseFocusBehavior)({
'&': {
borderRadius: tokens_1.borderRadius.zero,
'&:first-of-type': {
borderRadius: `${tokens_1.borderRadius.m} 0 0 ${tokens_1.borderRadius.m}`,
},
'&:last-of-type': {
borderRadius: `0 ${tokens_1.borderRadius.m} ${tokens_1.borderRadius.m} 0`,
},
},
}),
},
}, ({ theme }) => ({
'[aria-pressed="true"]': {
borderColor: theme.canvas.palette.primary.main,
'&:hover, &:focus:hover': {
background: theme.canvas.palette.primary.main,
},
},
}), ({ size }) => ({
...getSizeStyles(size),
}));
exports.SegmentedControlButton = (0, common_1.createComponent)('button')({
displayName: 'Button',
Component: ({ value, icon, toggled, ...props }, ref, Element) => {
return (react_1.default.createElement(StyledButton, { as: Element, "aria-pressed": toggled, value: value, colors: getIconButtonColors(toggled), fillIcon: toggled, ref: ref, ...props },
react_1.default.createElement(button_1.BaseButton.Icon, { size: props.size || 'large', icon: icon })));
},
});