From 48eeffda4259839d2573b40bd7ad34a1c4c51257 Mon Sep 17 00:00:00 2001
From: Sean Scully <seanscully@Sean-sin-MacBook-Pro.local>
Date: Thu, 8 Feb 2024 19:38:00 +0100
Subject: [PATCH] feature: add modifier isUnread for InboxItem

---
 .../src/components/InboxItem/InboxItem.tsx               | 9 ++++++---
 .../src/components/InboxItem/inboxItem.module.css        | 4 ++++
 .../src/stories/InboxItems/InboxItems.stories.tsx        | 3 ++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/frontend-design-poc/src/components/InboxItem/InboxItem.tsx b/packages/frontend-design-poc/src/components/InboxItem/InboxItem.tsx
index def12a43d..9210cb1e1 100644
--- a/packages/frontend-design-poc/src/components/InboxItem/InboxItem.tsx
+++ b/packages/frontend-design-poc/src/components/InboxItem/InboxItem.tsx
@@ -21,9 +21,10 @@ interface InboxItemProps {
   description: string;
   sender: Participant;
   receiver: Participant;
-  tags?: InboxItemTag[];
   isChecked: boolean;
   onCheckedChange: (value: boolean) => void;
+  tags?: InboxItemTag[];
+  isUnread?: boolean;
 }
 
 export const InboxItem = ({
@@ -32,15 +33,17 @@ export const InboxItem = ({
   sender,
   receiver,
   toLabel,
-  tags,
+  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}
@@ -70,7 +73,7 @@ export const InboxItem = ({
         </div>
         <p className={styles.description}>{description}</p>
         <div className={styles.tags}>
-          {tags?.map((tag) => (
+          {tags.map((tag) => (
             <div key={tag.label} className={styles.tag}>
               {tag.icon && <div className={styles.icon}>{tag.icon}</div>}
               <span> {tag.label}</span>
diff --git a/packages/frontend-design-poc/src/components/InboxItem/inboxItem.module.css b/packages/frontend-design-poc/src/components/InboxItem/inboxItem.module.css
index c10e26391..491c8cc37 100644
--- a/packages/frontend-design-poc/src/components/InboxItem/inboxItem.module.css
+++ b/packages/frontend-design-poc/src/components/InboxItem/inboxItem.module.css
@@ -15,6 +15,10 @@
     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;
 }
 
diff --git a/packages/storybook/src/stories/InboxItems/InboxItems.stories.tsx b/packages/storybook/src/stories/InboxItems/InboxItems.stories.tsx
index ccddc96fc..4eacb6465 100644
--- a/packages/storybook/src/stories/InboxItems/InboxItems.stories.tsx
+++ b/packages/storybook/src/stories/InboxItems/InboxItems.stories.tsx
@@ -21,7 +21,7 @@ const SimpleExampleWithState = () => {
     <InboxItems>
       <InboxItem
         title="Har du glemt oss?"
-        description="Beskrivelse"
+        description="Eksempel på en beskrivelse av en ulest melding"
         sender={{ label: "DigDir", icon: <StarIcon /> }}
         receiver={{ label: "Per Person" }}
         toLabel="til"
@@ -32,6 +32,7 @@ const SimpleExampleWithState = () => {
         checkboxValue="value1"
         isChecked={isCheckedFirst}
         onCheckedChange={() => setIsCheckedFirst(!isCheckedFirst)}
+        isUnread
       />
       <InboxItem
         title="Aksjeoppgaven for 2022"