@workday/canvas-kit-docs
Version:
Documentation components of Canvas Kit components
38 lines (37 loc) • 1.45 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { StatusIndicator, } from '@workday/canvas-kit-preview-react/status-indicator';
import { system } from '@workday/canvas-tokens-web';
import { sparkleSingleSmallIcon } from '@workday/canvas-system-icons-web';
import { createStencil } from '@workday/canvas-kit-styling';
import { systemIconStencil } from '@workday/canvas-kit-react/icon';
const storybookStatusIndicatorStencil = createStencil({
base: {
borderRadius: system.shape.round,
padding: `${system.space.zero} ${system.space.x2}`,
[systemIconStencil.vars.color]: 'currentColor',
},
});
const content = {
ai: {
icon: sparkleSingleSmallIcon,
label: 'AI Content',
},
deprecated: {
icon: undefined,
label: 'Deprecated',
},
new: {
icon: undefined,
label: 'New',
},
};
export const StorybookStatusIndicator = ({ type }) => {
const { icon, label } = content[type];
const variantMapping = {
ai: 'ai',
deprecated: 'caution',
new: 'positive',
};
console.log(variantMapping[type]);
return (_jsxs(StatusIndicator, { className: "sb-unstyled cnvs-title-status-indicator", cs: storybookStatusIndicatorStencil({ type }), variant: variantMapping[type], emphasis: "low", children: [icon && _jsx(StatusIndicator.Icon, { icon: icon }), _jsx(StatusIndicator.Label, { children: label })] }));
};