docs(storybook): add storybook as an experiment

.env.example

@@ -0,0 +1 @@
+CHROMATIC_PROJECT_TOKEN=

.github/workflows/build.yml

@@ -55,3 +55,8 @@ jobs:
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v1
+
+      - name: Deploy Storybook to Chromatic
+        run: npm run chromatic
+        env:
+          CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.gitignore

@@ -1,5 +1,7 @@
+.env
 _site
 dist
 node_modules
 .DS_Store
 .idea
+build-storybook.log

.prettierignore

@@ -10,4 +10,5 @@ LICENSE
 *.jpeg
 *.png
 *.svg
+.env.example
 

.storybook/DigitalServiceTheme.ts

@@ -0,0 +1,21 @@
+import { create } from "@storybook/theming/create";
+import digitalServiceLogo from "./assets/images/logo.png";
+
+export default create({
+  base: "light",
+  brandTitle: "DigitalService Design System",
+  brandUrl: "https://digitalservice.bund.de",
+  brandImage: digitalServiceLogo,
+  brandTarget: "_self",
+
+  fontBase: "Inter, Arial, sans-serif", // UI only (sidebar), does not affect preview + docs
+  colorPrimary: "blue", // where is that used? not links
+  colorSecondary: "blue",
+
+  appBorderRadius: 0,
+
+  textColor: "#000",
+
+  barSelectedColor: "#00f",
+  barHoverColor: "#00f",
+});

.storybook/blocks/ColorBlob.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import tokens from "@digitalservice4germany/style-dictionary/tokens.json";
+import "../styles.css";
+
+export default function ColorBlob({
+  name,
+  shade,
+}: {
+  name: string;
+  shade?: string;
+}) {
+  console.log({ tokens });
+  const hex = shade ? tokens.color.base[name][shade] : tokens.color.base[name];
+  return (
+    <div className="colordefinitionbox">
+      {name === "white" ? (
+        <div
+          style={{ backgroundColor: "black" }}
+          className="colorshapebox mask1"
+        >
+          <div
+            style={{
+              backgroundColor: hex,
+              transform: "scale(0.95)",
+            }}
+            className="colorshapebox mask1"
+          ></div>
+        </div>
+      ) : (
+        <div
+          style={{
+            backgroundColor: hex,
+          }}
+          className="colorshapebox mask1"
+        ></div>
+      )}
+
+      <span className="colorname">{shade ? `${name} ${shade}` : name}</span>
+      <br />
+      <span className="hexvalue">{hex.toUpperCase()}</span>
+    </div>
+  );
+}

.storybook/main.ts

@@ -0,0 +1,28 @@
+/** @type { import('@storybook/html-vite').StorybookConfig } */
+const config = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-a11y",
+    {
+      name: "@storybook/addon-storysource",
+      options: {
+        loaderOptions: {
+          injectStoryParameters: false,
+        },
+      },
+    },
+    "@storybook/addon-designs",
+  ],
+  framework: {
+    name: "@storybook/html-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  staticDirs: ["./assets"],
+};
+export default config;

.storybook/manager-head.html

@@ -0,0 +1,47 @@
+<style>
+  @font-face {
+    font-family: Inter;
+    src:
+      url("/fonts/Inter-Light.woff2") format("woff2"),
+      url("/fonts/Inter-Light.woff") format("woff");
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: Inter;
+    src:
+      url("/fonts/Inter-Regular.woff2") format("woff2"),
+      url("/fonts/Inter-Regular.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: Inter;
+    src:
+      url("/fonts/Inter-Medium.woff2") format("woff2"),
+      url("/fonts/Inter-Medium.woff") format("woff");
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: Inter;
+    src:
+      url("/fonts/Inter-SemiBold.woff2") format("woff2"),
+      url("/fonts/Inter-SemiBold.woff") format("woff");
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: Inter;
+    src:
+      url("/fonts/Inter-Bold.woff2") format("woff2"),
+      url("/fonts/Inter-Bold.woff") format("woff");
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+  }
+</style>

.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from "@storybook/manager-api";
+import digitalServiceTheme from "./DigitalServiceTheme";
+
+addons.setConfig({
+  theme: digitalServiceTheme,
+});

.storybook/preview-head.html

@@ -0,0 +1,159 @@
+<style>
+  @font-face {
+    font-family: BundesSansWeb;
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src:
+      url("./fonts/BundesSansWeb-Regular.woff2") format("woff2"),
+      url("./fonts/BundesSansWeb-Regular.woff") format("woff");
+  }
+  @font-face {
+    font-family: BundesSansWeb;
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src:
+      url("./fonts/BundesSansWeb-Italic.woff2") format("woff2"),
+      url("./fonts/BundesSansWeb-Italic.woff") format("woff");
+  }
+  @font-face {
+    font-family: BundesSansWeb;
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src:
+      url("./fonts/BundesSansWeb-Bold.woff2") format("woff2"),
+      url("./fonts/BundesSansWeb-Bold.woff") format("woff");
+  }
+  @font-face {
+    font-family: BundesSansWeb;
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src:
+      url("./fonts/BundesSansWeb-BoldItalic.woff2") format("woff2"),
+      url("./fonts/BundesSansWeb-BoldItalic.woff") format("woff");
+  }
+  /* BundesSerif */
+  @font-face {
+    font-family: BundesSerifWeb;
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src:
+      url("./fonts/BundesSerifWeb-Regular.woff2") format("woff2"),
+      url("./fonts/BundesSerifWeb-Regular.woff") format("woff");
+  }
+  @font-face {
+    font-family: BundesSerifWeb;
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src:
+      url("./fonts/BundesSerifWeb-Italic.woff2") format("woff2"),
+      url("./fonts/BundesSerifWeb-Italic.woff") format("woff");
+  }
+  @font-face {
+    font-family: BundesSerifWeb;
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src:
+      url("./fonts/BundesSerifWeb-Bold.woff2") format("woff2"),
+      url("./fonts/BundesSerifWeb-Bold.woff") format("woff");
+  }
+  @font-face {
+    font-family: BundesSerifWeb;
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src:
+      url("./fonts/BundesSerifWeb-BoldItalic.woff2") format("woff2"),
+      url("./fonts/BundesSerifWeb-BoldItalic.woff") format("woff");
+  }
+  /* BundesSans Condensed */
+  @font-face {
+    font-family: BundesSansCondWeb;
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src:
+      url("./fonts/BundesSansCondWeb.woff2") format("woff2"),
+      url("./fonts/BundesSansCondWeb.woff") format("woff");
+  }
+  @font-face {
+    font-family: Inter;
+    src:
+      url("/fonts/Inter-Light.woff2") format("woff2"),
+      url("/fonts/Inter-Light.woff") format("woff");
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: Inter;
+    src:
+      url("/fonts/Inter-Regular.woff2") format("woff2"),
+      url("/fonts/Inter-Regular.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: Inter;
+    src:
+      url("/fonts/Inter-Medium.woff2") format("woff2"),
+      url("/fonts/Inter-Medium.woff") format("woff");
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: Inter;
+    src:
+      url("/fonts/Inter-SemiBold.woff2") format("woff2"),
+      url("/fonts/Inter-SemiBold.woff") format("woff");
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: Inter;
+    src:
+      url("/fonts/Inter-Bold.woff2") format("woff2"),
+      url("/fonts/Inter-Bold.woff") format("woff");
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+  }
+  .sbdocs-content > :not(.sb-unstyled),
+  .sbdocs-content > :not(.sb-unstyled) * {
+    font-family: Inter, Arial, sans-serif;
+  }
+
+  .sbdocs-preview,
+  #storybook-root * {
+    font-family: BundesSansWeb, Calibri, Verdana, Arial, Helvetica, sans-serif;
+  }
+
+  .sbdocs a {
+    color: #00f;
+    text-decoration: underline;
+  }
+</style>
+
+<script src="https://unpkg.com/magic-snowflakes/dist/snowflakes.min.js"></script>
+<script>
+  window.sfLoaded = false;
+  document.addEventListener("DOMContentLoaded", function () {
+    if (!window.sfLoaded) {
+      var sf = new Snowflakes({
+        color: "#0000ff",
+        count: 10,
+        minOpacity: 0.2,
+      });
+      window.sfLoaded = true;
+    }
+  });
+</script>

.storybook/preview.ts

@@ -0,0 +1,28 @@
+import "../_site/fonts.css";
+import "../build/styles.css";
+
+/** @type { import('@storybook/html').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    options: {
+      storySort: {
+        order: [
+          "Homepage",
+          "Styleguide",
+          "Accessibility",
+          "Components",
+          "Development",
+        ],
+      },
+    },
+  },
+};
+
+export default preview;