5593: mobile view of group modal

itk-dev · May 4, 2023 · a9bf936 · a9bf936
1 parent befa727
commit a9bf936
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 137 deletions.
diff --git a/src/stories/Library/Lists/list-materials/ListMaterials.stories.tsx b/src/stories/Library/Lists/list-materials/ListMaterials.stories.tsx
@@ -1,6 +1,5 @@
 import { withDesign } from "storybook-addon-designs";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
-
 import { ListMaterials } from "./ListMaterials";
 
 export default {
@@ -30,14 +29,12 @@ const Template: ComponentStory<typeof ListMaterials> = (args) => (
 
 export const Item = Template.bind({});
 Item.args = {
+  year: "2001",
   title: "Audrey Hepburn",
-  author: "Af Isabel Sánchez Vegara, Amaia Arrazola (2018)",
+  author: "Af Isabel Sánchez Vegara, Amaia Arrazola",
+  statusMessage: "The item cannot be renewed further",
   isChecked: true,
-  canBeRenewed: true,
-  statusDelivery: {
-    label: "AFLEVERES 20.11.21",
-    status: "neutral",
-  },
+  disabled: true,
   statusMaterialType: {
     label: "bog",
     status: "outline",

diff --git a/src/stories/Library/Lists/list-materials/ListMaterials.tsx b/src/stories/Library/Lists/list-materials/ListMaterials.tsx
@@ -1,23 +1,25 @@
-import { useState } from "react";
+import { useState, FC } from "react";
 import { Checkbox } from "../../Forms/checkbox/Checkbox";
 import { StatusLabel, StatusLabelProps } from "../../status-label/StatusLabel";
 
 export type ListMaterialsProps = {
   title: string;
   author: string;
+  year: string;
+  statusMessage: string;
   statusMaterialType: StatusLabelProps;
-  statusDelivery: StatusLabelProps;
-  canBeRenewed: boolean;
   isChecked: boolean;
+  disabled: boolean;
 };
 
-export const ListMaterials: React.FC<ListMaterialsProps> = ({
+export const ListMaterials: FC<ListMaterialsProps> = ({
   title,
+  year,
   author,
-  statusDelivery,
   statusMaterialType,
-  canBeRenewed,
   isChecked,
+  statusMessage,
+  disabled,
 }) => {
   const [isItChecked, setIsItChecked] = useState(isChecked);
 
@@ -26,40 +28,86 @@ export const ListMaterials: React.FC<ListMaterialsProps> = ({
   };
 
   return (
-    <div
-      className={`list-materials ${
-        isItChecked ? "list-materials__selected" : ""
-      }`}
-    >
-      {canBeRenewed && (
-        <div className="list-materials__checkbox mr-32">
-          <Checkbox
-            hiddenLabel={false}
-            isChecked={isItChecked}
-            callback={handleToggle}
-            ariaLabel="Vælg materiale"
-          />
+    <ul className="modal-loan__list-materials">
+      <li>
+        <div
+          className={`list-materials ${
+            disabled ? "list-materials--disabled" : ""
+          }`}
+        >
+          <div className="list-materials__checkbox mr-32">
+            <Checkbox isChecked={false} hiddenLabel label={`Select ${title}`} />
+          </div>
+          <div className="list-materials__content">
+            <div className="list-materials__content-status">
+              <StatusLabel {...statusMaterialType} />
+            </div>
+            <p className="text-header-h5 mt-8">{title}</p>
+            <p className="text-small-caption">
+              {author} ({year})
+            </p>
+          </div>
+          <div className="list-materials__status">
+            {statusMessage && (
+              <span className="list-materials__status__note-desktop">
+                {statusMessage}
+              </span>
+            )}
+            <div>
+              <div className="status-label status-label--neutral">
+                Afleveres 27-04-2023
+              </div>
+              {statusMessage && (
+                <span className="list-materials__status__note-mobile">
+                  {statusMessage}
+                </span>
+              )}
+              <button
+                type="button"
+                className="list-reservation__note"
+                aria-label="Go to Alt om håndarbejdes strikkemagasin material details"
+              >
+                Go to material details
+              </button>
+            </div>
+          </div>
         </div>
-      )}
-      <div className="list-materials__content">
-        <div className="list-materials__content-status">
-          <StatusLabel {...statusMaterialType} />
-          <StatusLabel
-            classNames="list-materials__content-status-label"
-            {...statusDelivery}
-          />
+      </li>
+      <li>
+        <div className="list-materials">
+          <div className="list-materials__checkbox mr-32">
+            <Checkbox
+              callback={handleToggle}
+              isChecked={isItChecked}
+              hiddenLabel
+              label={`Select ${title}`}
+            />
+          </div>
+          <div className="list-materials__content">
+            <div className="list-materials__content-status">
+              <div className="status-label status-label--outline">Bog</div>
+            </div>
+            <p className="text-header-h5 mt-8">{title}</p>
+            <p className="text-small-caption">
+              {author} ({year})
+            </p>
+          </div>
+          <div className="list-materials__status">
+            <div>
+              <div className="status-label status-label--neutral">
+                Afleveres 27-04-2023
+              </div>
+              <button
+                type="button"
+                className="list-reservation__note"
+                aria-label="Go to Alt om håndarbejdes strikkemagasin material details"
+              >
+                Go to material details
+              </button>
+            </div>
+          </div>
         </div>
-        <p className="text-header-h5 mt-8">{title}</p>
-        <p className="text-small-caption">{author}</p>
-      </div>
-      <div className="list-materials__status">
-        {!canBeRenewed && (
-          <span className="text-small-caption">
-            Digitale materialer kan ikke fornys
-          </span>
-        )}
-        <StatusLabel {...statusDelivery} />
-      </div>
-    </div>
+      </li>
+    </ul>
   );
 };
diff --git a/src/stories/Library/Lists/list-materials/list-materials.scss b/src/stories/Library/Lists/list-materials/list-materials.scss
@@ -43,9 +43,20 @@
   margin-top: 0;
   align-items: center;
   grid-gap: 16px;
+}
 
-  .text-small-caption {
-    color: $c-text-secondary-gray;
+.list-materials__status__note-desktop {
+  @extend %text-small-caption;
+  display: none;
+  @include breakpoint-s {
+    display: flex;
+  }
+}
+.list-materials__status__note-mobile {
+  @extend %text-small-caption;
+  display: flex;
+  @include breakpoint-s {
+    display: none;
   }
 }
 

diff --git a/src/stories/Library/Modals/modal-loan/ModalLoan.stories.tsx b/src/stories/Library/Modals/modal-loan/ModalLoan.stories.tsx
@@ -1,6 +1,5 @@
 import { withDesign } from "storybook-addon-designs";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
-
 import { ModalLoan } from "./ModalLoan";
 
 export default {