fix: add component classes to Breadcrumbs (#23)

* apply component classes to breadcrumbs

* return styled span elements with aria-current attr if children are strings

docs/src/Main.tsx

@@ -7,13 +7,13 @@ import {
   Switch as ReactSwitch,
 } from 'react-router-dom';
 import Alert from '../../packages/alert/docs/Alert.mdx';
+import Breadcrumbs from '../../packages/breadcrumbs/docs/Breadcrumbs.mdx';
 import Button from '../../packages/button/docs/Button.mdx';
 import TextField from '../../packages/textfield/docs/TextField.mdx';
 import TextArea from '../../packages/textarea/docs/TextArea.mdx';
 import Box from '../../packages/box/docs/Box.mdx';
 
 /*
-import Breadcrumbs from '../../packages/breadcrumbs/docs/Breadcrumbs.mdx';
 import Pill from '../../packages/pill/docs/Pill.mdx';
 import Card from '../../packages/card/docs/Card.mdx';
 import Combobox from '../../packages/combobox/docs/Combobox.mdx';
@@ -70,15 +70,15 @@ const App = () => {
           <Route path="/box">
             <Box />
           </Route>
+          <Route path="/breadcrumbs">
+            <Breadcrumbs />
+          </Route>
 
           {/*
           <Route path="/modal">
             <Modal />
           </Route>
-
-          <Route path="/breadcrumbs">
-            <Breadcrumbs />
-          </Route>
+        
 
           <Route path="/attention">
             <Attention />

package.json

@@ -101,7 +101,7 @@
   },
   "dependencies": {
     "@chbphone55/classnames": "^2.0.0",
-    "@warp-ds/component-classes": "^1.0.0-alpha.40",
+    "@warp-ds/component-classes": "^1.0.0-alpha.44",
     "@warp-ds/core": "^1.0.0",
     "react-focus-lock": "^2.5.2",
     "resize-observer-polyfill": "^1.5.1",

packages/breadcrumbs/docs/Breadcrumbs.mdx

@@ -16,9 +16,9 @@ import { Breadcrumbs } from '@warp-ds/react';
 <Breadcrumbs>
   <a href="#/url/1">Eiendom</a>
   <a href="#/url/2">Bolig til salgs</a>
-  <a href="#/url/3" aria-current="page">
+  <span aria-current="page">
     Oslo
-  </a>
+  </span>
 </Breadcrumbs>
 ```
 

packages/breadcrumbs/src/component.tsx

@@ -1,30 +1,47 @@
 import * as React from 'react';
-import { classNames } from '@chbphone55/classnames';
 import type { BreadcrumbsProps } from './props';
 import { interleave } from '@warp-ds/core/breadcrumbs';
+import { breadcrumbs as ccBreadcrumbs } from "@warp-ds/component-classes";
 
 export const Breadcrumbs = (props: BreadcrumbsProps) => {
   const { children, className, ...rest } = props;
   const ariaLabel = props['aria-label'] || 'Her er du';
 
   // Handles arrays of nodes passed as children
   const flattenedChildren = children.flat(Infinity);
+  const styledChildren = flattenedChildren.map((child, index) => {
+      if (React.isValidElement(child)) {
+        const ccClasses = child.type === "a" ? ccBreadcrumbs.link : ccBreadcrumbs.text;
+        const newClasses = child.props.className ? `${child.props.className} ${ccClasses}` : ccClasses;
+
+       // To update a prop on React child element, we need to clone that Element first
+        const styledChild = React.cloneElement(child as React.ReactElement, { className: newClasses });
+        return styledChild;
+      }
+
+      const isLastEl = index === flattenedChildren.length - 1;
+
+      return <span className={ccBreadcrumbs.text} aria-current={isLastEl ? "page" : undefined}>{child}</span>;
+    }
+  )
 
   return (
     <nav
-      className={classNames('flex space-x-8 space-x-reverse', className)}
+      className={className}
       aria-label={ariaLabel}
       {...rest}
     >
-      <h2 className="sr-only">{ariaLabel}</h2>
-      {interleave(
-        flattenedChildren,
-        <span aria-hidden className="select-none">
-          /
-        </span>,
-      ).map((element, index) => (
-        <React.Fragment key={index}>{element}</React.Fragment>
-      ))}
+      <h2 className={ccBreadcrumbs.a11y}>{ariaLabel}</h2>
+      <div className={ccBreadcrumbs.wrapper}>
+        {interleave(
+          styledChildren,
+          <span aria-hidden className={ccBreadcrumbs.separator}>
+            /
+          </span>,
+        ).map((element, index) => (
+          <React.Fragment key={index}>{element}</React.Fragment>
+        ))}
+      </div>
     </nav>
   );
 };

packages/breadcrumbs/stories/Breadcrumbs.stories.tsx

@@ -92,3 +92,9 @@ export const ExampleWithNestedArrays = () => {
     </Breadcrumbs>
   );
 };
+
+export const ExampleWithStringArray = () => (
+  <Breadcrumbs>
+    {["Page 1", "Current Page"]}
+  </Breadcrumbs>
+);

packages/index.ts

@@ -3,8 +3,8 @@ export * from './alert/src';
 export * from './button/src';
 export * from './textarea/src';
 export * from './textfield/src';
-/* export * from './box/src';
 export * from './breadcrumbs/src';
+/* export * from './box/src';
 export * from './attention/src';
 export * from './pill/src';
 export * from './card/src';