Merge pull request #699 from danskernesdigitalebibliotek/editorial_se…

…arch_DDFFORM-678 Editorial Search DDFFORM-678 / Refactor `.content-list-page__subheading`
danskernesdigitalebibliotek · Aug 27, 2024 · 5421754 · 5421754
2 parents b2cba8d + 206af66
commit 5421754
Show file tree

Hide file tree

Showing 16 changed files with 61 additions and 78 deletions.
diff --git a/base.scss b/base.scss
@@ -69,15 +69,12 @@
 @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";
 @import "./src/stories/Library/dashboard-page/dashboard-page";
 @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/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
@@ -37,20 +37,24 @@ const ContentListPage: React.FC = () => {
   return (
     <div className="content-list-page">
       <h1 className="content-list-page__heading">Arrangementer</h1>
-      <div className="content-list-page__filters">
+      <h2 className="content-list-page__subheading">
+        Switch to results for the&nbsp;
+        <a href="/search?q=dans">library materials.</a>
+      </h2>
+      <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
@@ -9,13 +9,17 @@
 }
 
 .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;
+  }
 }
 
+//  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
@@ -13,28 +13,26 @@ const FavouritesList: React.FC<FavouritesListProps> = ({
   skeletonVersion = false,
   materialsCount,
 }) => {
-  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>
       ))}
     </ul>
   );
 
   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>
       ))}
@@ -55,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
@@ -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
@@ -8,7 +8,7 @@ export const SearchResultInfo = ({
   linkTotalResults,
 }: SearchResultInfoProps) => {
   return (
-    <h2 className="text-body-medium-regular search-result-info">
+    <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
@@ -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
@@ -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
@@ -13,7 +13,7 @@ export const SearchResultTitle = ({
   zeroResult,
   isLoading = false,
 }: SearchResultTitleProps) => {
-  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
@@ -1,12 +1,14 @@
 .card-list-page__skeleton-facet-line {
   &--mobile {
+    @include layout-container($block-max-width__large);
     display: block;
     @include media-query__small {
       display: none;
     }
   }
 
   &--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
diff --git 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/card-list-page/search-result-info.scss b/src/stories/Library/card-list-page/search-result-info.scss
diff --git a/src/stories/Library/card-list-page/search-result-title.scss b/src/stories/Library/card-list-page/search-result-title.scss
diff --git 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 {