Merge pull request #712 from danskernesdigitalebibliotek/develop

Release 2024.35.0
danskernesdigitalebibliotek · Aug 27, 2024 · 51a788b · 51a788b
2 parents a94d618 + 5421754
commit 51a788b
Show file tree

Hide file tree

Showing 21 changed files with 168 additions and 166 deletions.
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -34,7 +34,7 @@ jobs:
       - run: yarn css:build
 
       - name: Publish to Chromatic
-        uses: chromaui/[email protected].0
+        uses: chromaui/[email protected].1
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: c6b96f9648b6
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/package.json b/package.json
@@ -48,7 +48,7 @@
     "@storybook/node-logger": "^6.3.7",
     "@storybook/preset-create-react-app": "^3.2.0",
     "@storybook/react": "^6.5.9",
-    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",

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/Blocks/header/Header.tsx b/src/stories/Blocks/header/Header.tsx
@@ -20,14 +20,13 @@ export type HeaderProps = {
   openDropdown: boolean;
 };
 
-export const Header = (props: HeaderProps) => {
-  const {
-    signedIn,
-    haveNotification,
-    username,
-    inputPlaceholder,
-    openDropdown,
-  } = props;
+export const Header = ({
+  signedIn,
+  haveNotification,
+  username,
+  inputPlaceholder,
+  openDropdown,
+}: HeaderProps) => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(openDropdown);
 
   useEffect(() => {
@@ -43,7 +42,7 @@ export const Header = (props: HeaderProps) => {
             hasImage
             libraryName="Hjørring"
             libraryPlace="Bibliotekerne"
-            altText="PromoTitle image of libary"
+            altText="PromoTitle image of library"
           />
         </div>
 
@@ -56,7 +55,7 @@ export const Header = (props: HeaderProps) => {
               <div className="header__menu-navigation-mobile">
                 <button
                   id="header-sidebar-nav__toggle"
-                  className="header__menu-navigation-button header__button"
+                  className="header__button header__button--right-border"
                   aria-controls="sidebarNav"
                   aria-expanded="false"
                 >
@@ -74,32 +73,48 @@ export const Header = (props: HeaderProps) => {
                     hasImage
                     libraryName="Lyngby-Taarbæk"
                     libraryPlace="Bibliotekerne"
-                    altText="PromoTitle image of libary"
+                    altText="PromoTitle image of library"
                   />
                 </div>
               </div>
               <MenuItemList menuItems={menuItems} />
             </div>
-            <div className="header__menu-profile header__button">
-              <a href="/" className="hide-linkstyle">
-                {signedIn && haveNotification && (
-                  <div className="header__notification bg-signal-alert" />
-                )}
-                <ProfileIcon aria-label="go to user profile" />
-                {signedIn && (
-                  <span className="text-small-caption">{username}</span>
-                )}
-                {!signedIn && <span className="text-small-caption">Login</span>}
+            <button className="header__button header__button--left-border btn-ui">
+              {signedIn && haveNotification && (
+                <div className="header__button-notification bg-signal-alert" />
+              )}
+              <ProfileIcon
+                className="header__button-icon"
+                aria-label="go to user profile"
+              />
+              <span className="header__button-text">
+                {signedIn ? username : "Login"}
+              </span>
+            </button>
+            <div className="header__button-responsive-switch">
+              <a
+                href="/"
+                className="header__button header__button--left-border"
+              >
+                <WatchStaticIcon
+                  className="header__button-icon"
+                  aria-label="go to opening hours"
+                />
+                <span className="header__button-text">Opening hours</span>
               </a>
-            </div>
-            <div className="header__menu-bookmarked header__button">
-              <a href="/">
-                <HeartIcon aria-label="go to favorites list" />
-                <span className="text-small-caption">Liked</span>
+              <a
+                href="/"
+                className="header__button header__button--left-border"
+              >
+                <HeartIcon
+                  className="header__button-icon"
+                  aria-label="go to favorites list"
+                />
+                <span className="header__button-text">Liked</span>
               </a>
             </div>
           </nav>
-          <div>
+          <div className="header__menu-second">
             <div className="header__menu-search">
               <form className="header__menu-search-form">
                 <input