From 93e3708c74e98fe3aa5a0a7285cc4fa977da9433 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Thu, 16 Mar 2023 11:39:44 +0100
Subject: [PATCH 01/37] Change AutosuggestText structure so it only has 1 <ul>
 & 1 level of <li>

Because the autosuggest serves the role of a combobox it has to have
a specific structure.
https://www.w3.org/TR/wai-aria-1.1/#option
https://www.w3.org/TR/wai-aria-1.1/#listbox
https://www.w3.org/Translations/WCAG21-da/#parsing
---
 .../autosuggest-text/AutosuggestText.tsx      | 28 ++++++++-----------
 .../autosuggest-text/autosuggest-text.scss    | 20 +++++++++----
 2 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/stories/Library/autosuggest-text/AutosuggestText.tsx b/src/stories/Library/autosuggest-text/AutosuggestText.tsx
index b841ee4fe..e1fa4bc0c 100644
--- a/src/stories/Library/autosuggest-text/AutosuggestText.tsx
+++ b/src/stories/Library/autosuggest-text/AutosuggestText.tsx
@@ -7,22 +7,18 @@ export const AutosuggestText = (props: AutosuggestTextProps) => {
   const { items, categoryText } = props;
   return (
     <ul className="autosuggest pb-16">
-      <li>
-        <ul>
-          {items.map((item) => {
-            return (
-              <li className="autosuggest__text text-body-medium-regular px-24">
-                {item}
-                {categoryText && (
-                  <div className="boxed-text text-tags noselect ml-8">
-                    {categoryText}
-                  </div>
-                )}
-              </li>
-            );
-          })}
-        </ul>
-      </li>
+      {items.map((item) => {
+        return (
+          <li className="autosuggest__text-item text-body-medium-regular px-24">
+            <p className="autosuggest__text text-body-medium-regular">{item}</p>
+            {categoryText && (
+              <div className="boxed-text text-tags noselect ml-8">
+                {categoryText}
+              </div>
+            )}
+          </li>
+        );
+      })}
     </ul>
   );
 };
diff --git a/src/stories/Library/autosuggest-text/autosuggest-text.scss b/src/stories/Library/autosuggest-text/autosuggest-text.scss
index a6942e3ea..7a116e5f9 100644
--- a/src/stories/Library/autosuggest-text/autosuggest-text.scss
+++ b/src/stories/Library/autosuggest-text/autosuggest-text.scss
@@ -6,15 +6,16 @@
   right: 0;
   top: calc(100% + 1px);
   z-index: 1;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding-top: $s-md;
 
-  @include breakpoint-m {
-    padding-top: $s-md;
-  }
-
-  &__text {
+  &__text-item {
+    min-height: 40px;
+    width: 100%;
     display: flex;
     align-items: center;
-    min-height: 40px;
 
     @include breakpoint-m {
       // Because the main autosuggest is a prominent feature we don't want the hover
@@ -30,10 +31,17 @@
 
     @include breakpoint-l {
       height: 40px;
+      padding-right: $s-lg;
     }
 
     &--highlight {
       background-color: $c-global-secondary;
     }
   }
+
+  &__text {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
 }

From fccb5968fee1f510f6f61b072aa0a625aca161ea Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Thu, 16 Mar 2023 11:42:40 +0100
Subject: [PATCH 02/37] Change AutosuggestMaterial structure to only 1 <ul> & 1
 level of <li>

Because the autosuggest serves the role of a combobox it has to have
a specific structure.
https://www.w3.org/TR/wai-aria-1.1/#option
https://www.w3.org/TR/wai-aria-1.1/#listbox
https://www.w3.org/Translations/WCAG21-da/#parsing
---
 .../AutosuggestMaterial.tsx                   | 43 ++++++++-----------
 .../autosuggest-material.scss                 | 33 +++++---------
 2 files changed, 30 insertions(+), 46 deletions(-)

diff --git a/src/stories/Library/autosuggest-material/AutosuggestMaterial.tsx b/src/stories/Library/autosuggest-material/AutosuggestMaterial.tsx
index c3534df6d..0bbd691ce 100644
--- a/src/stories/Library/autosuggest-material/AutosuggestMaterial.tsx
+++ b/src/stories/Library/autosuggest-material/AutosuggestMaterial.tsx
@@ -14,33 +14,28 @@ export const AutosuggestMaterial: React.FC<AutosuggestMaterialProps> = ({
 }) => {
   return (
     <ul className="autosuggest pb-16">
-      <li>
-        <ul>
-          <li className="autosuggest__text text-body-medium-regular px-24">
-            I am a contextual text item
-          </li>
-        </ul>
+      {/* The contextual item needs to be up to date with AutosuggestText.tsx as it imitates it. */}
+      <li className="autosuggest__text-item text-body-medium-regular px-24">
+        <p className="autosuggest__text text-body-medium-regular">
+          I am a contextual item
+        </p>
       </li>
       <li className="autosuggest__divider" />
-      <li>
-        <ul className="autosuggest__materials">
-          {items.map((item) => {
-            return (
-              <li className="autosuggest__material">
-                <div className="autosuggest__material__content">
-                  <Cover size="xsmall" animate src={item.cover} shadow />
-                  <div className="autosuggest__info">
-                    <div className="text-body-medium-medium autosuggest__title">
-                      {item.title}
-                    </div>
-                    <div className="text-body-small-regular autosuggest__author">{`${item.author} (${item.year})`}</div>
-                  </div>
+      {items.map((item) => {
+        return (
+          <li className="autosuggest__material-item">
+            <div className="autosuggest__material-card">
+              <Cover size="xsmall" animate src={item.cover} shadow />
+              <div className="autosuggest__info">
+                <div className="text-body-medium-medium autosuggest__title">
+                  {item.title}
                 </div>
-              </li>
-            );
-          })}
-        </ul>
-      </li>
+                <div className="text-body-small-regular autosuggest__author">{`${item.author} (${item.year})`}</div>
+              </div>
+            </div>
+          </li>
+        );
+      })}
     </ul>
   );
 };
diff --git a/src/stories/Library/autosuggest-material/autosuggest-material.scss b/src/stories/Library/autosuggest-material/autosuggest-material.scss
index dcc56477a..1c995f615 100644
--- a/src/stories/Library/autosuggest-material/autosuggest-material.scss
+++ b/src/stories/Library/autosuggest-material/autosuggest-material.scss
@@ -5,32 +5,21 @@
     height: 1px;
     border: 0;
     border-top: 1px solid $c-global-tertiary-1;
-    margin: 20px 0;
+    margin: $s-md 0;
     padding: 0;
   }
 
-  &__materials {
-    display: flex;
-    flex-direction: column;
-    margin: 0 15px;
-
-    @include breakpoint-m {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      justify-content: center;
-    }
-  }
-
-  &__material {
+  &__material-item {
     width: 100%;
-    overflow: hidden;
-    padding: 7px 0;
+    overflow: visible;
+    padding: $s-sm $s-md;
 
     &:last-child {
       margin-bottom: 0;
     }
 
     @include breakpoint-m {
+      width: calc(100% / 3);
       // Because the main autosuggest is a prominent feature we don't want the hover
       // effect to take effect on phones, as iPhones have a known bug that requires
       // users to double click in order to get past hover to register a click.
@@ -43,13 +32,13 @@
     &--highlight {
       background-color: $c-global-secondary;
     }
+  }
 
-    &__content {
-      display: flex;
-      flex-flow: row nowrap;
-      gap: 15px;
-      width: 95%;
-    }
+  &__material-card {
+    display: flex;
+    flex-flow: row nowrap;
+    gap: 15px;
+    width: 95%;
   }
 
   &__info {

From c7cb28d5a9326985888f7a79d1f83e04919eace1 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Thu, 16 Mar 2023 11:55:29 +0100
Subject: [PATCH 03/37] Expand autosuggest text items on mobile for long title
 names

---
 .../Library/autosuggest-text/autosuggest-text.scss        | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/stories/Library/autosuggest-text/autosuggest-text.scss b/src/stories/Library/autosuggest-text/autosuggest-text.scss
index 7a116e5f9..70d5cb26f 100644
--- a/src/stories/Library/autosuggest-text/autosuggest-text.scss
+++ b/src/stories/Library/autosuggest-text/autosuggest-text.scss
@@ -40,8 +40,10 @@
   }
 
   &__text {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    @include breakpoint-m {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
   }
 }

From 2b5fd56b405eb23b69d69162011fd43c0bd07b83 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Thu, 16 Mar 2023 13:20:17 +0100
Subject: [PATCH 04/37] Introduce a separate story for fully assembled
 Autosuggest Block

This required minor reworks in the other autosuggest components so that
we don't repeat code.
---
 .../autosuggest/Autosuggest.stories.tsx       | 69 +++++++++++++++++++
 .../Blocks/autosuggest/Autosuggest.tsx        | 32 +++++++++
 .../AutosuggestMaterial.stories.tsx           | 32 +++------
 .../AutosuggestMaterial.tsx                   | 16 ++---
 .../material-suggestions.tsx                  | 22 ++++++
 .../AutosuggestText.stories.tsx               | 12 ++--
 .../autosuggest-text/AutosuggestText.tsx      | 12 ++--
 7 files changed, 150 insertions(+), 45 deletions(-)
 create mode 100644 src/stories/Blocks/autosuggest/Autosuggest.stories.tsx
 create mode 100644 src/stories/Blocks/autosuggest/Autosuggest.tsx
 create mode 100644 src/stories/Library/autosuggest-material/material-suggestions.tsx

diff --git a/src/stories/Blocks/autosuggest/Autosuggest.stories.tsx b/src/stories/Blocks/autosuggest/Autosuggest.stories.tsx
new file mode 100644
index 000000000..12548d76d
--- /dev/null
+++ b/src/stories/Blocks/autosuggest/Autosuggest.stories.tsx
@@ -0,0 +1,69 @@
+import { ComponentStory } from "@storybook/react";
+import { withDesign } from "storybook-addon-designs";
+import materialSuggestions from "../../Library/autosuggest-material/material-suggestions";
+import { Autosuggest, AutosuggestProps } from "./Autosuggest";
+
+export default {
+  title: "Blocks / Autosuggest",
+  component: Autosuggest,
+  decorators: [withDesign],
+  argTypes: {
+    textProps: {
+      name: "Text props",
+      defaultValue: {
+        textSuggestions: ["Item one", "Item two"],
+        categoryText: "ebook",
+      },
+      control: { type: "object" },
+    },
+    materialProps: {
+      name: "Material props",
+      defaultValue: materialSuggestions,
+      control: { type: "object" },
+    },
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/ETOZIfmgGS1HUfio57SOh7/S%C3%B8gning?node-id=4709%3A24976",
+    },
+  },
+};
+
+const Template: ComponentStory<typeof Autosuggest> = (
+  args: AutosuggestProps
+) => (
+  // Apart from <Autosuggest />, everything else is here just for the story
+  // context. The autosuggest styling is directly dependent on the header component,
+  // Please keep up to date with Header.tsx
+  <header className="header" style={{ height: "144px" }}>
+    <div className="header__logo-desktop">
+      <p className="text-body-medium-regular">Context</p>
+    </div>
+    <div className="header__menu">
+      <nav className="header__menu-first">
+        <p className="text-body-medium-regular">Context</p>
+      </nav>
+      <div className="header__menu-second">
+        <div className="header__menu-search">
+          <input
+            className="header__menu-search-input text-body-medium-regular"
+            type="text"
+            placeholder="This field is here just for context."
+          />
+          <img
+            className="header__menu-search-icon"
+            src="icons/basic/icon-search.svg"
+            alt="search icon"
+          />
+          <Autosuggest {...args} />
+        </div>
+      </div>
+    </div>
+    <div className="header__clock">
+      <p className="text-body-medium-regular">Context</p>
+    </div>
+  </header>
+);
+
+export const Default = Template.bind({});
diff --git a/src/stories/Blocks/autosuggest/Autosuggest.tsx b/src/stories/Blocks/autosuggest/Autosuggest.tsx
new file mode 100644
index 000000000..0811e02e9
--- /dev/null
+++ b/src/stories/Blocks/autosuggest/Autosuggest.tsx
@@ -0,0 +1,32 @@
+import {
+  AutosuggestMaterial,
+  AutosuggestMaterialProps,
+} from "../../Library/autosuggest-material/AutosuggestMaterial";
+import {
+  AutosuggestText,
+  AutosuggestTextProps,
+} from "../../Library/autosuggest-text/AutosuggestText";
+
+export type AutosuggestProps = {
+  textProps: AutosuggestTextProps;
+  materialProps: AutosuggestMaterialProps["materialSuggestions"];
+};
+
+export const Autosuggest: React.FC<AutosuggestProps> = ({
+  textProps,
+  materialProps,
+}) => {
+  return (
+    <ul className="autosuggest pb-16">
+      <AutosuggestText textSuggestions={textProps.textSuggestions} />
+      <AutosuggestMaterial materialSuggestions={materialProps} />
+      <li className="autosuggest__divider" />
+      <AutosuggestText
+        textSuggestions={textProps.textSuggestions}
+        categoryText={textProps.categoryText}
+      />
+    </ul>
+  );
+};
+
+export default Autosuggest;
diff --git a/src/stories/Library/autosuggest-material/AutosuggestMaterial.stories.tsx b/src/stories/Library/autosuggest-material/AutosuggestMaterial.stories.tsx
index dfc2984e3..c7e006037 100644
--- a/src/stories/Library/autosuggest-material/AutosuggestMaterial.stories.tsx
+++ b/src/stories/Library/autosuggest-material/AutosuggestMaterial.stories.tsx
@@ -1,37 +1,20 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { withDesign } from "storybook-addon-designs";
+import { AutosuggestText } from "../autosuggest-text/AutosuggestText";
 import {
   AutosuggestMaterial,
   AutosuggestMaterialProps,
 } from "./AutosuggestMaterial";
+import materialSuggestions from "./material-suggestions";
 
 export default {
   title: "Library / Autosuggest - Material",
   component: AutosuggestMaterial,
   decorators: [withDesign],
   argTypes: {
-    items: {
-      name: "Items",
-      defaultValue: [
-        {
-          cover: "images/book_cover_1.jpg",
-          title: "De uadskillelige",
-          author: "Simone De Beauvoir",
-          year: "1954",
-        },
-        {
-          cover: "images/book_cover_2.jpg",
-          title: "Den lille bog om dansk design",
-          author: "Marie Hugsted",
-          year: "2018",
-        },
-        {
-          cover: "images/book_cover_3.jpg",
-          title: "Audrey Hepburn",
-          author: "Maria Isabel Sanchez Vegara",
-          year: "2018",
-        },
-      ],
+    materialSuggestions: {
+      name: "Material suggestions",
+      defaultValue: materialSuggestions,
       control: { type: "array" },
     },
   },
@@ -70,7 +53,10 @@ const Template: ComponentStory<typeof AutosuggestMaterial> = (
             src="icons/basic/icon-search.svg"
             alt="search icon"
           />
-          <AutosuggestMaterial {...args} />
+          <ul className="autosuggest pb-16">
+            <AutosuggestText textSuggestions={["I am a contextual item"]} />
+            <AutosuggestMaterial {...args} />
+          </ul>
         </div>
       </div>
     </div>
diff --git a/src/stories/Library/autosuggest-material/AutosuggestMaterial.tsx b/src/stories/Library/autosuggest-material/AutosuggestMaterial.tsx
index 0bbd691ce..1cbcd93f9 100644
--- a/src/stories/Library/autosuggest-material/AutosuggestMaterial.tsx
+++ b/src/stories/Library/autosuggest-material/AutosuggestMaterial.tsx
@@ -1,7 +1,7 @@
 import Cover from "../cover/Cover";
 
 export type AutosuggestMaterialProps = {
-  items: {
+  materialSuggestions: {
     cover: string;
     title: string;
     author: string;
@@ -10,18 +10,12 @@ export type AutosuggestMaterialProps = {
 };
 
 export const AutosuggestMaterial: React.FC<AutosuggestMaterialProps> = ({
-  items,
+  materialSuggestions,
 }) => {
   return (
-    <ul className="autosuggest pb-16">
-      {/* The contextual item needs to be up to date with AutosuggestText.tsx as it imitates it. */}
-      <li className="autosuggest__text-item text-body-medium-regular px-24">
-        <p className="autosuggest__text text-body-medium-regular">
-          I am a contextual item
-        </p>
-      </li>
+    <>
       <li className="autosuggest__divider" />
-      {items.map((item) => {
+      {materialSuggestions.map((item) => {
         return (
           <li className="autosuggest__material-item">
             <div className="autosuggest__material-card">
@@ -36,6 +30,6 @@ export const AutosuggestMaterial: React.FC<AutosuggestMaterialProps> = ({
           </li>
         );
       })}
-    </ul>
+    </>
   );
 };
diff --git a/src/stories/Library/autosuggest-material/material-suggestions.tsx b/src/stories/Library/autosuggest-material/material-suggestions.tsx
new file mode 100644
index 000000000..9f428b748
--- /dev/null
+++ b/src/stories/Library/autosuggest-material/material-suggestions.tsx
@@ -0,0 +1,22 @@
+const materialSuggestions = [
+  {
+    cover: "images/book_cover_1.jpg",
+    title: "De uadskillelige",
+    author: "Simone De Beauvoir",
+    year: "1954",
+  },
+  {
+    cover: "images/book_cover_2.jpg",
+    title: "Den lille bog om dansk design",
+    author: "Marie Hugsted",
+    year: "2018",
+  },
+  {
+    cover: "images/book_cover_3.jpg",
+    title: "Audrey Hepburn",
+    author: "Maria Isabel Sanchez Vegara",
+    year: "2018",
+  },
+];
+
+export default materialSuggestions;
diff --git a/src/stories/Library/autosuggest-text/AutosuggestText.stories.tsx b/src/stories/Library/autosuggest-text/AutosuggestText.stories.tsx
index 24e96b709..f0673fcc8 100644
--- a/src/stories/Library/autosuggest-text/AutosuggestText.stories.tsx
+++ b/src/stories/Library/autosuggest-text/AutosuggestText.stories.tsx
@@ -8,8 +8,8 @@ export default {
   component: AutosuggestText,
   decorators: [withDesign],
   argTypes: {
-    items: {
-      name: "Items",
+    textSuggestions: {
+      name: "Text suggestions",
       defaultValue: ["Item one", "Item two"],
       control: { type: "array" },
     },
@@ -52,7 +52,9 @@ const Template: ComponentStory<typeof AutosuggestText> = (
             src="icons/basic/icon-search.svg"
             alt="search icon"
           />
-          <AutosuggestText {...args} />
+          <ul className="autosuggest pb-16">
+            <AutosuggestText {...args} />
+          </ul>
         </div>
       </div>
     </div>
@@ -66,12 +68,12 @@ export const TextSuggestion = Template.bind({});
 
 export const TextSuggestionWithCategory = Template.bind({});
 TextSuggestionWithCategory.args = {
-  items: ["Item one", "Item two"],
+  textSuggestions: ["Item one", "Item two"],
   categoryText: "Author",
 };
 export const MultipleLineTextSuggestion = Template.bind({});
 MultipleLineTextSuggestion.args = {
-  items: [
+  textSuggestions: [
     "Lorem ipsum hal de pretty clanging scales, because seldom they have seemed seven over the top (work)",
     "Lorem ipsum hal de pretty clanging scales, because seldom they have seemed seven over the top (work)",
     "Author Name (author)",
diff --git a/src/stories/Library/autosuggest-text/AutosuggestText.tsx b/src/stories/Library/autosuggest-text/AutosuggestText.tsx
index e1fa4bc0c..476263921 100644
--- a/src/stories/Library/autosuggest-text/AutosuggestText.tsx
+++ b/src/stories/Library/autosuggest-text/AutosuggestText.tsx
@@ -1,13 +1,13 @@
 export type AutosuggestTextProps = {
-  items: string[];
-  categoryText: string;
+  textSuggestions: string[];
+  categoryText?: string;
 };
 
 export const AutosuggestText = (props: AutosuggestTextProps) => {
-  const { items, categoryText } = props;
+  const { textSuggestions, categoryText } = props;
   return (
-    <ul className="autosuggest pb-16">
-      {items.map((item) => {
+    <>
+      {textSuggestions.map((item) => {
         return (
           <li className="autosuggest__text-item text-body-medium-regular px-24">
             <p className="autosuggest__text text-body-medium-regular">{item}</p>
@@ -19,6 +19,6 @@ export const AutosuggestText = (props: AutosuggestTextProps) => {
           </li>
         );
       })}
-    </ul>
+    </>
   );
 };

From 73cbc60ed1c2c9a2bab28eb25be8365f43105aad Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Tue, 21 Mar 2023 15:49:43 +0100
Subject: [PATCH 05/37] Remove unnecessary overflow: visible from the
 autosuggest__material-item

...class.
---
 .../Library/autosuggest-material/autosuggest-material.scss       | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/stories/Library/autosuggest-material/autosuggest-material.scss b/src/stories/Library/autosuggest-material/autosuggest-material.scss
index 1c995f615..7932aafad 100644
--- a/src/stories/Library/autosuggest-material/autosuggest-material.scss
+++ b/src/stories/Library/autosuggest-material/autosuggest-material.scss
@@ -11,7 +11,6 @@
 
   &__material-item {
     width: 100%;
-    overflow: visible;
     padding: $s-sm $s-md;
 
     &:last-child {

From aabb6fd2c6b22f3a6d6331d4205f20f2c09b39e7 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Tue, 21 Mar 2023 17:12:30 +0100
Subject: [PATCH 06/37] Remove autosuggest <li> elements that served as
 dividers + styling

They were never really eligible items in that list. The dividers will
be added using just styling in order not to clutter the list with extra
items.
---
 src/stories/Blocks/autosuggest/Autosuggest.tsx         |  1 -
 .../autosuggest-material/AutosuggestMaterial.tsx       |  1 -
 .../autosuggest-material/autosuggest-material.scss     | 10 ----------
 3 files changed, 12 deletions(-)

diff --git a/src/stories/Blocks/autosuggest/Autosuggest.tsx b/src/stories/Blocks/autosuggest/Autosuggest.tsx
index 0811e02e9..fb9a02cad 100644
--- a/src/stories/Blocks/autosuggest/Autosuggest.tsx
+++ b/src/stories/Blocks/autosuggest/Autosuggest.tsx
@@ -20,7 +20,6 @@ export const Autosuggest: React.FC<AutosuggestProps> = ({
     <ul className="autosuggest pb-16">
       <AutosuggestText textSuggestions={textProps.textSuggestions} />
       <AutosuggestMaterial materialSuggestions={materialProps} />
-      <li className="autosuggest__divider" />
       <AutosuggestText
         textSuggestions={textProps.textSuggestions}
         categoryText={textProps.categoryText}
diff --git a/src/stories/Library/autosuggest-material/AutosuggestMaterial.tsx b/src/stories/Library/autosuggest-material/AutosuggestMaterial.tsx
index 1cbcd93f9..364368b55 100644
--- a/src/stories/Library/autosuggest-material/AutosuggestMaterial.tsx
+++ b/src/stories/Library/autosuggest-material/AutosuggestMaterial.tsx
@@ -14,7 +14,6 @@ export const AutosuggestMaterial: React.FC<AutosuggestMaterialProps> = ({
 }) => {
   return (
     <>
-      <li className="autosuggest__divider" />
       {materialSuggestions.map((item) => {
         return (
           <li className="autosuggest__material-item">
diff --git a/src/stories/Library/autosuggest-material/autosuggest-material.scss b/src/stories/Library/autosuggest-material/autosuggest-material.scss
index 7932aafad..d8d1777f1 100644
--- a/src/stories/Library/autosuggest-material/autosuggest-material.scss
+++ b/src/stories/Library/autosuggest-material/autosuggest-material.scss
@@ -1,14 +1,4 @@
 .autosuggest {
-  &__divider {
-    width: 100%;
-    display: block;
-    height: 1px;
-    border: 0;
-    border-top: 1px solid $c-global-tertiary-1;
-    margin: $s-md 0;
-    padding: 0;
-  }
-
   &__material-item {
     width: 100%;
     padding: $s-sm $s-md;

From 30385f392d793569a3685553dcba59457013968e Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Tue, 21 Mar 2023 17:14:31 +0100
Subject: [PATCH 07/37] Add autosuggest dividers between sections using only
 scss styling

This way we can avoid cluttering the autosuggest unordered list with
extra items that are semantically not a part of it.
---
 .../autosuggest-material.scss                 | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/src/stories/Library/autosuggest-material/autosuggest-material.scss b/src/stories/Library/autosuggest-material/autosuggest-material.scss
index d8d1777f1..f12e740f7 100644
--- a/src/stories/Library/autosuggest-material/autosuggest-material.scss
+++ b/src/stories/Library/autosuggest-material/autosuggest-material.scss
@@ -23,6 +23,43 @@
     }
   }
 
+  // Autosuggest dividers on phones:
+  // - between text suggestions & material suggestions
+  &__text-item + &__material-item {
+    border-top: 1px solid $c-global-tertiary-1;
+    margin-top: $s-md;
+    padding-top: $s-md;
+
+    @include breakpoint-m {
+      border: none;
+      margin: 0;
+    }
+  }
+  // - between material suggestions & text suggestions
+  &__material-item + &__text-item {
+    border-top: 1px solid $c-global-tertiary-1;
+    margin-top: $s-md;
+    padding-top: $s-md;
+
+    @include breakpoint-m {
+      border: none;
+      padding-top: 0;
+      margin-top: 0;
+    }
+  }
+
+  // Autosuggest dividers on desktop:
+  // - both dividers are rendered if both types of suggestions are present
+  &__text-item ~ &__material-item {
+    @include breakpoint-m {
+      border-top: 1px solid $c-global-tertiary-1;
+      border-bottom: 1px solid $c-global-tertiary-1;
+      margin: $s-md 0;
+      padding-top: $s-md;
+      padding-bottom: $s-md;
+    }
+  }
+
   &__material-card {
     display: flex;
     flex-flow: row nowrap;

From 58af0de3fbc9c1a95b8c96bba727a18bb251d9b6 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Wed, 22 Mar 2023 09:11:59 +0100
Subject: [PATCH 08/37] Add an accessible aria-label to the cover component
 link

Otherwise we don't pass a11y accessibility test on GH.
---
 src/stories/Library/cover/Cover.tsx | 3 ++-
 src/stories/Library/cover/types.ts  | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/stories/Library/cover/Cover.tsx b/src/stories/Library/cover/Cover.tsx
index 5092b9d8f..d20ee7ad5 100644
--- a/src/stories/Library/cover/Cover.tsx
+++ b/src/stories/Library/cover/Cover.tsx
@@ -12,6 +12,7 @@ const Cover: FC<CoverProps> = ({
   coverUrl,
   description,
   shadow,
+  ariaLabel = "Link to the material",
 }) => {
   const [imageLoaded, setImageLoaded] = useState<boolean | null>(null);
 
@@ -28,7 +29,7 @@ const Cover: FC<CoverProps> = ({
     // Images inside links must have an non-empty alt text to meet accessibility requirements.
     // Only render the cover as a link if we have both an url and a description.
     return (
-      <a className={classes.wrapper} href={coverUrl}>
+      <a className={classes.wrapper} href={coverUrl} aria-label={ariaLabel}>
         <CoverImage
           setImageLoaded={() => setImageLoaded(true)}
           src={src}
diff --git a/src/stories/Library/cover/types.ts b/src/stories/Library/cover/types.ts
index c3ce6dc92..b5b59b7e6 100644
--- a/src/stories/Library/cover/types.ts
+++ b/src/stories/Library/cover/types.ts
@@ -6,4 +6,5 @@ export type CoverProps = {
   coverUrl?: string;
   description?: string;
   shadow?: boolean;
+  ariaLabel?: string;
 };

From c39eb9eeca3bdc4d64aa742c7e540c24dff55a15 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Wed, 22 Mar 2023 09:30:12 +0100
Subject: [PATCH 09/37] Move general autosuggest styling into its own scss file

That way the general styling is in the folder with autosuggest.tsx,
while autosuggest-text and autosuggest-material are together with their
styling.
---
 base.scss                                           |  6 ++++--
 src/stories/Blocks/autosuggest/autosuggest.scss     | 13 +++++++++++++
 .../Library/autosuggest-text/autosuggest-text.scss  | 12 ------------
 3 files changed, 17 insertions(+), 14 deletions(-)
 create mode 100644 src/stories/Blocks/autosuggest/autosuggest.scss

diff --git a/base.scss b/base.scss
index c3a66647d..a27271855 100644
--- a/base.scss
+++ b/base.scss
@@ -35,8 +35,6 @@
 @import "./src/stories/Library/warning-status/warning-status";
 @import "./src/stories/Library/availability-label/availability-label";
 @import "./src/stories/Library/avatar/avatar";
-@import "./src/stories/Library/autosuggest-text/autosuggest-text";
-@import "./src/stories/Library/autosuggest-material/autosuggest-material";
 @import "./src/stories/Library/material-card/material-card";
 @import "./src/stories/Library/search-result-item/search-result-item";
 @import "./src/stories/Library/search-result-item/search-result-item-skeleton";
@@ -92,6 +90,10 @@
 @import "./src/stories/Library/Lists/list-intermediates/list-intermediates";
 @import "./src/stories/Library/instant-loan/instant-loan";
 @import "./src/stories/Library/scroll-lock-background/scroll-lock-background";
+// Autosuggest block styling needs to be loaded before the rest of the scss for autosuggest
+@import "./src/stories/Blocks/autosuggest/autosuggest";
+@import "./src/stories/Library/autosuggest-text/autosuggest-text";
+@import "./src/stories/Library/autosuggest-material/autosuggest-material";
 
 // Blocks
 @import "./src/stories/Blocks/footer/footer";
diff --git a/src/stories/Blocks/autosuggest/autosuggest.scss b/src/stories/Blocks/autosuggest/autosuggest.scss
new file mode 100644
index 000000000..0b5a84cb4
--- /dev/null
+++ b/src/stories/Blocks/autosuggest/autosuggest.scss
@@ -0,0 +1,13 @@
+.autosuggest {
+  background-color: $c-global-primary;
+  outline: 1px solid $c-global-tertiary-1;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: calc(100% + 1px);
+  z-index: 1;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding-top: $s-md;
+}
diff --git a/src/stories/Library/autosuggest-text/autosuggest-text.scss b/src/stories/Library/autosuggest-text/autosuggest-text.scss
index 70d5cb26f..2b3d34e7b 100644
--- a/src/stories/Library/autosuggest-text/autosuggest-text.scss
+++ b/src/stories/Library/autosuggest-text/autosuggest-text.scss
@@ -1,16 +1,4 @@
 .autosuggest {
-  background-color: $c-global-primary;
-  outline: 1px solid $c-global-tertiary-1;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: calc(100% + 1px);
-  z-index: 1;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  padding-top: $s-md;
-
   &__text-item {
     min-height: 40px;
     width: 100%;

From 4ded129e02793a16409fc5cd3c99a63bf9eb5783 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Wed, 22 Mar 2023 09:37:06 +0100
Subject: [PATCH 10/37] Correct autosuggest material padding according to Figma

https://www.figma.com/file/ETOZIfmgGS1HUfio57SOh7/S%C3%B8gning?node-id=155%3A9185&t=cNkyv0lwsCW349Qv-1
---
 .../autosuggest-material/autosuggest-material.scss        | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/stories/Library/autosuggest-material/autosuggest-material.scss b/src/stories/Library/autosuggest-material/autosuggest-material.scss
index f12e740f7..41d1e7e4b 100644
--- a/src/stories/Library/autosuggest-material/autosuggest-material.scss
+++ b/src/stories/Library/autosuggest-material/autosuggest-material.scss
@@ -28,7 +28,7 @@
   &__text-item + &__material-item {
     border-top: 1px solid $c-global-tertiary-1;
     margin-top: $s-md;
-    padding-top: $s-md;
+    padding-top: $s-lg;
 
     @include breakpoint-m {
       border: none;
@@ -54,9 +54,9 @@
     @include breakpoint-m {
       border-top: 1px solid $c-global-tertiary-1;
       border-bottom: 1px solid $c-global-tertiary-1;
-      margin: $s-md 0;
-      padding-top: $s-md;
-      padding-bottom: $s-md;
+      margin: $s-lg 0;
+      padding-top: $s-lg;
+      padding-bottom: $s-lg;
     }
   }
 

From 91a8b8c837098c1d132b5d66968d045bcae88d31 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Thu, 23 Mar 2023 11:08:12 +0100
Subject: [PATCH 11/37] Correct autosuggest spacing between text & material
 suggestions

It wasn't according to the design.
https://www.figma.com/file/ETOZIfmgGS1HUfio57SOh7/S%C3%B8gning?node-id=155%3A9185&t=mR3Or0R9ilk0e8iC-1
---
 .../Library/autosuggest-material/autosuggest-material.scss      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stories/Library/autosuggest-material/autosuggest-material.scss b/src/stories/Library/autosuggest-material/autosuggest-material.scss
index 41d1e7e4b..b2f5e3a26 100644
--- a/src/stories/Library/autosuggest-material/autosuggest-material.scss
+++ b/src/stories/Library/autosuggest-material/autosuggest-material.scss
@@ -27,7 +27,7 @@
   // - between text suggestions & material suggestions
   &__text-item + &__material-item {
     border-top: 1px solid $c-global-tertiary-1;
-    margin-top: $s-md;
+    margin-top: $s-lg;
     padding-top: $s-lg;
 
     @include breakpoint-m {

From 4f884ea413bbb98d5c629829afa2539bfe96c630 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Thu, 23 Mar 2023 11:10:00 +0100
Subject: [PATCH 12/37] Simplify autosuggest-text story (remove unnecessary
 header component)

We now have a separate story for autosuggest as a whole - under Blocks /
/ Autosuggest where this code is present. We would like to remove as
much of this duplication as possible.
---
 .../AutosuggestText.stories.tsx               | 61 ++++++-------------
 1 file changed, 17 insertions(+), 44 deletions(-)

diff --git a/src/stories/Library/autosuggest-text/AutosuggestText.stories.tsx b/src/stories/Library/autosuggest-text/AutosuggestText.stories.tsx
index f0673fcc8..2bf433926 100644
--- a/src/stories/Library/autosuggest-text/AutosuggestText.stories.tsx
+++ b/src/stories/Library/autosuggest-text/AutosuggestText.stories.tsx
@@ -10,7 +10,7 @@ export default {
   argTypes: {
     textSuggestions: {
       name: "Text suggestions",
-      defaultValue: ["Item one", "Item two"],
+      defaultValue: ["Item one (author)", "Item two (work)"],
       control: { type: "array" },
     },
     categoryText: {
@@ -30,52 +30,25 @@ export default {
 const Template: ComponentStory<typeof AutosuggestText> = (
   args: AutosuggestTextProps
 ) => (
-  // apart from SuggestText, everything else is here just for the story context
-  // SuggestText style is directly dependent on the header and search field styling
-  <header className="header" style={{ height: "144px" }}>
-    <div className="header__logo-desktop">
-      <p className="text-body-medium-regular">Context</p>
-    </div>
-    <div className="header__menu">
-      <nav className="header__menu-first">
-        <p className="text-body-medium-regular">Context</p>
-      </nav>
-      <div className="header__menu-second">
-        <div className="header__menu-search">
-          <input
-            className="header__menu-search-input text-body-medium-regular"
-            type="text"
-            placeholder="This field is here just for context."
-          />
-          <img
-            className="header__menu-search-icon"
-            src="icons/basic/icon-search.svg"
-            alt="search icon"
-          />
-          <ul className="autosuggest pb-16">
-            <AutosuggestText {...args} />
-          </ul>
-        </div>
-      </div>
-    </div>
-    <div className="header__clock">
-      <p className="text-body-medium-regular">Context</p>
-    </div>
-  </header>
+  <div className="header__menu-search">
+    <ul className="autosuggest pb-16">
+      <AutosuggestText {...args} />
+    </ul>
+  </div>
 );
 
-export const TextSuggestion = Template.bind({});
+export const Default = Template.bind({});
 
-export const TextSuggestionWithCategory = Template.bind({});
-TextSuggestionWithCategory.args = {
-  textSuggestions: ["Item one", "Item two"],
-  categoryText: "Author",
-};
-export const MultipleLineTextSuggestion = Template.bind({});
-MultipleLineTextSuggestion.args = {
+export const MultipleLines = Template.bind({});
+MultipleLines.args = {
   textSuggestions: [
-    "Lorem ipsum hal de pretty clanging scales, because seldom they have seemed seven over the top (work)",
-    "Lorem ipsum hal de pretty clanging scales, because seldom they have seemed seven over the top (work)",
-    "Author Name (author)",
+    "Lorem ipsum hal de pretty clanging scales, because seldom they have seemed seven over the top lorem ipsum hal de pretty clanging scales, because seldom they have seemed seven over the top lorem ipsum hal de pretty clanging scales, because seldom they have seemed (work)",
+    "Item two (work)",
   ],
 };
+
+export const WithCategoryTag = Template.bind({});
+WithCategoryTag.args = {
+  textSuggestions: ["Item one", "Item two"],
+  categoryText: "Author",
+};

From c776794241b6a5bc1df8f3bf65cb331b0c7464b1 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Thu, 23 Mar 2023 11:13:00 +0100
Subject: [PATCH 13/37] Simplify autosuggest-material story(remove unnecessary
 header component)

We now have a separate story for autosuggest as a whole - under Blocks /
/ Autosuggest where this code is present. We would like to remove as
much of this duplication as possible.
---
 .../AutosuggestMaterial.stories.tsx           | 80 ++++++++++---------
 1 file changed, 41 insertions(+), 39 deletions(-)

diff --git a/src/stories/Library/autosuggest-material/AutosuggestMaterial.stories.tsx b/src/stories/Library/autosuggest-material/AutosuggestMaterial.stories.tsx
index c7e006037..0c30186d3 100644
--- a/src/stories/Library/autosuggest-material/AutosuggestMaterial.stories.tsx
+++ b/src/stories/Library/autosuggest-material/AutosuggestMaterial.stories.tsx
@@ -1,11 +1,30 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { withDesign } from "storybook-addon-designs";
-import { AutosuggestText } from "../autosuggest-text/AutosuggestText";
 import {
   AutosuggestMaterial,
   AutosuggestMaterialProps,
 } from "./AutosuggestMaterial";
-import materialSuggestions from "./material-suggestions";
+
+const autosuggestMaterialSuggestions = [
+  {
+    cover: "images/book_cover_1.jpg",
+    title: "De uadskillelige",
+    author: "Simone De Beauvoir",
+    year: "1954",
+  },
+  {
+    cover: "images/book_cover_2.jpg",
+    title: "Den lille bog om dansk design",
+    author: "Marie Hugsted",
+    year: "2018",
+  },
+  {
+    cover: "images/book_cover_3.jpg",
+    title: "Audrey Hepburn",
+    author: "Maria Isabel Sanchez Vegara",
+    year: "2018",
+  },
+];
 
 export default {
   title: "Library / Autosuggest - Material",
@@ -14,7 +33,7 @@ export default {
   argTypes: {
     materialSuggestions: {
       name: "Material suggestions",
-      defaultValue: materialSuggestions,
+      defaultValue: autosuggestMaterialSuggestions,
       control: { type: "array" },
     },
   },
@@ -29,41 +48,24 @@ export default {
 const Template: ComponentStory<typeof AutosuggestMaterial> = (
   args: AutosuggestMaterialProps
 ) => (
-  // Apart from AutosuggestMaterial, everything else is here just for the story
-  // context. AutosuggestMaterial style is directly dependent on the header,
-  // search field, and AutosuggestText styling.
-  // If you find out this context no longer represents reality, please adjust it.
-  <header className="header" style={{ height: "144px" }}>
-    <div className="header__logo-desktop">
-      <p className="text-body-medium-regular">Context</p>
-    </div>
-    <div className="header__menu">
-      <nav className="header__menu-first">
-        <p className="text-body-medium-regular">Context</p>
-      </nav>
-      <div className="header__menu-second">
-        <div className="header__menu-search">
-          <input
-            className="header__menu-search-input text-body-medium-regular"
-            type="text"
-            placeholder="This field is here just for context."
-          />
-          <img
-            className="header__menu-search-icon"
-            src="icons/basic/icon-search.svg"
-            alt="search icon"
-          />
-          <ul className="autosuggest pb-16">
-            <AutosuggestText textSuggestions={["I am a contextual item"]} />
-            <AutosuggestMaterial {...args} />
-          </ul>
-        </div>
-      </div>
-    </div>
-    <div className="header__clock">
-      <p className="text-body-medium-regular">Context</p>
-    </div>
-  </header>
+  <div className="header__menu-search">
+    <ul className="autosuggest pb-16">
+      <AutosuggestMaterial {...args} />
+    </ul>
+  </div>
 );
 
-export const MaterialSuggestion = Template.bind({});
+export const Default = Template.bind({});
+
+export const TwoItems = Template.bind({});
+TwoItems.args = {
+  materialSuggestions: [
+    autosuggestMaterialSuggestions[0],
+    autosuggestMaterialSuggestions[1],
+  ],
+};
+
+export const SingleItem = Template.bind({});
+SingleItem.args = {
+  materialSuggestions: [autosuggestMaterialSuggestions[0]],
+};

From 111de5b59c7751936758ae34084c9096d30eb32e Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Thu, 23 Mar 2023 11:14:45 +0100
Subject: [PATCH 14/37] Refactor Blocks/Autosuggest story to use default values
 from substories

This simplifies the code & we avoid code duplication. As a part of this
step - materialSuggestions constant definition is removed.
---
 .../autosuggest/Autosuggest.stories.tsx       | 18 ++++-----------
 .../Blocks/autosuggest/Autosuggest.tsx        | 18 +++++++--------
 .../material-suggestions.tsx                  | 22 -------------------
 3 files changed, 12 insertions(+), 46 deletions(-)
 delete mode 100644 src/stories/Library/autosuggest-material/material-suggestions.tsx

diff --git a/src/stories/Blocks/autosuggest/Autosuggest.stories.tsx b/src/stories/Blocks/autosuggest/Autosuggest.stories.tsx
index 12548d76d..0f4dbe3f1 100644
--- a/src/stories/Blocks/autosuggest/Autosuggest.stories.tsx
+++ b/src/stories/Blocks/autosuggest/Autosuggest.stories.tsx
@@ -1,26 +1,16 @@
 import { ComponentStory } from "@storybook/react";
 import { withDesign } from "storybook-addon-designs";
-import materialSuggestions from "../../Library/autosuggest-material/material-suggestions";
 import { Autosuggest, AutosuggestProps } from "./Autosuggest";
+import AutosuggestMaterialStories from "../../Library/autosuggest-material/AutosuggestMaterial.stories";
+import AutosuggestTextStories from "../../Library/autosuggest-text/AutosuggestText.stories";
 
 export default {
   title: "Blocks / Autosuggest",
   component: Autosuggest,
   decorators: [withDesign],
   argTypes: {
-    textProps: {
-      name: "Text props",
-      defaultValue: {
-        textSuggestions: ["Item one", "Item two"],
-        categoryText: "ebook",
-      },
-      control: { type: "object" },
-    },
-    materialProps: {
-      name: "Material props",
-      defaultValue: materialSuggestions,
-      control: { type: "object" },
-    },
+    ...AutosuggestMaterialStories.argTypes,
+    ...AutosuggestTextStories.argTypes,
   },
   parameters: {
     design: {
diff --git a/src/stories/Blocks/autosuggest/Autosuggest.tsx b/src/stories/Blocks/autosuggest/Autosuggest.tsx
index fb9a02cad..8662724dc 100644
--- a/src/stories/Blocks/autosuggest/Autosuggest.tsx
+++ b/src/stories/Blocks/autosuggest/Autosuggest.tsx
@@ -7,22 +7,20 @@ import {
   AutosuggestTextProps,
 } from "../../Library/autosuggest-text/AutosuggestText";
 
-export type AutosuggestProps = {
-  textProps: AutosuggestTextProps;
-  materialProps: AutosuggestMaterialProps["materialSuggestions"];
-};
+export type AutosuggestProps = AutosuggestTextProps & AutosuggestMaterialProps;
 
 export const Autosuggest: React.FC<AutosuggestProps> = ({
-  textProps,
-  materialProps,
+  textSuggestions,
+  categoryText,
+  materialSuggestions,
 }) => {
   return (
     <ul className="autosuggest pb-16">
-      <AutosuggestText textSuggestions={textProps.textSuggestions} />
-      <AutosuggestMaterial materialSuggestions={materialProps} />
+      <AutosuggestText textSuggestions={textSuggestions} />
+      <AutosuggestMaterial materialSuggestions={materialSuggestions} />
       <AutosuggestText
-        textSuggestions={textProps.textSuggestions}
-        categoryText={textProps.categoryText}
+        textSuggestions={textSuggestions}
+        categoryText={categoryText}
       />
     </ul>
   );
diff --git a/src/stories/Library/autosuggest-material/material-suggestions.tsx b/src/stories/Library/autosuggest-material/material-suggestions.tsx
deleted file mode 100644
index 9f428b748..000000000
--- a/src/stories/Library/autosuggest-material/material-suggestions.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-const materialSuggestions = [
-  {
-    cover: "images/book_cover_1.jpg",
-    title: "De uadskillelige",
-    author: "Simone De Beauvoir",
-    year: "1954",
-  },
-  {
-    cover: "images/book_cover_2.jpg",
-    title: "Den lille bog om dansk design",
-    author: "Marie Hugsted",
-    year: "2018",
-  },
-  {
-    cover: "images/book_cover_3.jpg",
-    title: "Audrey Hepburn",
-    author: "Maria Isabel Sanchez Vegara",
-    year: "2018",
-  },
-];
-
-export default materialSuggestions;

From 69a11d97cfc59f919c288de1e5e9a4d3768c102b Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Fri, 14 Apr 2023 13:39:28 +0200
Subject: [PATCH 15/37] CMN-541: update css in recommender/somethinglikethis

---
 .../recommender/Recommender.stories.tsx       | 30 +++++++++++--
 .../Library/recommender/Recommender.tsx       | 27 ++++++++++--
 .../Library/recommender/recommender.scss      | 43 +++++++++++++------
 3 files changed, 81 insertions(+), 19 deletions(-)

diff --git a/src/stories/Library/recommender/Recommender.stories.tsx b/src/stories/Library/recommender/Recommender.stories.tsx
index b3d9af866..56647f79d 100644
--- a/src/stories/Library/recommender/Recommender.stories.tsx
+++ b/src/stories/Library/recommender/Recommender.stories.tsx
@@ -7,13 +7,24 @@ export default {
   argTypes: {
     title: {
       control: "text",
-      defaultValue:
-        "Kunne du lide “Audrey Hepburn” og mangler du noget at læse?",
+      defaultValue: "Because you have borrowed something you may also like",
     },
     bright: {
       control: { type: "boolean" },
       defaultValue: true,
     },
+    padding: {
+      control: { type: "boolean" },
+      defaultValue: true,
+    },
+    titleLeft: {
+      control: { type: "boolean" },
+      defaultValue: false,
+    },
+    triple: {
+      control: { type: "boolean" },
+      defaultValue: true,
+    },
     recommenderData: {
       control: "object",
       defaultValue: [
@@ -42,9 +53,20 @@ export default {
   },
 } as ComponentMeta<typeof Recommender>;
 
-const Template: ComponentStory<typeof Recommender> = (args) => (
+const RecommenderMC: ComponentStory<typeof Recommender> = (args) => (
+  <Recommender {...args} />
+);
+
+const SomethingSimilarMC: ComponentStory<typeof Recommender> = (args) => (
   <Recommender {...args} />
 );
 
-export const Recommend = Template.bind({});
+export const Recommend = RecommenderMC.bind({});
+export const SomethingSimilar = SomethingSimilarMC.bind({});
 Recommend.args = {};
+SomethingSimilar.args = {
+  padding: false,
+  titleLeft: true,
+  title: "Something similar",
+  triple: false,
+};
diff --git a/src/stories/Library/recommender/Recommender.tsx b/src/stories/Library/recommender/Recommender.tsx
index 836ccfc26..c33955f16 100644
--- a/src/stories/Library/recommender/Recommender.tsx
+++ b/src/stories/Library/recommender/Recommender.tsx
@@ -10,16 +10,33 @@ export type RecommenderProps = {
   recommenderData: RecommenderData[];
   title: string;
   bright: boolean;
+  padding: boolean;
+  titleLeft: boolean;
+  triple: boolean;
 };
 
 const Recommender: React.FC<RecommenderProps> = ({
   recommenderData,
   title,
   bright,
+  padding,
+  titleLeft,
+  triple,
 }) => {
   return (
-    <div className={`recommender ${bright ? "recommender--bright" : ""}`}>
-      <h2 className="recommender__title text-header-h1">{title}</h2>
+    <div
+      className={`recommender ${padding ? "recommender--padding-desktop" : ""}
+        ${triple ? "recommender--triple-desktop " : ""} ${
+        bright ? "recommender--bright" : ""
+      }`}
+    >
+      <h2
+        className={`${
+          titleLeft ? "recommender__left-title" : "recommender__title"
+        } text-header-h1`}
+      >
+        {title}
+      </h2>
       <div className="recommender__buttons">
         <button
           type="button"
@@ -36,7 +53,11 @@ const Recommender: React.FC<RecommenderProps> = ({
           By the same author
         </button>
       </div>
-      <ul className="recommender__grid">
+      <ul
+        className={`${
+          triple ? "recommender__triple-grid" : "recommender__grid"
+        }`}
+      >
         {recommenderData.map(({ title: recTitle, filled, authors }) => (
           <li
             className={`recommender-material ${
diff --git a/src/stories/Library/recommender/recommender.scss b/src/stories/Library/recommender/recommender.scss
index 4c4a2901c..a9c95ae99 100644
--- a/src/stories/Library/recommender/recommender.scss
+++ b/src/stories/Library/recommender/recommender.scss
@@ -3,15 +3,23 @@
   color: $c-text-primary-white;
   border-color: $c-text-secondary-gray;
 
-  @include breakpoint-m {
-    padding: $s-6xl;
-  }
-
   &--bright {
     background-color: $c-global-primary;
     color: $c-text-primary-black;
     border-color: $c-global-tertiary-1;
+  }
+
+  &--triple-desktop {
+    @include breakpoint-m {
+      .recommender-material {
+        &:last-of-type {
+          display: none;
+        }
+      }
+    }
+  }
 
+  &--padding-desktop {
     @include breakpoint-m {
       padding: $s-6xl;
     }
@@ -25,18 +33,25 @@
       padding-bottom: $s-6xl;
     }
   }
-  &__title--left {
+
+  &__left-title {
     text-align: left;
+    padding-left: $s-md;
+
+    @include breakpoint-m {
+      padding-left: $s-4xl;
+    }
   }
 
   &__buttons {
     display: flex;
     justify-content: end;
     margin-bottom: $s-md;
+    margin-right: $s-md;
     gap: $s-md;
   }
 
-  &__grid {
+  &__triple-grid {
     display: grid;
     grid-template-columns: 50% 50%;
     grid-template-rows: 50% 50%;
@@ -45,6 +60,16 @@
       grid-template-columns: 33.33% 33.33% 33.33%;
     }
   }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: 50% 50%;
+    grid-template-rows: 50% 50%;
+
+    @include breakpoint-m {
+      grid-template-columns: 25% 25% 25% 25%;
+    }
+  }
 }
 
 .recommender-material {
@@ -55,12 +80,6 @@
   position: relative;
   height: 350px;
 
-  @include breakpoint-m {
-    &:last-of-type {
-      display: none;
-    }
-  }
-
   &--bright {
     border: 1px solid $c-global-tertiary-1;
   }

From 9e5c650187c6adf0916bf36f4ef622306d834142 Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Fri, 14 Apr 2023 13:44:55 +0200
Subject: [PATCH 16/37] CMN-541: add stylelint disable nesting depth,

---
 src/stories/Library/recommender/recommender.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stories/Library/recommender/recommender.scss b/src/stories/Library/recommender/recommender.scss
index a9c95ae99..c79830c54 100644
--- a/src/stories/Library/recommender/recommender.scss
+++ b/src/stories/Library/recommender/recommender.scss
@@ -8,7 +8,7 @@
     color: $c-text-primary-black;
     border-color: $c-global-tertiary-1;
   }
-
+  /* stylelint-disable max-nesting-depth */
   &--triple-desktop {
     @include breakpoint-m {
       .recommender-material {

From b03ab5728b6471ed0224ea0e7d3320becb40203e Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Mon, 17 Apr 2023 10:40:33 +0200
Subject: [PATCH 17/37] 5396: rename search result item

---
 architecture/adr-001-skeleton-screens.md      |  2 +-
 base.scss                                     |  4 ++--
 .../CardListItem.stories.tsx}                 | 21 ++++++++-----------
 .../CardListItem.tsx}                         | 18 ++++++++--------
 .../CardListItemSkeleton.tsx}                 |  4 ++--
 .../card-list-item-skeleton.scss}             |  2 +-
 .../card-list-item.scss}                      | 12 +++++------
 .../search-result-page/SearchResultPage.tsx   |  4 ++--
 .../SearchResultPageSkeleton.tsx              | 12 +++++------
 9 files changed, 38 insertions(+), 41 deletions(-)
 rename src/stories/Library/{search-result-item/SearchResultItem.stories.tsx => card-list-item/CardListItem.stories.tsx} (75%)
 rename src/stories/Library/{search-result-item/SearchResultItem.tsx => card-list-item/CardListItem.tsx} (82%)
 rename src/stories/Library/{search-result-item/SearchResultItemSkeleton.tsx => card-list-item/CardListItemSkeleton.tsx} (71%)
 rename src/stories/Library/{search-result-item/search-result-item-skeleton.scss => card-list-item/card-list-item-skeleton.scss} (95%)
 rename src/stories/Library/{search-result-item/search-result-item.scss => card-list-item/card-list-item.scss} (84%)

diff --git a/architecture/adr-001-skeleton-screens.md b/architecture/adr-001-skeleton-screens.md
index a83eacef3..f64695bf4 100644
--- a/architecture/adr-001-skeleton-screens.md
+++ b/architecture/adr-001-skeleton-screens.md
@@ -40,4 +40,4 @@ client side or server side.
 Because we want to use existing styling setup in conjunction
 with the Skeleton Screen Classes we sometimes need to ignore the existing
 BEM rules that we normally comply to.
-See eg. the [search result styling](../src/stories/Library/search-result-item/search-result-item-skeleton.scss).
+See eg. the [search result styling](../src/stories/Library/card-list-item/card-list-item-skeleton.scss).
diff --git a/base.scss b/base.scss
index 236477c34..bd841a0ef 100644
--- a/base.scss
+++ b/base.scss
@@ -38,8 +38,8 @@
 @import "./src/stories/Library/autosuggest-text/autosuggest-text";
 @import "./src/stories/Library/autosuggest-material/autosuggest-material";
 @import "./src/stories/Library/material-card/material-card";
-@import "./src/stories/Library/search-result-item/search-result-item";
-@import "./src/stories/Library/search-result-item/search-result-item-skeleton";
+@import "./src/stories/Library/card-list-item/card-list-item";
+@import "./src/stories/Library/card-list-item/card-list-item-skeleton";
 @import "./src/stories/Library/Lists/list-reservation/list-reservation";
 @import "./src/stories/Library/Lists/list-dashboard/list-dashboard";
 @import "./src/stories/Library/Lists/list-description/list-description";
diff --git a/src/stories/Library/search-result-item/SearchResultItem.stories.tsx b/src/stories/Library/card-list-item/CardListItem.stories.tsx
similarity index 75%
rename from src/stories/Library/search-result-item/SearchResultItem.stories.tsx
rename to src/stories/Library/card-list-item/CardListItem.stories.tsx
index e7435fc44..4daa38415 100644
--- a/src/stories/Library/search-result-item/SearchResultItem.stories.tsx
+++ b/src/stories/Library/card-list-item/CardListItem.stories.tsx
@@ -1,12 +1,11 @@
 import { withDesign } from "storybook-addon-designs";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
-
-import { SearchResultItem } from "./SearchResultItem";
-import { SearchResultItemSkeleton } from "./SearchResultItemSkeleton";
+import { CardListItem } from "./CardListItem";
+import { CardListItemSkeleton } from "./CardListItemSkeleton";
 
 export default {
-  title: "Library / Search Result Item",
-  component: SearchResultItem,
+  title: "Library / Card List Item",
+  component: CardListItem,
   decorators: [withDesign],
   parameters: {
     design: {
@@ -50,10 +49,10 @@ export default {
       defaultValue: 3,
     },
   },
-} as ComponentMeta<typeof SearchResultItem>;
+} as ComponentMeta<typeof CardListItem>;
 
-export const Item: ComponentStory<typeof SearchResultItem> = (args) => {
-  return <SearchResultItem {...args} />;
+export const Item: ComponentStory<typeof CardListItem> = (args) => {
+  return <CardListItem {...args} />;
 };
 
 export const ContentOverload = Item.bind({});
@@ -64,8 +63,6 @@ ContentOverload.args = {
   availabilityLabels: 25,
 };
 
-export const SkeletonItem: ComponentStory<
-  typeof SearchResultItemSkeleton
-> = () => {
-  return <SearchResultItemSkeleton />;
+export const SkeletonItem: ComponentStory<typeof CardListItemSkeleton> = () => {
+  return <CardListItemSkeleton />;
 };
diff --git a/src/stories/Library/search-result-item/SearchResultItem.tsx b/src/stories/Library/card-list-item/CardListItem.tsx
similarity index 82%
rename from src/stories/Library/search-result-item/SearchResultItem.tsx
rename to src/stories/Library/card-list-item/CardListItem.tsx
index bd47d3d4e..42f8f6191 100644
--- a/src/stories/Library/search-result-item/SearchResultItem.tsx
+++ b/src/stories/Library/card-list-item/CardListItem.tsx
@@ -8,7 +8,7 @@ import HorizontalTermLine, {
 } from "../horizontal-term-line/HorizontalTermLine";
 import { getCoverTint } from "../cover/helper";
 
-export type SearchResultItemProps = {
+export type CardListItemProps = {
   heartFill?: boolean;
   title: string;
   author: string;
@@ -18,7 +18,7 @@ export type SearchResultItemProps = {
   tintIndex: number;
 };
 
-export const SearchResultItem = ({
+export const CardListItem = ({
   heartFill,
   title,
   author,
@@ -26,7 +26,7 @@ export const SearchResultItem = ({
   horizontalTermLineData,
   availabilityLabels,
   tintIndex,
-}: SearchResultItemProps) => {
+}: CardListItemProps) => {
   const materialTypes: AvailabilityLabelPropsType["manifestationType"][] = [
     "Bog",
     "Ebog",
@@ -35,8 +35,8 @@ export const SearchResultItem = ({
   ];
 
   return (
-    <a href="/" className="search-result-item arrow arrow__hover--right-small">
-      <div className="search-result-item__cover">
+    <a href="/" className="card-list-item arrow arrow__hover--right-small">
+      <div className="card-list-item__cover">
         <Cover
           src="images/book_cover_3.jpg"
           size="small"
@@ -44,20 +44,20 @@ export const SearchResultItem = ({
           tint={getCoverTint(tintIndex)}
         />
       </div>
-      <div className="search-result-item__text">
-        <div className="search-result-item__meta">
+      <div className="card-list-item__text">
+        <div className="card-list-item__meta">
           <ButtonFavourite fill={heartFill} />
           {horizontalTermLineData && (
             <HorizontalTermLine {...horizontalTermLineData} />
           )}
         </div>
 
-        <h2 className="search-result-item__title text-header-h4 mb-4">
+        <h2 className="card-list-item__title text-header-h4 mb-4">
           <a href="">{title}</a>
         </h2>
         <p className="text-small-caption">{`Af ${author} (${year})`}</p>
       </div>
-      <div className="search-result-item__availability">
+      <div className="card-list-item__availability">
         {/* We render the amount of availability labels defined by the story. */}
         {Array(availabilityLabels)
           .fill(0)
diff --git a/src/stories/Library/search-result-item/SearchResultItemSkeleton.tsx b/src/stories/Library/card-list-item/CardListItemSkeleton.tsx
similarity index 71%
rename from src/stories/Library/search-result-item/SearchResultItemSkeleton.tsx
rename to src/stories/Library/card-list-item/CardListItemSkeleton.tsx
index 6daa8efef..d51d10fc1 100644
--- a/src/stories/Library/search-result-item/SearchResultItemSkeleton.tsx
+++ b/src/stories/Library/card-list-item/CardListItemSkeleton.tsx
@@ -1,6 +1,6 @@
-export const SearchResultItemSkeleton = () => {
+export const CardListItemSkeleton = () => {
   return (
-    <div className="search-result-item arrow arrow__hover--right-small ssc">
+    <div className="card-list-item arrow arrow__hover--right-small ssc">
       <div className="ssc-square cover--size-small">&nbsp;</div>
       <div className="ssc-wrapper">
         <div className="ssc-head-line mb" />
diff --git a/src/stories/Library/search-result-item/search-result-item-skeleton.scss b/src/stories/Library/card-list-item/card-list-item-skeleton.scss
similarity index 95%
rename from src/stories/Library/search-result-item/search-result-item-skeleton.scss
rename to src/stories/Library/card-list-item/card-list-item-skeleton.scss
index 42e2cd751..e4ef423cc 100644
--- a/src/stories/Library/search-result-item/search-result-item-skeleton.scss
+++ b/src/stories/Library/card-list-item/card-list-item-skeleton.scss
@@ -2,7 +2,7 @@
 // we deliberately not follow the BEM naming convention here.
 /* stylelint-disable plugin/stylelint-bem-namics */
 
-.search-result-item {
+.card-list-item {
   &.ssc {
     grid-template-columns: min-content 1fr;
   }
diff --git a/src/stories/Library/search-result-item/search-result-item.scss b/src/stories/Library/card-list-item/card-list-item.scss
similarity index 84%
rename from src/stories/Library/search-result-item/search-result-item.scss
rename to src/stories/Library/card-list-item/card-list-item.scss
index 7921205a5..9d08fce4a 100644
--- a/src/stories/Library/search-result-item/search-result-item.scss
+++ b/src/stories/Library/card-list-item/card-list-item.scss
@@ -1,4 +1,4 @@
-.search-result-item {
+.card-list-item {
   background-color: #fff;
   padding: 16px 24px;
   display: grid;
@@ -20,9 +20,9 @@
   }
 }
 
-@include arrow("search-result-item");
+@include arrow("card-list-item");
 
-.search-result-item__cover {
+.card-list-item__cover {
   grid-row: span 2;
 
   @include breakpoint-s {
@@ -30,7 +30,7 @@
   }
 }
 
-.search-result-item__availability {
+.card-list-item__availability {
   grid-column: 2;
   display: flex;
   align-content: center;
@@ -42,12 +42,12 @@
   }
 }
 
-.search-result-item__meta {
+.card-list-item__meta {
   display: flex;
   gap: 10px;
 }
 
-.search-result-item__title {
+.card-list-item__title {
   margin-top: 10px;
 
   & > a {
diff --git a/src/stories/Library/search-result-page/SearchResultPage.tsx b/src/stories/Library/search-result-page/SearchResultPage.tsx
index 65d052982..52d75292a 100644
--- a/src/stories/Library/search-result-page/SearchResultPage.tsx
+++ b/src/stories/Library/search-result-page/SearchResultPage.tsx
@@ -1,4 +1,4 @@
-import { SearchResultItem } from "../search-result-item/SearchResultItem";
+import { CardListItem } from "../card-list-item/CardListItem";
 import { SearchResultInfo } from "./SearchResultInfo";
 import ResultPager from "./ResultPager";
 import { SearchResultTitle } from "./SearchResultTitle";
@@ -17,7 +17,7 @@ export type SearchResultPageProps = {
 };
 
 const SearchResultList = data.searchResult.map((item, i) => {
-  return <SearchResultItem {...item} tintIndex={i} />;
+  return <CardListItem {...item} tintIndex={i} />;
 });
 
 export const SearchResultPage = ({
diff --git a/src/stories/Library/search-result-page/SearchResultPageSkeleton.tsx b/src/stories/Library/search-result-page/SearchResultPageSkeleton.tsx
index 9b93394a7..d99ed7755 100644
--- a/src/stories/Library/search-result-page/SearchResultPageSkeleton.tsx
+++ b/src/stories/Library/search-result-page/SearchResultPageSkeleton.tsx
@@ -1,5 +1,5 @@
 import { SearchResultTitle } from "./SearchResultTitle";
-import { SearchResultItemSkeleton } from "../search-result-item/SearchResultItemSkeleton";
+import { CardListItemSkeleton } from "../card-list-item/CardListItemSkeleton";
 
 export type SearchResultPageSkeletonProps = {
   title: string;
@@ -35,19 +35,19 @@ export const SearchResultPageSkeleton = ({
       </div>
       <ul className="search-result-page__list my-32">
         <li>
-          <SearchResultItemSkeleton />
+          <CardListItemSkeleton />
         </li>
         <li>
-          <SearchResultItemSkeleton />
+          <CardListItemSkeleton />
         </li>
         <li>
-          <SearchResultItemSkeleton />
+          <CardListItemSkeleton />
         </li>
         <li>
-          <SearchResultItemSkeleton />
+          <CardListItemSkeleton />
         </li>
         <li>
-          <SearchResultItemSkeleton />
+          <CardListItemSkeleton />
         </li>
       </ul>
     </div>

From 62b9482a5b27e46b2199eeb6e08f8903be5696b9 Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Wed, 19 Apr 2023 10:08:05 +0200
Subject: [PATCH 18/37] 5396: rename search-result-page to card-list-page

---
 base.scss                                          | 14 +++++++-------
 .../FacetLine.tsx                                  |  0
 .../FacetLineSelectedTerms.tsx                     |  0
 .../ResultPager.tsx                                |  0
 .../SearchResultInfo.tsx                           |  0
 .../SearchResultPage.stories.tsx                   |  0
 .../SearchResultPage.tsx                           |  6 ++----
 .../SearchResultPageData.ts                        |  0
 .../SearchResultPageSkeleton.tsx                   |  8 ++++----
 .../SearchResultTitle.stories.tsx                  |  0
 .../SearchResultTitle.tsx                          |  0
 .../SearchResultZero.tsx                           |  0
 .../card-list-page-skeleton.scss}                  |  2 +-
 .../card-list-page.scss}                           |  2 +-
 .../facet-line.scss                                |  0
 .../result-pager.scss                              |  0
 .../search-result-info.scss                        |  0
 .../search-result-title.scss                       |  0
 .../search-result-zero.scss                        |  0
 19 files changed, 15 insertions(+), 17 deletions(-)
 rename src/stories/Library/{search-result-page => card-list-page}/FacetLine.tsx (100%)
 rename src/stories/Library/{search-result-page => card-list-page}/FacetLineSelectedTerms.tsx (100%)
 rename src/stories/Library/{search-result-page => card-list-page}/ResultPager.tsx (100%)
 rename src/stories/Library/{search-result-page => card-list-page}/SearchResultInfo.tsx (100%)
 rename src/stories/Library/{search-result-page => card-list-page}/SearchResultPage.stories.tsx (100%)
 rename src/stories/Library/{search-result-page => card-list-page}/SearchResultPage.tsx (91%)
 rename src/stories/Library/{search-result-page => card-list-page}/SearchResultPageData.ts (100%)
 rename src/stories/Library/{search-result-page => card-list-page}/SearchResultPageSkeleton.tsx (83%)
 rename src/stories/Library/{search-result-page => card-list-page}/SearchResultTitle.stories.tsx (100%)
 rename src/stories/Library/{search-result-page => card-list-page}/SearchResultTitle.tsx (100%)
 rename src/stories/Library/{search-result-page => card-list-page}/SearchResultZero.tsx (100%)
 rename src/stories/Library/{search-result-page/search-result-page-skeleton.scss => card-list-page/card-list-page-skeleton.scss} (81%)
 rename src/stories/Library/{search-result-page/search-result-page.scss => card-list-page/card-list-page.scss} (88%)
 rename src/stories/Library/{search-result-page => card-list-page}/facet-line.scss (100%)
 rename src/stories/Library/{search-result-page => card-list-page}/result-pager.scss (100%)
 rename src/stories/Library/{search-result-page => card-list-page}/search-result-info.scss (100%)
 rename src/stories/Library/{search-result-page => card-list-page}/search-result-title.scss (100%)
 rename src/stories/Library/{search-result-page => card-list-page}/search-result-zero.scss (100%)

diff --git a/base.scss b/base.scss
index bd841a0ef..891457b99 100644
--- a/base.scss
+++ b/base.scss
@@ -69,16 +69,16 @@
 @import "./src/stories/Library/material-description/material-description";
 @import "./src/stories/Library/disclosure/disclosure";
 @import "./src/stories/Library/horizontal-term-line/horizontal-term-line";
-@import "./src/stories/Library/search-result-page/search-result-info";
-@import "./src/stories/Library/search-result-page/search-result-page";
-@import "./src/stories/Library/search-result-page/search-result-page-skeleton";
+@import "./src/stories/Library/card-list-page/search-result-info";
+@import "./src/stories/Library/card-list-page/card-list-page";
+@import "./src/stories/Library/card-list-page/card-list-page-skeleton";
 @import "./src/stories/Library/loan-list-page/loan-list-page";
 @import "./src/stories/Library/patron-page/patron-page";
 @import "./src/stories/Library/reservation-list-page/reservation-list-page";
-@import "./src/stories/Library/search-result-page/result-pager";
-@import "./src/stories/Library/search-result-page/search-result-title";
-@import "./src/stories/Library/search-result-page/search-result-zero";
-@import "./src/stories/Library/search-result-page/facet-line";
+@import "./src/stories/Library/card-list-page/result-pager";
+@import "./src/stories/Library/card-list-page/search-result-title";
+@import "./src/stories/Library/card-list-page/search-result-zero";
+@import "./src/stories/Library/card-list-page/facet-line";
 @import "./src/stories/Library/review/review";
 @import "./src/stories/Library/shadows/shadows";
 @import "./src/stories/Library/boxed-text/boxed-text";
diff --git a/src/stories/Library/search-result-page/FacetLine.tsx b/src/stories/Library/card-list-page/FacetLine.tsx
similarity index 100%
rename from src/stories/Library/search-result-page/FacetLine.tsx
rename to src/stories/Library/card-list-page/FacetLine.tsx
diff --git a/src/stories/Library/search-result-page/FacetLineSelectedTerms.tsx b/src/stories/Library/card-list-page/FacetLineSelectedTerms.tsx
similarity index 100%
rename from src/stories/Library/search-result-page/FacetLineSelectedTerms.tsx
rename to src/stories/Library/card-list-page/FacetLineSelectedTerms.tsx
diff --git a/src/stories/Library/search-result-page/ResultPager.tsx b/src/stories/Library/card-list-page/ResultPager.tsx
similarity index 100%
rename from src/stories/Library/search-result-page/ResultPager.tsx
rename to src/stories/Library/card-list-page/ResultPager.tsx
diff --git a/src/stories/Library/search-result-page/SearchResultInfo.tsx b/src/stories/Library/card-list-page/SearchResultInfo.tsx
similarity index 100%
rename from src/stories/Library/search-result-page/SearchResultInfo.tsx
rename to src/stories/Library/card-list-page/SearchResultInfo.tsx
diff --git a/src/stories/Library/search-result-page/SearchResultPage.stories.tsx b/src/stories/Library/card-list-page/SearchResultPage.stories.tsx
similarity index 100%
rename from src/stories/Library/search-result-page/SearchResultPage.stories.tsx
rename to src/stories/Library/card-list-page/SearchResultPage.stories.tsx
diff --git a/src/stories/Library/search-result-page/SearchResultPage.tsx b/src/stories/Library/card-list-page/SearchResultPage.tsx
similarity index 91%
rename from src/stories/Library/search-result-page/SearchResultPage.tsx
rename to src/stories/Library/card-list-page/SearchResultPage.tsx
index 52d75292a..892e6b171 100644
--- a/src/stories/Library/search-result-page/SearchResultPage.tsx
+++ b/src/stories/Library/card-list-page/SearchResultPage.tsx
@@ -29,7 +29,7 @@ export const SearchResultPage = ({
   zeroResult,
 }: SearchResultPageProps) => {
   return (
-    <div className="search-result-page">
+    <div className="card-list-page">
       <SearchResultTitle
         title={title}
         totalResults={zeroResult ? 0 : totalResults}
@@ -48,9 +48,7 @@ export const SearchResultPage = ({
           />
           <FacetLine items={data.facetLineItems} />
           <FacetLineSelected items={data.selectedTerms} />
-          <div className="search-result-page__list my-32">
-            {SearchResultList}
-          </div>
+          <div className="card-list-page__list my-32">{SearchResultList}</div>
           <ResultPager
             currentResults={currentResults}
             totalResults={totalResults}
diff --git a/src/stories/Library/search-result-page/SearchResultPageData.ts b/src/stories/Library/card-list-page/SearchResultPageData.ts
similarity index 100%
rename from src/stories/Library/search-result-page/SearchResultPageData.ts
rename to src/stories/Library/card-list-page/SearchResultPageData.ts
diff --git a/src/stories/Library/search-result-page/SearchResultPageSkeleton.tsx b/src/stories/Library/card-list-page/SearchResultPageSkeleton.tsx
similarity index 83%
rename from src/stories/Library/search-result-page/SearchResultPageSkeleton.tsx
rename to src/stories/Library/card-list-page/SearchResultPageSkeleton.tsx
index d99ed7755..358b012b7 100644
--- a/src/stories/Library/search-result-page/SearchResultPageSkeleton.tsx
+++ b/src/stories/Library/card-list-page/SearchResultPageSkeleton.tsx
@@ -14,26 +14,26 @@ export const SearchResultPageSkeleton = ({
   title,
 }: SearchResultPageSkeletonProps) => {
   return (
-    <div className="search-result-page">
+    <div className="card-list-page">
       <SearchResultTitle
         title={title}
         totalResults={0}
         zeroResult={false}
         isLoading
       />
-      <div className="search-result-page__skeleton-facet-line--mobile">
+      <div className="card-list-page__skeleton-facet-line--mobile">
         <div className="ssc mt-48">
           <div className="ssc-head-line mb" />
           <div className="ssc-head-line mb" />
           <div className="ssc-head-line mb" />
         </div>
       </div>
-      <div className="search-result-page__skeleton-facet-line--desktop">
+      <div className="card-list-page__skeleton-facet-line--desktop">
         <div className="ssc mt-48">
           <div className="ssc-head-line mb" />
         </div>
       </div>
-      <ul className="search-result-page__list my-32">
+      <ul className="card-list-page__list my-32">
         <li>
           <CardListItemSkeleton />
         </li>
diff --git a/src/stories/Library/search-result-page/SearchResultTitle.stories.tsx b/src/stories/Library/card-list-page/SearchResultTitle.stories.tsx
similarity index 100%
rename from src/stories/Library/search-result-page/SearchResultTitle.stories.tsx
rename to src/stories/Library/card-list-page/SearchResultTitle.stories.tsx
diff --git a/src/stories/Library/search-result-page/SearchResultTitle.tsx b/src/stories/Library/card-list-page/SearchResultTitle.tsx
similarity index 100%
rename from src/stories/Library/search-result-page/SearchResultTitle.tsx
rename to src/stories/Library/card-list-page/SearchResultTitle.tsx
diff --git a/src/stories/Library/search-result-page/SearchResultZero.tsx b/src/stories/Library/card-list-page/SearchResultZero.tsx
similarity index 100%
rename from src/stories/Library/search-result-page/SearchResultZero.tsx
rename to src/stories/Library/card-list-page/SearchResultZero.tsx
diff --git a/src/stories/Library/search-result-page/search-result-page-skeleton.scss b/src/stories/Library/card-list-page/card-list-page-skeleton.scss
similarity index 81%
rename from src/stories/Library/search-result-page/search-result-page-skeleton.scss
rename to src/stories/Library/card-list-page/card-list-page-skeleton.scss
index 8814632da..99e069794 100644
--- a/src/stories/Library/search-result-page/search-result-page-skeleton.scss
+++ b/src/stories/Library/card-list-page/card-list-page-skeleton.scss
@@ -1,4 +1,4 @@
-.search-result-page__skeleton-facet-line {
+.card-list-page__skeleton-facet-line {
   &--mobile {
     display: block;
     @include breakpoint-s {
diff --git a/src/stories/Library/search-result-page/search-result-page.scss b/src/stories/Library/card-list-page/card-list-page.scss
similarity index 88%
rename from src/stories/Library/search-result-page/search-result-page.scss
rename to src/stories/Library/card-list-page/card-list-page.scss
index c9e3e8a93..51f065d45 100644
--- a/src/stories/Library/search-result-page/search-result-page.scss
+++ b/src/stories/Library/card-list-page/card-list-page.scss
@@ -1,4 +1,4 @@
-.search-result-page {
+.card-list-page {
   background: $c-global-primary;
   padding: 16px;
 
diff --git a/src/stories/Library/search-result-page/facet-line.scss b/src/stories/Library/card-list-page/facet-line.scss
similarity index 100%
rename from src/stories/Library/search-result-page/facet-line.scss
rename to src/stories/Library/card-list-page/facet-line.scss
diff --git a/src/stories/Library/search-result-page/result-pager.scss b/src/stories/Library/card-list-page/result-pager.scss
similarity index 100%
rename from src/stories/Library/search-result-page/result-pager.scss
rename to src/stories/Library/card-list-page/result-pager.scss
diff --git a/src/stories/Library/search-result-page/search-result-info.scss b/src/stories/Library/card-list-page/search-result-info.scss
similarity index 100%
rename from src/stories/Library/search-result-page/search-result-info.scss
rename to src/stories/Library/card-list-page/search-result-info.scss
diff --git a/src/stories/Library/search-result-page/search-result-title.scss b/src/stories/Library/card-list-page/search-result-title.scss
similarity index 100%
rename from src/stories/Library/search-result-page/search-result-title.scss
rename to src/stories/Library/card-list-page/search-result-title.scss
diff --git a/src/stories/Library/search-result-page/search-result-zero.scss b/src/stories/Library/card-list-page/search-result-zero.scss
similarity index 100%
rename from src/stories/Library/search-result-page/search-result-zero.scss
rename to src/stories/Library/card-list-page/search-result-zero.scss

From 63a4dbc1e1bb5c22d9a5fae9ad96758e741cc3fc Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Fri, 21 Apr 2023 09:32:22 +0200
Subject: [PATCH 19/37] 5396: rename files to card list page

---
 ...ge.stories.tsx => CardListPage.stories.tsx} | 18 +++++++++---------
 .../{SearchResultPage.tsx => CardListPage.tsx} |  8 ++++----
 ...chResultPageData.ts => CardListPageData.ts} |  0
 ...geSkeleton.tsx => CardListPageSkeleton.tsx} |  6 ++----
 4 files changed, 15 insertions(+), 17 deletions(-)
 rename src/stories/Library/card-list-page/{SearchResultPage.stories.tsx => CardListPage.stories.tsx} (66%)
 rename src/stories/Library/card-list-page/{SearchResultPage.tsx => CardListPage.tsx} (91%)
 rename src/stories/Library/card-list-page/{SearchResultPageData.ts => CardListPageData.ts} (100%)
 rename src/stories/Library/card-list-page/{SearchResultPageSkeleton.tsx => CardListPageSkeleton.tsx} (90%)

diff --git a/src/stories/Library/card-list-page/SearchResultPage.stories.tsx b/src/stories/Library/card-list-page/CardListPage.stories.tsx
similarity index 66%
rename from src/stories/Library/card-list-page/SearchResultPage.stories.tsx
rename to src/stories/Library/card-list-page/CardListPage.stories.tsx
index 87b8be959..6e9509df9 100644
--- a/src/stories/Library/card-list-page/SearchResultPage.stories.tsx
+++ b/src/stories/Library/card-list-page/CardListPage.stories.tsx
@@ -1,11 +1,11 @@
 import { withDesign } from "storybook-addon-designs";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
-import { SearchResultPage } from "./SearchResultPage";
-import { SearchResultPageSkeleton } from "./SearchResultPageSkeleton";
+import { CardListPage } from "./CardListPage";
+import { CardListPageSkeleton } from "./CardListPageSkeleton";
 
 export default {
-  title: "Blocks / Search Result Page",
-  component: SearchResultPage,
+  title: "Blocks / Card list Page",
+  component: CardListPage,
   decorators: [withDesign],
   parameters: {
     design: {
@@ -40,16 +40,16 @@ export default {
       defaultValue: false,
     },
   },
-} as ComponentMeta<typeof SearchResultPage>;
+} as ComponentMeta<typeof CardListPage>;
 
-const Template: ComponentStory<typeof SearchResultPage> = (args) => {
-  return <SearchResultPage {...args} />;
+const Template: ComponentStory<typeof CardListPage> = (args) => {
+  return <CardListPage {...args} />;
 };
 export const Item = Template.bind({});
 
-const SkeletonTemplate: ComponentStory<typeof SearchResultPageSkeleton> = (
+const SkeletonTemplate: ComponentStory<typeof CardListPageSkeleton> = (
   args
 ) => {
-  return <SearchResultPageSkeleton {...args} />;
+  return <CardListPageSkeleton {...args} />;
 };
 export const SkeletonVersion = SkeletonTemplate.bind({});
diff --git a/src/stories/Library/card-list-page/SearchResultPage.tsx b/src/stories/Library/card-list-page/CardListPage.tsx
similarity index 91%
rename from src/stories/Library/card-list-page/SearchResultPage.tsx
rename to src/stories/Library/card-list-page/CardListPage.tsx
index 892e6b171..62b86edcc 100644
--- a/src/stories/Library/card-list-page/SearchResultPage.tsx
+++ b/src/stories/Library/card-list-page/CardListPage.tsx
@@ -5,9 +5,9 @@ import { SearchResultTitle } from "./SearchResultTitle";
 import { SearchResultZero } from "./SearchResultZero";
 import FacetLine from "./FacetLine";
 import FacetLineSelected from "./FacetLineSelectedTerms";
-import data from "./SearchResultPageData";
+import data from "./CardListPageData";
 
-export type SearchResultPageProps = {
+export type CardListPageProps = {
   title: string;
   currentResults: number;
   totalResults: number;
@@ -20,14 +20,14 @@ const SearchResultList = data.searchResult.map((item, i) => {
   return <CardListItem {...item} tintIndex={i} />;
 });
 
-export const SearchResultPage = ({
+export const CardListPage = ({
   title,
   linkName,
   linkTotalResults,
   currentResults,
   totalResults,
   zeroResult,
-}: SearchResultPageProps) => {
+}: CardListPageProps) => {
   return (
     <div className="card-list-page">
       <SearchResultTitle
diff --git a/src/stories/Library/card-list-page/SearchResultPageData.ts b/src/stories/Library/card-list-page/CardListPageData.ts
similarity index 100%
rename from src/stories/Library/card-list-page/SearchResultPageData.ts
rename to src/stories/Library/card-list-page/CardListPageData.ts
diff --git a/src/stories/Library/card-list-page/SearchResultPageSkeleton.tsx b/src/stories/Library/card-list-page/CardListPageSkeleton.tsx
similarity index 90%
rename from src/stories/Library/card-list-page/SearchResultPageSkeleton.tsx
rename to src/stories/Library/card-list-page/CardListPageSkeleton.tsx
index 358b012b7..1b6edddc6 100644
--- a/src/stories/Library/card-list-page/SearchResultPageSkeleton.tsx
+++ b/src/stories/Library/card-list-page/CardListPageSkeleton.tsx
@@ -1,7 +1,7 @@
 import { SearchResultTitle } from "./SearchResultTitle";
 import { CardListItemSkeleton } from "../card-list-item/CardListItemSkeleton";
 
-export type SearchResultPageSkeletonProps = {
+export type CardListPageSkeletonProps = {
   title: string;
   currentResults: number;
   totalResults: number;
@@ -10,9 +10,7 @@ export type SearchResultPageSkeletonProps = {
   zeroResult: boolean;
 };
 
-export const SearchResultPageSkeleton = ({
-  title,
-}: SearchResultPageSkeletonProps) => {
+export const CardListPageSkeleton = ({ title }: CardListPageSkeletonProps) => {
   return (
     <div className="card-list-page">
       <SearchResultTitle

From 3d41cd7636aa5858644c043e2c5e0cf1bc987b6f Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Tue, 25 Apr 2023 11:06:02 +0200
Subject: [PATCH 20/37] Use the .slice() function to optimize Autosuggest -
 Material story

---
 .../autosuggest-material/AutosuggestMaterial.stories.tsx   | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/stories/Library/autosuggest-material/AutosuggestMaterial.stories.tsx b/src/stories/Library/autosuggest-material/AutosuggestMaterial.stories.tsx
index 0c30186d3..9e76423bf 100644
--- a/src/stories/Library/autosuggest-material/AutosuggestMaterial.stories.tsx
+++ b/src/stories/Library/autosuggest-material/AutosuggestMaterial.stories.tsx
@@ -59,13 +59,10 @@ export const Default = Template.bind({});
 
 export const TwoItems = Template.bind({});
 TwoItems.args = {
-  materialSuggestions: [
-    autosuggestMaterialSuggestions[0],
-    autosuggestMaterialSuggestions[1],
-  ],
+  materialSuggestions: autosuggestMaterialSuggestions.slice(0, 2),
 };
 
 export const SingleItem = Template.bind({});
 SingleItem.args = {
-  materialSuggestions: [autosuggestMaterialSuggestions[0]],
+  materialSuggestions: autosuggestMaterialSuggestions.slice(0, 1),
 };

From 2ea17ea9b66fae3208e51f7292c28469ad5c03bb Mon Sep 17 00:00:00 2001
From: oliver-reload <oliver@reload.dk>
Date: Wed, 26 Apr 2023 17:43:48 +0200
Subject: [PATCH 21/37] Added docs folder and modified README to support
 documentation site

---
 README.md                                     | 352 +-----------------
 docs/README.md                                | 352 ++++++++++++++++++
 .../architecture}/adr-001-skeleton-screens.md |   0
 3 files changed, 359 insertions(+), 345 deletions(-)
 create mode 100644 docs/README.md
 rename {architecture => docs/architecture}/adr-001-skeleton-screens.md (100%)

diff --git a/README.md b/README.md
index 42c692d68..4e0bbb116 100644
--- a/README.md
+++ b/README.md
@@ -1,352 +1,14 @@
-<!-- markdownlint-disable-next-line first-line-h1 -->
-![https://detdigitalefolkebibliotek.dk/sites/default/files/ddf_logo_rgb_blue_web.png](https://detdigitalefolkebibliotek.dk/sites/default/files/ddf_logo_rgb_blue_web.png)
-
-<!-- markdownlint-disable -->
-<!-- START doctoc generated TOC please keep comment here to allow auto update -->
-<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-
-- [DPL Design System](#dpl-design-system)
-  - [Requirements](#requirements)
-    - [Manual requirements](#manual-requirements)
-  - [Installation](#installation)
-    - [Installation outside docker](#installation-outside-docker)
-  - [Development](#development)
-    - [Development without docker](#development-without-docker)
-  - [Usage](#usage)
-    - [NPM package](#npm-package)
-  - [Deployment and releases](#deployment-and-releases)
-    - [Tagged releases](#tagged-releases)
-      - [Usage: npm package](#usage-npm-package)
-      - [Usage: Release file](#usage-release-file)
-    - [Branch releases](#branch-releases)
-      - [Usage: npm package](#usage-npm-package-1)
-      - [Usage: Release file](#usage-release-file-1)
-  - [Storybook](#storybook)
-  - [Chromatic](#chromatic)
-    - [What is Storybook](#what-is-storybook)
-      - [How to use](#how-to-use)
-      - [Addons](#addons)
-      - [Important to notice](#important-to-notice)
-        - [Internal classes](#internal-classes)
-
-<!-- END doctoc generated TOC please keep comment here to allow auto update -->
-<!-- markdownlint-enable -->
-
 # DPL Design System
 
 DPL Design System is a library of UI components that should be used as a common
 base system for "Danmarks Biblioteker" / "Det Digitale Folkebibliotek". The
-design is implemented
-with [Storybook](https://storybook.js.org/docs/react/get-started/introduction)
-/ [React](https://reactjs.org/) and is output with HTML markup and css-classes
+design is implemented with
+[Storybook](https://storybook.js.org/docs/react/get-started/introduction) /
+[React](https://reactjs.org/) and is output with HTML markup and css-classes
 through an addon in Storybook.
 
-The codebase follows the naming that designers have used in Figma closely
-to ensure consistency.
-
-## Requirements
-
-This project comes with [go-task](https://github.com/go-task/task) and docker
-compose, hence the requirements are limited to having docker install and tasks.
-
-### Manual requirements
-
-This project can be used outside docker with the following requirements:
-
-- `node 16`
-- `yarn`
-
-Check in the terminal which versions you have installed with `node -v`.
-
-## Installation
-
-Use the tasks defined in `Taskfile` to run the project:
-
-```shell
-task dev:install
-```
-
-### Installation outside docker
-
-Use the node package manager to install project dependencies:
-
-```shell
-yarn install
-```
-
-## Development
-
-To start the docker compose setup in development simple use the `start` task:
-
-```shell
-task dev:start
-```
-
-To see the output from the compile process and start of storybook:
-
-```shell
-task dev:logs
-```
-
-Use `task` and tabulator key in the terminal to see the other predefined tasks:
-
-```shell
-task dev:[TAB]
-```
-
-### Development without docker
-
-To start developing run:
-
-```shell
-yarn dev
-```
-
-Components and CSS will be automatically recompiled when making changes in the
-source code.
-
-## Usage
-
-The project is available in two ways and should be consumed accordingly:
-
-1. As package in the local npm registry for this repository
-2. As a `dist.zip` file attached to a release for this repository
-
-Both releases contain the built assets of the project: JavaScript files, CSS
-styles and icons.
-
-You can find the HTML output for a given story under the HTML tab inside
-storybook.
-
-### NPM package
-
-[The GitHub NPM package registry requires authentication if you are to access
-packages there](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#authenticating-with-a-personal-access-token).
-
-Consequently, if you want to use the design system as an NPM package or if you
-use a project that depends on the design system as an NPM package you must
-authenticate:
-
-1. [Create a GitHub token with the required scopes: `repo` and `read:packages`](https://github.com/settings/tokens/new?description=npm&scopes=repo,read:packages)
-2. Run `npm login --registry=https://npm.pkg.github.com`
-3. Enter the following information:
-
-```shell
-> Username: [Your GitHub username]
-> Password: [Your GitHub token]
-> Email: [An email address used with your GitHub account]
-```
-
-Note that you will need to reauthenticate when your personal access token
-expires.
-
-## Deployment and releases
-
-The project is [automatically built and deployed](.github/workflows/deployment.yml)
-on pushes to every branch and every tag and the result is available as releases
-which support [both types of usage](#usage). This applies for the original
-repository on GitHub and all GitHub forks.
-
-You can follow the status of deployments in the [Actions list for the repository
-on GitHub](https://github.com/danskernesdigitalebibliotek/dpl-design-system/actions/workflows/deployment.yml).
-The action logs also contain additional details regarding the contents and
-publication of each release.  If using a fork then deployment actions can be
-seen on the corresponding list.
-
-In general consuming projects should prefer tagged releases as they are stable
-proper releases.
-
-During development where the design system is being updated in parallel with
-the implementation of a consuming project it may be advantageous to use a
-release tagging a branch.
-
-### Tagged releases
-
-Run the following to publish a tag and create a release:
-
-```shell
-git tag -a v*.*.* && git push origin v*.*.*
-```
-
-#### Usage: npm package
-
-In the consuming project update usage to the new release:
-
-```shell
-npm install @danskernesdigitalebibliotek/dpl-design-system@*.*.*
-```
-
-#### Usage: Release file
-
-Find the release for the tag on [the releases page on GitHub](https://github.com/danskernesdigitalebibliotek/dpl-design-system/releases)
-and download the `dist.zip` file from there and use it as needed in the
-consuming project.
-
-### Branch releases
-
-The project automatically creates a release for each branch.
-
-Example: Pushing a commit to a new branch `feature/reservation-modal` will
-create the following parts:
-
-1. A git tag for the commit `release-feature/reservation-modal`. A tag is needed
-   to create a GitHub release.
-2. A GitHub release for the called *feature/reservation-modal*. The build is
-   attached here.
-3. A package in the local npm repository tagged `feature-reservation-modal`.
-   Special characters like `/` are not supported by npm tags and are converted
-   to `-`.
-
-Updating the branch will update all parts accordingly.
-
-#### Usage: npm package
-
-In the consuming project update usage to the new release:
-
-```shell
-npm install @danskernesdigitalebibliotek/dpl-design-system@feature-reservation-modal
-```
-
-If your release belongs to a fork you can use [aliasing](https://docs.npmjs.com/cli/v8/commands/npm-install)
-to point to the release of the package in the npm repository for the fork:
-
-```shell
-npm config set @my-fork:registry=https://npm.pkg.github.com
-npm install @danskernesdigitalebibliotek/dpl-design-system@npm:@my-fork/dpl-design-system@feature-reservation-modal
-```
-
-This will update your `package.json` and lock files accordingly. Note that
-branch releases use temporary versions in the format `0.0.0-[GIT-SHA]` and you
-may in practice see these referenced in both files.
-
-If you push new code to the branch you have to update the version used in the
-consuming project:
-
-```shell
-npm update @danskernesdigitalebibliotek/dpl-design-system
-```
-
-[Aliasing](https://classic.yarnpkg.com/lang/en/docs/cli/add/#toc-yarn-add-alias),
-[repository configuration](https://classic.yarnpkg.com/en/docs/cli/config) and
-[updating installed packages](https://classic.yarnpkg.com/en/docs/cli/upgrade)
-are also supported by Yarn.
-
-#### Usage: Release file
-
-Find the release for the branch on [the releases page on GitHub](https://github.com/danskernesdigitalebibliotek/dpl-design-system/releases)
-and download the `dist.zip` file from there and use it as needed in the
-consuming project.
-
-If your branch belongs to a fork then you can find the release on the releases
-page for the fork.
-
-Repeat the process if you push new code to the branch.
-
-## Storybook
-
-Spin up storybook by running this command in the terminal:
-
-```shell
-yarn storybook
-```
-
-When storybook is ready it automatically opens up in a browser with the
-interface ready to use.
-
-## Chromatic
-
-We are using Chromatic for visual test. You can access the dashboard
-under the `danskernesdigitalebibliotek` (organisation) `dpl-design-system`
-(project).
-
-<https://www.chromatic.com/builds?appId=616ffdab9acbf5003ad5fd2b>
-
-You can deploy a version locally to Chromatic by running:
-
-```shell
-yarn chromatic
-```
-
-Make sure to set the `CHROMATIC_PROJECT_TOKEN` environment variable is available
-in your shell context. You can access the token from:
-
-<https://www.chromatic.com/manage?appId=616ffdab9acbf5003ad5fd2b&view=configure>
-
-### What is Storybook
-
-[Storybook](https://storybook.js.org/docs/react/get-started/introduction) is an
-open source tool for building UI components and pages in isolation from your
-app's business logic, data, and context. Storybook helps you document components
-for reuse and automatically visually test your components to prevent bugs. It
-promotes the [component-driven](https://componentdriven.org) process and agile
-development.
-
-It is possible to extend Storybook with an ecosystem of addons that help you do
-things like fine-tune responsive layouts or verify accessibility.
-
-#### How to use
-
-The Storybook interface is simple and intuitive to use. Browse the project's
-stories now by navigating to them in the sidebar.
-
-The stories are placed in a flat structure, where developers should not spend
-time thinking of structure, since we want to keep all parts of the system under
-a heading called Library. This Library is then dividid in folders where common
-parts are kept together.
-
-To expose to the user how we think these parts stitch together for example
-for the new website, we have a heading called Blocks, to resemble what cms
-blocks a user can expect to find when building pages in the choosen CMS.
-
-This could replicate in to mobile applications, newsletters etc. all pulling
-parts from the Library.
-
-Each story has a corresponding `.stories` file. View their code in the
-`src/stories` directory to learn how they work.
-The `stories` file is used to add the component to the Storybook interface via
-the title. Start the title with "Library" or "Blocks" and use / to
-divide into folders fx. `Library / Buttons / Button`
-
-#### Addons
-
-Storybook ships with some essential
-pre-installed [addons](https://storybook.js.org/addons/tag/essentials/)
-to power the core Storybook experience.
-
-- [Controls](https://storybook.js.org/addons/@storybook/addon-controls/)
-- [Actions](https://storybook.js.org/addons/@storybook/addon-actions/)
-- [Docs](https://storybook.js.org/addons/@storybook/addon-docs/)
-- [Viewport](https://storybook.js.org/addons/@storybook/addon-viewport/)
-- [Backgrounds](https://storybook.js.org/addons/@storybook/addon-backgrounds/)
-- [Toolbars](https://storybook.js.org/addons/@storybook/addon-toolbars/)
-- [Measure](https://storybook.js.org/addons/@storybook/addon-measure/)
-- [Outline](https://storybook.js.org/addons/@storybook/addon-outline/)
-
-There are many other helpful addons to customise the usage and experience.
-Additional addons used for this project:
-
-- [HTML / storybook-addon-html](https://storybook.js.org/addons/@whitespace/storybook-addon-html/):
-  This addon is used to display compiled HTML markup for each story and make it
-  easier for developers to grab the code. Because we are developing with React,
-  it is necessary to be able to show the HTML markup with the css-classes to
-  make it easier for other developers that will implement it in the future.
-  If a story has controls the HTML markup changes according to the controls that
-  are set.
-
-- [Designs / storybook-addon-designs](https://storybook.js.org/addons/storybook-addon-designs/):
-  This addon is used to embed Figma in the addon panel for a better
-  design-development workflow.
-
-- [A11Y](https://storybook.js.org/addons/@storybook/addon-a11y/):
-  This addon is used to check the accessibility of the components.
-
-All the addons can be found in `storybook/main.js` directory.
-
-#### Important to notice
-
-##### Internal classes
+The codebase follows the naming that designers have used in Figma closely to
+ensure consistency.
 
-To display some components (fx Colors, Spacing) in a more presentable way, we
-are using some "internal" css-classes which can be found in the
-`styles/internal.scss` file. All css-classes with "internal" in the front should
-therefore be ignored in the HTML markup.
+Read more about the DPL Design System by visiting our
+[Documentation site](https://danskernesdigitalebibliotek.github.io/dpl-docs)
diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 000000000..42c692d68
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,352 @@
+<!-- markdownlint-disable-next-line first-line-h1 -->
+![https://detdigitalefolkebibliotek.dk/sites/default/files/ddf_logo_rgb_blue_web.png](https://detdigitalefolkebibliotek.dk/sites/default/files/ddf_logo_rgb_blue_web.png)
+
+<!-- markdownlint-disable -->
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+- [DPL Design System](#dpl-design-system)
+  - [Requirements](#requirements)
+    - [Manual requirements](#manual-requirements)
+  - [Installation](#installation)
+    - [Installation outside docker](#installation-outside-docker)
+  - [Development](#development)
+    - [Development without docker](#development-without-docker)
+  - [Usage](#usage)
+    - [NPM package](#npm-package)
+  - [Deployment and releases](#deployment-and-releases)
+    - [Tagged releases](#tagged-releases)
+      - [Usage: npm package](#usage-npm-package)
+      - [Usage: Release file](#usage-release-file)
+    - [Branch releases](#branch-releases)
+      - [Usage: npm package](#usage-npm-package-1)
+      - [Usage: Release file](#usage-release-file-1)
+  - [Storybook](#storybook)
+  - [Chromatic](#chromatic)
+    - [What is Storybook](#what-is-storybook)
+      - [How to use](#how-to-use)
+      - [Addons](#addons)
+      - [Important to notice](#important-to-notice)
+        - [Internal classes](#internal-classes)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+<!-- markdownlint-enable -->
+
+# DPL Design System
+
+DPL Design System is a library of UI components that should be used as a common
+base system for "Danmarks Biblioteker" / "Det Digitale Folkebibliotek". The
+design is implemented
+with [Storybook](https://storybook.js.org/docs/react/get-started/introduction)
+/ [React](https://reactjs.org/) and is output with HTML markup and css-classes
+through an addon in Storybook.
+
+The codebase follows the naming that designers have used in Figma closely
+to ensure consistency.
+
+## Requirements
+
+This project comes with [go-task](https://github.com/go-task/task) and docker
+compose, hence the requirements are limited to having docker install and tasks.
+
+### Manual requirements
+
+This project can be used outside docker with the following requirements:
+
+- `node 16`
+- `yarn`
+
+Check in the terminal which versions you have installed with `node -v`.
+
+## Installation
+
+Use the tasks defined in `Taskfile` to run the project:
+
+```shell
+task dev:install
+```
+
+### Installation outside docker
+
+Use the node package manager to install project dependencies:
+
+```shell
+yarn install
+```
+
+## Development
+
+To start the docker compose setup in development simple use the `start` task:
+
+```shell
+task dev:start
+```
+
+To see the output from the compile process and start of storybook:
+
+```shell
+task dev:logs
+```
+
+Use `task` and tabulator key in the terminal to see the other predefined tasks:
+
+```shell
+task dev:[TAB]
+```
+
+### Development without docker
+
+To start developing run:
+
+```shell
+yarn dev
+```
+
+Components and CSS will be automatically recompiled when making changes in the
+source code.
+
+## Usage
+
+The project is available in two ways and should be consumed accordingly:
+
+1. As package in the local npm registry for this repository
+2. As a `dist.zip` file attached to a release for this repository
+
+Both releases contain the built assets of the project: JavaScript files, CSS
+styles and icons.
+
+You can find the HTML output for a given story under the HTML tab inside
+storybook.
+
+### NPM package
+
+[The GitHub NPM package registry requires authentication if you are to access
+packages there](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#authenticating-with-a-personal-access-token).
+
+Consequently, if you want to use the design system as an NPM package or if you
+use a project that depends on the design system as an NPM package you must
+authenticate:
+
+1. [Create a GitHub token with the required scopes: `repo` and `read:packages`](https://github.com/settings/tokens/new?description=npm&scopes=repo,read:packages)
+2. Run `npm login --registry=https://npm.pkg.github.com`
+3. Enter the following information:
+
+```shell
+> Username: [Your GitHub username]
+> Password: [Your GitHub token]
+> Email: [An email address used with your GitHub account]
+```
+
+Note that you will need to reauthenticate when your personal access token
+expires.
+
+## Deployment and releases
+
+The project is [automatically built and deployed](.github/workflows/deployment.yml)
+on pushes to every branch and every tag and the result is available as releases
+which support [both types of usage](#usage). This applies for the original
+repository on GitHub and all GitHub forks.
+
+You can follow the status of deployments in the [Actions list for the repository
+on GitHub](https://github.com/danskernesdigitalebibliotek/dpl-design-system/actions/workflows/deployment.yml).
+The action logs also contain additional details regarding the contents and
+publication of each release.  If using a fork then deployment actions can be
+seen on the corresponding list.
+
+In general consuming projects should prefer tagged releases as they are stable
+proper releases.
+
+During development where the design system is being updated in parallel with
+the implementation of a consuming project it may be advantageous to use a
+release tagging a branch.
+
+### Tagged releases
+
+Run the following to publish a tag and create a release:
+
+```shell
+git tag -a v*.*.* && git push origin v*.*.*
+```
+
+#### Usage: npm package
+
+In the consuming project update usage to the new release:
+
+```shell
+npm install @danskernesdigitalebibliotek/dpl-design-system@*.*.*
+```
+
+#### Usage: Release file
+
+Find the release for the tag on [the releases page on GitHub](https://github.com/danskernesdigitalebibliotek/dpl-design-system/releases)
+and download the `dist.zip` file from there and use it as needed in the
+consuming project.
+
+### Branch releases
+
+The project automatically creates a release for each branch.
+
+Example: Pushing a commit to a new branch `feature/reservation-modal` will
+create the following parts:
+
+1. A git tag for the commit `release-feature/reservation-modal`. A tag is needed
+   to create a GitHub release.
+2. A GitHub release for the called *feature/reservation-modal*. The build is
+   attached here.
+3. A package in the local npm repository tagged `feature-reservation-modal`.
+   Special characters like `/` are not supported by npm tags and are converted
+   to `-`.
+
+Updating the branch will update all parts accordingly.
+
+#### Usage: npm package
+
+In the consuming project update usage to the new release:
+
+```shell
+npm install @danskernesdigitalebibliotek/dpl-design-system@feature-reservation-modal
+```
+
+If your release belongs to a fork you can use [aliasing](https://docs.npmjs.com/cli/v8/commands/npm-install)
+to point to the release of the package in the npm repository for the fork:
+
+```shell
+npm config set @my-fork:registry=https://npm.pkg.github.com
+npm install @danskernesdigitalebibliotek/dpl-design-system@npm:@my-fork/dpl-design-system@feature-reservation-modal
+```
+
+This will update your `package.json` and lock files accordingly. Note that
+branch releases use temporary versions in the format `0.0.0-[GIT-SHA]` and you
+may in practice see these referenced in both files.
+
+If you push new code to the branch you have to update the version used in the
+consuming project:
+
+```shell
+npm update @danskernesdigitalebibliotek/dpl-design-system
+```
+
+[Aliasing](https://classic.yarnpkg.com/lang/en/docs/cli/add/#toc-yarn-add-alias),
+[repository configuration](https://classic.yarnpkg.com/en/docs/cli/config) and
+[updating installed packages](https://classic.yarnpkg.com/en/docs/cli/upgrade)
+are also supported by Yarn.
+
+#### Usage: Release file
+
+Find the release for the branch on [the releases page on GitHub](https://github.com/danskernesdigitalebibliotek/dpl-design-system/releases)
+and download the `dist.zip` file from there and use it as needed in the
+consuming project.
+
+If your branch belongs to a fork then you can find the release on the releases
+page for the fork.
+
+Repeat the process if you push new code to the branch.
+
+## Storybook
+
+Spin up storybook by running this command in the terminal:
+
+```shell
+yarn storybook
+```
+
+When storybook is ready it automatically opens up in a browser with the
+interface ready to use.
+
+## Chromatic
+
+We are using Chromatic for visual test. You can access the dashboard
+under the `danskernesdigitalebibliotek` (organisation) `dpl-design-system`
+(project).
+
+<https://www.chromatic.com/builds?appId=616ffdab9acbf5003ad5fd2b>
+
+You can deploy a version locally to Chromatic by running:
+
+```shell
+yarn chromatic
+```
+
+Make sure to set the `CHROMATIC_PROJECT_TOKEN` environment variable is available
+in your shell context. You can access the token from:
+
+<https://www.chromatic.com/manage?appId=616ffdab9acbf5003ad5fd2b&view=configure>
+
+### What is Storybook
+
+[Storybook](https://storybook.js.org/docs/react/get-started/introduction) is an
+open source tool for building UI components and pages in isolation from your
+app's business logic, data, and context. Storybook helps you document components
+for reuse and automatically visually test your components to prevent bugs. It
+promotes the [component-driven](https://componentdriven.org) process and agile
+development.
+
+It is possible to extend Storybook with an ecosystem of addons that help you do
+things like fine-tune responsive layouts or verify accessibility.
+
+#### How to use
+
+The Storybook interface is simple and intuitive to use. Browse the project's
+stories now by navigating to them in the sidebar.
+
+The stories are placed in a flat structure, where developers should not spend
+time thinking of structure, since we want to keep all parts of the system under
+a heading called Library. This Library is then dividid in folders where common
+parts are kept together.
+
+To expose to the user how we think these parts stitch together for example
+for the new website, we have a heading called Blocks, to resemble what cms
+blocks a user can expect to find when building pages in the choosen CMS.
+
+This could replicate in to mobile applications, newsletters etc. all pulling
+parts from the Library.
+
+Each story has a corresponding `.stories` file. View their code in the
+`src/stories` directory to learn how they work.
+The `stories` file is used to add the component to the Storybook interface via
+the title. Start the title with "Library" or "Blocks" and use / to
+divide into folders fx. `Library / Buttons / Button`
+
+#### Addons
+
+Storybook ships with some essential
+pre-installed [addons](https://storybook.js.org/addons/tag/essentials/)
+to power the core Storybook experience.
+
+- [Controls](https://storybook.js.org/addons/@storybook/addon-controls/)
+- [Actions](https://storybook.js.org/addons/@storybook/addon-actions/)
+- [Docs](https://storybook.js.org/addons/@storybook/addon-docs/)
+- [Viewport](https://storybook.js.org/addons/@storybook/addon-viewport/)
+- [Backgrounds](https://storybook.js.org/addons/@storybook/addon-backgrounds/)
+- [Toolbars](https://storybook.js.org/addons/@storybook/addon-toolbars/)
+- [Measure](https://storybook.js.org/addons/@storybook/addon-measure/)
+- [Outline](https://storybook.js.org/addons/@storybook/addon-outline/)
+
+There are many other helpful addons to customise the usage and experience.
+Additional addons used for this project:
+
+- [HTML / storybook-addon-html](https://storybook.js.org/addons/@whitespace/storybook-addon-html/):
+  This addon is used to display compiled HTML markup for each story and make it
+  easier for developers to grab the code. Because we are developing with React,
+  it is necessary to be able to show the HTML markup with the css-classes to
+  make it easier for other developers that will implement it in the future.
+  If a story has controls the HTML markup changes according to the controls that
+  are set.
+
+- [Designs / storybook-addon-designs](https://storybook.js.org/addons/storybook-addon-designs/):
+  This addon is used to embed Figma in the addon panel for a better
+  design-development workflow.
+
+- [A11Y](https://storybook.js.org/addons/@storybook/addon-a11y/):
+  This addon is used to check the accessibility of the components.
+
+All the addons can be found in `storybook/main.js` directory.
+
+#### Important to notice
+
+##### Internal classes
+
+To display some components (fx Colors, Spacing) in a more presentable way, we
+are using some "internal" css-classes which can be found in the
+`styles/internal.scss` file. All css-classes with "internal" in the front should
+therefore be ignored in the HTML markup.
diff --git a/architecture/adr-001-skeleton-screens.md b/docs/architecture/adr-001-skeleton-screens.md
similarity index 100%
rename from architecture/adr-001-skeleton-screens.md
rename to docs/architecture/adr-001-skeleton-screens.md

From d9c59613b4a4098efde7f75df4ccfe6834dd4e66 Mon Sep 17 00:00:00 2001
From: Kasper Birch <kasperbirch1@gmail.com>
Date: Tue, 18 Apr 2023 11:57:09 +0200
Subject: [PATCH 22/37] Fix alignment in `horizontal-term-line` & separate
 `ButtonExpand`

Fix alignment in `horizontal-term-line` & separate `ButtonExpand`
- Correct alignment issues for horizontal-term-line
- Remove unused `.horizontal-term-line__list` class
- Extract `button.horizontal-term-line__expand` into separate `ButtonExpand` component for reusability
---
 base.scss                                     |  1 +
 .../button/button-expand/ButtonExpand.tsx     | 28 +++++++++++++++
 .../button/button-expand/button-expand.scss   | 12 +++++++
 .../button-expand/button-expand.stories.tsx   | 34 +++++++++++++++++++
 .../HorizontalTermLine.tsx                    | 16 ++-------
 .../horizontal-term-line.scss                 | 17 +---------
 6 files changed, 78 insertions(+), 30 deletions(-)
 create mode 100644 src/stories/Library/Buttons/button/button-expand/ButtonExpand.tsx
 create mode 100644 src/stories/Library/Buttons/button/button-expand/button-expand.scss
 create mode 100644 src/stories/Library/Buttons/button/button-expand/button-expand.stories.tsx

diff --git a/base.scss b/base.scss
index 04b32f33b..0e1cf0d0a 100644
--- a/base.scss
+++ b/base.scss
@@ -32,6 +32,7 @@
 @import "./src/stories/Library/Icons/icon-favourite/icon-favourite";
 @import "./src/stories/Library/Buttons/button-favourite/button-favourite";
 @import "./src/stories/Library/Buttons/icon-button/icon-button";
+@import "./src/stories/Library/Buttons/button/button-expand/button-expand";
 @import "./src/stories/Library/warning-status/warning-status";
 @import "./src/stories/Library/availability-label/availability-label";
 @import "./src/stories/Library/avatar/avatar";
diff --git a/src/stories/Library/Buttons/button/button-expand/ButtonExpand.tsx b/src/stories/Library/Buttons/button/button-expand/ButtonExpand.tsx
new file mode 100644
index 000000000..c0f8a9b34
--- /dev/null
+++ b/src/stories/Library/Buttons/button/button-expand/ButtonExpand.tsx
@@ -0,0 +1,28 @@
+import clsx from "clsx";
+import { FC } from "react";
+
+export type ButtonExpandProps = {
+  showMore: boolean;
+  setShowMore: (showMore: boolean) => void;
+};
+
+const ButtonExpand: FC<ButtonExpandProps> = ({ showMore, setShowMore }) => {
+  return (
+    <button
+      className="button-expand"
+      type="button"
+      onClick={() => setShowMore(!showMore)}
+      aria-label="Expand More"
+    >
+      <img
+        className={clsx("button-expand__image", {
+          "button-expand__image--expanded": showMore,
+        })}
+        src="icons/collection/ExpandMore.svg"
+        alt=""
+      />
+    </button>
+  );
+};
+
+export default ButtonExpand;
diff --git a/src/stories/Library/Buttons/button/button-expand/button-expand.scss b/src/stories/Library/Buttons/button/button-expand/button-expand.scss
new file mode 100644
index 000000000..1cbb49305
--- /dev/null
+++ b/src/stories/Library/Buttons/button/button-expand/button-expand.scss
@@ -0,0 +1,12 @@
+.button-expand {
+  cursor: pointer;
+  align-self: center;
+
+  &__image {
+    transition: transform 0.3s ease-in-out;
+
+    &.button-expand__image--expanded {
+      transform: scaleY(-1);
+    }
+  }
+}
diff --git a/src/stories/Library/Buttons/button/button-expand/button-expand.stories.tsx b/src/stories/Library/Buttons/button/button-expand/button-expand.stories.tsx
new file mode 100644
index 000000000..a42d78c97
--- /dev/null
+++ b/src/stories/Library/Buttons/button/button-expand/button-expand.stories.tsx
@@ -0,0 +1,34 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import ButtonExpand, { ButtonExpandProps } from "./ButtonExpand";
+
+export default {
+  title: "Library / Buttons / Button Expand",
+  component: ButtonExpand,
+  parameters: {},
+  argTypes: {
+    showMore: {
+      control: {
+        type: "boolean",
+      },
+      title: {
+        control: {
+          type: "text",
+        },
+      },
+    },
+  },
+} as ComponentMeta<typeof ButtonExpand>;
+
+const Template: ComponentStory<typeof ButtonExpand> = (
+  args: ButtonExpandProps
+) => <ButtonExpand {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  showMore: false,
+};
+
+export const Expand = Template.bind({});
+Expand.args = {
+  showMore: true,
+};
diff --git a/src/stories/Library/horizontal-term-line/HorizontalTermLine.tsx b/src/stories/Library/horizontal-term-line/HorizontalTermLine.tsx
index 34231dbaf..1db65dd05 100644
--- a/src/stories/Library/horizontal-term-line/HorizontalTermLine.tsx
+++ b/src/stories/Library/horizontal-term-line/HorizontalTermLine.tsx
@@ -1,5 +1,5 @@
-import clsx from "clsx";
 import { useState } from "react";
+import ButtonExpand from "../Buttons/button/button-expand/ButtonExpand";
 
 export interface HorizontalTermLineList {
   url: string;
@@ -45,19 +45,7 @@ const HorizontalTermLine: React.FC<HorizontalTermLineProps> = ({
       ))}
 
       {showMoreButton && (
-        <button
-          type="button"
-          onClick={() => setShowMore(!showMore)}
-          aria-label="Expand More"
-        >
-          <img
-            className={clsx("horizontal-term-line__expand", {
-              "horizontal-term-line__expand--expanded": showMore,
-            })}
-            src="icons/collection/ExpandMore.svg"
-            alt=""
-          />
-        </button>
+        <ButtonExpand showMore={showMore} setShowMore={setShowMore} />
       )}
     </div>
   );
diff --git a/src/stories/Library/horizontal-term-line/horizontal-term-line.scss b/src/stories/Library/horizontal-term-line/horizontal-term-line.scss
index 2a9dc3941..586512270 100644
--- a/src/stories/Library/horizontal-term-line/horizontal-term-line.scss
+++ b/src/stories/Library/horizontal-term-line/horizontal-term-line.scss
@@ -1,6 +1,6 @@
 .horizontal-term-line {
   display: flex;
-  align-items: center;
+  align-items: baseline;
   flex-wrap: wrap;
   white-space: nowrap;
   gap: $s-sm;
@@ -9,19 +9,4 @@
   * {
     font-size: 12px;
   }
-
-  &__list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: $s-sm;
-  }
-
-  &__expand {
-    cursor: pointer;
-    transition: transform 0.3s ease-in-out;
-
-    &--expanded {
-      transform: scaleY(-1);
-    }
-  }
 }

From 9d21bf55be32d0a0c51d0137eacee5e7cd4d0bcc Mon Sep 17 00:00:00 2001
From: oliver-reload <oliver@reload.dk>
Date: Mon, 1 May 2023 14:55:25 +0200
Subject: [PATCH 23/37] Uninstalled doctoc and moved DDF logo between READMEs

---
 README.md      |   3 +
 docs/README.md |  34 ------
 package.json   |   4 +-
 yarn.lock      | 295 +------------------------------------------------
 4 files changed, 7 insertions(+), 329 deletions(-)

diff --git a/README.md b/README.md
index 4e0bbb116..e4fe5166a 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,6 @@
+<!-- markdownlint-disable-next-line first-line-h1 -->
+![https://detdigitalefolkebibliotek.dk/sites/default/files/ddf_logo_rgb_blue_web.png](https://detdigitalefolkebibliotek.dk/sites/default/files/ddf_logo_rgb_blue_web.png)
+
 # DPL Design System
 
 DPL Design System is a library of UI components that should be used as a common
diff --git a/docs/README.md b/docs/README.md
index 42c692d68..0b8b44009 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,37 +1,3 @@
-<!-- markdownlint-disable-next-line first-line-h1 -->
-![https://detdigitalefolkebibliotek.dk/sites/default/files/ddf_logo_rgb_blue_web.png](https://detdigitalefolkebibliotek.dk/sites/default/files/ddf_logo_rgb_blue_web.png)
-
-<!-- markdownlint-disable -->
-<!-- START doctoc generated TOC please keep comment here to allow auto update -->
-<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-
-- [DPL Design System](#dpl-design-system)
-  - [Requirements](#requirements)
-    - [Manual requirements](#manual-requirements)
-  - [Installation](#installation)
-    - [Installation outside docker](#installation-outside-docker)
-  - [Development](#development)
-    - [Development without docker](#development-without-docker)
-  - [Usage](#usage)
-    - [NPM package](#npm-package)
-  - [Deployment and releases](#deployment-and-releases)
-    - [Tagged releases](#tagged-releases)
-      - [Usage: npm package](#usage-npm-package)
-      - [Usage: Release file](#usage-release-file)
-    - [Branch releases](#branch-releases)
-      - [Usage: npm package](#usage-npm-package-1)
-      - [Usage: Release file](#usage-release-file-1)
-  - [Storybook](#storybook)
-  - [Chromatic](#chromatic)
-    - [What is Storybook](#what-is-storybook)
-      - [How to use](#how-to-use)
-      - [Addons](#addons)
-      - [Important to notice](#important-to-notice)
-        - [Internal classes](#internal-classes)
-
-<!-- END doctoc generated TOC please keep comment here to allow auto update -->
-<!-- markdownlint-enable -->
-
 # DPL Design System
 
 DPL Design System is a library of UI components that should be used as a common
diff --git a/package.json b/package.json
index d10d47e77..e3d7d1925 100644
--- a/package.json
+++ b/package.json
@@ -23,8 +23,7 @@
     "chromatic": "npx chromatic --exit-zero-on-changes",
     "lint": "concurrently 'yarn:js:lint' 'yarn:css:lint'",
     "lint:markdown": "markdownlint-cli2",
-    "lint:markdown:fix": "markdownlint-cli2-fix",
-    "build:doc": "doctoc README.md"
+    "lint:markdown:fix": "markdownlint-cli2-fix"
   },
   "browserslist": {
     "production": [
@@ -61,7 +60,6 @@
     "chokidar-cli": "^3.0.0",
     "clsx": "^1.1.1",
     "concurrently": "^7.2.2",
-    "doctoc": "^2.2.0",
     "eslint": "^8.19.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
diff --git a/yarn.lock b/yarn.lock
index ae85bfe66..d711d8651 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2765,25 +2765,6 @@
   dependencies:
     "@babel/runtime" "^7.12.5"
 
-"@textlint/ast-node-types@^12.2.1":
-  version "12.2.1"
-  resolved "https://registry.yarnpkg.com/@textlint/ast-node-types/-/ast-node-types-12.2.1.tgz#bec1e4b02e97ff1167d057c71feeee1a80015aef"
-  integrity sha512-NXYza6aG1+LdZ4g83gjRhDht+gdrTjJYkdcQhpvzNCtTar/sVpaykkauRcAKLhkIWrQpfb311pfMlU6qNDW76Q==
-
-"@textlint/markdown-to-ast@^12.1.1":
-  version "12.2.1"
-  resolved "https://registry.yarnpkg.com/@textlint/markdown-to-ast/-/markdown-to-ast-12.2.1.tgz#e9ec19be71e4513d882986d14ab9a993dec74511"
-  integrity sha512-p+LlVcrgHnSNEWWflYU412uu+v4Cejs6hmI4SgZCheNg4u7Ik78aKgpe4jT5BhjLSBZ/KP6IrJxtCUOoJIUWmQ==
-  dependencies:
-    "@textlint/ast-node-types" "^12.2.1"
-    debug "^4.3.4"
-    remark-footnotes "^3.0.0"
-    remark-frontmatter "^3.0.0"
-    remark-gfm "^1.0.0"
-    remark-parse "^9.0.0"
-    traverse "^0.6.6"
-    unified "^9.2.2"
-
 "@tootallnate/once@1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
@@ -3776,13 +3757,6 @@ alphanum-sort@^1.0.0:
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
   integrity sha512-0FcBfdcmaumGPQ0qPn7Q5qTgz/ooXgIyp1rf8ik5bGX8mpE2YHjC0P/eyQvxu1GURYQgq9ozf2mteQ5ZD9YiyQ==
 
-anchor-markdown-header@^0.5.7:
-  version "0.5.7"
-  resolved "https://registry.yarnpkg.com/anchor-markdown-header/-/anchor-markdown-header-0.5.7.tgz#045063d76e6a1f9cd327a57a0126aa0fdec371a7"
-  integrity sha512-AmikqcK15r3q99hPvTa1na9n3eLkW0uE+RL9BZMSgwYalQeDnNXbYrN06BIcBPfGlmsGIE2jvkuvl/x0hyPF5Q==
-  dependencies:
-    emoji-regex "~6.1.0"
-
 ansi-align@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.1.tgz#0cdf12e111ace773a86e9a1fad1225c43cb19a59"
@@ -5895,7 +5869,7 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@4.3.4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
+debug@4, debug@4.3.4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -6160,18 +6134,6 @@ dns-txt@^2.0.2:
   dependencies:
     buffer-indexof "^1.0.0"
 
-doctoc@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/doctoc/-/doctoc-2.2.0.tgz#27f23eb75d109d29722d449efbcde3854cb0eabf"
-  integrity sha512-PtiyaS+S3kcMbpx6x2V0S+PeDKisxmjEFnZsuYkkj4Lh3ObozJuuYh9dM4+sX02Ouuty8RF2LOCnIbpu/hWy/A==
-  dependencies:
-    "@textlint/markdown-to-ast" "^12.1.1"
-    anchor-markdown-header "^0.5.7"
-    htmlparser2 "^7.2.0"
-    minimist "^1.2.6"
-    underscore "^1.13.2"
-    update-section "^0.3.3"
-
 doctrine@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
@@ -6242,7 +6204,7 @@ domexception@^2.0.1:
   dependencies:
     webidl-conversions "^5.0.0"
 
-domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.2.2, domhandler@^4.3.1:
+domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c"
   integrity sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==
@@ -6366,11 +6328,6 @@ emoji-regex@^9.2.2:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
   integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
 
-emoji-regex@~6.1.0:
-  version "6.1.3"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.1.3.tgz#ec79a3969b02d2ecf2b72254279bf99bc7a83932"
-  integrity sha512-73/zxHTjP2N2FQf0J5ngNjxP9LqG2krUshxYaowI8HxZQsiL2pYJc3k9/O93fc5/lCSkZv+bQ5Esk6k6msiSvg==
-
 emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
@@ -6431,11 +6388,6 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
-entities@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-3.0.1.tgz#2b887ca62585e96db3903482d336c1006c3001d4"
-  integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==
-
 entities@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
@@ -8255,16 +8207,6 @@ htmlparser2@^6.1.0:
     domutils "^2.5.2"
     entities "^2.0.0"
 
-htmlparser2@^7.2.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-7.2.0.tgz#8817cdea38bbc324392a90b1990908e81a65f5a5"
-  integrity sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==
-  dependencies:
-    domelementtype "^2.0.1"
-    domhandler "^4.2.2"
-    domutils "^2.8.0"
-    entities "^3.0.1"
-
 http-deceiver@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
@@ -10056,11 +9998,6 @@ loglevel@^1.6.8:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.8.0.tgz#e7ec73a57e1e7b419cb6c6ac06bf050b67356114"
   integrity sha512-G6A/nJLRgWOuuwdNuA6koovfEV1YpqqAG4pRUlFaz3jj2QNZ8M4vBqnVA+HBTmU/AMNUtlOsMmSpF6NyOjztbA==
 
-longest-streak@^2.0.0:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.4.tgz#b8599957da5b5dab64dee3fe316fa774597d90e4"
-  integrity sha512-vM6rUVCVUJJt33bnmHiZEvr7wPT78ztX7rojL+LW51bHtLh6HTjx84LA5W4+oa6aKEJA7jJu5LR6vQRBpA5DVg==
-
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -10182,13 +10119,6 @@ markdown-it@12.3.2:
     mdurl "^1.0.1"
     uc.micro "^1.0.5"
 
-markdown-table@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-2.0.0.tgz#194a90ced26d31fe753d8b9434430214c011865b"
-  integrity sha512-Ezda85ToJUBhM6WGaG6veasyym+Tbs3cMAw/ZhOPqXiYsr0jgocBV3j3nx+4lk47plLlIqjwuTm/ywVI+zjJ/A==
-  dependencies:
-    repeat-string "^1.0.0"
-
 markdownlint-cli2-formatter-default@0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/markdownlint-cli2-formatter-default/-/markdownlint-cli2-formatter-default-0.0.3.tgz#5aecd6e576ad18801b76e58bbbaf0e916c583ab8"
@@ -10247,83 +10177,6 @@ mdast-util-definitions@^4.0.0:
   dependencies:
     unist-util-visit "^2.0.0"
 
-mdast-util-find-and-replace@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/mdast-util-find-and-replace/-/mdast-util-find-and-replace-1.1.1.tgz#b7db1e873f96f66588c321f1363069abf607d1b5"
-  integrity sha512-9cKl33Y21lyckGzpSmEQnIDjEfeeWelN5s1kUW1LwdB0Fkuq2u+4GdqcGEygYxJE8GVqCl0741bYXHgamfWAZA==
-  dependencies:
-    escape-string-regexp "^4.0.0"
-    unist-util-is "^4.0.0"
-    unist-util-visit-parents "^3.0.0"
-
-mdast-util-footnote@^0.1.0:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/mdast-util-footnote/-/mdast-util-footnote-0.1.7.tgz#4b226caeab4613a3362c144c94af0fdd6f7e0ef0"
-  integrity sha512-QxNdO8qSxqbO2e3m09KwDKfWiLgqyCurdWTQ198NpbZ2hxntdc+VKS4fDJCmNWbAroUdYnSthu+XbZ8ovh8C3w==
-  dependencies:
-    mdast-util-to-markdown "^0.6.0"
-    micromark "~2.11.0"
-
-mdast-util-from-markdown@^0.8.0:
-  version "0.8.5"
-  resolved "https://registry.yarnpkg.com/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz#d1ef2ca42bc377ecb0463a987910dae89bd9a28c"
-  integrity sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==
-  dependencies:
-    "@types/mdast" "^3.0.0"
-    mdast-util-to-string "^2.0.0"
-    micromark "~2.11.0"
-    parse-entities "^2.0.0"
-    unist-util-stringify-position "^2.0.0"
-
-mdast-util-frontmatter@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/mdast-util-frontmatter/-/mdast-util-frontmatter-0.2.0.tgz#8bd5cd55e236c03e204a036f7372ebe9e6748240"
-  integrity sha512-FHKL4w4S5fdt1KjJCwB0178WJ0evnyyQr5kXTM3wrOVpytD0hrkvd+AOOjU9Td8onOejCkmZ+HQRT3CZ3coHHQ==
-  dependencies:
-    micromark-extension-frontmatter "^0.2.0"
-
-mdast-util-gfm-autolink-literal@^0.1.0:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-0.1.3.tgz#9c4ff399c5ddd2ece40bd3b13e5447d84e385fb7"
-  integrity sha512-GjmLjWrXg1wqMIO9+ZsRik/s7PLwTaeCHVB7vRxUwLntZc8mzmTsLVr6HW1yLokcnhfURsn5zmSVdi3/xWWu1A==
-  dependencies:
-    ccount "^1.0.0"
-    mdast-util-find-and-replace "^1.1.0"
-    micromark "^2.11.3"
-
-mdast-util-gfm-strikethrough@^0.2.0:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-0.2.3.tgz#45eea337b7fff0755a291844fbea79996c322890"
-  integrity sha512-5OQLXpt6qdbttcDG/UxYY7Yjj3e8P7X16LzvpX8pIQPYJ/C2Z1qFGMmcw+1PZMUM3Z8wt8NRfYTvCni93mgsgA==
-  dependencies:
-    mdast-util-to-markdown "^0.6.0"
-
-mdast-util-gfm-table@^0.1.0:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/mdast-util-gfm-table/-/mdast-util-gfm-table-0.1.6.tgz#af05aeadc8e5ee004eeddfb324b2ad8c029b6ecf"
-  integrity sha512-j4yDxQ66AJSBwGkbpFEp9uG/LS1tZV3P33fN1gkyRB2LoRL+RR3f76m0HPHaby6F4Z5xr9Fv1URmATlRRUIpRQ==
-  dependencies:
-    markdown-table "^2.0.0"
-    mdast-util-to-markdown "~0.6.0"
-
-mdast-util-gfm-task-list-item@^0.1.0:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-0.1.6.tgz#70c885e6b9f543ddd7e6b41f9703ee55b084af10"
-  integrity sha512-/d51FFIfPsSmCIRNp7E6pozM9z1GYPIkSy1urQ8s/o4TC22BZ7DqfHFWiqBD23bc7J3vV1Fc9O4QIHBlfuit8A==
-  dependencies:
-    mdast-util-to-markdown "~0.6.0"
-
-mdast-util-gfm@^0.1.0:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/mdast-util-gfm/-/mdast-util-gfm-0.1.2.tgz#8ecddafe57d266540f6881f5c57ff19725bd351c"
-  integrity sha512-NNkhDx/qYcuOWB7xHUGWZYVXvjPFFd6afg6/e2g+SV4r9q5XUcCbV4Wfa3DLYIiD+xAEZc6K4MGaE/m0KDcPwQ==
-  dependencies:
-    mdast-util-gfm-autolink-literal "^0.1.0"
-    mdast-util-gfm-strikethrough "^0.2.0"
-    mdast-util-gfm-table "^0.1.0"
-    mdast-util-gfm-task-list-item "^0.1.0"
-    mdast-util-to-markdown "^0.6.1"
-
 mdast-util-to-hast@10.0.1:
   version "10.0.1"
   resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-10.0.1.tgz#0cfc82089494c52d46eb0e3edb7a4eb2aea021eb"
@@ -10338,28 +10191,11 @@ mdast-util-to-hast@10.0.1:
     unist-util-position "^3.0.0"
     unist-util-visit "^2.0.0"
 
-mdast-util-to-markdown@^0.6.0, mdast-util-to-markdown@^0.6.1, mdast-util-to-markdown@~0.6.0:
-  version "0.6.5"
-  resolved "https://registry.yarnpkg.com/mdast-util-to-markdown/-/mdast-util-to-markdown-0.6.5.tgz#b33f67ca820d69e6cc527a93d4039249b504bebe"
-  integrity sha512-XeV9sDE7ZlOQvs45C9UKMtfTcctcaj/pGwH8YLbMHoMOXNNCn2LsqVQOqrF1+/NU8lKDAqozme9SCXWyo9oAcQ==
-  dependencies:
-    "@types/unist" "^2.0.0"
-    longest-streak "^2.0.0"
-    mdast-util-to-string "^2.0.0"
-    parse-entities "^2.0.0"
-    repeat-string "^1.0.0"
-    zwitch "^1.0.0"
-
 mdast-util-to-string@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz#27055500103f51637bd07d01da01eb1967a43527"
   integrity sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A==
 
-mdast-util-to-string@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz#b8cfe6a713e1091cb5b728fc48885a4767f8b97b"
-  integrity sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==
-
 mdn-data@2.0.14:
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
@@ -10469,73 +10305,6 @@ microevent.ts@~0.1.1:
   resolved "https://registry.yarnpkg.com/microevent.ts/-/microevent.ts-0.1.1.tgz#70b09b83f43df5172d0205a63025bce0f7357fa0"
   integrity sha512-jo1OfR4TaEwd5HOrt5+tAZ9mqT4jmpNAusXtyfNzqVm9uiSYFZlKM1wYL4oU7azZW/PxQW53wM0S6OR1JHNa2g==
 
-micromark-extension-footnote@^0.3.0:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/micromark-extension-footnote/-/micromark-extension-footnote-0.3.2.tgz#129b74ef4920ce96719b2c06102ee7abb2b88a20"
-  integrity sha512-gr/BeIxbIWQoUm02cIfK7mdMZ/fbroRpLsck4kvFtjbzP4yi+OPVbnukTc/zy0i7spC2xYE/dbX1Sur8BEDJsQ==
-  dependencies:
-    micromark "~2.11.0"
-
-micromark-extension-frontmatter@^0.2.0:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/micromark-extension-frontmatter/-/micromark-extension-frontmatter-0.2.2.tgz#61b8e92e9213e1d3c13f5a59e7862f5ca98dfa53"
-  integrity sha512-q6nPLFCMTLtfsctAuS0Xh4vaolxSFUWUWR6PZSrXXiRy+SANGllpcqdXFv2z07l0Xz/6Hl40hK0ffNCJPH2n1A==
-  dependencies:
-    fault "^1.0.0"
-
-micromark-extension-gfm-autolink-literal@~0.5.0:
-  version "0.5.7"
-  resolved "https://registry.yarnpkg.com/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-0.5.7.tgz#53866c1f0c7ef940ae7ca1f72c6faef8fed9f204"
-  integrity sha512-ePiDGH0/lhcngCe8FtH4ARFoxKTUelMp4L7Gg2pujYD5CSMb9PbblnyL+AAMud/SNMyusbS2XDSiPIRcQoNFAw==
-  dependencies:
-    micromark "~2.11.3"
-
-micromark-extension-gfm-strikethrough@~0.6.5:
-  version "0.6.5"
-  resolved "https://registry.yarnpkg.com/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-0.6.5.tgz#96cb83356ff87bf31670eefb7ad7bba73e6514d1"
-  integrity sha512-PpOKlgokpQRwUesRwWEp+fHjGGkZEejj83k9gU5iXCbDG+XBA92BqnRKYJdfqfkrRcZRgGuPuXb7DaK/DmxOhw==
-  dependencies:
-    micromark "~2.11.0"
-
-micromark-extension-gfm-table@~0.4.0:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/micromark-extension-gfm-table/-/micromark-extension-gfm-table-0.4.3.tgz#4d49f1ce0ca84996c853880b9446698947f1802b"
-  integrity sha512-hVGvESPq0fk6ALWtomcwmgLvH8ZSVpcPjzi0AjPclB9FsVRgMtGZkUcpE0zgjOCFAznKepF4z3hX8z6e3HODdA==
-  dependencies:
-    micromark "~2.11.0"
-
-micromark-extension-gfm-tagfilter@~0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-0.3.0.tgz#d9f26a65adee984c9ccdd7e182220493562841ad"
-  integrity sha512-9GU0xBatryXifL//FJH+tAZ6i240xQuFrSL7mYi8f4oZSbc+NvXjkrHemeYP0+L4ZUT+Ptz3b95zhUZnMtoi/Q==
-
-micromark-extension-gfm-task-list-item@~0.3.0:
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-0.3.3.tgz#d90c755f2533ed55a718129cee11257f136283b8"
-  integrity sha512-0zvM5iSLKrc/NQl84pZSjGo66aTGd57C1idmlWmE87lkMcXrTxg1uXa/nXomxJytoje9trP0NDLvw4bZ/Z/XCQ==
-  dependencies:
-    micromark "~2.11.0"
-
-micromark-extension-gfm@^0.3.0:
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/micromark-extension-gfm/-/micromark-extension-gfm-0.3.3.tgz#36d1a4c089ca8bdfd978c9bd2bf1a0cb24e2acfe"
-  integrity sha512-oVN4zv5/tAIA+l3GbMi7lWeYpJ14oQyJ3uEim20ktYFAcfX1x3LNlFGGlmrZHt7u9YlKExmyJdDGaTt6cMSR/A==
-  dependencies:
-    micromark "~2.11.0"
-    micromark-extension-gfm-autolink-literal "~0.5.0"
-    micromark-extension-gfm-strikethrough "~0.6.5"
-    micromark-extension-gfm-table "~0.4.0"
-    micromark-extension-gfm-tagfilter "~0.3.0"
-    micromark-extension-gfm-task-list-item "~0.3.0"
-
-micromark@^2.11.3, micromark@~2.11.0, micromark@~2.11.3:
-  version "2.11.4"
-  resolved "https://registry.yarnpkg.com/micromark/-/micromark-2.11.4.tgz#d13436138eea826383e822449c9a5c50ee44665a"
-  integrity sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==
-  dependencies:
-    debug "^4.0.0"
-    parse-entities "^2.0.0"
-
 micromatch@4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.4.tgz#896d519dfe9db25fce94ceb7a500919bf881ebf9"
@@ -13211,30 +12980,6 @@ remark-footnotes@2.0.0:
   resolved "https://registry.yarnpkg.com/remark-footnotes/-/remark-footnotes-2.0.0.tgz#9001c4c2ffebba55695d2dd80ffb8b82f7e6303f"
   integrity sha512-3Clt8ZMH75Ayjp9q4CorNeyjwIxHFcTkaektplKGl2A1jNGEUey8cKL0ZC5vJwfcD5GFGsNLImLG/NGzWIzoMQ==
 
-remark-footnotes@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/remark-footnotes/-/remark-footnotes-3.0.0.tgz#5756b56f8464fa7ed80dbba0c966136305d8cb8d"
-  integrity sha512-ZssAvH9FjGYlJ/PBVKdSmfyPc3Cz4rTWgZLI4iE/SX8Nt5l3o3oEjv3wwG5VD7xOjktzdwp5coac+kJV9l4jgg==
-  dependencies:
-    mdast-util-footnote "^0.1.0"
-    micromark-extension-footnote "^0.3.0"
-
-remark-frontmatter@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/remark-frontmatter/-/remark-frontmatter-3.0.0.tgz#ca5d996361765c859bd944505f377d6b186a6ec6"
-  integrity sha512-mSuDd3svCHs+2PyO29h7iijIZx4plX0fheacJcAoYAASfgzgVIcXGYSq9GFyYocFLftQs8IOmmkgtOovs6d4oA==
-  dependencies:
-    mdast-util-frontmatter "^0.2.0"
-    micromark-extension-frontmatter "^0.2.0"
-
-remark-gfm@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/remark-gfm/-/remark-gfm-1.0.0.tgz#9213643001be3f277da6256464d56fd28c3b3c0d"
-  integrity sha512-KfexHJCiqvrdBZVbQ6RopMZGwaXz6wFJEfByIuEwGf0arvITHjiKKZ1dpXujjH9KZdm1//XJQwgfnJ3lmXaDPA==
-  dependencies:
-    mdast-util-gfm "^0.1.0"
-    micromark-extension-gfm "^0.3.0"
-
 remark-mdx@1.6.22:
   version "1.6.22"
   resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-1.6.22.tgz#06a8dab07dcfdd57f3373af7f86bd0e992108bbd"
@@ -13271,13 +13016,6 @@ remark-parse@8.0.3:
     vfile-location "^3.0.0"
     xtend "^4.0.1"
 
-remark-parse@^9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-9.0.0.tgz#4d20a299665880e4f4af5d90b7c7b8a935853640"
-  integrity sha512-geKatMwSzEXKHuzBNU1z676sGcDcFoChMK38TgdHJNAYfFtsfHDQG7MoJAjs6sgYMqyLduCYWDIWZIxiPeafEw==
-  dependencies:
-    mdast-util-from-markdown "^0.8.0"
-
 remark-slug@^6.0.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/remark-slug/-/remark-slug-6.1.0.tgz#0503268d5f0c4ecb1f33315c00465ccdd97923ce"
@@ -13315,7 +13053,7 @@ repeat-element@^1.1.2:
   resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.4.tgz#be681520847ab58c7568ac75fbfad28ed42d39e9"
   integrity sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==
 
-repeat-string@^1.0.0, repeat-string@^1.5.4, repeat-string@^1.6.1:
+repeat-string@^1.5.4, repeat-string@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
   integrity sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==
@@ -14882,11 +14620,6 @@ tr46@~0.0.3:
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
   integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
 
-traverse@^0.6.6:
-  version "0.6.6"
-  resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137"
-  integrity sha512-kdf4JKs8lbARxWdp7RKdNzoJBhGUcIalSYibuGyHJbmk40pOysQ0+QPvlkCOICOivDWU2IJo2rkrxyTK2AH4fw==
-
 tree-kill@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
@@ -15068,11 +14801,6 @@ unbox-primitive@^1.0.2:
     has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
-underscore@^1.13.2:
-  version "1.13.4"
-  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.13.4.tgz#7886b46bbdf07f768e0052f1828e1dcab40c0dee"
-  integrity sha512-BQFnUDuAQ4Yf/cYY5LNrK9NCJFKriaRbD9uR1fTeXnBeoa97W0i41qkZfGO9pSo8I5KzjAcSY2XYtdf0oKd7KQ==
-
 unfetch@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-4.2.0.tgz#7e21b0ef7d363d8d9af0fb929a5555f6ef97a3be"
@@ -15121,18 +14849,6 @@ unified@9.2.0:
     trough "^1.0.0"
     vfile "^4.0.0"
 
-unified@^9.2.2:
-  version "9.2.2"
-  resolved "https://registry.yarnpkg.com/unified/-/unified-9.2.2.tgz#67649a1abfc3ab85d2969502902775eb03146975"
-  integrity sha512-Sg7j110mtefBD+qunSLO1lqOEKdrwBFBrR6Qd8f4uwkhWNlbkaqwHse6e7QvD3AP/MNoJdEDLaf8OxYyoWgorQ==
-  dependencies:
-    bail "^1.0.0"
-    extend "^3.0.0"
-    is-buffer "^2.0.0"
-    is-plain-obj "^2.0.0"
-    trough "^1.0.0"
-    vfile "^4.0.0"
-
 union-value@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.1.tgz#0b6fe7b835aecda61c6ea4d4f02c14221e109847"
@@ -15287,11 +15003,6 @@ update-browserslist-db@^1.0.4:
     escalade "^3.1.1"
     picocolors "^1.0.0"
 
-update-section@^0.3.3:
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/update-section/-/update-section-0.3.3.tgz#458f17820d37820dc60e20b86d94391b00123158"
-  integrity sha512-BpRZMZpgXLuTiKeiu7kK0nIPwGdyrqrs6EDSaXtjD/aQ2T+qVo9a5hRC3HN3iJjCMxNT/VxoLGQ7E/OzE5ucnw==
-
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"

From d40845dffd4ab586fce3f18e5720ed39b9835350 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Mon, 1 May 2023 14:59:33 +0200
Subject: [PATCH 24/37] Make it possible to define extra autosuggest material
 classes

..through the story.
---
 .../autosuggest-material/AutosuggestMaterial.stories.tsx   | 7 ++++++-
 .../Library/autosuggest-material/AutosuggestMaterial.tsx   | 4 +++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/stories/Library/autosuggest-material/AutosuggestMaterial.stories.tsx b/src/stories/Library/autosuggest-material/AutosuggestMaterial.stories.tsx
index 9e76423bf..603541a4f 100644
--- a/src/stories/Library/autosuggest-material/AutosuggestMaterial.stories.tsx
+++ b/src/stories/Library/autosuggest-material/AutosuggestMaterial.stories.tsx
@@ -5,7 +5,7 @@ import {
   AutosuggestMaterialProps,
 } from "./AutosuggestMaterial";
 
-const autosuggestMaterialSuggestions = [
+export const autosuggestMaterialSuggestions = [
   {
     cover: "images/book_cover_1.jpg",
     title: "De uadskillelige",
@@ -36,6 +36,11 @@ export default {
       defaultValue: autosuggestMaterialSuggestions,
       control: { type: "array" },
     },
+    classes: {
+      name: "Classes",
+      defaultValue: undefined,
+      control: { type: "text" },
+    },
   },
   parameters: {
     design: {
diff --git a/src/stories/Library/autosuggest-material/AutosuggestMaterial.tsx b/src/stories/Library/autosuggest-material/AutosuggestMaterial.tsx
index 364368b55..70b8fec52 100644
--- a/src/stories/Library/autosuggest-material/AutosuggestMaterial.tsx
+++ b/src/stories/Library/autosuggest-material/AutosuggestMaterial.tsx
@@ -7,16 +7,18 @@ export type AutosuggestMaterialProps = {
     author: string;
     year: string;
   }[];
+  classes?: string;
 };
 
 export const AutosuggestMaterial: React.FC<AutosuggestMaterialProps> = ({
   materialSuggestions,
+  classes,
 }) => {
   return (
     <>
       {materialSuggestions.map((item) => {
         return (
-          <li className="autosuggest__material-item">
+          <li className={`autosuggest__material-item ${classes || ""}`}>
             <div className="autosuggest__material-card">
               <Cover size="xsmall" animate src={item.cover} shadow />
               <div className="autosuggest__info">

From 359ec9302441811dcf8c1fdb6cdab8707cf01810 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Mon, 1 May 2023 15:01:35 +0200
Subject: [PATCH 25/37] Introduce autosuggest__material-item--two & --one
 modifier classes

---
 .../autosuggest-material/autosuggest-material.scss   | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/stories/Library/autosuggest-material/autosuggest-material.scss b/src/stories/Library/autosuggest-material/autosuggest-material.scss
index b2f5e3a26..1d8403c8a 100644
--- a/src/stories/Library/autosuggest-material/autosuggest-material.scss
+++ b/src/stories/Library/autosuggest-material/autosuggest-material.scss
@@ -18,6 +18,18 @@
       }
     }
 
+    &.autosuggest__material-item--two {
+      @include breakpoint-m {
+        width: calc(100% / 2);
+      }
+    }
+
+    &.autosuggest__material-item--one {
+      @include breakpoint-m {
+        width: 100%;
+      }
+    }
+
     &--highlight {
       background-color: $c-global-secondary;
     }

From 446390d9afaa707a11a841ec1dd3c07bc477be60 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Mon, 1 May 2023 15:02:29 +0200
Subject: [PATCH 26/37] Make it possible to pass down extra autosuggest
 material classes

..in the main Autosuggest component.
---
 .../autosuggest/Autosuggest.stories.tsx       | 26 ++++++++++++++++++-
 .../Blocks/autosuggest/Autosuggest.tsx        |  6 ++++-
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/stories/Blocks/autosuggest/Autosuggest.stories.tsx b/src/stories/Blocks/autosuggest/Autosuggest.stories.tsx
index 0f4dbe3f1..6f2d77615 100644
--- a/src/stories/Blocks/autosuggest/Autosuggest.stories.tsx
+++ b/src/stories/Blocks/autosuggest/Autosuggest.stories.tsx
@@ -1,7 +1,9 @@
 import { ComponentStory } from "@storybook/react";
 import { withDesign } from "storybook-addon-designs";
 import { Autosuggest, AutosuggestProps } from "./Autosuggest";
-import AutosuggestMaterialStories from "../../Library/autosuggest-material/AutosuggestMaterial.stories";
+import AutosuggestMaterialStories, {
+  autosuggestMaterialSuggestions,
+} from "../../Library/autosuggest-material/AutosuggestMaterial.stories";
 import AutosuggestTextStories from "../../Library/autosuggest-text/AutosuggestText.stories";
 
 export default {
@@ -57,3 +59,25 @@ const Template: ComponentStory<typeof Autosuggest> = (
 );
 
 export const Default = Template.bind({});
+
+const getStoryArguments = (suggestions: number) => {
+  return {
+    ...AutosuggestTextStories.argTypes,
+    materialSuggestions: {
+      ...{ ...AutosuggestMaterialStories.argTypes?.materialSuggestions },
+      defaultValue: autosuggestMaterialSuggestions.slice(0, suggestions),
+    },
+    classes: {
+      ...{ ...AutosuggestMaterialStories.argTypes?.classes },
+      defaultValue: `autosuggest__material-item--${
+        suggestions === 2 ? "two" : ""
+      }${suggestions === 1 ? "one" : ""}`,
+    },
+  };
+};
+
+export const TwoMaterials = Template.bind({});
+TwoMaterials.argTypes = getStoryArguments(2);
+
+export const OneMaterial = Template.bind({});
+OneMaterial.argTypes = getStoryArguments(1);
diff --git a/src/stories/Blocks/autosuggest/Autosuggest.tsx b/src/stories/Blocks/autosuggest/Autosuggest.tsx
index 8662724dc..b612aa599 100644
--- a/src/stories/Blocks/autosuggest/Autosuggest.tsx
+++ b/src/stories/Blocks/autosuggest/Autosuggest.tsx
@@ -13,11 +13,15 @@ export const Autosuggest: React.FC<AutosuggestProps> = ({
   textSuggestions,
   categoryText,
   materialSuggestions,
+  classes,
 }) => {
   return (
     <ul className="autosuggest pb-16">
       <AutosuggestText textSuggestions={textSuggestions} />
-      <AutosuggestMaterial materialSuggestions={materialSuggestions} />
+      <AutosuggestMaterial
+        materialSuggestions={materialSuggestions}
+        classes={classes}
+      />
       <AutosuggestText
         textSuggestions={textSuggestions}
         categoryText={categoryText}

From e0eb3d616c5e8f688bcfbada567b1784e046b534 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Mon, 1 May 2023 15:20:47 +0200
Subject: [PATCH 27/37] Move autosuggestMaterialSuggestions into a separate
 helper file

If it lives inside the AutosuggestMaterial.stories.tsx it gets exported
as a separate story, which we don't want.
---
 .../autosuggest/Autosuggest.stories.tsx       |  5 ++---
 .../AutosuggestMaterial.stories.tsx           | 22 +------------------
 .../Library/autosuggest-material/helper.ts    | 22 +++++++++++++++++++
 3 files changed, 25 insertions(+), 24 deletions(-)
 create mode 100644 src/stories/Library/autosuggest-material/helper.ts

diff --git a/src/stories/Blocks/autosuggest/Autosuggest.stories.tsx b/src/stories/Blocks/autosuggest/Autosuggest.stories.tsx
index 6f2d77615..ac32efe2a 100644
--- a/src/stories/Blocks/autosuggest/Autosuggest.stories.tsx
+++ b/src/stories/Blocks/autosuggest/Autosuggest.stories.tsx
@@ -1,10 +1,9 @@
 import { ComponentStory } from "@storybook/react";
 import { withDesign } from "storybook-addon-designs";
 import { Autosuggest, AutosuggestProps } from "./Autosuggest";
-import AutosuggestMaterialStories, {
-  autosuggestMaterialSuggestions,
-} from "../../Library/autosuggest-material/AutosuggestMaterial.stories";
+import AutosuggestMaterialStories from "../../Library/autosuggest-material/AutosuggestMaterial.stories";
 import AutosuggestTextStories from "../../Library/autosuggest-text/AutosuggestText.stories";
+import { autosuggestMaterialSuggestions } from "../../Library/autosuggest-material/helper";
 
 export default {
   title: "Blocks / Autosuggest",
diff --git a/src/stories/Library/autosuggest-material/AutosuggestMaterial.stories.tsx b/src/stories/Library/autosuggest-material/AutosuggestMaterial.stories.tsx
index 603541a4f..e6e853423 100644
--- a/src/stories/Library/autosuggest-material/AutosuggestMaterial.stories.tsx
+++ b/src/stories/Library/autosuggest-material/AutosuggestMaterial.stories.tsx
@@ -4,27 +4,7 @@ import {
   AutosuggestMaterial,
   AutosuggestMaterialProps,
 } from "./AutosuggestMaterial";
-
-export const autosuggestMaterialSuggestions = [
-  {
-    cover: "images/book_cover_1.jpg",
-    title: "De uadskillelige",
-    author: "Simone De Beauvoir",
-    year: "1954",
-  },
-  {
-    cover: "images/book_cover_2.jpg",
-    title: "Den lille bog om dansk design",
-    author: "Marie Hugsted",
-    year: "2018",
-  },
-  {
-    cover: "images/book_cover_3.jpg",
-    title: "Audrey Hepburn",
-    author: "Maria Isabel Sanchez Vegara",
-    year: "2018",
-  },
-];
+import { autosuggestMaterialSuggestions } from "./helper";
 
 export default {
   title: "Library / Autosuggest - Material",
diff --git a/src/stories/Library/autosuggest-material/helper.ts b/src/stories/Library/autosuggest-material/helper.ts
new file mode 100644
index 000000000..4112d3923
--- /dev/null
+++ b/src/stories/Library/autosuggest-material/helper.ts
@@ -0,0 +1,22 @@
+export const autosuggestMaterialSuggestions = [
+  {
+    cover: "images/book_cover_1.jpg",
+    title: "De uadskillelige",
+    author: "Simone De Beauvoir",
+    year: "1954",
+  },
+  {
+    cover: "images/book_cover_2.jpg",
+    title: "Den lille bog om dansk design",
+    author: "Marie Hugsted",
+    year: "2018",
+  },
+  {
+    cover: "images/book_cover_3.jpg",
+    title: "Audrey Hepburn",
+    author: "Maria Isabel Sanchez Vegara",
+    year: "2018",
+  },
+];
+
+export default {};

From befa727f406119c84af4a28abed254ff19229a8a Mon Sep 17 00:00:00 2001
From: Kasper Birch <kasperbirch1@gmail.com>
Date: Tue, 25 Apr 2023 13:49:36 +0200
Subject: [PATCH 28/37] Add min-height to `.search-result-item__title`

To prevent letters like 'g' from being cut off due to `text-overflow: ellipsis;` and `overflow: hidden;`, I have included `min-height: 30px;` for correct display.
---
 src/stories/Library/card-list-item/card-list-item.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/stories/Library/card-list-item/card-list-item.scss b/src/stories/Library/card-list-item/card-list-item.scss
index 9d08fce4a..c681fb24a 100644
--- a/src/stories/Library/card-list-item/card-list-item.scss
+++ b/src/stories/Library/card-list-item/card-list-item.scss
@@ -65,5 +65,6 @@
     margin-top: 16px;
     overflow: hidden;
     text-overflow: ellipsis;
+    min-height: 30px;
   }
 }

From f714bb54ff5b3f8a6f871f1ad074302ba4df3ee1 Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Wed, 3 May 2023 15:15:06 +0200
Subject: [PATCH 29/37] 577: rename recommender to simple material

---
 .../{Recommender.tsx => SimpleMaterial.tsx}        | 14 +++++++-------
 src/stories/Library/recommender/recommender.scss   |  4 ++--
 2 files changed, 9 insertions(+), 9 deletions(-)
 rename src/stories/Library/recommender/{Recommender.tsx => SimpleMaterial.tsx} (83%)

diff --git a/src/stories/Library/recommender/Recommender.tsx b/src/stories/Library/recommender/SimpleMaterial.tsx
similarity index 83%
rename from src/stories/Library/recommender/Recommender.tsx
rename to src/stories/Library/recommender/SimpleMaterial.tsx
index c33955f16..429ee9544 100644
--- a/src/stories/Library/recommender/Recommender.tsx
+++ b/src/stories/Library/recommender/SimpleMaterial.tsx
@@ -60,11 +60,11 @@ const Recommender: React.FC<RecommenderProps> = ({
       >
         {recommenderData.map(({ title: recTitle, filled, authors }) => (
           <li
-            className={`recommender-material ${
-              bright ? "`recommender-material--bright" : ""
+            className={`simple-material ${
+              bright ? "`simple-material--bright" : ""
             }`}
           >
-            <div className="recommender-material__favourite">
+            <div className="simple-material__favourite">
               <div className="button-favourite button-favourite">
                 <SvgIcon
                   className={`icon-favourite icon-favourite${
@@ -77,7 +77,7 @@ const Recommender: React.FC<RecommenderProps> = ({
                 />
               </div>
             </div>
-            <div className="recommender-material__cover-container">
+            <div className="simple-material__cover-container">
               <Cover
                 src="images/book_cover_3.jpg"
                 size="medium"
@@ -85,9 +85,9 @@ const Recommender: React.FC<RecommenderProps> = ({
                 tint="120"
               />
             </div>
-            <div className="recommender-material__meta">
-              <a className="recommender-material__title">{recTitle}</a>
-              <div className="recommender-material__author">{authors}</div>
+            <div className="simple-material__meta">
+              <a className="simple-material__title">{recTitle}</a>
+              <div className="simple-material__author">{authors}</div>
             </div>
           </li>
         ))}
diff --git a/src/stories/Library/recommender/recommender.scss b/src/stories/Library/recommender/recommender.scss
index c79830c54..954691338 100644
--- a/src/stories/Library/recommender/recommender.scss
+++ b/src/stories/Library/recommender/recommender.scss
@@ -11,7 +11,7 @@
   /* stylelint-disable max-nesting-depth */
   &--triple-desktop {
     @include breakpoint-m {
-      .recommender-material {
+      .simple-material {
         &:last-of-type {
           display: none;
         }
@@ -72,7 +72,7 @@
   }
 }
 
-.recommender-material {
+.simple-material {
   border: 1px solid $c-text-secondary-gray;
   padding: 30px;
   display: flex;

From dd004827cd12eac8a86a83390c4a7c6036c5db93 Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Wed, 3 May 2023 15:31:15 +0200
Subject: [PATCH 30/37] CMN-577: revert file rename

---
 .../Library/recommender/{SimpleMaterial.tsx => Recommender.tsx}   | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/stories/Library/recommender/{SimpleMaterial.tsx => Recommender.tsx} (100%)

diff --git a/src/stories/Library/recommender/SimpleMaterial.tsx b/src/stories/Library/recommender/Recommender.tsx
similarity index 100%
rename from src/stories/Library/recommender/SimpleMaterial.tsx
rename to src/stories/Library/recommender/Recommender.tsx

From 09a1336ccdb4572bee8febbc1b4a8e0b5f4d12ae Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Wed, 3 May 2023 15:37:48 +0200
Subject: [PATCH 31/37] CMN-577: rename recommender to recommenders

---
 base.scss                                                      | 3 +--
 .../Recommenders.stories.tsx}                                  | 2 +-
 .../Recommender.tsx => recommenders/Recommenders.tsx}          | 0
 .../recommender.scss => recommenders/recommenders.scss}        | 0
 4 files changed, 2 insertions(+), 3 deletions(-)
 rename src/stories/Library/{recommender/Recommender.stories.tsx => recommenders/Recommenders.stories.tsx} (97%)
 rename src/stories/Library/{recommender/Recommender.tsx => recommenders/Recommenders.tsx} (100%)
 rename src/stories/Library/{recommender/recommender.scss => recommenders/recommenders.scss} (100%)

diff --git a/base.scss b/base.scss
index 0e1cf0d0a..39275e837 100644
--- a/base.scss
+++ b/base.scss
@@ -87,7 +87,7 @@
 @import "./src/stories/Library/Modals/modal-infomedia/infomedia";
 @import "./src/stories/Library/pincode-container/pincode-container";
 @import "./src/stories/Library/promo-bar/promo-bar";
-@import "./src/stories/Library/recommender/recommender";
+@import "./src/stories/Library/recommenders/recommenders";
 @import "./src/stories/Library/Lists/list-intermediates/list-intermediates";
 @import "./src/stories/Library/instant-loan/instant-loan";
 @import "./src/stories/Library/scroll-lock-background/scroll-lock-background";
@@ -98,7 +98,6 @@
 @import "./src/stories/Library/autosuggest-material/autosuggest-material";
 @import "./src/stories/Library/favorites-list-material-component/favorites-list-material-component";
 
-
 // Blocks
 @import "./src/stories/Blocks/footer/footer";
 @import "./src/stories/Blocks/header/header";
diff --git a/src/stories/Library/recommender/Recommender.stories.tsx b/src/stories/Library/recommenders/Recommenders.stories.tsx
similarity index 97%
rename from src/stories/Library/recommender/Recommender.stories.tsx
rename to src/stories/Library/recommenders/Recommenders.stories.tsx
index 56647f79d..13796fb3c 100644
--- a/src/stories/Library/recommender/Recommender.stories.tsx
+++ b/src/stories/Library/recommenders/Recommenders.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
-import Recommender from "./Recommender";
+import Recommender from "./Recommenders";
 
 export default {
   title: "Library / Recommender",
diff --git a/src/stories/Library/recommender/Recommender.tsx b/src/stories/Library/recommenders/Recommenders.tsx
similarity index 100%
rename from src/stories/Library/recommender/Recommender.tsx
rename to src/stories/Library/recommenders/Recommenders.tsx
diff --git a/src/stories/Library/recommender/recommender.scss b/src/stories/Library/recommenders/recommenders.scss
similarity index 100%
rename from src/stories/Library/recommender/recommender.scss
rename to src/stories/Library/recommenders/recommenders.scss

From 6982ba09679c959430e1028608dfeb637c699d20 Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Wed, 3 May 2023 15:38:01 +0200
Subject: [PATCH 32/37] CMN-577: delete favorites-list-material-component

---
 .../favorites-list-material-component.scss    | 105 ------------------
 ...orites-list-material-component.stories.tsx |  49 --------
 .../favorites-list-material-component.tsx     |  76 -------------
 3 files changed, 230 deletions(-)
 delete mode 100644 src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss
 delete mode 100644 src/stories/Library/favorites-list-material-component/favorites-list-material-component.stories.tsx
 delete mode 100644 src/stories/Library/favorites-list-material-component/favorites-list-material-component.tsx

diff --git a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss
deleted file mode 100644
index ac50fc790..000000000
--- a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss
+++ /dev/null
@@ -1,105 +0,0 @@
-.favorites-list-mc {
-  background-color: $c-global-tertiary-2;
-  color: $c-text-primary-white;
-  border-color: $c-text-secondary-gray;
-
-  @include breakpoint-m {
-    padding: $s-6xl;
-  }
-
-  &--bright {
-    background-color: $c-global-primary;
-    color: $c-text-primary-black;
-    border-color: $c-global-tertiary-1;
-
-    @include breakpoint-m {
-      padding: $s-6xl;
-    }
-  }
-
-  &__title {
-    text-align: center;
-    padding: $s-lg;
-
-    &--left {
-      text-align: left;
-    }
-
-    @include breakpoint-m {
-      padding-bottom: $s-6xl;
-    }
-  }
-
-  &__buttons {
-    display: flex;
-    justify-content: end;
-    margin-bottom: $s-md;
-  }
-
-  &__grid {
-    display: grid;
-    grid-template-columns: 50% 50%;
-    grid-template-rows: 50% 50%;
-
-    @include breakpoint-m {
-      grid-template-columns: 25% 25% 25% 25%;
-    }
-  }
-}
-
-.favorites-list-mc-material {
-  border: 1px solid $c-text-secondary-gray;
-  padding: $s-xl;
-  display: flex;
-  width: 100%;
-  position: relative;
-  height: 350px;
-
-  &--bright {
-    border: 1px solid $c-global-tertiary-1;
-  }
-
-  &__favourite {
-    position: absolute;
-    top: $s-sm;
-    right: $s-sm;
-  }
-
-  &__cover-container {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    margin-top: $s-sm;
-  }
-
-  &__meta {
-    position: absolute;
-    left: $s-sm;
-    bottom: $s-sm;
-    width: 100%;
-    padding-right: $s-sm;
-  }
-
-  &__title {
-    @extend %text-body-medium-regular-placeholder;
-    text-decoration: none;
-    display: block;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    color: inherit;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  &__author {
-    @extend %text-body-medium-regular-placeholder;
-    font-weight: 500;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    color: inherit;
-  }
-}
diff --git a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.stories.tsx b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.stories.tsx
deleted file mode 100644
index c42b234a7..000000000
--- a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.stories.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import FavoritesListMaterialComponent from "./favorites-list-material-component";
-
-export default {
-  title: "Library / Favorites list material-component",
-  component: FavoritesListMaterialComponent,
-  argTypes: {
-    title: {
-      control: "text",
-      defaultValue: "Din favoritliste",
-    },
-    bright: {
-      control: { type: "boolean" },
-      defaultValue: true,
-    },
-    recommenderData: {
-      control: "object",
-      defaultValue: [
-        {
-          title: "Ella Fitzgerald",
-          authors: "Af Isabel Sánchez Vegara",
-          filled: true,
-        },
-        {
-          title: "Ella Fitzgerald",
-          authors: "Af Isabel Sánchez Vegara",
-          filled: true,
-        },
-        {
-          title: "Ella Fitzgerald",
-          authors: "Af Isabel Sánchez Vegara",
-          filled: true,
-        },
-        {
-          title: "Ella Fitzgerald",
-          authors: "Af Isabel Sánchez Vegara",
-          filled: true,
-        },
-      ],
-    },
-  },
-} as ComponentMeta<typeof FavoritesListMaterialComponent>;
-
-const Template: ComponentStory<typeof FavoritesListMaterialComponent> = (
-  args
-) => <FavoritesListMaterialComponent {...args} />;
-
-export const FavoritesList = Template.bind({});
-FavoritesList.args = {};
diff --git a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.tsx b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.tsx
deleted file mode 100644
index 5c5220c4b..000000000
--- a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import Cover from "../cover/Cover";
-import { ReactComponent as SvgIcon } from "../Icons/icon-favourite/icon-favourite.svg";
-
-export type RecommenderData = {
-  title: string;
-  authors: string;
-  filled: boolean;
-};
-export type RecommenderProps = {
-  recommenderData: RecommenderData[];
-  title: string;
-  bright: boolean;
-};
-
-const FavoritesListMaterialComponent: React.FC<RecommenderProps> = ({
-  recommenderData,
-  title,
-  bright,
-}) => {
-  return (
-    <div
-      className={`favorites-list-mc ${
-        bright ? "favorites-list-mc--bright" : ""
-      }`}
-    >
-      <h3 className="text-header-h3 recommender__title--left">{title}</h3>
-      <div className="favorites-list-mc__buttons">
-        <button
-          type="button"
-          className={`button-link ${bright ? "button-link--bright" : ""}`}
-        >
-          Gå til dine favoritter
-        </button>
-      </div>
-      <ul className="favorites-list-mc__grid">
-        {recommenderData.map(({ title: recTitle, filled, authors }) => (
-          <li
-            className={`favorites-list-mc-material ${
-              bright ? "`favorites-list-mc-material--bright" : ""
-            }`}
-          >
-            <div className="favorites-list-mc-material__favourite">
-              <div className="button-favourite button-favourite">
-                <SvgIcon
-                  className={`icon-favourite icon-favourite${
-                    !bright ? "--bright" : ""
-                  } ${
-                    filled
-                      ? `icon-favourite--${!bright ? "bright-" : ""}filled`
-                      : ""
-                  }`}
-                />
-              </div>
-            </div>
-            <div className="favorites-list-mc-material__cover-container">
-              <Cover
-                src="images/book_cover_3.jpg"
-                size="medium"
-                animate={false}
-                tint="120"
-              />
-            </div>
-            <div className="favorites-list-mc-material__meta">
-              <a className="favorites-list-mc-material__title">{recTitle}</a>
-              <div className="favorites-list-mc-material__author">
-                {authors}
-              </div>
-            </div>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-};
-
-export default FavoritesListMaterialComponent;

From 39f85fe4019662d9d1d985909d882aa0b372a0d3 Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Wed, 3 May 2023 15:42:21 +0200
Subject: [PATCH 33/37] CMN-577: remove deleted file from base.scss

---
 base.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/base.scss b/base.scss
index 39275e837..ff10258a4 100644
--- a/base.scss
+++ b/base.scss
@@ -96,7 +96,6 @@
 @import "./src/stories/Blocks/autosuggest/autosuggest";
 @import "./src/stories/Library/autosuggest-text/autosuggest-text";
 @import "./src/stories/Library/autosuggest-material/autosuggest-material";
-@import "./src/stories/Library/favorites-list-material-component/favorites-list-material-component";
 
 // Blocks
 @import "./src/stories/Blocks/footer/footer";

From a9bf936fe059d5901280e71408c2fc03d4cf38be Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Thu, 4 May 2023 14:05:19 +0200
Subject: [PATCH 34/37] 5593: mobile view of group modal

---
 .../list-materials/ListMaterials.stories.tsx  |  11 +-
 .../Lists/list-materials/ListMaterials.tsx    | 126 ++++++++++++------
 .../Lists/list-materials/list-materials.scss  |  15 ++-
 .../Modals/modal-loan/ModalLoan.stories.tsx   |   1 -
 .../Library/Modals/modal-loan/ModalLoan.tsx   | 118 +++++-----------
 5 files changed, 134 insertions(+), 137 deletions(-)

diff --git a/src/stories/Library/Lists/list-materials/ListMaterials.stories.tsx b/src/stories/Library/Lists/list-materials/ListMaterials.stories.tsx
index 684854e83..1e7ecb002 100644
--- a/src/stories/Library/Lists/list-materials/ListMaterials.stories.tsx
+++ b/src/stories/Library/Lists/list-materials/ListMaterials.stories.tsx
@@ -1,6 +1,5 @@
 import { withDesign } from "storybook-addon-designs";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
-
 import { ListMaterials } from "./ListMaterials";
 
 export default {
@@ -30,14 +29,12 @@ const Template: ComponentStory<typeof ListMaterials> = (args) => (
 
 export const Item = Template.bind({});
 Item.args = {
+  year: "2001",
   title: "Audrey Hepburn",
-  author: "Af Isabel Sánchez Vegara, Amaia Arrazola (2018)",
+  author: "Af Isabel Sánchez Vegara, Amaia Arrazola",
+  statusMessage: "The item cannot be renewed further",
   isChecked: true,
-  canBeRenewed: true,
-  statusDelivery: {
-    label: "AFLEVERES 20.11.21",
-    status: "neutral",
-  },
+  disabled: true,
   statusMaterialType: {
     label: "bog",
     status: "outline",
diff --git a/src/stories/Library/Lists/list-materials/ListMaterials.tsx b/src/stories/Library/Lists/list-materials/ListMaterials.tsx
index f305424df..359374345 100644
--- a/src/stories/Library/Lists/list-materials/ListMaterials.tsx
+++ b/src/stories/Library/Lists/list-materials/ListMaterials.tsx
@@ -1,23 +1,25 @@
-import { useState } from "react";
+import { useState, FC } from "react";
 import { Checkbox } from "../../Forms/checkbox/Checkbox";
 import { StatusLabel, StatusLabelProps } from "../../status-label/StatusLabel";
 
 export type ListMaterialsProps = {
   title: string;
   author: string;
+  year: string;
+  statusMessage: string;
   statusMaterialType: StatusLabelProps;
-  statusDelivery: StatusLabelProps;
-  canBeRenewed: boolean;
   isChecked: boolean;
+  disabled: boolean;
 };
 
-export const ListMaterials: React.FC<ListMaterialsProps> = ({
+export const ListMaterials: FC<ListMaterialsProps> = ({
   title,
+  year,
   author,
-  statusDelivery,
   statusMaterialType,
-  canBeRenewed,
   isChecked,
+  statusMessage,
+  disabled,
 }) => {
   const [isItChecked, setIsItChecked] = useState(isChecked);
 
@@ -26,40 +28,86 @@ export const ListMaterials: React.FC<ListMaterialsProps> = ({
   };
 
   return (
-    <div
-      className={`list-materials ${
-        isItChecked ? "list-materials__selected" : ""
-      }`}
-    >
-      {canBeRenewed && (
-        <div className="list-materials__checkbox mr-32">
-          <Checkbox
-            hiddenLabel={false}
-            isChecked={isItChecked}
-            callback={handleToggle}
-            ariaLabel="Vælg materiale"
-          />
+    <ul className="modal-loan__list-materials">
+      <li>
+        <div
+          className={`list-materials ${
+            disabled ? "list-materials--disabled" : ""
+          }`}
+        >
+          <div className="list-materials__checkbox mr-32">
+            <Checkbox isChecked={false} hiddenLabel label={`Select ${title}`} />
+          </div>
+          <div className="list-materials__content">
+            <div className="list-materials__content-status">
+              <StatusLabel {...statusMaterialType} />
+            </div>
+            <p className="text-header-h5 mt-8">{title}</p>
+            <p className="text-small-caption">
+              {author} ({year})
+            </p>
+          </div>
+          <div className="list-materials__status">
+            {statusMessage && (
+              <span className="list-materials__status__note-desktop">
+                {statusMessage}
+              </span>
+            )}
+            <div>
+              <div className="status-label status-label--neutral">
+                Afleveres 27-04-2023
+              </div>
+              {statusMessage && (
+                <span className="list-materials__status__note-mobile">
+                  {statusMessage}
+                </span>
+              )}
+              <button
+                type="button"
+                className="list-reservation__note"
+                aria-label="Go to Alt om håndarbejdes strikkemagasin material details"
+              >
+                Go to material details
+              </button>
+            </div>
+          </div>
         </div>
-      )}
-      <div className="list-materials__content">
-        <div className="list-materials__content-status">
-          <StatusLabel {...statusMaterialType} />
-          <StatusLabel
-            classNames="list-materials__content-status-label"
-            {...statusDelivery}
-          />
+      </li>
+      <li>
+        <div className="list-materials">
+          <div className="list-materials__checkbox mr-32">
+            <Checkbox
+              callback={handleToggle}
+              isChecked={isItChecked}
+              hiddenLabel
+              label={`Select ${title}`}
+            />
+          </div>
+          <div className="list-materials__content">
+            <div className="list-materials__content-status">
+              <div className="status-label status-label--outline">Bog</div>
+            </div>
+            <p className="text-header-h5 mt-8">{title}</p>
+            <p className="text-small-caption">
+              {author} ({year})
+            </p>
+          </div>
+          <div className="list-materials__status">
+            <div>
+              <div className="status-label status-label--neutral">
+                Afleveres 27-04-2023
+              </div>
+              <button
+                type="button"
+                className="list-reservation__note"
+                aria-label="Go to Alt om håndarbejdes strikkemagasin material details"
+              >
+                Go to material details
+              </button>
+            </div>
+          </div>
         </div>
-        <p className="text-header-h5 mt-8">{title}</p>
-        <p className="text-small-caption">{author}</p>
-      </div>
-      <div className="list-materials__status">
-        {!canBeRenewed && (
-          <span className="text-small-caption">
-            Digitale materialer kan ikke fornys
-          </span>
-        )}
-        <StatusLabel {...statusDelivery} />
-      </div>
-    </div>
+      </li>
+    </ul>
   );
 };
diff --git a/src/stories/Library/Lists/list-materials/list-materials.scss b/src/stories/Library/Lists/list-materials/list-materials.scss
index c63960670..ea895b629 100644
--- a/src/stories/Library/Lists/list-materials/list-materials.scss
+++ b/src/stories/Library/Lists/list-materials/list-materials.scss
@@ -43,9 +43,20 @@
   margin-top: 0;
   align-items: center;
   grid-gap: 16px;
+}
 
-  .text-small-caption {
-    color: $c-text-secondary-gray;
+.list-materials__status__note-desktop {
+  @extend %text-small-caption;
+  display: none;
+  @include breakpoint-s {
+    display: flex;
+  }
+}
+.list-materials__status__note-mobile {
+  @extend %text-small-caption;
+  display: flex;
+  @include breakpoint-s {
+    display: none;
   }
 }
 
diff --git a/src/stories/Library/Modals/modal-loan/ModalLoan.stories.tsx b/src/stories/Library/Modals/modal-loan/ModalLoan.stories.tsx
index abb834cad..27cef44d5 100644
--- a/src/stories/Library/Modals/modal-loan/ModalLoan.stories.tsx
+++ b/src/stories/Library/Modals/modal-loan/ModalLoan.stories.tsx
@@ -1,6 +1,5 @@
 import { withDesign } from "storybook-addon-designs";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
-
 import { ModalLoan } from "./ModalLoan";
 
 export default {
diff --git a/src/stories/Library/Modals/modal-loan/ModalLoan.tsx b/src/stories/Library/Modals/modal-loan/ModalLoan.tsx
index 1e81e59df..9b9ae3212 100644
--- a/src/stories/Library/Modals/modal-loan/ModalLoan.tsx
+++ b/src/stories/Library/Modals/modal-loan/ModalLoan.tsx
@@ -1,8 +1,7 @@
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { Button } from "../../Buttons/button/Button";
 import { Checkbox } from "../../Forms/checkbox/Checkbox";
 import { Counter } from "../../counter/Counter";
-import { LinkFilters } from "../../link-filters/LinkFilters";
 import {
   ListMaterials,
   ListMaterialsProps,
@@ -19,56 +18,48 @@ const listExpired: LoanMaterials = [
   {
     list: [
       {
+        year: "2001",
         title: "Audrey Hepburn",
-        author: "Af Isabel Sánchez Vegara, Amaia Arrazola (2018)",
-        isChecked: false,
-        canBeRenewed: true,
-        statusDelivery: {
-          label: "AFLEVERES 20.11.21",
-          status: "danger",
-        },
+        author: "Af Isabel Sánchez Vegara, Amaia Arrazola",
+        statusMessage: "The item cannot be renewed further",
+        isChecked: true,
+        disabled: true,
         statusMaterialType: {
           label: "bog",
           status: "outline",
         },
       },
       {
+        year: "2001",
         title: "Audrey Hepburn",
-        author: "Af Isabel Sánchez Vegara, Amaia Arrazola (2018)",
-        isChecked: false,
-        canBeRenewed: true,
-        statusDelivery: {
-          label: "AFLEVERES 20.11.21",
-          status: "danger",
-        },
+        author: "Af Isabel Sánchez Vegara, Amaia Arrazola",
+        statusMessage: "The item cannot be renewed further",
+        isChecked: true,
+        disabled: false,
         statusMaterialType: {
           label: "bog",
           status: "outline",
         },
       },
       {
+        year: "2001",
         title: "Audrey Hepburn",
-        author: "Af Isabel Sánchez Vegara, Amaia Arrazola (2018)",
-        isChecked: false,
-        canBeRenewed: true,
-        statusDelivery: {
-          label: "AFLEVERES 20.11.21",
-          status: "danger",
-        },
+        author: "Af Isabel Sánchez Vegara, Amaia Arrazola",
+        statusMessage: "The item cannot be renewed further",
+        isChecked: true,
+        disabled: true,
         statusMaterialType: {
           label: "bog",
           status: "outline",
         },
       },
       {
+        year: "2001",
         title: "Audrey Hepburn",
-        author: "Af Isabel Sánchez Vegara, Amaia Arrazola (2018)",
-        isChecked: false,
-        canBeRenewed: false,
-        statusDelivery: {
-          label: "AFLEVERES 20.11.21",
-          status: "danger",
-        },
+        author: "Af Isabel Sánchez Vegara, Amaia Arrazola",
+        statusMessage: "The item cannot be renewed further",
+        isChecked: true,
+        disabled: true,
         statusMaterialType: {
           label: "bog",
           status: "outline",
@@ -80,36 +71,14 @@ const listExpired: LoanMaterials = [
 
 const listExpiresSoon: LoanMaterials = [
   {
-    materialType: "lån",
-    list: [
-      {
-        title: "Audrey Hepburn",
-        author: "Af Isabel Sánchez Vegara, Amaia Arrazola (2018)",
-        isChecked: false,
-        canBeRenewed: true,
-        statusDelivery: {
-          label: "AFLEVERES 20.11.21",
-          status: "warning",
-        },
-        statusMaterialType: {
-          label: "bog",
-          status: "outline",
-        },
-      },
-    ],
-  },
-  {
-    materialType: "digitale lån",
     list: [
       {
+        year: "2001",
         title: "Audrey Hepburn",
-        author: "Af Isabel Sánchez Vegara, Amaia Arrazola (2018)",
+        author: "Af Isabel Sánchez Vegara, Amaia Arrazola",
+        statusMessage: "The item cannot be renewed further",
         isChecked: true,
-        canBeRenewed: true,
-        statusDelivery: {
-          label: "UDLØBER 20.11.21",
-          status: "warning",
-        },
+        disabled: true,
         statusMaterialType: {
           label: "bog",
           status: "outline",
@@ -138,16 +107,6 @@ export const ModalLoan: React.FC<ModalLoanProps> = ({
   const isExpired = showExpired;
   const loanList = isExpired ? listExpired : listExpiresSoon;
 
-  const countRenewable = useMemo(() => {
-    let total = 0;
-    loanList.forEach((loans) =>
-      loans.list.forEach((material) => {
-        if (material.canBeRenewed) total += 1;
-      })
-    );
-    return total;
-  }, [loanList]);
-
   const handleToggleAll = () => {
     setChecked(!isAllChecked);
   };
@@ -161,7 +120,7 @@ export const ModalLoan: React.FC<ModalLoanProps> = ({
               <Counter
                 label="dage"
                 percentage={100}
-                value={-2}
+                value={0}
                 status="danger"
                 isReady={false}
               />
@@ -192,7 +151,7 @@ export const ModalLoan: React.FC<ModalLoanProps> = ({
             />
             <Button
               buttonType="default"
-              label={`Forny mulige (${countRenewable})`}
+              label="Forny mulige (2)"
               size="small"
               variant="filled"
               disabled={false}
@@ -201,32 +160,15 @@ export const ModalLoan: React.FC<ModalLoanProps> = ({
           </div>
         )}
         <ul className="modal-loan__list-container">
-          {loanList.map(({ materialType, list }) => (
+          {loanList.map(({ list }) => (
             <li className="modal-loan__list">
-              {materialType && (
-                <div className="modal-loan__count">
-                  <LinkFilters
-                    filters={[
-                      {
-                        title: materialType,
-                        counter: `${list.length}`,
-                        href: "/",
-                      },
-                    ]}
-                  />
-                </div>
-              )}
               <ul className="modal-loan__list-materials">
                 {list.map((listItem, index) => (
                   <li>
                     <ListMaterials
                       key={`${index}-${isAllChecked}`}
                       {...listItem}
-                      isChecked={
-                        listItem.canBeRenewed
-                          ? listItem.isChecked || isAllChecked
-                          : false
-                      }
+                      isChecked={listItem.isChecked}
                     />
                   </li>
                 ))}
@@ -244,7 +186,7 @@ export const ModalLoan: React.FC<ModalLoanProps> = ({
             />
             <Button
               buttonType="default"
-              label={`Forny mulige (${countRenewable})`}
+              label="Forny mulige (2)"
               size="small"
               variant="filled"
               disabled={false}

From 0afcdf99f1396c3a3babcd490c8a012ec660a0a8 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Tue, 9 May 2023 14:19:30 +0200
Subject: [PATCH 35/37] Use clsx to assign classes in Autosuggest story

---
 src/stories/Blocks/autosuggest/Autosuggest.stories.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/stories/Blocks/autosuggest/Autosuggest.stories.tsx b/src/stories/Blocks/autosuggest/Autosuggest.stories.tsx
index ac32efe2a..524b00e52 100644
--- a/src/stories/Blocks/autosuggest/Autosuggest.stories.tsx
+++ b/src/stories/Blocks/autosuggest/Autosuggest.stories.tsx
@@ -1,5 +1,6 @@
 import { ComponentStory } from "@storybook/react";
 import { withDesign } from "storybook-addon-designs";
+import clsx from "clsx";
 import { Autosuggest, AutosuggestProps } from "./Autosuggest";
 import AutosuggestMaterialStories from "../../Library/autosuggest-material/AutosuggestMaterial.stories";
 import AutosuggestTextStories from "../../Library/autosuggest-text/AutosuggestText.stories";
@@ -68,9 +69,10 @@ const getStoryArguments = (suggestions: number) => {
     },
     classes: {
       ...{ ...AutosuggestMaterialStories.argTypes?.classes },
-      defaultValue: `autosuggest__material-item--${
-        suggestions === 2 ? "two" : ""
-      }${suggestions === 1 ? "one" : ""}`,
+      defaultValue: clsx({
+        "autosuggest__material-item--two": suggestions === 2,
+        "autosuggest__material-item--one": suggestions === 1,
+      }),
     },
   };
 };

From 9baedf008f13298479d8ad0dce01cfda20755d54 Mon Sep 17 00:00:00 2001
From: Kasper Birch <kasperbirch1@gmail.com>
Date: Tue, 25 Apr 2023 13:00:46 +0200
Subject: [PATCH 36/37] Modify `.material-header__button` CSS to target direct
 child elements

Since the `.material-header__button` class can contain either a 'button' or an 'a' tag, we need to target direct child elements, ensuring proper styling for both types of elements.
---
 src/stories/Library/material-header/material-header.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stories/Library/material-header/material-header.scss b/src/stories/Library/material-header/material-header.scss
index a62d88d08..354305a84 100644
--- a/src/stories/Library/material-header/material-header.scss
+++ b/src/stories/Library/material-header/material-header.scss
@@ -59,7 +59,7 @@
   }
 
   // set all buttons to the full width
-  &__button button {
+  &__button > * {
     width: 100%;
     @include breakpoint-m {
       width: 346px;

From 88ccc034569437b4098a9938f529361265787da6 Mon Sep 17 00:00:00 2001
From: Kasper Birch <kasperbirch1@gmail.com>
Date: Wed, 3 May 2023 10:45:04 +0200
Subject: [PATCH 37/37] Update `MaterialPageSkeleton` to reflect the new cover
 size on mobile

---
 src/stories/Blocks/material-page/MaterialPageSkeleton.tsx    | 2 +-
 src/stories/Blocks/material-page/material-page-skeleton.scss | 5 -----
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/stories/Blocks/material-page/MaterialPageSkeleton.tsx b/src/stories/Blocks/material-page/MaterialPageSkeleton.tsx
index 990968fa3..327626a0f 100644
--- a/src/stories/Blocks/material-page/MaterialPageSkeleton.tsx
+++ b/src/stories/Blocks/material-page/MaterialPageSkeleton.tsx
@@ -3,7 +3,7 @@ const MaterialPageSkeleton: React.FC = () => {
     <section className="material-page ssc">
       <header className="material-header">
         <div className="material-header__cover">
-          <div className="ssc-square cover--size-xlarge" />
+          <div className="ssc-square cover cover--size-xlarge cover--aspect-xlarge" />
         </div>
         <div className="material-header__content">
           <div>
diff --git a/src/stories/Blocks/material-page/material-page-skeleton.scss b/src/stories/Blocks/material-page/material-page-skeleton.scss
index b0608f3d4..a0fc73290 100644
--- a/src/stories/Blocks/material-page/material-page-skeleton.scss
+++ b/src/stories/Blocks/material-page/material-page-skeleton.scss
@@ -6,11 +6,6 @@
 .material-page {
   &.ssc {
     .material-header {
-      &__cover {
-        .ssc-square {
-          width: 300px;
-        }
-      }
       &__content {
         height: 605px;
         // Favorite icon.