feature: add stories for InboxItem(s) and resolve fonts

packages/storybook/.storybook/customTheme.ts

@@ -0,0 +1,11 @@
+import { create } from '@storybook/theming';
+
+export default create({
+  brandTitle: 'Komponenter',
+  fontBase: '"Inter", sans-serif',
+  base: 'light',
+  colorSecondary: '#0062BA',
+  barTextColor: '#68707c',
+  appBg: '#f4f5f6',
+  textColor: '#1e2b3c',
+});

packages/storybook/.storybook/manager.ts

@@ -0,0 +1,9 @@
+import { addons } from '@storybook/manager-api';
+import customTheme from './customTheme';
+
+addons.setConfig({
+  theme: customTheme,
+  sidebar: {
+    showRoots: true,
+  },
+});

packages/storybook/.storybook/preview-head.html

@@ -0,0 +1,22 @@
+<link
+  rel="stylesheet"
+  href="https://altinncdn.no/fonts/inter/inter.css"
+/>
+
+<script>
+  document.documentElement.setAttribute('lang', 'no');
+</script>
+
+<style>
+    * {
+        font-feature-settings: 'cv05' 1 !important;
+    }
+
+    html {
+        font-family: 'Inter', sans-serif;
+    }
+
+    .sbdocs-wrapper {
+        padding-bottom: 10rem !important;
+    }
+</style>

packages/storybook/.storybook/preview.ts

@@ -1,8 +1,13 @@
 import type { Preview } from '@storybook/react';
+import '@digdir/design-system-tokens/brand/altinn/tokens.css';
+import customTheme from './customTheme';
 
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
+    docs: {
+      theme: customTheme
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,

packages/storybook/package.json

@@ -11,6 +11,9 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@digdir/design-system-react": "^0.47.0",
+    "@digdir/design-system-tokens": "^0.12.0",
+    "@navikt/aksel-icons": "^5.18.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -20,6 +23,8 @@
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.12",
     "@storybook/addon-interactions": "^7.6.12",
+    "@storybook/theming": "^7.6.6",
+    "@storybook/manager-api": "^7.6.6",
     "@storybook/addon-links": "^7.6.12",
     "@storybook/addon-onboarding": "^1.0.11",
     "@storybook/blocks": "^7.6.12",

packages/storybook/src/App.tsx

@@ -1,3 +1,5 @@
-const App = () => <div>Storybook</div>;
+import styles from "./app.module.css";
+
+const App = () => <div className={styles.app}>Storybook</div>;
 
 export default App;

packages/storybook/src/app.module.css

@@ -1,13 +1,4 @@
-:root {
-    font-family: 'Inter', sans-serif;
-    font-feature-settings: 'cv05'1 !important;
-    /* Enable lowercase l with tail */
-    font-weight: 400;
-    font-synthesis: none;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
+
 .app {
     width: 100%;
     margin: 0 auto;

packages/storybook/src/stories/InboxItems/InboxItems.stories.tsx

@@ -1,50 +1,70 @@
+import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
+import { SealIcon, StarIcon } from "@navikt/aksel-icons";
 
 import { InboxItems } from "../../../../frontend-design-poc/src/components/InboxItems";
 import { InboxItem } from "../../../../frontend-design-poc/src/components/InboxItem";
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
-  title: "Example/InboxItem",
+  title: "Example/InboxItems",
   component: InboxItems,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: "centered",
-  }, // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ["autodocs"], // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  tags: ["autodocs"],
 } satisfies Meta<typeof InboxItems>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const simpleExample: Story = {
-  args: {
-    children: [
+const SimpleExampleWithState = () => {
+  const [isCheckedFirst, setIsCheckedFirst] = useState(false);
+  const [isCheckedSecond, setIsCheckedSecond] = useState(false);
+  const [isCheckedThird, setIsCheckedThird] = useState(false);
+
+  return (
+    <InboxItems>
       <InboxItem
-        title="Tittel"
+        title="Har du glemt oss?"
         description="Beskrivelse"
-        sender={{
-          label: "Avsender",
-        }}
-        receiver={{
-          label: "Mottaker",
-        }}
+        sender={{ label: "DigDir", icon: <StarIcon /> }}
+        receiver={{ label: "Per Person" }}
         toLabel="til"
-        tags={[{ label: "hello" }, { label: "hallaz" }]}
-      />,
+        tags={[
+          { icon: <StarIcon />, label: "hello" },
+          { icon: <StarIcon />, label: "hallaz" },
+        ]}
+        checkboxValue="value1"
+        isChecked={isCheckedFirst}
+        onCheckedChange={() => setIsCheckedFirst(!isCheckedFirst)}
+      />
       <InboxItem
-        title="Tittel"
-        description="Beskrivelse"
-        sender={{
-          label: "Avsender",
-        }}
-        receiver={{
-          label: "Mottaker",
-        }}
+        title="Aksjeoppgaven for 2022"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin, nisi vitae auctor accumsan, odio ipsum efficitur nulla, eu tempus sem leo et felis. Curabitur vel varius tortor. Proin semper in nisl eget venenatis. Vestibulum egestas urna id sapien iaculis, id consequat ante varius. Vestibulum vel facilisis nulla. Aenean vitae orci est. Nulla at sagittis mauris. Vestibulum nisl nibh, pulvinar non odio quis, fermentum aliquet tortor. Mauris imperdiet ante lacus. Sed pretium, lorem sed ornare vehicula, neque diam dictum massa, et aliquam lectus metus sit amet nunc. Aliquam erat volutpat. Aliquam ac massa mauris"
+        sender={{ label: "DigDir" }}
+        receiver={{ label: "Per Person" }}
         toLabel="til"
-        tags={[{ label: "hello" }, { label: "hallaz" }]}
-      />,
-    ],
-  },
+        tags={[
+          { label: "hello", icon: <StarIcon /> },
+          { label: "halla", icon: <SealIcon /> },
+        ]}
+        checkboxValue="value2"
+        isChecked={isCheckedSecond}
+        onCheckedChange={() => setIsCheckedSecond(!isCheckedSecond)}
+      />
+      <InboxItem
+        title="Aksjeoppgaven for 2021"
+        description="Integer lacinia ornare ex id consequat. Vivamus condimentum ex vitae elit dignissim convallis. Vivamus nec velit lacus. Vestibulum pharetra pharetra nibh vitae auctor."
+        sender={{ label: "DigDir" }}
+        receiver={{ label: "Per Person" }}
+        toLabel="til"
+        tags={[
+          { label: "hello", icon: <StarIcon /> },
+          { label: "hellu", icon: <SealIcon /> },
+        ]}
+        checkboxValue="value2"
+        isChecked={isCheckedThird}
+        onCheckedChange={() => setIsCheckedThird(!isCheckedThird)}
+      />
+    </InboxItems>
+  );
 };
+
+export const simpleDesktopExample : Story = () => <SimpleExampleWithState />;