From ccb879d02158c909a683de8dc0c09bb08d1d2559 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Thu, 14 Mar 2024 09:58:44 +0100 Subject: [PATCH 01/12] Move modal close button 17px to the left so scrollbar isn't obscured --- src/stories/Library/Modals/modal.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/Library/Modals/modal.scss b/src/stories/Library/Modals/modal.scss index 181ed9b27..da11be686 100644 --- a/src/stories/Library/Modals/modal.scss +++ b/src/stories/Library/Modals/modal.scss @@ -74,7 +74,7 @@ background-color: $color__global-primary; position: fixed; top: 0; - right: 0; + right: 17; // We need both padding & margin so that when the icon rotates, we don't see // the background color bleed outside the modal. padding: $s-md; From 4e038fd71609890eabaaae6f3d3faab43e22533f Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Thu, 14 Mar 2024 11:01:20 +0100 Subject: [PATCH 02/12] Include measurment unit when specifying modal-btn-close right offset --- src/stories/Library/Modals/modal.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/Library/Modals/modal.scss b/src/stories/Library/Modals/modal.scss index da11be686..5aae0b040 100644 --- a/src/stories/Library/Modals/modal.scss +++ b/src/stories/Library/Modals/modal.scss @@ -74,7 +74,7 @@ background-color: $color__global-primary; position: fixed; top: 0; - right: 17; + right: 17px; // We need both padding & margin so that when the icon rotates, we don't see // the background color bleed outside the modal. padding: $s-md; From f83569bb96f0e7355a6720b8270db9e1aeff436b Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Thu, 14 Mar 2024 11:10:54 +0100 Subject: [PATCH 03/12] Account for Windows scrollbar width on desktop in modals, not on mobile --- src/stories/Library/Modals/modal.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/stories/Library/Modals/modal.scss b/src/stories/Library/Modals/modal.scss index 5aae0b040..c635c7626 100644 --- a/src/stories/Library/Modals/modal.scss +++ b/src/stories/Library/Modals/modal.scss @@ -74,7 +74,7 @@ background-color: $color__global-primary; position: fixed; top: 0; - right: 17px; + right: 0; // We need both padding & margin so that when the icon rotates, we don't see // the background color bleed outside the modal. padding: $s-md; @@ -85,7 +85,7 @@ &.modal-btn-close--offset { @include media-query__small { top: $s-5xl; - right: $s-5xl; + right: cals($s-5xl + 17px); } } From c9fa1871cf1ec328dcbe482e6f4cf03b2cfeb4e8 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Thu, 14 Mar 2024 11:19:08 +0100 Subject: [PATCH 04/12] Correct typo in modal.scss --- src/stories/Library/Modals/modal.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/Library/Modals/modal.scss b/src/stories/Library/Modals/modal.scss index c635c7626..70cb857f9 100644 --- a/src/stories/Library/Modals/modal.scss +++ b/src/stories/Library/Modals/modal.scss @@ -85,7 +85,7 @@ &.modal-btn-close--offset { @include media-query__small { top: $s-5xl; - right: cals($s-5xl + 17px); + right: calc($s-5xl + 17px); } } From 89c7f8c566cf2ea64f1335c81bb98a0973b3a63a Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Thu, 14 Mar 2024 14:11:53 +0100 Subject: [PATCH 05/12] Initiate release 2024.13.0 From de350d5ddc6bdb051469124d3aa830b60d422e61 Mon Sep 17 00:00:00 2001 From: clausbruun Date: Mon, 18 Mar 2024 08:23:56 +0100 Subject: [PATCH 06/12] Add padding to modal headings to prevent them from being obscured by the close button. --- src/stories/Library/Modals/modal.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/stories/Library/Modals/modal.scss b/src/stories/Library/Modals/modal.scss index 70cb857f9..f74b00c90 100644 --- a/src/stories/Library/Modals/modal.scss +++ b/src/stories/Library/Modals/modal.scss @@ -11,6 +11,10 @@ height: 100vh; overflow: auto; + h2 { + padding-right: $s-xl; + } + &__screen-reader-description { @include hide-visually; } @@ -19,10 +23,18 @@ height: calc(100vh - 200px); width: calc(100vw - 200px); margin: $s-5xl 0 0 $s-5xl; + + h2 { + padding-right: $s-4xl; + } } @include media-query__medium { padding: $s-4xl $s-7xl; + + h2 { + padding-right: initial; + } } &.modal--no-padding { From 44593dd8c0801a30c84d8bbd88e9eba92c3f093b Mon Sep 17 00:00:00 2001 From: clausbruun Date: Mon, 18 Mar 2024 09:15:13 +0100 Subject: [PATCH 07/12] Fix code style --- src/stories/Library/Modals/modal.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/Library/Modals/modal.scss b/src/stories/Library/Modals/modal.scss index f74b00c90..7b60b6d63 100644 --- a/src/stories/Library/Modals/modal.scss +++ b/src/stories/Library/Modals/modal.scss @@ -31,7 +31,7 @@ @include media-query__medium { padding: $s-4xl $s-7xl; - + h2 { padding-right: initial; } From 9064e2f32445e69ae79599e9e7d065a1bc8172b1 Mon Sep 17 00:00:00 2001 From: clausbruun Date: Mon, 18 Mar 2024 10:36:13 +0100 Subject: [PATCH 08/12] Add padding only to the Loan Modal. --- .../Library/Modals/modal-loan/modal-loan.scss | 16 ++++++++++++++++ src/stories/Library/Modals/modal.scss | 12 ------------ 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/src/stories/Library/Modals/modal-loan/modal-loan.scss b/src/stories/Library/Modals/modal-loan/modal-loan.scss index 1d6e650e0..4d9eacf83 100644 --- a/src/stories/Library/Modals/modal-loan/modal-loan.scss +++ b/src/stories/Library/Modals/modal-loan/modal-loan.scss @@ -2,6 +2,22 @@ flex-direction: column; align-items: center; width: 100%; + + &__title { + padding-right: $s-xl; + } + + @include media-query__small { + &__title { + padding-right: $s-4xl; + } + } + + @include media-query__medium { + &__title { + padding-right: initial; + } + } } .modal-loan__container { diff --git a/src/stories/Library/Modals/modal.scss b/src/stories/Library/Modals/modal.scss index 7b60b6d63..70cb857f9 100644 --- a/src/stories/Library/Modals/modal.scss +++ b/src/stories/Library/Modals/modal.scss @@ -11,10 +11,6 @@ height: 100vh; overflow: auto; - h2 { - padding-right: $s-xl; - } - &__screen-reader-description { @include hide-visually; } @@ -23,18 +19,10 @@ height: calc(100vh - 200px); width: calc(100vw - 200px); margin: $s-5xl 0 0 $s-5xl; - - h2 { - padding-right: $s-4xl; - } } @include media-query__medium { padding: $s-4xl $s-7xl; - - h2 { - padding-right: initial; - } } &.modal--no-padding { From de0a39d0d20b3f665ee0bc732d2099a45d4ef08c Mon Sep 17 00:00:00 2001 From: clausbruun Date: Thu, 21 Mar 2024 16:24:33 +0100 Subject: [PATCH 09/12] Disable text selection for .flatpickr-day elements --- src/stories/Library/date-calendar/date-calendar.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/stories/Library/date-calendar/date-calendar.scss b/src/stories/Library/date-calendar/date-calendar.scss index ae2fcbb0f..0e2cba08d 100644 --- a/src/stories/Library/date-calendar/date-calendar.scss +++ b/src/stories/Library/date-calendar/date-calendar.scss @@ -82,6 +82,8 @@ $selected-date-background: rgb(0, 105, 255); } } & .flatpickr-days { + user-select: none; + & .flatpickr-day { display: flex; align-items: center; From ad1acd26d57bdd7194e80121b97f1a43bd2acd8d Mon Sep 17 00:00:00 2001 From: clausbruun Date: Tue, 2 Apr 2024 14:16:12 +0200 Subject: [PATCH 10/12] Create a Skeleton Screen for the Fee List Page --- base.scss | 1 + .../Blocks/fee-list/FeeList.stories.tsx | 13 - src/stories/Blocks/fee-list/FeeList.tsx | 1006 ++++++++--------- src/stories/Blocks/fee-list/FeeListHeader.tsx | 7 + .../Blocks/fee-list/FeeListItemSkeleton.tsx | 30 + .../Blocks/fee-list/FeeListPage.stories.tsx | 18 + src/stories/Blocks/fee-list/FeeListPage.tsx | 20 + .../Blocks/fee-list/FeeListSkeleton.tsx | 18 + .../Blocks/fee-list/PaymentInformation.tsx | 36 + .../fee-list/fee-list-page-skeleton.scss | 22 + 10 files changed, 636 insertions(+), 535 deletions(-) delete mode 100644 src/stories/Blocks/fee-list/FeeList.stories.tsx create mode 100644 src/stories/Blocks/fee-list/FeeListHeader.tsx create mode 100644 src/stories/Blocks/fee-list/FeeListItemSkeleton.tsx create mode 100644 src/stories/Blocks/fee-list/FeeListPage.stories.tsx create mode 100644 src/stories/Blocks/fee-list/FeeListPage.tsx create mode 100644 src/stories/Blocks/fee-list/FeeListSkeleton.tsx create mode 100644 src/stories/Blocks/fee-list/PaymentInformation.tsx create mode 100644 src/stories/Blocks/fee-list/fee-list-page-skeleton.scss diff --git a/base.scss b/base.scss index 2250354bf..7cb2d91fd 100644 --- a/base.scss +++ b/base.scss @@ -148,6 +148,7 @@ @import "./src/stories/Blocks/advanced-search/advanced-search"; @import "./src/stories/Blocks/article/article"; @import "./src/stories/Blocks/event-page/event-page"; +@import "./src/stories/Blocks/fee-list/fee-list-page-skeleton.scss"; @import "./src/stories/Blocks/content-list-page/content-list-page"; @import "./src/stories/Blocks/reservation-page/reservation-page-skeleton"; @import "./src/stories/Blocks/loan-page/loan-page-skeleton"; diff --git a/src/stories/Blocks/fee-list/FeeList.stories.tsx b/src/stories/Blocks/fee-list/FeeList.stories.tsx deleted file mode 100644 index 7500fbd19..000000000 --- a/src/stories/Blocks/fee-list/FeeList.stories.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { ComponentMeta, ComponentStory } from "@storybook/react"; -import FeeList from "./FeeList"; - -export default { - title: "Blocks / Fee List", - component: FeeList, -} as ComponentMeta; - -const Template: ComponentStory = (args) => { - return ; -}; - -export const Item = Template.bind({}); diff --git a/src/stories/Blocks/fee-list/FeeList.tsx b/src/stories/Blocks/fee-list/FeeList.tsx index ae69261bc..6e66680c5 100644 --- a/src/stories/Blocks/fee-list/FeeList.tsx +++ b/src/stories/Blocks/fee-list/FeeList.tsx @@ -1,664 +1,626 @@ -// This is copy/pasted from dpl-react because no design story was made for this view. - -// TODO: Should be converted to react components. -const FeeList: React.FC = () => { - return ( -
-

- Gebyrer & erstatninger -

-
-
- Overdue fees and replacement costs that were created before 27/10/2020 - can still be paid on this page. -
-
- - See our fees and replacement costs - +const FeeList = () => ( + <> +
+
+
+

+ Betales på biblioteket + 7 +

-
- -
-
-
-

- Betales på biblioteket - 7 -

-
- + - + - + - + - + - + - -
-
-

- Har du allerede betalt? Der kan gå op til 72 timer før - betalingen registreres i vores systemer -

-

I alt: 137.75

+
+

Gebyr 1 kr.

+ +
+
+

+ Har du allerede betalt? Der kan gå op til 72 timer før betalingen + registreres i vores systemer +

+

I alt: 137.75

+
-
-
-
-

- Betales på Mit betalingsoverblik - 6 -

-
- + - + - + - + - + - -
-
 
-
-

- Har du allerede betalt? Der kan gå op til 72 timer før - betalingen registreres i vores systemer -

-

I alt: 146

+
+

Gebyr 36.25 kr.

+ +
+
 
+
+

+ Har du allerede betalt? Der kan gå op til 72 timer før betalingen + registreres i vores systemer +

+

I alt: 146

+
- ); -}; + +); export default FeeList; diff --git a/src/stories/Blocks/fee-list/FeeListHeader.tsx b/src/stories/Blocks/fee-list/FeeListHeader.tsx new file mode 100644 index 000000000..f167db581 --- /dev/null +++ b/src/stories/Blocks/fee-list/FeeListHeader.tsx @@ -0,0 +1,7 @@ +const FeeListHeader = () => ( +

+ Gebyrer & erstatninger +

+); + +export default FeeListHeader; diff --git a/src/stories/Blocks/fee-list/FeeListItemSkeleton.tsx b/src/stories/Blocks/fee-list/FeeListItemSkeleton.tsx new file mode 100644 index 000000000..0e2dd4ba5 --- /dev/null +++ b/src/stories/Blocks/fee-list/FeeListItemSkeleton.tsx @@ -0,0 +1,30 @@ +const FeeListItemSkeleton = () => { + return ( + + ); +}; + +export default FeeListItemSkeleton; diff --git a/src/stories/Blocks/fee-list/FeeListPage.stories.tsx b/src/stories/Blocks/fee-list/FeeListPage.stories.tsx new file mode 100644 index 000000000..5a77c4089 --- /dev/null +++ b/src/stories/Blocks/fee-list/FeeListPage.stories.tsx @@ -0,0 +1,18 @@ +import { ComponentMeta, ComponentStory } from "@storybook/react"; +import FeeListPage from "./FeeListPage"; + +export default { + title: "Blocks / Fee List", + component: FeeListPage, +} as ComponentMeta; + +const Template: ComponentStory = (args) => { + return ; +}; + +export const Default = Template.bind({}); + +export const SkeletonVersion = Template.bind({}); +SkeletonVersion.args = { + skeletonVersion: true, +}; diff --git a/src/stories/Blocks/fee-list/FeeListPage.tsx b/src/stories/Blocks/fee-list/FeeListPage.tsx new file mode 100644 index 000000000..694d7dae3 --- /dev/null +++ b/src/stories/Blocks/fee-list/FeeListPage.tsx @@ -0,0 +1,20 @@ +import FeeListHeader from "./FeeListHeader"; +import PaymentInformation from "./PaymentInformation"; +import FeeList from "./FeeList"; +import FeeListSkeleton from "./FeeListSkeleton"; + +export interface FeeListPageProps { + skeletonVersion?: boolean; +} + +const FeeListPage: React.FC = ({ skeletonVersion }) => { + return ( +
+ + + {skeletonVersion ? : } +
+ ); +}; + +export default FeeListPage; diff --git a/src/stories/Blocks/fee-list/FeeListSkeleton.tsx b/src/stories/Blocks/fee-list/FeeListSkeleton.tsx new file mode 100644 index 000000000..2b602698e --- /dev/null +++ b/src/stories/Blocks/fee-list/FeeListSkeleton.tsx @@ -0,0 +1,18 @@ +import FeeListItemSkeleton from "./FeeListItemSkeleton"; + +const FeeListSkeleton: React.FC = () => { + return ( +
+

+
+

+ + +
+ + +
+ ); +}; + +export default FeeListSkeleton; diff --git a/src/stories/Blocks/fee-list/PaymentInformation.tsx b/src/stories/Blocks/fee-list/PaymentInformation.tsx new file mode 100644 index 000000000..5ee155043 --- /dev/null +++ b/src/stories/Blocks/fee-list/PaymentInformation.tsx @@ -0,0 +1,36 @@ +const PaymentInformation = () => ( +
+
+
+ Overdue fees and replacement costs that were created before 27/10/2020 + can still be paid on this page. +
+ +
+ +
+); + +export default PaymentInformation; diff --git a/src/stories/Blocks/fee-list/fee-list-page-skeleton.scss b/src/stories/Blocks/fee-list/fee-list-page-skeleton.scss new file mode 100644 index 000000000..e6cfbe175 --- /dev/null +++ b/src/stories/Blocks/fee-list/fee-list-page-skeleton.scss @@ -0,0 +1,22 @@ +// Since we are using the Skeleton Screen Css classes connected to the existing styling +// we deliberately not follow the BEM naming convention here. +.fee-list-page { + .ssc-square { + &.cover--size-small { + height: 104px; + width: 70px; + + @include media-query__small { + height: 137px; + width: 95px; + } + + } + } + + .list-reservation__deadline { + .ssc-head-line { + min-width: 100px; + } + } +} From 45e24e103e258c966663bf2e1dc8da2c2fea3bc0 Mon Sep 17 00:00:00 2001 From: clausbruun Date: Tue, 2 Apr 2024 14:36:28 +0200 Subject: [PATCH 11/12] Fix code style --- src/stories/Blocks/fee-list/fee-list-page-skeleton.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/stories/Blocks/fee-list/fee-list-page-skeleton.scss b/src/stories/Blocks/fee-list/fee-list-page-skeleton.scss index e6cfbe175..653985320 100644 --- a/src/stories/Blocks/fee-list/fee-list-page-skeleton.scss +++ b/src/stories/Blocks/fee-list/fee-list-page-skeleton.scss @@ -3,14 +3,13 @@ .fee-list-page { .ssc-square { &.cover--size-small { - height: 104px; + height: 104px; width: 70px; @include media-query__small { - height: 137px; + height: 137px; width: 95px; - } - + } } } From 01285dc3b24da622d4c1ff33bf6a25b09cf85127 Mon Sep 17 00:00:00 2001 From: clausbruun Date: Tue, 2 Apr 2024 14:47:50 +0200 Subject: [PATCH 12/12] Fix accessibility --- src/stories/Blocks/fee-list/FeeListItemSkeleton.tsx | 6 +++++- src/stories/Blocks/fee-list/FeeListSkeleton.tsx | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/stories/Blocks/fee-list/FeeListItemSkeleton.tsx b/src/stories/Blocks/fee-list/FeeListItemSkeleton.tsx index 0e2dd4ba5..52c7b64db 100644 --- a/src/stories/Blocks/fee-list/FeeListItemSkeleton.tsx +++ b/src/stories/Blocks/fee-list/FeeListItemSkeleton.tsx @@ -1,6 +1,10 @@ const FeeListItemSkeleton = () => { return ( -