From 7394c4ea4d49e2679662a1295e42103bbe3ea23b Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Thu, 3 Oct 2024 12:33:46 -0400 Subject: [PATCH 01/28] Make min and max width values camelcase --- src/components/ItemTable/ItemTable.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/ItemTable/ItemTable.tsx b/src/components/ItemTable/ItemTable.tsx index b0f1eae4..68cd004f 100644 --- a/src/components/ItemTable/ItemTable.tsx +++ b/src/components/ItemTable/ItemTable.tsx @@ -36,12 +36,12 @@ const ItemTable = ({ itemTableData }: ItemTableProps) => { { width: "33.3%", minWidth: 150, maxWidth: 250 }, ] : [ - { minWidth: 350, maxwidth: 350 }, - { minwidth: 150, maxWidth: 200 }, - { minwidth: 150, maxWidth: 150 }, - { minwidth: 150, maxWidth: 150 }, - { minwidth: 200, maxWidth: 250 }, - { minwidth: 150, maxWidth: 200 }, + { 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} From 4248c20608deaf59329a732239f831a539d0d42c Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Thu, 3 Oct 2024 12:36:30 -0400 Subject: [PATCH 02/28] Update changelog --- CHANGELOG | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG b/CHANGELOG index 86763357..55d6e1ce 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -5,6 +5,12 @@ 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 + +### Fixed + +- Make min and maxwidth keys camel case on ItemTable (SCC-4299) + ### Hotfix - Fix Table column widths on Search Results after DS 3.4.0 update (SCC-4299) From 51f44e365e01ed6808ed45c76ccacfcec252bf43 Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Thu, 3 Oct 2024 15:37:43 -0400 Subject: [PATCH 03/28] Set column values per designs --- src/components/ItemTable/ItemTable.tsx | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/src/components/ItemTable/ItemTable.tsx b/src/components/ItemTable/ItemTable.tsx index 68cd004f..b9cd47f2 100644 --- a/src/components/ItemTable/ItemTable.tsx +++ b/src/components/ItemTable/ItemTable.tsx @@ -30,18 +30,14 @@ const ItemTable = ({ itemTableData }: ItemTableProps) => { // TODO: Review these values with the design team columnStyles={ inSearchResult - ? [ - { width: "33.3%", minWidth: 150, maxWidth: 250 }, - { width: "33.3%", minWidth: 150, maxWidth: 250 }, - { width: "33.3%", minWidth: 150, maxWidth: 250 }, - ] + ? [{ width: 272 }] : [ - { minWidth: 350, maxWidth: 350 }, - { minWidth: 150, maxWidth: 200 }, - { minWidth: 150, maxWidth: 150 }, - { minWidth: 150, maxWidth: 150 }, - { minWidth: 200, maxWidth: 250 }, - { minWidth: 150, maxWidth: 200 }, + { width: "30%" }, + { width: "14%" }, + { width: "14%" }, + { width: "14%" }, + { width: "14%" }, + { width: "14%" }, ] } tableData={tableData} From aeddfc57a4a5bfc9d1b3425e2118975c822fa489 Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Thu, 3 Oct 2024 15:55:48 -0400 Subject: [PATCH 04/28] Decrease table heading font size --- src/components/ItemTable/ItemTable.tsx | 1 - styles/components/ItemTable.module.scss | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ItemTable/ItemTable.tsx b/src/components/ItemTable/ItemTable.tsx index b9cd47f2..e2e2a662 100644 --- a/src/components/ItemTable/ItemTable.tsx +++ b/src/components/ItemTable/ItemTable.tsx @@ -27,7 +27,6 @@ const ItemTable = ({ itemTableData }: ItemTableProps) => { inSearchResult ? " " + styles.inSearchResult : "" }`} columnHeaders={tableHeadings} - // TODO: Review these values with the design team columnStyles={ inSearchResult ? [{ width: 272 }] diff --git a/styles/components/ItemTable.module.scss b/styles/components/ItemTable.module.scss index 1f7512e2..8ebdc4a2 100644 --- a/styles/components/ItemTable.module.scss +++ b/styles/components/ItemTable.module.scss @@ -28,6 +28,7 @@ border: 0 !important; th { + font-size: var(--nypl-fontSizes-desktop-body-body1); padding-top: 0; padding-bottom: var(--nypl-space-xxs); } From df2e0a0d8ffaf84baf939301d583d72836f3e985 Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Thu, 3 Oct 2024 16:18:58 -0400 Subject: [PATCH 05/28] Adjust search result styles --- src/components/ItemTable/ItemTable.tsx | 2 +- src/components/SearchResults/SearchResult.tsx | 4 +++- styles/components/ItemTable.module.scss | 18 ++++++++++++------ 3 files changed, 16 insertions(+), 8 deletions(-) diff --git a/src/components/ItemTable/ItemTable.tsx b/src/components/ItemTable/ItemTable.tsx index e2e2a662..cbe2f23f 100644 --- a/src/components/ItemTable/ItemTable.tsx +++ b/src/components/ItemTable/ItemTable.tsx @@ -29,7 +29,7 @@ const ItemTable = ({ itemTableData }: ItemTableProps) => { columnHeaders={tableHeadings} columnStyles={ inSearchResult - ? [{ width: 272 }] + ? [{ width: 272, minWidth: 272 }] : [ { width: "30%" }, { width: "14%" }, diff --git a/src/components/SearchResults/SearchResult.tsx b/src/components/SearchResults/SearchResult.tsx index e90da638..c54139ff 100644 --- a/src/components/SearchResults/SearchResult.tsx +++ b/src/components/SearchResults/SearchResult.tsx @@ -38,7 +38,9 @@ const SearchResult = ({ bib }: SearchResultProps) => { {bib.materialType && {bib.materialType}} {bib.publicationStatement && {bib.publicationStatement}} diff --git a/styles/components/ItemTable.module.scss b/styles/components/ItemTable.module.scss index 8ebdc4a2..0d6e1528 100644 --- a/styles/components/ItemTable.module.scss +++ b/styles/components/ItemTable.module.scss @@ -24,18 +24,24 @@ } &.inSearchResult { + margin-top: 0; + tr { border: 0 !important; - th { - font-size: var(--nypl-fontSizes-desktop-body-body1); + th, + td, + th:first-of-type, + td:first-of-type { + width: 272px; padding-top: 0; - padding-bottom: var(--nypl-space-xxs); + padding-bottom: 0; } - td { - padding-top: 0; - padding-bottom: 0; + th { + line-height: 1; + font-size: var(--nypl-fontSizes-desktop-body-body1); + padding-bottom: var(--nypl-space-xs); } } } From 7863fb26a833577586f874531b1c0dadcbc944a2 Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Thu, 3 Oct 2024 16:20:58 -0400 Subject: [PATCH 06/28] Adjust search results styles --- src/components/ItemTable/ItemTable.tsx | 2 +- styles/components/ItemTable.module.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ItemTable/ItemTable.tsx b/src/components/ItemTable/ItemTable.tsx index cbe2f23f..e2e2a662 100644 --- a/src/components/ItemTable/ItemTable.tsx +++ b/src/components/ItemTable/ItemTable.tsx @@ -29,7 +29,7 @@ const ItemTable = ({ itemTableData }: ItemTableProps) => { columnHeaders={tableHeadings} columnStyles={ inSearchResult - ? [{ width: 272, minWidth: 272 }] + ? [{ width: 272 }] : [ { width: "30%" }, { width: "14%" }, diff --git a/styles/components/ItemTable.module.scss b/styles/components/ItemTable.module.scss index 0d6e1528..9b68acef 100644 --- a/styles/components/ItemTable.module.scss +++ b/styles/components/ItemTable.module.scss @@ -40,8 +40,8 @@ th { line-height: 1; - font-size: var(--nypl-fontSizes-desktop-body-body1); - padding-bottom: var(--nypl-space-xs); + font-size: var(--nypl-fontSizes--2); + padding-bottom: var(--nypl-space-s); } } } From aebfb82e9cc5fdbf74642fd9b5d0325382ed0022 Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Thu, 3 Oct 2024 16:21:31 -0400 Subject: [PATCH 07/28] Decrease item table heading size --- styles/components/ItemTable.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/components/ItemTable.module.scss b/styles/components/ItemTable.module.scss index 9b68acef..126f3ecc 100644 --- a/styles/components/ItemTable.module.scss +++ b/styles/components/ItemTable.module.scss @@ -41,7 +41,7 @@ th { line-height: 1; font-size: var(--nypl-fontSizes--2); - padding-bottom: var(--nypl-space-s); + padding-bottom: var(--nypl-space-xs); } } } From 285006c782f0548001d22a2fb7b90df8d89e0fbc Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Thu, 3 Oct 2024 16:22:11 -0400 Subject: [PATCH 08/28] Set column styles on both item table variants --- styles/components/ItemTable.module.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/styles/components/ItemTable.module.scss b/styles/components/ItemTable.module.scss index 126f3ecc..b755d2a4 100644 --- a/styles/components/ItemTable.module.scss +++ b/styles/components/ItemTable.module.scss @@ -18,6 +18,12 @@ line-height: var(--nypl-lineHeights-body-body2); } + th { + line-height: 1; + font-size: var(--nypl-fontSizes--2); + padding-bottom: var(--nypl-space-xs); + } + span { vertical-align: top; } @@ -37,12 +43,6 @@ padding-top: 0; padding-bottom: 0; } - - th { - line-height: 1; - font-size: var(--nypl-fontSizes--2); - padding-bottom: var(--nypl-space-xs); - } } } } From ab797c029ad3c06dd7d777087f0dbe6d7861d313 Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Thu, 3 Oct 2024 16:28:02 -0400 Subject: [PATCH 09/28] Update changelog --- CHANGELOG | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG b/CHANGELOG index 55d6e1ce..84c97b41 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -5,10 +5,11 @@ 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 +## Prerelease ### Fixed +- Adjust ItemTable styles according to design (SCC-4299) - Make min and maxwidth keys camel case on ItemTable (SCC-4299) ### Hotfix From 50701b32722b66faa694b8ae29bc953aa0bfa970 Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Thu, 3 Oct 2024 16:28:35 -0400 Subject: [PATCH 10/28] Update changelog --- CHANGELOG | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG b/CHANGELOG index 84c97b41..23bd6c28 100644 --- a/CHANGELOG +++ b/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.1] 2024-10-3 ### Fixed From 4670c9f7e01123a5636beb3e9fae9d71dff06562 Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Fri, 4 Oct 2024 09:36:08 -0400 Subject: [PATCH 11/28] Adjust item table header styles --- CHANGELOG | 2 +- src/components/ItemTable/ItemTable.tsx | 12 ++++++------ styles/components/ItemTable.module.scss | 4 ++-- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index 23bd6c28..673f9351 100644 --- a/CHANGELOG +++ b/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). -## [1.3.1] 2024-10-3 +## [1.3.1] 2024-10-4 ### Fixed diff --git a/src/components/ItemTable/ItemTable.tsx b/src/components/ItemTable/ItemTable.tsx index e2e2a662..4d1490bf 100644 --- a/src/components/ItemTable/ItemTable.tsx +++ b/src/components/ItemTable/ItemTable.tsx @@ -31,12 +31,12 @@ const ItemTable = ({ itemTableData }: ItemTableProps) => { inSearchResult ? [{ width: 272 }] : [ - { width: "30%" }, - { width: "14%" }, - { width: "14%" }, - { width: "14%" }, - { width: "14%" }, - { width: "14%" }, + { width: "30%", minWidth: 350 }, + { width: "14%", minWidth: 100 }, + { width: "14%", minWidth: 100 }, + { width: "14%", minWidth: 100 }, + { width: "14%", minWidth: 100 }, + { width: "14%", minWidth: 100 }, ] } tableData={tableData} diff --git a/styles/components/ItemTable.module.scss b/styles/components/ItemTable.module.scss index b755d2a4..8ede1f83 100644 --- a/styles/components/ItemTable.module.scss +++ b/styles/components/ItemTable.module.scss @@ -19,9 +19,9 @@ } th { - line-height: 1; font-size: var(--nypl-fontSizes--2); - padding-bottom: var(--nypl-space-xs); + padding-top: 0; + padding-bottom: var(--nypl-space-xxs); } span { From 68541a3695361028c233df550480e554e4dd46bf Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Fri, 4 Oct 2024 09:38:51 -0400 Subject: [PATCH 12/28] Add bottom padding to table headers on search results --- styles/components/ItemTable.module.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/styles/components/ItemTable.module.scss b/styles/components/ItemTable.module.scss index 8ede1f83..89a6792a 100644 --- a/styles/components/ItemTable.module.scss +++ b/styles/components/ItemTable.module.scss @@ -41,7 +41,6 @@ td:first-of-type { width: 272px; padding-top: 0; - padding-bottom: 0; } } } From df0ed75efd3483bd6658f4901dec94dc2dee890a Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Fri, 4 Oct 2024 09:40:44 -0400 Subject: [PATCH 13/28] Remove border from eresources link --- src/components/SearchResults/ElectronicResourcesLink.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/components/SearchResults/ElectronicResourcesLink.tsx b/src/components/SearchResults/ElectronicResourcesLink.tsx index e9971445..2e9f508b 100644 --- a/src/components/SearchResults/ElectronicResourcesLink.tsx +++ b/src/components/SearchResults/ElectronicResourcesLink.tsx @@ -17,14 +17,7 @@ const ElectronicResourcesLink = ({ electronicResources, }: ElectronicResourcesLinkProps) => { return ( - + Date: Fri, 4 Oct 2024 09:58:47 -0400 Subject: [PATCH 14/28] Add min widths to search result columns --- src/components/ItemTable/ItemTable.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/ItemTable/ItemTable.tsx b/src/components/ItemTable/ItemTable.tsx index 4d1490bf..62c0fcec 100644 --- a/src/components/ItemTable/ItemTable.tsx +++ b/src/components/ItemTable/ItemTable.tsx @@ -29,7 +29,11 @@ const ItemTable = ({ itemTableData }: ItemTableProps) => { columnHeaders={tableHeadings} columnStyles={ inSearchResult - ? [{ width: 272 }] + ? [ + { width: 272, minWidth: 85 }, + { width: 272, minWidth: 85 }, + { width: 272, minWidth: 85 }, + ] : [ { width: "30%", minWidth: 350 }, { width: "14%", minWidth: 100 }, From bee8b793f62492f45537b8f58f7b942ca7c62545 Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Fri, 4 Oct 2024 11:20:39 -0400 Subject: [PATCH 15/28] Update changelog --- CHANGELOG | 2 +- styles/components/ItemTable.module.scss | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index 673f9351..4f6807c9 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -10,7 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Adjust ItemTable styles according to design (SCC-4299) -- Make min and maxwidth keys camel case on ItemTable (SCC-4299) +- Remove border and padding from eResources link as part of post-Bib page launch VQA (SCC-4299) ### Hotfix diff --git a/styles/components/ItemTable.module.scss b/styles/components/ItemTable.module.scss index 89a6792a..a7431ec2 100644 --- a/styles/components/ItemTable.module.scss +++ b/styles/components/ItemTable.module.scss @@ -39,7 +39,6 @@ td, th:first-of-type, td:first-of-type { - width: 272px; padding-top: 0; } } From d1b2375c72d2222e2efcdd77788872002d7fc3f1 Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Fri, 4 Oct 2024 11:22:29 -0400 Subject: [PATCH 16/28] Decrease item table first col min width --- src/components/ItemTable/ItemTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ItemTable/ItemTable.tsx b/src/components/ItemTable/ItemTable.tsx index 62c0fcec..526f80fa 100644 --- a/src/components/ItemTable/ItemTable.tsx +++ b/src/components/ItemTable/ItemTable.tsx @@ -35,7 +35,7 @@ const ItemTable = ({ itemTableData }: ItemTableProps) => { { width: 272, minWidth: 85 }, ] : [ - { width: "30%", minWidth: 350 }, + { width: "30%", minWidth: 200 }, { width: "14%", minWidth: 100 }, { width: "14%", minWidth: 100 }, { width: "14%", minWidth: 100 }, From f43e31825504bbcf5f4c30ea1ad40ec79bbc862e Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Fri, 4 Oct 2024 13:07:42 -0400 Subject: [PATCH 17/28] Add width auto to first column --- src/components/ItemTable/ItemTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ItemTable/ItemTable.tsx b/src/components/ItemTable/ItemTable.tsx index 526f80fa..618ca1ce 100644 --- a/src/components/ItemTable/ItemTable.tsx +++ b/src/components/ItemTable/ItemTable.tsx @@ -35,7 +35,7 @@ const ItemTable = ({ itemTableData }: ItemTableProps) => { { width: 272, minWidth: 85 }, ] : [ - { width: "30%", minWidth: 200 }, + { width: "auto", minWidth: 250 }, { width: "14%", minWidth: 100 }, { width: "14%", minWidth: 100 }, { width: "14%", minWidth: 100 }, From 1582bff995ee6ca2e858679024c925f3b9038ee8 Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Fri, 4 Oct 2024 13:18:08 -0400 Subject: [PATCH 18/28] Make isScrollable true by default --- src/components/ItemTable/ItemTable.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/components/ItemTable/ItemTable.tsx b/src/components/ItemTable/ItemTable.tsx index 618ca1ce..7b31ea10 100644 --- a/src/components/ItemTable/ItemTable.tsx +++ b/src/components/ItemTable/ItemTable.tsx @@ -1,8 +1,4 @@ -import { - Box, - Table, - useNYPLBreakpoints, -} from "@nypl/design-system-react-components" +import { Box, Table } from "@nypl/design-system-react-components" import type ItemTableData from "../../models/ItemTableData" import StatusLinks from "./StatusLinks" @@ -17,7 +13,6 @@ interface ItemTableProps { */ const ItemTable = ({ itemTableData }: ItemTableProps) => { const { tableHeadings, tableData, items, inSearchResult } = itemTableData - const { isLargerThanMobile } = useNYPLBreakpoints() return ( // Display as grid to prevent bug where the outer container stretches to the Table's width on mobile @@ -45,7 +40,7 @@ const ItemTable = ({ itemTableData }: ItemTableProps) => { } tableData={tableData} showRowDividers={!inSearchResult} - isScrollable={!isLargerThanMobile} + isScrollable={true} my={{ base: inSearchResult ? "s" : 0, md: "s" }} data-testid={ !inSearchResult From 6f19a68e528a693172cdb77c4ab566e68d8047a8 Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Fri, 4 Oct 2024 15:00:42 -0400 Subject: [PATCH 19/28] Update changelog and package json --- CHANGELOG | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index 4f6807c9..692977b7 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -5,14 +5,14 @@ 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). -## [1.3.1] 2024-10-4 +## [1.3.2] 2024-10-4 ### Fixed - Adjust ItemTable styles according to design (SCC-4299) - Remove border and padding from eResources link as part of post-Bib page launch VQA (SCC-4299) -### Hotfix +### [1.3.1] Hotfix - Fix Table column widths on Search Results after DS 3.4.0 update (SCC-4299) diff --git a/package.json b/package.json index 549a11cf..ff371263 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "research-catalog", - "version": "1.2.1", + "version": "1.3.2", "scripts": { "dev": "next dev -p 8080", "build": "next build", From d18d5b76eb30b85860edc019ece80906f47fc1b0 Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Fri, 4 Oct 2024 15:35:57 -0400 Subject: [PATCH 20/28] Use tableTextSize instead of css font size for item table --- src/components/ItemTable/ItemTable.tsx | 1 + styles/components/ItemTable.module.scss | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ItemTable/ItemTable.tsx b/src/components/ItemTable/ItemTable.tsx index 7b31ea10..ff179613 100644 --- a/src/components/ItemTable/ItemTable.tsx +++ b/src/components/ItemTable/ItemTable.tsx @@ -22,6 +22,7 @@ const ItemTable = ({ itemTableData }: ItemTableProps) => { inSearchResult ? " " + styles.inSearchResult : "" }`} columnHeaders={tableHeadings} + tableTextSize="body2" columnStyles={ inSearchResult ? [ diff --git a/styles/components/ItemTable.module.scss b/styles/components/ItemTable.module.scss index a7431ec2..365f2e3c 100644 --- a/styles/components/ItemTable.module.scss +++ b/styles/components/ItemTable.module.scss @@ -19,7 +19,6 @@ } th { - font-size: var(--nypl-fontSizes--2); padding-top: 0; padding-bottom: var(--nypl-space-xxs); } From d8bc5d4495bf07b334f49e4032334826a6711c6d Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Fri, 4 Oct 2024 15:44:02 -0400 Subject: [PATCH 21/28] Remove font size override --- styles/components/ItemTable.module.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/styles/components/ItemTable.module.scss b/styles/components/ItemTable.module.scss index 365f2e3c..57ec2a77 100644 --- a/styles/components/ItemTable.module.scss +++ b/styles/components/ItemTable.module.scss @@ -13,11 +13,6 @@ padding-right: 0; } - td { - font-size: var(--nypl-fontSizes-desktop-body-body2); - line-height: var(--nypl-lineHeights-body-body2); - } - th { padding-top: 0; padding-bottom: var(--nypl-space-xxs); From 0a1bd33c3b20c9fdaa3327f8456c795227e5d425 Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Mon, 7 Oct 2024 09:22:48 -0400 Subject: [PATCH 22/28] initialize constructSubjectHeading util --- src/models/BibDetails.ts | 66 +++++++++++++++++++++++++++------------- 1 file changed, 45 insertions(+), 21 deletions(-) diff --git a/src/models/BibDetails.ts b/src/models/BibDetails.ts index 8c4975d9..242e4594 100644 --- a/src/models/BibDetails.ts +++ b/src/models/BibDetails.ts @@ -365,28 +365,26 @@ export default class BibDetails { buildSubjectHeadings(): SubjectHeadingDetail { if (!this.bib.subjectHeadings) return - const subjectHeadingsUrls = this.bib.subjectHeadings.map( - ({ label, uuid }) => { - if (!label || !uuid) return - const subject = label.replace(/\.$/, "") - // stackedSubjectHeadings: ["a", "a -- b", "a -- b -- c"] - const stackedSubjectHeadings = - this.constructSubjectHeadingsArray(subject) - const shepUrl = `/subject_headings/${uuid}` - // splitSubjectHeadings: ["a", "b", "c"] - const splitSubjectHeadings = subject.split(" -- ") + const subjectHeadingsUrls = this.bib.subjectHeadings.map((heading) => { + const { label, uuid } = heading + if (!label || !uuid) return + const subject = label.replace(/\.$/, "") + // stackedSubjectHeadings: ["a", "a -- b", "a -- b -- c"] + const stackedSubjectHeadings = this.constructSubjectHeadingsArray(subject) + const shepUrl = `/subject_headings/${uuid}` + // splitSubjectHeadings: ["a", "b", "c"] + const splitSubjectHeadings = subject.split(" -- ") - return splitSubjectHeadings.map((heading, index) => { - const urlWithLabelParam = `${shepUrl}?label=${encodeURI( - stackedSubjectHeadings[index] - )}` - return { - url: urlWithLabelParam, - urlLabel: heading, - } - }) - } - ) + return splitSubjectHeadings.map((heading, index) => { + const urlWithLabelParam = `${shepUrl}?label=${encodeURI( + stackedSubjectHeadings[index] + )}` + return { + url: urlWithLabelParam, + urlLabel: heading, + } + }) + }) return { label: "Subject", value: subjectHeadingsUrls, @@ -436,4 +434,30 @@ export default class BibDetails { return stackedSubjectHeading }) } + + /** + * Recurvisely create a list of subject heading links. + */ + constructSubjectHeading(heading) { + const { uuid, parent, label } = heading + let subjectComponent + + if (label) { + subjectComponent = label.split(" -- ").pop() + } + const subjectLink = { + url: this.getSubjectHeadingUrl(uuid, label), + subjectComponent: subjectComponent || null, + } + + if (!parent) { + return subjectLink + } + + return [this.constructSubjectHeading(parent), subjectLink] + } + + getSubjectHeadingUrl(uuid: string, label: string) { + return `/subject_headings/${uuid}?label=${encodeURIComponent(label)}` + } } From 51a20306d6f0bef23b854a12401dc1042103bc54 Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Mon, 7 Oct 2024 10:00:22 -0400 Subject: [PATCH 23/28] Rename subject heading conversion functions --- src/models/BibDetails.ts | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/src/models/BibDetails.ts b/src/models/BibDetails.ts index 242e4594..ec50ad5e 100644 --- a/src/models/BibDetails.ts +++ b/src/models/BibDetails.ts @@ -370,10 +370,10 @@ export default class BibDetails { if (!label || !uuid) return const subject = label.replace(/\.$/, "") // stackedSubjectHeadings: ["a", "a -- b", "a -- b -- c"] - const stackedSubjectHeadings = this.constructSubjectHeadingsArray(subject) - const shepUrl = `/subject_headings/${uuid}` + const stackedSubjectHeadings = this.constructSubjectHeadingsArray(heading) // splitSubjectHeadings: ["a", "b", "c"] const splitSubjectHeadings = subject.split(" -- ") + const shepUrl = "" return splitSubjectHeadings.map((heading, index) => { const urlWithLabelParam = `${shepUrl}?label=${encodeURI( @@ -398,7 +398,7 @@ export default class BibDetails { subject = subject.replace(/\.$/, "") // stackedSubjectHeadings: ["a", "a -- b", "a -- b -- c"] const stackedSubjectHeadings = - this.constructSubjectHeadingsArray(subject) + this.constructSubjectLiteralsArray(subject) const filterQueryForSubjectHeading = "/search?filters[subjectLiteral]=" // splitSubjectHeadings: ["a", "b", "c"] const splitSubjectHeadings = subject.split(" -- ") @@ -419,9 +419,9 @@ export default class BibDetails { } } - constructSubjectHeadingsArray(subject: string) { + constructSubjectLiteralsArray(subject: string) { // subject = "Italian food -- Spaghetti" - let stackedSubjectHeading = "" + let stackedSubjectLiteral = "" return subject .split(" -- ") // ["Italian food", "spaghetti"] @@ -429,17 +429,18 @@ export default class BibDetails { const dashDivided = index !== 0 ? " -- " : "" // First iteration "Italian food" // Second iteration "Italian food -- spaghetti" - stackedSubjectHeading = `${stackedSubjectHeading}${dashDivided}${urlString}` + stackedSubjectLiteral = `${stackedSubjectLiteral}${dashDivided}${urlString}` - return stackedSubjectHeading + return stackedSubjectLiteral }) } /** - * Recurvisely create a list of subject heading links. + * Flatten subject headings into a list of objects with a url and a label */ - constructSubjectHeading(heading) { + constructSubjectHeadingsArray(heading) { const { uuid, parent, label } = heading + let subjectHeadingsArray = [] let subjectComponent if (label) { @@ -451,10 +452,11 @@ export default class BibDetails { } if (!parent) { - return subjectLink + subjectHeadingsArray.push(subjectLink) + return subjectHeadingsArray } - return [this.constructSubjectHeading(parent), subjectLink] + return [this.constructSubjectHeadingsArray(parent)].concat(subjectLink) } getSubjectHeadingUrl(uuid: string, label: string) { From 7512d59567768c978c98539a5512bc0089ef53e1 Mon Sep 17 00:00:00 2001 From: Vera Kahn Date: Mon, 7 Oct 2024 12:10:11 -0400 Subject: [PATCH 24/28] rm extra base_url --- src/components/BibPage/BibDetail.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/BibPage/BibDetail.tsx b/src/components/BibPage/BibDetail.tsx index c331eacb..6c0ae57e 100644 --- a/src/components/BibPage/BibDetail.tsx +++ b/src/components/BibPage/BibDetail.tsx @@ -127,9 +127,10 @@ const LinkElement = (url: Url, linkType: string) => { return ( {url.urlLabel} From 91d9b57435ea9a27d292cd273ce58d6e0a81356e Mon Sep 17 00:00:00 2001 From: Vera Kahn Date: Mon, 7 Oct 2024 12:11:52 -0400 Subject: [PATCH 25/28] update changelog --- CHANGELOG | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG b/CHANGELOG index 86763357..de447698 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Hotfix - Fix Table column widths on Search Results after DS 3.4.0 update (SCC-4299) +- Remove base url from finding aid urls ## [1.3.0] 2024-10-3 From e9cbbd7ea09776edfe5e7df827bfec0669ef0735 Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Mon, 7 Oct 2024 13:21:04 -0400 Subject: [PATCH 26/28] Iterate through subject headings that have parent elements --- src/components/BibPage/BibDetail.tsx | 43 +++++++------ src/models/BibDetails.ts | 78 +++++++++++------------- src/models/modelTests/BibDetails.test.ts | 10 +-- src/types/bibDetailsTypes.ts | 6 +- 4 files changed, 66 insertions(+), 71 deletions(-) diff --git a/src/components/BibPage/BibDetail.tsx b/src/components/BibPage/BibDetail.tsx index c331eacb..e505d335 100644 --- a/src/components/BibPage/BibDetail.tsx +++ b/src/components/BibPage/BibDetail.tsx @@ -7,7 +7,7 @@ import RCLink from "../Links/RCLink/RCLink" import ExternalLink from "../Links/ExternalLink/ExternalLink" import type { BibDetail, - Url, + BibDetailURL, LinkedBibDetail, SubjectHeadingDetail, AnyBibDetail, @@ -77,7 +77,7 @@ const PlainTextElement = (field: BibDetail) => { const CompoundSubjectHeadingElement = (field: SubjectHeadingDetail) => { const subjectHeadingLinksPerSubject = field.value.map( - (subjectHeadingUrls: Url[]) => { + (subjectHeadingUrls: BibDetailURL[]) => { return SingleSubjectHeadingElement(subjectHeadingUrls) } ) @@ -89,27 +89,30 @@ const CompoundSubjectHeadingElement = (field: SubjectHeadingDetail) => { return DetailElement(field.label, values) } -const SingleSubjectHeadingElement = (subjectHeadingUrls: Url[]) => { - return subjectHeadingUrls.reduce((linksPerSubject, url: Url, index) => { - const divider = ( - // this span will render as > in between the divided subject heading links - - {" "} - >{" "} - - ) - const link = LinkElement(url, "internal") - linksPerSubject.push(link) - if (!isItTheLastElement(index, subjectHeadingUrls)) { - linksPerSubject.push(divider) - } - return linksPerSubject - }, [] as ReactElement[]) +const SingleSubjectHeadingElement = (subjectHeadingUrls: BibDetailURL[]) => { + return subjectHeadingUrls.reduce( + (linksPerSubject, url: BibDetailURL, index) => { + const divider = ( + // this span will render as > in between the divided subject heading links + + {" "} + >{" "} + + ) + const link = LinkElement(url, "internal") + linksPerSubject.push(link) + if (!isItTheLastElement(index, subjectHeadingUrls)) { + linksPerSubject.push(divider) + } + return linksPerSubject + }, + [] as ReactElement[] + ) } const LinkedDetailElement = (field: LinkedBibDetail) => { const internalOrExternal = field.link - const values = field.value.map((urlInfo: Url, i) => { + const values = field.value.map((urlInfo: BibDetailURL, i) => { return (
  • {LinkElement(urlInfo, internalOrExternal)} @@ -119,7 +122,7 @@ const LinkedDetailElement = (field: LinkedBibDetail) => { return DetailElement(field.label, values) } -const LinkElement = (url: Url, linkType: string) => { +const LinkElement = (url: BibDetailURL, linkType: string) => { let Link: typeof RCLink | typeof ExternalLink if (linkType === "internal") Link = RCLink else if (linkType === "external") Link = ExternalLink diff --git a/src/models/BibDetails.ts b/src/models/BibDetails.ts index ec50ad5e..d6a49596 100644 --- a/src/models/BibDetails.ts +++ b/src/models/BibDetails.ts @@ -1,4 +1,8 @@ -import type { DiscoveryBibResult, Note } from "../types/bibTypes" +import type { + DiscoveryBibResult, + Note, + SubjectHeading, +} from "../types/bibTypes" import type { LinkedBibDetail, BibDetail, @@ -365,30 +369,16 @@ export default class BibDetails { buildSubjectHeadings(): SubjectHeadingDetail { if (!this.bib.subjectHeadings) return - const subjectHeadingsUrls = this.bib.subjectHeadings.map((heading) => { - const { label, uuid } = heading - if (!label || !uuid) return - const subject = label.replace(/\.$/, "") - // stackedSubjectHeadings: ["a", "a -- b", "a -- b -- c"] - const stackedSubjectHeadings = this.constructSubjectHeadingsArray(heading) - // splitSubjectHeadings: ["a", "b", "c"] - const splitSubjectHeadings = subject.split(" -- ") - const shepUrl = "" - - return splitSubjectHeadings.map((heading, index) => { - const urlWithLabelParam = `${shepUrl}?label=${encodeURI( - stackedSubjectHeadings[index] - )}` - return { - url: urlWithLabelParam, - urlLabel: heading, - } - }) - }) - return { - label: "Subject", - value: subjectHeadingsUrls, - } + const subjectHeadingsUrls = this.bib.subjectHeadings.map((heading) => + this.flattenSubjectHeadingUrls(heading) + ) + + return ( + subjectHeadingsUrls?.length && { + label: "Subject", + value: subjectHeadingsUrls, + } + ) } buildSubjectLiterals(): SubjectHeadingDetail { @@ -438,28 +428,30 @@ export default class BibDetails { /** * Flatten subject headings into a list of objects with a url and a label */ - constructSubjectHeadingsArray(heading) { - const { uuid, parent, label } = heading - let subjectHeadingsArray = [] - let subjectComponent + flattenSubjectHeadingUrls(heading): Url[] | null { + if (!heading.label || !heading.uuid) return null + const subjectHeadingsArray = [] - if (label) { - subjectComponent = label.split(" -- ").pop() - } - const subjectLink = { - url: this.getSubjectHeadingUrl(uuid, label), - subjectComponent: subjectComponent || null, - } + // iterate through each nested subject until there's no parent element + let currentHeading = heading - if (!parent) { - subjectHeadingsArray.push(subjectLink) - return subjectHeadingsArray + while (currentHeading.parent) { + subjectHeadingsArray.unshift( + this.getSubjectHeadingUrl(currentHeading.uuid, currentHeading.label) + ) + currentHeading = currentHeading.parent } - - return [this.constructSubjectHeadingsArray(parent)].concat(subjectLink) + // add the top level subject heading + subjectHeadingsArray.unshift( + this.getSubjectHeadingUrl(currentHeading.uuid, currentHeading.label) + ) + return subjectHeadingsArray } - getSubjectHeadingUrl(uuid: string, label: string) { - return `/subject_headings/${uuid}?label=${encodeURIComponent(label)}` + getSubjectHeadingUrl(uuid: string, label: string): Url { + return { + url: `/subject_headings/${uuid}?label=${encodeURIComponent(label)}`, + urlLabel: label.split(" -- ").pop(), + } } } diff --git a/src/models/modelTests/BibDetails.test.ts b/src/models/modelTests/BibDetails.test.ts index 69fe697c..773426c8 100644 --- a/src/models/modelTests/BibDetails.test.ts +++ b/src/models/modelTests/BibDetails.test.ts @@ -63,25 +63,25 @@ describe("Bib model", () => { value: [ [ { - url: "/subject_headings/74746d11-638b-4cfb-a72a-9a2bd296e6fd?label=Cortanze,%20G%C3%A9rard%20de", + url: "/subject_headings/cf347108-e1f2-4c0f-808a-ac4ace2f0765?label=Cortanze%2C%20G%C3%A9rard%20de", urlLabel: "Cortanze, GĂ©rard de", }, { - url: "/subject_headings/74746d11-638b-4cfb-a72a-9a2bd296e6fd?label=Cortanze,%20G%C3%A9rard%20de%20--%20Childhood%20and%20youth", + url: "/subject_headings/74746d11-638b-4cfb-a72a-9a2bd296e6fd?label=Cortanze%2C%20G%C3%A9rard%20de%20--%20Childhood%20and%20youth", urlLabel: "Childhood and youth", }, ], [ { - url: "/subject_headings/9391bc26-e44c-44ac-98cc-e3800da51926?label=Authors,%20French", + url: "/subject_headings/5fd065df-b4e9-48cb-b13c-ea15f36b96b4?label=Authors%2C%20French", urlLabel: "Authors, French", }, { - url: "/subject_headings/9391bc26-e44c-44ac-98cc-e3800da51926?label=Authors,%20French%20--%2020th%20century", + url: "/subject_headings/e43674a7-5f02-44f1-95cd-dbcc776331b7?label=Authors%2C%20French%20--%2020th%20century", urlLabel: "20th century", }, { - url: "/subject_headings/9391bc26-e44c-44ac-98cc-e3800da51926?label=Authors,%20French%20--%2020th%20century%20--%20Biography", + url: "/subject_headings/9391bc26-e44c-44ac-98cc-e3800da51926?label=Authors%2C%20French%20--%2020th%20century%20--%20Biography", urlLabel: "Biography", }, ], diff --git a/src/types/bibDetailsTypes.ts b/src/types/bibDetailsTypes.ts index f4898b1f..ed7453e8 100644 --- a/src/types/bibDetailsTypes.ts +++ b/src/types/bibDetailsTypes.ts @@ -1,7 +1,7 @@ export type AnyBibDetail = BibDetail | LinkedBibDetail | SubjectHeadingDetail export interface SubjectHeadingDetail { - value: Url[][] + value: BibDetailURL[][] label: string } @@ -13,7 +13,7 @@ export interface BibDetail { } export interface LinkedBibDetail { - value: Url[] + value: BibDetailURL[] // label is the formatted name of the field, such as "Author" label: string // indicates if a linked bib detail is internal, like a link to a creator @@ -21,7 +21,7 @@ export interface LinkedBibDetail { link?: "internal" | "external" } -export interface Url { +export interface BibDetailURL { url: string urlLabel: string } From 8c924b92f8ad303a89855e08368f30bee4073292 Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Mon, 7 Oct 2024 13:24:14 -0400 Subject: [PATCH 27/28] Change Url to BibDetailURL in BibModel --- src/models/BibDetails.ts | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/src/models/BibDetails.ts b/src/models/BibDetails.ts index d6a49596..6d5cb15a 100644 --- a/src/models/BibDetails.ts +++ b/src/models/BibDetails.ts @@ -1,14 +1,10 @@ -import type { - DiscoveryBibResult, - Note, - SubjectHeading, -} from "../types/bibTypes" +import type { DiscoveryBibResult, Note } from "../types/bibTypes" import type { LinkedBibDetail, BibDetail, FieldMapping, AnnotatedMarcField, - Url, + BibDetailURL, SubjectHeadingDetail, AnnotatedMarc, AnyBibDetail, @@ -211,7 +207,10 @@ export default class BibDetails { } } - buildExternalLinkedDetail(label: string, values: Url[]): LinkedBibDetail { + buildExternalLinkedDetail( + label: string, + values: BibDetailURL[] + ): LinkedBibDetail { if (!values.length) return null return { link: "external", @@ -428,7 +427,7 @@ export default class BibDetails { /** * Flatten subject headings into a list of objects with a url and a label */ - flattenSubjectHeadingUrls(heading): Url[] | null { + flattenSubjectHeadingUrls(heading): BibDetailURL[] | null { if (!heading.label || !heading.uuid) return null const subjectHeadingsArray = [] @@ -448,7 +447,7 @@ export default class BibDetails { return subjectHeadingsArray } - getSubjectHeadingUrl(uuid: string, label: string): Url { + getSubjectHeadingUrl(uuid: string, label: string): BibDetailURL { return { url: `/subject_headings/${uuid}?label=${encodeURIComponent(label)}`, urlLabel: label.split(" -- ").pop(), From 61ad76cc0e7c1e5cef57544cd20cccc13be30cdd Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Mon, 7 Oct 2024 13:26:20 -0400 Subject: [PATCH 28/28] Update changelog --- CHANGELOG | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index 80b1a6a0..89076029 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -5,17 +5,18 @@ 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). -## [1.3.2] 2024-10-4 +## [1.3.2] 2024-10-7 ### Fixed - Adjust ItemTable styles according to design (SCC-4299) - Remove border and padding from eResources link as part of post-Bib page launch VQA (SCC-4299) +- Remove base url from finding aid urls (SCC-4306) +- Fix incorrect subject heading urls in Bib Details (SCC-4305) ### [1.3.1] Hotfix - Fix Table column widths on Search Results after DS 3.4.0 update (SCC-4299) -- Remove base url from finding aid urls ## [1.3.0] 2024-10-3