From 48b3a1c51731a7cc0f2682ad213e592b71820bfa Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Wed, 3 Apr 2024 16:31:59 +0200 Subject: [PATCH 01/26] Show status messages on cards underneath each other --- src/stories/Library/Lists/list-materials/list-materials.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/stories/Library/Lists/list-materials/list-materials.scss b/src/stories/Library/Lists/list-materials/list-materials.scss index 7f13291da..f8be2de2e 100644 --- a/src/stories/Library/Lists/list-materials/list-materials.scss +++ b/src/stories/Library/Lists/list-materials/list-materials.scss @@ -62,9 +62,9 @@ .list-materials__status { display: flex; - flex-direction: row; + flex-direction: column; margin-top: 0; - align-items: center; + align-items: flex-start; grid-gap: $s-md; } From 026dbfca44926968802b374246729d73a2414baa Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Wed, 3 Apr 2024 17:52:58 +0200 Subject: [PATCH 02/26] Justify list card content to the left, and center it vertically --- src/stories/Library/Lists/list-materials/list-materials.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/stories/Library/Lists/list-materials/list-materials.scss b/src/stories/Library/Lists/list-materials/list-materials.scss index f8be2de2e..93c8260b1 100644 --- a/src/stories/Library/Lists/list-materials/list-materials.scss +++ b/src/stories/Library/Lists/list-materials/list-materials.scss @@ -64,7 +64,8 @@ display: flex; flex-direction: column; margin-top: 0; - align-items: flex-start; + align-items: center; + justify-content: flex-start; grid-gap: $s-md; } From 021cc6f1d6b178d50051532d1362a61108863a81 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Thu, 4 Apr 2024 09:40:08 +0200 Subject: [PATCH 03/26] Update list card status messages to new definition The item cannot be renewed further -> Can't be renewed further --- .../Lists/list-materials/ListMaterials.stories.tsx | 2 +- src/stories/Library/Modals/modal-loan/ModalLoan.tsx | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/stories/Library/Lists/list-materials/ListMaterials.stories.tsx b/src/stories/Library/Lists/list-materials/ListMaterials.stories.tsx index 9da96224f..5c1f3e9f7 100644 --- a/src/stories/Library/Lists/list-materials/ListMaterials.stories.tsx +++ b/src/stories/Library/Lists/list-materials/ListMaterials.stories.tsx @@ -34,7 +34,7 @@ Item.args = { year: "2001", title: "Audrey Hepburn", author: "Af Isabel Sánchez Vegara, Amaia Arrazola", - statusMessage: "The item cannot be renewed further", + statusMessage: "Can't be renewed further", isChecked: true, disabled: true, statusMaterialType: { diff --git a/src/stories/Library/Modals/modal-loan/ModalLoan.tsx b/src/stories/Library/Modals/modal-loan/ModalLoan.tsx index f3ca826de..e44a241e5 100644 --- a/src/stories/Library/Modals/modal-loan/ModalLoan.tsx +++ b/src/stories/Library/Modals/modal-loan/ModalLoan.tsx @@ -24,7 +24,7 @@ const listExpired: LoanMaterials = [ title: "Den utrolige historie om den kæmpestore pære (eller beretningen om, hvordan Jeronimus Bjergstrøm Severin Olsen blev genindsat i sit retmæssige embede som Solbys borgmester til glæde for alle byens indbyggere på nær én)", author: "Af Jakob Martin Strid", - statusMessage: "The item cannot be renewed further", + statusMessage: "Can't be renewed further", isChecked: true, disabled: true, statusMaterialType: { @@ -36,7 +36,7 @@ const listExpired: LoanMaterials = [ year: "2001", title: "Audrey Hepburn", author: "Af Isabel Sánchez Vegara, Amaia Arrazola", - statusMessage: "The item cannot be renewed further", + statusMessage: "Can't be renewed further", isChecked: true, disabled: false, statusMaterialType: { @@ -48,7 +48,7 @@ const listExpired: LoanMaterials = [ year: "2001", title: "Audrey Hepburn", author: "Af Isabel Sánchez Vegara, Amaia Arrazola", - statusMessage: "The item cannot be renewed further", + statusMessage: "Can't be renewed further", isChecked: true, disabled: true, statusMaterialType: { @@ -60,7 +60,7 @@ const listExpired: LoanMaterials = [ year: "2001", title: "Audrey Hepburn", author: "Af Isabel Sánchez Vegara, Amaia Arrazola", - statusMessage: "The item cannot be renewed further", + statusMessage: "Can't be renewed further", isChecked: true, disabled: true, statusMaterialType: { @@ -79,7 +79,7 @@ const listExpiresSoon: LoanMaterials = [ year: "2001", title: "Audrey Hepburn", author: "Af Isabel Sánchez Vegara, Amaia Arrazola", - statusMessage: "The item cannot be renewed further", + statusMessage: "Can't be renewed further", isChecked: true, disabled: true, statusMaterialType: { From 2368d0bc67c244a4182bd48bcb71c1a20799abcd Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Thu, 4 Apr 2024 09:41:18 +0200 Subject: [PATCH 04/26] Center list-material__status messages --- src/stories/Library/Lists/list-materials/list-materials.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/stories/Library/Lists/list-materials/list-materials.scss b/src/stories/Library/Lists/list-materials/list-materials.scss index 93c8260b1..a4d6111b6 100644 --- a/src/stories/Library/Lists/list-materials/list-materials.scss +++ b/src/stories/Library/Lists/list-materials/list-materials.scss @@ -64,8 +64,8 @@ display: flex; flex-direction: column; margin-top: 0; - align-items: center; - justify-content: flex-start; + align-items: flex-start; + justify-content: center; grid-gap: $s-md; } From cb3480be8fea7fd16a0db0d8501e2ad89f81a89f Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Thu, 4 Apr 2024 09:41:45 +0200 Subject: [PATCH 05/26] Update .list-reservation__note class to not be a button We don't use these notes as clicklable elements anymore --- .../Library/Lists/list-reservation/list-reservation.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/stories/Library/Lists/list-reservation/list-reservation.scss b/src/stories/Library/Lists/list-reservation/list-reservation.scss index 9a06c8f89..9b4173253 100644 --- a/src/stories/Library/Lists/list-reservation/list-reservation.scss +++ b/src/stories/Library/Lists/list-reservation/list-reservation.scss @@ -58,16 +58,15 @@ $list-reservation-space-desktop: 24px; .list-reservation__note { @include typography($typo__small-caption); - // To make it easy to click min-height: 20px; + max-width: 150px; cursor: pointer; background-color: transparent; align-self: baseline; border: 0; display: block; - margin-top: $s-xs; - white-space: break-spaces; - text-decoration: underline; + margin-top: $s-sm; + text-decoration: none; padding-left: 0; } From 6c2b9556127c8a36a6c931657a3425e47c118afc Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Thu, 4 Apr 2024 09:43:12 +0200 Subject: [PATCH 06/26] Update ListMaterials comp to not show a button status message in cards Because we no longer use these status messages as buttons. --- .../Lists/list-materials/ListMaterials.tsx | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/src/stories/Library/Lists/list-materials/ListMaterials.tsx b/src/stories/Library/Lists/list-materials/ListMaterials.tsx index 24d2ac6c2..9c86ae480 100644 --- a/src/stories/Library/Lists/list-materials/ListMaterials.tsx +++ b/src/stories/Library/Lists/list-materials/ListMaterials.tsx @@ -48,27 +48,13 @@ export const ListMaterials: FC = ({

- {statusMessage && ( - - {statusMessage} - - )}
Afleveres 27-04-2023
{statusMessage && ( - - {statusMessage} - + {statusMessage} )} -
From bc72423719a1612203e2d8adf7255f5742306870 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Thu, 4 Apr 2024 09:54:28 +0200 Subject: [PATCH 07/26] Revert chnges to list-reservation__note, & move them to modifier classes --- .../Lists/list-reservation/list-reservation.scss | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/stories/Library/Lists/list-reservation/list-reservation.scss b/src/stories/Library/Lists/list-reservation/list-reservation.scss index 9b4173253..194c1e2d7 100644 --- a/src/stories/Library/Lists/list-reservation/list-reservation.scss +++ b/src/stories/Library/Lists/list-reservation/list-reservation.scss @@ -57,16 +57,15 @@ $list-reservation-space-desktop: 24px; .list-reservation__note { @include typography($typo__small-caption); - + // To make it easy to click min-height: 20px; - max-width: 150px; cursor: pointer; background-color: transparent; align-self: baseline; border: 0; - display: block; - margin-top: $s-sm; - text-decoration: none; + margin-top: $s-xs; + white-space: break-spaces; + text-decoration: underline; padding-left: 0; } @@ -74,12 +73,16 @@ $list-reservation-space-desktop: 24px; display: none; @include media-query__small { display: block; + margin-top: $s-xs; + max-width: 150px; } } .list-reservation__note--mobile { @include media-query__small { display: none; + margin-top: $s-xs; + max-width: 150px; } } From 1624ed88c3422f1ba74c4fb0364bf1d2b0664213 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Thu, 4 Apr 2024 09:56:12 +0200 Subject: [PATCH 08/26] Display list-reservation__note as a block --- src/stories/Library/Lists/list-reservation/list-reservation.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/stories/Library/Lists/list-reservation/list-reservation.scss b/src/stories/Library/Lists/list-reservation/list-reservation.scss index 194c1e2d7..98b9b8866 100644 --- a/src/stories/Library/Lists/list-reservation/list-reservation.scss +++ b/src/stories/Library/Lists/list-reservation/list-reservation.scss @@ -63,6 +63,7 @@ $list-reservation-space-desktop: 24px; background-color: transparent; align-self: baseline; border: 0; + display: block; margin-top: $s-xs; white-space: break-spaces; text-decoration: underline; From 06bffd5e05aded2357520637a555d8d989f2d507 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Thu, 4 Apr 2024 11:46:25 +0200 Subject: [PATCH 09/26] Revert changes to list-reservation notes These were done by a mistake. The changes were supposed to be applied to list-materials instead. --- .../Library/Lists/list-reservation/list-reservation.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/stories/Library/Lists/list-reservation/list-reservation.scss b/src/stories/Library/Lists/list-reservation/list-reservation.scss index 98b9b8866..d7ef0c80f 100644 --- a/src/stories/Library/Lists/list-reservation/list-reservation.scss +++ b/src/stories/Library/Lists/list-reservation/list-reservation.scss @@ -74,16 +74,12 @@ $list-reservation-space-desktop: 24px; display: none; @include media-query__small { display: block; - margin-top: $s-xs; - max-width: 150px; } } .list-reservation__note--mobile { @include media-query__small { display: none; - margin-top: $s-xs; - max-width: 150px; } } From c7c60de5bac91a3cd2b7d40956338d914960dcb8 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Thu, 4 Apr 2024 11:47:25 +0200 Subject: [PATCH 10/26] Introduce list materials status modifier classes for desktop & mobile --- .../Lists/list-materials/list-materials.scss | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/stories/Library/Lists/list-materials/list-materials.scss b/src/stories/Library/Lists/list-materials/list-materials.scss index a4d6111b6..bcd488b4f 100644 --- a/src/stories/Library/Lists/list-materials/list-materials.scss +++ b/src/stories/Library/Lists/list-materials/list-materials.scss @@ -69,9 +69,32 @@ grid-gap: $s-md; } +.list-materials__status--mobile { + @include typography($typo__small-caption); + margin-top: $s-md; + + @include media-query__small { + display: none; + } +} + +.list-materials__status--desktop { + @include typography($typo__small-caption); + display: none; + + @include media-query__small { + display: block; + margin-top: $s-sm; + max-width: 150px; + } +} + .list-materials__status__note-desktop { @include typography($typo__small-caption); display: none; + margin-top: $s-sm; + max-width: 150px; + @include media-query__small { display: flex; } @@ -79,6 +102,7 @@ .list-materials__status__note-mobile { @include typography($typo__small-caption); display: flex; + @include media-query__small { display: none; } From 623f61498e3b66bbf7b8e0f84713dad03308103f Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Thu, 4 Apr 2024 11:48:37 +0200 Subject: [PATCH 11/26] Change layout of list material cards on mobile vs desktop Utilizing the list-materials__status--mobile & list-materials__status--desktop classes. --- .../Lists/list-materials/ListMaterials.tsx | 43 ++++++++++++------- 1 file changed, 28 insertions(+), 15 deletions(-) diff --git a/src/stories/Library/Lists/list-materials/ListMaterials.tsx b/src/stories/Library/Lists/list-materials/ListMaterials.tsx index 9c86ae480..0b850756d 100644 --- a/src/stories/Library/Lists/list-materials/ListMaterials.tsx +++ b/src/stories/Library/Lists/list-materials/ListMaterials.tsx @@ -1,6 +1,7 @@ import { useState, FC } from "react"; import { Checkbox } from "../../Forms/checkbox/Checkbox"; import { StatusLabel, StatusLabelProps } from "../../status-label/StatusLabel"; +import { ReactComponent as ArrowSmallRight } from "../../Arrows/icon-arrow-ui/icon-arrow-ui-small-right.svg"; export type ListMaterialsProps = { title: string; @@ -42,21 +43,34 @@ export const ListMaterials: FC = ({
+
+ Afleveres 27-04-2023 +

{title}

{author} ({year})

- -
-
-
- Afleveres 27-04-2023 -
+
{statusMessage && ( - {statusMessage} + + {statusMessage} + )}
+
+
+ Afleveres 27-04-2023 +
+ {statusMessage && ( + + {statusMessage} + + )} +
+
+ +
  • @@ -72,26 +86,25 @@ export const ListMaterials: FC = ({
    Bog
    +
    + Afleveres 27-04-2023 +

    {title}

    {author} ({year})

    -
    +
    Afleveres 27-04-2023
    -
    +
    + +
    • From 48005e4f8055efe81f312c7afc493843babe262b Mon Sep 17 00:00:00 2001 From: clausbruun Date: Mon, 8 Apr 2024 08:26:45 +0200 Subject: [PATCH 12/26] Add Favorite Page to design system --- .../favorites-list/FavoritesList.stories.tsx | 22 ++++++ .../Blocks/favorites-list/FavoritesList.tsx | 71 +++++++++++++++++++ 2 files changed, 93 insertions(+) create mode 100644 src/stories/Blocks/favorites-list/FavoritesList.stories.tsx create mode 100644 src/stories/Blocks/favorites-list/FavoritesList.tsx diff --git a/src/stories/Blocks/favorites-list/FavoritesList.stories.tsx b/src/stories/Blocks/favorites-list/FavoritesList.stories.tsx new file mode 100644 index 000000000..d585eeb15 --- /dev/null +++ b/src/stories/Blocks/favorites-list/FavoritesList.stories.tsx @@ -0,0 +1,22 @@ +import { ComponentMeta, ComponentStory } from "@storybook/react"; +import FavouritesList from "./FavoritesList"; + +export default { + title: "Blocks / Favourite List", + component: FavouritesList, +} as ComponentMeta; + +const Template: ComponentStory = (args) => { + return ; +}; + +export const Default = Template.bind({}); +Default.args = { + materialsCount: 3, +}; + +export const SkeletonVersion = Template.bind({}); +SkeletonVersion.args = { + materialsCount: 3, + skeletonVersion: true, +}; diff --git a/src/stories/Blocks/favorites-list/FavoritesList.tsx b/src/stories/Blocks/favorites-list/FavoritesList.tsx new file mode 100644 index 000000000..d889d8390 --- /dev/null +++ b/src/stories/Blocks/favorites-list/FavoritesList.tsx @@ -0,0 +1,71 @@ +import React from "react"; +import { CardListItem } from "../../Library/card-list-item/CardListItem"; +import { CardListItemSkeleton } from "../../Library/card-list-item/CardListItemSkeleton"; +import ResultPager from "../../Library/card-list-page/ResultPager"; +import data from "../../Library/card-list-page/SearchResultPageData"; + +export interface FavouritesListProps { + skeletonVersion?: boolean; + materialsCount: number; +} + +const FavouritesList: React.FC = ({ + skeletonVersion = false, + materialsCount, +}) => { + const pageTitle = ( +

    Favourites

    + ); + + const materialsCountLine = materialsCount > 0 && ( +

    {materialsCount} materials

    + ); + + const SkeletonList = () => ( +
      + {[...Array(5)].map((_, index) => ( +
    • + +
      • + ))} +
    + ); + + const FavouritesListContent = () => ( +
      + {data.searchResult.slice(0, materialsCount).map((item, i) => ( + + ))} +
    + ); + + const EmptyList = () => ( +
    Your favorites list is empty
    + ); + + let content; + if (skeletonVersion) { + content = ; + } else if (materialsCount > 0) { + content = ; + } else { + content = ; + } + + return ( +
    + {pageTitle} + {materialsCountLine} + {content} + {!skeletonVersion && ( + + )} +
    + ); +}; + +export default FavouritesList; From 632d034060c6a3ea4c329a79bad54e00abc6d6e7 Mon Sep 17 00:00:00 2001 From: clausbruun Date: Mon, 8 Apr 2024 09:22:54 +0200 Subject: [PATCH 13/26] Fix code style --- src/stories/Blocks/favorites-list/FavoritesList.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/stories/Blocks/favorites-list/FavoritesList.tsx b/src/stories/Blocks/favorites-list/FavoritesList.tsx index d889d8390..5a1528c7f 100644 --- a/src/stories/Blocks/favorites-list/FavoritesList.tsx +++ b/src/stories/Blocks/favorites-list/FavoritesList.tsx @@ -23,8 +23,8 @@ const FavouritesList: React.FC = ({ const SkeletonList = () => (