From f7e07a4c66bd57ba3c277f985f64e997fef892b1 Mon Sep 17 00:00:00 2001 From: Jeppe Krogh Date: Fri, 10 Mar 2023 16:25:47 +0100 Subject: [PATCH 01/14] adding styling component, including storybook preview --- .../favorites-list-material-component.scss | 104 ++++++++++++++++++ ...orites-list-material-component.stories.tsx | 49 +++++++++ .../favorites-list-material-component.tsx | 76 +++++++++++++ 3 files changed, 229 insertions(+) create mode 100644 src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss create mode 100644 src/stories/Library/favorites-list-material-component/favorites-list-material-component.stories.tsx create mode 100644 src/stories/Library/favorites-list-material-component/favorites-list-material-component.tsx diff --git a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss new file mode 100644 index 000000000..95a98e7e0 --- /dev/null +++ b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss @@ -0,0 +1,104 @@ +.favorites-list-mc { + background-color: $c-global-tertiary-2; + color: $c-text-primary-white; + border-color: $c-text-secondary-gray; + + @include breakpoint-m { + padding: $s-6xl; + } + + &--bright { + background-color: $c-global-primary; + color: $c-text-primary-black; + border-color: $c-global-tertiary-1; + + @include breakpoint-m { + padding: $s-6xl; + } + } + + &__title { + text-align: center; + padding: $s-lg; + + @include breakpoint-m { + padding-bottom: $s-6xl; + } + } + &__title--left { + text-align: left; + } + + &__buttons { + display: flex; + justify-content: end; + margin-bottom: $s-md; + } + + &__grid { + display: grid; + grid-template-columns: 50% 50%; + grid-template-rows: 50% 50%; + + @include breakpoint-m { + grid-template-columns: 25% 25% 25% 25%; + } + } +} + +.favorites-list-mc-material { + border: 1px solid $c-text-secondary-gray; + padding: 30px; + display: flex; + width: 100%; + position: relative; + height: 350px; + + &--bright { + border: 1px solid $c-global-tertiary-1; + } + + &__favourite { + position: absolute; + top: 10px; + right: 10px; + } + + &__cover-container { + display: flex; + justify-content: center; + width: 100%; + margin-top: 10px; + } + + &__meta { + position: absolute; + left: 10px; + bottom: 10px; + width: 100%; + padding-right: 10px; + } + + &__title { + @extend %text-body-medium-regular-placeholder; + text-decoration: none; + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: inherit; + + &:hover { + text-decoration: underline; + } + } + + &__author { + @extend %text-body-medium-regular-placeholder; + font-weight: 500; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: inherit; + } +} diff --git a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.stories.tsx b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.stories.tsx new file mode 100644 index 000000000..6397de649 --- /dev/null +++ b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.stories.tsx @@ -0,0 +1,49 @@ +import { ComponentMeta, ComponentStory } from "@storybook/react"; +import FavoritesListMaterialComponent from "./favorites-list-material-component"; + +export default { + title: "Library / Favorites list material-component", + component: FavoritesListMaterialComponent, + argTypes: { + title: { + control: "text", + defaultValue: "Din favoritliste", + }, + bright: { + control: { type: "boolean" }, + defaultValue: true, + }, + recommenderData: { + control: "object", + defaultValue: [ + { + title: "Ella Fitzgerald", + authors: "Af Isabel Sánchez Vegara", + filled: true, + }, + { + title: "Ella Fitzgerald", + authors: "Af Isabel Sánchez Vegara", + filled: true, + }, + { + title: "Ella Fitzgerald", + authors: "Af Isabel Sánchez Vegara", + filled: false, + }, + { + title: "Ella Fitzgerald", + authors: "Af Isabel Sánchez Vegara", + filled: false, + }, + ], + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = ( + args +) => ; + +export const FavoritesList = Template.bind({}); +FavoritesList.args = {}; diff --git a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.tsx b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.tsx new file mode 100644 index 000000000..5c5220c4b --- /dev/null +++ b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.tsx @@ -0,0 +1,76 @@ +import Cover from "../cover/Cover"; +import { ReactComponent as SvgIcon } from "../Icons/icon-favourite/icon-favourite.svg"; + +export type RecommenderData = { + title: string; + authors: string; + filled: boolean; +}; +export type RecommenderProps = { + recommenderData: RecommenderData[]; + title: string; + bright: boolean; +}; + +const FavoritesListMaterialComponent: React.FC = ({ + recommenderData, + title, + bright, +}) => { + return ( +
+

{title}

+
+ +
+
    + {recommenderData.map(({ title: recTitle, filled, authors }) => ( +
  • +
    +
    + +
    +
    +
    + +
    +
    + {recTitle} +
    + {authors} +
    +
    +
    • + ))} +
+
+ ); +}; + +export default FavoritesListMaterialComponent; From ec261e3de551ae867a7559f2811add97a15ac8e9 Mon Sep 17 00:00:00 2001 From: Jeppe Krogh Date: Fri, 10 Mar 2023 16:25:58 +0100 Subject: [PATCH 02/14] adding to base --- base.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/base.scss b/base.scss index c3a66647d..236477c34 100644 --- a/base.scss +++ b/base.scss @@ -92,6 +92,7 @@ @import "./src/stories/Library/Lists/list-intermediates/list-intermediates"; @import "./src/stories/Library/instant-loan/instant-loan"; @import "./src/stories/Library/scroll-lock-background/scroll-lock-background"; +@import "./src/stories/Library/favorites-list-material-component/favorites-list-material-component"; // Blocks @import "./src/stories/Blocks/footer/footer"; From 74c5cf07210b70a716204be6c3d0fae58defc5c1 Mon Sep 17 00:00:00 2001 From: Jeppe Krogh Date: Mon, 13 Mar 2023 09:31:15 +0100 Subject: [PATCH 03/14] Marked all placeholder materials as favoritted --- .../favorites-list-material-component.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.stories.tsx b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.stories.tsx index 6397de649..c42b234a7 100644 --- a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.stories.tsx +++ b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.stories.tsx @@ -29,12 +29,12 @@ export default { { title: "Ella Fitzgerald", authors: "Af Isabel Sánchez Vegara", - filled: false, + filled: true, }, { title: "Ella Fitzgerald", authors: "Af Isabel Sánchez Vegara", - filled: false, + filled: true, }, ], }, From e564d7a953d54720d8ee1b33a4b207dae9144b6e Mon Sep 17 00:00:00 2001 From: Jeppe Krogh Date: Thu, 23 Mar 2023 15:43:19 +0100 Subject: [PATCH 04/14] added and applied spacing variables for 10px and 30px. --- .../favorites-list-material-component.scss | 12 ++++++------ src/stories/Library/spacing/spacing.scss | 2 ++ 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss index 95a98e7e0..c88808740 100644 --- a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss +++ b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss @@ -48,7 +48,7 @@ .favorites-list-mc-material { border: 1px solid $c-text-secondary-gray; - padding: 30px; + padding: $s-30; display: flex; width: 100%; position: relative; @@ -60,23 +60,23 @@ &__favourite { position: absolute; - top: 10px; - right: 10px; + top: $s-10; + right: $s-10; } &__cover-container { display: flex; justify-content: center; width: 100%; - margin-top: 10px; + margin-top: $s-10; } &__meta { position: absolute; left: 10px; - bottom: 10px; + bottom: $s-10; width: 100%; - padding-right: 10px; + padding-right: $s-10; } &__title { diff --git a/src/stories/Library/spacing/spacing.scss b/src/stories/Library/spacing/spacing.scss index ad745166d..6fe7aad6f 100644 --- a/src/stories/Library/spacing/spacing.scss +++ b/src/stories/Library/spacing/spacing.scss @@ -1,8 +1,10 @@ $s-4: 4; $s-8: 8; +$s-10: 10; $s-16: 16; $s-22: 22; $s-24: 24; +$s-30: 30; $s-32: 32; $s-35: 35; $s-48: 48; From eeaa90b4899e6c9dbe5139d4c3e66915a2c91719 Mon Sep 17 00:00:00 2001 From: Jeppe Krogh Date: Thu, 23 Mar 2023 15:45:31 +0100 Subject: [PATCH 05/14] missed one --- .../favorites-list-material-component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss index c88808740..c775ed2e9 100644 --- a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss +++ b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss @@ -73,7 +73,7 @@ &__meta { position: absolute; - left: 10px; + left: $s-10; bottom: $s-10; width: 100%; padding-right: $s-10; From 47930000bf0298a7d564b2e748ce9f375a1d6030 Mon Sep 17 00:00:00 2001 From: Jeppe Krogh Date: Thu, 23 Mar 2023 15:54:49 +0100 Subject: [PATCH 06/14] added px wrapping --- .../favorites-list-material-component.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss index c775ed2e9..b5bd968bd 100644 --- a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss +++ b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss @@ -48,7 +48,7 @@ .favorites-list-mc-material { border: 1px solid $c-text-secondary-gray; - padding: $s-30; + padding: #{$s-30}px; display: flex; width: 100%; position: relative; @@ -60,23 +60,23 @@ &__favourite { position: absolute; - top: $s-10; - right: $s-10; + top: #{$s-10}px; + right: #{$s-10}px; } &__cover-container { display: flex; justify-content: center; width: 100%; - margin-top: $s-10; + margin-top: #{$s-10}px; } &__meta { position: absolute; - left: $s-10; - bottom: $s-10; + left: #{$s-10}px; + bottom: #{$s-10}px; width: 100%; - padding-right: $s-10; + padding-right: #{$s-10}px; } &__title { From 03ec46c8e4fd25411a0ee761e1428ff34a699116 Mon Sep 17 00:00:00 2001 From: Jeppe Krogh Date: Fri, 24 Mar 2023 13:23:19 +0100 Subject: [PATCH 07/14] Created TODO for handling bright class --- .../favorites-list-material-component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.tsx b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.tsx index 5c5220c4b..0d7010af6 100644 --- a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.tsx +++ b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.tsx @@ -11,7 +11,7 @@ export type RecommenderProps = { title: string; bright: boolean; }; - +// TODO: Create a method for this, as well as for recommender to apply brigt classes if available. const FavoritesListMaterialComponent: React.FC = ({ recommenderData, title, From 913009d55772f272c4d4b6be42f3d751624dfdbb Mon Sep 17 00:00:00 2001 From: Jeppe Krogh Date: Fri, 24 Mar 2023 13:37:37 +0100 Subject: [PATCH 08/14] concised scss --- .../favorites-list-material-component.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss index b5bd968bd..3ef1a5c85 100644 --- a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss +++ b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss @@ -21,13 +21,15 @@ text-align: center; padding: $s-lg; + &--left { + text-align: left; + } + @include breakpoint-m { padding-bottom: $s-6xl; } } - &__title--left { - text-align: left; - } + &__buttons { display: flex; From 97657d21880eb7c1417f0a9f5a9cf6b13a09595e Mon Sep 17 00:00:00 2001 From: Jeppe Krogh Date: Fri, 24 Mar 2023 13:52:17 +0100 Subject: [PATCH 09/14] prettier --- .../favorites-list-material-component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.tsx b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.tsx index 0d7010af6..5c5220c4b 100644 --- a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.tsx +++ b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.tsx @@ -11,7 +11,7 @@ export type RecommenderProps = { title: string; bright: boolean; }; -// TODO: Create a method for this, as well as for recommender to apply brigt classes if available. + const FavoritesListMaterialComponent: React.FC = ({ recommenderData, title, From ad6858ac1658bb858f5917bdf7aa7b4cdcf6d773 Mon Sep 17 00:00:00 2001 From: Jeppe Krogh Date: Fri, 24 Mar 2023 15:20:36 +0100 Subject: [PATCH 10/14] prettier --- .../favorites-list-material-component.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss index 3ef1a5c85..88248add1 100644 --- a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss +++ b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss @@ -30,7 +30,6 @@ } } - &__buttons { display: flex; justify-content: end; From 3df9aa821f20316af8ec5dab37d7d0d41558c0f7 Mon Sep 17 00:00:00 2001 From: Jeppe Krogh Date: Fri, 31 Mar 2023 15:37:03 +0200 Subject: [PATCH 11/14] fixed wrongly defined css --- .../scroll-lock-background/scroll-lock-background.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/stories/Library/scroll-lock-background/scroll-lock-background.scss b/src/stories/Library/scroll-lock-background/scroll-lock-background.scss index 4acea2c44..21c00960e 100644 --- a/src/stories/Library/scroll-lock-background/scroll-lock-background.scss +++ b/src/stories/Library/scroll-lock-background/scroll-lock-background.scss @@ -1,4 +1,4 @@ .scroll-lock-background { - overflow: "hidden"; - height: "100vh"; + overflow: hidden; + height: 100vh; } From 5609ad2fd1c54fcac6f532a6f346182fc9862130 Mon Sep 17 00:00:00 2001 From: Jeppe Krogh Date: Tue, 11 Apr 2023 11:22:18 +0200 Subject: [PATCH 12/14] Switched to using already defined spacing variables. Deleted newly created ones. --- .../favorites-list-material-component.scss | 14 +++++++------- src/stories/Library/spacing/spacing.scss | 2 -- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss index 88248add1..1d8845d8c 100644 --- a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss +++ b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss @@ -49,7 +49,7 @@ .favorites-list-mc-material { border: 1px solid $c-text-secondary-gray; - padding: #{$s-30}px; + padding: #{$s-xl}px; display: flex; width: 100%; position: relative; @@ -61,23 +61,23 @@ &__favourite { position: absolute; - top: #{$s-10}px; - right: #{$s-10}px; + top: #{$s-sm}px; + right: #{$s-sm}px; } &__cover-container { display: flex; justify-content: center; width: 100%; - margin-top: #{$s-10}px; + margin-top: #{$s-sm}px; } &__meta { position: absolute; - left: #{$s-10}px; - bottom: #{$s-10}px; + left: #{$s-sm}px; + bottom: #{$s-sm}px; width: 100%; - padding-right: #{$s-10}px; + padding-right: #{$s-sm}px; } &__title { diff --git a/src/stories/Library/spacing/spacing.scss b/src/stories/Library/spacing/spacing.scss index 6fe7aad6f..ad745166d 100644 --- a/src/stories/Library/spacing/spacing.scss +++ b/src/stories/Library/spacing/spacing.scss @@ -1,10 +1,8 @@ $s-4: 4; $s-8: 8; -$s-10: 10; $s-16: 16; $s-22: 22; $s-24: 24; -$s-30: 30; $s-32: 32; $s-35: 35; $s-48: 48; From c4c8b3dfe4cb981902c54556ab2514511088ebad Mon Sep 17 00:00:00 2001 From: Jeppe Krogh Date: Tue, 11 Apr 2023 12:08:30 +0200 Subject: [PATCH 13/14] removed wrapper --- .../favorites-list-material-component.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss index 1d8845d8c..ac50fc790 100644 --- a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss +++ b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss @@ -49,7 +49,7 @@ .favorites-list-mc-material { border: 1px solid $c-text-secondary-gray; - padding: #{$s-xl}px; + padding: $s-xl; display: flex; width: 100%; position: relative; @@ -61,23 +61,23 @@ &__favourite { position: absolute; - top: #{$s-sm}px; - right: #{$s-sm}px; + top: $s-sm; + right: $s-sm; } &__cover-container { display: flex; justify-content: center; width: 100%; - margin-top: #{$s-sm}px; + margin-top: $s-sm; } &__meta { position: absolute; - left: #{$s-sm}px; - bottom: #{$s-sm}px; + left: $s-sm; + bottom: $s-sm; width: 100%; - padding-right: #{$s-sm}px; + padding-right: $s-sm; } &__title { From da5d8af5330d11ba662de83a6b621598d54a3f2a Mon Sep 17 00:00:00 2001 From: Jeppe Krogh Date: Tue, 11 Apr 2023 13:21:01 +0200 Subject: [PATCH 14/14] added generic accessible content for covers --- src/stories/Library/cover/Cover.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/stories/Library/cover/Cover.tsx b/src/stories/Library/cover/Cover.tsx index 5092b9d8f..a53198981 100644 --- a/src/stories/Library/cover/Cover.tsx +++ b/src/stories/Library/cover/Cover.tsx @@ -28,7 +28,13 @@ const Cover: FC = ({ // Images inside links must have an non-empty alt text to meet accessibility requirements. // Only render the cover as a link if we have both an url and a description. return ( - + setImageLoaded(true)} src={src}