@workday/canvas-kit-docs
Version:
Documentation components of Canvas Kit components
32 lines (31 loc) • 1.51 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { SidePanel, useSidePanel } from '@workday/canvas-kit-preview-react/side-panel';
import { Flex, Box } from '@workday/canvas-kit-react/layout';
import { Heading } from '@workday/canvas-kit-react/text';
import { createStyles, px2rem } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
const stylesOverride = {
panelContainer: createStyles({
height: px2rem(320),
backgroundColor: system.color.bg.alt.soft,
position: 'relative',
}),
panelContent: createStyles({
alignItems: 'center',
paddingY: system.space.x4,
paddingX: system.space.x4,
}),
panel: createStyles({
zIndex: 1,
}),
overlay: createStyles({
position: 'absolute',
background: system.color.bg.overlay,
height: '100%',
width: '100%',
}),
};
export const WithOverlay = () => {
const { expanded, panelProps, labelProps, controlProps } = useSidePanel();
return (_jsxs(Flex, { cs: stylesOverride.panelContainer, children: [_jsx(SidePanel, { className: stylesOverride.panel, ...panelProps, variant: "alternate", children: _jsxs(Flex, { cs: stylesOverride.panelContainer, children: [_jsx(Heading, { size: "small", ...labelProps, hidden: !expanded ? true : undefined, children: "Alternate Panel" }), _jsx(SidePanel.ToggleButton, { ...controlProps })] }) }), expanded && _jsx(Box, { cs: stylesOverride.overlay })] }));
};