Release 2024.37.0

package.json

@@ -53,7 +53,7 @@
     "@babel/preset-typescript": "^7.24.7",
     "@csstools/postcss-sass": "^5.1.1",
     "@cypress/browserify-preprocessor": "^3.0.2",
-    "@cypress/code-coverage": "^3.12.46",
+    "@cypress/code-coverage": "^3.12.47",
     "@graphql-codegen/add": "^3.1.1",
     "@graphql-codegen/cli": "^2.6.2",
     "@graphql-codegen/introspection": "^2.1.1",
@@ -75,7 +75,7 @@
     "@testing-library/react": "^14.2.2",
     "@testing-library/react-hooks": "^8.0.1",
     "@tsconfig/create-react-app": "^1.0.2",
-    "@types/node": "^20.16.3",
+    "@types/node": "^20.16.5",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@types/react-flatpickr": "^3.8.11",
@@ -88,13 +88,13 @@
     "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.30001655",
+    "caniuse-lite": "^1.0.30001658",
     "change-case-all": "^2.1.0",
     "chokidar-cli": "^3.0.0",
-    "concurrently": "^8.2.2",
+    "concurrently": "^9.0.0",
     "core-js": "^3.38.1",
     "css-loader": "^7.1.2",
-    "cssnano": "^7.0.5",
+    "cssnano": "^7.0.6",
     "cypress": "^9.6.1",
     "dotenv": "^16.4.5",
     "eslint": "^8.57.0",
@@ -103,11 +103,11 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-loader": "^4.0.2",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-import": "^2.30.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-no-only-tests": "^3.3.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-react": "^7.35.2",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-webpack-plugin": "^4.2.0",
     "glob": "^8.0.1",
@@ -117,13 +117,13 @@
     "mutationobserver-shim": "^0.3.7",
     "nyc": "^17.0.0",
     "orval": "^6.26.0",
-    "postcss": "^8.4.43",
+    "postcss": "^8.4.45",
     "postcss-cli": "^11.0.0",
     "postcss-loader": "^8.1.1",
     "postcss-scss": "^4.0.9",
     "prettier": "^2.6.2",
     "replace-in-file": "^6.3.2",
-    "sass": "^1.77.8",
+    "sass": "^1.78.0",
     "source-map-support": "^0.5.21",
     "style-loader": "^4.0.0",
     "stylelint": "^15.11.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.36.0-b82b94df2d6d6d798fa5c695a2622133b60cd16d",
+    "@danskernesdigitalebibliotek/dpl-design-system": "^2024.37.0-d007a043185fe27649dc16ba7d4996eab9ee1caf",
     "@fullcalendar/core": "^6.1.15",
     "@fullcalendar/daygrid": "^6.1.15",
     "@fullcalendar/interaction": "^6.1.15",
@@ -176,6 +176,6 @@
     "unfetch": "^4.2.0"
   },
   "peerDependencies": {
-    "postcss": "^8.4.43"
+    "postcss": "^8.4.45"
   }
 }

src/apps/favorites-list/FavoritesList.tsx

@@ -44,8 +44,8 @@ const FavoritesList: React.FC<FavoritesListProps> = ({ pageSize }) => {
 
   const skeletonList = (
     <>
-      <div className="ssc">
-        <div className="ssc-line w-10 my-32">&nbsp;</div>
+      <div className="ssc content-list">
+        <div className="ssc-line w-10 mt-32">&nbsp;</div>
       </div>
       <ul className="content-list">
         {/*

src/apps/material-search/MaterialSearchList.tsx

@@ -6,6 +6,7 @@ import { flattenCreators } from "../../core/utils/helpers/general";
 import { useText } from "../../core/utils/text";
 import useInfiniteScrollLoading from "./useInfiteScrollLoading";
 import { SearchWithPaginationQuery } from "../../core/dbc-gateway/generated/graphql";
+import { Work } from "../../core/utils/types/entities";
 
 type MaterialSearchListResultsProps = {
   data: SearchWithPaginationQuery["search"]["works"];
@@ -50,14 +51,15 @@ const MaterialSearchListResults: FC<MaterialSearchListResultsProps> = ({
   }
 
   if (!data || data.length === 0) return null;
+  const works = data as Work[];
 
   return (
     <div className="material-search-list" ref={containerRef}>
       <div className="material-search-list__header">
         {t("materialSearchAmountOfResultsText")}:<span>{hitCount}</span>
       </div>
       <ol className="material-search-list__results">
-        {data.map((work, index) => {
+        {works.map((work, index) => {
           const authors = flattenCreators(work.creators);
           const isLastItem = index === data.length - 1;
 

src/apps/material/__snapshots__/helper.ts.snap

@@ -28,6 +28,7 @@ exports[`divideManifestationsByMaterialType > should divide manifestations by ma
         {
           "__typename": "Person",
           "display": "Isaac Asimov",
+          "nameSort": "Asimov, Isaac",
         },
       ],
       "dateFirstEdition": null,
@@ -128,6 +129,7 @@ exports[`divideManifestationsByMaterialType > should divide manifestations by ma
         {
           "__typename": "Person",
           "display": "Isaac Asimov",
+          "nameSort": "Asimov, Isaac",
         },
       ],
       "dateFirstEdition": null,
@@ -225,6 +227,7 @@ exports[`divideManifestationsByMaterialType > should divide manifestations by ma
         {
           "__typename": "Person",
           "display": "Isaac Asimov",
+          "nameSort": "Asimov, Isaac",
         },
         {
           "__typename": "Person",
@@ -323,6 +326,7 @@ exports[`divideManifestationsByMaterialType > should divide manifestations by ma
         {
           "__typename": "Person",
           "display": "Isaac Asimov",
+          "nameSort": "Asimov, Isaac",
         },
         {
           "__typename": "Person",

src/apps/material/__vitest_data__/helper.ts

@@ -39,7 +39,8 @@ export default {
         creators: [
           {
             display: "Isaac Asimov",
-            __typename: "Person"
+            __typename: "Person",
+            nameSort: "Asimov, Isaac"
           },
           {
             display: "Tricia Reilly",
@@ -138,7 +139,8 @@ export default {
         creators: [
           {
             display: "Isaac Asimov",
-            __typename: "Person"
+            __typename: "Person",
+            nameSort: "Asimov, Isaac"
           }
         ],
         publisher: [],
@@ -231,7 +233,8 @@ export default {
         creators: [
           {
             display: "Isaac Asimov",
-            __typename: "Person"
+            __typename: "Person",
+            nameSort: "Asimov, Isaac"
           },
           {
             display: "Scott Brick",
@@ -324,7 +327,8 @@ export default {
         creators: [
           {
             display: "Isaac Asimov",
-            __typename: "Person"
+            __typename: "Person",
+            nameSort: "Asimov, Isaac"
           }
         ],
         publisher: ["Oxford University Press"],

src/apps/material/material.dev.tsx

@@ -958,11 +958,16 @@ digitalArticle.args = {
   wid: "work-of:870971-tsart:36297484"
 };
 
-export const inLargeSameSeriesAndIrregularFaustId = Template.bind({});
-inLargeSameSeriesAndIrregularFaustId.args = {
+export const irregularFaustId1InLargeSameSeries = Template.bind({});
+irregularFaustId1InLargeSameSeries.args = {
   wid: "work-of:150086-netmusik:BIS-2067"
 };
 
+export const irregularFaustId2fairytale = Template.bind({});
+irregularFaustId2fairytale.args = {
+  wid: "work-of:800010-katalog:99122572002205763__1"
+};
+
 export const journal = Template.bind({});
 journal.args = {
   wid: "work-of:870970-basis:01007556"

src/components/autosuggest-material/autosuggest-material.tsx

@@ -9,7 +9,7 @@ import {
   flattenCreators,
   getManifestationsPids
 } from "../../core/utils/helpers/general";
-import { WorkSmallFragment } from "../../core/dbc-gateway/generated/graphql";
+import { WorkMediumFragment } from "../../core/dbc-gateway/generated/graphql";
 import { getManifestationLanguageIsoCode } from "../../apps/material/helper";
 import { Manifestation } from "../../core/utils/types/entities";
 
@@ -49,7 +49,7 @@ const AutosuggestMaterial: React.FC<AutosuggestMaterialProps> = ({
           manifestations: { all: allManifestations, bestRepresentation }
         } = work;
         const authors = flattenCreators(
-          creators as WorkSmallFragment["creators"]
+          creators as WorkMediumFragment["creators"]
         );
 
         const manifestationLanguageIsoCode =

src/components/find-on-shelf/FindOnShelfManifestationList.tsx

@@ -8,10 +8,12 @@ import { getManifestationPublicationYear } from "../../core/utils/helpers/genera
 
 export interface FindOnShelfManifestationListProps {
   libraryBranchHoldings: ManifestationHoldings;
+  author: string;
 }
 
 const FindOnShelfManifestationList: FC<FindOnShelfManifestationListProps> = ({
-  libraryBranchHoldings
+  libraryBranchHoldings,
+  author
 }) => {
   const t = useText();
 
@@ -30,7 +32,7 @@ const FindOnShelfManifestationList: FC<FindOnShelfManifestationListProps> = ({
         <span className="find-on-shelf__material-header" role="columnheader">
           {t("findOnShelfModalListMaterialText")}
         </span>
-        <span role="columnheader">
+        <span className="find-on-shelf__location-header" role="columnheader">
           {t("findOnShelfModalListFindOnShelfText")}
         </span>
         <span
@@ -55,6 +57,7 @@ const FindOnShelfManifestationList: FC<FindOnShelfManifestationListProps> = ({
               branchHolding.holding.materials
             )}
             key={branchHolding.holding.branch.branchId}
+            author={author}
           />
         );
       })}

src/components/find-on-shelf/FindOnShelfManifestationListItem.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { FC } from "react";
 import { useText } from "../../core/utils/text";
 import { Manifestation } from "../../core/utils/types/entities";
+import { getFindOnShelfLocationText } from "./helper";
 
 export interface FindOnShelfManifestationListItemProps {
   shelfmark: Manifestation["shelfmark"];
@@ -11,6 +12,7 @@ export interface FindOnShelfManifestationListItemProps {
   title: string;
   publicationYear: string | null;
   numberAvailable: number;
+  author: string;
 }
 
 const FindOnShelfManifestationListItem: FC<
@@ -22,7 +24,8 @@ const FindOnShelfManifestationListItem: FC<
   sublocation,
   title,
   publicationYear,
-  numberAvailable
+  numberAvailable,
+  author
 }) => {
   const t = useText();
 
@@ -45,11 +48,14 @@ const FindOnShelfManifestationListItem: FC<
       </span>
       <span role="cell">
         {locationArray.length
-          ? locationArray.join(" · ")
+          ? getFindOnShelfLocationText(locationArray, author)
           : t("findOnShelfModalNoLocationSpecifiedText")}
       </span>
       <span className="find-on-shelf__item-count-text" role="cell">
-        {numberAvailable}
+        {numberAvailable}{" "}
+        <span className="hide-on-desktop">
+          {t("findOnShelfModalListItemCountText")}
+        </span>
       </span>
     </li>
   );

src/components/find-on-shelf/FindOnShelfModalBody.tsx

@@ -7,9 +7,11 @@ import {
   useGetHoldings
 } from "../../apps/material/helper";
 import {
+  capitalizeFirstLetters,
   convertPostIdToFaustId,
   creatorsToString,
   flattenCreators,
+  flattenCreatorsLastNameFirst,
   getManifestationsPids
 } from "../../core/utils/helpers/general";
 import { useText } from "../../core/utils/text";
@@ -55,6 +57,10 @@ const FindOnShelfModalBody: FC<FindOnShelfModalBodyProps> = ({
     config
   });
   const author = creatorsToString(flattenCreators(authors), t);
+  // Inverted author - last name, then first name is used in find on shelf modal.
+  const invertedAuthor = capitalizeFirstLetters(
+    creatorsToString(flattenCreatorsLastNameFirst(authors), t)
+  );
   const title = workTitles.join(", ");
   const isPeriodical = manifestations.some((manifestation) => {
     return manifestation.materialTypes.some((materialType) => {
@@ -215,6 +221,7 @@ const FindOnShelfModalBody: FC<FindOnShelfModalBodyProps> = ({
               >
                 <FindOnShelfManifestationList
                   libraryBranchHoldings={libraryBranch}
+                  author={invertedAuthor}
                 />
               </Disclosure>
             );

src/components/find-on-shelf/helper.tsx

@@ -0,0 +1,10 @@
+export const getFindOnShelfLocationText = (
+  locationArray: (string | undefined)[],
+  author: string
+) => {
+  return `${locationArray.join(" · ")}${
+    author && author !== "undefined" ? ` · ${author}` : ""
+  }`;
+};
+
+export default {};

src/components/find-on-shelf/mocked-data.ts

@@ -27,7 +27,8 @@ export const mockedManifestationData: Manifestation[] = [
     creators: [
       {
         display: "Lucinda Riley",
-        __typename: "Person"
+        __typename: "Person",
+        nameSort: "Riley, Lucinda"
       }
     ],
     publisher: [""],
@@ -112,7 +113,8 @@ export const mockedManifestationData: Manifestation[] = [
     creators: [
       {
         display: "Lucinda Riley",
-        __typename: "Person"
+        __typename: "Person",
+        nameSort: "Riley, Lucinda"
       }
     ],
     publisher: [""],

src/components/material/material-buttons/online/MaterialButtonOnlineExternal.tsx

@@ -68,7 +68,7 @@ const MaterialButtonOnlineExternal: FC<MaterialButtonOnlineExternalProps> = ({
 
   // Handle URL translation when data or error changes
   useEffect(() => {
-    if (urlWasTranslated === false && !error && data?.data?.url) {
+    if (!urlWasTranslated && !error && data?.data?.url) {
       setTranslatedUrl(new URL(data.data.url));
       setUrlWasTranslated(true);
     }

src/core/dbc-gateway/fragments.graphql

@@ -62,6 +62,7 @@ fragment ManifestationsSimpleFields on Manifestation {
   }
   creators {
     display
+    nameSort
     __typename
   }
   publisher
@@ -260,6 +261,9 @@ fragment WorkMedium on Work {
       display
     }
   }
+  creators {
+    nameSort
+  }
   mainLanguages {
     display
     isoCode