Add ROOS 2.0 design token docpages to Storybook

nl-design-system · Dec 4, 2023 · 48322bd · 48322bd
1 parent 93506a6
commit 48322bd
Showing 29 changed files with 138 additions and 5 deletions.
diff --git a/documentation/package.json b/documentation/package.json
@@ -11,6 +11,7 @@
   "devDependencies": {
     "@nl-rvo/components": "workspace:*",
     "@nl-rvo/design-tokens": "workspace:*",
+    "@nl-rvo/rijkshuisstijl-design-tokens": "workspace:*",
     "clsx": "1.2.1",
     "html-react-parser": "3.0.1"
   },

diff --git a/...gn-tokens/design-tokens.color.docpage.mdx → ...ens-roos1/design-tokens.color.docpage.mdx b/...gn-tokens/design-tokens.color.docpage.mdx → ...ens-roos1/design-tokens.color.docpage.mdx
@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/blocks";
 import Doc from "./design-tokens.color.mdx";
 
-<Meta title="Huisstijl/Color" />
+<Meta title="Huisstijl/ROOS 1.0/Color" />
 
 <Doc />
diff --git a/...tokens/design-tokens.color.docusaurus.mdx → ...-roos1/design-tokens.color.docusaurus.mdx b/...tokens/design-tokens.color.docusaurus.mdx → ...-roos1/design-tokens.color.docusaurus.mdx
diff --git a/...ges/design-tokens/design-tokens.color.mdx → ...sign-tokens-roos1/design-tokens.color.mdx b/...ges/design-tokens/design-tokens.color.mdx → ...sign-tokens-roos1/design-tokens.color.mdx
diff --git a/...ign-tokens/design-tokens.size.docpage.mdx → ...kens-roos1/design-tokens.size.docpage.mdx b/...ign-tokens/design-tokens.size.docpage.mdx → ...kens-roos1/design-tokens.size.docpage.mdx
@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/blocks";
 import Doc from "./design-tokens.size.mdx";
 
-<Meta title="Huisstijl/Size" />
+<Meta title="Huisstijl/ROOS 1.0/Size" />
 
 <Doc />
diff --git a/...-tokens/design-tokens.size.docusaurus.mdx → ...s-roos1/design-tokens.size.docusaurus.mdx b/...-tokens/design-tokens.size.docusaurus.mdx → ...s-roos1/design-tokens.size.docusaurus.mdx
diff --git a/...ages/design-tokens/design-tokens.size.mdx → ...esign-tokens-roos1/design-tokens.size.mdx b/...ages/design-tokens/design-tokens.size.mdx → ...esign-tokens-roos1/design-tokens.size.mdx
diff --git a/...gn-tokens/design-tokens.space.docpage.mdx → ...ens-roos1/design-tokens.space.docpage.mdx b/...gn-tokens/design-tokens.space.docpage.mdx → ...ens-roos1/design-tokens.space.docpage.mdx
@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/blocks";
 import Doc from "./design-tokens.space.mdx";
 
-<Meta title="Huisstijl/Space" />
+<Meta title="Huisstijl/ROOS 1.0/Space" />
 
 <Doc />
diff --git a/...tokens/design-tokens.space.docusaurus.mdx → ...-roos1/design-tokens.space.docusaurus.mdx b/...tokens/design-tokens.space.docusaurus.mdx → ...-roos1/design-tokens.space.docusaurus.mdx
diff --git a/...ges/design-tokens/design-tokens.space.mdx → ...sign-tokens-roos1/design-tokens.space.mdx b/...ges/design-tokens/design-tokens.space.mdx → ...sign-tokens-roos1/design-tokens.space.mdx
diff --git a/...kens/design-tokens.typography.docpage.mdx → ...oos1/design-tokens.typography.docpage.mdx b/...kens/design-tokens.typography.docpage.mdx → ...oos1/design-tokens.typography.docpage.mdx
@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/blocks";
 import Doc from "./design-tokens.typography.mdx";
 
-<Meta title="Huisstijl/Font" />
+<Meta title="Huisstijl/ROOS 1.0/Font" />
 
 <Doc />
diff --git a/...s/design-tokens.typography.docusaurus.mdx → ...1/design-tokens.typography.docusaurus.mdx b/...s/design-tokens.typography.docusaurus.mdx → ...1/design-tokens.typography.docusaurus.mdx
diff --git a/...esign-tokens/design-tokens.typography.mdx → ...tokens-roos1/design-tokens.typography.mdx b/...esign-tokens/design-tokens.typography.mdx → ...tokens-roos1/design-tokens.typography.mdx
diff --git a/documentation/pages/design-tokens-roos2/design-tokens.color.docpage.mdx b/documentation/pages/design-tokens-roos2/design-tokens.color.docpage.mdx
@@ -0,0 +1,6 @@
+import { Meta } from "@storybook/blocks";
+import Doc from "./design-tokens.color.mdx";
+
+<Meta title="Huisstijl/ROOS 2.0 (Rijkshuisstijl)/Color" />
+
+<Doc />
diff --git a/documentation/pages/design-tokens-roos2/design-tokens.color.docusaurus.mdx b/documentation/pages/design-tokens-roos2/design-tokens.color.docusaurus.mdx
@@ -0,0 +1,9 @@
+---
+title: Color
+hide_title: false
+slug: color
+---
+
+import Doc from "./design-tokens.color.mdx";
+
+<Doc />
diff --git a/documentation/pages/design-tokens-roos2/design-tokens.color.mdx b/documentation/pages/design-tokens-roos2/design-tokens.color.mdx
@@ -0,0 +1,8 @@
+import designTokens from "@nl-rvo/rijkshuisstijl-design-tokens/dist/index.json";
+import { ColorDesignTokens } from "../../components/design-tokens/ColorDesignTokens";
+
+export const tokens = designTokens.filter(({ filePath }) => filePath.includes("src/brand/rvo/color.tokens.json"));
+
+<span>Er zijn {tokens.length} design tokens voor kleuren.</span>
+
+<ColorDesignTokens tokens={tokens} />
diff --git a/documentation/pages/design-tokens-roos2/design-tokens.size.docpage.mdx b/documentation/pages/design-tokens-roos2/design-tokens.size.docpage.mdx
@@ -0,0 +1,6 @@
+import { Meta } from "@storybook/blocks";
+import Doc from "./design-tokens.size.mdx";
+
+<Meta title="Huisstijl/ROOS 2.0 (Rijkshuisstijl)/Size" />
+
+<Doc />
diff --git a/documentation/pages/design-tokens-roos2/design-tokens.size.docusaurus.mdx b/documentation/pages/design-tokens-roos2/design-tokens.size.docusaurus.mdx
@@ -0,0 +1,9 @@
+---
+title: Size
+hide_title: false
+slug: size
+---
+
+import Doc from "./design-tokens.size.mdx";
+
+<Doc />
diff --git a/documentation/pages/design-tokens-roos2/design-tokens.size.mdx b/documentation/pages/design-tokens-roos2/design-tokens.size.mdx
@@ -0,0 +1,14 @@
+import designTokens from "@nl-rvo/rijkshuisstijl-design-tokens/dist/index.json";
+import { SizeDesignTokens } from "../../components/design-tokens/SizeDesignTokens";
+
+export const tokens = designTokens.filter(({ filePath }) => filePath.includes("src/brand/rvo/size.tokens.json"));
+
+<span>
+  Er zijn {tokens.length} design tokens voor sizes. Ruimtes tussen onderdelen worden gedaan met stapjes van 2 pixels.
+</span>
+
+Wanneer je een waarde nodig hebt die niet in de lijst is opgenomen kun je waarden combineren zoals:
+
+<strong>rvo-size-3xs + rvo-size-md</strong>
+
+<SizeDesignTokens tokens={tokens} />
diff --git a/documentation/pages/design-tokens-roos2/design-tokens.space.docpage.mdx b/documentation/pages/design-tokens-roos2/design-tokens.space.docpage.mdx
@@ -0,0 +1,6 @@
+import { Meta } from "@storybook/blocks";
+import Doc from "./design-tokens.space.mdx";
+
+<Meta title="Huisstijl/ROOS 2.0 (Rijkshuisstijl)/Space" />
+
+<Doc />
diff --git a/documentation/pages/design-tokens-roos2/design-tokens.space.docusaurus.mdx b/documentation/pages/design-tokens-roos2/design-tokens.space.docusaurus.mdx
@@ -0,0 +1,9 @@
+---
+title: Space
+hide_title: false
+slug: space
+---
+
+import Doc from "./design-tokens.space.mdx";
+
+<Doc />
diff --git a/documentation/pages/design-tokens-roos2/design-tokens.space.mdx b/documentation/pages/design-tokens-roos2/design-tokens.space.mdx
@@ -0,0 +1,14 @@
+import designTokens from "@nl-rvo/rijkshuisstijl-design-tokens/dist/index.json";
+import { SpaceDesignTokens } from "../../components/design-tokens/SpaceDesignTokens";
+
+export const tokens = designTokens.filter(({ filePath }) => filePath.includes("src/brand/rvo/space.tokens.json"));
+
+<span>
+  Er zijn {tokens.length} design tokens voor spaces. Ruimtes tussen onderdelen worden bepaald met stapjes van 2 pixels.
+</span>
+
+Wanneer je een waarde nodig hebt die niet in de lijst is opgenomen kun je waarden combineren zoals:
+
+<strong>rvo-space-3xs + rvo-space-md</strong>
+
+<SpaceDesignTokens tokens={tokens} />
diff --git a/documentation/pages/design-tokens-roos2/design-tokens.typography.docpage.mdx b/documentation/pages/design-tokens-roos2/design-tokens.typography.docpage.mdx
@@ -0,0 +1,6 @@
+import { Meta } from "@storybook/blocks";
+import Doc from "./design-tokens.typography.mdx";
+
+<Meta title="Huisstijl/ROOS 2.0 (Rijkshuisstijl)/Font" />
+
+<Doc />
diff --git a/documentation/pages/design-tokens-roos2/design-tokens.typography.docusaurus.mdx b/documentation/pages/design-tokens-roos2/design-tokens.typography.docusaurus.mdx
@@ -0,0 +1,9 @@
+---
+title: Font
+hide_title: false
+slug: font
+---
+
+import Doc from "./design-tokens.typography.mdx";
+
+<Doc />
diff --git a/documentation/pages/design-tokens-roos2/design-tokens.typography.mdx b/documentation/pages/design-tokens-roos2/design-tokens.typography.mdx
@@ -0,0 +1,28 @@
+import designTokens from "@nl-rvo/rijkshuisstijl-design-tokens/dist/index.json";
+import FontFamilyDesignTokens from "../../components/design-tokens/FontFamilyDesignTokens";
+import FontSizeDesignTokens from "../../components/design-tokens/FontSizeDesignTokens";
+import FontWeightDesignTokens from "../../components/design-tokens/FontWeightDesignTokens";
+import LineHeightDesignTokens from "../../components/design-tokens/LineHeightDesignTokens";
+
+export const tokens = designTokens.filter(({ filePath }) => filePath.includes("src/brand/rvo/typography.tokens.json"));
+
+<span>Er zijn {tokens.length} design tokens voor typografie.</span>
+
+De RVO huisstijl is een afgeleide van de Rijkshuisstijl en gebruikt daarom alleen lettertypen die beschikbaar zijn binnen
+de Rijkshuisstijl.
+
+## Family
+
+<FontFamilyDesignTokens tokens={tokens.filter((token) => token.attributes.type === "font")} />
+
+## Weight
+
+<FontWeightDesignTokens tokens={tokens.filter((token) => token.attributes.type === "font-weight")} />
+
+## Line-height
+
+<LineHeightDesignTokens tokens={tokens.filter((token) => token.attributes.type === "line-height")} />
+
+## Size
+
+<FontSizeDesignTokens tokens={tokens.filter((token) => token.attributes.type === "font-size")} />
diff --git a/documentation/tsconfig.json b/documentation/tsconfig.json
@@ -17,6 +17,7 @@
     "paths": {
       "@nl-rvo/components/*": ["../proprietary/components/*"],
       "@nl-rvo/design-tokens/*": ["../proprietary/design-tokens/*"],
+      "@nl-rvo/rijkshuisstijl-design-tokens/*": ["../proprietary/rijkshuisstijl-design-tokens/*"],
       "@nl-rvo/assets/*": ["../proprietary/assets/*"],
       "@storybook/*": ["../packages/storybook/node_modules/@storybook/*"]
     }

diff --git a/packages/docusaurus/config/navigationConfig.js b/packages/docusaurus/config/navigationConfig.js
@@ -17,7 +17,7 @@ module.exports = {
       },
       {
         type: 'doc',
-        docId: 'design-tokens/color',
+        docId: 'design-tokens-roos1/color',
         position: 'left',
         label: 'Huisstijl',
       },

diff --git a/packages/storybook/tsconfig.json b/packages/storybook/tsconfig.json
@@ -15,6 +15,7 @@
     "baseUrl": "./",
     "paths": {
       "@nl-rvo/design-tokens/*": ["../../proprietary/design-tokens/*"],
+      "@nl-rvo/rijkshuisstijl-design-tokens/*": ["../../proprietary/rijkshuisstijl-design-tokens/*"],
       "@nl-rvo/assets/*": ["../../proprietary/assets/*"],
       "@docusaurus/components/*": ["../docusaurus/src/components/*"]
     }

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml