From 2ce2ec91bd8d630eb381e3a39221c3d4eb01222a Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Mon, 27 May 2024 11:22:26 +0200 Subject: [PATCH 01/12] Initiate release/brahma-17 From 0404572613d5d0345a453a6c4ef9a2732aa838dc Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Mon, 27 May 2024 12:08:28 +0200 Subject: [PATCH 02/12] Write architecture decision record for form styling - .dpl-form classes --- docs/architecture/adr-002-form-styling.md | 39 +++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 docs/architecture/adr-002-form-styling.md diff --git a/docs/architecture/adr-002-form-styling.md b/docs/architecture/adr-002-form-styling.md new file mode 100644 index 000000000..b54888993 --- /dev/null +++ b/docs/architecture/adr-002-form-styling.md @@ -0,0 +1,39 @@ +# Architecture Decision Record: Form styling + +## Context + +There are various types of forms within the project, and it is always a dilemma +as to whether to write specific styling per form, or if there should be a common +set of base classes that can be used throughout the project. + +## Decision + +We have decided to create a set of `default classes` to be used when building +different kinds of forms, as to not create a large amount of location that +contain form styling. Considering the forms within the project all look very +similar/consist of elements that look the same, it will be an advantage to have +a centralized place to expand//apply future changes to. + +As we follow the BEM class structure, the block is called "dpl-form", which can +be expanded with elements, and modifiers. + +## Alternatives considered + +We considered writing new classes every time we introduced a new form, however, +this seemed like the inferior option. If a specific form element was to change +styling in the future, we would have to adjust all of the specific instances, +instead of having a singular definition. And in case a specific instance needs +to adopt a different styling, it can be achieved by creating a specific class +fot that very purpose. + +## Consequences + +As per this decision, we expect introduction of new form elements to be styled +expanding the current `dpl-form` class. + +This currently has an exception in form of form inputs - these have been styled +a long time ago and use the class "dpl-input". + +### Implementation in the dpl-design-system + +Here is the [link to our form css file](../src/stories/Blocks/form/form.scss). From 47a59fac0ac3d713cdfd3021cb4a1ff17b83cbf4 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Mon, 27 May 2024 12:54:11 +0200 Subject: [PATCH 03/12] Initiate release/brahma-17 From 94033c1b59dbc500bab9bea22427a0b987eb2b34 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Mon, 27 May 2024 13:31:57 +0200 Subject: [PATCH 04/12] Change search icon to be a 24px square instead of 20px to be accessible --- public/icons/basic/icon-search.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/icons/basic/icon-search.svg b/public/icons/basic/icon-search.svg index b7b0d8e1e..aa8de3b56 100644 --- a/public/icons/basic/icon-search.svg +++ b/public/icons/basic/icon-search.svg @@ -1,3 +1,3 @@ - + From 2cdedb89f45be7d71290549d7037690fbee06ae7 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Mon, 27 May 2024 13:32:30 +0200 Subject: [PATCH 05/12] Show cursor pointer when hovering over search icon in the search header --- src/stories/Blocks/header/header.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/stories/Blocks/header/header.scss b/src/stories/Blocks/header/header.scss index 20e7db67e..d6d347c78 100644 --- a/src/stories/Blocks/header/header.scss +++ b/src/stories/Blocks/header/header.scss @@ -137,6 +137,7 @@ .header__menu-search-icon { position: absolute; right: $s-3xl; + cursor: pointer; } .header__menu-dropdown { From b962c31f6fc095f35671b99cc9694708413eaa51 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Mon, 27 May 2024 13:38:34 +0200 Subject: [PATCH 06/12] Adjust search icon viewbox so it's centered in its viewbox --- public/icons/basic/icon-search.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/icons/basic/icon-search.svg b/public/icons/basic/icon-search.svg index aa8de3b56..b665f3960 100644 --- a/public/icons/basic/icon-search.svg +++ b/public/icons/basic/icon-search.svg @@ -1,3 +1,3 @@ - + From 066d90ef551c663ed504000d5692f0da19021137 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Tue, 28 May 2024 11:23:16 +0200 Subject: [PATCH 07/12] Animate advanced search header dropdown icon on click to indicate state --- src/stories/Blocks/header/Header.tsx | 5 ++++- src/stories/Blocks/header/header.scss | 7 +++++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/stories/Blocks/header/Header.tsx b/src/stories/Blocks/header/Header.tsx index 5116f3b22..c01b89efe 100644 --- a/src/stories/Blocks/header/Header.tsx +++ b/src/stories/Blocks/header/Header.tsx @@ -1,4 +1,5 @@ import { useEffect, useState } from "react"; +import clsx from "clsx"; import Logo from "../../Library/logo/Logo"; import MenuItemList from "../../Library/header-menu-list/HeaderMenuList"; import { menuItems } from "../../Library/header-menu-list/HeaderMenuListData"; @@ -109,7 +110,9 @@ export const Header = (props: HeaderProps) => { setIsDropdownOpen(!isDropdownOpen)} /> {isDropdownOpen && ( diff --git a/src/stories/Blocks/header/header.scss b/src/stories/Blocks/header/header.scss index 20e7db67e..6675dc162 100644 --- a/src/stories/Blocks/header/header.scss +++ b/src/stories/Blocks/header/header.scss @@ -174,6 +174,13 @@ position: absolute; cursor: pointer; right: $s-lg; + transition: transform 0.3s ease-in-out; + transform: scaleY(1); + + &.header__menu-dropdown-icon--expanded { + transition: transform 0.3s ease-in-out; + transform: scaleY(-1); + } } .header__clock { From 479fb6ef2a2a3338739a4a3a1251b5fada1a1d59 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Wed, 29 May 2024 13:02:28 +0200 Subject: [PATCH 08/12] Capitalize headline in docs/architecture/adr-002-form-styling.md Co-authored-by: Claus Bruun --- docs/architecture/adr-002-form-styling.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/architecture/adr-002-form-styling.md b/docs/architecture/adr-002-form-styling.md index b54888993..46f64579c 100644 --- a/docs/architecture/adr-002-form-styling.md +++ b/docs/architecture/adr-002-form-styling.md @@ -1,4 +1,4 @@ -# Architecture Decision Record: Form styling +# Architecture Decision Record: Form Styling ## Context From 6799f9e8b71e4f492333a73a7ad0a3b7102fdea9 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Wed, 29 May 2024 13:03:04 +0200 Subject: [PATCH 09/12] Update language in docs/architecture/adr-002-form-styling.md Co-authored-by: Claus Bruun --- docs/architecture/adr-002-form-styling.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/architecture/adr-002-form-styling.md b/docs/architecture/adr-002-form-styling.md index 46f64579c..94ff6874e 100644 --- a/docs/architecture/adr-002-form-styling.md +++ b/docs/architecture/adr-002-form-styling.md @@ -3,8 +3,8 @@ ## Context There are various types of forms within the project, and it is always a dilemma -as to whether to write specific styling per form, or if there should be a common -set of base classes that can be used throughout the project. +as to whether to write specific styling per form, or to create a common set of +base classes. ## Decision From 966f36748ffb643ee0b84266c5a8462abe22d942 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Wed, 29 May 2024 13:03:25 +0200 Subject: [PATCH 10/12] Fix typo in docs/architecture/adr-002-form-styling.md Co-authored-by: Claus Bruun --- docs/architecture/adr-002-form-styling.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/architecture/adr-002-form-styling.md b/docs/architecture/adr-002-form-styling.md index 94ff6874e..ffa6393c3 100644 --- a/docs/architecture/adr-002-form-styling.md +++ b/docs/architecture/adr-002-form-styling.md @@ -12,7 +12,7 @@ We have decided to create a set of `default classes` to be used when building different kinds of forms, as to not create a large amount of location that contain form styling. Considering the forms within the project all look very similar/consist of elements that look the same, it will be an advantage to have -a centralized place to expand//apply future changes to. +a centralized place to expand/apply future changes to. As we follow the BEM class structure, the block is called "dpl-form", which can be expanded with elements, and modifiers. From 7768908b0d3056c2bc7982edd0628384848b0437 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Wed, 29 May 2024 13:03:55 +0200 Subject: [PATCH 11/12] Update docs/architecture/adr-002-form-styling.md Co-authored-by: Claus Bruun --- docs/architecture/adr-002-form-styling.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/architecture/adr-002-form-styling.md b/docs/architecture/adr-002-form-styling.md index ffa6393c3..25c68e099 100644 --- a/docs/architecture/adr-002-form-styling.md +++ b/docs/architecture/adr-002-form-styling.md @@ -32,7 +32,7 @@ As per this decision, we expect introduction of new form elements to be styled expanding the current `dpl-form` class. This currently has an exception in form of form inputs - these have been styled -a long time ago and use the class "dpl-input". +a long time ago and use the class `dpl-input`. ### Implementation in the dpl-design-system From 6cf2c3f659090a26585e6b2481676eec0463e96a Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Wed, 29 May 2024 13:04:02 +0200 Subject: [PATCH 12/12] Update docs/architecture/adr-002-form-styling.md Co-authored-by: Claus Bruun --- docs/architecture/adr-002-form-styling.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/architecture/adr-002-form-styling.md b/docs/architecture/adr-002-form-styling.md index 25c68e099..14442bdb9 100644 --- a/docs/architecture/adr-002-form-styling.md +++ b/docs/architecture/adr-002-form-styling.md @@ -14,7 +14,7 @@ contain form styling. Considering the forms within the project all look very similar/consist of elements that look the same, it will be an advantage to have a centralized place to expand/apply future changes to. -As we follow the BEM class structure, the block is called "dpl-form", which can +As we follow the BEM class structure, the block is called `dpl-form`, which can be expanded with elements, and modifiers. ## Alternatives considered