Merge pull request #1397 from danskernesdigitalebibliotek/develop

Release 2024.35.0
danskernesdigitalebibliotek · Aug 27, 2024 · f9fee07 · f9fee07
2 parents 3e3638d + 7e43bd7
commit f9fee07
Show file tree

Hide file tree

Showing 20 changed files with 487 additions and 369 deletions.
diff --git a/package.json b/package.json
@@ -48,12 +48,12 @@
     "@babel/core": "^7.25.2",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.25.3",
+    "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@csstools/postcss-sass": "^5.1.1",
     "@cypress/browserify-preprocessor": "^3.0.2",
-    "@cypress/code-coverage": "^3.12.44",
+    "@cypress/code-coverage": "^3.12.45",
     "@graphql-codegen/add": "^3.1.1",
     "@graphql-codegen/cli": "^2.6.2",
     "@graphql-codegen/introspection": "^2.1.1",
@@ -75,26 +75,26 @@
     "@testing-library/react": "^14.2.2",
     "@testing-library/react-hooks": "^8.0.1",
     "@tsconfig/create-react-app": "^1.0.2",
-    "@types/node": "^20.14.10",
-    "@types/react": "^18.3.3",
+    "@types/node": "^20.16.1",
+    "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
     "@types/react-flatpickr": "^3.8.11",
     "@types/react-redux": "^7.1.24",
     "@typescript-eslint/eslint-plugin": "^5.23.0",
     "@typescript-eslint/parser": "^7.16.0",
-    "@vitest/coverage-istanbul": "^2.0.3",
-    "autoprefixer": "^10.4.19",
+    "@vitest/coverage-istanbul": "^2.0.5",
+    "autoprefixer": "^10.4.20",
     "babel-loader": "^9.1.3",
     "babel-plugin-istanbul": "^7.0.0",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "caniuse-lite": "^1.0.30001651",
+    "caniuse-lite": "^1.0.30001653",
     "change-case-all": "^2.1.0",
     "chokidar-cli": "^3.0.0",
     "concurrently": "^8.2.2",
-    "core-js": "^3.37.1",
+    "core-js": "^3.38.1",
     "css-loader": "^7.1.2",
-    "cssnano": "^7.0.4",
+    "cssnano": "^7.0.5",
     "cypress": "^9.6.1",
     "dotenv": "^16.4.5",
     "eslint": "^8.57.0",
@@ -105,7 +105,7 @@
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-no-only-tests": "^3.1.0",
+    "eslint-plugin-no-only-tests": "^3.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
@@ -130,13 +130,13 @@
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-recommended-scss": "^6.0.0",
     "stylelint-prettier": "^2.0.0",
-    "stylelint-scss": "^6.4.1",
+    "stylelint-scss": "^6.5.1",
     "stylelint-webpack-plugin": "^5.0.1",
     "svg-url-loader": "^8.0.0",
     "ts-node": "^10.9.2",
     "typescript": "^4.6.4",
     "vitest": "^0.28.5",
-    "webpack": "^5.93.0",
+    "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4",
     "webpack-version-file-plugin": "^0.4.0"
   },
@@ -145,7 +145,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": "^2024.28.0-100e48a2a38f735862212d267438eeb6dc86e31b",
+    "@danskernesdigitalebibliotek/dpl-design-system": "2024.33.0-a94d6181a38deec2ab5b3723b9436372c0027d4a",
     "@fullcalendar/core": "^6.1.15",
     "@fullcalendar/daygrid": "^6.1.15",
     "@fullcalendar/interaction": "^6.1.15",
@@ -156,7 +156,7 @@
     "@reduxjs/toolkit": "^1.9.7",
     "@types/lodash": "^4.17.5",
     "clsx": "^2.1.1",
-    "dayjs": "^1.11.11",
+    "dayjs": "^1.11.13",
     "downshift": "8.5.0",
     "focus-trap-react": "^10.2.3",
     "graphql": "^16.9.0",

diff --git a/src/apps/advanced-search/AdvancedSearchResults.tsx b/src/apps/advanced-search/AdvancedSearchResults.tsx
@@ -114,52 +114,56 @@ const AdvancedSearchResult: React.FC<AdvancedSearchResultProps> = ({
   return (
     <>
       {!showContentOnly && <div className="advanced-search__divider" />}
-      <h2
-        className="text-header-h2 advanced-search__title capitalize-first"
-        /* ID is used to scroll to the results upon hitting the search button. */
-        id="advanced-search-result"
-        aria-live="polite"
-      >
-        {isLoading && <>{t("loadingResultsText")}</>}
-        {shouldShowResultHeadline && (
-          <>
-            {t("showingMaterialsText", {
-              placeholders: { "@hitcount": hitcount }
-            })}
-          </>
-        )}
-      </h2>
-      {!showContentOnly && (
-        <button
-          type="button"
-          className={clsx("link-tag mb-16 capitalize-first", {
-            "cursor-pointer": !copiedLinkToSearch
-          })}
-          onClick={() => {
-            copy(currentLocationWithParametersUrl({ linked: "true" }).href);
-            setCopiedLinkToSearch(true);
-          }}
+      <section className="content-list-page">
+        <h2
+          className="content-list-page__heading"
+          /* ID is used to scroll to the results upon hitting the search button. */
+          id="advanced-search-result"
+          aria-live="polite"
         >
-          {!copiedLinkToSearch && t("advancedSearchLinkToThisSearchText")}
-          {copiedLinkToSearch && (
+          {isLoading && <>{t("loadingResultsText")}</>}
+          {shouldShowResultHeadline && (
             <>
-              {t("copiedLinkToThisSearchText")}
-              <img className="inline-icon" src={CheckIcon} alt="" />{" "}
+              {t("showingMaterialsText", {
+                placeholders: { "@hitcount": hitcount }
+              })}
             </>
           )}
-        </button>
-      )}
-      {shouldShowSearchResults && (
-        <>
-          <SearchResultList
-            resultItems={resultItems}
-            page={page}
-            pageSize={pageSize}
-          />
-          <PagerComponent isLoading={isLoading} />
-        </>
-      )}
-      {!isLoading && hitcount === 0 && <SearchResultZeroHits />}
+        </h2>
+        {!showContentOnly && (
+          <div className="content-list-page__subheading">
+            <button
+              type="button"
+              className={clsx("link-tag mb-16 capitalize-first", {
+                "cursor-pointer": !copiedLinkToSearch
+              })}
+              onClick={() => {
+                copy(currentLocationWithParametersUrl({ linked: "true" }).href);
+                setCopiedLinkToSearch(true);
+              }}
+            >
+              {!copiedLinkToSearch && t("advancedSearchLinkToThisSearchText")}
+              {copiedLinkToSearch && (
+                <>
+                  {t("copiedLinkToThisSearchText")}
+                  <img className="inline-icon" src={CheckIcon} alt="" />{" "}
+                </>
+              )}
+            </button>
+          </div>
+        )}
+        {shouldShowSearchResults && (
+          <>
+            <SearchResultList
+              resultItems={resultItems}
+              page={page}
+              pageSize={pageSize}
+            />
+            <PagerComponent isLoading={isLoading} />
+          </>
+        )}
+        {!isLoading && hitcount === 0 && <SearchResultZeroHits />}
+      </section>
     </>
   );
 };

diff --git a/src/apps/favorites-list/FavoritesList.tsx b/src/apps/favorites-list/FavoritesList.tsx
@@ -47,12 +47,12 @@ const FavoritesList: React.FC<FavoritesListProps> = ({ pageSize }) => {
       <div className="ssc">
         <div className="ssc-line w-10 my-32">&nbsp;</div>
       </div>
-      <ul className="card-list-page__list my-32">
+      <ul className="content-list">
         {/*
           We'll show 5 skeleton cards which should cover most screens.
         */}
         {[...Array(5)].map(() => (
-          <li>
+          <li className="content-list__item">
             <CardListItemSkeleton />
           </li>
         ))}
@@ -61,7 +61,7 @@ const FavoritesList: React.FC<FavoritesListProps> = ({ pageSize }) => {
   );
 
   const materialsCount = materials.length > 0 && (
-    <p className="text-small-caption my-32">
+    <p className="content-list-page__subheading">
       {t("favoritesListMaterialsText", {
         placeholders: { "@count": materials.length }
       })}
@@ -70,11 +70,12 @@ const FavoritesList: React.FC<FavoritesListProps> = ({ pageSize }) => {
 
   const renderContent = () =>
     displayedMaterials.length > 0 ? (
-      <ul className="card-list-page__list my-32">
+      <ul className="content-list">
         {displayedMaterials.map((pid, i) => {
           const isFirstNewItem = i === page * pageSize;
           return (
             <MaterialListItem
+              className="content-list__item"
               key={pid}
               ref={isFirstNewItem ? lastItemRef : null}
             >
@@ -91,8 +92,8 @@ const FavoritesList: React.FC<FavoritesListProps> = ({ pageSize }) => {
     );
 
   return (
-    <div className="card-list-page">
-      <h1 className="text-header-h2 mb-16 search-result-title">
+    <div className="content-list-page">
+      <h1 className="content-list-page__heading">
         {t("favoritesListHeaderText")}
       </h1>
       {isLoading ? (

diff --git a/src/apps/favorites-list/favorites-list.test.ts b/src/apps/favorites-list/favorites-list.test.ts
@@ -50,15 +50,15 @@ describe("Favorites list", () => {
     cy.get(".cover").should("be.visible");
 
     // 2.a. Header "Favorites"
-    cy.get(".card-list-page").find("h1").should("have.text", "Favorites");
+    cy.get(".content-list-page").find("h1").should("have.text", "Favorites");
     // Number of materials on list
-    cy.get(".card-list-page")
+    cy.get(".content-list-page")
       .find("p")
       .eq(0)
       .should("have.text", "3 materials");
 
     // 2.f. Link on material to work page
-    cy.get(".card-list-page")
+    cy.get(".content-list-page")
       .find(".card-list-item")
       .eq(0)
       .find("a")
@@ -70,7 +70,9 @@ describe("Favorites list", () => {
     cy.visit(
       "/iframe.html?id=apps-favorite-list--favorites-list&args=pageSizeDesktop:2;pageSizeMobile:2"
     );
-    cy.get(".card-list-page").find(".card-list-item").should("have.length", 2);
+    cy.get(".content-list-page")
+      .find(".card-list-item")
+      .should("have.length", 2);
   });
 });
 

diff --git a/src/apps/material/material.dev.tsx b/src/apps/material/material.dev.tsx
@@ -962,3 +962,8 @@ export const inLargeSameSeriesAndIrregularFaustId = Template.bind({});
 inLargeSameSeriesAndIrregularFaustId.args = {
   wid: "work-of:150086-netmusik:BIS-2067"
 };
+
+export const journal = Template.bind({});
+journal.args = {
+  wid: "work-of:870970-basis:01007556"
+};
diff --git a/src/apps/menu/menu.test.ts b/src/apps/menu/menu.test.ts
@@ -245,7 +245,7 @@ describe("Menu (authenticated))", () => {
   });
 
   it("Menu", () => {
-    cy.get(".header__menu-profile").should("exist").click();
+    cy.getBySel("header-menu-profile-button").should("exist").click();
     cy.wait(["@reservations", "@physical_loans", "@fees"]);
     cy.getBySel("modal").scrollTo("bottom");
     // 2. Systemet viser Lånerstatusmenuen med

diff --git a/src/apps/menu/menu.tsx b/src/apps/menu/menu.tsx
@@ -50,27 +50,22 @@ const Menu: FC<MenuProps> = ({ pageSize }) => {
   return (
     <>
       <button
-        className="header__menu-profile header__button btn-ui"
+        className="header__button header__button--left-border btn-ui"
+        data-cy="header-menu-profile-button"
         type="button"
         aria-label={getAriaLabel()}
         onClick={() => openMenu()}
         onKeyDown={(e) => e.key === "Enter" && openMenu()}
         tabIndex={0}
       >
-        <img src={profileIcon} alt="" />
-        {isLoading && (
-          <span className="text-small-caption">
+        <img src={profileIcon} className="header__button-icon" alt="" />
+        <span className="header__button-text">
+          {isLoading ? (
             <TextLineSkeleton width={50} />
-          </span>
-        )}
-        {!isLoading && !userData?.patron?.name && (
-          <span className="text-small-caption">
-            {t("searchHeaderLoginText")}
-          </span>
-        )}
-        {!isLoading && userData?.patron?.name && (
-          <span className="text-small-caption">{userData.patron.name}</span>
-        )}
+          ) : (
+            userData?.patron?.name || t("searchHeaderLoginText")
+          )}
+        </span>
       </button>
       <MenuLoggedIn pageSize={pageSize} />
       <MenuUserUnregistered />

diff --git a/src/apps/search-result/search-result-not-valid-search.tsx b/src/apps/search-result/search-result-not-valid-search.tsx
@@ -12,9 +12,9 @@ const SearchResultInvalidSearch: FC<SearchResultInvalidSearchProps> = ({
   const t = useText();
 
   return (
-    <div className="card-list-page" data-cy={dataCy}>
+    <div className="content-list-page" data-cy={dataCy}>
       <h1
-        className="text-header-h2 search-result-title my-112"
+        className="content-list-page__heading my-112"
         data-cy="search-result-zero-hits"
       >
         {t("invalidSearchText")}

diff --git a/src/apps/search-result/search-result-skeleton.tsx b/src/apps/search-result/search-result-skeleton.tsx
@@ -17,17 +17,17 @@ const SearchResultSkeleton: FC<SearchResultSkeletonProps> = ({
   const t = useText();
   return (
     <>
-      <h1 className="text-header-h2 mb-16 search-result-title text-loading">
+      <h1 className="content-list-page__heading text-loading">
         {!hideFacetLine &&
           t("showingResultsForText", { placeholders: { "@query": q } })}
         {hideFacetLine && t("showingResultsForWithoutQueryText")}
       </h1>
       {!hideFacetLine && <FacetLineFiltersSkeleton />}
-      <ul className="card-list-page__list my-32">
+      <ul className="content-list">
         {/* Show skeleton search result items if no data is available yet.
           We'll show 5 items which should cover most screens. */}
         {[...Array(5)].map(() => (
-          <li>
+          <li className="content-list__item">
             <CardListItemSkeleton />
           </li>
         ))}

diff --git a/src/apps/search-result/search-result-zero-hits.tsx b/src/apps/search-result/search-result-zero-hits.tsx
@@ -12,9 +12,9 @@ const SearchResultZeroHits: FC<SearchResultZeroHitsProps> = ({
   const t = useText();
 
   return (
-    <div className="card-list-page" data-cy={dataCy}>
+    <div className="content-list-page" data-cy={dataCy}>
       <h1
-        className="text-header-h2 search-result-title my-112"
+        className="content-list-page__heading my-112"
         data-cy="search-result-zero-hits"
       >
         {t("noSearchResultText")}

diff --git a/src/apps/search-result/search-result.dev.tsx b/src/apps/search-result/search-result.dev.tsx
@@ -230,6 +230,17 @@ export default {
       name: "Intelligent filters - selected - accessible headline",
       defaultValue: "Selected filters",
       control: { type: "text" }
+    },
+    webSearchLinkText: {
+      name: "Web search link text",
+      defaultValue: "Switch to the results for the library content.",
+      control: { type: "text" }
+    },
+    webSearchConfig: {
+      name: "Web search config",
+      defaultValue:
+        '{\n  "webSearchUrl": "https://www.google.com",\n  "webSearchText": "Google",\n  "webSearchTotal": "1000"\n}',
+      control: { type: "text" }
     }
   }
 } as ComponentMeta<typeof SearchResultEntry>;

diff --git a/src/apps/search-result/search-result.entry.tsx b/src/apps/search-result/search-result.entry.tsx
@@ -42,6 +42,7 @@ interface SearchResultEntryTextProps {
   invalidSearchDescriptionText: string;
   intelligentFiltersAccessibleHeadlineText: string;
   intelligentFiltersSelectedAccessibleHeadlineText: string;
+  webSearchLinkText: string;
 }
 
 interface SearchResultEntryConfigProps {