From 1b8080cd83c68064af3d7d3c65accaf8c611317e Mon Sep 17 00:00:00 2001 From: Jackie Quach Date: Wed, 27 Sep 2023 16:37:52 -0400 Subject: [PATCH 1/2] replace DrbTemplate with TemplateAppContainer --- CHANGELOG.md | 2 +- src/components/About/About.tsx | 201 +++++------ .../AdvancedSearch/AdvancedSearch.tsx | 240 ++++++------- src/components/Collection/Collection.tsx | 144 ++++---- src/components/DrbBreakout/DrbBreakout.tsx | 35 ++ src/components/DrbTemplate/DrbTemplate.tsx | 88 ----- src/components/EditionDetail/Edition.tsx | 250 ++++++------- src/components/Landing/Landing.tsx | 63 ++-- src/components/License/License.tsx | 325 +++++++++-------- src/components/Search/Search.tsx | 332 +++++++++--------- src/components/Work/Work.tsx | 252 ++++++------- 11 files changed, 944 insertions(+), 988 deletions(-) create mode 100644 src/components/DrbBreakout/DrbBreakout.tsx delete mode 100644 src/components/DrbTemplate/DrbTemplate.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 5aff475b..9ef006d0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,7 +5,7 @@ - Fix: Small adjustments to Playwright tests - Upgrade testing-library packages to v14 and jest to v29 - Remove TemplateFooter components -- Replace Template components with custom DrbTemplate component to reduce repeat components +- Replace Template components with TemplateAppContainer and DrbBreakout to reduce repeat components - Upgrade to NYPL Design System 1.7.3 ## [0.17.4] diff --git a/src/components/About/About.tsx b/src/components/About/About.tsx index 88de74d4..dc6d981a 100644 --- a/src/components/About/About.tsx +++ b/src/components/About/About.tsx @@ -1,115 +1,118 @@ import React from "react"; -import { Heading } from "@nypl/design-system-react-components"; +import { + Heading, + TemplateAppContainer, +} from "@nypl/design-system-react-components"; import Link from "../Link/Link"; -import DrbTemplate, { - DrbBreakout, - DrbContent, - DrbContentPrimary, -} from "../DrbTemplate/DrbTemplate"; +import DrbBreakout from "../DrbBreakout/DrbBreakout"; const About: React.FC = () => { - return ( - - - - - - - - Digital Research Books - {" "} - Beta - - + const breakoutElement = ( + + ); + + const contentPrimaryElement = ( + <> + + + + Digital Research Books + {" "} + Beta + + -

- Digital Research Books Beta is an experimental project, now in early - Beta testing, that collects digital versions of research books from - many different sources, including Open Access publications, into one - convenient place to search. -

+

+ Digital Research Books Beta is an experimental project, now in early + Beta testing, that collects digital versions of research books from many + different sources, including Open Access publications, into one + convenient place to search. +

-

- All the materials in Digital Research Books Beta are completely free - to read and most of them you can download and keep, with no library - card required. The books are either in the{" "} - public domain, with no restrictions on - your use of them, or under{" "} - Creative Commons licences that may have - some conditions, but only on redistribution or adaptation. -

+

+ All the materials in Digital Research Books Beta are completely free to + read and most of them you can download and keep, with no library card + required. The books are either in the{" "} + public domain, with no restrictions on your + use of them, or under{" "} + Creative Commons licences that may have some + conditions, but only on redistribution or adaptation. +

-

- In addition to collecting these digital editions, we group all the - editions of the same title together as a single “work.” For instance - there are many editions of{" "} - - Mary Wollstonecraft’s A Vindication of the Rights of Woman - - , many of them available digitally. We group them all together under - a single search result and try to make the differences between - them--years when and places where they were published, for - instance--easy to understand. -

+

+ In addition to collecting these digital editions, we group all the + editions of the same title together as a single “work.” For instance + there are many editions of{" "} + + Mary Wollstonecraft’s A Vindication of the Rights of Woman + + , many of them available digitally. We group them all together under a + single search result and try to make the differences between them--years + when and places where they were published, for instance--easy to + understand. +

- + -

- The material in Digital Research Books Beta are drawn from several - public sources, mainly{" "} - HathiTrust,{" "} - - The Directory of Open Access Books - - , and Project Gutenberg. - We are continuously adding more books from these and other sources. - We then cross-reference them with library records from NYPL and{" "} - WorldCat, using OCLC’s - experimental{" "} - Classify to - make connections between different editions of the same work. -

+

+ The material in Digital Research Books Beta are drawn from several + public sources, mainly{" "} + HathiTrust,{" "} + + The Directory of Open Access Books + + , and Project Gutenberg. We + are continuously adding more books from these and other sources. We then + cross-reference them with library records from NYPL and{" "} + WorldCat, using OCLC’s + experimental{" "} + Classify to make + connections between different editions of the same work. +

- + -

- It means that this is a work-in-progress. We are constantly working - on the interface and trying new ideas to deal with the data. If you - visit repeatedly, sometimes it may look different. If you search for - the same thing often, the results may change--hopefully for the - better as we refine how the search works. There may be errors. The - cross-referencing is automated and based on millions of library - records including some that are inaccurate. Part of what we are - exploring is how to detect and adjust mistakes, and how to make sure - we don’t introduce any new ones. -

+

+ It means that this is a work-in-progress. We are constantly working on + the interface and trying new ideas to deal with the data. If you visit + repeatedly, sometimes it may look different. If you search for the same + thing often, the results may change--hopefully for the better as we + refine how the search works. There may be errors. The cross-referencing + is automated and based on millions of library records including some + that are inaccurate. Part of what we are exploring is how to detect and + adjust mistakes, and how to make sure we don’t introduce any new ones. +

-

- It also means that the project may change radically. We may change - the URL. We may learn that a different approach is necessary. We may - learn that it isn’t useful enough to anyone to continue. If you find - books in Digital Research Books Beta that are especially useful to - you, you should download a copy so that you have one no matter what - becomes of this project. -

+

+ It also means that the project may change radically. We may change the + URL. We may learn that a different approach is necessary. We may learn + that it isn’t useful enough to anyone to continue. If you find books in + Digital Research Books Beta that are especially useful to you, you + should download a copy so that you have one no matter what becomes of + this project. +

-

- Most of all, it means your feedback is important! Most pages have a - feedback button in the bottom right corner. We want to know what you - think. If there are things you like or dislike, if there’s a feature - missing, if you find an error please tell us in the feedback! -

- - - +

+ Most of all, it means your feedback is important! Most pages have a + feedback button in the bottom right corner. We want to know what you + think. If there are things you like or dislike, if there’s a feature + missing, if you find an error please tell us in the feedback! +

+ + ); + return ( + ); }; diff --git a/src/components/AdvancedSearch/AdvancedSearch.tsx b/src/components/AdvancedSearch/AdvancedSearch.tsx index d97540db..a18757cb 100644 --- a/src/components/AdvancedSearch/AdvancedSearch.tsx +++ b/src/components/AdvancedSearch/AdvancedSearch.tsx @@ -27,6 +27,7 @@ import { FormRow, Heading, HelperErrorText, + TemplateAppContainer, TextInput, } from "@nypl/design-system-react-components"; import LanguageAccordion from "../LanguageAccordion/LanguageAccordion"; @@ -36,12 +37,7 @@ import { toLocationQuery, toApiQuery } from "~/src/util/apiConversion"; import filterFields from "~/src/constants/filters"; import { ApiLanguageResponse } from "~/src/types/LanguagesQuery"; import { trackCtaClick } from "~/src/lib/Analytics"; -import DrbTemplate, { - DrbBreakout, - DrbContent, - DrbContentPrimary, - DrbContentTop, -} from "../DrbTemplate/DrbTemplate"; +import DrbBreakout from "../DrbBreakout/DrbBreakout"; const AdvancedSearch: React.FC<{ languages: ApiLanguageResponse; @@ -196,122 +192,126 @@ const AdvancedSearch: React.FC<{ setGovDocFilter({ field: filterFields.govDoc, value: "all" }); } }; - return ( - - - - - Advanced Search - {emptySearchError && ( - - )} - {dateRangeError && ( - - )} - - -
- {/* Search Terms */} - {inputTermRows.map( - (inputTerms: { key: string; label: string }[], i: number) => { + + const breakoutElement = ( + + ); + + const contentTopElement = ( + <> + Advanced Search + {emptySearchError && ( + + )} + {dateRangeError && ( + + )} + + ); + + const contentPrimaryElement = ( + + {/* Search Terms */} + {inputTermRows.map( + (inputTerms: { key: string; label: string }[], i: number) => { + return ( + + {inputTerms.map((field: { key: string; label: string }) => { return ( - - {inputTerms.map((field: { key: string; label: string }) => { - return ( - - onQueryChange(e, field.key)} - showLabel - type="text" - /> - - ); - })} - + + onQueryChange(e, field.key)} + showLabel + type="text" + /> + ); - } - )} - - { - onGovDocChange(e); - }} - isChecked={ - !!govDocFilter && govDocFilter.value === "onlyGovDoc" - } - /> - - - {languages && languages.length > 0 && ( - - onLanguageChange(e, language) - } - /> - )} - - - , - isStart: boolean - ) => { - onDateChange(e, isStart); - }} - /> - - - { - onBookFormatChange(e, format); - }} - /> - - - - - - - - -
- - + })} + + ); + } + )} + + { + onGovDocChange(e); + }} + isChecked={!!govDocFilter && govDocFilter.value === "onlyGovDoc"} + /> + + + {languages && languages.length > 0 && ( + onLanguageChange(e, language)} + /> + )} + + + , + isStart: boolean + ) => { + onDateChange(e, isStart); + }} + /> + + + { + onBookFormatChange(e, format); + }} + /> + + + + + + + + + ); + return ( + ); }; diff --git a/src/components/Collection/Collection.tsx b/src/components/Collection/Collection.tsx index 8e409d84..e7b7ae1b 100644 --- a/src/components/Collection/Collection.tsx +++ b/src/components/Collection/Collection.tsx @@ -7,6 +7,7 @@ import { HorizontalRule, Pagination, SimpleGrid, + TemplateAppContainer, } from "@nypl/design-system-react-components"; import { collectionSortMap } from "~/src/constants/sorts"; import { @@ -26,13 +27,7 @@ import { useRouter } from "next/router"; import Loading from "~/src/components/Loading/Loading"; import DrbHero from "../DrbHero/DrbHero"; import { CollectionItem } from "./CollectionItem"; -import DrbTemplate, { - DrbBreakout, - DrbContent, - DrbContentPrimary, - DrbContentTop, - DrbHeader, -} from "../DrbTemplate/DrbTemplate"; +import DrbBreakout from "../DrbBreakout/DrbBreakout"; const Collection: React.FC<{ collectionQuery: CollectionQuery; @@ -126,72 +121,77 @@ const Collection: React.FC<{ setCollectionQuery(newCollectionQuery); sendCollectionQuery(newCollectionQuery); }; - return ( - - - - - - - - - - {`Collection - ${title}`} - - - About this collection - - {description} - - - - In this collection - - - {totalItems > 0 - ? `Viewing ${firstElement.toLocaleString()} - ${ - totalItems < lastElement - ? totalItems.toLocaleString() - : lastElement.toLocaleString() - } of ${totalItems.toLocaleString()} items` - : "Viewing 0 items"} - -
- onChangePerPage(e)} - onChangeSort={(e) => onChangeSort(e)} - /> - -
- - {publications.map((pub, c) => { - return ( - - ); - })} - - onPageChange(e)} - __css={{ paddingTop: "m" }} + + const breakoutElement = ( + + + + ); + + const contentTopElement = ( + <> + + {`Collection - ${title}`} + + + About this collection + + {description} + + ); + + const contentPrimaryElement = ( + <> + + In this collection + + + {totalItems > 0 + ? `Viewing ${firstElement.toLocaleString()} - ${ + totalItems < lastElement + ? totalItems.toLocaleString() + : lastElement.toLocaleString() + } of ${totalItems.toLocaleString()} items` + : "Viewing 0 items"} + +
+ onChangePerPage(e)} + onChangeSort={(e) => onChangeSort(e)} /> - - - + +
+ + {publications.map((pub, c) => { + return ( + + ); + })} + + onPageChange(e)} + __css={{ paddingTop: "m" }} + /> + + ); + return ( + ); }; diff --git a/src/components/DrbBreakout/DrbBreakout.tsx b/src/components/DrbBreakout/DrbBreakout.tsx new file mode 100644 index 00000000..13413410 --- /dev/null +++ b/src/components/DrbBreakout/DrbBreakout.tsx @@ -0,0 +1,35 @@ +import { Breadcrumbs } from "@nypl/design-system-react-components"; +import { BreadcrumbsDataProps } from "@nypl/design-system-react-components/dist/src/components/Breadcrumbs/Breadcrumbs"; +import React from "react"; +import { defaultBreadcrumbs } from "~/src/constants/labels"; + +const DrbBreakout: React.FC<{ + children?: React.ReactNode; + breadcrumbsData?: BreadcrumbsDataProps[]; +}> = ({ children, breadcrumbsData }) => { + return ( + <> + + {children} + + ); +}; + +const DrbBreadcrumbs: React.FC<{ breadcrumbsData: BreadcrumbsDataProps[] }> = ( + props +) => { + const { breadcrumbsData } = props; + + const breadcrumbsDataAll = breadcrumbsData + ? [...defaultBreadcrumbs, ...breadcrumbsData] + : defaultBreadcrumbs; + + return ( + + ); +}; + +export default DrbBreakout; diff --git a/src/components/DrbTemplate/DrbTemplate.tsx b/src/components/DrbTemplate/DrbTemplate.tsx deleted file mode 100644 index 4a05b26a..00000000 --- a/src/components/DrbTemplate/DrbTemplate.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import { - Breadcrumbs, - Template, - TemplateBreakout, - TemplateContent, - TemplateContentPrimary, - TemplateContentSidebar, - TemplateContentTop, - TemplateHeader, -} from "@nypl/design-system-react-components"; -import { BreadcrumbsDataProps } from "@nypl/design-system-react-components/dist/src/components/Breadcrumbs/Breadcrumbs"; -import React from "react"; -import { defaultBreadcrumbs } from "~/src/constants/labels"; - -const DrbBreakout: React.FC<{ - children?: React.ReactNode; - breadcrumbsData?: BreadcrumbsDataProps[]; -}> = ({ children, breadcrumbsData }) => { - return ( - - - {children} - - ); -}; - -const DrbBreadcrumbs: React.FC<{ breadcrumbsData: BreadcrumbsDataProps[] }> = ( - props -) => { - const { breadcrumbsData } = props; - - const breadcrumbsDataAll = breadcrumbsData - ? [...defaultBreadcrumbs, ...breadcrumbsData] - : defaultBreadcrumbs; - - return ( - - ); -}; - -const DrbHeader: React.FC<{ children: React.ReactNode }> = ({ children }) => { - return {children}; -}; - -const DrbContent: React.FC<{ - children: React.ReactNode; - sidebar?: "left" | "right" | "none"; -}> = ({ children, sidebar }) => { - return {children}; -}; - -const DrbContentTop: React.FC<{ children: React.ReactNode }> = ({ - children, -}) => { - return {children}; -}; - -const DrbContentSidebar: React.FC<{ children: React.ReactNode }> = ({ - children, -}) => { - return {children}; -}; - -const DrbContentPrimary: React.FC<{ children: React.ReactNode }> = ({ - children, -}) => { - return {children}; -}; - -export const DrbTemplate: React.FC<{ children: React.ReactNode }> = ({ - children, -}) => { - return ; -}; - -export { - DrbBreakout, - DrbHeader, - DrbContent, - DrbContentTop, - DrbContentSidebar, - DrbContentPrimary, -}; - -export default DrbTemplate; diff --git a/src/components/EditionDetail/Edition.tsx b/src/components/EditionDetail/Edition.tsx index a2bc6e4c..4bbdcd96 100644 --- a/src/components/EditionDetail/Edition.tsx +++ b/src/components/EditionDetail/Edition.tsx @@ -10,6 +10,7 @@ import { Heading, HorizontalRule, SimpleGrid, + TemplateAppContainer, Text, Toggle, } from "@nypl/design-system-react-components"; @@ -28,13 +29,7 @@ import { MAX_TITLE_LENGTH } from "~/src/constants/editioncard"; import { Instance } from "~/src/types/DataModel"; import EditionCardUtils from "~/src/util/EditionCardUtils"; import { PLACEHOLDER_LINK } from "~/src/constants/collection"; -import DrbTemplate, { - DrbBreakout, - DrbContent, - DrbContentPrimary, - DrbContentTop, - DrbHeader, -} from "../DrbTemplate/DrbTemplate"; +import DrbBreakout from "../DrbBreakout/DrbBreakout"; const Edition: React.FC<{ editionResult: EditionResult; backUrl?: string }> = ( props @@ -76,127 +71,134 @@ const Edition: React.FC<{ editionResult: EditionResult; backUrl?: string }> = ( }); }; - return ( - - - - - - - - - - {edition && ( - - - {edition.work_title} - - - )} - {props.backUrl && ( - - Back to search results - - )} - - {edition.sub_title && {edition.sub_title}} - {authorsList && authorsList.length && ( - By {joinArrayOfElements(authorsList, "")} - )} - - {featuredInstance && ( - <> - Featured Copy + const breakoutElement = ( + + + + ); - - - - - )} - - {edition.inCollections && edition.inCollections.length > 0 && ( - + + {edition && ( + + + {edition.work_title} + + + )} + {props.backUrl && ( + + Back to search results + + )} + + {edition.sub_title && {edition.sub_title}} + {authorsList && authorsList.length && ( + By {joinArrayOfElements(authorsList, "")} + )} + + {featuredInstance && ( + <> + Featured Copy + + + + + + )} + + {edition.inCollections && edition.inCollections.length > 0 && ( + + + + Part of Collection + + + {edition.inCollections[0].title} + + + + {edition.inCollections[0].description} + + + - - - Part of Collection - - - {edition.inCollections[0].title} - - - - {edition.inCollections[0].description} - - - - Browse Collection - - - - )} - - - - - {edition.instances && ( - - All Copies + Browse Collection + + + + )} + + ); + + const contentPrimaryElement = ( + <> + + + {edition.instances && ( + + All Copies - ) => - toggleShowAll(e) - } - id="show-all-toggle" - /> - - )} - - {edition.instances.map((instance) => ( - - ))} - - - - + ) => + toggleShowAll(e) + } + id="show-all-toggle" + /> + + )} + + {edition.instances.map((instance) => ( + + ))} + + + ); + return ( + ); }; diff --git a/src/components/Landing/Landing.tsx b/src/components/Landing/Landing.tsx index cf593043..f49a15ae 100644 --- a/src/components/Landing/Landing.tsx +++ b/src/components/Landing/Landing.tsx @@ -4,18 +4,14 @@ import { Heading, Hero, Link, + TemplateAppContainer, useNYPLBreakpoints, } from "@nypl/design-system-react-components"; import SearchForm from "~/src/components/SearchForm/SearchForm"; import CollectionList from "../CollectionList/CollectionList"; import { Opds2Feed } from "~/src/types/OpdsModel"; import DrbHero from "../DrbHero/DrbHero"; -import DrbTemplate, { - DrbBreakout, - DrbContent, - DrbContentPrimary, - DrbHeader, -} from "../DrbTemplate/DrbTemplate"; +import DrbBreakout from "../DrbBreakout/DrbBreakout"; const LandingPage: React.FC<{ collections?: Opds2Feed }> = ({ collections, @@ -66,34 +62,35 @@ const LandingPage: React.FC<{ collections?: Opds2Feed }> = ({ "https://drb-files-qa.s3.amazonaws.com/hero/heroMobile.jpg"; } + const breakoutElement = ( + + + + Search the World's Research Collections + + } + subHeaderText={subHeader} + /> + + ); + + const contentPrimaryElement = ( + + Recently Added Collections + + + ); return ( - - - - - - Search the World's Research Collections - - } - subHeaderText={subHeader} - /> - - - - - - Recently Added Collections - - - - - + ); }; diff --git a/src/components/License/License.tsx b/src/components/License/License.tsx index fdd5dc7f..e7bf8afb 100644 --- a/src/components/License/License.tsx +++ b/src/components/License/License.tsx @@ -1,172 +1,171 @@ /* eslint-disable max-len */ import React from "react"; -import { Heading, List } from "@nypl/design-system-react-components"; +import { + Heading, + List, + TemplateAppContainer, +} from "@nypl/design-system-react-components"; import Link from "../Link/Link"; -import DrbTemplate, { - DrbBreakout, - DrbContent, - DrbContentPrimary, -} from "../DrbTemplate/DrbTemplate"; +import DrbBreakout from "../DrbBreakout/DrbBreakout"; const License: React.FC = () => { + const breakoutElement = ( + + ); + const contentPrimaryElement = ( + <> + License Explanations + Public Domain +

+ Works in the public domain have no copyright (in most cases because the + copyright term has expired) and you are free to use, adapt, share, and + distribute the work in any way you wish. +

+ Public Domain (US Only) +

+ Works may be in the public domain in the Unites States (where you can + use and distribute them without restriction), but still subject to + copyright laws and restrictions outside the United States. +

+ Creative Commons Licenses +

+ Creative Commons licenses{" "} + allow rights-holders to grant people the right to freely use their + creations in certain ways and perhaps by meeting certain requirements. + There are several licenses with different combinations of four basic + clauses: +

+ +
BY
+ +
+ Attribution — You must give appropriate credit, provide a link to the + license, and indicate if changes were made. You may do so in any + reasonable manner, but not in any way that suggests the licensor + endorses you or your use. +
+ +
NC
+ +
+ NonCommercial — You may not use the material for commercial purposes.{" "} +
+ +
ND
+ +
+ NoDerivatives — If you remix, transform, or build upon the material, + you may not distribute the modified material. +
+ +
SA
+ +
+ ShareAlike — If you remix, transform, or build upon the material, you + must distribute your contributions under the same license as the + original. +
+ +

+ The following Creative Commons licenses are applied to materials in + Digital Research Books Beta. Refer to linked license descriptions for + specifics: +

+ +
  • + + Attribution 3.0 Unported (CC BY 3.0) + +
    • + +
  • + + Attribution 4.0 International (CC BY 4.0) + +
    • + +
  • + + Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) + +
    • + +
  • + + Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) + +
    • + +
  • + + Attribution-NoDerivs 3.0 Unported (CC BY-ND 3.0) + +
    • + +
  • + + Attribution-NoDerivatives 4.0 International (CC BY-ND 4.0) + +
    • + +
  • + + Attribution-NonCommercial 4.0 International (CC BY-NC 4.0) + +
    • + +
  • + + Attribution-NonCommercial-ShareAlike 3.0 Unported (CC BY-NC-SA 3.0) + +
    • + +
  • + + Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA + 4.0) + +
    • + +
  • + + Attribution-NonCommercial-NoDerivs 3.0 Unported (CC BY-NC-ND 3.0) + +
    • + +
  • + + Attribution-NonCommercial-NoDerivatives 4.0 International (CC + BY-NC-ND 4.0) + +
    • +     + CC0 Public Domain Dedication +

    + The{" "} + + CC0 1.0 Universal (CC0 1.0) Public Domain Dedication + {" "} + waives all rights under worldwide copyright law. It allows you to use, + adapt, share, and distribute the work as if it were in the Public + domain. +

    + GNU General Public License +

    + For a work licensed under the{" "} + + GNU General Public License + + , you may copy, distribute and modify the work as long as any + modifications are also made available under the GPL. +

    + + ); return ( - - - - - License Explanations - Public Domain -

    - Works in the public domain have no copyright (in most cases because - the copyright term has expired) and you are free to use, adapt, - share, and distribute the work in any way you wish. -

    - Public Domain (US Only) -

    - Works may be in the public domain in the Unites States (where you - can use and distribute them without restriction), but still subject - to copyright laws and restrictions outside the United States. -

    - Creative Commons Licenses -

    - - Creative Commons licenses - {" "} - allow rights-holders to grant people the right to freely use their - creations in certain ways and perhaps by meeting certain - requirements. There are several licenses with different combinations - of four basic clauses: -

    - -
    BY
    - -
    - Attribution — You must give appropriate credit, provide a link to - the license, and indicate if changes were made. You may do so in - any reasonable manner, but not in any way that suggests the - licensor endorses you or your use. -
    - -
    NC
    - -
    - NonCommercial — You may not use the material for commercial - purposes.{" "} -
    - -
    ND
    - -
    - NoDerivatives — If you remix, transform, or build upon the - material, you may not distribute the modified material. -
    - -
    SA
    - -
    - ShareAlike — If you remix, transform, or build upon the material, - you must distribute your contributions under the same license as - the original. -
    -     -

    - The following Creative Commons licenses are applied to materials in - Digital Research Books Beta. Refer to linked license descriptions - for specifics: -

    - -
  • - - Attribution 3.0 Unported (CC BY 3.0) - -
    • - -
  • - - Attribution 4.0 International (CC BY 4.0) - -
    • - -
  • - - Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) - -
    • - -
  • - - Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) - -
    • - -
  • - - Attribution-NoDerivs 3.0 Unported (CC BY-ND 3.0) - -
    • - -
  • - - Attribution-NoDerivatives 4.0 International (CC BY-ND 4.0) - -
    • - -
  • - - Attribution-NonCommercial 4.0 International (CC BY-NC 4.0) - -
    • - -
  • - - Attribution-NonCommercial-ShareAlike 3.0 Unported (CC BY-NC-SA - 3.0) - -
    • - -
  • - - Attribution-NonCommercial-ShareAlike 4.0 International (CC - BY-NC-SA 4.0) - -
    • - -
  • - - Attribution-NonCommercial-NoDerivs 3.0 Unported (CC BY-NC-ND - 3.0) - -
    • - -
  • - - Attribution-NonCommercial-NoDerivatives 4.0 International (CC - BY-NC-ND 4.0) - -
    • -     - CC0 Public Domain Dedication -

    - The{" "} - - CC0 1.0 Universal (CC0 1.0) Public Domain Dedication - {" "} - waives all rights under worldwide copyright law. It allows you to - use, adapt, share, and distribute the work as if it were in the - Public domain. -

    - GNU General Public License -

    - For a work licensed under the{" "} - - GNU General Public License - - , you may copy, distribute and modify the work as long as any - modifications are also made available under the GPL. -

    -     -     -     + ); }; diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx index 3c5f8d0d..dcc3e5a2 100644 --- a/src/components/Search/Search.tsx +++ b/src/components/Search/Search.tsx @@ -10,6 +10,7 @@ import { Form, useModal, useNYPLBreakpoints, + TemplateAppContainer, } from "@nypl/design-system-react-components"; import { useRouter } from "next/router"; import { FacetItem, Query } from "~/src/types/DataModel"; @@ -30,14 +31,7 @@ import useFeatureFlags from "~/src/context/FeatureFlagContext"; import TotalWorks from "../TotalWorks/TotalWorks"; import filterFields from "~/src/constants/filters"; import { findFiltersForField } from "~/src/util/SearchQueryUtils"; -import DrbTemplate, { - DrbBreakout, - DrbContent, - DrbContentPrimary, - DrbContentSidebar, - DrbContentTop, - DrbHeader, -} from "../DrbTemplate/DrbTemplate"; +import DrbBreakout from "../DrbBreakout/DrbBreakout"; const SearchResults: React.FC<{ searchQuery: SearchQuery; @@ -177,168 +171,180 @@ const SearchResults: React.FC<{ sendSearchQuery(newSearchQuery); }; - return ( - - - - - - - - - {isFlagActive("totalCount") && ( - - - - )} - - - - <>Search results for {getDisplayItemsHeading(searchQuery)} - - - - - - - {numberOfWorks > 0 - ? `Viewing ${firstElement.toLocaleString()} - ${ - numberOfWorks < lastElement - ? numberOfWorks.toLocaleString() - : lastElement.toLocaleString() - } of ${numberOfWorks.toLocaleString()} items` - : "Viewing 0 items"} - -
    + const breakoutElement = ( + + + + ); + + const contentTopElement = ( + <> + {isFlagActive("totalCount") && ( + + + + )} + + + + <>Search results for {getDisplayItemsHeading(searchQuery)} + + + + + + + {numberOfWorks > 0 + ? `Viewing ${firstElement.toLocaleString()} - ${ + numberOfWorks < lastElement + ? numberOfWorks.toLocaleString() + : lastElement.toLocaleString() + } of ${numberOfWorks.toLocaleString()} items` + : "Viewing 0 items"} + + + onChangePerPage(e)} + onChangeSort={(e) => onChangeSort(e)} + /> + + + + ); + + const contentSidebarElement = ( + <> + {!isLargerThanMedium && ( + + )} + + + onChangePerPage(e)} onChangeSort={(e) => onChangeSort(e)} /> - -
    -     - - {!isLargerThanMedium && ( - - )} - - - - onChangePerPage(e)} - onChangeSort={(e) => onChangeSort(e)} - /> - -
    - - Refine Results - - { - changeFilters(filters); - }} - changeShowAll={(showAll: boolean) => { - changeShowAll(showAll); - }} - /> - - - } - /> - {searchQuery.filters.length > 0 && !isLargerThanMedium && ( - - )} -
    - - Refine Results - - { - changeFilters(filters); - }} - changeShowAll={(showAll: boolean) => { - changeShowAll(showAll); - }} - /> - -
    - - - onPageChange(e)} - __css={{ paddingTop: "m" }} - /> - -     -     + +
    + + Refine Results + + { + changeFilters(filters); + }} + changeShowAll={(showAll: boolean) => { + changeShowAll(showAll); + }} + /> + + + } + /> + {searchQuery.filters.length > 0 && !isLargerThanMedium && ( + + )} +
    + + Refine Results + + { + changeFilters(filters); + }} + changeShowAll={(showAll: boolean) => { + changeShowAll(showAll); + }} + /> + + + ); + + const contentPrimaryElement = ( + <> + + onPageChange(e)} + __css={{ paddingTop: "m" }} + /> + + ); + return ( + ); }; diff --git a/src/components/Work/Work.tsx b/src/components/Work/Work.tsx index 7b53ea66..624357da 100644 --- a/src/components/Work/Work.tsx +++ b/src/components/Work/Work.tsx @@ -12,6 +12,7 @@ import { CardActions, CardContent, CardHeading, + TemplateAppContainer, } from "@nypl/design-system-react-components"; import { joinArrayOfElements, @@ -26,13 +27,7 @@ import { WorkEdition } from "~/src/types/DataModel"; import Link from "../Link/Link"; import { MAX_TITLE_LENGTH } from "~/src/constants/editioncard"; import { PLACEHOLDER_LINK } from "~/src/constants/collection"; -import DrbTemplate, { - DrbBreakout, - DrbContent, - DrbContentPrimary, - DrbContentTop, - DrbHeader, -} from "../DrbTemplate/DrbTemplate"; +import DrbBreakout from "../DrbBreakout/DrbBreakout"; const WorkDetail: React.FC<{ workResult: WorkResult; backUrl?: string }> = ( props @@ -71,130 +66,137 @@ const WorkDetail: React.FC<{ workResult: WorkResult; backUrl?: string }> = ( }); }; - return ( - - - - - - - - + const breakoutElement = ( + + + + ); + + const contentTopElement = ( + <> + + + + {work.title} + + {props.backUrl && ( + + Back to search results + + )} + + {work.sub_title && {work.sub_title}} + {authorsList && authorsList.length && ( + By {joinArrayOfElements(authorsList, "")} + )} + + {featuredEdition && ( + <> - - - {work.title} + + Featured Edition + + + + + + + )} + {work.inCollections && work.inCollections.length > 0 && ( + + + + Part of Collection + + + {work.inCollections[0].title} + + + + {work.inCollections[0].description} + + + + Browse Collection + + + + )} + + ); + + const contentPrimaryElement = ( + <> + + + + {work.editions && ( + <> + + + All Editions - {props.backUrl && ( - - Back to search results - - )} + + ) => + toggleShowAll(e) + } + id="show-all-toggle" + /> - {work.sub_title && {work.sub_title}} - {authorsList && authorsList.length && ( - By {joinArrayOfElements(authorsList, "")} - )} - - {featuredEdition && ( - <> - - - Featured Edition - - - + + {work.editions.map((edition: WorkEdition) => ( - - - )} - {work.inCollections && work.inCollections.length > 0 && ( - - - - Part of Collection - - - {work.inCollections[0].title} - - - - {work.inCollections[0].description} - - - - Browse Collection - - - - )} - - - - - - {work.editions && ( - <> - - - All Editions - - - ) => - toggleShowAll(e) - } - id="show-all-toggle" - /> - - - {work.editions.map((edition: WorkEdition) => ( - - ))} - - - )} - - - - + ))} + + + )} + + + ); + return ( + ); }; From ee6dbd3a7e5bee8abeaf2da62fa2fd83ab9db395 Mon Sep 17 00:00:00 2001 From: Jackie Quach Date: Wed, 27 Sep 2023 16:54:42 -0400 Subject: [PATCH 2/2] update snapshots --- .../About/__snapshots__/About.test.tsx.snap | 174 +++++++++--------- .../__snapshots__/License.test.tsx.snap | 174 +++++++++--------- 2 files changed, 178 insertions(+), 170 deletions(-) diff --git a/src/components/About/__snapshots__/About.test.tsx.snap b/src/components/About/__snapshots__/About.test.tsx.snap index 3faaa268..74971e78 100644 --- a/src/components/About/__snapshots__/About.test.tsx.snap +++ b/src/components/About/__snapshots__/About.test.tsx.snap @@ -2,113 +2,117 @@ exports[`renders about unchanged 1`] = `
    - + + About + + + + + +
    - + + License + + + + + +