Merge pull request #649 from danskernesdigitalebibliotek/release/brah…

…ma-17

Merge Release/brahma 17 into develop

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).

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 {