5388: Add notifications to profile modal

Author: yepzdk

src/stories/Library/Modals/modal-profile/ModalProfile.stories.tsx

@@ -24,6 +24,31 @@ export default {
       control: { type: "text" },
       defaultValue: "Se din profil",
     },
+    notifications: {
+      control: { type: "object" },
+      defaultValue: [
+        {
+          label: {
+            label: "overskredet",
+            status: "danger",
+          },
+          number: {
+            label: 2,
+            status: "danger",
+          },
+          title: "Afleveret for sent",
+          showDot: true,
+        },
+        {
+          number: {
+            label: 2,
+            status: "warning",
+          },
+          title: "Lån overskredet",
+          showDot: true,
+        },
+      ],
+    },
     profileNavLinks: {
       control: { type: "object" },
       defaultValue: [

src/stories/Library/Modals/modal-profile/ModalProfile.tsx

@@ -4,12 +4,17 @@ import { ModalHeader } from "../modal-header/ModalHeader";
 import { ModalCloseButton, ModalFallbackButton } from "../ModalShared";
 import { Button } from "../../Buttons/button/Button";
 import { LinkFilters, LinkFilter } from "../../link-filters/LinkFilters";
+import {
+  ListDashboard,
+  ListDashboardProps,
+} from "../../Lists/list-dashboard/ListDashboard";
 
 export type ModalProfileProps = {
   showModal: boolean;
   headerName: string;
   headerLinkHref: string;
   headerLinkText: string;
+  notifications: ListDashboardProps[];
   profileNavLinks: LinkFilter[];
 };
 
@@ -18,6 +23,7 @@ export const ModalProfile: React.FC<ModalProfileProps> = ({
   headerName,
   headerLinkHref,
   headerLinkText,
+  notifications,
   profileNavLinks,
 }) => {
   const [shownModal, setShownModal] = useState(showModal);
@@ -55,6 +61,19 @@ export const ModalProfile: React.FC<ModalProfileProps> = ({
           headerLinkText={headerLinkText}
         />
 
+        <div className="modal-profile__notifications">
+          {notifications.map((item, index) => (
+            <div key={index} className="modal-profile__notification-item">
+              <ListDashboard
+                title={item.title}
+                number={item.number}
+                label={item.label}
+                showDot={item.showDot}
+              />
+            </div>
+          ))}
+        </div>
+
         <div className="modal-profile__container">
           <div className="modal-profile__links">
             <LinkFilters filters={profileNavLinks} />

src/stories/Library/Modals/modal-profile/modal-profile.scss

@@ -1,6 +1,35 @@
 .modal-profile {
   flex-direction: column;
 
+  &__notifications {
+    border-bottom: 1px solid $c-global-tertiary-1;
+
+    padding: 32px;
+
+    @include breakpoint-s {
+      padding: {
+        top: 40px;
+        right: 80px;
+        bottom: 40px;
+        left: 80px;
+      }
+    }
+  }
+
+  &__notification-item {
+    margin-bottom: 8px;
+  }
+
+  &__notification-item .list-dashboard {
+    padding: 8px;
+  }
+
+  &__notification-item .number {
+    min-width: 40px;
+    width: 40px;
+    height: 40px;
+  }
+
   &__container {
     height: 100%;
     display: flex;
@@ -34,3 +63,7 @@
     }
   }
 }
+
+.test-color {
+  color: red;
+}