feature: add skeleton for inboxitems with example story in storybook …

…(WIP)

packages/frontend-design-poc/src/components/InboxItem/InboxItem.tsx

@@ -0,0 +1,56 @@
+import styles from "./inboxItem.module.css";
+
+interface Participant {
+  label: string;
+  icon?: JSX.Element;
+}
+
+interface InboxItemTag {
+  label: string;
+  icon?: JSX.Element;
+  className?: string;
+}
+
+interface InboxItemProps {
+  title: string;
+  toLabel: string;
+  description: string;
+  sender: Participant;
+  receiver: Participant;
+  tags?: InboxItemTag[];
+}
+
+export const InboxItem = ({
+  title,
+  description,
+  sender,
+  receiver,
+  toLabel,
+  tags,
+}: InboxItemProps) => {
+  return (
+    <div className={styles.inboxItem}>
+      <div>{title}</div>
+      <div>{description}</div>
+      <div className="participants">
+        <div>
+          <div>{sender.icon}</div>
+          <div>{sender.label}</div>
+        </div>
+        <span>{toLabel}</span>
+        <div>
+          <div>{receiver.icon}</div>
+          <div>{receiver.label}</div>
+        </div>
+      </div>
+      <div>
+        {tags?.map((tag) => (
+          <div>
+            {tag.icon}
+            {tag.label}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

packages/frontend-design-poc/src/components/InboxItem/inboxItem.module.css

@@ -0,0 +1,4 @@
+.inboxItem {
+    display: flex;
+    flex-direction: column;
+}

packages/frontend-design-poc/src/components/InboxItem/index.ts

@@ -0,0 +1 @@
+export { InboxItem } from "./InboxItem.tsx";

packages/frontend-design-poc/src/components/InboxItems/InboxItems.tsx

@@ -0,0 +1,9 @@
+import styles from "./inboxItems.module.css";
+
+interface InboxItemsProps {
+  children: React.ReactNode;
+}
+
+export const InboxItems = ({ children }: InboxItemsProps) => {
+  return <div className={styles.inboxItems}>{children}</div>;
+};

packages/frontend-design-poc/src/components/InboxItems/inboxItems.module.css

@@ -0,0 +1,5 @@
+.inboxItems {
+    display: flex;
+    flex-direction: column;
+    row-gap: 2em;
+}

packages/frontend-design-poc/src/components/InboxItems/index.ts

@@ -0,0 +1 @@
+export { InboxItems } from "./InboxItems.tsx";

packages/storybook/src/stories/Button.stories.ts → packages/storybook/src/stories/Button/Button.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Button } from './Button';
+import { Button } from './Button.tsx';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {

packages/storybook/src/stories/Button.tsx → packages/storybook/src/stories/Button/Button.tsx

@@ -10,7 +10,7 @@ interface ButtonProps {
    */
   backgroundColor?: string;
   /**
-   * How large should the button be?
+   * How large should the Button be?
    */
   size?: 'small' | 'medium' | 'large';
   /**
@@ -33,11 +33,11 @@ export const Button = ({
   label,
   ...props
 }: ButtonProps) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  const mode = primary ? 'storybook-Button--primary' : 'storybook-Button--secondary';
   return (
     <button
       type='button'
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      className={['storybook-Button', `storybook-button--${size}`, mode].join(' ')}
       style={{ backgroundColor }}
       {...props}
     >

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

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+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",
+  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
+} 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: [
+      <InboxItem
+        title="Tittel"
+        description="Beskrivelse"
+        sender={{
+          label: "Avsender",
+        }}
+        receiver={{
+          label: "Mottaker",
+        }}
+        toLabel="til"
+        tags={[{ label: "hello" }, { label: "hallaz" }]}
+      />,
+      <InboxItem
+        title="Tittel"
+        description="Beskrivelse"
+        sender={{
+          label: "Avsender",
+        }}
+        receiver={{
+          label: "Mottaker",
+        }}
+        toLabel="til"
+        tags={[{ label: "hello" }, { label: "hallaz" }]}
+      />,
+    ],
+  },
+};