@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
115 lines (114 loc) • 8.93 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SegmentedControlItem = exports.segmentedControlItemStencil = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const React = __importStar(require("react"));
const button_1 = require("@workday/canvas-kit-react/button");
const common_1 = require("@workday/canvas-kit-react/common");
const icon_1 = require("@workday/canvas-kit-react/icon");
const text_1 = require("@workday/canvas-kit-react/text");
const tooltip_1 = require("@workday/canvas-kit-react/tooltip");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const useSegmentedControlItem_1 = require("./hooks/useSegmentedControlItem");
const useSegmentedControlModel_1 = require("./hooks/useSegmentedControlModel");
exports.segmentedControlItemStencil = (0, canvas_kit_styling_1.createStencil)({
extends: button_1.buttonStencil,
base: { name: "1t2jnz", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-lg, 1.25rem);font-size:var(--cnvs-sys-font-size-subtext-lg, 0.875rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);text-align:start;padding-inline:0;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-sys-color-fg-muted-default);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-default);&:hover, &.hover{--background-button-a19f67:var(--cnvs-sys-color-surface-overlay-hover-default);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:active, &.active{--background-button-a19f67:var(--cnvs-sys-color-surface-overlay-pressed-default);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:focus-visible, &.focus{--label-button-a19f67:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-strong);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--label-button-a19f67:var(--cnvs-sys-color-fg-muted-default);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-default);}&[aria-pressed='true']{--background-button-a19f67:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);box-shadow:var(--cnvs-sys-depth-2);&:hover, &.hover{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);}&:focus-visible, &.focus{box-shadow:0 0 0 0.125rem var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1))),0 0 0 0.25rem var(--cnvs-sys-color-brand-border-primary);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);}}:dir(rtl){svg{transform:scaleX(-1);}}" },
modifiers: {
size: {
large: { name: "49ywz1", styles: "height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));" },
medium: { name: "17y2ue", styles: "height:var(--cnvs-base-size-350, 1.75rem);font-weight:var(--cnvs-sys-font-weight-semibold, 600);" },
small: { name: "4bhtjv", styles: "font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));font-weight:var(--cnvs-sys-font-weight-medium);height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));gap:var(--cnvs-base-size-25, 0.125rem);" }
},
variant: {
iconOnly: { name: "3tllpr", styles: "" },
textOnly: { name: "1tbvmq", styles: "" },
iconWithText: { name: "p40jr", styles: "" }
}
},
compound: [
{
modifiers: { size: 'large', variant: 'iconOnly' },
styles: { name: "2mjigd", styles: "min-width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));" }
},
{
modifiers: { size: 'large', variant: 'iconWithText' },
styles: { name: "2ku8lz", styles: "padding-inline:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));" }
},
{
modifiers: { size: 'large', variant: 'textOnly' },
styles: { name: "zkwlo", styles: "padding-inline:var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));" }
},
{
modifiers: { size: 'medium', variant: 'iconOnly' },
styles: { name: "2y2ywo", styles: "min-width:var(--cnvs-base-size-350, 1.75rem);" }
},
{
modifiers: { size: 'medium', variant: 'iconWithText' },
styles: { name: "1qdtib", styles: "padding-inline:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
},
{
modifiers: { size: 'medium', variant: 'textOnly' },
styles: { name: "3pys5g", styles: "padding-inline:var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem));" }
},
{
modifiers: { size: 'small', variant: 'iconOnly' },
styles: { name: "48k1od", styles: "min-width:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));" }
},
{
modifiers: { size: 'small', variant: 'iconWithText' },
styles: { name: "2w92u3", styles: "padding-inline:var(--cnvs-base-size-75, 0.375rem) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" }
},
{
modifiers: { size: 'small', variant: 'textOnly' },
styles: { name: "ikfv8", styles: "padding-inline:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
}
]
}, "segmented-control-item-652603");
const Container = ({ tooltipProps, children }) => {
return tooltipProps ? ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { ...tooltipProps, children: children })) : ((0, jsx_runtime_1.jsx)(React.Fragment, { children: children }));
};
const getVariant = (icon, children) => {
if (icon && children) {
return 'iconWithText';
}
else if (!icon && children) {
return 'textOnly';
}
else {
return 'iconOnly';
}
};
exports.SegmentedControlItem = (0, common_1.createSubcomponent)('button')({
displayName: 'SegmentedControl.Item',
modelHook: useSegmentedControlModel_1.useSegmentedControlModel,
elemPropsHook: useSegmentedControlItem_1.useSegmentedControlItem,
})(({ children, icon, tooltipProps, ...elemProps }, Element, { state: { size } }) => {
const variant = getVariant(icon, children);
const iconSize = size === 'small' ? 'extraSmall' : 'small';
return ((0, jsx_runtime_1.jsx)(Container, { tooltipProps: tooltipProps, children: (0, jsx_runtime_1.jsxs)(button_1.BaseButton, { as: Element, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.segmentedControlItemStencil)({ size, variant })), children: [icon && (0, jsx_runtime_1.jsx)(button_1.BaseButton.Icon, { icon: icon, size: iconSize }), children && (0, jsx_runtime_1.jsx)(text_1.Text, { children: children })] }) }));
});