Merge pull request #340 from NYPL/SCC-4264/small-styling-tweaks-follo…

…wing-ds-bump

Bump DS version and fix minor styling issues for Bib Page deployment

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}

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 {