@workday/canvas-kit-docs
Version:
Documentation components of Canvas Kit components
101 lines (100 loc) • 5.27 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { system } from '@workday/canvas-tokens-web';
import { SidePanel, useSidePanel } from '@workday/canvas-kit-preview-react/side-panel';
import { Flex } from '@workday/canvas-kit-react/layout';
import { Heading, Subtext } from '@workday/canvas-kit-react/text';
import { Expandable } from '@workday/canvas-kit-react/expandable';
import { SystemIcon } from '@workday/canvas-kit-react/icon';
import { TertiaryButton } from '@workday/canvas-kit-react/button';
import { Menu } from '@workday/canvas-kit-react/menu';
import { birthdayIcon, checkIcon, ribbonIcon } from '@workday/canvas-system-icons-web';
import { createStyles, px2rem } from '@workday/canvas-kit-styling';
import { Tooltip } from '@workday/canvas-kit-react/tooltip';
const data = {
bestsellers: {
icon: ribbonIcon,
title: 'Best Sellers',
subtitle: 'Award winning sweet treats',
items: ['Mango Coco Sago', 'Matcha Creme Pie', 'Key Lime Cheesecake', 'Tiramisu'],
},
cakes: {
icon: birthdayIcon,
title: 'Custom Cakes',
subtitle: 'To celebrate your life milestones',
items: ['Anniversary', 'Birthday', 'Graduation', 'Wedding'],
},
};
const stylesOverride = {
navContainer: createStyles({
height: px2rem(800),
positio: 'relative',
backgroundColor: system.color.bg.alt.default,
}),
heading: createStyles({
margin: system.space.zero,
}),
toggleBtn: createStyles({
top: system.space.zero,
}),
accordionContainer: createStyles({
listStyle: 'none',
flexDirection: 'column',
rowGap: system.space.zero,
paddingInlineStart: system.space.zero,
}),
accordionIcon: createStyles({
verticalAlign: 'middle',
padding: system.space.x1,
}),
accordionSubText: createStyles({
margin: system.space.zero,
}),
listContainer: createStyles({
listStyle: 'none',
padding: system.space.x4,
}),
compactListContainer: createStyles({
listStyle: 'none',
padding: system.space.x4,
flexDirection: 'column',
marginTop: system.space.x8,
}),
links: createStyles({
textDecoration: 'none',
padding: system.space.x4,
}),
linkCheck: createStyles({
marginLeft: 'auto',
}),
flyOut: createStyles({
marginTop: '8rem',
}),
};
const Accordion = ({ config }) => {
const [currentPage, setCurrentPage] = React.useState('');
const handleClick = (e) => {
e.preventDefault();
const target = e.target;
setCurrentPage(target.textContent || '');
};
return (_jsxs(Expandable, { children: [_jsxs(Expandable.Target, { children: [_jsx(SystemIcon, { cs: stylesOverride.accordionIcon, icon: config.icon }), _jsxs(Expandable.Title, { children: [config.title, _jsx(Subtext, { size: "medium", cs: stylesOverride.accordionSubText, children: config.subtitle })] }), _jsx(Expandable.Icon, { iconPosition: "end" })] }), _jsx(Expandable.Content, { as: "ul", cs: stylesOverride.listContainer, children: config.items.map((i) => {
return (_jsx("li", { children: _jsxs(Flex, { as: "a", href: "#", "aria-current": i === currentPage ? 'true' : undefined, className: stylesOverride.links, onClick: handleClick, children: [i, i === currentPage && _jsx(SystemIcon, { icon: checkIcon, cs: stylesOverride.linkCheck })] }) }, i));
}) })] }));
};
const IconButtonMenu = ({ config }) => {
return (_jsxs(Menu, { children: [_jsx(Tooltip, { title: config.title, placement: "right", children: _jsx(Menu.Target, { as: TertiaryButton, children: _jsx(SystemIcon, { icon: config.icon }) }) }), _jsx(Menu.Popper, { placement: "right", children: _jsx(Menu.Card, { cs: stylesOverride.flyOut, children: _jsx(Menu.List, { children: config.items.map((i) => (_jsx(Menu.Item, { children: i }, i))) }) }) })] }));
};
const CompactView = () => {
return (_jsxs(Flex, { as: "ul", cs: stylesOverride.compactListContainer, children: [_jsx(Flex.Item, { as: "li", children: _jsx(IconButtonMenu, { config: data.bestsellers }) }), _jsx(Flex.Item, { as: "li", children: _jsx(IconButtonMenu, { config: data.cakes }) })] }));
};
const ExpandedView = () => {
return (_jsxs(Flex, { as: "ul", cs: stylesOverride.accordionContainer, children: [_jsx(Flex.Item, { as: "li", children: _jsx(Accordion, { config: data.bestsellers }) }), _jsx(Flex.Item, { as: "li", children: _jsx(Accordion, { config: data.cakes }) })] }));
};
export const SideBarContent = () => {
const { expanded, panelProps, labelProps, controlProps } = useSidePanel();
return (_jsxs(SidePanel, { as: "div", touched: panelProps.touched, expanded: panelProps.expanded, children: [_jsx(Heading, { size: "small", cs: stylesOverride.heading, ...labelProps, hidden: !expanded ? true : undefined, children: "Cake or Death Bakery" }), _jsx(SidePanel.ToggleButton, { cs: stylesOverride.toggleBtn, ...controlProps }), expanded ? _jsx(ExpandedView, {}) : _jsx(CompactView, {})] }));
};
export const WithNavigation = () => {
return (_jsx(Flex, { as: "nav", cs: stylesOverride.navContainer, children: _jsx(SideBarContent, {}) }));
};