style: breadcrumbs

documentation/demopages/nl-design-system/algemeen/Breadcrumbs.tsx

@@ -0,0 +1,59 @@
+import { Header } from '@nl-rvo/components/header/css/template';
+import { LayoutColumnRow } from '@nl-rvo/components/layout-column-row/css/template';
+import { MaxWidthLayout } from '@nl-rvo/components/max-width-layout/css/template';
+import { MenuBar } from '@nl-rvo/components/menubar/css/template';
+import { Heading1, Link, OrderedList, OrderedListItem, Paragraph } from '@utrecht/component-library-react';
+import '../common/style.scss';
+import { defaultMenuBarItems } from '../../common/defaultMenuBarItems';
+
+const Breadcrumbs = () => {
+  return (
+    <div className="rvo-nl-demo-page">
+      <Header />
+      <LayoutColumnRow size="md">
+        <MenuBar items={defaultMenuBarItems} size="md" useIcons={true} iconPlacement="before" />
+        <MaxWidthLayout size="md">
+          <main>
+            <nav className="utrecht-breadcrumb">
+              <OrderedList className="utrecht-breadcrumb__list">
+                <OrderedListItem className="utrecht-breadcrumb__item">
+                  <Link href="#" className="utrecht-breadcrumb__link">
+                    First step
+                  </Link>
+                </OrderedListItem>
+                <OrderedListItem className="utrecht-breadcrumb__item">
+                  <i className="rvo-icon rvo-icon-delta-naar-rechts rvo-icon--xs rvo-icon--hemelblauw"></i>
+                  <Link href="#" className="utrecht-breadcrumb__link">
+                    Second step
+                  </Link>
+                </OrderedListItem>
+                <OrderedListItem className="utrecht-breadcrumb__item">
+                  <i className="rvo-icon rvo-icon-delta-naar-rechts rvo-icon--xs rvo-icon--hemelblauw"></i>
+                  <Link href="#" className="utrecht-breadcrumb__link">
+                    Third step
+                  </Link>
+                </OrderedListItem>
+                <OrderedListItem className="utrecht-breadcrumb__item">
+                  <i className="rvo-icon rvo-icon-delta-naar-rechts rvo-icon--xs rvo-icon--hemelblauw"></i>
+                  Current page
+                </OrderedListItem>
+              </OrderedList>
+            </nav>
+            <div className="rvo-content">
+              <Heading1>Breadcrumbs example</Heading1>
+              <Paragraph>
+                <strong>Paragraph medium.</strong> De overheid zet zich in voor een uitstekend ondernemersklimaat. De
+                ministeries stippelen daar beleid voor uit. En de taak om dit uit te voeren ligt bij RVO: de Rijksdienst
+                voor Ondernemend Nederland. Onze mensen maken wereldwijd verbinding.{' '}
+                <Link href="#">Dit is een link. </Link> Tussen bedrijven, kennis- en financiële instellingen, ambassades
+                en lokale overheden.
+              </Paragraph>
+            </div>
+          </main>
+        </MaxWidthLayout>
+      </LayoutColumnRow>
+    </div>
+  );
+};
+
+export default Breadcrumbs;

documentation/demopages/nl-design-system/algemeen/algemeen.stories.mdx

@@ -1,5 +1,6 @@
 import frameworkDecorator from "@nl-rvo/storybook/frameworkDecorator";
 import { Canvas, Meta, Story } from "@storybook/addon-docs";
+import Breadcrumbs from "./Breadcrumbs";
 import Content from "./Content";
 import Formulier from "./Formulier";
 
@@ -32,3 +33,9 @@ import Formulier from "./Formulier";
     <Content />
   </Story>
 </Canvas>
+
+<Canvas>
+  <Story name="Breadcrumbs">
+    <Breadcrumbs />
+  </Story>
+</Canvas>

documentation/demopages/nl-design-system/common/mixins/_breadcrumbs.scss

@@ -1,26 +1,39 @@
+/**
+ * This file temporary and rules should be available inside the Utrecht Breadcrumb component
+ */
 @mixin breadcrumbs {
   /* @BREADCRUMBS */
 
-  ol.rvo-breadcrumbs__list {
-    display: flex;
-    gap: var(--rvo-space-xs);
-    list-style: none;
-    margin-block-end: 0;
-    padding-inline-start: 0;
-  }
+  .utrecht-breadcrumb {
+    align-items: baseline;
 
-  .rvo-breadcrumbs__list-item .rvo-link {
-    font-size: var(--rvo-font-size-sm);
-    text-decoration: none;
-  }
+    &__item {
+      align-items: baseline;
+      display: inline-flex;
 
-  .rvo-breadcrumbs__list-item .rvo-link:hover,
-  .rvo-breadcrumbs__list-item .rvo-link:focus,
-  .rvo-breadcrumbs__list-item .rvo-link:active {
-    text-decoration: underline;
-  }
+      /* Add as gap in utrecht breadcrumb tokens */
+      & > * {
+        margin-inline-end: var(--utrecht-breadcrumb-item-gap, 0);
+      }
+    }
+
+    /* Add to link element in utrecht breadcrumb tokens */
+    &__link {
+      text-decoration: var(--utrecht-breadcrumb-link-text-decoration);
+
+      &:hover {
+        text-decoration: var(--utrecht-breadcrumb-link-hover-text-decoration);
+        text-decoration-thickness: var(--utrecht-breadcrumb-link-hover-text-decoration-thickness);
+      }
+
+      &:focus {
+        text-decoration: var(--utrecht-breadcrumb-link-focus-text-decoration);
+        text-decoration-thickness: var(--utrecht-breadcrumb-link-focus-text-decoration-thickness);
+      }
 
-  .rvo-breadcrumb-current-page {
-    font-size: var(--rvo-font-size-sm);
+      &:active {
+        text-decoration: var(--utrecht-breadcrumb-link-active-text-decoration);
+      }
+    }
   }
 }

documentation/demopages/nl-design-system/common/style.scss

@@ -21,7 +21,9 @@
   @include mixins.spacers;
 
   // @include mixins.date;
-  // @include mixins.breadcrumbs;
+
+  @include mixins.breadcrumbs;
+
   // @include mixins.button;
   // @include mixins.filters;
   // @include mixins.tags;

proprietary/design-tokens/package.json

@@ -19,9 +19,10 @@
   "scripts": {
     "clean": "rimraf dist/",
     "prebuild": "npm run clean",
-    "build": "style-dictionary build --config ./src/style-dictionary.config.js",
+    "build": "npm-run-all build:**",
+    "build:style-dictionary": "style-dictionary build --config ./src/style-dictionary.config.js",
     "watch": "npm-run-all watch:**",
-    "watch:style-dictionary": "chokidar --follow-symlinks --initial --command 'npm run build' './src/**/*.tokens.json'"
+    "watch:style-dictionary": "chokidar --follow-symlinks --initial --command 'npm run build:style-dictionary' './src/**/*.tokens.json'"
   },
   "devDependencies": {
     "chokidar-cli": "3.0.0",

proprietary/design-tokens/src/components/utrecht/breadcrumbs.tokens.json

@@ -0,0 +1,64 @@
+{
+  "utrecht": {
+    "breadcrumb": {
+      "block-size": {},
+      "font-family": {},
+      "font-size": {
+        "value": "{rvo.font-size.sm}"
+      },
+      "text-transform": {},
+      "divider": {
+        "inline-size": {}
+      },
+      "item": {
+        "gap": {
+          "value": "{rvo.space.xs}"
+        },
+        "padding-block-start": {
+          "value": "0"
+        },
+        "padding-block-end": {
+          "value": "0"
+        },
+        "padding-inline-end": {
+          "value": "0"
+        },
+        "padding-inline-start": {
+          "value": "0"
+        }
+      },
+      "link": {
+        "background-color": {},
+        "color": {
+          "value": "{rvo.link.color}"
+        },
+        "focus": {
+          "background-color": {
+            "value": "{rvo.color.hemelblauw-tint2}"
+          },
+          "color": {
+            "value": "{rvo.color.zwart}"
+          },
+          "text-decoration": {
+            "value": "underline"
+          },
+          "text-decoration-thickness": {
+            "value": "{rvo.link.focus.text-decoration-thickness}"
+          }
+        },
+        "hover": {
+          "color": {},
+          "text-decoration": {
+            "value": "underline"
+          },
+          "text-decoration-thickness": {
+            "value": "{rvo.link.hover.text-decoration-thickness}"
+          }
+        },
+        "text-decoration": {
+          "value": "none"
+        }
+      }
+    }
+  }
+}