UNPKG

@postenbring/hedwig-react

Version:

React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).

1 lines 1.69 kB
{"version":3,"sources":["../src/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactElement, type ReactNode } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\n\nexport interface BreadcrumbsProps extends HTMLAttributes<HTMLOListElement> {\n children: ReactNode | ReactElement<HTMLLIElement> | ReactElement<HTMLLIElement>[];\n\n /**\n * Props passed to the `ol` html element\n */\n olProps?: HTMLAttributes<HTMLElement>;\n}\n\n/**\n * A breadcrumbs navigation menu\n *\n * @example\n *\n * ```tsx\n * <Breadcrumbs data-testid=\"breadcrumbs\">\n * <li><Link href=\"../\">Previous page</Link></li>\n * <li aria-current=\"page\">Current page</li>\n * </Breadcrumbs>\n * ```\n *\n * Outputs this html structure\n *\n * ```html\n * <nav data-testid=\"breadcrumbs\">\n * <ol>\n * <li><a href=\"../\">Previous page</a></li>\n * <li aria-current=\"page\">Current page</li>\n * </ol>\n * </nav>\n * ```\n */\nexport const Breadcrumbs = forwardRef<HTMLDivElement, BreadcrumbsProps>(\n ({ olProps, children, ...rest }, ref) => {\n return (\n <nav ref={ref} {...rest}>\n <ol {...olProps} className={clsx(\"hds-breadcrumbs\", olProps?.className as undefined)}>\n {children}\n </ol>\n </nav>\n );\n },\n);\nBreadcrumbs.displayName = \"Breadcrumbs\";\n"],"mappings":";;;;;;;AAAA,SAAS,kBAA0E;AACnF,SAAS,YAAY;AAsCb;AAJD,IAAM,cAAc;AAAA,EACzB,CAAC,IAAgC,QAAQ;AAAxC,iBAAE,WAAS,SApCd,IAoCG,IAAwB,iBAAxB,IAAwB,CAAtB,WAAS;AACV,WACE,oBAAC,sCAAI,OAAc,OAAlB,EACC,8BAAC,uCAAO,UAAP,EAAgB,WAAW,KAAK,mBAAmB,mCAAS,SAAsB,GAChF,WACH,IACF;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;","names":[]}