UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

23 lines (22 loc) 1.42 kB
import * as React from 'react'; import { composeHooks, createSubcomponent, useIsRTL } from '@workday/canvas-kit-react/common'; import { useListItemRegister, useOverflowListItemMeasure, } from '@workday/canvas-kit-react/collection'; import { Flex } from '@workday/canvas-kit-react/layout'; import { SystemIcon } from '@workday/canvas-kit-react/icon'; import { chevronRightSmallIcon } from '@workday/canvas-system-icons-web'; import { colors, space } from '@workday/canvas-kit-react/tokens'; import { useBreadcrumbsModel } from './hooks/useBreadcrumbsModel'; import { BreadcrumbsLink } from './BreadcrumbsLink'; 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 (React.createElement(Flex, { as: Element, alignItems: "center", whiteSpace: "nowrap", ...elemProps }, children, React.createElement(SystemIcon, { icon: chevronRightSmallIcon, color: colors.licorice200, colorHover: colors.licorice200, size: 20, height: space.l, width: space.l, shouldMirror: useIsRTL(), cs: { justifyContent: 'center', alignItems: 'center', display: 'inline-flex' }, "aria-hidden": true }))); });