feature: add modifier isUnread for InboxItem

Altinn · Feb 8, 2024 · 48eeffd · 48eeffd
1 parent 6c15934
commit 48eeffd
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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"