Add a subject number component to search results

If the material is nonfiction and has a shelfmark

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

@@ -13,7 +13,8 @@ import {
   creatorsToString,
   flattenCreators,
   getManifestationPid,
-  getReleaseYearSearchResult
+  getReleaseYearSearchResult,
+  materialIsFiction
 } from "../../../core/utils/helpers/general";
 import CardListItemCover from "./card-list-item-cover";
 import HorizontalTermLine from "../../horizontal-term-line/HorizontalTermLine";
@@ -35,6 +36,7 @@ import {
 } from "../../../apps/material/helper";
 import useFilterHandler from "../../../apps/search-result/useFilterHandler";
 import { getFirstMaterialTypeFromFilters } from "../../../apps/search-result/helper";
+import SubjectNumber from "../../subject-number/SubjectNumber";
 
 export interface CardListItemProps {
   item: Work;
@@ -48,7 +50,10 @@ const CardListItem: React.FC<CardListItemProps> = ({
     titles: { full: fullTitle },
     series,
     creators,
-    manifestations: { all: manifestations },
+    manifestations: {
+      all: manifestations,
+      bestRepresentation: { shelfmark }
+    },
     workId
   },
   coverTint,
@@ -158,6 +163,13 @@ const CardListItem: React.FC<CardListItemProps> = ({
           )}
         </div>
 
+        {!materialIsFiction(item) && shelfmark && (
+          <SubjectNumber
+            className="text-tags color-secondary-gray mt-8"
+            shelfmark={shelfmark}
+          />
+        )}
+
         <h2
           className="card-list-item__title text-header-h4 mb-4"
           data-cy="card-list-item-title"

src/components/subject-number/SubjectNumber.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { FC } from "react";
+import { Manifestation } from "../../core/utils/types/entities";
+
+export interface SubjectNumberProps {
+  className?: string;
+  shelfmark: NonNullable<Manifestation["shelfmark"]>;
+}
+
+const SubjectNumber: FC<SubjectNumberProps> = ({
+  shelfmark: { shelfmark },
+  className = ""
+}) => <div className={className}>{shelfmark}</div>;
+
+export default SubjectNumber;