Renewal reason should fit in

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-527492f69c8776ebda9cfa9aea56e48ef9e3f282",
+    "@danskernesdigitalebibliotek/dpl-design-system": "0.0.0-95d259b91082dc5113d7a469dec32bdf9578295a",
     "@reach/alert": "^0.17.0",
     "@reach/dialog": "^0.18.0",
     "@reduxjs/toolkit": "^1.9.7",

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>

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;
+  mobileVersion?: boolean;
+}
+
+const StatusBadgeContent: FC<StatusBadgeContentProps> = ({
+  statusLabelType,
+  text,
+  mobileVersion = false
+}) => {
+  return (
+    <div
+      className={clsx(`status-label status-label--${statusLabelType}`, [
+        { "hide-on-desktop ml-16": mobileVersion }
+      ])}
+    >
+      {text}
+    </div>
+  );
+};
+
+export default StatusBadgeContent;

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
+        mobileVersion={mobileVersion}
+        text={dangerText}
+        statusLabelType="danger"
+      />
     );
   }
 
   if (daysBetweenTodayAndDue <= threshold.warning && warningText) {
     return (
-      <div className="status-label status-label--warning">{warningText}</div>
+      <StatusBadgeContent
+        mobileVersion={mobileVersion}
+        text={warningText}
+        statusLabelType="warning"
+      />
     );
   }
 
   if (neutralText && !showBadgeWithDueDate) {
     return (
-      <div className="status-label status-label--neutral">{neutralText}</div>
+      <StatusBadgeContent
+        mobileVersion={mobileVersion}
+        text={neutralText}
+        statusLabelType="neutral"
+      />
     );
   }
 
   if (infoText && !showBadgeWithDueDate) {
-    return <div className="status-label status-label--info">{infoText}</div>;
+    return (
+      <StatusBadgeContent
+        mobileVersion={mobileVersion}
+        text={infoText}
+        statusLabelType="info"
+      />
+    );
   }
 
   if (dangerText && !showBadgeWithDueDate) {
     return (
-      <div className="status-label status-label--danger">{dangerText}</div>
+      <StatusBadgeContent
+        mobileVersion={mobileVersion}
+        text={dangerText}
+        statusLabelType="danger"
+      />
     );
   }
 

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 {};

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[];
@@ -56,21 +56,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={

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: {

yarn.lock

@@ -1524,10 +1524,10 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
-"@danskernesdigitalebibliotek/[email protected]527492f69c8776ebda9cfa9aea56e48ef9e3f282":
-  version "0.0.0-527492f69c8776ebda9cfa9aea56e48ef9e3f282"
-  resolved "https://npm.pkg.github.com/download/@danskernesdigitalebibliotek/dpl-design-system/0.0.0-527492f69c8776ebda9cfa9aea56e48ef9e3f282/f22f3b78f17dd59ad293154e67c6e8ed518e8eef#f22f3b78f17dd59ad293154e67c6e8ed518e8eef"
-  integrity sha512-HOmhy8ivOgJwn9fgXp92BqyB5ab3QEUj2JcoNn0YdWiIbQ2Drf7vN4sZF6prylOJBrAme3vBDIf/2wpa3wB4Iw==
+"@danskernesdigitalebibliotek/[email protected]95d259b91082dc5113d7a469dec32bdf9578295a":
+  version "0.0.0-95d259b91082dc5113d7a469dec32bdf9578295a"
+  resolved "https://npm.pkg.github.com/download/@danskernesdigitalebibliotek/dpl-design-system/0.0.0-95d259b91082dc5113d7a469dec32bdf9578295a/047d4bf6db22171d4a2089e325fad14e6876f131#047d4bf6db22171d4a2089e325fad14e6876f131"
+  integrity sha512-rIAH768uJ5LWikmhnnb8iSSp7aYuqsCikE7Z/wJtsfhL1eM8PtqsPCYt+OR69DWgFuooaVhYh7APP8yhHWvEgA==
 
 "@discoveryjs/json-ext@^0.5.0", "@discoveryjs/json-ext@^0.5.3":
   version "0.5.7"