From baa45809033d6ba49645685c59a28f60a57e0d36 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Fri, 29 Dec 2023 12:43:21 +0100
Subject: [PATCH 1/7] Add arrow arrow__hover--right-small classes to stackable
 material

In order for the arrow in the card to get animated.
---
 .../materials/stackable-material/stackable-material.tsx  | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/apps/loan-list/materials/stackable-material/stackable-material.tsx b/src/apps/loan-list/materials/stackable-material/stackable-material.tsx
index 0cfe3019b3..807addf621 100644
--- a/src/apps/loan-list/materials/stackable-material/stackable-material.tsx
+++ b/src/apps/loan-list/materials/stackable-material/stackable-material.tsx
@@ -43,9 +43,12 @@ const StackableMaterial: FC<StackableMaterialProps & MaterialProps> = ({
 
   return (
     <div
-      className={clsx("list-reservation my-32 cursor-pointer", {
-        "list-reservation--stacked": additionalMaterials > 0
-      })}
+      className={clsx(
+        "list-reservation my-32 cursor-pointer arrow arrow__hover--right-small",
+        {
+          "list-reservation--stacked": additionalMaterials > 0
+        }
+      )}
       role="button"
       onClick={handleOpenDueDateModal}
       onKeyUp={(e) => {

From 93d63a9ed18f1e15e5e7f55067da19ea7ff42ae2 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Fri, 29 Dec 2023 12:44:20 +0100
Subject: [PATCH 2/7] Add arrow-button class to arrow button elem so it behaves
 consistently

---
 src/components/Buttons/ArrowButton.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Buttons/ArrowButton.tsx b/src/components/Buttons/ArrowButton.tsx
index 3b92e8113a..700e9dc3c8 100644
--- a/src/components/Buttons/ArrowButton.tsx
+++ b/src/components/Buttons/ArrowButton.tsx
@@ -18,6 +18,7 @@ const ArrowButton: React.FC<ArrowButtonProps> = ({
   return (
     <button
       aria-labelledby={arrowLabelledBy}
+      className="arrow-button"
       style={pointer}
       type="button"
       onClick={(e) => {

From b63c64085e59ddf2a195d6c807c83c45aa40b426 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Fri, 29 Dec 2023 15:02:58 +0100
Subject: [PATCH 3/7] Add arrow class to dashboard-notification to be
 implemented consistently

---
 .../dashboard/dashboard-notification/dashboard-notification.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/apps/dashboard/dashboard-notification/dashboard-notification.tsx b/src/apps/dashboard/dashboard-notification/dashboard-notification.tsx
index 24620a4cbb..4327729a58 100644
--- a/src/apps/dashboard/dashboard-notification/dashboard-notification.tsx
+++ b/src/apps/dashboard/dashboard-notification/dashboard-notification.tsx
@@ -31,7 +31,7 @@ const DashboardNotification: FC<DashboardNotificationProps> = ({
       onClick={notificationClickEvent}
       className="mb-16"
     >
-      <div className="list-dashboard shadow-medium-hover arrow__hover--right-small">
+      <div className="list-dashboard shadow-medium-hover arrow arrow__hover--right-small">
         <div
           className={`color-secondary-gray number number--${notificationColor}`}
         >

From e2e20c8e3c0d6d13023f1c8170d68332223cb740 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Fri, 29 Dec 2023 15:06:00 +0100
Subject: [PATCH 4/7] Add arrow & arrow__hover--right-small classes to
 resetvation-material

Because it containes an arrow button inside.
---
 .../reservation-material/reservation-material.tsx               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/apps/reservation-list/reservation-material/reservation-material.tsx b/src/apps/reservation-list/reservation-material/reservation-material.tsx
index e74ed266ab..a5be70b48d 100644
--- a/src/apps/reservation-list/reservation-material/reservation-material.tsx
+++ b/src/apps/reservation-list/reservation-material/reservation-material.tsx
@@ -30,7 +30,7 @@ const ReservationMaterial: FC<ReservationMaterialProps & MaterialProps> = ({
   return (
     <li>
       <div
-        className="list-reservation my-32 cursor-pointer"
+        className="list-reservation my-32 cursor-pointer arrow arrow__hover--right-small"
         role="button"
         onClick={() => openDetailsModal()}
         onKeyUp={(e) => {

From 27d34df16cce0213f93df97dfbb1d5a51da1e0f3 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Wed, 3 Jan 2024 13:38:31 +0100
Subject: [PATCH 5/7] Remove usage of the non-existing "arrow" class throughout
 the code

---
 .../dashboard/dashboard-notification/dashboard-notification.tsx | 2 +-
 .../materials/selectable-material/selectable-material.tsx       | 2 +-
 .../materials/stackable-material/stackable-material.tsx         | 2 +-
 .../reservation-material/reservation-material.tsx               | 2 +-
 src/components/card-item-list/card-list-item/card-list-item.tsx | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/apps/dashboard/dashboard-notification/dashboard-notification.tsx b/src/apps/dashboard/dashboard-notification/dashboard-notification.tsx
index 4327729a58..24620a4cbb 100644
--- a/src/apps/dashboard/dashboard-notification/dashboard-notification.tsx
+++ b/src/apps/dashboard/dashboard-notification/dashboard-notification.tsx
@@ -31,7 +31,7 @@ const DashboardNotification: FC<DashboardNotificationProps> = ({
       onClick={notificationClickEvent}
       className="mb-16"
     >
-      <div className="list-dashboard shadow-medium-hover arrow arrow__hover--right-small">
+      <div className="list-dashboard shadow-medium-hover arrow__hover--right-small">
         <div
           className={`color-secondary-gray number number--${notificationColor}`}
         >
diff --git a/src/apps/loan-list/materials/selectable-material/selectable-material.tsx b/src/apps/loan-list/materials/selectable-material/selectable-material.tsx
index 92ff9b5ae7..632f75118f 100644
--- a/src/apps/loan-list/materials/selectable-material/selectable-material.tsx
+++ b/src/apps/loan-list/materials/selectable-material/selectable-material.tsx
@@ -66,7 +66,7 @@ const SelectableMaterial: FC<SelectableMaterialProps & MaterialProps> = ({
   };
 
   return (
-    <li className="arrow arrow__hover--right-small">
+    <li className="arrow__hover--right-small">
       <div
         className={clsx("list-materials", {
           "list-materials--disabled": disabled
diff --git a/src/apps/loan-list/materials/stackable-material/stackable-material.tsx b/src/apps/loan-list/materials/stackable-material/stackable-material.tsx
index 807addf621..a6b4ad4d4a 100644
--- a/src/apps/loan-list/materials/stackable-material/stackable-material.tsx
+++ b/src/apps/loan-list/materials/stackable-material/stackable-material.tsx
@@ -44,7 +44,7 @@ const StackableMaterial: FC<StackableMaterialProps & MaterialProps> = ({
   return (
     <div
       className={clsx(
-        "list-reservation my-32 cursor-pointer arrow arrow__hover--right-small",
+        "list-reservation my-32 cursor-pointer arrow__hover--right-small",
         {
           "list-reservation--stacked": additionalMaterials > 0
         }
diff --git a/src/apps/reservation-list/reservation-material/reservation-material.tsx b/src/apps/reservation-list/reservation-material/reservation-material.tsx
index a5be70b48d..b22e86e31b 100644
--- a/src/apps/reservation-list/reservation-material/reservation-material.tsx
+++ b/src/apps/reservation-list/reservation-material/reservation-material.tsx
@@ -30,7 +30,7 @@ const ReservationMaterial: FC<ReservationMaterialProps & MaterialProps> = ({
   return (
     <li>
       <div
-        className="list-reservation my-32 cursor-pointer arrow arrow__hover--right-small"
+        className="list-reservation my-32 cursor-pointer arrow__hover--right-small"
         role="button"
         onClick={() => openDetailsModal()}
         onKeyUp={(e) => {
diff --git a/src/components/card-item-list/card-list-item/card-list-item.tsx b/src/components/card-item-list/card-list-item/card-list-item.tsx
index 03652199ad..4fd114ae91 100644
--- a/src/components/card-item-list/card-list-item/card-list-item.tsx
+++ b/src/components/card-item-list/card-list-item/card-list-item.tsx
@@ -122,7 +122,7 @@ const CardListItem: React.FC<CardListItemProps> = ({
     <article
       ref={itemRef}
       data-cy={dataCy}
-      className="card-list-item arrow arrow__hover--right-small"
+      className="card-list-item arrow__hover--right-small"
       onClick={() => {
         handleClick();
       }}

From 790a247d7cfca32cdebe668abb65fd3b4939ccbd Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Wed, 3 Jan 2024 14:59:44 +0100
Subject: [PATCH 6/7] Update dpl-design-system package

to 0.0.0-53111dc1d5d35ee254a8e231f1e3721088240a4a
---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index bd512c4590..a4764786be 100644
--- a/package.json
+++ b/package.json
@@ -143,7 +143,7 @@
     "prop-types": "Since we use former ddb-react components that depend on prop-types we keep this. Should be removed when usage of prop-types is deprecated."
   },
   "dependencies": {
-    "@danskernesdigitalebibliotek/dpl-design-system": "2023.51.0-cd7e0937a067366392e60d85a9831b7d1cdf363e",
+    "@danskernesdigitalebibliotek/dpl-design-system": "0.0.0-53111dc1d5d35ee254a8e231f1e3721088240a4a",
     "@reach/alert": "^0.17.0",
     "@reach/dialog": "^0.18.0",
     "@reduxjs/toolkit": "^1.9.7",
diff --git a/yarn.lock b/yarn.lock
index 113338a7f6..6ee2f1d525 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1477,10 +1477,10 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
-"@danskernesdigitalebibliotek/dpl-design-system@2023.51.0-cd7e0937a067366392e60d85a9831b7d1cdf363e":
-  version "2023.51.0-cd7e0937a067366392e60d85a9831b7d1cdf363e"
-  resolved "https://npm.pkg.github.com/download/@danskernesdigitalebibliotek/dpl-design-system/2023.51.0-cd7e0937a067366392e60d85a9831b7d1cdf363e/eaa8bd13af004074cd2447655a4bb20fccd8dc2c#eaa8bd13af004074cd2447655a4bb20fccd8dc2c"
-  integrity sha512-Zimpf9G00kcS7QA27wuOtN4zmrRbs+4UAADXkAq0lFE+VhaQZ7EbcueVw2tZ47UXzQUgcPbF5a9X5P1Jk/kkZQ==
+"@danskernesdigitalebibliotek/dpl-design-system@0.0.0-53111dc1d5d35ee254a8e231f1e3721088240a4a":
+  version "0.0.0-53111dc1d5d35ee254a8e231f1e3721088240a4a"
+  resolved "https://npm.pkg.github.com/download/@danskernesdigitalebibliotek/dpl-design-system/0.0.0-53111dc1d5d35ee254a8e231f1e3721088240a4a/b7efe97875a0bae09fc27425250b8de333dd0476#b7efe97875a0bae09fc27425250b8de333dd0476"
+  integrity sha512-U1orycYBJoaLt42wVXTc0+XNpuatby/JD2gV1YH8ewd0lOo6yNhik2U/iSbcKIsUpwrGx64itxEPt9e+dbRXNw==
 
 "@discoveryjs/json-ext@^0.5.0", "@discoveryjs/json-ext@^0.5.3":
   version "0.5.7"

From 63b2271c2d264e55897583d74f2c4f3aaa3a6e20 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Thu, 4 Jan 2024 08:46:03 +0100
Subject: [PATCH 7/7] Fix failinf search header text - look for visible
 autosuggest text items

Instead of the whole autosuggest. For some reason Cypress says it can't
see the whole thing so it's not visible apparently.
---
 src/apps/search-header/search-header.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/apps/search-header/search-header.test.ts b/src/apps/search-header/search-header.test.ts
index d147e94994..07e10cd1fb 100644
--- a/src/apps/search-header/search-header.test.ts
+++ b/src/apps/search-header/search-header.test.ts
@@ -37,7 +37,7 @@ describe("Search header app", () => {
     cy.getBySel("search-header-input").focus().type("ha");
     cy.getBySel("autosuggest").should("not.be.visible");
     cy.getBySel("search-header-input").focus().type("r");
-    cy.getBySel("autosuggest").should("be.visible");
+    cy.getBySel("autosuggest-text-item").should("be.visible");
   });
 
   it("Allows use of arrow keys to navigate autosuggest", () => {