@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
28 lines (27 loc) • 1.91 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { composeHooks, createSubcomponent } from '@workday/canvas-kit-react/common';
import { useListItemRegister, useOverflowListItemMeasure, } from '@workday/canvas-kit-react/collection';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
import { chevronRightSmallIcon } from '@workday/canvas-system-icons-web';
import { system } from '@workday/canvas-tokens-web';
import { createStencil, px2rem } from '@workday/canvas-kit-styling';
import { useBreadcrumbsModel } from './hooks/useBreadcrumbsModel';
import { BreadcrumbsLink } from './BreadcrumbsLink';
export const breadcrumbsItemStencil = createStencil({
parts: {
chevronRightIcon: 'breadcrumbs-item-chevron-right-icon',
},
base: { name: "2a401f", styles: "box-sizing:border-box;align-items:center;display:inline-flex;white-space:nowrap;--size-svg-8fcab8:1.25rem;--color-system-icon-3a4847:var(--cnvs-sys-color-icon-default);[data-part=\"breadcrumbs-item-chevron-right-icon\"]{height:var(--cnvs-sys-space-x8);width:var(--cnvs-sys-space-x8);justify-content:center;align-items:center;display:inline-flex;:dir(rtl){transform:scaleX(-1);}}" }
}, "breadcrumbs-item-3a0e6d");
export const useBreadcrumbsItem = composeHooks(useOverflowListItemMeasure, useListItemRegister);
export const BreadcrumbsItem = createSubcomponent('li')({
displayName: 'Breadcrumbs.Item',
modelHook: useBreadcrumbsModel,
elemPropsHook: useBreadcrumbsItem,
subComponents: {
Link: BreadcrumbsLink,
},
})(({ children, ...elemProps }, Element) => {
return (_jsxs(Element, { ...mergeStyles(elemProps, breadcrumbsItemStencil()), children: [children, _jsx(SystemIcon, { icon: chevronRightSmallIcon, ...breadcrumbsItemStencil.parts.chevronRightIcon, "aria-hidden": true })] }));
});