From 18af12e134d74908abd84f91f603403ead2e11f0 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Wed, 15 May 2024 13:32:56 +0200 Subject: [PATCH 01/18] Enhance `nav-grid` functionality to focus on next item after "show more" click --- src/stories/Library/nav-grid/init-nav-grid.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/stories/Library/nav-grid/init-nav-grid.js b/src/stories/Library/nav-grid/init-nav-grid.js index 769551b5d..b4365fefe 100644 --- a/src/stories/Library/nav-grid/init-nav-grid.js +++ b/src/stories/Library/nav-grid/init-nav-grid.js @@ -13,6 +13,15 @@ window.addEventListener("load", () => { button.addEventListener("click", () => { grid.classList.remove("nav-grid--folded"); + + // The 7th item is the first one that is initially hidden. + // For more details, refer to the ".nav-grid--folded" class in design-system src/stories/Library/nav-grid/nav-grid.scss + const seventhNavGridItem = grid.querySelector( + ".nav-grid__item:nth-child(7)" + ); + if (seventhNavGridItem) { + seventhNavGridItem.querySelector("a").focus(); + } }); }); }); From d33e58a05bede8c4d8e601cedbb91a40d39a45f2 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Wed, 22 May 2024 08:44:04 +0200 Subject: [PATCH 02/18] Restructure heading tree structure This is important for accessibility and screen readers. Following the changes introduced in https://github.com/danskernesdigitalebibliotek/dpl-cms/pull/1154/ --- src/stories/Library/footer-accordions/FooterAccordion.tsx | 4 ++-- src/stories/Library/footer-colums/FooterColumn.tsx | 2 +- src/stories/Library/nav-spot/NavSpot.tsx | 2 +- src/stories/Library/nav-teaser/NavTeaser.tsx | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/stories/Library/footer-accordions/FooterAccordion.tsx b/src/stories/Library/footer-accordions/FooterAccordion.tsx index 3e74eba21..d76a5c5b0 100644 --- a/src/stories/Library/footer-accordions/FooterAccordion.tsx +++ b/src/stories/Library/footer-accordions/FooterAccordion.tsx @@ -16,7 +16,7 @@ const FooterAccordion: FC = ({ return ( <> -

+

-

+
= ({ title, content }) => { return ( <> -

{title}

+

{title}

= ({
-

{title}

+

{title}

{subtitle ?

{subtitle}

: ""} diff --git a/src/stories/Library/nav-teaser/NavTeaser.tsx b/src/stories/Library/nav-teaser/NavTeaser.tsx index a2c9defeb..1824d9e62 100644 --- a/src/stories/Library/nav-teaser/NavTeaser.tsx +++ b/src/stories/Library/nav-teaser/NavTeaser.tsx @@ -10,7 +10,7 @@ const NavTeaser: FC = ({ title, subtitle }) => { return (
-

{title}

+

{title}

{subtitle ?

{subtitle}

: ""} From bf3ae095cd35b86c6c6ac44f4fb57582ed4e068d Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Wed, 22 May 2024 09:45:07 +0200 Subject: [PATCH 03/18] Refactor `focus` logic for `nav-grid` This is to avoid magic numbers in the selector and will work if the CSS that determines the number of hidden items should be changed. --- src/stories/Library/nav-grid/init-nav-grid.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/stories/Library/nav-grid/init-nav-grid.js b/src/stories/Library/nav-grid/init-nav-grid.js index b4365fefe..c61e9925c 100644 --- a/src/stories/Library/nav-grid/init-nav-grid.js +++ b/src/stories/Library/nav-grid/init-nav-grid.js @@ -11,16 +11,15 @@ window.addEventListener("load", () => { return; } + const firstHiddenLink = Array.from(grid.querySelectorAll(".nav-grid__item")) + .find((item) => window.getComputedStyle(item).display === "none") + ?.querySelector("a"); + button.addEventListener("click", () => { grid.classList.remove("nav-grid--folded"); - // The 7th item is the first one that is initially hidden. - // For more details, refer to the ".nav-grid--folded" class in design-system src/stories/Library/nav-grid/nav-grid.scss - const seventhNavGridItem = grid.querySelector( - ".nav-grid__item:nth-child(7)" - ); - if (seventhNavGridItem) { - seventhNavGridItem.querySelector("a").focus(); + if (firstHiddenLink) { + firstHiddenLink.focus(); } }); }); From 3608c621149f3a5f3a5e84c840fecb35178f7f2b Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Wed, 22 May 2024 11:33:33 +0200 Subject: [PATCH 04/18] Trigger chromatic From b477604092058611fd960116a641094a1e6bdb75 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Wed, 22 May 2024 11:35:18 +0200 Subject: [PATCH 05/18] Trigger chromatic From 56ed927903f9a7a044c5ebf1e9546b9432e48082 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 27 May 2024 01:28:50 +0000 Subject: [PATCH 06/18] Bump web-vitals from 3.5.2 to 4.0.1 Bumps [web-vitals](https://github.com/GoogleChrome/web-vitals) from 3.5.2 to 4.0.1. - [Changelog](https://github.com/GoogleChrome/web-vitals/blob/main/CHANGELOG.md) - [Commits](https://github.com/GoogleChrome/web-vitals/compare/v3.5.2...v4.0.1) --- updated-dependencies: - dependency-name: web-vitals dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index fa858f760..0f80c9d73 100644 --- a/package.json +++ b/package.json @@ -92,7 +92,7 @@ "stylelint-prettier": "^3.0.0", "stylelint-scss": "^5.3.2", "typescript": "^4.7.4", - "web-vitals": "^3.5.2" + "web-vitals": "^4.0.1" }, "publishConfig": { "registry": "https://npm.pkg.github.com" diff --git a/yarn.lock b/yarn.lock index a551b7e9d..b79fc66c5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16340,10 +16340,10 @@ web-namespaces@^1.0.0: resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-1.1.4.tgz#bc98a3de60dadd7faefc403d1076d529f5e030ec" integrity sha512-wYxSGajtmoP4WxfejAPIr4l0fVh+jeMXZb08wNc0tMg6xsfZXj3cECqIK0G7ZAqUq0PP8WlMDtaOGVBTAWztNw== -web-vitals@^3.5.2: - version "3.5.2" - resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-3.5.2.tgz#5bb58461bbc173c3f00c2ddff8bfe6e680999ca9" - integrity sha512-c0rhqNcHXRkY/ogGDJQxZ9Im9D19hDihbzSQJrsioex+KnFgmMzBiy57Z1EjkhX/+OjyBpclDCzz2ITtjokFmg== +web-vitals@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-4.0.1.tgz#9fa4dfcd26130d6721717c5f2ff73adf3adbbe76" + integrity sha512-AW6qT/vXK3pbf+WgVcEBXY//AWCpXjVKgdb6rt0cARSUdtT+NUtZCOeo+CSLUX7PjSQ275DmxfkAs7QlPbtR6w== webidl-conversions@^3.0.0: version "3.0.1" From ac3da3f73f05452d49f54c9599b3ab339b819fb5 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 27 May 2024 01:29:27 +0000 Subject: [PATCH 07/18] Bump eslint-webpack-plugin from 4.1.0 to 4.2.0 Bumps [eslint-webpack-plugin](https://github.com/webpack-contrib/eslint-webpack-plugin) from 4.1.0 to 4.2.0. - [Release notes](https://github.com/webpack-contrib/eslint-webpack-plugin/releases) - [Changelog](https://github.com/webpack-contrib/eslint-webpack-plugin/blob/master/CHANGELOG.md) - [Commits](https://github.com/webpack-contrib/eslint-webpack-plugin/compare/v4.1.0...v4.2.0) --- updated-dependencies: - dependency-name: eslint-webpack-plugin dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] --- package.json | 2 +- yarn.lock | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index fa858f760..8a8de7b9f 100644 --- a/package.json +++ b/package.json @@ -72,7 +72,7 @@ "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.2", - "eslint-webpack-plugin": "^4.1.0", + "eslint-webpack-plugin": "^4.2.0", "flatpickr": "^4.6.13", "json": "^11.0.0", "markdownlint-cli2": "^0.4.0", diff --git a/yarn.lock b/yarn.lock index a551b7e9d..40f11431e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2952,10 +2952,10 @@ "@types/eslint" "*" "@types/estree" "*" -"@types/eslint@*", "@types/eslint@^8.56.5": - version "8.56.6" - resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.56.6.tgz#d5dc16cac025d313ee101108ba5714ea10eb3ed0" - integrity sha512-ymwc+qb1XkjT/gfoQwxIeHZ6ixH23A+tCT2ADSA/DPVKzAjwYkTXBMCQ/f6fe4wEa85Lhp26VPeUxI7wMhAi7A== +"@types/eslint@*", "@types/eslint@^8.56.10": + version "8.56.10" + resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.56.10.tgz#eb2370a73bf04a901eeba8f22595c7ee0f7eb58d" + integrity sha512-Shavhk87gCtY2fhXDctcfS3e6FdxWkCx1iUZ9eEUbh7rTqlZT0/IzOkCOVt0fCjcFuZ9FPYfuezTBImfHCDBGQ== dependencies: "@types/estree" "*" "@types/json-schema" "*" @@ -7319,12 +7319,12 @@ eslint-webpack-plugin@^2.5.2: normalize-path "^3.0.0" schema-utils "^3.1.1" -eslint-webpack-plugin@^4.1.0: - version "4.1.0" - resolved "https://registry.yarnpkg.com/eslint-webpack-plugin/-/eslint-webpack-plugin-4.1.0.tgz#83daf1e601ea57b63d7164eea0635d7b7bafe673" - integrity sha512-C3wAG2jyockIhN0YRLuKieKj2nx/gnE/VHmoHemD5ifnAtY6ZU+jNPfzPoX4Zd6RIbUyWTiZUh/ofUlBhoAX7w== +eslint-webpack-plugin@^4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/eslint-webpack-plugin/-/eslint-webpack-plugin-4.2.0.tgz#41f54b25379908eb9eca8645bc997c90cfdbd34e" + integrity sha512-rsfpFQ01AWQbqtjgPRr2usVRxhWDuG0YDYcG8DJOteD3EFnpeuYuOwk0PQiN7PRBTqS6ElNdtPZPggj8If9WnA== dependencies: - "@types/eslint" "^8.56.5" + "@types/eslint" "^8.56.10" jest-worker "^29.7.0" micromatch "^4.0.5" normalize-path "^3.0.0" From 0404572613d5d0345a453a6c4ef9a2732aa838dc Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Mon, 27 May 2024 12:08:28 +0200 Subject: [PATCH 08/18] 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 9ddc8049f54b089d28dcfe6b2965e5473fea4944 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 27 May 2024 10:58:48 +0000 Subject: [PATCH 09/18] Bump sass from 1.77.1 to 1.77.2 Bumps [sass](https://github.com/sass/dart-sass) from 1.77.1 to 1.77.2. - [Release notes](https://github.com/sass/dart-sass/releases) - [Changelog](https://github.com/sass/dart-sass/blob/main/CHANGELOG.md) - [Commits](https://github.com/sass/dart-sass/compare/1.77.1...1.77.2) --- updated-dependencies: - dependency-name: sass dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 1758595de..a97faf300 100644 --- a/package.json +++ b/package.json @@ -83,7 +83,7 @@ "react-dom": "^17.0.2", "react-helmet": "^6.1.0", "react-scripts": "^4.0.3", - "sass": "^1.77.1", + "sass": "^1.77.2", "skeleton-screen-css": "^1.1.0", "storybook-addon-designs": "^6.2.1", "stylelint": "^14.16.1", diff --git a/yarn.lock b/yarn.lock index ef648e454..506a38c08 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14288,10 +14288,10 @@ sass-loader@^10.0.5: schema-utils "^3.0.0" semver "^7.3.2" -sass@^1.77.1: - version "1.77.1" - resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.1.tgz#018cdfb206afd14724030c02e9fefd8f30a76cd0" - integrity sha512-OMEyfirt9XEfyvocduUIOlUSkWOXS/LAt6oblR/ISXCTukyavjex+zQNm51pPCOiFKY1QpWvEH1EeCkgyV3I6w== +sass@^1.77.2: + version "1.77.2" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.2.tgz#18d4ed2eefc260cdc8099c5439ec1303fd5863aa" + integrity sha512-eb4GZt1C3avsX3heBNlrc7I09nyT00IUuo4eFhAbeXWU2fvA7oXI53SxODVAA+zgZCk9aunAZgO+losjR3fAwA== dependencies: chokidar ">=3.0.0 <4.0.0" immutable "^4.0.0" From 94033c1b59dbc500bab9bea22427a0b987eb2b34 Mon Sep 17 00:00:00 2001 From: Adam Antal Date: Mon, 27 May 2024 13:31:57 +0200 Subject: [PATCH 10/18] 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 11/18] 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 12/18] 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 13/18] 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 14/18] 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 15/18] 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 16/18] 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 17/18] 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 18/18] 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