Merge pull request #1099 from danskernesdigitalebibliotek/renewal-rea…

…son-should-fit-in Renewal reason should fit in
danskernesdigitalebibliotek · Apr 17, 2024 · e90cf36 · e90cf36
2 parents 3e632e2 + 7387a36
commit e90cf36
Show file tree

Hide file tree

Showing 8 changed files with 112 additions and 54 deletions.
diff --git a/package.json b/package.json
@@ -144,7 +144,7 @@
     "prop-types": "Since we use former ddb-react components that depend on prop-types we keep this. Should be removed when usage of prop-types is deprecated."
   },
   "dependencies": {
-    "@danskernesdigitalebibliotek/dpl-design-system": "^0.0.0-4b721ea221c3481c10a13d895f36d79861f074fb",
+    "@danskernesdigitalebibliotek/dpl-design-system": "0.0.0-2f00e60d4323a98176a88dc2987f95b2c8b8d0cd",
     "@fullcalendar/core": "^6.1.11",
     "@fullcalendar/daygrid": "^6.1.11",
     "@fullcalendar/interaction": "^6.1.11",

diff --git a/src/apps/loan-list/materials/selectable-material/selectable-material.tsx b/src/apps/loan-list/materials/selectable-material/selectable-material.tsx
@@ -24,6 +24,7 @@ interface SelectableMaterialProps {
   statusMessageComponentMobile: ReactNode;
   statusMessageComponentDesktop: ReactNode;
   statusBadgeComponent: ReactNode;
+  statusBadgeComponentMobile?: ReactNode;
   focused: boolean;
   displayedMaterial?: ReservationType;
   noHoverEffect?: boolean;
@@ -39,6 +40,7 @@ const SelectableMaterial: FC<SelectableMaterialProps & MaterialProps> = ({
   statusMessageComponentMobile,
   statusMessageComponentDesktop,
   statusBadgeComponent,
+  statusBadgeComponentMobile,
   focused,
   displayedMaterial,
   noHoverEffect = false
@@ -111,44 +113,37 @@ const SelectableMaterial: FC<SelectableMaterialProps & MaterialProps> = ({
               {materialType}
             </div>
           </div>
+          {statusBadgeComponentMobile || null}
           <p className="list-materials__content__header mt-8" lang={lang || ""}>
             {title}
           </p>
           <p className="text-small-caption">
             <AuthorYear author={authorsShort} year={year} />
           </p>
-        </div>
-        <div
-          className={clsx("list-materials__status pl-4", {
-            "cursor-pointer": openDetailsModal
-          })}
-          role="button"
-          onClick={handleOnClick}
-          onKeyUp={handleOnKeyUp}
-          tabIndex={0}
-        >
-          {statusMessageComponentDesktop}
-          <div>
-            {statusBadgeComponent}
+          <div className="list-materials__status list-materials__status--mobile">
             {statusMessageComponentMobile}
-            {displayedMaterial && (
-              <ReservationInfo
-                reservationInfo={displayedMaterial}
-                showArrow={false}
-                showStatusCircleIcon={false}
-                reservationStatusClassNameOverride=""
-                isDigital={isDigital(displayedMaterial)}
-              />
-            )}
           </div>
         </div>
+        <div className="list-materials__status list-materials__status--desktop">
+          {statusBadgeComponent}
+          {displayedMaterial && (
+            <ReservationInfo
+              reservationInfo={displayedMaterial}
+              showArrow={false}
+              showStatusCircleIcon={false}
+              reservationStatusClassNameOverride=""
+              isDigital={isDigital(displayedMaterial)}
+            />
+          )}
+          {statusMessageComponentDesktop}
+        </div>
         {openDetailsModal && (
           <ArrowButton
             arrowLabelledBy={listId(item)}
             cursorPointer
             clickEventHandler={handleOnClick}
             keyUpEventHandler={handleOnKeyUp}
-            classNames="list-materials__arrow"
+            classNames="list-materials__arrow arrow-button"
           />
         )}
       </div>

diff --git a/src/apps/loan-list/materials/utils/status-badge-content.tsx b/src/apps/loan-list/materials/utils/status-badge-content.tsx
@@ -0,0 +1,26 @@
+import clsx from "clsx";
+import React, { FC } from "react";
+
+interface StatusBadgeContentProps {
+  statusLabelType: "danger" | "warning" | "neutral" | "info";
+  text: string;
+  isMobileVersion?: boolean;
+}
+
+const StatusBadgeContent: FC<StatusBadgeContentProps> = ({
+  statusLabelType,
+  text,
+  isMobileVersion = false
+}) => {
+  return (
+    <div
+      className={clsx(`status-label status-label--${statusLabelType}`, [
+        { "hide-on-desktop ml-16": isMobileVersion }
+      ])}
+    >
+      {text}
+    </div>
+  );
+};
+
+export default StatusBadgeContent;
diff --git a/src/apps/loan-list/materials/utils/status-badge.tsx b/src/apps/loan-list/materials/utils/status-badge.tsx
@@ -1,6 +1,7 @@
 import React, { FC } from "react";
 import { daysBetweenTodayAndDate } from "../../../../core/utils/helpers/general";
 import useLoanThresholds from "../../../../core/utils/useLoanThresholds";
+import StatusBadgeContent from "./status-badge-content";
 
 interface StatusBadgeProps {
   badgeDate?: string | null;
@@ -9,6 +10,7 @@ interface StatusBadgeProps {
   neutralText?: string;
   infoText?: string;
   showBadgeWithDueDate?: boolean;
+  mobileVersion?: boolean;
 }
 
 const StatusBadge: FC<StatusBadgeProps> = ({
@@ -17,7 +19,8 @@ const StatusBadge: FC<StatusBadgeProps> = ({
   showBadgeWithDueDate = false,
   dangerText,
   infoText,
-  neutralText
+  neutralText,
+  mobileVersion = false
 }) => {
   const threshold = useLoanThresholds();
   const daysBetweenTodayAndDue = badgeDate
@@ -26,29 +29,51 @@ const StatusBadge: FC<StatusBadgeProps> = ({
 
   if (daysBetweenTodayAndDue < threshold.danger && dangerText) {
     return (
-      <div className="status-label status-label--danger">{dangerText}</div>
+      <StatusBadgeContent
+        isMobileVersion={mobileVersion}
+        text={dangerText}
+        statusLabelType="danger"
+      />
     );
   }
 
   if (daysBetweenTodayAndDue <= threshold.warning && warningText) {
     return (
-      <div className="status-label status-label--warning">{warningText}</div>
+      <StatusBadgeContent
+        isMobileVersion={mobileVersion}
+        text={warningText}
+        statusLabelType="warning"
+      />
     );
   }
 
   if (neutralText && !showBadgeWithDueDate) {
     return (
-      <div className="status-label status-label--neutral">{neutralText}</div>
+      <StatusBadgeContent
+        isMobileVersion={mobileVersion}
+        text={neutralText}
+        statusLabelType="neutral"
+      />
     );
   }
 
   if (infoText && !showBadgeWithDueDate) {
-    return <div className="status-label status-label--info">{infoText}</div>;
+    return (
+      <StatusBadgeContent
+        isMobileVersion={mobileVersion}
+        text={infoText}
+        statusLabelType="info"
+      />
+    );
   }
 
   if (dangerText && !showBadgeWithDueDate) {
     return (
-      <div className="status-label status-label--danger">{dangerText}</div>
+      <StatusBadgeContent
+        isMobileVersion={mobileVersion}
+        text={dangerText}
+        statusLabelType="danger"
+      />
     );
   }
 

diff --git a/src/apps/loan-list/utils/helpers.ts b/src/apps/loan-list/utils/helpers.ts
@@ -83,4 +83,24 @@ export const getStackedItems = (
   return returnLoans;
 };
 
+export const getLoanDeliveryDate = (
+  loanType: LoanType,
+  formatDate: (date: string) => string,
+  t: UseTextFunction
+) => {
+  // Set the value of 'neutralText' based on the material type and due date
+  return loanType.dueDate
+    ? t(
+        isDigital(loanType)
+          ? "groupModalDueDateDigitalMaterialText"
+          : "groupModalDueDateMaterialText",
+        {
+          placeholders: {
+            "@date": formatDate(loanType.dueDate)
+          }
+        }
+      )
+    : "";
+};
+
 export default {};
diff --git a/src/components/GroupModal/GroupModalLoansList.tsx b/src/components/GroupModal/GroupModalLoansList.tsx
@@ -7,7 +7,7 @@ import StatusMessage from "../../apps/loan-list/materials/selectable-material/St
 import StatusBadge from "../../apps/loan-list/materials/utils/status-badge";
 import { formatDate } from "../../core/utils/helpers/date";
 import { ListType } from "../../core/utils/types/list-type";
-import { isDigital } from "../../apps/loan-list/utils/helpers";
+import { getLoanDeliveryDate } from "../../apps/loan-list/utils/helpers";
 
 export interface GroupModalLoansListProps {
   materials: LoanType[];
@@ -60,21 +60,14 @@ const GroupModalLoansList: FC<GroupModalLoansListProps> = ({
             statusBadgeComponent={
               <StatusBadge
                 badgeDate={loanType.dueDate}
-                neutralText={
-                  // Set the value of 'neutralText' based on the material type and due date
-                  loanType.dueDate
-                    ? t(
-                        isDigital(loanType)
-                          ? "groupModalDueDateDigitalMaterialText"
-                          : "groupModalDueDateMaterialText",
-                        {
-                          placeholders: {
-                            "@date": formatDate(loanType.dueDate)
-                          }
-                        }
-                      )
-                    : ""
-                }
+                neutralText={getLoanDeliveryDate(loanType, formatDate, t)}
+              />
+            }
+            statusBadgeComponentMobile={
+              <StatusBadge
+                badgeDate={loanType.dueDate}
+                neutralText={getLoanDeliveryDate(loanType, formatDate, t)}
+                mobileVersion
               />
             }
             statusMessageComponentDesktop={

diff --git a/src/core/storybook/loanGroupModalArgs.ts b/src/core/storybook/loanGroupModalArgs.ts
@@ -3,7 +3,7 @@ export default {
     control: {
       type: "text"
     },
-    defaultValue: "The item cannot be renewed further "
+    defaultValue: "Can't be renewed further"
   },
   groupModalDueDateWarningLoanOverdueText: {
     control: {
@@ -16,11 +16,10 @@ export default {
     control: {
       type: "text"
     },
-    defaultValue: "The item is reserved by another patron"
+    defaultValue: "Reserved by another patron"
   },
   groupModalRenewLoanDeniedInterLibraryLoanText: {
-    defaultValue:
-      "The item has been lent to you by another library and renewal is therefore conditional of the acceptance by that library",
+    defaultValue: "Lent by another library",
     control: { type: "text" }
   },
   groupModalLoansCloseModalAriaLabelText: {

diff --git a/yarn.lock b/yarn.lock
@@ -1533,10 +1533,10 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
-"@danskernesdigitalebibliotek/dpl-design-system@^0.0.0-4b721ea221c3481c10a13d895f36d79861f074fb":
-  version "0.0.0-fff402ba1614ff85d3a187e176cb7810b6be190f"
-  resolved "https://npm.pkg.github.com/download/@danskernesdigitalebibliotek/dpl-design-system/0.0.0-fff402ba1614ff85d3a187e176cb7810b6be190f/0ffad3b0063964e34fb2b67fb1fa7efa34a6354a#0ffad3b0063964e34fb2b67fb1fa7efa34a6354a"
-  integrity sha512-oeSeqxsHYQQbgpz8zQWHAXijmk5flqpuPFjn7ZWhcqlFfypDhGmZa9suvfukwt/KzTfvNI3mzXP2xaLk7NOMlw==
+"@danskernesdigitalebibliotek/[email protected]2f00e60d4323a98176a88dc2987f95b2c8b8d0cd":
+  version "0.0.0-2f00e60d4323a98176a88dc2987f95b2c8b8d0cd"
+  resolved "https://npm.pkg.github.com/download/@danskernesdigitalebibliotek/dpl-design-system/0.0.0-2f00e60d4323a98176a88dc2987f95b2c8b8d0cd/63efde1e642356798598fd17a8b098ebc85887f9#63efde1e642356798598fd17a8b098ebc85887f9"
+  integrity sha512-kLUwK8z5Obhb1M8eZgVNsrblZTGJ53w/+WwNU7cU0IrH7/a1Udz249dMjQ6sH3fpM00CeGQqniUoZyhEShaTNg==
 
 "@discoveryjs/json-ext@^0.5.0", "@discoveryjs/json-ext@^0.5.3":
   version "0.5.7"