Merge pull request #1168 from danskernesdigitalebibliotek/release/bra…

…hma-15

Merge release/brahma-15

package.json

@@ -144,7 +144,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.18.0-d02b9076284ebf6320a0c838eccdc62087aa2ff5",
+    "@danskernesdigitalebibliotek/dpl-design-system": "^2024.18.1-7e3b588f0ecdffd93b6e570b09b83369a18f8677",
     "@fullcalendar/core": "^6.1.11",
     "@fullcalendar/daygrid": "^6.1.11",
     "@fullcalendar/interaction": "^6.1.11",

src/apps/dashboard/dashboard-notification-list/Notifications.tsx

@@ -49,14 +49,12 @@ const Notifications: FC<NotificationsProps> = ({
           header: headerNotification,
           color,
           notificationClickEvent,
-          showNotificationDot,
           badge,
           dataCy
         }) => (
           <DashboardNotification
             notificationNumber={listLength}
             notificationText={headerNotification}
-            showNotificationDot={showNotificationDot}
             badge={badge}
             dataCy={dataCy}
             key={headerNotification}

src/apps/dashboard/dashboard-notification/dashboard-notification.tsx

@@ -4,7 +4,6 @@ import StatusBadge from "../../loan-list/materials/utils/status-badge";
 
 interface DashboardNotificationProps {
   notificationNumber: number;
-  showNotificationDot: boolean;
   showStatusLabel?: boolean;
   notificationText: string;
   dataCy: string;
@@ -20,7 +19,6 @@ const DashboardNotification: FC<DashboardNotificationProps> = ({
   dataCy,
   notificationColor,
   notificationClickEvent,
-  showNotificationDot,
   showStatusLabel = false,
   badge
 }) => {
@@ -53,7 +51,6 @@ const DashboardNotification: FC<DashboardNotificationProps> = ({
             {notificationColor === "info" && <StatusBadge infoText={badge} />}
           </>
         )}
-        {showNotificationDot && <div className="list-dashboard__dot" />}
         <div className="list-dashboard__arrow">
           <Arrow />
         </div>

src/apps/dashboard/dashboard.test.tsx

@@ -1380,23 +1380,23 @@ describe("Dashboard", () => {
 
     // Notification - handed in too later
     // Red icon
-    cy.getBySel("physical-loans-overdue")
-      .should("have.text", "6Returned too lateExpired")
-      .find(".list-dashboard__dot")
-      .should("exist");
+    cy.getBySel("physical-loans-overdue").should(
+      "have.text",
+      "6Returned too lateExpired"
+    );
 
     // Notification - hand in soon.
     // Red icon
-    cy.getBySel("physical-loans-soon-overdue")
-      .should("have.text", "22To be returned soonExpires soon")
-      .find(".list-dashboard__dot")
-      .should("exist");
+    cy.getBySel("physical-loans-soon-overdue").should(
+      "have.text",
+      "22To be returned soonExpires soon"
+    );
 
     // Notification - hand in in a long time.
-    cy.getBySel("loans-not-overdue")
-      .should("have.text", "14Longer return time")
-      .find(".list-dashboard__dot")
-      .should("not.exist");
+    cy.getBySel("loans-not-overdue").should(
+      "have.text",
+      "14Longer return time"
+    );
 
     // Header "Reservations" with link to loans page
     cy.getBySel("dashboard-reservations-header")
@@ -1407,17 +1407,14 @@ describe("Dashboard", () => {
 
     // Notification - reservations ready
     // Red icon
-    cy.getBySel("reservations-ready")
-      .should("have.text", "2Ready for youReady for pickup")
-      .find(".list-dashboard__dot")
-      .should("exist");
+    cy.getBySel("reservations-ready").should(
+      "have.text",
+      "2Ready for youReady for pickup"
+    );
 
     // Notification - reservations queued
     // Red icon
-    cy.getBySel("reservations-queued")
-      .should("have.text", "9Still in queue")
-      .find(".list-dashboard__dot")
-      .should("not.exist");
+    cy.getBySel("reservations-queued").should("have.text", "9Still in queue");
   });
 
   it("Can go trough renewal flow of soon overdue loans", () => {

src/apps/fee-list/stackable-fees/fee-info.tsx

@@ -29,7 +29,7 @@ const FeeInfo: FC<FeeInfoProps> = ({
     <div className="list-reservation__material">
       <div>
         <Cover
-          id={pid as Pid}
+          ids={[pid as Pid]}
           idType="pid"
           size="small"
           animate={false}

src/apps/loan-list/materials/stackable-material/material-info.tsx

@@ -42,7 +42,7 @@ const MaterialInfo: FC<MaterialInfoProps> = ({
     <div className="list-reservation__material">
       <div>
         <Cover
-          id={coverId}
+          ids={[coverId]}
           idType={pid ? "pid" : "isbn"}
           size="small"
           animate={false}

src/apps/material/helper.ts

@@ -346,6 +346,12 @@ export const getManifestationsWithMaterialType = (
   });
 };
 
+export const getFirstBookManifestation = (manifestations: Manifestation[]) => {
+  const dividedManifestations =
+    divideManifestationsByMaterialType(manifestations);
+  return first(dividedManifestations[ManifestationMaterialType.book]) ?? null;
+};
+
 export const isABook = (manifestations: Manifestation[]) => {
   return manifestations.some((manifestation) => {
     return manifestation.materialTypes.some(

src/apps/material/material.tsx

@@ -22,7 +22,6 @@ import {
   isParallelReservation
 } from "./helper";
 import { Manifestation, Work } from "../../core/utils/types/entities";
-import { getManifestationPid } from "../../core/utils/helpers/general";
 import { PeriodicalEdition } from "../../components/material/periodical/helper";
 import InfomediaModal from "../../components/material/infomedia/InfomediaModal";
 import { useStatistics } from "../../core/statistics/useStatistics";
@@ -38,6 +37,7 @@ import { isAnonymous, isBlocked } from "../../core/utils/helpers/user";
 import ReservationFindOnShelfModals from "./ReservationFindOnShelfModals";
 import { usePatronData } from "../../core/utils/helpers/usePatronData";
 import { useGetWork } from "../../core/utils/useGetWork";
+import { getWorkPid } from "../../core/utils/helpers/general";
 
 export interface MaterialProps {
   wid: WorkId;
@@ -137,7 +137,7 @@ const Material: React.FC<MaterialProps> = ({ wid }) => {
     }
   } = data as { work: Work };
 
-  const pid = getManifestationPid(manifestations);
+  const pid = getWorkPid(work);
   const detailsListData = getDetailsListData({
     manifestation: selectedManifestations[0],
     work,

src/apps/menu/menu.dev.tsx

@@ -165,6 +165,14 @@ export default {
     expirationWarningDaysBeforeConfig: {
       defaultValue: "6",
       control: { type: "text" }
+    },
+    searchHeaderLoginText: {
+      defaultValue: "Login",
+      control: { type: "text" }
+    },
+    searchHeaderFavoritesText: {
+      defaultValue: "Liked",
+      control: { type: "text" }
     }
   }
 } as ComponentMeta<typeof WrappedMenu>;

src/apps/menu/menu.entry.tsx

@@ -44,6 +44,8 @@ export interface MenuProps {
   menuNotAuthenticatedModalDescriptionText: string;
   physicalLoansUrl: string;
   reservationsUrl: string;
+  searchHeaderLoginText: string;
+  searchHeaderFavoritesText: string;
 }
 
 export interface MenuEntryProps

src/apps/menu/menu.tsx

@@ -60,6 +60,11 @@ const Menu: FC<MenuProps> = ({ pageSize }) => {
             <TextLineSkeleton width={50} />
           </span>
         )}
+        {!userData?.patron?.name && (
+          <span className="text-small-caption">
+            {t("searchHeaderLoginText")}
+          </span>
+        )}
         {userData?.patron?.name && (
           <span className="text-small-caption">{userData.patron.name}</span>
         )}

src/apps/recommended-material/RecommendedMaterial.tsx

@@ -93,7 +93,7 @@ const RecommendedMaterial: React.FC<RecommendedMaterialProps> = ({
         />
       </div>
       <Cover
-        id={pid}
+        ids={[pid]}
         url={materialFullUrl}
         size="large"
         animate

src/components/autosuggest-category/autosuggest-category.tsx

@@ -40,7 +40,7 @@ const AutosuggestCategory: FC<AutosuggestCategoryProps> = ({
                 "autosuggest__text-item--highlight": highlightedIndex === index
               }
             )}
-            key={item.term + (item.work?.workId || "")}
+            key={`${item.term}-${index}`}
             {...getItemProps({ item, index })}
             data-cy={dataCy}
           >

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

@@ -6,10 +6,12 @@ import { Suggestion, Suggestions } from "../../core/utils/types/autosuggest";
 import { Cover } from "../cover/cover";
 import {
   creatorsToString,
-  flattenCreators
+  flattenCreators,
+  getManifestationsPids
 } from "../../core/utils/helpers/general";
 import { WorkSmallFragment } from "../../core/dbc-gateway/generated/graphql";
 import { getManifestationLanguageIsoCode } from "../../apps/material/helper";
+import { Manifestation } from "../../core/utils/types/entities";
 
 export interface AutosuggestMaterialProps {
   materialData: Suggestions | [];
@@ -40,16 +42,22 @@ const AutosuggestMaterial: React.FC<AutosuggestMaterialProps> = ({
         if (!work) {
           return null;
         }
-        const { creators } = work;
+        const {
+          workId,
+          titles,
+          creators,
+          manifestations: { all: allManifestations, bestRepresentation }
+        } = work;
         const authors = flattenCreators(
           creators as WorkSmallFragment["creators"]
         );
 
         const manifestationLanguageIsoCode =
-          item.work?.manifestations.bestRepresentation &&
-          getManifestationLanguageIsoCode([
-            item.work.manifestations.bestRepresentation
-          ]);
+          bestRepresentation &&
+          getManifestationLanguageIsoCode([bestRepresentation]);
+        const coverPids = getManifestationsPids(
+          (allManifestations ?? []) as Manifestation[]
+        );
 
         return (
           <li
@@ -59,26 +67,25 @@ const AutosuggestMaterial: React.FC<AutosuggestMaterialProps> = ({
               "autosuggest__material-item--highlight":
                 highlightedIndex === index
             })}
-            key={item.work?.workId}
+            key={workId}
             {...getItemProps({ item, index })}
             data-cy={dataCy}
           >
             {/* eslint-enable react/jsx-props-no-spreading */}
             <div className="autosuggest__material-card">
-              {item.work && (
-                <Cover
-                  animate
-                  size="xsmall"
-                  id={item.work.manifestations.bestRepresentation.pid}
-                  shadow="small"
-                />
-              )}
+              <Cover
+                animate
+                size="xsmall"
+                ids={coverPids}
+                bestRepresentation={bestRepresentation as Manifestation}
+                shadow="small"
+              />
               <div className="autosuggest__info">
                 <div
                   lang={manifestationLanguageIsoCode}
                   className="text-body-medium-medium autosuggest__title"
                 >
-                  {item.work?.titles.main[0]}
+                  {titles.main[0]}
                 </div>
                 <div className="text-body-small-regular autosuggest__author">
                   {creatorsToString(authors, t)}

src/components/autosuggest/autosuggest.graphql

@@ -12,6 +12,9 @@ query suggestionsFromQueryString($q: String!) {
           display
         }
         manifestations {
+          all {
+            pid
+          }
           bestRepresentation {
             pid
             ...WithLanguages

src/components/card-item-list/card-list-item/card-list-item-cover.tsx

@@ -3,7 +3,8 @@ import { Cover, CoverProps } from "../../cover/cover";
 
 type CardListItemCoverProps = Omit<CoverProps, "animate" | "size">;
 const CardListItemCover: React.FC<CardListItemCoverProps> = ({
-  id,
+  ids,
+  bestRepresentation,
   alt,
   url,
   tint,
@@ -12,7 +13,8 @@ const CardListItemCover: React.FC<CardListItemCoverProps> = ({
   return (
     <Cover
       animate
-      id={id}
+      ids={ids}
+      bestRepresentation={bestRepresentation}
       size="small"
       alt={String(alt)}
       url={url}

src/components/card-item-list/card-list-item/card-list-item.tsx

@@ -13,9 +13,9 @@ import Link from "../../atoms/links/Link";
 import {
   creatorsToString,
   flattenCreators,
-  getManifestationPid,
   getReleaseYearSearchResult,
-  materialIsFiction
+  materialIsFiction,
+  getManifestationsPids
 } from "../../../core/utils/helpers/general";
 import CardListItemCover from "./card-list-item-cover";
 import HorizontalTermLine from "../../horizontal-term-line/HorizontalTermLine";
@@ -32,6 +32,7 @@ import { useStatistics } from "../../../core/statistics/useStatistics";
 import { statistics } from "../../../core/statistics/statistics";
 import { useItemHasBeenVisible } from "../../../core/utils/helpers/lazy-load";
 import {
+  getFirstBookManifestation,
   getManifestationLanguageIsoCode,
   getNumberedSeries
 } from "../../../apps/material/helper";
@@ -69,11 +70,12 @@ const CardListItem: React.FC<CardListItemProps> = ({
     filters,
     manifestations
   );
+  const bookManifestation = getFirstBookManifestation(manifestations);
 
   const dispatch = useDispatch<TypedDispatch>();
   const queryClient = useQueryClient();
   const author = creatorsToString(flattenCreators(creators), t);
-  const manifestationPid = getManifestationPid(manifestations);
+  const manifestationPids = getManifestationsPids(manifestations);
   const firstItemInSeries = getNumberedSeries(series).shift();
   const materialFullUrl = constructMaterialUrl(
     materialUrl,
@@ -133,7 +135,9 @@ const CardListItem: React.FC<CardListItemProps> = ({
       <div className="card-list-item__cover">
         {showItem && (
           <CardListItemCover
-            id={manifestationPid}
+            ids={manifestationPids}
+            // We'll try to prioritize book covers or else use FBI's recommended manifestation.
+            bestRepresentation={bookManifestation ?? bestRepresentation}
             url={materialFullUrl}
             tint={coverTint}
             linkAriaLabelledBy={searchTitleId}