From 454188df663bab1e3006823b6672fe3f2ea1e984 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Tue, 9 Apr 2024 13:25:53 +0200 Subject: [PATCH 01/11] Make it possible to have a mobile version on the Status Badge component --- .../materials/utils/status-badge.tsx | 47 ++++++++++++++++--- 1 file changed, 41 insertions(+), 6 deletions(-) diff --git a/src/apps/loan-list/materials/utils/status-badge.tsx b/src/apps/loan-list/materials/utils/status-badge.tsx index a986d189c7..8a83587c3b 100644 --- a/src/apps/loan-list/materials/utils/status-badge.tsx +++ b/src/apps/loan-list/materials/utils/status-badge.tsx @@ -1,4 +1,5 @@ import React, { FC } from "react"; +import clsx from "clsx"; import { daysBetweenTodayAndDate } from "../../../../core/utils/helpers/general"; import useLoanThresholds from "../../../../core/utils/useLoanThresholds"; @@ -9,6 +10,7 @@ interface StatusBadgeProps { neutralText?: string; infoText?: string; showBadgeWithDueDate?: boolean; + mobileVersion?: boolean; } const StatusBadge: FC = ({ @@ -17,7 +19,8 @@ const StatusBadge: FC = ({ showBadgeWithDueDate = false, dangerText, infoText, - neutralText + neutralText, + mobileVersion = false }) => { const threshold = useLoanThresholds(); const daysBetweenTodayAndDue = badgeDate @@ -26,29 +29,61 @@ const StatusBadge: FC = ({ if (daysBetweenTodayAndDue < threshold.danger && dangerText) { return ( -
{dangerText}
+
+ {dangerText} +
); } if (daysBetweenTodayAndDue <= threshold.warning && warningText) { return ( -
{warningText}
+
+ {warningText} +
); } if (neutralText && !showBadgeWithDueDate) { return ( -
{neutralText}
+
+ {neutralText} +
); } if (infoText && !showBadgeWithDueDate) { - return
{infoText}
; + return ( +
+ {infoText} +
+ ); } if (dangerText && !showBadgeWithDueDate) { return ( -
{dangerText}
+
+ {dangerText} +
); } From c043f93601f8da69f226ffeb7c0731c6d424c019 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Tue, 9 Apr 2024 13:26:36 +0200 Subject: [PATCH 02/11] Move getLoanDeliveryDate helper function into the loan list helper file --- src/apps/loan-list/utils/helpers.ts | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/apps/loan-list/utils/helpers.ts b/src/apps/loan-list/utils/helpers.ts index 66d8396a00..f1e2b8bf24 100644 --- 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 {}; From 034f3583bc940b6803bf9285932c5b1538d627c4 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Tue, 9 Apr 2024 13:27:30 +0200 Subject: [PATCH 03/11] Shorten text string reasonings for why loans can't be renewed DDF agreed to shorten these to make them fit better. --- src/core/storybook/loanGroupModalArgs.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/core/storybook/loanGroupModalArgs.ts b/src/core/storybook/loanGroupModalArgs.ts index 653926d828..ef84667d91 100644 --- 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: { From bf81ea8bc875779e7e4a1ac95f2336e63fb0f272 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Tue, 9 Apr 2024 13:31:18 +0200 Subject: [PATCH 04/11] Update design system package to contain loan list group modal changes https://github.com/danskernesdigitalebibliotek/dpl-design-system/pull/567 --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 17b9b17114..fb726f0163 100644 --- 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-527492f69c8776ebda9cfa9aea56e48ef9e3f282", + "@danskernesdigitalebibliotek/dpl-design-system": "0.0.0-95d259b91082dc5113d7a469dec32bdf9578295a", "@reach/alert": "^0.17.0", "@reach/dialog": "^0.18.0", "@reduxjs/toolkit": "^1.9.7", diff --git a/yarn.lock b/yarn.lock index 20b8b403e3..35f088ac22 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1524,10 +1524,10 @@ debug "^3.1.0" lodash.once "^4.1.1" -"@danskernesdigitalebibliotek/dpl-design-system@0.0.0-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/dpl-design-system@0.0.0-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" From 03d350318d4db0c37abd34197d2bd94bf51cd1f9 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Tue, 9 Apr 2024 13:32:43 +0200 Subject: [PATCH 05/11] Update selectable material to reflect latest changes in design system https://github.com/danskernesdigitalebibliotek/dpl-design-system/pull/567 Some of the DOM structure changed. --- .../selectable-material.tsx | 41 ++++++++----------- 1 file changed, 18 insertions(+), 23 deletions(-) diff --git a/src/apps/loan-list/materials/selectable-material/selectable-material.tsx b/src/apps/loan-list/materials/selectable-material/selectable-material.tsx index 5da5c6c283..9cf7eb8c16 100644 --- 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 = ({ statusMessageComponentMobile, statusMessageComponentDesktop, statusBadgeComponent, + statusBadgeComponentMobile, focused, displayedMaterial, noHoverEffect = false @@ -111,44 +113,37 @@ const SelectableMaterial: FC = ({ {materialType} + {statusBadgeComponentMobile || ""}

{title}

- -
- {statusMessageComponentDesktop} -
- {statusBadgeComponent} +
{statusMessageComponentMobile} - {displayedMaterial && ( - - )}
+
+ {statusBadgeComponent} + {displayedMaterial && ( + + )} + {statusMessageComponentDesktop} +
{openDetailsModal && ( )}
From f3e16adb2d6afe4c886e0ff14f2d3e073748a8e0 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Tue, 9 Apr 2024 13:33:35 +0200 Subject: [PATCH 06/11] Use getLoanDeliveryDate helper function in GroupModalLoansList ...and provide the SelectableMaterial component with a mobile version of a status badge. --- .../GroupModal/GroupModalLoansList.tsx | 25 +++++++------------ 1 file changed, 9 insertions(+), 16 deletions(-) diff --git a/src/components/GroupModal/GroupModalLoansList.tsx b/src/components/GroupModal/GroupModalLoansList.tsx index 01bc2ebacc..a77b22e801 100644 --- 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[]; @@ -56,21 +56,14 @@ const GroupModalLoansList: FC = ({ statusBadgeComponent={ + } + statusBadgeComponentMobile={ + } statusMessageComponentDesktop={ From de5882158859047e012263e7d33e733e7a05ecca Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Wed, 10 Apr 2024 11:38:22 +0200 Subject: [PATCH 07/11] Return null as an "else" to returning a react component, not empty string --- .../materials/selectable-material/selectable-material.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/apps/loan-list/materials/selectable-material/selectable-material.tsx b/src/apps/loan-list/materials/selectable-material/selectable-material.tsx index 9cf7eb8c16..cc0144866b 100644 --- a/src/apps/loan-list/materials/selectable-material/selectable-material.tsx +++ b/src/apps/loan-list/materials/selectable-material/selectable-material.tsx @@ -113,7 +113,7 @@ const SelectableMaterial: FC = ({ {materialType} - {statusBadgeComponentMobile || ""} + {statusBadgeComponentMobile || null}

{title}

From d8412c6f747d94926157857ed01fa6ee83c38e3d Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Wed, 10 Apr 2024 12:01:23 +0200 Subject: [PATCH 08/11] Move duplicate HTML code from status badge component into its own comp --- .../materials/utils/status-badge-content.tsx | 29 +++++++++ .../materials/utils/status-badge.tsx | 62 ++++++++----------- 2 files changed, 55 insertions(+), 36 deletions(-) create mode 100644 src/apps/loan-list/materials/utils/status-badge-content.tsx diff --git a/src/apps/loan-list/materials/utils/status-badge-content.tsx b/src/apps/loan-list/materials/utils/status-badge-content.tsx new file mode 100644 index 0000000000..e86188351f --- /dev/null +++ b/src/apps/loan-list/materials/utils/status-badge-content.tsx @@ -0,0 +1,29 @@ +import clsx from "clsx"; +import React, { FC } from "react"; + +interface StatusBadgeContentProps { + statusLabelType: "danger" | "warning" | "neutral" | "info"; + text: string; + mobileVersion?: boolean; +} + +const StatusBadgeContent: FC = ({ + statusLabelType, + text, + mobileVersion = false +}) => { + return ( +
+ {text} +
+ ); +}; + +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 index 8a83587c3b..e707bc3d47 100644 --- a/src/apps/loan-list/materials/utils/status-badge.tsx +++ b/src/apps/loan-list/materials/utils/status-badge.tsx @@ -1,7 +1,7 @@ import React, { FC } from "react"; -import clsx from "clsx"; import { daysBetweenTodayAndDate } from "../../../../core/utils/helpers/general"; import useLoanThresholds from "../../../../core/utils/useLoanThresholds"; +import StatusBadgeContent from "./status-badge-content"; interface StatusBadgeProps { badgeDate?: string | null; @@ -29,61 +29,51 @@ const StatusBadge: FC = ({ if (daysBetweenTodayAndDue < threshold.danger && dangerText) { return ( -
- {dangerText} -
+ ); } if (daysBetweenTodayAndDue <= threshold.warning && warningText) { return ( -
- {warningText} -
+ ); } if (neutralText && !showBadgeWithDueDate) { return ( -
- {neutralText} -
+ ); } if (infoText && !showBadgeWithDueDate) { return ( -
- {infoText} -
+ ); } if (dangerText && !showBadgeWithDueDate) { return ( -
- {dangerText} -
+ ); } From b062c7825bdaa9f5eaf256d790f1948b62657469 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Wed, 10 Apr 2024 12:05:30 +0200 Subject: [PATCH 09/11] Correct a typo in status-badge-content component --- .../loan-list/materials/utils/status-badge-content.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/apps/loan-list/materials/utils/status-badge-content.tsx b/src/apps/loan-list/materials/utils/status-badge-content.tsx index e86188351f..5d9e6e868c 100644 --- a/src/apps/loan-list/materials/utils/status-badge-content.tsx +++ b/src/apps/loan-list/materials/utils/status-badge-content.tsx @@ -14,12 +14,9 @@ const StatusBadgeContent: FC = ({ }) => { return (
{text}
From 7558f4141a22722096a95a8e0e4cc84e453f0304 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Wed, 17 Apr 2024 10:34:34 +0200 Subject: [PATCH 10/11] Rename mobileVersion to isMobileVersion prop in Status badge component --- .../loan-list/materials/utils/status-badge-content.tsx | 6 +++--- src/apps/loan-list/materials/utils/status-badge.tsx | 10 +++++----- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/apps/loan-list/materials/utils/status-badge-content.tsx b/src/apps/loan-list/materials/utils/status-badge-content.tsx index 5d9e6e868c..3e37cfc13f 100644 --- a/src/apps/loan-list/materials/utils/status-badge-content.tsx +++ b/src/apps/loan-list/materials/utils/status-badge-content.tsx @@ -4,18 +4,18 @@ import React, { FC } from "react"; interface StatusBadgeContentProps { statusLabelType: "danger" | "warning" | "neutral" | "info"; text: string; - mobileVersion?: boolean; + isMobileVersion?: boolean; } const StatusBadgeContent: FC = ({ statusLabelType, text, - mobileVersion = false + isMobileVersion = false }) => { return (
{text} diff --git a/src/apps/loan-list/materials/utils/status-badge.tsx b/src/apps/loan-list/materials/utils/status-badge.tsx index e707bc3d47..b4d3462c1c 100644 --- a/src/apps/loan-list/materials/utils/status-badge.tsx +++ b/src/apps/loan-list/materials/utils/status-badge.tsx @@ -30,7 +30,7 @@ const StatusBadge: FC = ({ if (daysBetweenTodayAndDue < threshold.danger && dangerText) { return ( @@ -40,7 +40,7 @@ const StatusBadge: FC = ({ if (daysBetweenTodayAndDue <= threshold.warning && warningText) { return ( @@ -50,7 +50,7 @@ const StatusBadge: FC = ({ if (neutralText && !showBadgeWithDueDate) { return ( @@ -60,7 +60,7 @@ const StatusBadge: FC = ({ if (infoText && !showBadgeWithDueDate) { return ( @@ -70,7 +70,7 @@ const StatusBadge: FC = ({ if (dangerText && !showBadgeWithDueDate) { return ( From 7387a36df3d84be526156bed77a3978ec2005152 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Wed, 17 Apr 2024 10:54:37 +0200 Subject: [PATCH 11/11] Update design system package to include changes to loan list items --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 5ac926c76c..f087be6be1 100644 --- 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/yarn.lock b/yarn.lock index 2b4d7f2d01..62314d2653 100644 --- 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/dpl-design-system@0.0.0-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"