@purpurds/breadcrumbs 6.12.5 → 7.1.0

package/src/breadcrumbs.tsx

@@ -1,65 +1,85 @@
-import React, { Children, cloneElement, createElement, ReactElement } from "react";
+import React, {
+  type AnchorHTMLAttributes,
+  Children,
+  cloneElement,
+  type ForwardRefExoticComponent,
+  type ReactElement,
+} from "react";
 import { IconHome } from "@purpurds/icon/home";
-import c from "classnames";
+import c from "classnames/bind";
 
 import styles from "./breadcrumbs.module.scss";
 import { MetaListItem, metaListItem, metaSchema } from "./meta";
 import { DataAttributes } from "./types.ts";
 
-export type BreadcrumbsProps = React.HTMLAttributes<HTMLElement> &
+const cx = c.bind(styles);
+
+type WithMeta = {
+  meta?: true;
+  baseUrl: string;
+};
+
+type WithoutMeta = {
+  meta: false;
+  baseUrl?: never;
+};
+
+export type BreadcrumbsProps = Omit<React.HTMLAttributes<HTMLElement>, "aria-label"> &
   DataAttributes & {
-    ariaLabel?: string;
+    /** Describes the breadcrumb navigation for screen readers, e.g. "Breadcrumbs" or "Breadcrumb navigation". */
+    ["aria-label"]: string;
     children: ReactElement<BreadcrumbsItemProps> | Array<ReactElement<BreadcrumbsItemProps>>;
-    /** Set to generate breadcrumbs metadata for crawlers. Defaults to true. */
-    meta?: boolean;
     /** Set to render the breadcrumbs with light font color. Ideally used when rendered on dark backgrounds. */
     negative?: boolean;
     /** Set to render the last breadcrumb item in bold font to indicate that this is the current page. Setting this to false will render the last item as a normal breadcrumb link. Defaults to true. */
     highlightLast?: boolean;
     /** Set to not render the home icon in front of the first breadcrumb item. */
     hideHomeIcon?: boolean;
-  };
+    linkElement?: ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement>> | "a";
+  } & (WithMeta | WithoutMeta);
 
-type CommonItemProps = Omit<React.HTMLAttributes<HTMLLIElement>, "onClick"> &
+export type BreadcrumbsItemProps = Omit<
+  React.HTMLAttributes<HTMLLIElement>,
+  "onClick" | "children"
+> &
   DataAttributes & {
+    children: string;
+    href?: string;
+    onClick?: () => void;
+    /** @ignore */
     current?: boolean;
-    negative?: boolean;
-    ariaLabel?: string;
+    /** @ignore */
+    first?: boolean;
+    /** @ignore */
+    last?: boolean;
+    /** @ignore */
+    linkElement?: BreadcrumbsProps["linkElement"];
+    /** @ignore */
     meta?: boolean;
-    onClick?: () => void;
+    /** @ignore */
+    negative?: boolean;
   };
 
-export type BreadcrumbsItemProps = CommonItemProps & Conditional;
-
-type Conditional =
-  | {
-      href?: string;
-      children: string;
-    }
-  | {
-      href?: never;
-      children: ReactElement<HTMLAnchorElement>;
-    };
-
 const rootClassName = "purpur-breadcrumbs";
 const itemClassName = "purpur-breadcrumb-item";
 
 const Breadcrumbs = ({
-  ariaLabel,
+  ["aria-label"]: ariaLabel,
+  baseUrl,
   children,
   className,
+  linkElement = "a",
   meta = true,
   negative = false,
   highlightLast = true,
   hideHomeIcon,
   ...props
 }: BreadcrumbsProps) => {
-  const classes = c([
+  const classes = cx([
     className,
-    styles[rootClassName],
-    styles[`${rootClassName}--${negative ? "negative" : "default"}`],
+    rootClassName,
+    `${rootClassName}--${negative ? "negative" : "default"}`,
   ]);
-
   const maxIndex = Children.count(children);
 
   const metaListItems: MetaListItem[] = [];
@@ -69,39 +89,16 @@ const Breadcrumbs = ({
     const last = maxIndex === position;
     const current = highlightLast && last;
 
-    const grandChildren = item.props.children;
-    const grandGrandChildren = typeof grandChildren === "string" ? null : grandChildren.props;
-
-    let name = null,
-      href = null;
+    const { children, href } = item.props;
 
-    if (typeof grandChildren === "string") {
-      name = grandChildren;
-      href = item.props.href;
-    } else if (grandGrandChildren?.children && typeof grandGrandChildren?.children === "string") {
-      name = grandGrandChildren.children;
-      href = grandGrandChildren.href;
-    }
-
-    if (name && href) {
-      metaListItems.push(metaListItem(name, href, position));
-    }
+    metaListItems.push(metaListItem(children, position, href && `${baseUrl}${href}`));
 
     const child = cloneElement(item, {
       current,
       negative,
-      ...(position === 1 && {
-        children: (
-          <>
-            {!hideHomeIcon ? (
-              <span className={styles[`${rootClassName}__home`]} aria-hidden="true">
-                <IconHome size="xs" />
-              </span>
-            ) : null}
-            {item.props.children}
-          </>
-        ),
-      }),
+      first: !hideHomeIcon && position === 1,
+      last,
+      linkElement,
     });
 
     return child;
@@ -110,7 +107,7 @@ const Breadcrumbs = ({
   const schema = metaListItems.length === maxIndex ? metaSchema(metaListItems) : null;
 
   return (
-    <nav aria-label={ariaLabel || "Breadcrumb"} className={classes} {...props}>
+    <nav aria-label={ariaLabel} className={classes} {...props}>
       <ol className={styles[`${rootClassName}__list`]}>{items}</ol>
       {meta && schema ? (
         <script
@@ -128,39 +125,47 @@ const Item = ({
   ["data-testid"]: dataTestId,
   children,
   current = false,
+  linkElement = "a",
   negative = false,
   onClick,
-  ...rest
+  first = false,
+  last = false,
+  ...props
 }: BreadcrumbsItemProps) => {
-  const classes = c(
-    [styles[itemClassName], styles[`${itemClassName}--${negative ? "negative" : "default"}`]],
+  const LinkElement = linkElement;
+  const classes = cx(
+    [itemClassName],
+    styles[`${itemClassName}--${negative ? "negative" : "default"}`],
     {
-      [styles[`${itemClassName}--current`]]: current,
+      [`${itemClassName}--current`]: current,
     }
   );
 
-  const link = () => {
-    const commonProps = {
-      href,
-      ["data-testid"]: dataTestId,
-      "aria-current": current ? "page" : undefined,
-      onClick,
-    };
-
-    const component =
-      href || typeof children === "string"
-        ? createElement("a", commonProps, children)
-        : cloneElement(children, {
-            ...commonProps,
-            ...children.props,
-          });
-
-    return component;
-  };
-
   return (
-    <li {...rest} className={classes}>
-      {link()}
+    <li {...props} className={classes}>
+      {!last ? (
+        <LinkElement
+          href={href}
+          data-testid={dataTestId}
+          onClick={onClick}
+          className={cx(`${itemClassName}__element`, `${itemClassName}__link`)}
+        >
+          {first && (
+            <span className={styles[`${itemClassName}__home`]} aria-hidden="true">
+              <IconHome size="xs" />
+            </span>
+          )}
+          {children}
+        </LinkElement>
+      ) : (
+        <span
+          aria-current="page"
+          data-testid={dataTestId}
+          className={cx(`${itemClassName}__element`)}
+        >
+          {children}
+        </span>
+      )}
     </li>
   );
 };

package/src/meta.ts

@@ -2,17 +2,24 @@ export type MetaListItem = {
   "@type": string;
   position: number;
   name: string;
-  item: string;
+  item?: string;
 };
 
-type MakeMetaListItem = (name: string, item: string, position: number) => MetaListItem;
+type MakeMetaListItem = (name: string, position: number, item?: string) => MetaListItem;
 
-export const metaListItem: MakeMetaListItem = (name, item, position) => ({
-  "@type": "ListItem",
-  position,
-  name,
-  item,
-});
+export const metaListItem: MakeMetaListItem = (name, position, item) => {
+  const schema: MetaListItem = {
+    "@type": "ListItem",
+    position,
+    name,
+  };
+
+  if (item) {
+    schema.item = item;
+  }
+
+  return schema;
+};
 
 export const metaSchema = (itemListElement: MetaListItem[]) =>
   JSON.stringify({