From 8070f37c9c70e257b717ac80a7a405159f2408e4 Mon Sep 17 00:00:00 2001
From: Kasper Birch <kasperbirch1@gmail.com>
Date: Mon, 5 Aug 2024 15:07:28 +0200
Subject: [PATCH 1/2] Refactor `.content-list-page__subheading`

- Refactor the class to follow the design: [Figma Design System](https://www.figma.com/design/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?node-id=7573-84899&t=uXZ303kl02THWEMQ-4)

I began refactoring the search results and other lists to use the `content-list-page` system we developed for lists in Drupal, aiming for a consistent design. The task turned out to be more extensive than expected, so I suggest handling it in a separate ticket/pull request.
- added some "TODO" items for future reference.
- Remove the unnecessary css files
---
 base.scss                                                  | 2 --
 src/stories/Blocks/content-list-page/ContentListPage.tsx   | 4 ++++
 .../Blocks/content-list-page/content-list-page.scss        | 7 +++++--
 src/stories/Blocks/favorites-list/FavoritesList.tsx        | 1 +
 src/stories/Library/card-list-page/SearchResultInfo.tsx    | 3 ++-
 src/stories/Library/card-list-page/SearchResultTitle.tsx   | 1 +
 src/stories/Library/card-list-page/search-result-info.scss | 4 ----
 .../Library/card-list-page/search-result-title.scss        | 4 ----
 8 files changed, 13 insertions(+), 13 deletions(-)
 delete mode 100644 src/stories/Library/card-list-page/search-result-info.scss
 delete mode 100644 src/stories/Library/card-list-page/search-result-title.scss

diff --git a/base.scss b/base.scss
index 966550281..9cef519f0 100644
--- a/base.scss
+++ b/base.scss
@@ -69,7 +69,6 @@
 @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/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";
@@ -77,7 +76,6 @@
 @import "./src/stories/Library/patron-page/patron-page";
 @import "./src/stories/Library/reservation-list-page/reservation-list-page";
 @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";
diff --git a/src/stories/Blocks/content-list-page/ContentListPage.tsx b/src/stories/Blocks/content-list-page/ContentListPage.tsx
index 955fab030..c8a53fc4a 100644
--- a/src/stories/Blocks/content-list-page/ContentListPage.tsx
+++ b/src/stories/Blocks/content-list-page/ContentListPage.tsx
@@ -37,6 +37,10 @@ const ContentListPage: React.FC = () => {
   return (
     <div className="content-list-page">
       <h1 className="content-list-page__heading">Arrangementer</h1>
+      <h2 className="content-list-page__subheading">
+        Switch to results for the&nbsp;
+        <a href="/search?q=dans">library materials.</a>
+      </h2>
       <div className="content-list-page__filters">
         {filters.map((filter) => {
           return (
diff --git a/src/stories/Blocks/content-list-page/content-list-page.scss b/src/stories/Blocks/content-list-page/content-list-page.scss
index 1c5f2a70f..a0e683d7d 100644
--- a/src/stories/Blocks/content-list-page/content-list-page.scss
+++ b/src/stories/Blocks/content-list-page/content-list-page.scss
@@ -9,11 +9,14 @@
 }
 
 .content-list-page__subheading {
-  @extend %rich-text;
-
   @include layout-container($block-max-width__large);
   @include typography($typo__body-small);
+  color: $color__global-grey;
   margin-top: $s-lg;
+
+  a {
+    @include link-tag;
+  }
 }
 
 .content-list-page__filters {
diff --git a/src/stories/Blocks/favorites-list/FavoritesList.tsx b/src/stories/Blocks/favorites-list/FavoritesList.tsx
index 5a1528c7f..a8506c461 100644
--- a/src/stories/Blocks/favorites-list/FavoritesList.tsx
+++ b/src/stories/Blocks/favorites-list/FavoritesList.tsx
@@ -13,6 +13,7 @@ const FavouritesList: React.FC<FavouritesListProps> = ({
   skeletonVersion = false,
   materialsCount,
 }) => {
+  // Todo: use content-list-page__heading and content-list-page__subheading
   const pageTitle = (
     <h1 className="text-header-h2 mb-16 search-result-title">Favourites</h1>
   );
diff --git a/src/stories/Library/card-list-page/SearchResultInfo.tsx b/src/stories/Library/card-list-page/SearchResultInfo.tsx
index fa2960b82..01c2bdfde 100644
--- a/src/stories/Library/card-list-page/SearchResultInfo.tsx
+++ b/src/stories/Library/card-list-page/SearchResultInfo.tsx
@@ -8,7 +8,8 @@ export const SearchResultInfo = ({
   linkTotalResults,
 }: SearchResultInfoProps) => {
   return (
-    <h2 className="text-body-medium-regular search-result-info">
+    // Todo: use content-list-page__heading
+    <h2 className="text-body-medium-regular">
       Vis i stedet resultater fra{" "}
       <a className="link-tag text-body-medium-medium" href="/">
         {linkName}
diff --git a/src/stories/Library/card-list-page/SearchResultTitle.tsx b/src/stories/Library/card-list-page/SearchResultTitle.tsx
index e160a7824..21ce01504 100644
--- a/src/stories/Library/card-list-page/SearchResultTitle.tsx
+++ b/src/stories/Library/card-list-page/SearchResultTitle.tsx
@@ -13,6 +13,7 @@ export const SearchResultTitle = ({
   zeroResult,
   isLoading = false,
 }: SearchResultTitleProps) => {
+  // Todo: use content-list-page__heading
   const classes = clsx(["text-header-h2", "mb-16", "search-result-title"], {
     "text-loading": isLoading,
   });
diff --git a/src/stories/Library/card-list-page/search-result-info.scss b/src/stories/Library/card-list-page/search-result-info.scss
deleted file mode 100644
index ca2bf10ec..000000000
--- a/src/stories/Library/card-list-page/search-result-info.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-/* This is a placeholder file for future styling */
-/* stylelint-disable block-no-empty */
-.search-result-info {
-}
diff --git a/src/stories/Library/card-list-page/search-result-title.scss b/src/stories/Library/card-list-page/search-result-title.scss
deleted file mode 100644
index 2b4d06d48..000000000
--- a/src/stories/Library/card-list-page/search-result-title.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-/* This is a placeholder file for future styling */
-/* stylelint-disable block-no-empty */
-.search-result-title {
-}

From e1c13f9e3d60310f2ecd895061fa17fcf4c41524 Mon Sep 17 00:00:00 2001
From: Kasper Birch <kasperbirch1@gmail.com>
Date: Wed, 14 Aug 2024 15:33:29 +0200
Subject: [PATCH 2/2] Integrate `.content-list-page` and its sub-elements for
 react list.

Ensure consistent list styling between the Drupal CMS and React applications
---
 base.scss                                     |  1 -
 .../Blocks/advanced-search/AdvancedSearch.tsx | 20 +++++++++-------
 .../content-list-page/ContentListPage.tsx     |  8 +++----
 .../content-list-page/content-list-page.scss  |  1 +
 .../Blocks/favorites-list/FavoritesList.tsx   | 23 ++++++++----------
 .../card-list-item/card-list-item.scss        |  1 +
 .../card-list-page/SearchResultInfo.tsx       |  3 +--
 .../card-list-page/SearchResultPage.tsx       | 10 +++++---
 .../SearchResultPageSkeleton.tsx              | 24 ++++++-------------
 .../card-list-page/SearchResultTitle.tsx      |  3 +--
 .../card-list-page-skeleton.scss              |  2 ++
 .../card-list-page/card-list-page.scss        | 13 ----------
 .../Library/card-list-page/facet-line.scss    | 10 ++++----
 .../Library/content-list/content-list.scss    |  2 ++
 14 files changed, 52 insertions(+), 69 deletions(-)
 delete mode 100644 src/stories/Library/card-list-page/card-list-page.scss

diff --git a/base.scss b/base.scss
index 9cef519f0..b3acf30d5 100644
--- a/base.scss
+++ b/base.scss
@@ -69,7 +69,6 @@
 @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/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/dashboard-page/dashboard-page";
diff --git a/src/stories/Blocks/advanced-search/AdvancedSearch.tsx b/src/stories/Blocks/advanced-search/AdvancedSearch.tsx
index 8d24e19f2..e4014d68b 100644
--- a/src/stories/Blocks/advanced-search/AdvancedSearch.tsx
+++ b/src/stories/Blocks/advanced-search/AdvancedSearch.tsx
@@ -119,16 +119,20 @@ export const AdvancedSearch: React.FC<AdvancedSearchProps> = ({
         />
       </footer>
       <div className="advanced-search__divider" />
-      <section>
-        <h2 className="text-header-h2 advanced-search__title capitalize-first">
-          Viser materialer (20)
-        </h2>
-        <button className="link-tag mb-16">Link til søgninget</button>
-        <div className="card-list-page__list my-32">
+      <section className="content-list-page">
+        <h2 className="content-list-page__heading">Viser materialer (20)</h2>
+        <div className="content-list-page__subheading">
+          <button className="link-tag">Link til søgninget</button>
+        </div>
+        <ul className="content-list">
           {data.searchResult.map((item, i) => {
-            return <CardListItem {...item} tintIndex={i} />;
+            return (
+              <li className="content-list__item">
+                <CardListItem {...item} tintIndex={i} key={i} />
+              </li>
+            );
           })}
-        </div>
+        </ul>
         <ResultPager currentResults={10} totalResults={20} />
       </section>
     </div>
diff --git a/src/stories/Blocks/content-list-page/ContentListPage.tsx b/src/stories/Blocks/content-list-page/ContentListPage.tsx
index c8a53fc4a..fa72882ff 100644
--- a/src/stories/Blocks/content-list-page/ContentListPage.tsx
+++ b/src/stories/Blocks/content-list-page/ContentListPage.tsx
@@ -41,20 +41,20 @@ const ContentListPage: React.FC = () => {
         Switch to results for the&nbsp;
         <a href="/search?q=dans">library materials.</a>
       </h2>
-      <div className="content-list-page__filters">
+      <ul className="content-list-page__filters">
         {filters.map((filter) => {
           return (
-            <div className="content-list-page__filter">
+            <li className="content-list-page__filter">
               <InputLabel text={filter.label} />
               <Dropdown
                 list={filter.options}
                 ariaLabel="Kategorier"
                 arrowIcon="chevron"
               />
-            </div>
+            </li>
           );
         })}
-      </div>
+      </ul>
       <ContentList items={contentListData} />
     </div>
   );
diff --git a/src/stories/Blocks/content-list-page/content-list-page.scss b/src/stories/Blocks/content-list-page/content-list-page.scss
index a0e683d7d..6b9c05bed 100644
--- a/src/stories/Blocks/content-list-page/content-list-page.scss
+++ b/src/stories/Blocks/content-list-page/content-list-page.scss
@@ -19,6 +19,7 @@
   }
 }
 
+//  Todo should be merged with .facet-line
 .content-list-page__filters {
   @include layout-container($block-max-width__large);
 
diff --git a/src/stories/Blocks/favorites-list/FavoritesList.tsx b/src/stories/Blocks/favorites-list/FavoritesList.tsx
index a8506c461..7931520be 100644
--- a/src/stories/Blocks/favorites-list/FavoritesList.tsx
+++ b/src/stories/Blocks/favorites-list/FavoritesList.tsx
@@ -13,19 +13,16 @@ const FavouritesList: React.FC<FavouritesListProps> = ({
   skeletonVersion = false,
   materialsCount,
 }) => {
-  // Todo: use content-list-page__heading and content-list-page__subheading
-  const pageTitle = (
-    <h1 className="text-header-h2 mb-16 search-result-title">Favourites</h1>
-  );
-
   const materialsCountLine = materialsCount > 0 && (
-    <p className="text-small-caption my-32">{materialsCount} materials</p>
+    <h2 className="content-list-page__subheading">
+      {materialsCount} materials
+    </h2>
   );
 
   const SkeletonList = () => (
-    <ul className="card-list-page__list my-32">
-      {[...Array(5)].slice(0, materialsCount).map(() => (
-        <li>
+    <ul className="content-list">
+      {[...Array(5)].slice(0, materialsCount).map((_, i) => (
+        <li className="content-list__item" key={i}>
           <CardListItemSkeleton />
         </li>
       ))}
@@ -33,9 +30,9 @@ const FavouritesList: React.FC<FavouritesListProps> = ({
   );
 
   const FavouritesListContent = () => (
-    <ul className="card-list-page__list my-32">
+    <ul className="content-list">
       {data.searchResult.slice(0, materialsCount).map((item, i) => (
-        <li>
+        <li className="content-list__item" key={i}>
           <CardListItem {...item} heartFill tintIndex={i} />
         </li>
       ))}
@@ -56,8 +53,8 @@ const FavouritesList: React.FC<FavouritesListProps> = ({
   }
 
   return (
-    <div className="card-list-page">
-      {pageTitle}
+    <div className="content-list-page">
+      <h1 className="content-list-page__heading">Favourites</h1>
       {materialsCountLine}
       {content}
       {!skeletonVersion && (
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 61a92d428..2d1c7878d 100644
--- a/src/stories/Library/card-list-item/card-list-item.scss
+++ b/src/stories/Library/card-list-item/card-list-item.scss
@@ -1,3 +1,4 @@
+// Todo: should be renamed.
 .card-list-item {
   @include show-svg-on-hover;
 
diff --git a/src/stories/Library/card-list-page/SearchResultInfo.tsx b/src/stories/Library/card-list-page/SearchResultInfo.tsx
index 01c2bdfde..1df144c4e 100644
--- a/src/stories/Library/card-list-page/SearchResultInfo.tsx
+++ b/src/stories/Library/card-list-page/SearchResultInfo.tsx
@@ -8,8 +8,7 @@ export const SearchResultInfo = ({
   linkTotalResults,
 }: SearchResultInfoProps) => {
   return (
-    // Todo: use content-list-page__heading
-    <h2 className="text-body-medium-regular">
+    <h2 className="content-list-page__subheading">
       Vis i stedet resultater fra{" "}
       <a className="link-tag text-body-medium-medium" href="/">
         {linkName}
diff --git a/src/stories/Library/card-list-page/SearchResultPage.tsx b/src/stories/Library/card-list-page/SearchResultPage.tsx
index 892e6b171..e0d385b6a 100644
--- a/src/stories/Library/card-list-page/SearchResultPage.tsx
+++ b/src/stories/Library/card-list-page/SearchResultPage.tsx
@@ -17,7 +17,11 @@ export type SearchResultPageProps = {
 };
 
 const SearchResultList = data.searchResult.map((item, i) => {
-  return <CardListItem {...item} tintIndex={i} />;
+  return (
+    <li className="content-list__item" key={i}>
+      <CardListItem {...item} tintIndex={i} />
+    </li>
+  );
 });
 
 export const SearchResultPage = ({
@@ -29,7 +33,7 @@ export const SearchResultPage = ({
   zeroResult,
 }: SearchResultPageProps) => {
   return (
-    <div className="card-list-page">
+    <div className="content-list-page">
       <SearchResultTitle
         title={title}
         totalResults={zeroResult ? 0 : totalResults}
@@ -48,7 +52,7 @@ export const SearchResultPage = ({
           />
           <FacetLine items={data.facetLineItems} />
           <FacetLineSelected items={data.selectedTerms} />
-          <div className="card-list-page__list my-32">{SearchResultList}</div>
+          <ul className="content-list">{SearchResultList}</ul>
           <ResultPager
             currentResults={currentResults}
             totalResults={totalResults}
diff --git a/src/stories/Library/card-list-page/SearchResultPageSkeleton.tsx b/src/stories/Library/card-list-page/SearchResultPageSkeleton.tsx
index 358b012b7..3b31f017c 100644
--- a/src/stories/Library/card-list-page/SearchResultPageSkeleton.tsx
+++ b/src/stories/Library/card-list-page/SearchResultPageSkeleton.tsx
@@ -14,7 +14,7 @@ export const SearchResultPageSkeleton = ({
   title,
 }: SearchResultPageSkeletonProps) => {
   return (
-    <div className="card-list-page">
+    <div className="content-list-page">
       <SearchResultTitle
         title={title}
         totalResults={0}
@@ -33,22 +33,12 @@ export const SearchResultPageSkeleton = ({
           <div className="ssc-head-line mb" />
         </div>
       </div>
-      <ul className="card-list-page__list my-32">
-        <li>
-          <CardListItemSkeleton />
-        </li>
-        <li>
-          <CardListItemSkeleton />
-        </li>
-        <li>
-          <CardListItemSkeleton />
-        </li>
-        <li>
-          <CardListItemSkeleton />
-        </li>
-        <li>
-          <CardListItemSkeleton />
-        </li>
+      <ul className="content-list">
+        {[...Array(5)].map((_, index) => (
+          <li className="content-list__item" key={index}>
+            <CardListItemSkeleton />
+          </li>
+        ))}
       </ul>
     </div>
   );
diff --git a/src/stories/Library/card-list-page/SearchResultTitle.tsx b/src/stories/Library/card-list-page/SearchResultTitle.tsx
index 21ce01504..a35254c8e 100644
--- a/src/stories/Library/card-list-page/SearchResultTitle.tsx
+++ b/src/stories/Library/card-list-page/SearchResultTitle.tsx
@@ -13,8 +13,7 @@ export const SearchResultTitle = ({
   zeroResult,
   isLoading = false,
 }: SearchResultTitleProps) => {
-  // Todo: use content-list-page__heading
-  const classes = clsx(["text-header-h2", "mb-16", "search-result-title"], {
+  const classes = clsx("content-list-page__heading", {
     "text-loading": isLoading,
   });
   const total = totalResults.toLocaleString("da-Dk");
diff --git a/src/stories/Library/card-list-page/card-list-page-skeleton.scss b/src/stories/Library/card-list-page/card-list-page-skeleton.scss
index e5fb70b93..076fc8db5 100644
--- a/src/stories/Library/card-list-page/card-list-page-skeleton.scss
+++ b/src/stories/Library/card-list-page/card-list-page-skeleton.scss
@@ -1,5 +1,6 @@
 .card-list-page__skeleton-facet-line {
   &--mobile {
+    @include layout-container($block-max-width__large);
     display: block;
     @include media-query__small {
       display: none;
@@ -7,6 +8,7 @@
   }
 
   &--desktop {
+    @include layout-container($block-max-width__large);
     display: none;
     @include media-query__small {
       display: block;
diff --git a/src/stories/Library/card-list-page/card-list-page.scss b/src/stories/Library/card-list-page/card-list-page.scss
deleted file mode 100644
index faf450cc1..000000000
--- a/src/stories/Library/card-list-page/card-list-page.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.card-list-page {
-  background: $color__global-primary;
-  padding: $s-md;
-
-  @include media-query__medium {
-    padding: $s-4xl 157px $s-2xl;
-  }
-
-  &__list {
-    display: grid;
-    gap: $s-md;
-  }
-}
diff --git a/src/stories/Library/card-list-page/facet-line.scss b/src/stories/Library/card-list-page/facet-line.scss
index 0ceb57a2f..c01895f71 100644
--- a/src/stories/Library/card-list-page/facet-line.scss
+++ b/src/stories/Library/card-list-page/facet-line.scss
@@ -1,13 +1,12 @@
+//  Todo should be merged with .content-list-page__filters
 .facet-line {
-  width: 100vw;
+  @include layout-container($block-max-width__large);
   max-height: $s-xl;
   overflow-x: scroll;
   overflow-y: hidden;
   display: flex;
   flex-wrap: nowrap;
   flex-direction: row;
-  margin-left: -16px;
-  padding-left: 16px;
   // Hide scrollbar
   -ms-overflow-style: none; /* for Internet Explorer, Edge */
   scrollbar-width: none; /* for Firefox */
@@ -17,9 +16,6 @@
   }
 
   @include media-query__small() {
-    width: 100%;
-    margin-left: 0px;
-    padding-left: 0px;
     overflow-y: visible;
     max-height: none;
     flex-wrap: wrap;
@@ -46,6 +42,8 @@
   margin-bottom: $s-sm;
 }
 
+//  Todo should be merged with .content-list-page__filters
 .facet-line-selected-terms {
+  @include layout-container($block-max-width__large);
   margin-top: $s-md;
 }
diff --git a/src/stories/Library/content-list/content-list.scss b/src/stories/Library/content-list/content-list.scss
index 3aabed6e4..8c3dd85ed 100644
--- a/src/stories/Library/content-list/content-list.scss
+++ b/src/stories/Library/content-list/content-list.scss
@@ -1,5 +1,7 @@
 .content-list {
   @include layout-container($block-max-width__large);
+  margin-top: $s-xl;
+  margin-bottom: $s-xl;
 }
 
 .content-list__item {