Merge branch 'release' into gh-pages

* release: (103 commits)
  Prep for Release v2.1.0
  dark mode styles for NewsletterSignup
  Updating tests and new rc
  Adding ref to FC
  cleanup for NewsletterSignup stories
  style cleanup for NewsletterSignup
  2.1.0 RC
  update Text styles, fix typo for privacyPolicyLink, update tests
  change html tags to ds components
  update breakpoint - the one that got away
  update breakpoints, remove reduntant content
  update props, comments as discussed, update test and doc accordingly
  update snapshots
  update as per PR comments
  remove styling, fix typos
  removing errant comments
  Adding FeaturedContent's changelog
  adding better typing and better docs
  updates based on feedback
  code formatting cleanup
  ...

CHANGELOG.md

@@ -8,9 +8,25 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
-## Updates
+## 2.1.0 (October 18, 2023)
+
+- Adds the `ComponentChangelogTable` component.
+- Adds a changelog to the story pages for the `DatePicker`, `FeedbackBox`, `Hero`, `Slider`, and `TextInput` components.
+- Adds the `FeaturedContent` component.
+- Adds the `NewsletterSignup` component.
+
+### Updates
 
 - Temporarily renaming `FilterBar`, `MultiSelect`, `MultiSelectGroup`, `useMultiSelect`, and `useFilterBar` Storybook page files so they don't show up in the Storybook sidebar.
+- Updates the `Slider` component to use appropriate `aria-label` values for the slider thumbs and text input fields.
+- Updates `TextInput` so it no longer incorrectly overwrites the `aria-describedby` value to undefined when part of the `DatePicker` component.
+- Updates `DatePicker` so that focus remains on input after value is changed.
+- Updates the `FeedbackBox` component to remove the underline on the component's `Privacy Policy` link.
+- Updates `DatePicker` to pass a `additionalHelperTextIds` to its `TextInput` if needed so that the `aria-describedby` value can be associated with all relevant `helperText`s.
+
+### Fixes
+
+- Fixes an issue with `backgroundColor` and `foregroundColor` props not prioritizing the passed design token values for the `Hero` component.
 
 ## 2.0.1 (September 28, 2023)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",
@@ -52,6 +52,9 @@
     "singleQuote": false,
     "trailingComma": "es5"
   },
+  "overrides": {
+    "types-ramda": "0.29.4"
+  },
   "dependencies": {
     "@chakra-ui/focus-lock": ">=1.2.6 <2.0.0",
     "@chakra-ui/react": ">=1.8.5 <=1.8.8",
@@ -103,7 +106,7 @@
     "@types/jest-axe": "3.5.3",
     "@types/node": "18.13.0",
     "@types/react": "16.9.41",
-    "@types/testing-library__jest-dom": "^5.14.1",
+    "@types/testing-library__jest-dom": "5.14.1",
     "@typescript-eslint/eslint-plugin": "5.57.0",
     "@typescript-eslint/parser": "5.57.0",
     "@vitejs/plugin-react": "3.1.0",

src/components/DatePicker/DatePicker.mdx

@@ -1,7 +1,10 @@
 import { ArgTypes, Canvas, Description, Meta, Source } from "@storybook/blocks";
 
+import ComponentChangelogTable from "../../utils/ComponentChangelogTable";
 import * as DatePickerStories from "./DatePicker.stories";
+import { changelogData } from "./datePickerChangelogData";
 import Link from "../Link/Link";
+import Table from "../Table/Table";
 
 <Meta of={DatePickerStories} />
 
@@ -10,7 +13,7 @@ import Link from "../Link/Link";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.24.0`   |
-| Latest            | `2.0.0`    |
+| Latest            | `2.1.0`    |
 
 ## Table of Contents
 
@@ -22,6 +25,7 @@ import Link from "../Link/Link";
 - {<Link href="#other-states" target="_self">Other States</Link>}
 - {<Link href="#date-inputs-and-output" target="_self">Date Inputs and Output</Link>}
 - {<Link href="#getting-date-input-values" target="_self">Getting Date Input Values</Link>}
+- {<Link href="#changelog" target="_self">Changelog</Link>}
 
 ## Overview
 
@@ -42,13 +46,23 @@ also be added through props.
 The Reservoir `DatePicker` component implements the `react-datepicker` npm package.
 This package exports a component that is used internally to display the popup
 calendar, manage its data, and associate the `<label>` element with its corresponding
-`<input>` element. This component is accessible through keyboard navigation.
+`<input>` element.
+
+This component is accessible through keyboard navigation. When keyboard users tab to
+the input, the calendar automatically opens. Tabbing again moves focus into the
+calendar. Dates can be navigated to using the arrow keys. The enter key selects the
+date in focus and closes the calendar. Focus then returns to the input.
 
 The Reservoir `DatePicker` handles the grouping of the two `<input>` elements in
 the "date range" mode by wrapping the elements in a `<fieldset>` element with
 its own `<legend>` label for the group. Note that this is in addition to the two
 labels that each `<input>` element is associated with.
 
+`helperText` is also associated with the `<input>` elements via the `aria-describedby`
+attribute. If a `helperTextFrom` or `helperTextTo` is passed in addition to a general
+`helperText` for the entire `DatePicker`, then the `aria-describedby` attribute of the
+`<input>` element will be "[general-helperText-id] [input-helperText-id]".
+
 When `showLabel` is set to false, the single `<input>` element's `aria-label`
 attribute is set to the required `labelText` value. In the "date range" mode,
 when `showLabel` is set to false, the `<fieldset>`'s `<legend>` will have the
@@ -57,6 +71,7 @@ when `showLabel` is set to false, the `<fieldset>`'s `<legend>` will have the
 Resources:
 
 - [react-datepicker Accessibility](https://github.com/Hacker0x01/react-datepicker#accessibility)
+- [Apex 4x Technical Style Guide: Aria Date Picker](https://whatsock.com/Templates/Datepickers/Basic,%20Auto%20Open/index.htm)
 
 ## Date Range
 
@@ -246,3 +261,7 @@ const onSubmit = () => {
 `}
   language="jsx"
 />
+
+## Changelog
+
+<ComponentChangelogTable changelogData={changelogData} />

src/components/DatePicker/DatePicker.test.tsx

@@ -216,13 +216,18 @@ describe("DatePicker", () => {
         />
       );
 
-      // When not errored, we expect only the helper text to appear.
-      expect(
-        screen.getByLabelText(/Select the date you want to visit NYPL/i)
-      ).toBeInTheDocument();
       expect(
         screen.getByText("Note that the Library may be closed on Sundays.")
       ).toBeInTheDocument();
+
+      // The input should be associated with the helper text via aria-describedby.
+      const input = screen.getByRole("textbox");
+      expect(input).toHaveAttribute(
+        "aria-describedby",
+        "datePicker-start-helperText"
+      );
+
+      // When not errored, we expect only the helper text to appear.
       expect(
         screen.queryByText("Please select a valid date.")
       ).not.toBeInTheDocument();
@@ -243,6 +248,13 @@ describe("DatePicker", () => {
       expect(
         screen.getByText("Please select a valid date.")
       ).toBeInTheDocument();
+
+      // The input should be associated with the error text via aria-describedby.
+      // The error text replaces the original helper text.
+      expect(input).toHaveAttribute(
+        "aria-describedby",
+        "datePicker-start-helperText"
+      );
     });
 
     it("should not render the helper text or invalid text when 'showHelperInvalidText' is false", () => {
@@ -569,6 +581,7 @@ describe("DatePicker", () => {
           isDateRange
         />
       );
+
       // There are two labels for each input.
       expect(screen.getByText("From")).toBeInTheDocument();
       expect(screen.getByText("To")).toBeInTheDocument();
@@ -582,6 +595,24 @@ describe("DatePicker", () => {
       ).toBeInTheDocument();
       // Helper text for the "To" input
       expect(screen.getByText(/Note for the 'to' field./i)).toBeInTheDocument();
+
+      const fromInput = screen.getByRole("textbox", { name: "From" });
+      const toInput = screen.getByRole("textbox", { name: "To" });
+
+      // The `fromInput` should have an `aria-describedby` value of both the id of
+      // the `helperText` and the id of the `helperTextFrom` in that order - from
+      // more general to more specific.
+      expect(fromInput).toHaveAttribute(
+        "aria-describedby",
+        "datePicker-helper-text datePicker-start-helperText"
+      );
+      // The `toInput` should have an `aria-describedby` value of both the id of
+      // the `helperText` and the id of the `helperTextTo` in that order - from
+      // more general to more specific.
+      expect(toInput).toHaveAttribute(
+        "aria-describedby",
+        "datePicker-helper-text datePicker-end-helperText"
+      );
     });
 
     it("should render different states based on respective props", () => {

src/components/DatePicker/DatePicker.tsx

@@ -1,5 +1,5 @@
-import { chakra, useMultiStyleConfig } from "@chakra-ui/react";
-import React, { useState, forwardRef } from "react";
+import { chakra, useMergeRefs, useMultiStyleConfig } from "@chakra-ui/react";
+import React, { useState, forwardRef, useRef } from "react";
 import ReactDatePicker from "react-datepicker";
 
 import Fieldset from "../Fieldset/Fieldset";
@@ -276,6 +276,17 @@ export const DatePicker = chakra(
     const finalStyles = isDateRange ? styles : {};
     const initStartDate = initialDate ? new Date(initialDate) : new Date();
     const initEndDate = initialDateTo ? new Date(initialDateTo) : new Date();
+    const startDateInputRef = useRef(null);
+    const endDateInputRef = useRef(null);
+
+    const inputRefs = {
+      startDate: startDateInputRef,
+      endDate: endDateInputRef,
+    };
+
+    const mergedStartDateRefs = useMergeRefs(startDateInputRef, ref);
+    const mergedEndDateRefs = useMergeRefs(endDateInputRef, refTo);
+
     let initFullDate: FullDateType = { startDate: initStartDate };
     // Only include the `endDate` key for date ranges.
     if (isDateRange) {
@@ -288,6 +299,8 @@ export const DatePicker = chakra(
     const onChangeDefault = (date: Date, value: string) => {
       setFullDate({ ...fullDate, [value]: date });
       onChange && onChange({ ...fullDate, [value]: date });
+
+      inputRefs[value].current.focus();
     };
     // How many years to display in the "year" option.
     const yearsToDisplay = 12;
@@ -372,6 +385,7 @@ export const DatePicker = chakra(
         ...baseCustomTextInputAttrs,
         helperText: helperTextTo,
       };
+
       // These props are used to follow the pattern recommended by
       // the react-datepicker plugin.
       startDatePickerAttrs = {
@@ -392,8 +406,14 @@ export const DatePicker = chakra(
         <ReactDatePicker
           customInput={
             <CustomTextInput
-              dsRef={refTo}
+              dsRef={mergedEndDateRefs}
               labelText="To"
+              // `additionalHelperTextIds` is passed when both `helperTextTo`
+              // and `helperText` are displayed. It tells `TextInput` to associate
+              // with both helper texts using `aria-describedby`.
+              {...(helperTextTo && helperText
+                ? { additionalHelperTextIds: `${id}-helper-text` }
+                : {})}
               {...endCustomTextInputAttrs}
             />
           }
@@ -405,12 +425,19 @@ export const DatePicker = chakra(
         />
       );
     }
+
     const startDatePickerElement = (
       <ReactDatePicker
         customInput={
           <CustomTextInput
-            dsRef={ref}
+            dsRef={mergedStartDateRefs}
             labelText={startLabelText}
+            // `additionalHelperTextIds` is passed when both `helperTextFrom`
+            // and `helperText` are displayed and tells `TextInput` to associate
+            // with both helper texts using `aria-describedby`.
+            {...(isDateRange && helperTextFrom && helperText
+              ? { additionalHelperTextIds: `${id}-helper-text` }
+              : {})}
             {...baseCustomTextInputAttrs}
           />
         }

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

@@ -445,6 +445,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 4`] = `
                 className="css-79elbk"
               >
                 <input
+                  aria-describedby="invalid-start-helperText"
                   aria-invalid={true}
                   className="chakra-input css-0"
                   disabled={false}
@@ -514,6 +515,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 4`] = `
                 className="css-79elbk"
               >
                 <input
+                  aria-describedby="invalid-end-helperText"
                   aria-invalid={true}
                   className="chakra-input css-0"
                   disabled={false}
@@ -945,6 +947,7 @@ exports[`DatePicker Single input renders the UI snapshot correctly 4`] = `
             className="css-79elbk"
           >
             <input
+              aria-describedby="invalid-start-helperText"
               aria-invalid={true}
               className="chakra-input css-0"
               disabled={false}
@@ -1029,6 +1032,7 @@ exports[`DatePicker Single input renders the UI snapshot correctly 5`] = `
             className="css-79elbk"
           >
             <input
+              aria-describedby="disabled-start-helperText"
               className="chakra-input css-0"
               disabled={true}
               id="disabled-start"
@@ -1112,6 +1116,7 @@ exports[`DatePicker Single input renders the UI snapshot correctly 6`] = `
             className="css-79elbk"
           >
             <input
+              aria-describedby="chakra-start-helperText"
               className="chakra-input css-0"
               disabled={false}
               id="chakra-start"
@@ -1196,6 +1201,7 @@ exports[`DatePicker Single input renders the UI snapshot correctly 7`] = `
             className="css-79elbk"
           >
             <input
+              aria-describedby="props-start-helperText"
               className="chakra-input css-0"
               disabled={false}
               id="props-start"

src/components/DatePicker/datePickerChangelogData.ts

@@ -0,0 +1,31 @@
+/** This data is used to populate the ComponentChangelogTable component.
+ *
+ * date: string (when adding new entry during development, set value as "Prerelease")
+ * version: string (when adding new entry during development, set value as "Prerelease")
+ * type: "Bug Fix" | "New Feature" | "Update";
+ * affects: array["Accessibility" | "Documentation" | "Functionality" | "Styles"];
+ * notes: array (will render as a bulleted list, add one array element for each list element)
+ */
+import { ChangelogData } from "../../utils/ComponentChangelogTable";
+
+export const changelogData: ChangelogData[] = [
+  {
+    date: "2023-10-18",
+    version: "2.1.0",
+    type: "Update",
+    affects: ["Accessibility"],
+    notes: [
+      "Updates to pass a secondaryHelperTextId to its TextInput if needed so that the aria-describedby value can be associated with all relevant helperTexts.",
+      "Updates so that focus remains on input after value is changed.",
+    ],
+  },
+  {
+    date: "2023-9-28",
+    version: "2.0.0",
+    type: "Update",
+    affects: ["Styles"],
+    notes: [
+      "Applied Typo2023 styles, including font size, font color, and text link patterns.",
+    ],
+  },
+];