Merge branch 'develop' into DDFLSBP-651-implement-cookie-blocking-pla…

…ceholder

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 to create a common set of
+base classes.
+
+## 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).

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",
@@ -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",
@@ -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"

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) => {
                 <SearchIcon className="header__menu-search-icon" />
               </form>
               <ExpandMoreIcon
-                className="header__menu-dropdown-icon"
+                className={clsx("header__menu-dropdown-icon", {
+                  "header__menu-dropdown-icon--expanded": isDropdownOpen,
+                })}
                 onClick={() => setIsDropdownOpen(!isDropdownOpen)}
               />
               {isDropdownOpen && (

src/stories/Blocks/header/header.scss

@@ -137,6 +137,7 @@
 .header__menu-search-icon {
   position: absolute;
   right: $s-3xl;
+  cursor: pointer;
 }
 
 .header__menu-dropdown {
@@ -174,6 +175,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 {

src/stories/Library/footer-accordions/FooterAccordion.tsx

@@ -16,7 +16,7 @@ const FooterAccordion: FC<FooterAccordionProps> = ({
 
   return (
     <>
-      <h3 className="footer-accordion__header footer__title">
+      <h2 className="footer-accordion__header footer__title">
         <button
           className="footer-accordion__header-button"
           aria-expanded={isOpen}
@@ -30,7 +30,7 @@ const FooterAccordion: FC<FooterAccordionProps> = ({
             alt=""
           />
         </button>
-      </h3>
+      </h2>
       <div
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={{ __html: content }}

src/stories/Library/footer-colums/FooterColumn.tsx

@@ -8,7 +8,7 @@ export type FooterColumnType = {
 const FooterColumn: FC<FooterColumnType> = ({ title, content }) => {
   return (
     <>
-      <h3 className="footer__title">{title}</h3>
+      <h2 className="footer__title">{title}</h2>
       <div
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={{ __html: content }}

src/stories/Library/nav-grid/init-nav-grid.js

@@ -11,8 +11,16 @@ 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");
+
+      if (firstHiddenLink) {
+        firstHiddenLink.focus();
+      }
     });
   });
 });

src/stories/Library/nav-spot/NavSpot.tsx

@@ -28,7 +28,7 @@ const NavSpot: FC<NavSpotProps> = ({
         </div>
 
         <div className="nav-spot__text">
-          <h1 className="nav-spot__title">{title}</h1>
+          <h2 className="nav-spot__title">{title}</h2>
 
           {subtitle ? <p className="nav-spot__subtitle">{subtitle}</p> : ""}
 

src/stories/Library/nav-teaser/NavTeaser.tsx

@@ -10,7 +10,7 @@ const NavTeaser: FC<NavTeaserProps> = ({ title, subtitle }) => {
   return (
     <article className="nav-teaser">
       <a href="#">
-        <h1 className="nav-teaser__title">{title}</h1>
+        <h3 className="nav-teaser__title">{title}</h3>
 
         {subtitle ? <p className="nav-teaser__subtitle">{subtitle}</p> : ""}
 

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"
@@ -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"
@@ -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"