♻️ - fix: pr fixes

.storybook/preview.tsx

@@ -11,19 +11,6 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
-    backgrounds: {
-      default: "default-storybook-background",
-      values: [
-        {
-          name: "default-storybook-background",
-          value: "#ffffff",
-        },
-        {
-          name: "mykn-light",
-          value: "#ecf1ff",
-        },
-      ],
-    },
     layout: "fullscreen",
   },
 };

package.json

@@ -90,7 +90,6 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.6",
     "@heroicons/react": "^2.1.1",
-    "clsx": "^2.1.0",
-    "storybook-addon-react-router-v6": "^2.0.10"
+    "clsx": "^2.1.0"
   }
 }

src/components/breadcrumbs/breadcrumbs.scss

@@ -1,37 +1,35 @@
 .mykn-breadcrumbs {
   display: flex;
 
-  &__separator {
-    color: var(--theme-color-primary-800);
-    margin-left: 4px;
+  &__list {
+    display: grid;
+    grid-auto-flow: column;
+    gap: var(--spacing-v-m);
+    list-style: none;
   }
 
-  & ol {
-    display: flex;
-    flex-wrap: wrap;
-    list-style: none;
+  &__item {
+    display: grid;
+    grid-auto-flow: column;
+    gap: var(--spacing-v-xs);
+    align-items: center;
+    color: var(--theme-shade-600);
 
-    a,
-    li {
-      font-size: var(--typography-font-size-body-xs);
+    &--last {
+      color: var(--theme-color-primary-800);
     }
+  }
 
-    li {
-      display: flex;
-      align-items: center;
-      margin-right: 8px;
-      color: var(--theme-shade-600);
-
-      &:last-child {
-        margin-right: 0;
-        color: var(--theme-color-primary-800);
-      }
+  &__link {
+    cursor: pointer;
+    text-decoration: none;
+    color: inherit;
+    font-size: var(--typography-font-size-body-xs);
+  }
 
-      a {
-        cursor: pointer;
-        margin-right: 4px;
-        color: var(--theme-shade-600);
-      }
-    }
+  &__separator {
+    color: var(--theme-color-primary-800);
+    height: 20px;
+    width: 20px;
   }
 }

src/components/breadcrumbs/breadcrumbs.stories.tsx

@@ -1,19 +1,39 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { withRouter } from "storybook-addon-react-router-v6";
+import React from "react";
 
+import { Page } from "../page";
 import { Breadcrumbs } from "./breadcrumbs";
 
 const meta = {
-  title: "Uncategorized/Breadcrumbs",
+  title: "Controls/Breadcrumbs",
   component: Breadcrumbs,
-  decorators: [withRouter],
+  decorators: [
+    (Story) => (
+      <Page>
+        <Story />
+      </Page>
+    ),
+  ],
 } satisfies Meta<typeof Breadcrumbs>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const BreadcrumbsComponent: Story = {
   args: {
-    pathnames: ["...", "Zaaktype", "Zaaktype detail"],
+    pathItems: [
+      {
+        label: "Home",
+        path: "/",
+      },
+      {
+        label: "Breadcrumbs",
+        path: "/breadcrumbs",
+      },
+      {
+        label: "Current page",
+        path: "/breadcrumbs/current",
+      },
+    ],
   },
 };

src/components/breadcrumbs/breadcrumbs.tsx

@@ -1,5 +1,5 @@
+import clsx from "clsx";
 import React from "react";
-import { useLocation } from "react-router-dom";
 
 import { Outline } from "../icon";
 import { Toolbar, ToolbarProps } from "../toolbar";
@@ -8,48 +8,57 @@ import { Li } from "../typography/li";
 import { Ol } from "../typography/ol";
 import "./breadcrumbs.scss";
 
+export type BreadcrumbItem = {
+  /** The label of the item. */
+  label: string;
+
+  /** The path of the item. */
+  path: string;
+};
+
 export type BreadcrumbsProps = ToolbarProps & {
-  pathnames?: string[];
+  /** The path */
+  pathItems: BreadcrumbItem[];
+
+  /** Optional onClick handler, gets called when the item is clicked. */
+  onClick?: (path: string) => void;
 };
 
 /**
  * Breadcrumbs component
- * @param pathnames the pathnames to display, if not provided it will be filled by `useLocation`
+ * @param pathItems the path items to display
+ * @param onClick the onClick handler that will be called when the item is clicked
  * @param props the Toolbar props
  * @constructor
  */
-
 export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
-  pathnames,
+  pathItems,
+  onClick,
   ...props
 }) => {
-  const location = useLocation();
-  const locationPathnames = location.pathname.split("/").filter((x) => x);
-  const locationPathnamesWithHome =
-    locationPathnames.length > 0 ? ["....", ...locationPathnames] : ["..."];
-
-  const _pathnames = pathnames ?? locationPathnamesWithHome;
-
   return (
     <Toolbar className="mykn-breadcrumbs" {...props}>
-      <Ol>
-        {_pathnames.map((value, index) => {
-          const last = index === _pathnames.length - 1;
-          const to = `/${_pathnames.slice(0, index + 1).join("/")}`;
+      <Ol className="mykn-breadcrumbs__list">
+        {pathItems.map((item, index) => {
+          const isLastItem = index === pathItems.length - 1;
 
           return (
-            <Li key={to} size="xs">
-              {last ? (
-                <span>{value}</span>
-              ) : (
-                <>
-                  <A>{value}</A>
-                  <Outline.ChevronRightIcon
-                    height={20}
-                    width={20}
-                    className="mykn-breadcrumbs__separator"
-                  />
-                </>
+            <Li
+              key={item.path}
+              size="xs"
+              className={clsx("mykn-breadcrumbs__item", {
+                "mykn-breadcrumbs__item--last": isLastItem,
+              })}
+            >
+              <A
+                href={item.path}
+                onClick={() => onClick?.(item.path)}
+                className="mykn-breadcrumbs__link"
+              >
+                {item.label}
+              </A>
+              {!isLastItem && (
+                <Outline.ChevronRightIcon className="mykn-breadcrumbs__separator" />
               )}
             </Li>
           );

src/components/typography/li/li.tsx

@@ -1,20 +1,36 @@
 import clsx from "clsx";
 import React from "react";
 
-import { PProps } from "../p";
 import "./li.scss";
 
-export type LiProps = PProps;
+export type LiProps = React.PropsWithChildren<
+  {
+    /** The size of the text. */
+    size?: "s" | "xs";
+
+    /** Additional class names to apply to the component */
+    className?: string;
+  } & React.HTMLAttributes<HTMLLIElement>
+>;
 
 /**
  * Li component
  * @param children
  * @param size
+ * @param className
  * @param props
  * @constructor
  */
-export const Li: React.FC<LiProps> = ({ children, size = "s", ...props }) => (
-  <li className={clsx("mykn-li", `mykn-li--size-${size}`)} {...props}>
+export const Li: React.FC<LiProps> = ({
+  children,
+  size = "s",
+  className,
+  ...props
+}) => (
+  <li
+    className={clsx("mykn-li", `mykn-li--size-${size}`, className)}
+    {...props}
+  >
     {children}
   </li>
 );

src/components/typography/ol/ol.tsx

@@ -4,17 +4,34 @@ import React from "react";
 import { PProps } from "../p";
 import "./ol.scss";
 
-export type OlProps = PProps;
+export type OlProps = React.PropsWithChildren<
+  {
+    /** The size of the text. */
+    size?: PProps["size"];
+
+    /** Additional class names to apply to the component */
+    className?: string;
+  } & React.HTMLAttributes<HTMLOListElement>
+>;
 
 /**
  * Ol component
  * @param children
  * @param size
+ * @param className
  * @param props
  * @constructor
  */
-export const Ol: React.FC<OlProps> = ({ children, size = "s", ...props }) => (
-  <ol className={clsx("mykn-ol", `mykn-ol--size-${size}`)} {...props}>
+export const Ol: React.FC<OlProps> = ({
+  children,
+  size = "s",
+  className,
+  ...props
+}) => (
+  <ol
+    className={clsx("mykn-ol", `mykn-ol--size-${size}`, className)}
+    {...props}
+  >
     {children}
   </ol>
 );

src/settings/tokens.css

@@ -41,6 +41,9 @@
   --gutter-h-mobile: 12px;
   --gutter-v-mobile: 12px;
 
+  --spacing-h-xs: 4px;
+  --spacing-v-xs: 4px;
+
   --spacing-h-s: 12px;
   --spacing-v-s: 6px;