From 2c503608b695bbd8c2e27dea1ce460e24c4d2c52 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Thu, 12 May 2022 16:33:34 +0200 Subject: [PATCH 01/81] Use white color background for header input field and no focus outline. Following the newest Figma UX/UI for the project. --- src/stories/header/header.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/stories/header/header.scss b/src/stories/header/header.scss index bd5cfc97e..2c1f6a868 100644 --- a/src/stories/header/header.scss +++ b/src/stories/header/header.scss @@ -149,6 +149,12 @@ ::placeholder { color: $c-text-secondary-gray; } + + &:focus { + background-color: $c-text-primary-white; + border: 0 solid transparent; + outline: none; + } } .header__menu-search-icon { From 9321f0a0d8c5623ca6c5d09588ff890439c9e968 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Fri, 27 May 2022 10:30:49 +0200 Subject: [PATCH 02/81] Heart toggle icon A component with an inline heart svg. We have done this to be able to receive a prop that determines whether the heart should be fill. --- .../icon/icon-heart/IconHeart.stories.tsx | 32 +++++++++++++++++++ src/stories/icon/icon-heart/IconHeart.tsx | 21 ++++++++++++ 2 files changed, 53 insertions(+) create mode 100644 src/stories/icon/icon-heart/IconHeart.stories.tsx create mode 100644 src/stories/icon/icon-heart/IconHeart.tsx diff --git a/src/stories/icon/icon-heart/IconHeart.stories.tsx b/src/stories/icon/icon-heart/IconHeart.stories.tsx new file mode 100644 index 000000000..f47bf3e49 --- /dev/null +++ b/src/stories/icon/icon-heart/IconHeart.stories.tsx @@ -0,0 +1,32 @@ +import { ComponentStory, ComponentMeta } from "@storybook/react"; +import { withDesign } from "storybook-addon-designs"; +import { IconHeart } from "./IconHeart"; + +type IconHeartProps = typeof IconHeart; + +export default { + title: "Atoms / Icons", + component: IconHeart, + decorators: [withDesign], + parameters: { + design: { + type: "figma", + url: + "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?node-id=1385%3A10755", + }, + }, + argTypes: { + fill: { + control: "boolean", + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +export const Heart = Template.bind({}); +Heart.args = { + fill: true, +}; diff --git a/src/stories/icon/icon-heart/IconHeart.tsx b/src/stories/icon/icon-heart/IconHeart.tsx new file mode 100644 index 000000000..8e72cb78d --- /dev/null +++ b/src/stories/icon/icon-heart/IconHeart.tsx @@ -0,0 +1,21 @@ +export type IconHeartProps = { + fill?: boolean; +}; + +export const IconHeart = ({ fill }: IconHeartProps) => { + return ( + + + + ); +}; From e84972f8408e91af597a76e441162decd556850f Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Fri, 27 May 2022 12:08:24 +0200 Subject: [PATCH 03/81] Update package-lock.json's dev dependancies order This maybe should have been a part of another PR, but here we are. --- package-lock.json | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5ce9f6d83..e00643da9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,8 +24,8 @@ "@types/node": "^12.0.0", "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", - "clsx": "^1.1.1", "@whitespace/storybook-addon-html": "^5.0.0", + "clsx": "^1.1.1", "eslint-plugin-reload": "^0.3.0", "json": "^11.0.0", "react": "^17.0.2", @@ -35,10 +35,6 @@ "storybook-addon-designs": "^6.1.0", "typescript": "^4.1.2", "web-vitals": "^1.0.1" - }, - "engines": { - "node": ">=16", - "npm": ">=7" } }, "node_modules/@babel/code-frame": { @@ -9948,6 +9944,7 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz", "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==", + "dev": true, "engines": { "node": ">=6" } @@ -39836,7 +39833,8 @@ "clsx": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz", - "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==" + "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==", + "dev": true }, "co": { "version": "4.6.0", From 74692114d582f251326bc635037c9f20e8177001 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Fri, 27 May 2022 12:10:57 +0200 Subject: [PATCH 04/81] Create a dropdown text suggestion component. --- src/stories/dropdown-suggest-text/suggest-text.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 src/stories/dropdown-suggest-text/suggest-text.tsx diff --git a/src/stories/dropdown-suggest-text/suggest-text.tsx b/src/stories/dropdown-suggest-text/suggest-text.tsx new file mode 100644 index 000000000..ce0466c2d --- /dev/null +++ b/src/stories/dropdown-suggest-text/suggest-text.tsx @@ -0,0 +1,9 @@ +const SuggestText = () => { + return ( +
+ I will be a mighty dropdown one day. +
+ ) +} + +export default SuggestText From 0558571fee1eaa77a13cdbe1eab88a31433371c2 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Fri, 27 May 2022 13:15:26 +0200 Subject: [PATCH 05/81] refactor component IconHeart / IconFavourite refactor component name + and resolve all comments from previous pull request. --- ...t.stories.tsx => IconFavourite.stories.tsx} | 18 +++++++++--------- .../{IconHeart.tsx => IconFavourite.tsx} | 8 +++++--- 2 files changed, 14 insertions(+), 12 deletions(-) rename src/stories/icon/icon-heart/{IconHeart.stories.tsx => IconFavourite.stories.tsx} (53%) rename src/stories/icon/icon-heart/{IconHeart.tsx => IconFavourite.tsx} (65%) diff --git a/src/stories/icon/icon-heart/IconHeart.stories.tsx b/src/stories/icon/icon-heart/IconFavourite.stories.tsx similarity index 53% rename from src/stories/icon/icon-heart/IconHeart.stories.tsx rename to src/stories/icon/icon-heart/IconFavourite.stories.tsx index f47bf3e49..b1eb53d39 100644 --- a/src/stories/icon/icon-heart/IconHeart.stories.tsx +++ b/src/stories/icon/icon-heart/IconFavourite.stories.tsx @@ -1,18 +1,18 @@ import { ComponentStory, ComponentMeta } from "@storybook/react"; import { withDesign } from "storybook-addon-designs"; -import { IconHeart } from "./IconHeart"; +import { IconFavourite } from "./IconFavourite"; -type IconHeartProps = typeof IconHeart; +type IconFavouriteProps = typeof IconFavourite; export default { title: "Atoms / Icons", - component: IconHeart, + component: IconFavourite, decorators: [withDesign], parameters: { design: { type: "figma", url: - "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?node-id=1385%3A10755", + "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?node-id=656%3A5407", }, }, argTypes: { @@ -20,13 +20,13 @@ export default { control: "boolean", }, }, -} as ComponentMeta; +} as ComponentMeta; -const Template: ComponentStory = (args) => ( - +const Template: ComponentStory = (args) => ( + ); -export const Heart = Template.bind({}); -Heart.args = { +export const favourite = Template.bind({}); +favourite.args = { fill: true, }; diff --git a/src/stories/icon/icon-heart/IconHeart.tsx b/src/stories/icon/icon-heart/IconFavourite.tsx similarity index 65% rename from src/stories/icon/icon-heart/IconHeart.tsx rename to src/stories/icon/icon-heart/IconFavourite.tsx index 8e72cb78d..633b5f2a3 100644 --- a/src/stories/icon/icon-heart/IconHeart.tsx +++ b/src/stories/icon/icon-heart/IconFavourite.tsx @@ -1,8 +1,10 @@ -export type IconHeartProps = { +export type IconFavouriteProps = { fill?: boolean; }; -export const IconHeart = ({ fill }: IconHeartProps) => { +export const IconFavourite = ({ fill }: IconFavouriteProps) => { + // This svg is a copy from public/icons/basic/icon-heart.svg. + // It is made as inline svg to be able to change fill value from props return ( { ); From 0ff03dba051c31a6f8ab04d9ab12fecd600d7bf7 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Mon, 30 May 2022 08:44:55 +0200 Subject: [PATCH 06/81] Add SearchResultElement component. This is a component that displays results items. The component use these atoms - Material - IconFavourite - AvailabilityLabel --- base.scss | 1 + .../SearchResultElement.stories.tsx | 50 +++++++++++++ .../SearchResultElement.tsx | 74 +++++++++++++++++++ .../search-result-element.scss | 44 +++++++++++ 4 files changed, 169 insertions(+) create mode 100644 src/stories/search-result-element/SearchResultElement.stories.tsx create mode 100644 src/stories/search-result-element/SearchResultElement.tsx create mode 100644 src/stories/search-result-element/search-result-element.scss diff --git a/base.scss b/base.scss index 6c7adcffd..448871bd0 100644 --- a/base.scss +++ b/base.scss @@ -26,6 +26,7 @@ @import "./src/stories/counter/counter"; @import "./src/stories/checkbox/checkbox"; @import "./src/stories/availability-label/availability-label"; +@import "./src/stories/search-result-element/search-result-element.scss"; @import "./src/stories/list-reservation/list-reservation"; @import "./src/stories/list-dashboard/list-dashboard"; diff --git a/src/stories/search-result-element/SearchResultElement.stories.tsx b/src/stories/search-result-element/SearchResultElement.stories.tsx new file mode 100644 index 000000000..bfe665cbb --- /dev/null +++ b/src/stories/search-result-element/SearchResultElement.stories.tsx @@ -0,0 +1,50 @@ +import { withDesign } from "storybook-addon-designs"; +import { ComponentMeta, ComponentStory } from "@storybook/react"; +import { SearchResultElement } from "./SearchResultElement"; + +export default { + title: "Components / Search Result Element", + component: SearchResultElement, + decorators: [withDesign], + parameters: { + design: { + type: "figma", + url: + "https://www.figma.com/file/ETOZIfmgGS1HUfio57SOh7/S%C3%B8gning?node-id=4557%3A15899", + }, + }, + argTypes: { + heartFill: { + control: "boolean", + }, + title: { + type: { name: "string" }, + }, + author: { + type: { name: "string" }, + }, + year: { + type: { name: "string" }, + }, + categoryScore: { + type: { name: "string" }, + }, + series: { + type: { name: "string" }, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => { + return ; +}; + +export const Item = Template.bind({}); +Item.args = { + heartFill: false, + title: "Audrey Hepburn", + author: "Sánchez Vegara, Amaia Arrazola", + year: "2018", + categoryScore: "3", + series: "Små mennesker, store drømme", +}; diff --git a/src/stories/search-result-element/SearchResultElement.tsx b/src/stories/search-result-element/SearchResultElement.tsx new file mode 100644 index 000000000..6688c9530 --- /dev/null +++ b/src/stories/search-result-element/SearchResultElement.tsx @@ -0,0 +1,74 @@ +import { AvailabilityLabel } from "../availability-label/AvailabilityLabel"; +import { IconFavourite } from "../icon/icon-heart/IconFavourite"; +import { Material } from "../material/Material"; + +export type SearchResultElementProps = { + heartFill?: boolean; + title: string; + author: string; + year: string; + categoryScore?: string; + series?: string; +}; + +export const SearchResultElement = ({ + heartFill, + title = "Title", + author = "Author", + year = "2022", + categoryScore, + series, +}: SearchResultElementProps) => { + return ( +
+
+ +
+
+ + + {categoryScore && ( +
+ {`Nr. ${categoryScore} `} + {series && ( + <> + i serien{" "} + + {series} + + + )} +
+ )} +
+
+

{title}

+

{`Af ${author} (${year})`}

+
+
+
+
+ + + +
+
+ ); +}; diff --git a/src/stories/search-result-element/search-result-element.scss b/src/stories/search-result-element/search-result-element.scss new file mode 100644 index 000000000..80c69675f --- /dev/null +++ b/src/stories/search-result-element/search-result-element.scss @@ -0,0 +1,44 @@ +.search-result-element { + padding: 24px; + display: grid; + grid-template-columns: repeat(2, 1fr); + align-items: center; + + &__info { + display: flex; + + &__text-content { + margin-left: 24px; + + &__top { + display: flex; + align-items: center; + + svg { + cursor: pointer; + } + + &__category-score { + white-space: nowrap; + margin-left: 12px; + + &__underline { + text-decoration: underline; + } + } + } + + &__bottom { + :first-child { + margin-top: 16px; + } + } + } + } + + &__availability { + display: flex; + flex-wrap: wrap; + gap: 6px; + } +} From 7a283c265091c54a9e2812688fc93964c9153969 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Mon, 30 May 2022 09:20:12 +0200 Subject: [PATCH 07/81] add controls and defaultValues to storybook argTypes. --- .../SearchResultElement.stories.tsx | 25 +++++++++---------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/src/stories/search-result-element/SearchResultElement.stories.tsx b/src/stories/search-result-element/SearchResultElement.stories.tsx index bfe665cbb..aee4aa6a8 100644 --- a/src/stories/search-result-element/SearchResultElement.stories.tsx +++ b/src/stories/search-result-element/SearchResultElement.stories.tsx @@ -16,21 +16,27 @@ export default { argTypes: { heartFill: { control: "boolean", + defaultValue: false, }, title: { - type: { name: "string" }, + control: { type: "text" }, + defaultValue: "Audrey Hepburn", }, author: { - type: { name: "string" }, + control: { type: "text" }, + defaultValue: "Sánchez Vegara, Amaia Arrazola", }, year: { - type: { name: "string" }, + control: { type: "text" }, + defaultValue: "2018", }, categoryScore: { - type: { name: "string" }, + control: { type: "text" }, + defaultValue: "3", }, series: { - type: { name: "string" }, + control: { type: "text" }, + defaultValue: "Små mennesker, store drømme", }, }, } as ComponentMeta; @@ -40,11 +46,4 @@ const Template: ComponentStory = (args) => { }; export const Item = Template.bind({}); -Item.args = { - heartFill: false, - title: "Audrey Hepburn", - author: "Sánchez Vegara, Amaia Arrazola", - year: "2018", - categoryScore: "3", - series: "Små mennesker, store drømme", -}; +Item.args = {}; From 06bee360a6bca82dc91772944fac5d20c203baf3 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Mon, 30 May 2022 08:44:55 +0200 Subject: [PATCH 08/81] Add SearchResultElement component. This is a component that displays results items. The component use these atoms - Material - IconFavourite - AvailabilityLabel --- base.scss | 1 + .../SearchResultElement.stories.tsx | 50 +++++++++++++ .../SearchResultElement.tsx | 74 +++++++++++++++++++ .../search-result-element.scss | 44 +++++++++++ 4 files changed, 169 insertions(+) create mode 100644 src/stories/search-result-element/SearchResultElement.stories.tsx create mode 100644 src/stories/search-result-element/SearchResultElement.tsx create mode 100644 src/stories/search-result-element/search-result-element.scss diff --git a/base.scss b/base.scss index 6c7adcffd..448871bd0 100644 --- a/base.scss +++ b/base.scss @@ -26,6 +26,7 @@ @import "./src/stories/counter/counter"; @import "./src/stories/checkbox/checkbox"; @import "./src/stories/availability-label/availability-label"; +@import "./src/stories/search-result-element/search-result-element.scss"; @import "./src/stories/list-reservation/list-reservation"; @import "./src/stories/list-dashboard/list-dashboard"; diff --git a/src/stories/search-result-element/SearchResultElement.stories.tsx b/src/stories/search-result-element/SearchResultElement.stories.tsx new file mode 100644 index 000000000..bfe665cbb --- /dev/null +++ b/src/stories/search-result-element/SearchResultElement.stories.tsx @@ -0,0 +1,50 @@ +import { withDesign } from "storybook-addon-designs"; +import { ComponentMeta, ComponentStory } from "@storybook/react"; +import { SearchResultElement } from "./SearchResultElement"; + +export default { + title: "Components / Search Result Element", + component: SearchResultElement, + decorators: [withDesign], + parameters: { + design: { + type: "figma", + url: + "https://www.figma.com/file/ETOZIfmgGS1HUfio57SOh7/S%C3%B8gning?node-id=4557%3A15899", + }, + }, + argTypes: { + heartFill: { + control: "boolean", + }, + title: { + type: { name: "string" }, + }, + author: { + type: { name: "string" }, + }, + year: { + type: { name: "string" }, + }, + categoryScore: { + type: { name: "string" }, + }, + series: { + type: { name: "string" }, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => { + return ; +}; + +export const Item = Template.bind({}); +Item.args = { + heartFill: false, + title: "Audrey Hepburn", + author: "Sánchez Vegara, Amaia Arrazola", + year: "2018", + categoryScore: "3", + series: "Små mennesker, store drømme", +}; diff --git a/src/stories/search-result-element/SearchResultElement.tsx b/src/stories/search-result-element/SearchResultElement.tsx new file mode 100644 index 000000000..6688c9530 --- /dev/null +++ b/src/stories/search-result-element/SearchResultElement.tsx @@ -0,0 +1,74 @@ +import { AvailabilityLabel } from "../availability-label/AvailabilityLabel"; +import { IconFavourite } from "../icon/icon-heart/IconFavourite"; +import { Material } from "../material/Material"; + +export type SearchResultElementProps = { + heartFill?: boolean; + title: string; + author: string; + year: string; + categoryScore?: string; + series?: string; +}; + +export const SearchResultElement = ({ + heartFill, + title = "Title", + author = "Author", + year = "2022", + categoryScore, + series, +}: SearchResultElementProps) => { + return ( +
+
+ +
+
+ + + {categoryScore && ( +
+ {`Nr. ${categoryScore} `} + {series && ( + <> + i serien{" "} + + {series} + + + )} +
+ )} +
+
+

{title}

+

{`Af ${author} (${year})`}

+
+
+
+
+ + + +
+
+ ); +}; diff --git a/src/stories/search-result-element/search-result-element.scss b/src/stories/search-result-element/search-result-element.scss new file mode 100644 index 000000000..80c69675f --- /dev/null +++ b/src/stories/search-result-element/search-result-element.scss @@ -0,0 +1,44 @@ +.search-result-element { + padding: 24px; + display: grid; + grid-template-columns: repeat(2, 1fr); + align-items: center; + + &__info { + display: flex; + + &__text-content { + margin-left: 24px; + + &__top { + display: flex; + align-items: center; + + svg { + cursor: pointer; + } + + &__category-score { + white-space: nowrap; + margin-left: 12px; + + &__underline { + text-decoration: underline; + } + } + } + + &__bottom { + :first-child { + margin-top: 16px; + } + } + } + } + + &__availability { + display: flex; + flex-wrap: wrap; + gap: 6px; + } +} From b63cff631b5220ba56b9973581df140a6b9b9b65 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Mon, 30 May 2022 09:20:12 +0200 Subject: [PATCH 09/81] add controls and defaultValues to storybook argTypes. --- .../SearchResultElement.stories.tsx | 25 +++++++++---------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/src/stories/search-result-element/SearchResultElement.stories.tsx b/src/stories/search-result-element/SearchResultElement.stories.tsx index bfe665cbb..aee4aa6a8 100644 --- a/src/stories/search-result-element/SearchResultElement.stories.tsx +++ b/src/stories/search-result-element/SearchResultElement.stories.tsx @@ -16,21 +16,27 @@ export default { argTypes: { heartFill: { control: "boolean", + defaultValue: false, }, title: { - type: { name: "string" }, + control: { type: "text" }, + defaultValue: "Audrey Hepburn", }, author: { - type: { name: "string" }, + control: { type: "text" }, + defaultValue: "Sánchez Vegara, Amaia Arrazola", }, year: { - type: { name: "string" }, + control: { type: "text" }, + defaultValue: "2018", }, categoryScore: { - type: { name: "string" }, + control: { type: "text" }, + defaultValue: "3", }, series: { - type: { name: "string" }, + control: { type: "text" }, + defaultValue: "Små mennesker, store drømme", }, }, } as ComponentMeta; @@ -40,11 +46,4 @@ const Template: ComponentStory = (args) => { }; export const Item = Template.bind({}); -Item.args = { - heartFill: false, - title: "Audrey Hepburn", - author: "Sánchez Vegara, Amaia Arrazola", - year: "2018", - categoryScore: "3", - series: "Små mennesker, store drømme", -}; +Item.args = {}; From a48396805d9af3dbfd035c8fee6b63a966f554a9 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Mon, 30 May 2022 13:32:44 +0200 Subject: [PATCH 10/81] Add css and renamed the folder. --- base.scss | 1 + src/stories/icon/icon-favourite/IconFavourite.scss | 3 +++ .../{icon-heart => icon-favourite}/IconFavourite.stories.tsx | 0 .../icon/{icon-heart => icon-favourite}/IconFavourite.tsx | 1 + 4 files changed, 5 insertions(+) create mode 100644 src/stories/icon/icon-favourite/IconFavourite.scss rename src/stories/icon/{icon-heart => icon-favourite}/IconFavourite.stories.tsx (100%) rename src/stories/icon/{icon-heart => icon-favourite}/IconFavourite.tsx (95%) diff --git a/base.scss b/base.scss index 6c7adcffd..30bdcd98b 100644 --- a/base.scss +++ b/base.scss @@ -26,6 +26,7 @@ @import "./src/stories/counter/counter"; @import "./src/stories/checkbox/checkbox"; @import "./src/stories/availability-label/availability-label"; +@import "./src/stories/icon/icon-favourite/IconFavourite"; @import "./src/stories/list-reservation/list-reservation"; @import "./src/stories/list-dashboard/list-dashboard"; diff --git a/src/stories/icon/icon-favourite/IconFavourite.scss b/src/stories/icon/icon-favourite/IconFavourite.scss new file mode 100644 index 000000000..e848392ce --- /dev/null +++ b/src/stories/icon/icon-favourite/IconFavourite.scss @@ -0,0 +1,3 @@ +.icon-favourite { + cursor: pointer; +} diff --git a/src/stories/icon/icon-heart/IconFavourite.stories.tsx b/src/stories/icon/icon-favourite/IconFavourite.stories.tsx similarity index 100% rename from src/stories/icon/icon-heart/IconFavourite.stories.tsx rename to src/stories/icon/icon-favourite/IconFavourite.stories.tsx diff --git a/src/stories/icon/icon-heart/IconFavourite.tsx b/src/stories/icon/icon-favourite/IconFavourite.tsx similarity index 95% rename from src/stories/icon/icon-heart/IconFavourite.tsx rename to src/stories/icon/icon-favourite/IconFavourite.tsx index 633b5f2a3..93d0b6d2e 100644 --- a/src/stories/icon/icon-heart/IconFavourite.tsx +++ b/src/stories/icon/icon-favourite/IconFavourite.tsx @@ -7,6 +7,7 @@ export const IconFavourite = ({ fill }: IconFavouriteProps) => { // It is made as inline svg to be able to change fill value from props return ( Date: Mon, 30 May 2022 14:22:54 +0200 Subject: [PATCH 11/81] Update package.json and package-lock.json We previously moved all the dependencies to be devDependencies, because none of these are required to successfully build the project. It seems like now when I ran npm install, the package manager decided that we should not have an empty dependencies object. Package-lock.json is updated as well. --- package-lock.json | 26 ++++++++++++++++---------- package.json | 1 - 2 files changed, 16 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index e00643da9..9aa07d438 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9525,14 +9525,20 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001252", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001252.tgz", - "integrity": "sha512-I56jhWDGMtdILQORdusxBOH+Nl/KgQSdDmpJezYddnAkVOmnoU8zwjTV9xAjMIYxr0iPreEAVylCGcmHCjfaOw==", + "version": "1.0.30001344", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001344.tgz", + "integrity": "sha512-0ZFjnlCaXNOAYcV7i+TtdKBp0L/3XEU2MF/x6Du1lrh+SRX4IfzIVL4HNJg5pB2PmFb8rszIGyOvsZnqqRoc2g==", "dev": true, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/browserslist" - } + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + } + ] }, "node_modules/capture-exit": { "version": "2.0.0", @@ -39509,9 +39515,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001252", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001252.tgz", - "integrity": "sha512-I56jhWDGMtdILQORdusxBOH+Nl/KgQSdDmpJezYddnAkVOmnoU8zwjTV9xAjMIYxr0iPreEAVylCGcmHCjfaOw==", + "version": "1.0.30001344", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001344.tgz", + "integrity": "sha512-0ZFjnlCaXNOAYcV7i+TtdKBp0L/3XEU2MF/x6Du1lrh+SRX4IfzIVL4HNJg5pB2PmFb8rszIGyOvsZnqqRoc2g==", "dev": true }, "capture-exit": { diff --git a/package.json b/package.json index b438c1a58..6c3d3ae6b 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,6 @@ "name": "dpl-design-system", "version": "0.1.0", "repository": "https://github.com/danskernesdigitalebibliotek/dpl-design-system", - "dependencies": {}, "scripts": { "storybook": "start-storybook -p 6006 -s public", "storybook:axe": "build-storybook && axe-storybook", From 4f0a9bb86f382bc3870b9432f8f8d5cb951afd46 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Mon, 30 May 2022 15:28:09 +0200 Subject: [PATCH 12/81] switch from categoryScore to seriesNumber because it is more descriptive. --- .../search-result-element/SearchResultElement.stories.tsx | 2 +- src/stories/search-result-element/SearchResultElement.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/stories/search-result-element/SearchResultElement.stories.tsx b/src/stories/search-result-element/SearchResultElement.stories.tsx index aee4aa6a8..78ce9298d 100644 --- a/src/stories/search-result-element/SearchResultElement.stories.tsx +++ b/src/stories/search-result-element/SearchResultElement.stories.tsx @@ -30,7 +30,7 @@ export default { control: { type: "text" }, defaultValue: "2018", }, - categoryScore: { + seriesNumber: { control: { type: "text" }, defaultValue: "3", }, diff --git a/src/stories/search-result-element/SearchResultElement.tsx b/src/stories/search-result-element/SearchResultElement.tsx index daef50825..20bf16bf5 100644 --- a/src/stories/search-result-element/SearchResultElement.tsx +++ b/src/stories/search-result-element/SearchResultElement.tsx @@ -7,7 +7,7 @@ export type SearchResultElementProps = { title: string; author: string; year: string; - categoryScore?: string; + seriesNumber?: string; series?: string; }; @@ -16,7 +16,7 @@ export const SearchResultElement = ({ title = "Title", author = "Author", year = "2022", - categoryScore, + seriesNumber, series, }: SearchResultElementProps) => { return ( @@ -32,9 +32,9 @@ export const SearchResultElement = ({
- {categoryScore && ( + {seriesNumber && (
- {`Nr. ${categoryScore} `} + {`Nr. ${seriesNumber} `} {series && ( <> i serien{" "} From 887ca03b3e8feff8fff5d2c252b451e4692d0a85 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Mon, 30 May 2022 15:33:27 +0200 Subject: [PATCH 13/81] removed the selected type because it is not relevant in that context. --- .../SearchResultElement.tsx | 39 +++++++++++-------- 1 file changed, 22 insertions(+), 17 deletions(-) diff --git a/src/stories/search-result-element/SearchResultElement.tsx b/src/stories/search-result-element/SearchResultElement.tsx index 20bf16bf5..691151a6b 100644 --- a/src/stories/search-result-element/SearchResultElement.tsx +++ b/src/stories/search-result-element/SearchResultElement.tsx @@ -51,23 +51,28 @@ export const SearchResultElement = ({

{`Af ${author} (${year})`}

- -
- - - + + + + + +
); From c2f62601942986d4f9d130d58d6b259bc34d8f5e Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Mon, 30 May 2022 15:37:13 +0200 Subject: [PATCH 14/81] change to responsive htlm markup and css have been modified to make the component responsive --- base.scss | 1 + .../SearchResultElement.tsx | 29 +++++----- .../search-result-element.scss | 57 +++++++++---------- 3 files changed, 42 insertions(+), 45 deletions(-) diff --git a/base.scss b/base.scss index 30bdcd98b..c076e0719 100644 --- a/base.scss +++ b/base.scss @@ -26,6 +26,7 @@ @import "./src/stories/counter/counter"; @import "./src/stories/checkbox/checkbox"; @import "./src/stories/availability-label/availability-label"; +@import "./src/stories/search-result-element/search-result-element"; @import "./src/stories/icon/icon-favourite/IconFavourite"; @import "./src/stories/list-reservation/list-reservation"; diff --git a/src/stories/search-result-element/SearchResultElement.tsx b/src/stories/search-result-element/SearchResultElement.tsx index 691151a6b..812a547bd 100644 --- a/src/stories/search-result-element/SearchResultElement.tsx +++ b/src/stories/search-result-element/SearchResultElement.tsx @@ -21,36 +21,37 @@ export const SearchResultElement = ({ }: SearchResultElementProps) => { return (
-
- -
-
+ +
+
+
{seriesNumber && ( -
+
{`Nr. ${seriesNumber} `} {series && ( <> i serien{" "} - + {series} - + )}
)}
-
-

{title}

+
+

{title}

{`Af ${author} (${year})`}

+
Date: Mon, 30 May 2022 19:44:08 +0200 Subject: [PATCH 15/81] Create Autosuggest text component, story, and styling The autosuggest component is dependent on styling and positioning of the search field. That's why we include a dummy search field with the header in Autosuggest text's story. This way the compoent itself only contains the elements it needs, and the story shows it correctly styled too. --- base.scss | 1 + .../AutosuggestText.stories.tsx | 54 +++++++++++++++++++ .../autosuggest-text/AutosuggestText.tsx | 18 +++++++ .../autosuggest-text/autosuggest-text.scss | 28 ++++++++++ .../dropdown-suggest-text/suggest-text.tsx | 9 ---- 5 files changed, 101 insertions(+), 9 deletions(-) create mode 100644 src/stories/autosuggest-text/AutosuggestText.stories.tsx create mode 100644 src/stories/autosuggest-text/AutosuggestText.tsx create mode 100644 src/stories/autosuggest-text/autosuggest-text.scss delete mode 100644 src/stories/dropdown-suggest-text/suggest-text.tsx diff --git a/base.scss b/base.scss index 6c7adcffd..be743755c 100644 --- a/base.scss +++ b/base.scss @@ -26,6 +26,7 @@ @import "./src/stories/counter/counter"; @import "./src/stories/checkbox/checkbox"; @import "./src/stories/availability-label/availability-label"; +@import "./src/stories/autosuggest-text/autosuggest-text"; @import "./src/stories/list-reservation/list-reservation"; @import "./src/stories/list-dashboard/list-dashboard"; diff --git a/src/stories/autosuggest-text/AutosuggestText.stories.tsx b/src/stories/autosuggest-text/AutosuggestText.stories.tsx new file mode 100644 index 000000000..b866271a7 --- /dev/null +++ b/src/stories/autosuggest-text/AutosuggestText.stories.tsx @@ -0,0 +1,54 @@ +import { ComponentMeta, ComponentStory } from "@storybook/react"; +import { withDesign } from "storybook-addon-designs"; +import { AutosuggestText } from "./AutosuggestText"; + +export default { + title: "Components / Autosuggest - Text", + component: AutosuggestText, + decorators: [withDesign], + argTypes: { + items: { + name: "Items", + defaultValue: ["Item one", "Item two"], + control: { type: "array" } + } + }, + parameters: {}, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + // apart from SuggestText, everything else is here just for the story context + // SuggestText style is directly dependent on the header and search field styling + <> +
+
+

Context

+
+
+ +
+
+ + search icon + +
+
+
+
+

Context

+
+
+ +); + +export const TextSuggestion = Template.bind({}); \ No newline at end of file diff --git a/src/stories/autosuggest-text/AutosuggestText.tsx b/src/stories/autosuggest-text/AutosuggestText.tsx new file mode 100644 index 000000000..0c9053ad4 --- /dev/null +++ b/src/stories/autosuggest-text/AutosuggestText.tsx @@ -0,0 +1,18 @@ +export type AutosuggestTextType = { + items: string[] +} + +export const AutosuggestText = (props: AutosuggestTextType) => { + const { items } = props; + return ( +
    + {items.map((item) => { + return ( +
  • + {item} +
    • + ) + })} +
+ ) +} diff --git a/src/stories/autosuggest-text/autosuggest-text.scss b/src/stories/autosuggest-text/autosuggest-text.scss new file mode 100644 index 000000000..bee287d79 --- /dev/null +++ b/src/stories/autosuggest-text/autosuggest-text.scss @@ -0,0 +1,28 @@ +.suggest-text { + + &--container { + background-color: $c-global-primary; + outline: 1px solid $c-global-tertiary-1; + position: absolute; + left: 0; + right: 0; + top: calc(100% + 2px); + padding-bottom: 30px; + + @include breakpoint-m { + padding-top: 17px; + } + } + + &--item { + height: 40px; + display: flex; + align-items: center; + padding: 0 23px; + + &:hover { + background-color: $c-global-secondary; + cursor: pointer; + } + } +} \ No newline at end of file diff --git a/src/stories/dropdown-suggest-text/suggest-text.tsx b/src/stories/dropdown-suggest-text/suggest-text.tsx deleted file mode 100644 index ce0466c2d..000000000 --- a/src/stories/dropdown-suggest-text/suggest-text.tsx +++ /dev/null @@ -1,9 +0,0 @@ -const SuggestText = () => { - return ( -
- I will be a mighty dropdown one day. -
- ) -} - -export default SuggestText From fcd81f3b5924af31ce1d3071274acd31e1e1031d Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Mon, 30 May 2022 20:00:27 +0200 Subject: [PATCH 16/81] Add a form with styling as an update to the header component When creating the react component for the search field, I discovered that adding a form input field submission is the best way forward. This wasn't accounted for in the design, though, and broke the design. Adding the form to the design system component with a class that mitigates this flaw fixes the design. --- src/stories/header/Header.tsx | 22 ++++++++++++---------- src/stories/header/header.scss | 7 +++++++ 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/src/stories/header/Header.tsx b/src/stories/header/Header.tsx index 87a638aaa..2329034c5 100644 --- a/src/stories/header/Header.tsx +++ b/src/stories/header/Header.tsx @@ -90,16 +90,18 @@ export const Header = (props: HeaderProps) => {
- - search icon +
+ + search icon +
diff --git a/src/stories/header/header.scss b/src/stories/header/header.scss index 2c1f6a868..48400e743 100644 --- a/src/stories/header/header.scss +++ b/src/stories/header/header.scss @@ -157,6 +157,13 @@ } } +.header__menu-search-form { + display: flex; + align-items: center; + width: 100%; + height: 100%; +} + .header__menu-search-icon { position: absolute; right: 24px; From 7e0076018f940c2b5ea1e489bd41458d73096b1a Mon Sep 17 00:00:00 2001 From: kasperbirch1 Date: Tue, 31 May 2022 09:12:17 +0200 Subject: [PATCH 17/81] Refactor css for more responsive layout --- src/stories/search-result-element/search-result-element.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/stories/search-result-element/search-result-element.scss b/src/stories/search-result-element/search-result-element.scss index 91c89c80d..095cf5923 100644 --- a/src/stories/search-result-element/search-result-element.scss +++ b/src/stories/search-result-element/search-result-element.scss @@ -19,7 +19,6 @@ align-items: center; &__series-number { - white-space: nowrap; margin-left: 12px; } } From 8123b2c458c810413f2a90db665f8999fd1bced2 Mon Sep 17 00:00:00 2001 From: Kasper Garnaes Date: Tue, 31 May 2022 10:47:59 +0200 Subject: [PATCH 18/81] Refactor search result markup and CSS to reduce nesting Use grid display to achieve a layout that switches between two columns on mobile (cover and text+availability) to three (cover, text and availability on desktop. This allows us to reduce the number of HTML elements and our CSS nesting significantly. Also adjust spacing between elements to ensure that we are in line with the design. --- .../SearchResultElement.tsx | 100 +++++++++--------- .../search-result-element.scss | 57 +++++----- 2 files changed, 81 insertions(+), 76 deletions(-) diff --git a/src/stories/search-result-element/SearchResultElement.tsx b/src/stories/search-result-element/SearchResultElement.tsx index 812a547bd..8e608247e 100644 --- a/src/stories/search-result-element/SearchResultElement.tsx +++ b/src/stories/search-result-element/SearchResultElement.tsx @@ -21,60 +21,58 @@ export const SearchResultElement = ({ }: SearchResultElementProps) => { return (
- -
-
-
- +
+ +
+
+
+ - {seriesNumber && ( -
- {`Nr. ${seriesNumber} `} - {series && ( - <> - i serien{" "} - - {series} - - - )} -
- )} -
-
-

{title}

-

{`Af ${author} (${year})`}

-
+ {seriesNumber && ( +
+ {`Nr. ${seriesNumber} `} + {series && ( + <> + i serien{" "} + + {series} + + + )} +
+ )}
-
- - +

{title}

+

{`Af ${author} (${year})`}

+
+
+ + - - -
-
+ + +
); }; diff --git a/src/stories/search-result-element/search-result-element.scss b/src/stories/search-result-element/search-result-element.scss index 095cf5923..ebffb28ba 100644 --- a/src/stories/search-result-element/search-result-element.scss +++ b/src/stories/search-result-element/search-result-element.scss @@ -1,38 +1,45 @@ .search-result-element { - padding: 24px; - display: flex; - gap: 1rem; -} - -.search-result-element-content { + padding: 16px 24px; display: grid; - gap: 1rem; + grid-template-columns: min-content 1fr; + gap: 16px; @include breakpoint-s { - grid-template-columns: repeat(2, 1fr); - align-items: center; + gap: 24px; + padding: 24px; + grid-template-columns: min-content max-content 1fr; } +} + +.search-result-element__cover { + grid-row: span 2; - &__text { - &__top { - display: flex; - align-items: center; - - &__series-number { - margin-left: 12px; - } - } - - &__bottom { - :first-child { - margin-top: 16px; - } - } + @include breakpoint-s { + grid-row: auto; } } -.search-result-element-availability { +.search-result-element__availability { + grid-column: 2; display: flex; flex-wrap: wrap; + align-items: center; gap: 6px; + + @include breakpoint-s { + grid-column: 3; + } +} + +.search-result-element__meta { + display: flex; + gap: 10px; +} + +.search-result-element__title { + margin-top: 10px; + + @include breakpoint-s { + margin-top: 16px; + } } From ae8531e76af6968633e149d4ab6577d448c3e23e Mon Sep 17 00:00:00 2001 From: Kasper Garnaes Date: Tue, 31 May 2022 12:18:43 +0200 Subject: [PATCH 19/81] Update availability elements in search result element Add more variation to the provided elements. This also resembles actual usage more closely. --- .../search-result-element/SearchResultElement.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/stories/search-result-element/SearchResultElement.tsx b/src/stories/search-result-element/SearchResultElement.tsx index 8e608247e..4efbc4b5b 100644 --- a/src/stories/search-result-element/SearchResultElement.tsx +++ b/src/stories/search-result-element/SearchResultElement.tsx @@ -57,8 +57,8 @@ export const SearchResultElement = ({ status={"available"} /> @@ -68,9 +68,9 @@ export const SearchResultElement = ({ status={"unavailable"} />
From 6f3d519a8a7a601b0c36ac0847dc7abf5ef01bdb Mon Sep 17 00:00:00 2001 From: Kasper Garnaes Date: Tue, 31 May 2022 12:21:26 +0200 Subject: [PATCH 20/81] Remove default values from search result element component It is not something that we use in other components. Defaults come from Storybook anyway. --- src/stories/search-result-element/SearchResultElement.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/stories/search-result-element/SearchResultElement.tsx b/src/stories/search-result-element/SearchResultElement.tsx index 4efbc4b5b..245442dfe 100644 --- a/src/stories/search-result-element/SearchResultElement.tsx +++ b/src/stories/search-result-element/SearchResultElement.tsx @@ -13,9 +13,9 @@ export type SearchResultElementProps = { export const SearchResultElement = ({ heartFill, - title = "Title", - author = "Author", - year = "2022", + title, + author, + year, seriesNumber, series, }: SearchResultElementProps) => { From de7a877f4fd2d36ff175a38f0183a959bd257899 Mon Sep 17 00:00:00 2001 From: kasperbirch1 Date: Tue, 31 May 2022 12:55:43 +0200 Subject: [PATCH 21/81] Replace align-items with align-content. This makes sure to keep the flex spacing distance for accessibility --- src/stories/search-result-element/search-result-element.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/stories/search-result-element/search-result-element.scss b/src/stories/search-result-element/search-result-element.scss index ebffb28ba..c3bfa43b6 100644 --- a/src/stories/search-result-element/search-result-element.scss +++ b/src/stories/search-result-element/search-result-element.scss @@ -22,8 +22,8 @@ .search-result-element__availability { grid-column: 2; display: flex; + align-content: center; flex-wrap: wrap; - align-items: center; gap: 6px; @include breakpoint-s { @@ -37,7 +37,7 @@ } .search-result-element__title { - margin-top: 10px; + margin-top: 10px; @include breakpoint-s { margin-top: 16px; From 6ded4f93fde5c2373e2c7651347963537b73b1be Mon Sep 17 00:00:00 2001 From: kasperbirch1 Date: Tue, 31 May 2022 16:46:35 +0200 Subject: [PATCH 22/81] Change .scss name from IconFavourite to icon-favourite --- base.scss | 2 +- .../icon-favourite/{IconFavourite.scss => icon-favourite.scss} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename src/stories/icon/icon-favourite/{IconFavourite.scss => icon-favourite.scss} (100%) diff --git a/base.scss b/base.scss index c076e0719..b509d425c 100644 --- a/base.scss +++ b/base.scss @@ -27,7 +27,7 @@ @import "./src/stories/checkbox/checkbox"; @import "./src/stories/availability-label/availability-label"; @import "./src/stories/search-result-element/search-result-element"; -@import "./src/stories/icon/icon-favourite/IconFavourite"; +@import "./src/stories/icon/icon-favourite/icon-favourite"; @import "./src/stories/list-reservation/list-reservation"; @import "./src/stories/list-dashboard/list-dashboard"; diff --git a/src/stories/icon/icon-favourite/IconFavourite.scss b/src/stories/icon/icon-favourite/icon-favourite.scss similarity index 100% rename from src/stories/icon/icon-favourite/IconFavourite.scss rename to src/stories/icon/icon-favourite/icon-favourite.scss From 2237d14c135646ad457743d2d73b56c36d756db9 Mon Sep 17 00:00:00 2001 From: kasperbirch1 Date: Wed, 1 Jun 2022 13:06:53 +0200 Subject: [PATCH 23/81] Move favourite svg size control to css insted of inlinline values --- src/stories/icon/icon-favourite/IconFavourite.tsx | 2 -- src/stories/icon/icon-favourite/icon-favourite.scss | 2 ++ 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/stories/icon/icon-favourite/IconFavourite.tsx b/src/stories/icon/icon-favourite/IconFavourite.tsx index 93d0b6d2e..5424dc996 100644 --- a/src/stories/icon/icon-favourite/IconFavourite.tsx +++ b/src/stories/icon/icon-favourite/IconFavourite.tsx @@ -8,8 +8,6 @@ export const IconFavourite = ({ fill }: IconFavouriteProps) => { return ( Date: Wed, 1 Jun 2022 13:08:32 +0200 Subject: [PATCH 24/81] Add comments --- src/stories/icon/icon-favourite/IconFavourite.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/stories/icon/icon-favourite/IconFavourite.tsx b/src/stories/icon/icon-favourite/IconFavourite.tsx index 5424dc996..b3de1be13 100644 --- a/src/stories/icon/icon-favourite/IconFavourite.tsx +++ b/src/stories/icon/icon-favourite/IconFavourite.tsx @@ -4,6 +4,7 @@ export type IconFavouriteProps = { export const IconFavourite = ({ fill }: IconFavouriteProps) => { // This svg is a copy from public/icons/basic/icon-heart.svg. + // If you find out it no longer matches the original file, please update it // It is made as inline svg to be able to change fill value from props return ( Date: Wed, 1 Jun 2022 13:09:54 +0200 Subject: [PATCH 25/81] Move defaultValue to argTypes for consistency --- src/stories/icon/icon-favourite/IconFavourite.stories.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/stories/icon/icon-favourite/IconFavourite.stories.tsx b/src/stories/icon/icon-favourite/IconFavourite.stories.tsx index b1eb53d39..aafaca5ea 100644 --- a/src/stories/icon/icon-favourite/IconFavourite.stories.tsx +++ b/src/stories/icon/icon-favourite/IconFavourite.stories.tsx @@ -18,6 +18,7 @@ export default { argTypes: { fill: { control: "boolean", + defaultValue: true, }, }, } as ComponentMeta; @@ -27,6 +28,4 @@ const Template: ComponentStory = (args) => ( ); export const favourite = Template.bind({}); -favourite.args = { - fill: true, -}; +favourite.args = {}; From f5435f05b75ac92b78da3848596f210d3bf5ece5 Mon Sep 17 00:00:00 2001 From: kasperbirch1 Date: Wed, 1 Jun 2022 13:29:16 +0200 Subject: [PATCH 26/81] Remove unnecessary jsx { } --- .../SearchResultElement.tsx | 50 +++++++++---------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/src/stories/search-result-element/SearchResultElement.tsx b/src/stories/search-result-element/SearchResultElement.tsx index 245442dfe..929f6ae8c 100644 --- a/src/stories/search-result-element/SearchResultElement.tsx +++ b/src/stories/search-result-element/SearchResultElement.tsx @@ -23,10 +23,10 @@ export const SearchResultElement = ({
@@ -49,30 +49,30 @@ export const SearchResultElement = ({

{title}

{`Af ${author} (${year})`}

-
+
- - + + - - -
+ + +
); }; From 8331430ced7025a316fc5197671fe0c11daf1041 Mon Sep 17 00:00:00 2001 From: kasperbirch1 Date: Wed, 1 Jun 2022 13:40:30 +0200 Subject: [PATCH 27/81] Add white background color and hover shadow to search result element --- src/stories/search-result-element/search-result-element.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/stories/search-result-element/search-result-element.scss b/src/stories/search-result-element/search-result-element.scss index c3bfa43b6..7097d1c9d 100644 --- a/src/stories/search-result-element/search-result-element.scss +++ b/src/stories/search-result-element/search-result-element.scss @@ -1,4 +1,5 @@ .search-result-element { + background-color: #fff; padding: 16px 24px; display: grid; grid-template-columns: min-content 1fr; @@ -9,6 +10,10 @@ padding: 24px; grid-template-columns: min-content max-content 1fr; } + + &:hover { + filter: drop-shadow(0px 4px 20px rgba(72, 72, 72, 0.1)); + } } .search-result-element__cover { From 5dbe2b58b020659d24c72b46968958a1a921466f Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Wed, 1 Jun 2022 14:17:57 +0200 Subject: [PATCH 28/81] Add props type to the AutosuggestText.stories We do this already, in order to gain Typescript type definition. I just oversaw it when I was making the stories. I also renamed the definition of the prop type in the component itself, to be more consistent accross the project. --- src/stories/autosuggest-text/AutosuggestText.stories.tsx | 4 ++-- src/stories/autosuggest-text/AutosuggestText.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/stories/autosuggest-text/AutosuggestText.stories.tsx b/src/stories/autosuggest-text/AutosuggestText.stories.tsx index b866271a7..c86459340 100644 --- a/src/stories/autosuggest-text/AutosuggestText.stories.tsx +++ b/src/stories/autosuggest-text/AutosuggestText.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta, ComponentStory } from "@storybook/react"; import { withDesign } from "storybook-addon-designs"; -import { AutosuggestText } from "./AutosuggestText"; +import { AutosuggestText, AutosuggestTextProps } from "./AutosuggestText"; export default { title: "Components / Autosuggest - Text", @@ -16,7 +16,7 @@ export default { parameters: {}, } as ComponentMeta; -const Template: ComponentStory = (args) => ( +const Template: ComponentStory = (args: AutosuggestTextProps) => ( // apart from SuggestText, everything else is here just for the story context // SuggestText style is directly dependent on the header and search field styling <> diff --git a/src/stories/autosuggest-text/AutosuggestText.tsx b/src/stories/autosuggest-text/AutosuggestText.tsx index 0c9053ad4..23c8e6c88 100644 --- a/src/stories/autosuggest-text/AutosuggestText.tsx +++ b/src/stories/autosuggest-text/AutosuggestText.tsx @@ -1,8 +1,8 @@ -export type AutosuggestTextType = { +export type AutosuggestTextProps = { items: string[] } -export const AutosuggestText = (props: AutosuggestTextType) => { +export const AutosuggestText = (props: AutosuggestTextProps) => { const { items } = props; return (
    From e494f61bee0dd3e2a3e1b95b04c69c804c0e8865 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Wed, 1 Jun 2022 14:20:42 +0200 Subject: [PATCH 29/81] Make input placeholder in the header component adjustable in storybook As the input field will receive the placeholder text as a prop in the real react app, it is advantageous to be able to adjust this in storybook. --- src/stories/header/Header.stories.tsx | 3 +++ src/stories/header/Header.tsx | 5 +++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/stories/header/Header.stories.tsx b/src/stories/header/Header.stories.tsx index f6909bf13..2b98c6800 100644 --- a/src/stories/header/Header.stories.tsx +++ b/src/stories/header/Header.stories.tsx @@ -18,6 +18,9 @@ export default { username: { defaultValue: "Christine", }, + inputPlaceholder: { + defaultValue: "Søg blandt bibliotekets materialer", + } }, parameters: { design: { diff --git a/src/stories/header/Header.tsx b/src/stories/header/Header.tsx index 2329034c5..cd4338982 100644 --- a/src/stories/header/Header.tsx +++ b/src/stories/header/Header.tsx @@ -6,10 +6,11 @@ export type HeaderProps = { signedIn: boolean; haveNotification: boolean; username: string; + inputPlaceholder: string; }; export const Header = (props: HeaderProps) => { - const { signedIn, haveNotification, username } = props; + const { signedIn, haveNotification, username, inputPlaceholder } = props; useEffect(() => { require("./initheader"); @@ -94,7 +95,7 @@ export const Header = (props: HeaderProps) => { Date: Wed, 1 Jun 2022 14:24:10 +0200 Subject: [PATCH 30/81] Change width and spacing for search result element Before, it did not fit with the design from figma --- .../search-result-element/search-result-element.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/stories/search-result-element/search-result-element.scss b/src/stories/search-result-element/search-result-element.scss index 7097d1c9d..89b1ab23b 100644 --- a/src/stories/search-result-element/search-result-element.scss +++ b/src/stories/search-result-element/search-result-element.scss @@ -3,12 +3,13 @@ padding: 16px 24px; display: grid; grid-template-columns: min-content 1fr; - gap: 16px; + gap: 22px 16px; @include breakpoint-s { - gap: 24px; + height: 184px; + gap: 0; padding: 24px; - grid-template-columns: min-content max-content 1fr; + grid-template-columns: min-content 407px 1fr; } &:hover { @@ -21,6 +22,7 @@ @include breakpoint-s { grid-row: auto; + margin-right: 24px; } } @@ -33,6 +35,7 @@ @include breakpoint-s { grid-column: 3; + margin-left: 90px; } } From eed1057d4111a5d226267e6d13f5d4fa8b0526d8 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Wed, 1 Jun 2022 14:24:30 +0200 Subject: [PATCH 31/81] Comply with BEM css structuring for the autosuggest-text component The container class before looked like a modifier (--container), and needed to be fixed. BEM structure - http://getbem.com/introduction/ --- .../AutosuggestText.stories.tsx | 2 +- .../autosuggest-text/AutosuggestText.tsx | 4 +-- .../autosuggest-text/autosuggest-text.scss | 29 +++++++++---------- 3 files changed, 16 insertions(+), 19 deletions(-) diff --git a/src/stories/autosuggest-text/AutosuggestText.stories.tsx b/src/stories/autosuggest-text/AutosuggestText.stories.tsx index c86459340..60fdccdf1 100644 --- a/src/stories/autosuggest-text/AutosuggestText.stories.tsx +++ b/src/stories/autosuggest-text/AutosuggestText.stories.tsx @@ -51,4 +51,4 @@ const Template: ComponentStory = (args: AutosuggestTextP ); -export const TextSuggestion = Template.bind({}); \ No newline at end of file +export const TextSuggestion = Template.bind({}); diff --git a/src/stories/autosuggest-text/AutosuggestText.tsx b/src/stories/autosuggest-text/AutosuggestText.tsx index 23c8e6c88..9cd0268c5 100644 --- a/src/stories/autosuggest-text/AutosuggestText.tsx +++ b/src/stories/autosuggest-text/AutosuggestText.tsx @@ -5,10 +5,10 @@ export type AutosuggestTextProps = { export const AutosuggestText = (props: AutosuggestTextProps) => { const { items } = props; return ( -
      +
        {items.map((item) => { return ( -
      • +
      • {item}
        • ) diff --git a/src/stories/autosuggest-text/autosuggest-text.scss b/src/stories/autosuggest-text/autosuggest-text.scss index bee287d79..e4e089f42 100644 --- a/src/stories/autosuggest-text/autosuggest-text.scss +++ b/src/stories/autosuggest-text/autosuggest-text.scss @@ -1,20 +1,17 @@ -.suggest-text { - - &--container { - background-color: $c-global-primary; - outline: 1px solid $c-global-tertiary-1; - position: absolute; - left: 0; - right: 0; - top: calc(100% + 2px); - padding-bottom: 30px; +.autosuggest-text-container { + background-color: $c-global-primary; + outline: 1px solid $c-global-tertiary-1; + position: absolute; + left: 0; + right: 0; + top: calc(100% + 2px); + padding-bottom: 30px; - @include breakpoint-m { - padding-top: 17px; - } + @include breakpoint-m { + padding-top: 17px; } - - &--item { + + &__item { height: 40px; display: flex; align-items: center; @@ -25,4 +22,4 @@ cursor: pointer; } } -} \ No newline at end of file +} From fd0e25b7a35abc1ca5a26e343b8f025e5b7ff1ea Mon Sep 17 00:00:00 2001 From: Kasper Garnaes Date: Thu, 2 Jun 2022 10:45:23 +0200 Subject: [PATCH 32/81] Document process for authenticating when using the NPM package This somewhat duplicates what is already available in the GitHub documentation but what scopes are actually required is not documented and it can be handy to also have the direct link with the scopes handy. --- README.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/README.md b/README.md index 50fdb6fa8..03c1c4ea8 100644 --- a/README.md +++ b/README.md @@ -117,6 +117,28 @@ styles and icons. You can find the HTML output for a given story under the HTML tab inside storybook. +### NPM package + +[The GitHub NPM package registry requires authentication if you are to access +packages there](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#authenticating-with-a-personal-access-token). + +Consequently, if you want to use the design system as an NPM package or if you +use a project that depends on the design system as an NPM package you must +authenticate: + +1. [Create a GitHub token with the required scopes: `repo` and `read:packages`](https://github.com/settings/tokens/new?description=npm&scopes=repo,read:packages) +2. Run `npm login --registry=https://npm.pkg.github.com` +3. Enter the following information: + +```shell +> Username: [Your GitHub username] +> Password: [Your GitHub token] +> Email: [An email address used with your GitHub account] +``` + +Note that you will need to reauthenticate when your personal access token +expires. + ## Deployment The project is getting rebuild on pushes to every branch and every tag. In From c876b98ce8ed746f06d320cdc039d208fcbe6334 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Thu, 2 Jun 2022 15:41:35 +0200 Subject: [PATCH 33/81] Do not stack two wrapper divs over each other in the header component This breaks the design, and thus we got rid of one of the wrapper divs. --- src/stories/header/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/header/Header.tsx b/src/stories/header/Header.tsx index cd4338982..0d0ec07c1 100644 --- a/src/stories/header/Header.tsx +++ b/src/stories/header/Header.tsx @@ -89,7 +89,7 @@ export const Header = (props: HeaderProps) => {
-
+
Date: Thu, 2 Jun 2022 15:48:14 +0200 Subject: [PATCH 34/81] Make checkbox support keyboard navigation To be accessible we need checkboxes to support keyboard navigation so users can use tab to select a checkbox and space to toggle it. This is not possible in the current solution because it uses visibility hidden to hide the actual checkbox while showing one that follows the design. According to the following article the proper way to do this is to minimise the size of the checkbox instead. https://www.a11ymatters.com/pattern/checkbox/#using-css-and-background-images --- src/stories/checkbox/checkbox.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/stories/checkbox/checkbox.scss b/src/stories/checkbox/checkbox.scss index b5daadc99..e6db884dc 100644 --- a/src/stories/checkbox/checkbox.scss +++ b/src/stories/checkbox/checkbox.scss @@ -1,6 +1,11 @@ .checkbox__input { position: absolute; - visibility: hidden; + clip: rect(1px, 1px, 1px, 1px); + padding: 0; + border: 0; + height: 1px; + width: 1px; + overflow: hidden; } .checkbox__label { From b2b198acfbe02e5a844e12d390ce94c891a7cfed Mon Sep 17 00:00:00 2001 From: Kasper Garnaes Date: Fri, 3 Jun 2022 08:58:16 +0200 Subject: [PATCH 35/81] Add story showing multiple checkboxes This makes it easier to test keyboard navigation. --- src/stories/checkbox/Checkbox.stories.tsx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/stories/checkbox/Checkbox.stories.tsx b/src/stories/checkbox/Checkbox.stories.tsx index 14fd4ad40..2581fb5d0 100644 --- a/src/stories/checkbox/Checkbox.stories.tsx +++ b/src/stories/checkbox/Checkbox.stories.tsx @@ -10,7 +10,7 @@ export default { argTypes: { // We disable the isChecked control, since it is not possible to // get the states from the React component to work with Storybook controls. - isChecked: { + isChecked: { control: { disable: true } @@ -34,3 +34,20 @@ Unchecked.args = { isChecked: false, label: "Toggle this checkbox", }; + +// Show multiple checkboxes to make it easier to test keyboard navigation. +const Several: ComponentStory = (args) => ( + <> + { [1, 2, 3, 4, 5].map((value) => { + // Append a number to make it easier to distinguish between each entry. + const elementArgs = {...args, label: `${args.label} ${value}` } + return + })} + +); + +export const Multiple = Several.bind({}); +Multiple.args = { + isChecked: false, + label: "Checkbox", +} From abe82c07eac841b3ca66fac04b77afd797c394c1 Mon Sep 17 00:00:00 2001 From: Kasper Garnaes Date: Fri, 3 Jun 2022 08:59:16 +0200 Subject: [PATCH 36/81] Add temporary design of focused checkboxes This makes it easier to test keyboard navigation. The border radius around elements is removed to create a rectangular focuswhich resembles other boxes in the design. It was not used anywhere else. We should talk to the designers to determine a proper design here. --- src/stories/checkbox/checkbox.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/stories/checkbox/checkbox.scss b/src/stories/checkbox/checkbox.scss index e6db884dc..8835adc0b 100644 --- a/src/stories/checkbox/checkbox.scss +++ b/src/stories/checkbox/checkbox.scss @@ -12,7 +12,6 @@ user-select: none; cursor: pointer; padding: 6px 8px; - border-radius: 6px; overflow: hidden; transition: all 0.3s ease; display: flex; @@ -66,6 +65,13 @@ } } +.checkbox__input:focus + .checkbox__label { + // TODO: Determine a proper design for elements in focus. + // This is a temporary solution to make it easier to test keyboard navigation. + outline: solid 1px $c-text-secondary-gray; + outline-offset: 0; +} + @keyframes zoom-in-out { 50% { transform: scale(0.9); From 93073e364ca4d97619c50349dd45b87aa9a26975 Mon Sep 17 00:00:00 2001 From: Kasper Garnaes Date: Fri, 3 Jun 2022 09:01:02 +0200 Subject: [PATCH 37/81] Specify Docker compose files when starting a development environment Otherwise NFS support will not be added and chokidar polling not defined. This will result in poorer filesystem performance. --- Taskfile.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Taskfile.yml b/Taskfile.yml index 97c47191b..e4985d1ec 100644 --- a/Taskfile.yml +++ b/Taskfile.yml @@ -28,7 +28,7 @@ tasks: summary: Install and run docker compose cmds: - task dev:install - - docker compose up --detach + - docker compose {{ .DOCKER_COMPOSE_FILES }} up --detach dev:stop: summary: Stop docker compose environment From e205aa172c2eee38251991da6d8e11946273aaa0 Mon Sep 17 00:00:00 2001 From: kasperbirch1 Date: Thu, 2 Jun 2022 11:49:08 +0200 Subject: [PATCH 38/81] Add and show IconArrow on SearchResultElement hover --- .../SearchResultElement.tsx | 5 ++++- .../search-result-element.scss | 19 ++++++++++++++++++- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/src/stories/search-result-element/SearchResultElement.tsx b/src/stories/search-result-element/SearchResultElement.tsx index 929f6ae8c..8f5aa1759 100644 --- a/src/stories/search-result-element/SearchResultElement.tsx +++ b/src/stories/search-result-element/SearchResultElement.tsx @@ -1,6 +1,7 @@ import { AvailabilityLabel } from "../availability-label/AvailabilityLabel"; import { IconFavourite } from "../icon/icon-favourite/IconFavourite"; import { Material } from "../material/Material"; +import { ReactComponent as ArrowSmallRight } from "../../icons/arrow-ui/icon-arrow-ui-small-right.svg"; export type SearchResultElementProps = { heartFill?: boolean; @@ -20,7 +21,7 @@ export const SearchResultElement = ({ series, }: SearchResultElementProps) => { return ( -
+
+ +
); }; diff --git a/src/stories/search-result-element/search-result-element.scss b/src/stories/search-result-element/search-result-element.scss index 89b1ab23b..62c3d4527 100644 --- a/src/stories/search-result-element/search-result-element.scss +++ b/src/stories/search-result-element/search-result-element.scss @@ -9,12 +9,29 @@ height: 184px; gap: 0; padding: 24px; - grid-template-columns: min-content 407px 1fr; + grid-template-columns: min-content 407px 1fr max-content; } &:hover { filter: drop-shadow(0px 4px 20px rgba(72, 72, 72, 0.1)); } + + // Hide arrow + & > svg { + width: 35px; + visibility: hidden; + opacity: 0; + margin-right: 20px; + } + // Show arrow on hover + &:hover svg { + @include breakpoint-s { + visibility: visible; + opacity: 1; + align-self: center; + justify-self: end; + } + } } .search-result-element__cover { From 530be3df9ce8b29333b8c894eef7e33d87c9c863 Mon Sep 17 00:00:00 2001 From: kasperbirch1 Date: Fri, 3 Jun 2022 11:26:57 +0200 Subject: [PATCH 39/81] Change name from SearchResultElement to SearchResultItem --- base.scss | 2 +- .../SearchResultItem.stories.tsx} | 12 ++++++------ .../SearchResultItem.tsx} | 18 +++++++++--------- .../search-result-item.scss} | 10 +++++----- 4 files changed, 21 insertions(+), 21 deletions(-) rename src/stories/{search-result-element/SearchResultElement.stories.tsx => search-result-item/SearchResultItem.stories.tsx} (75%) rename src/stories/{search-result-element/SearchResultElement.tsx => search-result-item/SearchResultItem.tsx} (78%) rename src/stories/{search-result-element/search-result-element.scss => search-result-item/search-result-item.scss} (86%) diff --git a/base.scss b/base.scss index b509d425c..705d501dc 100644 --- a/base.scss +++ b/base.scss @@ -26,7 +26,7 @@ @import "./src/stories/counter/counter"; @import "./src/stories/checkbox/checkbox"; @import "./src/stories/availability-label/availability-label"; -@import "./src/stories/search-result-element/search-result-element"; +@import "./src/stories/search-result-item/search-result-item"; @import "./src/stories/icon/icon-favourite/icon-favourite"; @import "./src/stories/list-reservation/list-reservation"; diff --git a/src/stories/search-result-element/SearchResultElement.stories.tsx b/src/stories/search-result-item/SearchResultItem.stories.tsx similarity index 75% rename from src/stories/search-result-element/SearchResultElement.stories.tsx rename to src/stories/search-result-item/SearchResultItem.stories.tsx index 78ce9298d..53207aa35 100644 --- a/src/stories/search-result-element/SearchResultElement.stories.tsx +++ b/src/stories/search-result-item/SearchResultItem.stories.tsx @@ -1,10 +1,10 @@ import { withDesign } from "storybook-addon-designs"; import { ComponentMeta, ComponentStory } from "@storybook/react"; -import { SearchResultElement } from "./SearchResultElement"; +import { SearchResultItem } from "./SearchResultItem"; export default { - title: "Components / Search Result Element", - component: SearchResultElement, + title: "Components / Search Result Item", + component: SearchResultItem, decorators: [withDesign], parameters: { design: { @@ -39,10 +39,10 @@ export default { defaultValue: "Små mennesker, store drømme", }, }, -} as ComponentMeta; +} as ComponentMeta; -const Template: ComponentStory = (args) => { - return ; +const Template: ComponentStory = (args) => { + return ; }; export const Item = Template.bind({}); diff --git a/src/stories/search-result-element/SearchResultElement.tsx b/src/stories/search-result-item/SearchResultItem.tsx similarity index 78% rename from src/stories/search-result-element/SearchResultElement.tsx rename to src/stories/search-result-item/SearchResultItem.tsx index 8f5aa1759..e73c62f9d 100644 --- a/src/stories/search-result-element/SearchResultElement.tsx +++ b/src/stories/search-result-item/SearchResultItem.tsx @@ -3,7 +3,7 @@ import { IconFavourite } from "../icon/icon-favourite/IconFavourite"; import { Material } from "../material/Material"; import { ReactComponent as ArrowSmallRight } from "../../icons/arrow-ui/icon-arrow-ui-small-right.svg"; -export type SearchResultElementProps = { +export type SearchResultItemProps = { heartFill?: boolean; title: string; author: string; @@ -12,17 +12,17 @@ export type SearchResultElementProps = { series?: string; }; -export const SearchResultElement = ({ +export const SearchResultItem = ({ heartFill, title, author, year, seriesNumber, series, -}: SearchResultElementProps) => { +}: SearchResultItemProps) => { return ( -
-
+
+
-
-
+
+
{seriesNumber && ( @@ -48,10 +48,10 @@ export const SearchResultElement = ({
)}
-

{title}

+

{title}

{`Af ${author} (${year})`}

-
+
Date: Fri, 3 Jun 2022 12:27:22 +0200 Subject: [PATCH 40/81] Add support for specifying an aria label for checkboxes Not all checkboxes have a visible label in the design. However this is required for accessibility reasons. To provide proper text to help screen readers we add support for the optional aria-label property. --- src/stories/checkbox/Checkbox.stories.tsx | 5 +++++ src/stories/checkbox/Checkbox.tsx | 2 ++ 2 files changed, 7 insertions(+) diff --git a/src/stories/checkbox/Checkbox.stories.tsx b/src/stories/checkbox/Checkbox.stories.tsx index 2581fb5d0..8f5ea813c 100644 --- a/src/stories/checkbox/Checkbox.stories.tsx +++ b/src/stories/checkbox/Checkbox.stories.tsx @@ -8,6 +8,11 @@ export default { component: Checkbox, decorators: [withDesign], argTypes: { + ariaLabel: { + control: { + type: "text", + } + }, // We disable the isChecked control, since it is not possible to // get the states from the React component to work with Storybook controls. isChecked: { diff --git a/src/stories/checkbox/Checkbox.tsx b/src/stories/checkbox/Checkbox.tsx index 2ab6f9c96..4738f807b 100644 --- a/src/stories/checkbox/Checkbox.tsx +++ b/src/stories/checkbox/Checkbox.tsx @@ -3,6 +3,7 @@ import React, { useState, useRef } from "react"; export type CheckboxProps = { isChecked: boolean; label?: string; + ariaLabel?: string callback?: (isChecked: boolean) => void; }; @@ -23,6 +24,7 @@ export const Checkbox = (props: CheckboxProps) => { id={checkboxId.current} className="checkbox__input" type="checkbox" + aria-label={props.ariaLabel} checked={isChecked} onClick={handleClick} /> From 9d8fa296f2e2ae2a7bacf10b350a2caa8c576c4f Mon Sep 17 00:00:00 2001 From: kasperbirch1 Date: Fri, 3 Jun 2022 14:27:46 +0200 Subject: [PATCH 41/81] Add cursor pointer to search-result-item --- src/stories/search-result-item/search-result-item.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/stories/search-result-item/search-result-item.scss b/src/stories/search-result-item/search-result-item.scss index b36ff0aa3..bc97ee02a 100644 --- a/src/stories/search-result-item/search-result-item.scss +++ b/src/stories/search-result-item/search-result-item.scss @@ -4,6 +4,7 @@ display: grid; grid-template-columns: min-content 1fr; gap: 22px 16px; + cursor: pointer; @include breakpoint-s { height: 184px; From e75a3f6107cbbe21b3e6bfd892b92a8bdcd86cf5 Mon Sep 17 00:00:00 2001 From: kasperbirch1 Date: Fri, 3 Jun 2022 14:30:12 +0200 Subject: [PATCH 42/81] set the same font size for meta text on search result item --- src/stories/search-result-item/SearchResultItem.tsx | 4 ++-- src/stories/search-result-item/search-result-item.scss | 5 +++++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/stories/search-result-item/SearchResultItem.tsx b/src/stories/search-result-item/SearchResultItem.tsx index e73c62f9d..82fe604cd 100644 --- a/src/stories/search-result-item/SearchResultItem.tsx +++ b/src/stories/search-result-item/SearchResultItem.tsx @@ -39,8 +39,8 @@ export const SearchResultItem = ({ {`Nr. ${seriesNumber} `} {series && ( <> - i serien{" "} - + i serien + {series} diff --git a/src/stories/search-result-item/search-result-item.scss b/src/stories/search-result-item/search-result-item.scss index bc97ee02a..772333c30 100644 --- a/src/stories/search-result-item/search-result-item.scss +++ b/src/stories/search-result-item/search-result-item.scss @@ -60,6 +60,11 @@ .search-result-item__meta { display: flex; gap: 10px; + + span, + a { + font-size: 12px; + } } .search-result-item__title { From 7a651215532e42c5be47a86acac146efcab4e32c Mon Sep 17 00:00:00 2001 From: Kasper Garnaes Date: Fri, 3 Jun 2022 12:28:08 +0200 Subject: [PATCH 43/81] Add aria label for selectable list materials This is required for accessibility reasons as the checkbox does not have a label. --- src/stories/list-materials/ListMaterials.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/list-materials/ListMaterials.tsx b/src/stories/list-materials/ListMaterials.tsx index b73cabe1c..3378c986d 100644 --- a/src/stories/list-materials/ListMaterials.tsx +++ b/src/stories/list-materials/ListMaterials.tsx @@ -26,7 +26,7 @@ export const ListMaterials = (props: ListMaterialsProps) => { > {props.canBeRenewed && (
- +
)}
From bb42b8bec8400871d9e6bc4293e5b0f542d46e95 Mon Sep 17 00:00:00 2001 From: kasperbirch1 Date: Tue, 7 Jun 2022 07:18:45 +0200 Subject: [PATCH 44/81] Fix stylelint comments --- src/stories/search-result-item/search-result-item.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/stories/search-result-item/search-result-item.scss b/src/stories/search-result-item/search-result-item.scss index 772333c30..3c6c07d37 100644 --- a/src/stories/search-result-item/search-result-item.scss +++ b/src/stories/search-result-item/search-result-item.scss @@ -14,11 +14,11 @@ } &:hover { - filter: drop-shadow(0px 4px 20px rgba(72, 72, 72, 0.1)); + filter: drop-shadow(0 4px 20px rgba(72, 72, 72, 0.1)); } // Hide arrow - & > svg { + > svg { width: 35px; visibility: hidden; opacity: 0; From 9f956365d78b333ed3209781ec7beb5869fb2fb1 Mon Sep 17 00:00:00 2001 From: kasperbirch1 Date: Mon, 13 Jun 2022 10:52:49 +0200 Subject: [PATCH 45/81] Fix width for search-result-item__text --- src/stories/search-result-item/search-result-item.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/search-result-item/search-result-item.scss b/src/stories/search-result-item/search-result-item.scss index 3c6c07d37..fb1911873 100644 --- a/src/stories/search-result-item/search-result-item.scss +++ b/src/stories/search-result-item/search-result-item.scss @@ -10,7 +10,7 @@ height: 184px; gap: 0; padding: 24px; - grid-template-columns: min-content 407px 1fr max-content; + grid-template-columns: min-content minmax(min-content, 407px) 1fr max-content; } &:hover { From 6400a03a3188dfbe4484fa2509c211d9636e009a Mon Sep 17 00:00:00 2001 From: kasperbirch1 Date: Mon, 13 Jun 2022 11:14:19 +0200 Subject: [PATCH 46/81] Fix unwanted line breaks for availability-label --- src/stories/availability-label/availability-label.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/stories/availability-label/availability-label.scss b/src/stories/availability-label/availability-label.scss index c0ed59fd4..5f49b6b86 100644 --- a/src/stories/availability-label/availability-label.scss +++ b/src/stories/availability-label/availability-label.scss @@ -6,6 +6,7 @@ width: auto; height: 25px; background-color: $c-global-primary; + white-space: nowrap; &--selected { border: 1px solid $c-text-primary-black; From c4e4aa8c374427f3aab112ebfe2028dceef3df01 Mon Sep 17 00:00:00 2001 From: kasperbirch1 Date: Tue, 14 Jun 2022 11:05:13 +0200 Subject: [PATCH 47/81] Add button-favourite This is a component that turns Icon Favorite into a button for better accessibility --- base.scss | 1 + .../ButtonFavourite.stories.tsx | 31 +++++++++++++++++++ .../button-favourite/ButtonFavourite.tsx | 13 ++++++++ .../button-favourite/button-favourite.scss | 6 ++++ 4 files changed, 51 insertions(+) create mode 100644 src/stories/button-favourite/ButtonFavourite.stories.tsx create mode 100644 src/stories/button-favourite/ButtonFavourite.tsx create mode 100644 src/stories/button-favourite/button-favourite.scss diff --git a/base.scss b/base.scss index b41962243..387cea6ce 100644 --- a/base.scss +++ b/base.scss @@ -29,6 +29,7 @@ @import "./src/stories/search-result-item/search-result-item"; @import "./src/stories/icon/icon-favourite/icon-favourite"; @import "./src/stories/autosuggest-text/autosuggest-text"; +@import "./src/stories/button-favourite/button-favourite"; @import "./src/stories/list-reservation/list-reservation"; @import "./src/stories/list-dashboard/list-dashboard"; diff --git a/src/stories/button-favourite/ButtonFavourite.stories.tsx b/src/stories/button-favourite/ButtonFavourite.stories.tsx new file mode 100644 index 000000000..b6ae34af9 --- /dev/null +++ b/src/stories/button-favourite/ButtonFavourite.stories.tsx @@ -0,0 +1,31 @@ +import { ComponentStory, ComponentMeta } from "@storybook/react"; +import { withDesign } from "storybook-addon-designs"; +import { ButtonFavourite } from "./ButtonFavourite"; + +type ButtonFavouriteProps = typeof ButtonFavourite; + +export default { + title: "Components / Button Favourite", + component: ButtonFavourite, + decorators: [withDesign], + parameters: { + design: { + type: "figma", + url: + "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?node-id=656%3A5407", + }, + }, + argTypes: { + fill: { + control: "boolean", + defaultValue: true, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +export const favourite = Template.bind({}); +favourite.args = {}; diff --git a/src/stories/button-favourite/ButtonFavourite.tsx b/src/stories/button-favourite/ButtonFavourite.tsx new file mode 100644 index 000000000..1b3b90d39 --- /dev/null +++ b/src/stories/button-favourite/ButtonFavourite.tsx @@ -0,0 +1,13 @@ +import { IconFavourite } from "../icon/icon-favourite/IconFavourite"; + +interface ButtonFavouriteProps { + fill?: boolean; +} + +export const ButtonFavourite = ({ fill }: ButtonFavouriteProps) => { + return ( + + ); +}; diff --git a/src/stories/button-favourite/button-favourite.scss b/src/stories/button-favourite/button-favourite.scss new file mode 100644 index 000000000..02bf8df11 --- /dev/null +++ b/src/stories/button-favourite/button-favourite.scss @@ -0,0 +1,6 @@ +.button-favourite { + background-color: transparent; + border: transparent; + padding: 0; + margin: 0; +} From 606bfb482e041deee8db21b2805c9e0f76fe4052 Mon Sep 17 00:00:00 2001 From: kasperbirch1 Date: Tue, 14 Jun 2022 11:07:46 +0200 Subject: [PATCH 48/81] Add accessibility for search-result-item Turns the component into a link and uses the new favorite button for better accessibility --- src/stories/search-result-item/SearchResultItem.tsx | 8 ++++---- src/stories/search-result-item/search-result-item.scss | 1 + 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/stories/search-result-item/SearchResultItem.tsx b/src/stories/search-result-item/SearchResultItem.tsx index 82fe604cd..79e505dca 100644 --- a/src/stories/search-result-item/SearchResultItem.tsx +++ b/src/stories/search-result-item/SearchResultItem.tsx @@ -1,7 +1,7 @@ import { AvailabilityLabel } from "../availability-label/AvailabilityLabel"; -import { IconFavourite } from "../icon/icon-favourite/IconFavourite"; import { Material } from "../material/Material"; import { ReactComponent as ArrowSmallRight } from "../../icons/arrow-ui/icon-arrow-ui-small-right.svg"; +import { ButtonFavourite } from "../button-favourite/ButtonFavourite"; export type SearchResultItemProps = { heartFill?: boolean; @@ -21,7 +21,7 @@ export const SearchResultItem = ({ series, }: SearchResultItemProps) => { return ( -
+
- + {seriesNumber && (
@@ -76,6 +76,6 @@ export const SearchResultItem = ({
-
+ ); }; diff --git a/src/stories/search-result-item/search-result-item.scss b/src/stories/search-result-item/search-result-item.scss index fb1911873..256e1c03a 100644 --- a/src/stories/search-result-item/search-result-item.scss +++ b/src/stories/search-result-item/search-result-item.scss @@ -5,6 +5,7 @@ grid-template-columns: min-content 1fr; gap: 22px 16px; cursor: pointer; + text-decoration: none; @include breakpoint-s { height: 184px; From dcc91d7916566761b75765ec20ceabba53357ffe Mon Sep 17 00:00:00 2001 From: Mikkel Jakobsen Date: Wed, 15 Jun 2022 20:14:59 +0200 Subject: [PATCH 49/81] Add nvrmrc param to setup-node tasks In order to freeze version. To prevent this problem: https://github.com/npm/cli/issues/4998 Also bump up setup-node to version 3 while we're at it. --- .github/workflows/a11y.yml | 4 ++-- .github/workflows/chromatic.yml | 4 ++-- .github/workflows/deployment.yml | 8 ++++---- .github/workflows/gh-pages.yml | 4 ++-- .github/workflows/lint.yml | 16 ++++++++-------- 5 files changed, 18 insertions(+), 18 deletions(-) diff --git a/.github/workflows/a11y.yml b/.github/workflows/a11y.yml index b24b20632..e703ae71c 100644 --- a/.github/workflows/a11y.yml +++ b/.github/workflows/a11y.yml @@ -11,9 +11,9 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - - uses: actions/setup-node@v2 + - uses: actions/setup-node@v3 with: - node-version: "16" + node-version-file: '.nvmrc' - run: npm ci - name: Compile styles diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index 10e95655b..5697cbee4 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -10,9 +10,9 @@ jobs: with: fetch-depth: 0 - - uses: actions/setup-node@v2 + - uses: actions/setup-node@v3 with: - node-version: "16" + node-version-file: '.nvmrc' - run: npm ci diff --git a/.github/workflows/deployment.yml b/.github/workflows/deployment.yml index 650387154..975e355eb 100644 --- a/.github/workflows/deployment.yml +++ b/.github/workflows/deployment.yml @@ -8,9 +8,9 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - - uses: actions/setup-node@v2 + - uses: actions/setup-node@v3 with: - node-version: "16" + node-version-file: '.nvmrc' - run: npm ci - name: Building @@ -41,9 +41,9 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - - uses: actions/setup-node@v2 + - uses: actions/setup-node@v3 with: - node-version: "16" + node-version-file: '.nvmrc' registry-url: "https://npm.pkg.github.com" scope: "@${{ github.repository_owner }}" diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml index 48b7d692a..315556fba 100644 --- a/.github/workflows/gh-pages.yml +++ b/.github/workflows/gh-pages.yml @@ -13,9 +13,9 @@ jobs: - uses: actions/checkout@v2 - name: Setup Node - uses: actions/setup-node@v2 + uses: actions/setup-node@v3 with: - node-version: "16" + node-version-file: '.nvmrc' - name: Cache dependencies uses: actions/cache@v2 diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 8446da23a..583a22570 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -11,9 +11,9 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - - uses: actions/setup-node@v2 + - uses: actions/setup-node@v3 with: - node-version: "16" + node-version-file: '.nvmrc' - run: npm ci - name: Run stylelint @@ -29,9 +29,9 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - - uses: actions/setup-node@v2 + - uses: actions/setup-node@v3 with: - node-version: "16" + node-version-file: '.nvmrc' - run: npm ci - name: Run eslint @@ -41,9 +41,9 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - - uses: actions/setup-node@v2 + - uses: actions/setup-node@v3 with: - node-version: "16" + node-version-file: '.nvmrc' - run: npm ci @@ -54,9 +54,9 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - - uses: actions/setup-node@v2 + - uses: actions/setup-node@v3 with: - node-version: "16" + node-version-file: '.nvmrc' - run: npm ci From 9d755488ece4131eecb7307560391835b5a302d7 Mon Sep 17 00:00:00 2001 From: Mikkel Jakobsen Date: Wed, 15 Jun 2022 20:15:56 +0200 Subject: [PATCH 50/81] Fix a11y on favourite btn --- src/stories/button-favourite/ButtonFavourite.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/button-favourite/ButtonFavourite.tsx b/src/stories/button-favourite/ButtonFavourite.tsx index 1b3b90d39..18f3dd388 100644 --- a/src/stories/button-favourite/ButtonFavourite.tsx +++ b/src/stories/button-favourite/ButtonFavourite.tsx @@ -6,7 +6,7 @@ interface ButtonFavouriteProps { export const ButtonFavourite = ({ fill }: ButtonFavouriteProps) => { return ( - ); From cbfc1ab4388bbb30502f25673dabbf9a86b86da4 Mon Sep 17 00:00:00 2001 From: Mikkel Jakobsen Date: Thu, 16 Jun 2022 09:44:15 +0200 Subject: [PATCH 51/81] Changing language on arialabel on the favourite btn --- src/stories/button-favourite/ButtonFavourite.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/button-favourite/ButtonFavourite.tsx b/src/stories/button-favourite/ButtonFavourite.tsx index 18f3dd388..ad301f25f 100644 --- a/src/stories/button-favourite/ButtonFavourite.tsx +++ b/src/stories/button-favourite/ButtonFavourite.tsx @@ -6,7 +6,7 @@ interface ButtonFavouriteProps { export const ButtonFavourite = ({ fill }: ButtonFavouriteProps) => { return ( - ); From a8ff15dafcc36366ca1c27360120557abe652784 Mon Sep 17 00:00:00 2001 From: Mikkel Jakobsen Date: Thu, 16 Jun 2022 10:00:09 +0200 Subject: [PATCH 52/81] Documenting definition of node version --- docker-compose.yml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docker-compose.yml b/docker-compose.yml index c99b4ccd4..3ae2c38f6 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -2,7 +2,9 @@ version: '3.7' services: node: - image: node:16 + # Remember to keep version updated with the .nvmrc file. + # The .nvmrc file is used in Github Actions and for "dockerless" development. + image: node:16.14.2 user: node init: true working_dir: /home/node/app From 8b04bf9d6f3aef335c7dfa6ea6656ea8c3d8846c Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Mon, 13 Jun 2022 11:51:59 +0200 Subject: [PATCH 53/81] Introduce a folder that will contain autosuggest material in the future --- src/stories/autosuggest-material/autosuggest-material.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 src/stories/autosuggest-material/autosuggest-material.md diff --git a/src/stories/autosuggest-material/autosuggest-material.md b/src/stories/autosuggest-material/autosuggest-material.md new file mode 100644 index 000000000..e57b9dea7 --- /dev/null +++ b/src/stories/autosuggest-material/autosuggest-material.md @@ -0,0 +1 @@ +This folder will hold the autosuggest material component. \ No newline at end of file From 22737dede79de69a7d188ee89c5703c35ee2210e Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Mon, 13 Jun 2022 16:52:59 +0200 Subject: [PATCH 54/81] Create a highlight class for autosuggest text item We need this class for simulating the hover effect when the user doesn't use a mouse. When they use up and down keys, the individual items should get highlighted just like on a hover effect with a mouse. --- src/stories/autosuggest-text/autosuggest-text.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/stories/autosuggest-text/autosuggest-text.scss b/src/stories/autosuggest-text/autosuggest-text.scss index e4e089f42..7b50337cd 100644 --- a/src/stories/autosuggest-text/autosuggest-text.scss +++ b/src/stories/autosuggest-text/autosuggest-text.scss @@ -22,4 +22,8 @@ cursor: pointer; } } + + &__item--highlight { + background-color: $c-global-secondary; + } } From 873faecd8e1d44bf73688be8ce4a8ab36a70b44d Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Wed, 15 Jun 2022 12:42:10 +0200 Subject: [PATCH 55/81] Add xsmall size option for Material component (cover picture) This size was not included to begin with, but exists in the figma design for the project. (https://www.figma.com/file/ETOZIfmgGS1HUfio57SOh7/S%C3%B8gning?node-id=4709%3A24976) --- src/stories/material/Material.tsx | 2 +- src/stories/material/material.scss | 12 ++++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/stories/material/Material.tsx b/src/stories/material/Material.tsx index 76d410bc9..b525a8a09 100644 --- a/src/stories/material/Material.tsx +++ b/src/stories/material/Material.tsx @@ -3,7 +3,7 @@ import clsx from "clsx"; export type MaterialProps = { url: string; animate: boolean; - size: "small" | "medium" | "large"; + size: "xsmall" | "small" | "medium" | "large"; tint?: "20" | "40" | "60" | "80" | "120"; }; diff --git a/src/stories/material/material.scss b/src/stories/material/material.scss index a37f78422..bd54cf11d 100644 --- a/src/stories/material/material.scss +++ b/src/stories/material/material.scss @@ -1,3 +1,5 @@ +$MATERIAL_XSMALL_MOBILE: 104px; +$MATERIAL_XSMALL_DESKTOP: 104px; $MATERIAL_SMALL_MOBILE: 104px; $MATERIAL_SMALL_DESKTOP: 137px; $MATERIAL_MEDIUM_MOBILE: 137px; @@ -19,6 +21,16 @@ $MATERIAL_LARGE_DESKTOP: 216px; object-fit: cover; } + &--xsmall { + aspect-ratio: 0.69; + height: $MATERIAL_XSMALL_MOBILE; + border-radius: 3px; + + @include breakpoint-s { + height: $MATERIAL_XSMALL_DESKTOP; + } + } + &--small { aspect-ratio: 0.69; height: $MATERIAL_SMALL_MOBILE; From 197dd726d9d24138c43c6d53ac9b60f6ec2ba3f2 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Wed, 15 Jun 2022 12:59:37 +0200 Subject: [PATCH 56/81] Generalize naming for autosug. container class & add highlight class The autosuggest class used to be called autosuggest-text-container, which implied that the container only holds autosuggest-text. Since it holds autosuggest-material and -topic, the naming without -text- makes the most sense. The -container suffix of the name is unnecessary word usage, and was removed as well. --focus suffix class was added to imitate hover effect for users that do not use the mouse. We need to be able to imitate the hover effect in order to indicate item that is currently in focus. --- .../autosuggest-text/AutosuggestText.tsx | 4 +-- .../autosuggest-text/autosuggest-text.scss | 31 ++++++++++--------- 2 files changed, 19 insertions(+), 16 deletions(-) diff --git a/src/stories/autosuggest-text/AutosuggestText.tsx b/src/stories/autosuggest-text/AutosuggestText.tsx index 9cd0268c5..610fb1fca 100644 --- a/src/stories/autosuggest-text/AutosuggestText.tsx +++ b/src/stories/autosuggest-text/AutosuggestText.tsx @@ -5,10 +5,10 @@ export type AutosuggestTextProps = { export const AutosuggestText = (props: AutosuggestTextProps) => { const { items } = props; return ( -
    +
      {items.map((item) => { return ( -
    • +
    • {item}
      • ) diff --git a/src/stories/autosuggest-text/autosuggest-text.scss b/src/stories/autosuggest-text/autosuggest-text.scss index 7b50337cd..b6d9ff62a 100644 --- a/src/stories/autosuggest-text/autosuggest-text.scss +++ b/src/stories/autosuggest-text/autosuggest-text.scss @@ -1,29 +1,32 @@ -.autosuggest-text-container { +.autosuggest { background-color: $c-global-primary; outline: 1px solid $c-global-tertiary-1; position: absolute; left: 0; right: 0; - top: calc(100% + 2px); - padding-bottom: 30px; + top: calc(100% + 1px); + padding-bottom: 10px; @include breakpoint-m { padding-top: 17px; } &__item { - height: 40px; - display: flex; - align-items: center; - padding: 0 23px; - &:hover { - background-color: $c-global-secondary; - cursor: pointer; - } - } + &--text { + height: 40px; + display: flex; + align-items: center; + padding: 0 23px; - &__item--highlight { - background-color: $c-global-secondary; + &:hover { + background-color: $c-global-secondary; + cursor: pointer; + } + + &--highlight { + background-color: $c-global-secondary; + } + } } } From b73f53d78246fdf48373999844be00cf9a19b2d0 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Wed, 15 Jun 2022 13:08:21 +0200 Subject: [PATCH 57/81] Add Autosuggestmaterial component, its story and styling to the project This commmit introduces the Autosuggest subcomponent - autosuggest-material. It shows up to three items as suggestions in the autosuggest dropdown with their cover art, author, work title and its release date. --- base.scss | 1 + .../AutosuggestMaterial.stories.tsx | 79 ++++++++++++++++++ .../AutosuggestMaterial.tsx | 40 +++++++++ .../autosuggest-material.md | 1 - .../autosuggest-material.scss | 81 +++++++++++++++++++ 5 files changed, 201 insertions(+), 1 deletion(-) create mode 100644 src/stories/autosuggest-material/AutosuggestMaterial.stories.tsx create mode 100644 src/stories/autosuggest-material/AutosuggestMaterial.tsx delete mode 100644 src/stories/autosuggest-material/autosuggest-material.md create mode 100644 src/stories/autosuggest-material/autosuggest-material.scss diff --git a/base.scss b/base.scss index 387cea6ce..7961714e6 100644 --- a/base.scss +++ b/base.scss @@ -30,6 +30,7 @@ @import "./src/stories/icon/icon-favourite/icon-favourite"; @import "./src/stories/autosuggest-text/autosuggest-text"; @import "./src/stories/button-favourite/button-favourite"; +@import "./src/stories/autosuggest-material/autosuggest-material"; @import "./src/stories/list-reservation/list-reservation"; @import "./src/stories/list-dashboard/list-dashboard"; diff --git a/src/stories/autosuggest-material/AutosuggestMaterial.stories.tsx b/src/stories/autosuggest-material/AutosuggestMaterial.stories.tsx new file mode 100644 index 000000000..e60f837d6 --- /dev/null +++ b/src/stories/autosuggest-material/AutosuggestMaterial.stories.tsx @@ -0,0 +1,79 @@ +import { ComponentMeta, ComponentStory } from "@storybook/react"; +import { withDesign } from "storybook-addon-designs"; +import { AutosuggestMaterial, AutosuggestMaterialProps } from "./AutosuggestMaterial"; + +export default { + title: "Components / Autosuggest - Material", + component: AutosuggestMaterial, + decorators: [withDesign], + argTypes: { + items: { + name: "Items", + defaultValue: [ + { + cover: "https://imgcdn.saxo.com/_9780345514400/0x500", + title: "I know why the caged bird sings", + author: "Maya Angelou", + year: "1969", + },{ + cover: "https://imgcdn.saxo.com/_9781616550417/0x500", + title: "The Legend of Zelda: Hyrule Historia", + author: "Patrick Thorpe, Michael Gombos, Takahiro Moriki, et al.", + year: "2013", + },{ + cover: "https://imgcdn.saxo.com/_9781449401160/0x500", + title: "5 very good reasons to punch a dolphin in the mouth and other useful guides", + author: "Matthew Inman", + year: "2010", + } + ], + control: { type: "array" } + } + }, + parameters: { + design: { + type: "figma", + url: + "https://www.figma.com/file/ETOZIfmgGS1HUfio57SOh7/S%C3%B8gning?node-id=4709%3A24976", + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args: AutosuggestMaterialProps) => ( + // Apart from AutosuggestMaterial, everything else is here just for the story + // context. AutosuggestMaterial style is directly dependent on the header, + // search field, and AutosuggestText styling. + // If you find out this context no longer represents reality, please adjust it. + <> +
      +
      +

      Context

      +
      +
      + +
      +
      + + search icon + +
      +
      +
      +
      +

      Context

      +
      +
      + +); + +export const MaterialSuggestion = Template.bind({}); diff --git a/src/stories/autosuggest-material/AutosuggestMaterial.tsx b/src/stories/autosuggest-material/AutosuggestMaterial.tsx new file mode 100644 index 000000000..40b19df91 --- /dev/null +++ b/src/stories/autosuggest-material/AutosuggestMaterial.tsx @@ -0,0 +1,40 @@ +import { Material } from "../material/Material"; + +export type AutosuggestMaterialProps = { + items: { + cover: string; + title: string; + author: string; + year: string; + }[] +} + +export const AutosuggestMaterial = (props: AutosuggestMaterialProps) => { + const {items} = props + + return ( +
        +
      • + I am a contextual text item +
        • +
        +
          + {items.map((item) => { + return ( +
        • +
          +
          + +
          +
          +
          {item.title}
          +
          {`${item.author} (${item.year})`}
          +
          +
          +
          • + ) + })} +
        +
      + ) +} diff --git a/src/stories/autosuggest-material/autosuggest-material.md b/src/stories/autosuggest-material/autosuggest-material.md deleted file mode 100644 index e57b9dea7..000000000 --- a/src/stories/autosuggest-material/autosuggest-material.md +++ /dev/null @@ -1 +0,0 @@ -This folder will hold the autosuggest material component. \ No newline at end of file diff --git a/src/stories/autosuggest-material/autosuggest-material.scss b/src/stories/autosuggest-material/autosuggest-material.scss new file mode 100644 index 000000000..b4053bdda --- /dev/null +++ b/src/stories/autosuggest-material/autosuggest-material.scss @@ -0,0 +1,81 @@ +.autosuggest { + &__divider { + width: 100%; + display: block; + height: 1px; + border: 0; + border-top: 1px solid $c-global-tertiary-1; + margin: 20px 0; + padding: 0; + } + + &__materials { + display: flex; + flex-direction: column; + + @include breakpoint-m { + flex-direction: row; + flex-wrap: nowrap; + } + } +} + + +.autosuggest__materials__item { + width: 100%; + padding: 7px 0; + + &:last-child { + margin-bottom: 0; + } + + &:hover { + background-color: $c-global-secondary; + cursor: pointer; + } + + &--highlight { + background-color: $c-global-secondary; + } + + @include breakpoint-m { + width: 33.3%; + } + + &__content { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + width: 95%; + + &__cover { + margin: 0 15px; + box-shadow: 0 4px 40px rgba(0, 0, 0, 0.15); + } + + &__info { + display: flex; + flex-direction: column; + justify-content: center; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + + &__title { + color: $c-text-secondary-gray; + line-height: 24px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + + &__author { + color: $c-text-primary-black; + line-height: 24px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + } + } +} \ No newline at end of file From 91d6e54f624acfa29df145a4e7aaec371a28f4fb Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Wed, 15 Jun 2022 13:13:38 +0200 Subject: [PATCH 58/81] Add the Figma design url parameter to the story for AutosuggestText It was missing before. --- src/stories/autosuggest-text/AutosuggestText.stories.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/stories/autosuggest-text/AutosuggestText.stories.tsx b/src/stories/autosuggest-text/AutosuggestText.stories.tsx index 60fdccdf1..4a40f5d68 100644 --- a/src/stories/autosuggest-text/AutosuggestText.stories.tsx +++ b/src/stories/autosuggest-text/AutosuggestText.stories.tsx @@ -13,7 +13,13 @@ export default { control: { type: "array" } } }, - parameters: {}, + parameters: { + design: { + type: "figma", + url: + "https://www.figma.com/file/ETOZIfmgGS1HUfio57SOh7/S%C3%B8gning?node-id=4709%3A24976", + }, + }, } as ComponentMeta; const Template: ComponentStory = (args: AutosuggestTextProps) => ( From d454683425ef1e501eaba6db12036e31a5131ad6 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Wed, 15 Jun 2022 13:25:37 +0200 Subject: [PATCH 59/81] Justify autosuggest material items to center If we get less than three items, we need to make sure that the item/(s) are centered. --- src/stories/autosuggest-material/autosuggest-material.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/stories/autosuggest-material/autosuggest-material.scss b/src/stories/autosuggest-material/autosuggest-material.scss index b4053bdda..341bd8502 100644 --- a/src/stories/autosuggest-material/autosuggest-material.scss +++ b/src/stories/autosuggest-material/autosuggest-material.scss @@ -15,6 +15,7 @@ @include breakpoint-m { flex-direction: row; + justify-content: center; flex-wrap: nowrap; } } From c748ddc25c51554205d07cf17e76d7c5aecbc749 Mon Sep 17 00:00:00 2001 From: Mikkel Jakobsen Date: Wed, 15 Jun 2022 20:14:59 +0200 Subject: [PATCH 60/81] Add nvrmrc param to setup-node tasks In order to freeze version. To prevent this problem: https://github.com/npm/cli/issues/4998 Also bump up setup-node to version 3 while we're at it. --- .github/workflows/a11y.yml | 4 ++-- .github/workflows/chromatic.yml | 4 ++-- .github/workflows/deployment.yml | 8 ++++---- .github/workflows/gh-pages.yml | 4 ++-- .github/workflows/lint.yml | 16 ++++++++-------- 5 files changed, 18 insertions(+), 18 deletions(-) diff --git a/.github/workflows/a11y.yml b/.github/workflows/a11y.yml index b24b20632..e703ae71c 100644 --- a/.github/workflows/a11y.yml +++ b/.github/workflows/a11y.yml @@ -11,9 +11,9 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - - uses: actions/setup-node@v2 + - uses: actions/setup-node@v3 with: - node-version: "16" + node-version-file: '.nvmrc' - run: npm ci - name: Compile styles diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index 10e95655b..5697cbee4 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -10,9 +10,9 @@ jobs: with: fetch-depth: 0 - - uses: actions/setup-node@v2 + - uses: actions/setup-node@v3 with: - node-version: "16" + node-version-file: '.nvmrc' - run: npm ci diff --git a/.github/workflows/deployment.yml b/.github/workflows/deployment.yml index 650387154..975e355eb 100644 --- a/.github/workflows/deployment.yml +++ b/.github/workflows/deployment.yml @@ -8,9 +8,9 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - - uses: actions/setup-node@v2 + - uses: actions/setup-node@v3 with: - node-version: "16" + node-version-file: '.nvmrc' - run: npm ci - name: Building @@ -41,9 +41,9 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - - uses: actions/setup-node@v2 + - uses: actions/setup-node@v3 with: - node-version: "16" + node-version-file: '.nvmrc' registry-url: "https://npm.pkg.github.com" scope: "@${{ github.repository_owner }}" diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml index 48b7d692a..315556fba 100644 --- a/.github/workflows/gh-pages.yml +++ b/.github/workflows/gh-pages.yml @@ -13,9 +13,9 @@ jobs: - uses: actions/checkout@v2 - name: Setup Node - uses: actions/setup-node@v2 + uses: actions/setup-node@v3 with: - node-version: "16" + node-version-file: '.nvmrc' - name: Cache dependencies uses: actions/cache@v2 diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 8446da23a..583a22570 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -11,9 +11,9 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - - uses: actions/setup-node@v2 + - uses: actions/setup-node@v3 with: - node-version: "16" + node-version-file: '.nvmrc' - run: npm ci - name: Run stylelint @@ -29,9 +29,9 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - - uses: actions/setup-node@v2 + - uses: actions/setup-node@v3 with: - node-version: "16" + node-version-file: '.nvmrc' - run: npm ci - name: Run eslint @@ -41,9 +41,9 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - - uses: actions/setup-node@v2 + - uses: actions/setup-node@v3 with: - node-version: "16" + node-version-file: '.nvmrc' - run: npm ci @@ -54,9 +54,9 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - - uses: actions/setup-node@v2 + - uses: actions/setup-node@v3 with: - node-version: "16" + node-version-file: '.nvmrc' - run: npm ci From edd2b3a65299c125d3c771e7747fa6de4302fa1c Mon Sep 17 00:00:00 2001 From: Mikkel Jakobsen Date: Wed, 15 Jun 2022 20:15:56 +0200 Subject: [PATCH 61/81] Fix a11y on favourite btn --- src/stories/button-favourite/ButtonFavourite.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/button-favourite/ButtonFavourite.tsx b/src/stories/button-favourite/ButtonFavourite.tsx index 1b3b90d39..18f3dd388 100644 --- a/src/stories/button-favourite/ButtonFavourite.tsx +++ b/src/stories/button-favourite/ButtonFavourite.tsx @@ -6,7 +6,7 @@ interface ButtonFavouriteProps { export const ButtonFavourite = ({ fill }: ButtonFavouriteProps) => { return ( - ); From 6fabd1d2553a1279c9c35e7f84dc87b6a24bf051 Mon Sep 17 00:00:00 2001 From: Mikkel Jakobsen Date: Thu, 16 Jun 2022 09:44:15 +0200 Subject: [PATCH 62/81] Changing language on arialabel on the favourite btn --- src/stories/button-favourite/ButtonFavourite.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/button-favourite/ButtonFavourite.tsx b/src/stories/button-favourite/ButtonFavourite.tsx index 18f3dd388..ad301f25f 100644 --- a/src/stories/button-favourite/ButtonFavourite.tsx +++ b/src/stories/button-favourite/ButtonFavourite.tsx @@ -6,7 +6,7 @@ interface ButtonFavouriteProps { export const ButtonFavourite = ({ fill }: ButtonFavouriteProps) => { return ( - ); From 86a480f0ff5982279f704b649a853be218bbbd84 Mon Sep 17 00:00:00 2001 From: Mikkel Jakobsen Date: Thu, 16 Jun 2022 10:00:09 +0200 Subject: [PATCH 63/81] Documenting definition of node version --- docker-compose.yml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docker-compose.yml b/docker-compose.yml index c99b4ccd4..3ae2c38f6 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -2,7 +2,9 @@ version: '3.7' services: node: - image: node:16 + # Remember to keep version updated with the .nvmrc file. + # The .nvmrc file is used in Github Actions and for "dockerless" development. + image: node:16.14.2 user: node init: true working_dir: /home/node/app From 554500d7ebe4526d741f4dec1043e129b08cafb7 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Thu, 16 Jun 2022 11:22:00 +0200 Subject: [PATCH 64/81] Fix all the errors that pop up from a11y github action --- src/stories/arrows/icon-arrow-accent/ArrowAccent.stories.tsx | 1 - src/stories/button-favourite/ButtonFavourite.stories.tsx | 2 -- src/stories/counter/Counter.tsx | 2 -- src/stories/icon/icon-favourite/IconFavourite.stories.tsx | 2 -- src/stories/link-filters/LinkFilters.stories.tsx | 2 +- src/stories/links/Links.stories.tsx | 2 -- src/stories/modal-cta/ModalCTA.tsx | 1 - src/stories/modal-loan/ModalLoan.tsx | 2 -- src/stories/modal-search/ModalSearch.tsx | 2 +- src/stories/modal-text/ModalText.stories.tsx | 1 - src/stories/modal-text/ModalText.tsx | 1 - src/stories/number/Number.tsx | 2 -- src/stories/pagefold/Pagefold.stories.tsx | 2 -- src/stories/tag/Tag.stories.tsx | 2 +- src/stories/warning-status/WarningStatus.tsx | 1 - 15 files changed, 3 insertions(+), 22 deletions(-) diff --git a/src/stories/arrows/icon-arrow-accent/ArrowAccent.stories.tsx b/src/stories/arrows/icon-arrow-accent/ArrowAccent.stories.tsx index 90943d9ac..e55f2ae6b 100644 --- a/src/stories/arrows/icon-arrow-accent/ArrowAccent.stories.tsx +++ b/src/stories/arrows/icon-arrow-accent/ArrowAccent.stories.tsx @@ -1,7 +1,6 @@ import { Meta } from "@storybook/react"; import React from "react"; import { withDesign } from "storybook-addon-designs"; -import { StoryBaseType } from "../../../types/StorybookHelpers"; import { IconAccent as IconAccentComp } from "./ArrowAccent"; diff --git a/src/stories/button-favourite/ButtonFavourite.stories.tsx b/src/stories/button-favourite/ButtonFavourite.stories.tsx index b6ae34af9..ff1665d94 100644 --- a/src/stories/button-favourite/ButtonFavourite.stories.tsx +++ b/src/stories/button-favourite/ButtonFavourite.stories.tsx @@ -2,8 +2,6 @@ import { ComponentStory, ComponentMeta } from "@storybook/react"; import { withDesign } from "storybook-addon-designs"; import { ButtonFavourite } from "./ButtonFavourite"; -type ButtonFavouriteProps = typeof ButtonFavourite; - export default { title: "Components / Button Favourite", component: ButtonFavourite, diff --git a/src/stories/counter/Counter.tsx b/src/stories/counter/Counter.tsx index eb6fd36d9..f005b86ac 100644 --- a/src/stories/counter/Counter.tsx +++ b/src/stories/counter/Counter.tsx @@ -1,5 +1,3 @@ -import React, { useEffect } from "react"; - export type CounterProps = { value: number; percentage: number; diff --git a/src/stories/icon/icon-favourite/IconFavourite.stories.tsx b/src/stories/icon/icon-favourite/IconFavourite.stories.tsx index aafaca5ea..241bb8ad1 100644 --- a/src/stories/icon/icon-favourite/IconFavourite.stories.tsx +++ b/src/stories/icon/icon-favourite/IconFavourite.stories.tsx @@ -2,8 +2,6 @@ import { ComponentStory, ComponentMeta } from "@storybook/react"; import { withDesign } from "storybook-addon-designs"; import { IconFavourite } from "./IconFavourite"; -type IconFavouriteProps = typeof IconFavourite; - export default { title: "Atoms / Icons", component: IconFavourite, diff --git a/src/stories/link-filters/LinkFilters.stories.tsx b/src/stories/link-filters/LinkFilters.stories.tsx index 5af13c090..37be8a2c7 100644 --- a/src/stories/link-filters/LinkFilters.stories.tsx +++ b/src/stories/link-filters/LinkFilters.stories.tsx @@ -1,6 +1,6 @@ import React from "react"; import { withDesign } from "storybook-addon-designs"; -import { ComponentMeta, ComponentStory, Meta } from "@storybook/react"; +import { ComponentMeta, ComponentStory } from "@storybook/react"; import { LinkFilters } from "./LinkFilters"; diff --git a/src/stories/links/Links.stories.tsx b/src/stories/links/Links.stories.tsx index fe0a9b83a..0a5cf2274 100644 --- a/src/stories/links/Links.stories.tsx +++ b/src/stories/links/Links.stories.tsx @@ -3,8 +3,6 @@ import { ComponentStory, ComponentMeta } from "@storybook/react"; import { withDesign } from "storybook-addon-designs"; import { Links as LinksComp } from "./Links"; -type LinksProps = typeof LinksComp; - export default { title: "Atoms / Links", component: LinksComp, diff --git a/src/stories/modal-cta/ModalCTA.tsx b/src/stories/modal-cta/ModalCTA.tsx index 0b77c47a5..fcf13faf9 100644 --- a/src/stories/modal-cta/ModalCTA.tsx +++ b/src/stories/modal-cta/ModalCTA.tsx @@ -4,7 +4,6 @@ import { ModalCloseButton, ModalFallbackButton, } from "../../components/ModalShared"; -import { ButtonUI } from "../button-ui/ButtonUI"; import { Button } from "../button/Button"; import { Links } from "../links/Links"; diff --git a/src/stories/modal-loan/ModalLoan.tsx b/src/stories/modal-loan/ModalLoan.tsx index 41a08b7bc..8a954bf91 100644 --- a/src/stories/modal-loan/ModalLoan.tsx +++ b/src/stories/modal-loan/ModalLoan.tsx @@ -4,12 +4,10 @@ import { ModalCloseButton, ModalFallbackButton, } from "../../components/ModalShared"; -import { ButtonUI } from "../button-ui/ButtonUI"; import { Button } from "../button/Button"; import { Checkbox } from "../checkbox/Checkbox"; import { Counter } from "../counter/Counter"; import { LinkFilters } from "../link-filters/LinkFilters"; -import { Links } from "../links/Links"; import { ListMaterials, ListMaterialsProps, diff --git a/src/stories/modal-search/ModalSearch.tsx b/src/stories/modal-search/ModalSearch.tsx index b47a40c03..15522a4ab 100644 --- a/src/stories/modal-search/ModalSearch.tsx +++ b/src/stories/modal-search/ModalSearch.tsx @@ -1,4 +1,4 @@ -import { useEffect, useMemo, useState } from "react"; +import { useEffect, useState } from "react"; import { ModalCloseButton, diff --git a/src/stories/modal-text/ModalText.stories.tsx b/src/stories/modal-text/ModalText.stories.tsx index b9520c21b..8ef41d626 100644 --- a/src/stories/modal-text/ModalText.stories.tsx +++ b/src/stories/modal-text/ModalText.stories.tsx @@ -1,7 +1,6 @@ import { withDesign } from "storybook-addon-designs"; import { ComponentMeta, ComponentStory } from "@storybook/react"; import { ModalText } from "./ModalText"; -import { textContent } from "./ModalText"; export default { title: "Components / Modal - Text", diff --git a/src/stories/modal-text/ModalText.tsx b/src/stories/modal-text/ModalText.tsx index cbb0efff4..962d5b9b8 100644 --- a/src/stories/modal-text/ModalText.tsx +++ b/src/stories/modal-text/ModalText.tsx @@ -4,7 +4,6 @@ import { ModalCloseButton, ModalFallbackButton, } from "../../components/ModalShared"; -import { ButtonUI } from "../button-ui/ButtonUI"; import { Button } from "../button/Button"; import { Links } from "../links/Links"; diff --git a/src/stories/number/Number.tsx b/src/stories/number/Number.tsx index ca1533fda..b841e8367 100644 --- a/src/stories/number/Number.tsx +++ b/src/stories/number/Number.tsx @@ -1,5 +1,3 @@ -import React, { useEffect } from "react"; - export type NumberProps = { label: number; status: "danger" | "warning" | "info" | "neutral"; diff --git a/src/stories/pagefold/Pagefold.stories.tsx b/src/stories/pagefold/Pagefold.stories.tsx index a78e85a70..58a96613b 100644 --- a/src/stories/pagefold/Pagefold.stories.tsx +++ b/src/stories/pagefold/Pagefold.stories.tsx @@ -3,8 +3,6 @@ import { ComponentStory, ComponentMeta } from "@storybook/react"; import { withDesign } from "storybook-addon-designs"; import { Pagefold as PagefoldComp } from "./Pagefold"; -type PagefoldProps = typeof PagefoldComp; - export default { title: "Atoms / Pagefold", component: PagefoldComp, diff --git a/src/stories/tag/Tag.stories.tsx b/src/stories/tag/Tag.stories.tsx index 67517f55b..68917e1d7 100644 --- a/src/stories/tag/Tag.stories.tsx +++ b/src/stories/tag/Tag.stories.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { ComponentStory, ComponentMeta } from "@storybook/react"; +import { ComponentStory } from "@storybook/react"; import { withDesign } from "storybook-addon-designs"; import { Tag as TagComp } from "./Tag"; diff --git a/src/stories/warning-status/WarningStatus.tsx b/src/stories/warning-status/WarningStatus.tsx index 8a2566e96..952e28a05 100644 --- a/src/stories/warning-status/WarningStatus.tsx +++ b/src/stories/warning-status/WarningStatus.tsx @@ -1,4 +1,3 @@ -import React, { useEffect } from "react"; import { Button } from "../button/Button"; import { Links } from "../links/Links"; From 487bb64d2a61bc240884731b129e337f74d4f046 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Thu, 16 Jun 2022 11:27:13 +0200 Subject: [PATCH 65/81] Only use list items, templates, or scripts inside of unordered lists Eslint a11y action was failing because of this. We had a
      in there. Now the hr is also a list item. --- src/stories/autosuggest-material/AutosuggestMaterial.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/stories/autosuggest-material/AutosuggestMaterial.tsx b/src/stories/autosuggest-material/AutosuggestMaterial.tsx index 40b19df91..9f90f8af1 100644 --- a/src/stories/autosuggest-material/AutosuggestMaterial.tsx +++ b/src/stories/autosuggest-material/AutosuggestMaterial.tsx @@ -17,7 +17,9 @@ export const AutosuggestMaterial = (props: AutosuggestMaterialProps) => {
    • I am a contextual text item
      • -
      +
    • +
      +
        • {items.map((item) => { return ( From d535c661ff5b9ba13c7ff075e259597a312b5c90 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Thu, 16 Jun 2022 11:49:11 +0200 Subject: [PATCH 66/81] Add value to textContent story argument for Modal text story Our github action was failing because of this. --- src/stories/modal-text/ModalText.stories.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/stories/modal-text/ModalText.stories.tsx b/src/stories/modal-text/ModalText.stories.tsx index 8ef41d626..7bcf2dba7 100644 --- a/src/stories/modal-text/ModalText.stories.tsx +++ b/src/stories/modal-text/ModalText.stories.tsx @@ -26,5 +26,14 @@ Text.args = { subtitle: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", linkText: "Ikke nu", btnLabel: "Giv samtykke", - textContent, + textContent: [ + { + title: "item 1 title", + text: "item 1 text" + }, + { + title: "item 2 title", + text: "item 2 text" + } + ], }; \ No newline at end of file From 41994e6aedd8c9020f8b874718410a2f738f6cae Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Thu, 16 Jun 2022 12:02:07 +0200 Subject: [PATCH 67/81] Use textContent exported from ModalText component in the story Instead of making a dummy array in the story, we can reuse the one that ModalText component provides. --- src/stories/modal-text/ModalText.stories.tsx | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/src/stories/modal-text/ModalText.stories.tsx b/src/stories/modal-text/ModalText.stories.tsx index 7bcf2dba7..6a3fcb4c2 100644 --- a/src/stories/modal-text/ModalText.stories.tsx +++ b/src/stories/modal-text/ModalText.stories.tsx @@ -1,6 +1,7 @@ import { withDesign } from "storybook-addon-designs"; import { ComponentMeta, ComponentStory } from "@storybook/react"; -import { ModalText } from "./ModalText"; +import { ModalText, textContent } from "./ModalText"; + export default { title: "Components / Modal - Text", @@ -26,14 +27,5 @@ Text.args = { subtitle: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", linkText: "Ikke nu", btnLabel: "Giv samtykke", - textContent: [ - { - title: "item 1 title", - text: "item 1 text" - }, - { - title: "item 2 title", - text: "item 2 text" - } - ], + textContent: textContent }; \ No newline at end of file From 4dca9d8c910677b45d5b9692b681219901a55a26 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Thu, 16 Jun 2022 13:26:41 +0200 Subject: [PATCH 68/81] Use BEM class naming convention in autosuggest-text and -material Before the classes were a bit inconsistent. Now they follow the principle and are consistent. --- .../AutosuggestMaterial.tsx | 34 ++++++++++--------- .../autosuggest-material.scss | 24 +++++++------ .../autosuggest-text/AutosuggestText.tsx | 2 +- .../autosuggest-text/autosuggest-text.scss | 1 - 4 files changed, 32 insertions(+), 29 deletions(-) diff --git a/src/stories/autosuggest-material/AutosuggestMaterial.tsx b/src/stories/autosuggest-material/AutosuggestMaterial.tsx index 9f90f8af1..1e536c2d0 100644 --- a/src/stories/autosuggest-material/AutosuggestMaterial.tsx +++ b/src/stories/autosuggest-material/AutosuggestMaterial.tsx @@ -20,23 +20,25 @@ export const AutosuggestMaterial = (props: AutosuggestMaterialProps) => {
        • -
          - {items.map((item) => { - return ( -
        • -
          -
          - -
          -
          -
          {item.title}
          -
          {`${item.author} (${item.year})`}
          +
        • +
            + {items.map((item) => { + return ( +
          • +
            +
            + +
            +
            +
            {item.title}
            +
            {`${item.author} (${item.year})`}
            +
            -
- - ) - })} - + + ) + })} + + ) } diff --git a/src/stories/autosuggest-material/autosuggest-material.scss b/src/stories/autosuggest-material/autosuggest-material.scss index 341bd8502..203e4849f 100644 --- a/src/stories/autosuggest-material/autosuggest-material.scss +++ b/src/stories/autosuggest-material/autosuggest-material.scss @@ -9,20 +9,22 @@ padding: 0; } - &__materials { - display: flex; - flex-direction: column; - - @include breakpoint-m { - flex-direction: row; - justify-content: center; - flex-wrap: nowrap; + &__item { + &--materials { + display: flex; + flex-direction: column; + + @include breakpoint-m { + flex-direction: row; + justify-content: center; + flex-wrap: nowrap; + } } } } -.autosuggest__materials__item { +.autosuggest__item--materials__item { width: 100%; padding: 7px 0; @@ -49,12 +51,12 @@ flex-wrap: nowrap; width: 95%; - &__cover { + &--cover { margin: 0 15px; box-shadow: 0 4px 40px rgba(0, 0, 0, 0.15); } - &__info { + &--info { display: flex; flex-direction: column; justify-content: center; diff --git a/src/stories/autosuggest-text/AutosuggestText.tsx b/src/stories/autosuggest-text/AutosuggestText.tsx index 610fb1fca..a3685a6d0 100644 --- a/src/stories/autosuggest-text/AutosuggestText.tsx +++ b/src/stories/autosuggest-text/AutosuggestText.tsx @@ -8,7 +8,7 @@ export const AutosuggestText = (props: AutosuggestTextProps) => {