Merge pull request danskernesdigitalebibliotek#111 from itk-dev/feature/modal-profile-notifications

Feature/modal profile notifications

Author: yepzdk

src/stories/Library/Lists/list-dashboard/ListDashboard.tsx

@@ -17,7 +17,15 @@ export const ListDashboard: React.FC<ListDashboardProps> = ({
   return (
     <div className="list-dashboard">
       <Number label={number.label} status={number.status} />
-      <span className="list-dashboard__title text-header-h4">{title}</span>
+      <span
+        className={
+          label
+            ? "list-dashboard__title text-header-h4"
+            : "list-dashboard__title text-body-medium-regular"
+        }
+      >
+        {title}
+      </span>
       {label && <StatusLabel label={label.label} status={label.status} />}
       {showDot && <div className="list-dashboard__dot" />}
     </div>

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;