Merge pull request #451 from NYPL/SFR-1807_reservoir-2.0-upgrade

SFR-1807: Reservoir 2.0 Typography changes

CHANGELOG.md

@@ -6,12 +6,13 @@
 - Upgrade testing-library packages to v14 and jest to v29
 - Remove TemplateFooter components
 - Replace Template components with TemplateAppContainer and DrbBreakout to reduce repeat components
-- Upgrade to NYPL Design System 1.7.3
+- Upgrade to NYPL Design System 2.1.0
 - Replace fireEvent with userEvent
 - Feedback button test PW
 - SFR-1797: Remove Playwright tests with clicks on header and footer links
 - Update README with C4 diagrams and epub-to-webpub info
 - Update Collection, Edition, and Work page titles for accessibility
+- Implement Typography changes from Reservoir 2.0 
 
 ## [0.17.4]
 

package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "@chakra-ui/react": "2.5.4",
     "@newrelic/next": "^0.6.0",
-    "@nypl/design-system-react-components": "^1.7.3",
+    "@nypl/design-system-react-components": "2.1.0",
     "@nypl/web-reader": "^4.3.1",
     "@types/node": "^16.11.6",
     "css-loader": "^6.5.0",

src/components/About/About.tsx

@@ -13,7 +13,7 @@ const About: React.FC = () => {
 
   const contentPrimaryElement = (
     <>
-      <Heading level="one">
+      <Heading level="h1">
         <span>
           <span className="rn-section-title__emphasis">
             Digital Research Books
@@ -53,7 +53,7 @@ const About: React.FC = () => {
       </p>
 
       <Heading
-        level="two"
+        level="h2"
         id="sources-and-data-heading"
         text="Sources and Data"
       />
@@ -75,7 +75,7 @@ const About: React.FC = () => {
       </p>
 
       <Heading
-        level="two"
+        level="h2"
         id="beta-testing-heading"
         text="What does Beta Testing mean?"
       />

src/components/About/__snapshots__/About.test.tsx.snap

@@ -122,7 +122,7 @@ exports[`renders about unchanged 1`] = `
       class="css-0"
     >
       <h1
-        class="chakra-heading css-1xdhyk6"
+        class="chakra-heading css-eyyo6e"
       >
         <span>
           <span
@@ -168,7 +168,7 @@ exports[`renders about unchanged 1`] = `
         , 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.
       </p>
       <h2
-        class="chakra-heading css-1xdhyk6"
+        class="chakra-heading css-878tmy"
         id="sources-and-data-heading"
       >
         Sources and Data
@@ -216,7 +216,7 @@ exports[`renders about unchanged 1`] = `
          to make connections between different editions of the same work.
       </p>
       <h2
-        class="chakra-heading css-1xdhyk6"
+        class="chakra-heading css-878tmy"
         id="beta-testing-heading"
       >
         What does Beta Testing mean?

src/components/AdvancedSearch/AdvancedSearch.tsx

@@ -203,7 +203,7 @@ const AdvancedSearch: React.FC<{
 
   const contentTopElement = (
     <>
-      <Heading level="one">Advanced Search</Heading>
+      <Heading level="h1">Advanced Search</Heading>
       {emptySearchError && (
         <HelperErrorText text={errorMessagesText.emptySearch} isInvalid />
       )}

src/components/Collection/Collection.tsx

@@ -137,10 +137,10 @@ const Collection: React.FC<{
 
   const contentTopElement = (
     <>
-      <Heading size="primary" marginBottom="xl">
+      <Heading level="h2" marginBottom="xl">
         {`Collection - ${title}`}
       </Heading>
-      <Heading size="secondary" marginBottom="l">
+      <Heading level="h3" marginBottom="l">
         About this collection
       </Heading>
       <Box>{description}</Box>
@@ -150,9 +150,9 @@ const Collection: React.FC<{
   const contentPrimaryElement = (
     <>
       <HorizontalRule bg="section.research.primary" marginBottom="xl" />
-      <Heading size="secondary">In this collection</Heading>
+      <Heading level="h3">In this collection</Heading>
       <Flex justify="space-between" marginBottom="xl" align="center">
-        <Heading level="two" size="tertiary" noSpace>
+        <Heading level="h3" size="heading5" noSpace>
           {totalItems > 0
             ? `Viewing ${firstElement.toLocaleString()} - ${
                 totalItems < lastElement

src/components/Collection/CollectionItem.tsx

@@ -15,12 +15,19 @@ export const CollectionItem: React.FC<{
 
   return (
     <Box>
-      <Heading level="two" marginBottom="xs">
+      <Heading
+        level="h4"
+        marginBottom="xs"
+        sx={{
+          a: {
+            textDecoration: "none",
+          },
+        }}
+      >
         <Link
           to={{
             pathname: links.find((link) => link.rel === "alternate").href,
           }}
-          className="link link--no-underline"
         >
           {truncateStringOnWhitespace(title, MAX_TITLE_LENGTH)}
         </Link>

src/components/CollectionCard/CollectionCard.tsx

@@ -3,9 +3,6 @@ import {
   Card,
   CardContent,
   CardHeading,
-  Box,
-  Heading,
-  Text,
 } from "@nypl/design-system-react-components";
 import { Opds2Feed } from "~/src/types/OpdsModel";
 import CollectionUtils from "~/src/util/CollectionUtils";
@@ -33,43 +30,24 @@ export const CollectionCard: React.FC<{ collection: Opds2Feed }> = ({
       mainActionLink={collection.links[0].href}
       isBordered
       minHeight="405px"
-      sx={{
-        "a > h2": {
-          color: "ui.link.primary",
-          textDecoration: "underline",
-        },
-        "h1 > a": {
-          textDecoration: "none",
-          _hover: {
-            p: { color: "initial" },
-            h2: { color: "ui.link.secondary" },
-          },
-        },
-      }}
     >
-      <CardHeading level="one" id="stack1-heading1">
-        <Text size="caption" isUppercase marginTop="xs" marginBottom="xxs">
-          <b>Collection</b>
-        </Text>
-        <Heading size="tertiary" minHeight="55px">
-          {truncateStringOnWhitespace(
-            collection.metadata.title,
-            MAX_COLLECTION_TITLE_LENGTH
-          )}
-        </Heading>
+      <CardHeading
+        level="h3"
+        size="heading5"
+        id="stack1-heading1"
+        overline="Collection"
+        subtitle={collection.metadata.numberOfItems + " Items"}
+      >
+        {truncateStringOnWhitespace(
+          collection.metadata.title,
+          MAX_COLLECTION_TITLE_LENGTH
+        )}
       </CardHeading>
       <CardContent>
-        <Box>
-          <Heading level="one" size="callout">
-            {collection.metadata.numberOfItems + " Items"}
-          </Heading>
-          <Text>
-            {truncateStringOnWhitespace(
-              collection.metadata.description,
-              MAX_DESCRIPTION_LENGTH
-            )}
-          </Text>
-        </Box>
+        {truncateStringOnWhitespace(
+          collection.metadata.description,
+          MAX_DESCRIPTION_LENGTH
+        )}
       </CardContent>
     </Card>
   );

src/components/CollectionItemCard/CollectionItemCard.tsx

@@ -39,7 +39,16 @@ export const CollectionItemCard: React.FC<{
       id={`card-${CollectionUtils.getId(collectionItem.links)}`}
       p="s"
     >
-      <CardHeading level="three">
+      <CardHeading
+        level="h5"
+        size="heading6"
+        sx={{
+          fontSize: "18px",
+          a: {
+            textDecoration: "none",
+          },
+        }}
+      >
         <EditionYear links={links} published={published} />
       </CardHeading>
       <CardContent>

src/components/DrbHero/DrbHero.tsx

@@ -4,10 +4,10 @@ import React from "react";
 export const DrbHero: React.FC = () => {
   return (
     <Hero
-      backgroundColor="#00838A !important"
+      backgroundColor="section.research.primary"
       heroType="tertiary"
       heading={
-        <Heading level="one" id="tertiary-hero">
+        <Heading level="h1" id="tertiary-hero">
           <>
             Digital Research Books <sup>Beta</sup>
           </>

src/components/EditionCard/EditionCard.tsx

@@ -63,7 +63,17 @@ export const EditionCard: React.FC<{ edition: WorkEdition; title: string }> = ({
       flexFlow={{ md: "column nowrap", lg: "row" }}
       alignItems={{ md: "flex-start", lg: "center" }}
     >
-      <CardHeading level="four" id="stack1-heading1">
+      <CardHeading
+        level="h3"
+        size="heading6"
+        id="stack1-heading1"
+        sx={{
+          fontSize: "18px",
+          a: {
+            textDecoration: "none",
+          },
+        }}
+      >
         {editionYearElem(edition)}
       </CardHeading>
       <CardContent>

src/components/EditionDetail/Edition.tsx

@@ -11,7 +11,6 @@ import {
   HorizontalRule,
   SimpleGrid,
   TemplateAppContainer,
-  Text,
   Toggle,
 } from "@nypl/design-system-react-components";
 
@@ -88,7 +87,15 @@ const Edition: React.FC<{ editionResult: EditionResult; backUrl?: string }> = (
     <>
       <Flex direction={{ base: "column", md: "row" }}>
         {edition && (
-          <Heading level="one">
+          <Heading
+            level="h1"
+            size="heading2"
+            sx={{
+              a: {
+                textDecoration: "none",
+              },
+            }}
+          >
             <Link
               to={{
                 pathname: `/work/${edition.work_uuid}`,
@@ -105,7 +112,9 @@ const Edition: React.FC<{ editionResult: EditionResult; backUrl?: string }> = (
             lineHeight="calc(1.1 * var(--nypl-fontSizes-heading-primary))"
             pl={{ md: "s" }}
           >
-            <Link to={props.backUrl}>Back to search results</Link>
+            <Link to={props.backUrl} linkType="backwards">
+              Back to search results
+            </Link>
           </Box>
         )}
       </Flex>
@@ -116,7 +125,9 @@ const Edition: React.FC<{ editionResult: EditionResult; backUrl?: string }> = (
       <Box>
         {featuredInstance && (
           <>
-            <Heading level="two">Featured Copy</Heading>
+            <Heading level="h2" size="heading4">
+              Featured Copy
+            </Heading>
 
             <Box>
               <InstanceCard edition={edition} instance={featuredInstance} />
@@ -139,16 +150,17 @@ const Edition: React.FC<{ editionResult: EditionResult; backUrl?: string }> = (
           marginTop="l"
           padding="s"
         >
-          <CardHeading size="primary" id="row-heading">
-            <Text size="caption" isUppercase marginTop="xs">
-              <b>Part of Collection</b>
-            </Text>
+          <CardHeading
+            size="heading2"
+            id="row-heading"
+            overline="Part of Collection"
+          >
             <Box marginTop="m" marginBottom="m">
               {edition.inCollections[0].title}
             </Box>
           </CardHeading>
           <CardContent marginBottom="l">
-            <Box>{edition.inCollections[0].description}</Box>
+            {edition.inCollections[0].description}
           </CardContent>
           <CardActions width="165px">
             <Link
@@ -169,7 +181,9 @@ const Edition: React.FC<{ editionResult: EditionResult; backUrl?: string }> = (
       <HorizontalRule bg="section.research.primary" />
       {edition.instances && (
         <Flex justify="space-between">
-          <Heading level="three">All Copies</Heading>
+          <Heading level="h2" size="heading5">
+            All Copies
+          </Heading>
 
           <Toggle
             labelText="Show only items currently available online"

src/components/EditionDetailDefinitionList/EditionDetailDefinitionList.tsx

@@ -23,7 +23,20 @@ export const EditionDetailDefinitionList: React.FC<{ edition: ApiEdition }> = ({
   edition,
 }) => {
   return (
-    <List title="Details" type="dl" id="details-list">
+    <List
+      title="Details"
+      type="dl"
+      id="details-list"
+      sx={{
+        h2: {
+          fontSize: "desktop.heading.heading5",
+          fontWeight: "heading.heading5",
+        },
+        "dd, dt": {
+          fontSize: "desktop.body.body2",
+        },
+      }}
+    >
       <>
         <dt>Publication Date</dt>
         <dd>

src/components/InstanceCard/InstanceCard.tsx

@@ -42,7 +42,7 @@ export const InstanceCard: React.FC<{
       id={`card-${instance.instance_id}`}
       p="s"
     >
-      <CardHeading level="three">
+      <CardHeading level="h3" size="heading6" sx={{ fontSize: "18px" }}>
         {edition.publication_date
           ? edition.publication_date
           : "Edition Year Unknown"}