Storybook update (navikt#1560)

Author: KenAJoh

.storybook/main.js

@@ -11,6 +11,7 @@ module.exports = {
     };
     return config;
   },
+  staticDirs: ["./public"],
   devServer: {
     stats: "errors-only",
   },

.storybook/manager.js

@@ -1,6 +1,12 @@
 import { addons } from "@storybook/addons";
 import NavTheme from "./theme.js";
+import logoUrl from "./public/logo.svg";
 
 addons.setConfig({
   theme: NavTheme,
 });
+
+const link = document.createElement("link");
+link.setAttribute("rel", "shortcut icon");
+link.setAttribute("href", logoUrl);
+document.head.appendChild(link);

.storybook/preview.js

@@ -7,10 +7,27 @@ export const parameters = {
   options: {
     storySort: {
       method: "",
-      order: ["ds-icons", "ds-react", ["Default"]],
+      order: ["Intro", "ds-icons", "ds-react", ["Default"]],
       locales: "",
     },
   },
   viewMode: "docs",
   layout: "centered",
+  backgrounds: {
+    default: "Canvas",
+    values: [
+      {
+        name: "Canvas",
+        value: "#ffffff",
+      },
+      {
+        name: "Alternate",
+        value: "#f7f7f7",
+      },
+      {
+        name: "Inverted",
+        value: "#292929",
+      },
+    ],
+  },
 };

.storybook/public/logo.svg

@@ -1,6 +1,22 @@
 import { create } from "@storybook/theming";
+/* import logoUrl from "./public/logo.svg"; */
 
 export default create({
+  /* brandImage: process.env.NODE_ENV === "production" ? logoUrl : "/logo.svg", */
   base: "light",
+  // Typography
+  fontBase: '"Source Sans Pro", sans-serif',
+  fontCode: "monospace",
+
+  // Text colors
+  textColor: "#292929",
+  textInverseColor: "rgba(255,255,255,0.9)",
+
+  colorSecondary: "rgba(0, 36, 58, 1)",
+  colorPrimary: "rgba(153, 196, 221, 1)",
+
+  barTextColor: "rgba(0, 91, 130, 1)",
+  barSelectedColor: "rgba(0, 36, 58, 1)",
+
   brandTitle: "NAV Designsystem",
 });

.storybook/theme.js

@@ -0,0 +1,38 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+
+<Meta title="Intro/Velkommen" />
+
+# NAV designsystem-komponenter
+
+- [Dokumentasjon](https://aksel.nav.no/designsystem)
+- [Komponenter](https://aksel.nav.no/designsystem/side/oversikt-komponenter)
+
+## Kom i gang
+
+### Kjernepakke
+
+```bash
+yarn add @navikt/ds-react @navikt/ds-css @navikt/ds-icons
+```
+
+### Pakke for interne-flater
+
+```bash
+yarn add @navikt/ds-react-internal @navikt/ds-css-internal
+```
+
+### Bruk
+
+```jsx
+import { Heading } from "@navikt/ds-react";
+
+<Heading level="1" size="xlarge">
+  Sidetitel
+</Heading>;
+```
+
+## Bidra
+
+Hjelp oss med å forbedre designsystemet med feedback eller kode-hjelp
+
+- [Kode](https://github.com/navikt/Designsystemet/tree/master/%40navikt)

.storybook/velkommen.stories.mdx

@@ -0,0 +1,51 @@
+import React from "react";
+import { GuidePanel } from "../index";
+import { Meta } from "@storybook/react/types-6-0";
+export default {
+  title: "ds-react/GuidePanel",
+  component: GuidePanel,
+} as Meta;
+
+const panelText = `Sit sint eu dolore reprehenderit exercitation labore aute anim sit
+adipisicing proident. Tempor ipsum ea cupidatat qui esse do veniam
+cupidatat. Excepteur irure reprehenderit esse tempor nisi duis qui ea
+enim id.`;
+
+export const Default = (props) => {
+  const newProps = props?.colorOverride
+    ? {
+        style: {
+          ["--navds-guide-panel-color-illustration-background" as any]:
+            "var(--navds-global-color-purple-200)",
+          ["--navds-guide-panel-color-border" as any]:
+            "var(--navds-global-color-purple-400)",
+        },
+      }
+    : {};
+
+  return (
+    <GuidePanel {...newProps} poster={props?.poster}>
+      {panelText}
+    </GuidePanel>
+  );
+};
+
+Default.args = {
+  poster: false,
+  colorOverride: false,
+};
+
+export const Poster = () => <GuidePanel poster>{panelText}</GuidePanel>;
+
+export const ColorOverride = () => (
+  <GuidePanel
+    style={{
+      ["--navds-guide-panel-color-illustration-background" as any]:
+        "var(--navds-global-color-purple-200)",
+      ["--navds-guide-panel-color-border" as any]:
+        "var(--navds-global-color-purple-400)",
+    }}
+  >
+    {panelText}
+  </GuidePanel>
+);