feat: add breadcrumbs nav (#20)

Tokens don't work ATM --------- Co-authored-by: Mark Teekman <[email protected]>
nl-design-system · May 15, 2024 · e8b7164 · e8b7164
1 parent 94e92a9
commit e8b7164
Show file tree

Hide file tree

Showing 4 changed files with 205 additions and 1 deletion.
diff --git a/packages/storybook/config/ParametersArgsDecorator.tsx b/packages/storybook/config/ParametersArgsDecorator.tsx
@@ -1,11 +1,14 @@
 import type { Decorator } from '@storybook/react';
+import { Document } from '@utrecht/component-library-react/dist/css-module';
 
 export const ParametersArgsDecorator: Decorator = (Story, context) => {
   context.parameters['args'] = context.args;
 
   return (
     <div className="tilburg-theme">
-      <Story />
+      <Document>
+        <Story />
+      </Document>
     </div>
   );
 };
diff --git a/packages/storybook/src/css-breadcrumb-nav.stories.tsx b/packages/storybook/src/css-breadcrumb-nav.stories.tsx
@@ -0,0 +1,86 @@
+/* @license CC0-1.0 */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  BreadcrumbNav,
+  BreadcrumbNavLink,
+  BreadcrumbNavSeparator,
+} from '@utrecht/component-library-react/dist/css-module';
+import readme from './documentation/breadcrumb-nav.md?raw';
+
+const meta = {
+  title: 'CSS Component/Breadcrumb navigation',
+  id: 'css-utrecht-breadcrumb-nav',
+  component: BreadcrumbNav,
+  argTypes: {
+    children: {
+      name: 'Content',
+      type: {
+        name: 'string',
+        required: true,
+      },
+      defaultValue: '',
+    },
+  },
+  args: {
+    children: '',
+  },
+  tags: ['autodocs'],
+  parameters: {
+    bugs: 'https://github.com/nl-design-system/rotterdam/labels/component%2Fbreadcrumb-nav',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/ZWSC4gCrOXRUR9UX3aoZ8x/?node-id=501-18760',
+    },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+} satisfies Meta<typeof BreadcrumbNav>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: 'Breadcrumb navigation',
+  args: {
+    children: [
+      <BreadcrumbNavLink href="/" rel="home" index={0}>
+        Home
+      </BreadcrumbNavLink>,
+      <BreadcrumbNavSeparator>
+        <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em">
+          <path
+            fill-rule="evenodd"
+            d="M20.607 16 10 5.393l1.414-1.414L23.435 16l-12.02 12.02L10 26.608z"
+            clip-rule="evenodd"
+          ></path>
+        </svg>
+      </BreadcrumbNavSeparator>,
+      <BreadcrumbNavLink href="/a/" index={1}>
+        Parkeren in Tilburg
+      </BreadcrumbNavLink>,
+      <BreadcrumbNavSeparator>
+        <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em">
+          <path
+            fill-rule="evenodd"
+            d="M20.607 16 10 5.393l1.414-1.414L23.435 16l-12.02 12.02L10 26.608z"
+            clip-rule="evenodd"
+          ></path>
+        </svg>
+      </BreadcrumbNavSeparator>,
+      <BreadcrumbNavLink href="/a/b/" rel="up" index={2} disabled current>
+        Product aanvragen
+      </BreadcrumbNavLink>,
+    ],
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/ZWSC4gCrOXRUR9UX3aoZ8x/Gemeente-Rotterdam-Design-System?type=design&node-id=507-20062&mode=design&t=yvzUSkFQYQmWSHsQ-4',
+    },
+  },
+};
diff --git a/packages/storybook/src/documentation/breadcrumb-nav.md b/packages/storybook/src/documentation/breadcrumb-nav.md
@@ -0,0 +1,3 @@
+# Breadcrumb navigation
+
+The breadcrumb nav component is used to show the user's current location within a website or application. It is a secondary navigation scheme that allows the user to see where the current page is in relation to the hierarchy of the website or application.
diff --git a/proprietary/design-tokens/src/components/utrecht/breadcrumb-nav.tokens.json b/proprietary/design-tokens/src/components/utrecht/breadcrumb-nav.tokens.json
@@ -0,0 +1,112 @@
+{
+  "utrecht": {
+    "breadcrumb": {
+      "line-height": {
+        "value": "{tilburg.document.line-height}",
+        "type": "lineHeights"
+      },
+      "font-size": {
+        "value": "{tilburg.document.font-size}",
+        "type": "fontSizes"
+      },
+      "link": {
+        "icon": {
+          "size": {
+            "type": "sizing",
+            "value": "{tilburg.icon.functional.size}"
+          },
+          "margin-inline": {
+            "value": "{tilburg.space.text.beetle}",
+            "type": "spacing"
+          }
+        },
+        "padding-block-end": {
+          "value": "{tilburg.space.block.snail}",
+          "type": "spacing"
+        },
+        "padding-block-start": {
+          "value": "{tilburg.space.block.snail}",
+          "type": "spacing"
+        },
+        "padding-inline-end": {
+          "value": "0px",
+          "type": "spacing"
+        },
+        "padding-inline-start": {
+          "value": "0px",
+          "type": "spacing"
+        },
+        "color": {
+          "type": "color",
+          "value": "{tilburg.interaction.color}"
+        },
+        "active": {
+          "color": {
+            "type": "color",
+            "value": "{tilburg.interaction.active.color}"
+          },
+          "text-decoration": {
+            "value": "none",
+            "type": "textDecoration"
+          }
+        },
+        "focus": {
+          "background-color": {
+            "type": "color",
+            "value": "{tilburg.focus.background-color}"
+          },
+          "color": {
+            "type": "color",
+            "value": "{tilburg.focus.color}"
+          },
+          "text-decoration": {
+            "value": "none",
+            "type": "textDecoration"
+          }
+        },
+        "hover": {
+          "color": {
+            "type": "color",
+            "value": "{tilburg.interaction.hover.color}"
+          },
+          "text-decoration": {
+            "value": "none",
+            "type": "textDecoration"
+          }
+        },
+        "current": {
+          "color": {
+            "type": "color",
+            "value": "{tilburg.document.subtle.color}"
+          }
+        },
+        "text-decoration": {
+          "value": "underline",
+          "type": "textDecoration"
+        }
+      },
+      "divider": {
+        "size": {
+          "type": "sizing",
+          "value": "{tilburg.size.2xs}"
+        },
+        "color": {
+          "value": "{tilburg.document.subtle.color}",
+          "type": "color"
+        }
+      },
+      "margin-inline": {
+        "value": "{tilburg.space.inline.beetle}",
+        "type": "spacing"
+      },
+      "font-family": {
+        "value": "{tilburg.document.font-family}",
+        "type": "fontFamilies"
+      },
+      "font-weight": {
+        "value": "{tilburg.document.font-weight}",
+        "type": "fontWeights"
+      }
+    }
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Breadcrumb navigation

		The breadcrumb nav component is used to show the user's current location within a website or application. It is a secondary navigation scheme that allows the user to see where the current page is in relation to the hierarchy of the website or application.