Merge pull request #343 from NYPL/main

Merge main into qa

CHANGELOG

@@ -5,7 +5,7 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## Prerelease
+## [1.3.0] 2024-10-3
 
 ### Added
 
@@ -15,14 +15,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
-- Small styling fixes after DS version bump to 3.4.0-rc (SCC-4264)
+- Small styling fixes after DS version bump to 3.4.0 (SCC-4264)
 - Fix bug where "undefined" appears in the search results heading (SCC-4277)
 - VQA second pass miscellaneous fixes (SCC-4264)
 - Fixed accessibility issue on Bib page where focus moves to Displaying text when filters are controlled via MultiSelect. This will change when dynamic updates are replaced with an apply button (SCC-4246)
 
 ### Updated
 
-- Bump nvmrc version to Node 20 and DS package to release candidate 3.4.0-rc.
+- Bump DS version to 3.4.0
+- Bump nvmrc version to Node 20.
 - Update error message in Item Filter Year to include new error message prefix from the DS.
 - Integrate view_all query param on client side and remove batched fetch (SCC-4287)
 - Replaced travis with github actions (SCC-4218)

package.json

@@ -16,7 +16,7 @@
     "coverage": "jest --coverage"
   },
   "dependencies": {
-    "@nypl/design-system-react-components": "3.4.0-rc",
+    "@nypl/design-system-react-components": "3.4.0",
     "@nypl/nypl-data-api-client": "1.0.5",
     "@nypl/pickup-time-estimator": "^1.5.2",
     "@nypl/sierra-wrapper": "1.1.0",

src/components/ItemTable/ItemAvailability.tsx

@@ -107,6 +107,7 @@ const ItemAvailability = ({ item }: ItemAvailabilityProps) => {
             p: 0,
             height: "auto",
             textAlign: "left",
+            minHeight: "auto",
           }}
           onClick={() =>
             onContact({

src/components/ItemTable/ItemTable.tsx

@@ -20,12 +20,22 @@ const ItemTable = ({ itemTableData }: ItemTableProps) => {
   const { isLargerThanMobile } = useNYPLBreakpoints()
 
   return (
-    <Box>
+    // Display as grid to prevent bug where the outer container stretches to the Table's width on mobile
+    <Box display="grid">
       <Table
         className={`${styles.itemTable}${
           inSearchResult ? " " + styles.inSearchResult : ""
         }`}
         columnHeaders={tableHeadings}
+        // TODO: Review these values with the design team
+        columnStyles={[
+          { minWidth: 350, maxwidth: 350 },
+          { minwidth: 150, maxWidth: 200 },
+          { minwidth: 150, maxWidth: 150 },
+          { minwidth: 150, maxWidth: 150 },
+          { minwidth: 200, maxWidth: 250 },
+          { minwidth: 150, maxWidth: 200 },
+        ]}
         tableData={tableData}
         showRowDividers={!inSearchResult}
         isScrollable={!isLargerThanMobile}

src/config/constants.ts

@@ -79,7 +79,7 @@ export const ERROR_MESSAGES = {
 
 export const SEARCH_FORM_OPTIONS = {
   all: {
-    text: "Keyword",
+    text: "All fields",
     searchTip:
       "Enter one or more keywords, or use quotes to search for an exact phrase.",
     placeholder: 'ex. climate change or "The New York Times"',
@@ -89,19 +89,19 @@ export const SEARCH_FORM_OPTIONS = {
     searchTip: "Enter a title, or use quotes to search for an exact phrase.",
     placeholder: 'ex. David Copperfield or "The Jewish Press That Was"',
   },
-  contributor: {
-    text: "Author/contributor",
-    searchTip:
-      "Enter the name of an author, contributor, or organization. Use Last Name, First Name for more accurate results.",
-    placeholder: "ex. Dickens, Charles or American Law Association",
-  },
   journal_title: {
     text: "Journal title",
     searchTip:
       "Enter a journal or serial title, or use quotes to search for an exact phrase.",
     placeholder:
       'ex. The New York Times or "The Journal of Clinical Investigation"',
   },
+  contributor: {
+    text: "Author/contributor",
+    searchTip:
+      "Enter the name of an author, contributor, or organization. Use Last Name, First Name for more accurate results.",
+    placeholder: "ex. Dickens, Charles or American Law Association",
+  },
   // SEARCH TIP CODE
   // callnumber: {
   //   text: "Call number",

styles/components/ItemTable.module.scss

@@ -12,6 +12,15 @@
     th:last-of-type {
       padding-right: 0;
     }
+
+    td {
+      font-size: var(--nypl-fontSizes-desktop-body-body2);
+      line-height: var(--nypl-lineHeights-body-body2);
+    }
+
+    span {
+      vertical-align: top;
+    }
   }
 
   &.inSearchResult {