Merge pull request #661 from danskernesdigitalebibliotek/develop

Release 2024.24.0
danskernesdigitalebibliotek · Jun 11, 2024 · a0dc4c3 · a0dc4c3
2 parents c4d7892 + f99c4db
commit a0dc4c3
Show file tree

Hide file tree

Showing 10 changed files with 326 additions and 122 deletions.
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -1,6 +1,21 @@
-name: "Chromatic"
+name: 'Chromatic'
+
+on:
+  push:
+    branches:
+      # Required for creating baselines
+      - main
+      - develop
+      - release/*
+  pull_request:
+    types: [ready_for_review, opened, synchronize]
+
+# Detect if this action is already running, and cancel it.
+# This most likely happened because a second push has been made to a branch.
+concurrency:
+  group: ${{ github.repository_id }}-${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
 
-on: push
 jobs:
   chromatic-deployment:
     runs-on: ubuntu-latest

diff --git a/package.json b/package.json
@@ -70,7 +70,7 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react": "^7.34.2",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-webpack-plugin": "^4.2.0",
     "flatpickr": "^4.6.13",
@@ -83,7 +83,7 @@
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
     "react-scripts": "^4.0.3",
-    "sass": "^1.77.2",
+    "sass": "^1.77.4",
     "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": "^4.0.1"
+    "web-vitals": "^4.1.0"
   },
   "publishConfig": {
     "registry": "https://npm.pkg.github.com"

diff --git a/src/stories/Blocks/header/Header.tsx b/src/stories/Blocks/header/Header.tsx
@@ -54,21 +54,21 @@ export const Header = (props: HeaderProps) => {
           >
             <div>
               <div className="header__menu-navigation-mobile">
-                <Pagefold
-                  isInheriting={false}
-                  isAContainer={false}
-                  size="small"
+                <button
+                  id="header-sidebar-nav__toggle"
                   className="header__menu-navigation-button header__button"
-                  compProps={{
-                    id: "header-sidebar-nav__toggle",
-                    "aria-controls": "sidebarNav",
-                    "aria-expanded": "false",
-                    role: "button",
-                    tabIndex: 0,
-                  }}
+                  aria-controls="sidebarNav"
+                  aria-expanded="false"
                 >
-                  <MenuIcon />
-                </Pagefold>
+                  <Pagefold
+                    isInheriting={false}
+                    isAContainer={false}
+                    size="small"
+                    className="header__menu-navigation-pagefold"
+                  >
+                    <MenuIcon />
+                  </Pagefold>
+                </button>
                 <div className="header__menu-navigation-logo">
                   <Logo
                     hasImage

diff --git a/src/stories/Blocks/header/header.scss b/src/stories/Blocks/header/header.scss
@@ -55,6 +55,13 @@
   align-items: center;
   border-right: 1px solid $color__global-tertiary-1;
 }
+.header__menu-navigation-pagefold {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 
 .header__menu-profile,
 .header__menu-bookmarked {

diff --git a/src/stories/Library/Forms/input/Input.stories.tsx b/src/stories/Library/Forms/input/Input.stories.tsx
@@ -9,15 +9,24 @@ export default {
   argTypes: {
     label: {
       defaultValue: "Navn",
+      control: { type: "text" },
     },
     type: {
       defaultValue: "text",
+      control: { type: "select", options: ["text", "password"] },
     },
     id: {
       defaultValue: "id",
+      control: { type: "text" },
+    },
+    description: {
+      defaultValue: "Dit fulde navn",
+      control: { type: "text" },
+    },
+    validation: {
+      defaultValue: "Fejlbesked lorem ipsum dolor",
+      control: { type: "text" },
     },
-    description: { defaultValue: "Dit fulde navn" },
-    validation: { defaultValue: "Fejlbesked lorem ipsum dolor" },
   },
   parameters: {
     design: {

diff --git a/src/stories/Library/Forms/input/Input.tsx b/src/stories/Library/Forms/input/Input.tsx
@@ -15,9 +15,9 @@ const Input = (props: InputProps) => {
   const invalid = validation ? "true" : "false";
   return (
     <div
-      className={clsx("dpl-input", classNames, [
-        { "dpl-input--invalid": !!validation },
-      ])}
+      className={clsx("dpl-input", classNames, {
+        "dpl-input--invalid": !!validation,
+      })}
     >
       <Label id={id}>{label}</Label>
       <input

diff --git a/src/stories/Library/Forms/input/input.scss b/src/stories/Library/Forms/input/input.scss
@@ -11,7 +11,7 @@
   input {
     background-color: transparent;
     border: none;
-    border-bottom: 1px solid $color__global-tertiary-1;
+    border-bottom: 1px solid $color__global-tertiary-2;
     height: 40px;
 
     &:focus {

diff --git a/src/stories/Library/Forms/textarea/textarea.scss b/src/stories/Library/Forms/textarea/textarea.scss
@@ -6,7 +6,7 @@
 
     textarea {
       @include typography($typo__body-placeholder);
-      border: solid 1px $color__global-tertiary-1;
+      border: solid 1px $color__global-tertiary-2;
       width: 100%;
       padding: $s-md;
       resize: none;

diff --git a/src/stories/Library/header-sidebar-nav/header-sidebar-nav.scss b/src/stories/Library/header-sidebar-nav/header-sidebar-nav.scss
@@ -16,10 +16,6 @@ $_menu_animation_delay: 0.2s;
   transform: translateX(-100%);
   transition: transform $_transition_speed $_bezier_transition;
 
-  @include media-query__small {
-    display: none;
-  }
-
   ul.header__menu-navigation {
     padding: 0;
     display: flex;
@@ -46,6 +42,8 @@ $_menu_animation_delay: 0.2s;
     text-decoration: none;
     position: relative;
     display: inline-block;
+    white-space: normal;
+    word-break: break-word;
   }
 
   .header__menu-navigation-link::after {
@@ -115,6 +113,10 @@ $_menu_animation_delay: 0.2s;
     --sidebar-padding: #{$s-lg};
   }
 
+  .header-sidebar-nav {
+    display: none;
+  }
+
   .header-sidebar-nav__menu-wrapper {
     max-width: 375px;
     grid-gap: $s-lg;
@@ -124,3 +126,11 @@ $_menu_animation_delay: 0.2s;
     padding-top: 120px;
   }
 }
+
+// This reflects the current override of the burger menu state, which is
+// controlled by the .has-burger-menu class on the html element.
+// This takes effect when the desktop-menu has too many items, and gets
+// changed to a burger menu.
+.has-burger-menu .header-sidebar-nav {
+  display: block;
+}