From d6db6954632b428e2ad1e8148955a25cc91877c7 Mon Sep 17 00:00:00 2001
From: Sean Erik Scully <sean.erik.scully@gmail.com>
Date: Fri, 9 Feb 2024 11:07:10 +0100
Subject: [PATCH] InboxItems + InboxItem (#195)

* feature: add skeleton for inboxitems with example story in storybook (WIP)

* feature: add InboxItems and InboxItem component

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

* remove: unused Button example no longer needed

* fixes: linting errors for story

* feature: add modifier isUnread for InboxItem

* add jsdoc for InboxItem and InboxItems

* fixes: label for sender should be in bold

* improvement: better example use of icons in tags

* fixes: move jsdoc def to top of component signature

---------

Co-authored-by: Sean Scully <seanscully@desktop-b76mhj2.guest.tul.entra.no>
Co-authored-by: Sean Scully <seanscully@Sean-sin-MacBook-Pro.local>
---
 packages/frontend-design-poc/package.json     |   2 +
 packages/frontend-design-poc/src/App.tsx      |   7 +-
 .../src/components/HelloWorld/HelloWorld.tsx  |  16 ++-
 .../src/components/InboxItem/InboxItem.tsx    | 120 ++++++++++++++++++
 .../components/InboxItem/inboxItem.module.css |  81 ++++++++++++
 .../src/components/InboxItem/index.ts         |   1 +
 .../src/components/InboxItems/InboxItems.tsx  |  29 +++++
 .../InboxItems/inboxItems.module.css          |   5 +
 .../src/components/InboxItems/index.ts        |   1 +
 .../src/i18n/resources/nb.json                |   4 +-
 packages/frontend-design-poc/src/main.tsx     |   1 -
 .../src/pages/Inbox/Inbox.tsx                 |  51 ++++++++
 .../src/pages/Inbox/index.ts                  |   1 +
 .../src/pages/PageLayout/PageLayout.tsx       |   6 +-
 .../pages/PageLayout/pageLayout.module.css    |   3 +
 packages/storybook/.storybook/customTheme.ts  |  11 ++
 packages/storybook/.storybook/manager.ts      |   9 ++
 .../storybook/.storybook/preview-head.html    |  22 ++++
 packages/storybook/.storybook/preview.ts      |   5 +
 packages/storybook/package.json               |   5 +
 packages/storybook/src/App.tsx                |   4 +-
 packages/storybook/src/app.module.css         |   6 +
 .../storybook/src/stories/Button.stories.ts   |  58 ---------
 packages/storybook/src/stories/Button.tsx     |  47 -------
 .../stories/InboxItems/InboxItems.stories.tsx |  71 +++++++++++
 packages/storybook/src/stories/button.css     |  30 -----
 pnpm-lock.yaml                                |  31 ++++-
 27 files changed, 475 insertions(+), 152 deletions(-)
 create mode 100644 packages/frontend-design-poc/src/components/InboxItem/InboxItem.tsx
 create mode 100644 packages/frontend-design-poc/src/components/InboxItem/inboxItem.module.css
 create mode 100644 packages/frontend-design-poc/src/components/InboxItem/index.ts
 create mode 100644 packages/frontend-design-poc/src/components/InboxItems/InboxItems.tsx
 create mode 100644 packages/frontend-design-poc/src/components/InboxItems/inboxItems.module.css
 create mode 100644 packages/frontend-design-poc/src/components/InboxItems/index.ts
 create mode 100644 packages/frontend-design-poc/src/pages/Inbox/Inbox.tsx
 create mode 100644 packages/frontend-design-poc/src/pages/Inbox/index.ts
 create mode 100644 packages/frontend-design-poc/src/pages/PageLayout/pageLayout.module.css
 create mode 100644 packages/storybook/.storybook/customTheme.ts
 create mode 100644 packages/storybook/.storybook/manager.ts
 create mode 100644 packages/storybook/.storybook/preview-head.html
 create mode 100644 packages/storybook/src/app.module.css
 delete mode 100644 packages/storybook/src/stories/Button.stories.ts
 delete mode 100644 packages/storybook/src/stories/Button.tsx
 create mode 100644 packages/storybook/src/stories/InboxItems/InboxItems.stories.tsx
 delete mode 100644 packages/storybook/src/stories/button.css

diff --git a/packages/frontend-design-poc/package.json b/packages/frontend-design-poc/package.json
index 968f4ded9..23bc02322 100644
--- a/packages/frontend-design-poc/package.json
+++ b/packages/frontend-design-poc/package.json
@@ -14,6 +14,8 @@
   "dependencies": {
     "@digdir/design-system-react": "^0.47.0",
     "@digdir/design-system-tokens": "^0.12.0",
+    "@navikt/aksel-icons": "^5.18.0",
+    "classnames": "^2.5.1",
     "i18next": "^23.8.2",
     "i18next-icu": "^2.3.0",
     "react": "^18.2.0",
diff --git a/packages/frontend-design-poc/src/App.tsx b/packages/frontend-design-poc/src/App.tsx
index d14215c8a..f391743a2 100644
--- a/packages/frontend-design-poc/src/App.tsx
+++ b/packages/frontend-design-poc/src/App.tsx
@@ -2,18 +2,21 @@ import { Route, Routes } from "react-router-dom";
 import { HelloWorld } from "./components/HelloWorld";
 import { PageNotFound } from "./pages/PageNotFound";
 import { PageLayout } from "./pages/PageLayout";
+import { Inbox } from "./pages/Inbox";
+
 import styles from "./app.module.css";
 
 function App() {
   return (
-    <div className={styles.app} role="main">
+    <main className={styles.app}>
       <Routes>
         <Route element={<PageLayout />}>
           <Route path="/" element={<HelloWorld />} />
+          <Route path="/inbox" element={<Inbox />} />
           <Route path="*" element={<PageNotFound />} />
         </Route>
       </Routes>
-    </div>
+    </main>
   );
 }
 
diff --git a/packages/frontend-design-poc/src/components/HelloWorld/HelloWorld.tsx b/packages/frontend-design-poc/src/components/HelloWorld/HelloWorld.tsx
index 49974b136..23fb386bb 100644
--- a/packages/frontend-design-poc/src/components/HelloWorld/HelloWorld.tsx
+++ b/packages/frontend-design-poc/src/components/HelloWorld/HelloWorld.tsx
@@ -7,12 +7,14 @@ export const HelloWorld = () => {
   const { isLoading, data } = useQuery("user", getUser);
   const { t } = useTranslation();
   return (
-    <section className={styles.helloWorld}>
-      {isLoading ? (
-        <span>Loading ...</span>
-      ) : (
-        <h1>{t("example.hello", { person: data?.name })}!</h1>
-      )}
-    </section>
+    <>
+      <section className={styles.helloWorld}>
+        {isLoading ? (
+          <span>Loading ...</span>
+        ) : (
+          <h1>{t("example.hello", { person: data?.name })}!</h1>
+        )}
+      </section>
+    </>
   );
 };
diff --git a/packages/frontend-design-poc/src/components/InboxItem/InboxItem.tsx b/packages/frontend-design-poc/src/components/InboxItem/InboxItem.tsx
new file mode 100644
index 000000000..32afedc5c
--- /dev/null
+++ b/packages/frontend-design-poc/src/components/InboxItem/InboxItem.tsx
@@ -0,0 +1,120 @@
+import { Checkbox } from "@digdir/design-system-react";
+import classNames from "classnames";
+
+import styles from "./inboxItem.module.css";
+
+interface Participant {
+  label: string;
+  icon?: JSX.Element;
+}
+
+interface InboxItemTag {
+  label: string;
+  icon?: JSX.Element;
+  className?: string;
+}
+
+interface InboxItemProps {
+  checkboxValue: string;
+  title: string;
+  toLabel: string;
+  description: string;
+  sender: Participant;
+  receiver: Participant;
+  isChecked: boolean;
+  onCheckedChange: (value: boolean) => void;
+  tags?: InboxItemTag[];
+  isUnread?: boolean;
+}
+
+/**
+ * Represents an individual inbox item, displaying information such as the title,
+ * description, sender, and receiver, along with optional tags. It includes a checkbox
+ * to mark the item as checked/unchecked and can visually indicate if it is unread.
+ * Should only be used as child of InboxItems
+ *
+ * @component
+ * @param {Object} props - The properties passed to the component.
+ * @param {string} props.checkboxValue - The value attribute for the checkbox input.
+ * @param {string} props.title - The title of the inbox item.
+ * @param {string} props.toLabel - The label for "to" for full i18n support.
+ * @param {string} props.description - The description or content of the inbox item.
+ * @param {Participant} props.sender - The sender of the inbox item, including label and optional icon.
+ * @param {Participant} props.receiver - The receiver of the inbox item, including label and optional icon.
+ * @param {boolean} props.isChecked - Whether the inbox item is checked. This can support batch operations.
+ * @param {function(boolean): void} props.onCheckedChange - Callback function triggered when the checkbox value changes.
+ * @param {InboxItemTag[]} [props.tags=[]] - Optional array of tags associated with the inbox item, each with a label, optional icon, and optional className.
+ * @param {boolean} [props.isUnread=false] - Whether the inbox item should be styled to indicate it is unread.
+ * @returns {JSX.Element} The InboxItem component.
+ *
+ * @example
+ * <InboxItem
+ *   checkboxValue="item1"
+ *   title="Meeting Reminder"
+ *   toLabel="to"
+ *   description="Don't forget the meeting tomorrow at 10am."
+ *   sender={{ label: "Alice", icon: <MailIcon /> }}
+ *   receiver={{ label: "Bob", icon: <PersonIcon /> }}
+ *   isChecked={false}
+ *   onCheckedChange={(checked) => console.log(checked)}
+ *   tags={[{ label: "Urgent", icon: <WarningIcon />, className: "urgent" }]}
+ *   isUnread
+ * />
+ */
+export const InboxItem = ({
+  title,
+  description,
+  sender,
+  receiver,
+  toLabel,
+  tags = [],
+  isChecked,
+  onCheckedChange,
+  checkboxValue,
+  isUnread = false,
+}: InboxItemProps) => {
+  return (
+    <div
+      className={classNames(styles.inboxItemWrapper, {
+        [styles.active]: isChecked,
+        [styles.isUnread]: isUnread,
+      })}
+      aria-selected={isChecked ? "true" : "false"}
+      tabIndex={0}
+    >
+      <section className={styles.inboxItem}>
+        <header className={styles.header}>
+          <h2 className={styles.title}>{title}</h2>
+          <Checkbox
+            checked={isChecked}
+            value={checkboxValue}
+            onChange={(e) => onCheckedChange(e.target.checked)}
+            size="small"
+          />
+        </header>
+        <div className={styles.participants}>
+          <div className={styles.sender}>
+            {sender.icon && <div className={styles.icon}>{sender.icon}</div>}
+            <span>{sender.label}</span>
+          </div>
+          <span>{toLabel}</span>
+          <div className={styles.receiver}>
+            {receiver.icon && (
+              <div className={styles.icon}>{receiver.icon}</div>
+            )}
+            <span>{receiver.label}</span>
+          </div>
+        </div>
+        <p className={styles.description}>{description}</p>
+        <div className={styles.tags}>
+          {tags.map((tag) => (
+            <div key={tag.label} className={styles.tag}>
+              {tag.icon && <div className={styles.icon}>{tag.icon}</div>}
+              <span> {tag.label}</span>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+};
diff --git a/packages/frontend-design-poc/src/components/InboxItem/inboxItem.module.css b/packages/frontend-design-poc/src/components/InboxItem/inboxItem.module.css
new file mode 100644
index 000000000..42dee7deb
--- /dev/null
+++ b/packages/frontend-design-poc/src/components/InboxItem/inboxItem.module.css
@@ -0,0 +1,81 @@
+.inboxItemWrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.10);
+}
+
+.active {
+    outline: 2px solid #00315D;
+    background: #EFF5FD;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.inboxItem {
+    display: flex;
+    flex-direction: column;
+    padding: 0 1.0625em 1.0625em;
+    border-left: 4px solid rgba(0, 0, 0, 0.10);
+}
+
+.isUnread {
+    border-left: 4px solid #118849;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.title {
+    color: #000;
+    font-size: 1.25rem;
+    font-weight: 500;
+    line-height: 1.25;
+    padding-bottom: 0.375em;
+}
+
+.participants {
+    display: flex;
+    align-items: center;
+    column-gap: 5px;
+}
+
+.receiver, .sender {
+    display: flex;
+    align-items: center;
+}
+
+.sender {
+    font-weight: 500;
+}
+
+.icon {
+    margin-right: 0.375em;
+    height: 18px;
+    width: 18px;
+    flex-shrink: 0;
+}
+
+.description {
+    color: #000;
+    font-size: 1rem;
+    font-weight: 400;
+}
+
+
+.tags {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.tag {
+    display: flex;
+    align-items: center;
+    margin-right: 1em;
+    font-weight: 400;
+}
+
+
diff --git a/packages/frontend-design-poc/src/components/InboxItem/index.ts b/packages/frontend-design-poc/src/components/InboxItem/index.ts
new file mode 100644
index 000000000..95adf3b10
--- /dev/null
+++ b/packages/frontend-design-poc/src/components/InboxItem/index.ts
@@ -0,0 +1 @@
+export { InboxItem } from "./InboxItem.tsx";
diff --git a/packages/frontend-design-poc/src/components/InboxItems/InboxItems.tsx b/packages/frontend-design-poc/src/components/InboxItems/InboxItems.tsx
new file mode 100644
index 000000000..bec2d9ea6
--- /dev/null
+++ b/packages/frontend-design-poc/src/components/InboxItems/InboxItems.tsx
@@ -0,0 +1,29 @@
+import styles from "./inboxItems.module.css";
+
+export interface InboxItemsProps {
+  children: React.ReactNode;
+}
+
+/**
+ * A container component for displaying a list of inbox items. It serves as a wrapper
+ * for individual `InboxItem` components, ensuring they are styled and organized collectively.
+ * This component primarily handles the layout of its children inbox items.
+ *
+ * @component
+ * @param {Object} props - The properties passed to the component.
+ * @param {React.ReactNode} props.children - The child components to be rendered within the container.
+ * Typically, these are `InboxItem` components, but can include any React nodes.
+ * @returns {JSX.Element} A div element wrapping the children in a styled manner,
+ * according to the `inboxItems` CSS class defined in `inboxItems.module.css`.
+ *
+ * @example
+ * <InboxItems>
+ *   <InboxItem {...inboxItemProps1} />
+ *   <InboxItem {...inboxItemProps2} />
+ *   <InboxItem {...inboxItemProps3} />
+ * </InboxItems>
+ */
+
+export const InboxItems = ({ children }: InboxItemsProps) => {
+  return <div className={styles.inboxItems}>{children}</div>;
+};
diff --git a/packages/frontend-design-poc/src/components/InboxItems/inboxItems.module.css b/packages/frontend-design-poc/src/components/InboxItems/inboxItems.module.css
new file mode 100644
index 000000000..897568fdd
--- /dev/null
+++ b/packages/frontend-design-poc/src/components/InboxItems/inboxItems.module.css
@@ -0,0 +1,5 @@
+.inboxItems {
+    display: flex;
+    flex-direction: column;
+    row-gap: .5em;
+}
\ No newline at end of file
diff --git a/packages/frontend-design-poc/src/components/InboxItems/index.ts b/packages/frontend-design-poc/src/components/InboxItems/index.ts
new file mode 100644
index 000000000..9bf9af159
--- /dev/null
+++ b/packages/frontend-design-poc/src/components/InboxItems/index.ts
@@ -0,0 +1 @@
+export { InboxItems } from "./InboxItems.tsx";
diff --git a/packages/frontend-design-poc/src/i18n/resources/nb.json b/packages/frontend-design-poc/src/i18n/resources/nb.json
index be60e0435..4e71be5ab 100644
--- a/packages/frontend-design-poc/src/i18n/resources/nb.json
+++ b/packages/frontend-design-poc/src/i18n/resources/nb.json
@@ -1,3 +1,5 @@
 {
-  "example.hello": "Hei, {person}"
+  "example.hello": "Hei, {person}",
+  "example.your_inbox": "Din innboks",
+  "word.to": "til"
 }
\ No newline at end of file
diff --git a/packages/frontend-design-poc/src/main.tsx b/packages/frontend-design-poc/src/main.tsx
index 4a7aa4886..6f3b71b25 100644
--- a/packages/frontend-design-poc/src/main.tsx
+++ b/packages/frontend-design-poc/src/main.tsx
@@ -5,7 +5,6 @@ import { BrowserRouter } from "react-router-dom";
 import "./i18n/";
 
 import App from "./App.tsx";
-
 async function enableMocking() {
   if (import.meta.env.MODE === "development") {
     const { worker } = await import("./mocks/browser");
diff --git a/packages/frontend-design-poc/src/pages/Inbox/Inbox.tsx b/packages/frontend-design-poc/src/pages/Inbox/Inbox.tsx
new file mode 100644
index 000000000..caaa8a5f3
--- /dev/null
+++ b/packages/frontend-design-poc/src/pages/Inbox/Inbox.tsx
@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { PersonIcon, PersonSuitIcon, SealIcon, StarIcon } from '@navikt/aksel-icons';
+import { InboxItems } from "../../components/InboxItems";
+import { InboxItem } from "../../components/InboxItem";
+
+export const Inbox = () => {
+  const { t } = useTranslation();
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+  const [isChecked2, setIsChecked2] = useState<boolean>(false);
+
+  return (
+    <article>
+      <h1>{t('example.your_inbox')}</h1>
+      <InboxItems>
+        <InboxItem
+          checkboxValue="test"
+          title="Viktig melding"
+          toLabel={t("word.to")}
+          description="Du har mottatt en viktig melding!"
+          sender={{ label: "Viktig bedrift", icon: <PersonSuitIcon /> }}
+          receiver={{ label: "Bruker Brukerson", icon: <PersonIcon /> }}
+          isChecked={isChecked}
+          onCheckedChange={(checked) => {
+            setIsChecked(checked);
+          }}
+          tags={[
+            { label: "hello", icon: <StarIcon /> },
+            { label: "hallaz", icon: <SealIcon /> },
+          ]}
+        />
+        <InboxItem
+          checkboxValue="test2"
+          title="Har du glemt oss?"
+          toLabel={t("word.to")}
+          description="Det tror jeg du har!"
+          sender={{ label: "Viktig bedrift", icon: <PersonSuitIcon /> }}
+          receiver={{ label: "Bruker Brukerson", icon: <PersonIcon /> }}
+          isChecked={isChecked2}
+          onCheckedChange={(checked) => {
+            setIsChecked2(checked);
+          }}
+          tags={[
+            { label: "hello", icon: <StarIcon /> },
+            { label: "hallaz", icon: <SealIcon /> },
+          ]}
+        />
+      </InboxItems>
+    </article>
+  );
+};
diff --git a/packages/frontend-design-poc/src/pages/Inbox/index.ts b/packages/frontend-design-poc/src/pages/Inbox/index.ts
new file mode 100644
index 000000000..ce301d6b9
--- /dev/null
+++ b/packages/frontend-design-poc/src/pages/Inbox/index.ts
@@ -0,0 +1 @@
+export { Inbox } from './Inbox.tsx'
\ No newline at end of file
diff --git a/packages/frontend-design-poc/src/pages/PageLayout/PageLayout.tsx b/packages/frontend-design-poc/src/pages/PageLayout/PageLayout.tsx
index 69c9839af..b589470b1 100644
--- a/packages/frontend-design-poc/src/pages/PageLayout/PageLayout.tsx
+++ b/packages/frontend-design-poc/src/pages/PageLayout/PageLayout.tsx
@@ -1,10 +1,12 @@
 import { Outlet } from "react-router-dom";
 
+import styles from "./pageLayout.module.css";
+
 export const PageLayout = () => {
   return (
-    <>
+    <div className={styles.pageLayout}>
       <nav aria-label="hovedmeny" />
       <Outlet />
-    </>
+    </div>
   );
 };
diff --git a/packages/frontend-design-poc/src/pages/PageLayout/pageLayout.module.css b/packages/frontend-design-poc/src/pages/PageLayout/pageLayout.module.css
new file mode 100644
index 000000000..1ffecdbb3
--- /dev/null
+++ b/packages/frontend-design-poc/src/pages/PageLayout/pageLayout.module.css
@@ -0,0 +1,3 @@
+.pageLayout {
+    max-width: 1280px;
+}
\ No newline at end of file
diff --git a/packages/storybook/.storybook/customTheme.ts b/packages/storybook/.storybook/customTheme.ts
new file mode 100644
index 000000000..f7c97e98f
--- /dev/null
+++ b/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',
+});
\ No newline at end of file
diff --git a/packages/storybook/.storybook/manager.ts b/packages/storybook/.storybook/manager.ts
new file mode 100644
index 000000000..6fb62677b
--- /dev/null
+++ b/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,
+  },
+});
\ No newline at end of file
diff --git a/packages/storybook/.storybook/preview-head.html b/packages/storybook/.storybook/preview-head.html
new file mode 100644
index 000000000..7034c0761
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/packages/storybook/.storybook/preview.ts b/packages/storybook/.storybook/preview.ts
index 817ac3ce6..dbfff6107 100644
--- a/packages/storybook/.storybook/preview.ts
+++ b/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,
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
index 8de73b842..f44dde644 100644
--- a/packages/storybook/package.json
+++ b/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",
diff --git a/packages/storybook/src/App.tsx b/packages/storybook/src/App.tsx
index 35acadc7f..f6daa19cb 100644
--- a/packages/storybook/src/App.tsx
+++ b/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;
diff --git a/packages/storybook/src/app.module.css b/packages/storybook/src/app.module.css
new file mode 100644
index 000000000..78411db6d
--- /dev/null
+++ b/packages/storybook/src/app.module.css
@@ -0,0 +1,6 @@
+
+.app {
+    width: 100%;
+    margin: 0 auto;
+    padding: 2rem;
+}
\ No newline at end of file
diff --git a/packages/storybook/src/stories/Button.stories.ts b/packages/storybook/src/stories/Button.stories.ts
deleted file mode 100644
index 199af8404..000000000
--- a/packages/storybook/src/stories/Button.stories.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Button } from './Button';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Example/Button',
-  component: Button,
-  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
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary: Story = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    label: 'Button',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    size: 'large',
-    label: 'Button',
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: 'small',
-    label: 'Button',
-  },
-};
-
-export const Warning: Story = {
-  args: {
-    primary: true,
-    label: 'Delete now',
-    backgroundColor: 'red',
-  },
-};
diff --git a/packages/storybook/src/stories/Button.tsx b/packages/storybook/src/stories/Button.tsx
deleted file mode 100644
index eab95e4e4..000000000
--- a/packages/storybook/src/stories/Button.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import './button.css';
-
-interface ButtonProps {
-  /**
-   * Is this the principal call to action on the page?
-   */
-  primary?: boolean;
-  /**
-   * What background color to use
-   */
-  backgroundColor?: string;
-  /**
-   * How large should the button be?
-   */
-  size?: 'small' | 'medium' | 'large';
-  /**
-   * Button contents
-   */
-  label: string;
-  /**
-   * Optional click handler
-   */
-  onClick?: () => void;
-}
-
-/**
- * Primary UI component for user interaction
- */
-export const Button = ({
-  primary = false,
-  size = 'medium',
-  backgroundColor,
-  label,
-  ...props
-}: ButtonProps) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-  return (
-    <button
-      type='button'
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-      style={{ backgroundColor }}
-      {...props}
-    >
-      {label}
-    </button>
-  );
-};
diff --git a/packages/storybook/src/stories/InboxItems/InboxItems.stories.tsx b/packages/storybook/src/stories/InboxItems/InboxItems.stories.tsx
new file mode 100644
index 000000000..d60bcc7a7
--- /dev/null
+++ b/packages/storybook/src/stories/InboxItems/InboxItems.stories.tsx
@@ -0,0 +1,71 @@
+import { useState } from "react";
+import type { Meta } from "@storybook/react";
+import { SealIcon, StarIcon, CalendarIcon } from "@navikt/aksel-icons";
+
+import { InboxItems } from "../../../../frontend-design-poc/src/components/InboxItems";
+import { InboxItem } from "../../../../frontend-design-poc/src/components/InboxItem";
+
+const meta = {
+  title: "Example/InboxItems",
+  component: InboxItems,
+  tags: ["autodocs"],
+} satisfies Meta<typeof InboxItems>;
+
+export default meta;
+const SimpleExampleWithState = () => {
+  const [isCheckedFirst, setIsCheckedFirst] = useState(false);
+  const [isCheckedSecond, setIsCheckedSecond] = useState(false);
+  const [isCheckedThird, setIsCheckedThird] = useState(false);
+
+  return (
+    <InboxItems>
+      <InboxItem
+        title="Har du glemt oss?"
+        description="Eksempel på en beskrivelse av en ulest melding"
+        sender={{ label: "DigDir", icon: <StarIcon /> }}
+        receiver={{ label: "Per Person" }}
+        toLabel="til"
+        tags={[
+          { label: "19.01.2024", icon: <CalendarIcon /> },
+          { label: "Viktig!", icon: <SealIcon /> },
+        ]}
+        checkboxValue="value1"
+        isChecked={isCheckedFirst}
+        onCheckedChange={() => setIsCheckedFirst(!isCheckedFirst)}
+        isUnread
+      />
+      <InboxItem
+        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: "16.01.2024", icon: <CalendarIcon /> },
+          { label: "Viktig!", 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: "12.01.2024", icon: <CalendarIcon /> },
+          { label: "Viktig!", icon: <SealIcon /> },
+        ]}
+        checkboxValue="value2"
+        isChecked={isCheckedThird}
+        onCheckedChange={() => setIsCheckedThird(!isCheckedThird)}
+      />
+    </InboxItems>
+  );
+};
+
+export const simpleDesktopExample: () => JSX.Element = () => (
+  <SimpleExampleWithState />
+);
diff --git a/packages/storybook/src/stories/button.css b/packages/storybook/src/stories/button.css
deleted file mode 100644
index dc91dc763..000000000
--- a/packages/storybook/src/stories/button.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.storybook-button {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 700;
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  line-height: 1;
-}
-.storybook-button--primary {
-  color: white;
-  background-color: #1ea7fd;
-}
-.storybook-button--secondary {
-  color: #333;
-  background-color: transparent;
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-}
-.storybook-button--small {
-  font-size: 12px;
-  padding: 10px 16px;
-}
-.storybook-button--medium {
-  font-size: 14px;
-  padding: 11px 20px;
-}
-.storybook-button--large {
-  font-size: 16px;
-  padding: 12px 24px;
-}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 763b3505d..bd0e3ddb4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -277,6 +277,12 @@ importers:
       '@digdir/design-system-tokens':
         specifier: ^0.12.0
         version: 0.12.0
+      '@navikt/aksel-icons':
+        specifier: ^5.18.0
+        version: 5.18.0
+      classnames:
+        specifier: ^2.5.1
+        version: 2.5.1
       i18next:
         specifier: ^23.8.2
         version: 23.8.2
@@ -335,6 +341,15 @@ importers:
 
   packages/storybook:
     dependencies:
+      '@digdir/design-system-react':
+        specifier: ^0.47.0
+        version: 0.47.0(@types/react@18.2.51)(react-dom@18.2.0)(react@18.2.0)
+      '@digdir/design-system-tokens':
+        specifier: ^0.12.0
+        version: 0.12.0
+      '@navikt/aksel-icons':
+        specifier: ^5.18.0
+        version: 5.18.0
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -357,6 +372,9 @@ importers:
       '@storybook/blocks':
         specifier: ^7.6.12
         version: 7.6.12(@types/react-dom@18.2.18)(@types/react@18.2.51)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/manager-api':
+        specifier: ^7.6.6
+        version: 7.6.12(react-dom@18.2.0)(react@18.2.0)
       '@storybook/react':
         specifier: ^7.6.12
         version: 7.6.12(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3)
@@ -366,6 +384,9 @@ importers:
       '@storybook/test':
         specifier: ^7.6.12
         version: 7.6.12
+      '@storybook/theming':
+        specifier: ^7.6.6
+        version: 7.6.12(react-dom@18.2.0)(react@18.2.0)
       '@types/react':
         specifier: ^18.2.43
         version: 18.2.51
@@ -2326,7 +2347,7 @@ packages:
       '@altinn/figma-design-tokens': 6.0.1
       '@digdir/design-system-tokens': 0.12.0
       '@floating-ui/react': 0.26.4(react-dom@18.2.0)(react@18.2.0)
-      '@navikt/aksel-icons': 5.17.3
+      '@navikt/aksel-icons': 5.18.0
       '@radix-ui/react-slot': 1.0.2(@types/react@18.2.51)(react@18.2.0)
       '@tanstack/react-virtual': 3.0.2(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -3280,8 +3301,8 @@ packages:
       strict-event-emitter: 0.5.1
     dev: true
 
-  /@navikt/aksel-icons@5.17.3:
-    resolution: {integrity: sha512-brmC707F9xx/ZEt8AltobF1/JtkNZwF0cFpKxv0LLfYStuzlU6Q8j8+C40xFwfHu4p9ZNzoBw5IDrbjJqHtpQA==}
+  /@navikt/aksel-icons@5.18.0:
+    resolution: {integrity: sha512-upFPrvJLz0PbgDMqbUa/U2pj8hjUpEE+frw+3KwCvpwC8/N0yfAaK1iqBxfPw5tn8dSJ+M1UJAdDvnMnb9pNBw==}
     dev: false
 
   /@ndelangen/get-tarball@3.0.9:
@@ -7477,6 +7498,10 @@ packages:
     resolution: {integrity: sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==}
     dev: false
 
+  /classnames@2.5.1:
+    resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
+    dev: false
+
   /clean-css@5.3.3:
     resolution: {integrity: sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==}
     engines: {node: '>= 10.0'}