Release v2.1.2

CHANGELOG.md

@@ -8,6 +8,20 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 2.1.2 (November 9, 2023)
+
+### Adds
+
+- Adds the `sizeBasedOn` prop to the `Logo` component.
+- Added the `autoComplete` prop to the `TextInput` component for setting the "autocomplete" attribute manually.
+
+### Updates
+
+- Updates max version for Chakra UI to `1.8.9` for minor bug fixes.
+- Updates the layout for the `"campaign"` variant of the `Hero` component to have consistent padding on its left and right sides.
+- Updates the `getSectionColors` function to also return dark mode color variants.
+- Updates the `NewsletterSignup` component's `newsletterSignupType` prop to render proper dark mode variant colors.
+
 ## 2.1.1 (October 26, 2023)
 
 ### Adds

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",
@@ -57,7 +57,7 @@
   },
   "dependencies": {
     "@chakra-ui/focus-lock": ">=1.2.6 <2.0.0",
-    "@chakra-ui/react": ">=1.8.5 <=1.8.8",
+    "@chakra-ui/react": ">=1.8.5 <=1.8.9",
     "@chakra-ui/system": ">=1.11.0 <=1.12.1",
     "@charlietango/use-native-lazy-loading": "1.10.0",
     "@emotion/react": "11.4.1",
@@ -73,7 +73,7 @@
   },
   "peerDependencies": {
     "@chakra-ui/focus-lock": ">=1.2.6 <2.0.0",
-    "@chakra-ui/react": ">=1.8.5 <=1.8.8",
+    "@chakra-ui/react": ">=1.8.5 <=1.8.9",
     "@chakra-ui/system": ">=1.11.0 <=1.12.1",
     "@emotion/react": "11.4.1",
     "@emotion/styled": "11.3.0",

src/__tests__/utils/getSectionColors.test.ts

@@ -0,0 +1,91 @@
+import { getSectionColors } from "../../utils/getSectionColors";
+
+describe("getSectionColors", () => {
+  // Spot check color objects in `sectionColorsDataMap` in
+  // `src/helpers/types.ts`.
+  it("returns an object with primary and secondary colors for the passed type", () => {
+    const brand = getSectionColors({
+      type: "brand",
+    });
+    const education = getSectionColors({
+      type: "education",
+    });
+    const researchLibrarySchomburg = getSectionColors({
+      type: "researchLibrarySchomburg",
+    });
+    const whatsOn = getSectionColors({
+      type: "whatsOn",
+    });
+
+    expect(brand).toEqual({
+      primary: "brand.primary",
+      secondary: "brand.secondary",
+    });
+    expect(education).toEqual({
+      primary: "section.education.primary",
+      secondary: "section.education.secondary",
+    });
+    expect(researchLibrarySchomburg).toEqual({
+      primary: "section.research-library.schomburg",
+      secondary: null,
+    });
+    expect(whatsOn).toEqual({
+      primary: "section.whats-on.primary",
+      secondary: "section.whats-on.secondary",
+    });
+  });
+
+  it("returns a string with the appropriate color value", () => {
+    const booksAndMore = getSectionColors({
+      type: "booksAndMore",
+      colorValue: "secondary",
+    });
+    const connect = getSectionColors({
+      type: "connect",
+      colorValue: "primary",
+    });
+    const research = getSectionColors({
+      type: "research",
+      colorValue: "primary",
+    });
+    const researchLibrarySchwarzman = getSectionColors({
+      type: "researchLibrarySchwarzman",
+      colorValue: "secondary",
+    });
+
+    expect(booksAndMore).toEqual("section.books-and-more.secondary");
+    expect(connect).toEqual("section.connect.primary");
+    expect(research).toEqual("section.research.primary");
+    expect(researchLibrarySchwarzman).toEqual(null);
+  });
+
+  it("returns a string with the dark mode color variant", () => {
+    const locations = getSectionColors({
+      type: "locations",
+      colorValue: "secondary",
+      isDark: true,
+    });
+    const researchLibraryLpa = getSectionColors({
+      type: "researchLibraryLpa",
+      colorValue: "primary",
+      isDark: true,
+    });
+    const researchLibrarySchwarzman = getSectionColors({
+      type: "researchLibrarySchwarzman",
+      colorValue: "primary",
+      isDark: true,
+    });
+    const whatsOn = getSectionColors({
+      type: "whatsOn",
+      colorValue: "secondary",
+      isDark: true,
+    });
+
+    expect(locations).toEqual("dark.section.locations.secondary");
+    expect(researchLibraryLpa).toEqual("dark.section.research-library.lpa");
+    expect(researchLibrarySchwarzman).toEqual(
+      "dark.section.research-library.schwartzman"
+    );
+    expect(whatsOn).toEqual("dark.section.whats-on.secondary");
+  });
+});

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

@@ -50,6 +50,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 1`] = `
               >
                 <input
                   aria-label="From, Press tab to access the calendar."
+                  autoComplete={null}
                   className="chakra-input css-0"
                   disabled={false}
                   id="basic-start"
@@ -103,6 +104,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 1`] = `
               >
                 <input
                   aria-label="To, Press tab to access the calendar."
+                  autoComplete={null}
                   className="chakra-input css-0"
                   disabled={false}
                   id="basic-end"
@@ -184,6 +186,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 2`] = `
               >
                 <input
                   aria-label="From, Press tab to access the calendar."
+                  autoComplete={null}
                   className="chakra-input css-0"
                   disabled={false}
                   id="no-label-start"
@@ -237,6 +240,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 2`] = `
               >
                 <input
                   aria-label="To, Press tab to access the calendar."
+                  autoComplete={null}
                   className="chakra-input css-0"
                   disabled={false}
                   id="no-label-end"
@@ -318,6 +322,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 3`] = `
               >
                 <input
                   aria-label="From, Press tab to access the calendar."
+                  autoComplete={null}
                   className="chakra-input css-0"
                   disabled={false}
                   id="custom-format-start"
@@ -371,6 +376,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 3`] = `
               >
                 <input
                   aria-label="To, Press tab to access the calendar."
+                  autoComplete={null}
                   className="chakra-input css-0"
                   disabled={false}
                   id="custom-format-end"
@@ -454,6 +460,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 4`] = `
                   aria-describedby="invalid-start-helperText"
                   aria-invalid={true}
                   aria-label="From, Press tab to access the calendar."
+                  autoComplete={null}
                   className="chakra-input css-0"
                   disabled={false}
                   id="invalid-start"
@@ -525,6 +532,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 4`] = `
                   aria-describedby="invalid-end-helperText"
                   aria-invalid={true}
                   aria-label="To, Press tab to access the calendar."
+                  autoComplete={null}
                   className="chakra-input css-0"
                   disabled={false}
                   id="invalid-end"
@@ -631,6 +639,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 5`] = `
               >
                 <input
                   aria-label="From, Press tab to access the calendar."
+                  autoComplete={null}
                   className="chakra-input css-0"
                   disabled={true}
                   id="disabled-start"
@@ -684,6 +693,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 5`] = `
               >
                 <input
                   aria-label="To, Press tab to access the calendar."
+                  autoComplete={null}
                   className="chakra-input css-0"
                   disabled={true}
                   id="disabled-end"
@@ -763,6 +773,7 @@ exports[`DatePicker Single input renders the UI snapshot correctly 1`] = `
           >
             <input
               aria-label="Select the full date you want to visit NYPL, Press tab to access the calendar."
+              autoComplete={null}
               className="chakra-input css-0"
               disabled={false}
               id="basic-start"
@@ -824,6 +835,7 @@ exports[`DatePicker Single input renders the UI snapshot correctly 2`] = `
           >
             <input
               aria-label="Select the date you want to visit NYPL, Press tab to access the calendar."
+              autoComplete={null}
               className="chakra-input css-0"
               disabled={false}
               id="no-label-start"
@@ -892,6 +904,7 @@ exports[`DatePicker Single input renders the UI snapshot correctly 3`] = `
           >
             <input
               aria-label="Select the date you want to visit NYPL, Press tab to access the calendar."
+              autoComplete={null}
               className="chakra-input css-0"
               disabled={false}
               id="custom-format-start"
@@ -962,6 +975,7 @@ exports[`DatePicker Single input renders the UI snapshot correctly 4`] = `
               aria-describedby="invalid-start-helperText"
               aria-invalid={true}
               aria-label="Select the date you want to visit NYPL, Press tab to access the calendar."
+              autoComplete={null}
               className="chakra-input css-0"
               disabled={false}
               id="invalid-start"
@@ -1047,6 +1061,7 @@ exports[`DatePicker Single input renders the UI snapshot correctly 5`] = `
             <input
               aria-describedby="disabled-start-helperText"
               aria-label="Select the date you want to visit NYPL, Press tab to access the calendar."
+              autoComplete={null}
               className="chakra-input css-0"
               disabled={true}
               id="disabled-start"
@@ -1132,6 +1147,7 @@ exports[`DatePicker Single input renders the UI snapshot correctly 6`] = `
             <input
               aria-describedby="chakra-start-helperText"
               aria-label="Select the date you want to visit NYPL, Press tab to access the calendar."
+              autoComplete={null}
               className="chakra-input css-0"
               disabled={false}
               id="chakra-start"
@@ -1218,6 +1234,7 @@ exports[`DatePicker Single input renders the UI snapshot correctly 7`] = `
             <input
               aria-describedby="props-start-helperText"
               aria-label="Select the date you want to visit NYPL, Press tab to access the calendar."
+              autoComplete={null}
               className="chakra-input css-0"
               disabled={false}
               id="props-start"

src/components/Hero/Hero.mdx

@@ -12,7 +12,7 @@ import Link from "../Link/Link";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.2.0`    |
-| Latest            | `2.1.1`    |
+| Latest            | `2.1.2`    |
 
 ## Table of Contents
 

src/components/Hero/heroChangelogData.ts

@@ -9,6 +9,15 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "2023-11-09",
+    version: "2.1.2",
+    type: "Update",
+    affects: ["Styles"],
+    notes: [
+      'Updates the layout for the "campaign" variant to have consistent padding on its left and right sides.',
+    ],
+  },
   {
     date: "2023-10-26",
     version: "2.1.1",

src/components/Logo/Logo.mdx

@@ -1,5 +1,6 @@
 import { ArgTypes, Canvas, Description, Meta, Source } from "@storybook/blocks";
-
+import { changelogData } from "./logoChangelogData";
+import ComponentChangelogTable from "../../utils/ComponentChangelogTable";
 import * as LogoStories from "./Logo.stories";
 import Link from "../Link/Link";
 
@@ -10,7 +11,7 @@ import Link from "../Link/Link";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.9`   |
-| Latest            | `1.5.2`    |
+| Latest            | `2.1.2`    |
 
 ## Table of Contents
 
@@ -20,6 +21,7 @@ import Link from "../Link/Link";
 - {<Link href="#sizes" target="_self">Sizes</Link>}
 - {<Link href="#all-logos" target="_self">All Logos</Link>}
 - {<Link href="#custom-logos" target="_self">Custom Logos</Link>}
+- {<Link href="#changelog" target="_self">Changelog</Link>}
 
 ## Overview
 
@@ -59,6 +61,10 @@ from the `LogoSizes` type. The values are `"default"`, `"xxsmall"`, `"xsmall"`,
 Note: `"default"` sets the width to `100%` and the rendered logo will expand to
 fill the full width of the parent element.
 
+In addition, the `sizeBasedOn` prop can be passed to determine whether the size
+of the `Logo` is updated based on either the `"height"` or `"width"`. By default,
+the `sizeBasedOn` prop is set to `"width"`.
+
 <Source
   code={`
 // Example
@@ -69,6 +75,16 @@ fill the full width of the parent element.
 
 <Canvas of={LogoStories.Sizes} />
 
+<Source
+  code={`
+// Example
+<Logo name="nyplFullBlack" size="large" sizeBasedOn="height" />
+`}
+  language="jsx"
+/>
+
+<Canvas of={LogoStories.SizesBasedOnHeight} />
+
 ## All Logos
 
 Update the icon of the `Logo` component by passing the `name` prop with a value
@@ -118,3 +134,7 @@ child to the `Logo` component.
 />
 
 <Canvas of={LogoStories.CustomLogos} />
+
+## Changelog
+
+<ComponentChangelogTable changelogData={changelogData} />