Fixes merge conflict

CHANGELOG.md

@@ -8,13 +8,19 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
-## Updates
+### 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)
 
 _NOTE_: Version number `2.0.0` was previously released in 2019 and is marked as deprecated in npm. The first stable relase for Reservoir v2 is `2.0.1`.

src/components/DatePicker/DatePicker.mdx

@@ -42,7 +42,12 @@ 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
@@ -62,6 +67,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
 

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;
@@ -393,7 +406,7 @@ 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
@@ -412,11 +425,12 @@ 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

src/components/FeedbackBox/FeedbackBox.mdx

@@ -7,10 +7,10 @@ import Link from "../Link/Link";
 
 # FeedbackBox
 
-| Component Version | DS Version |
-| ----------------- | ---------- |
-| Added             | `1.3.0`    |
-| Latest            | `2.0.0`    |
+| Component Version | DS Version   |
+| ----------------- | ------------ |
+| Added             | `1.3.0`      |
+| Latest            | `Prerelease` |
 
 ## Table of Contents
 

src/components/FeedbackBox/FeedbackBox.tsx

@@ -189,6 +189,7 @@ export const FeedbackBox = chakra(
             href="https://www.nypl.org/help/about-nypl/legal-notices/privacy-policy"
             type="external"
             fontSize="text.tag"
+            isUnderlined={false}
             width="fit-content"
           >
             Privacy Policy

src/components/Hero/Hero.mdx

@@ -7,10 +7,10 @@ import Link from "../Link/Link";
 
 # Hero
 
-| Component Version | DS Version |
-| ----------------- | ---------- |
-| Added             | `0.2.0`    |
-| Latest            | `2.0.0`    |
+| Component Version | DS Version   |
+| ----------------- | ------------ |
+| Added             | `0.2.0`      |
+| Latest            | `Prerelease` |
 
 ## Table of Contents
 

src/components/Hero/Hero.stories.tsx

@@ -309,12 +309,12 @@ export const Campaign: Story = {
       <div>
         <Heading
           id="campaign-hero-long-text"
-          text="Campaign Hero with separate backdrop and foreground background color"
+          text="Campaign Hero with separate backdrop and foreground background design token color"
         />
         <Hero
           backdropBackgroundColor="section.education.primary"
-          backgroundColor="#DC8034"
-          foregroundColor="black"
+          backgroundColor="dark.ui.warning.primary"
+          foregroundColor="ui.black"
           heroType="campaign"
           heading={
             <Heading

src/components/Hero/Hero.tsx

@@ -160,13 +160,13 @@ export const Hero = chakra(
           ? { bgColor: backdropBackgroundColor }
           : { backgroundColor };
       } else if (heroType === "tertiary" || heroType === "fiftyFifty") {
-        backgroundImageStyle = { backgroundColor };
+        backgroundImageStyle = backgroundColor ? { bg: backgroundColor } : {};
       }
 
       if (!heroSecondaryTypes.includes(heroType)) {
         contentBoxStyling = {
-          color: foregroundColor,
-          backgroundColor,
+          ...(foregroundColor && { color: foregroundColor }),
+          ...(backgroundColor && { backgroundColor }),
         };
       } else if (
         foregroundColor ||
@@ -231,7 +231,7 @@ export const Hero = chakra(
           <Box
             data-testid="hero-content"
             style={contentBoxStyling}
-            __css={styles.content}
+            __css={{ ...styles.content, ...contentBoxStyling }}
           >
             {childrenToRender}
           </Box>

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

@@ -14,12 +14,7 @@ exports[`Hero Renders the UI snapshot correctly 1`] = `
   <div
     className="css-0"
     data-testid="hero-content"
-    style={
-      {
-        "backgroundColor": undefined,
-        "color": undefined,
-      }
-    }
+    style={{}}
   >
     <h1
       className="chakra-heading css-eyyo6e"
@@ -240,12 +235,7 @@ exports[`Hero Renders the UI snapshot correctly 7`] = `
   <div
     className="css-0"
     data-testid="hero-content"
-    style={
-      {
-        "backgroundColor": undefined,
-        "color": undefined,
-      }
-    }
+    style={{}}
   >
     <h1
       className="chakra-heading css-eyyo6e"
@@ -274,12 +264,7 @@ exports[`Hero Renders the UI snapshot correctly 8`] = `
   <div
     className="css-0"
     data-testid="hero-content"
-    style={
-      {
-        "backgroundColor": undefined,
-        "color": undefined,
-      }
-    }
+    style={{}}
   >
     <div
       className="css-1gt4hjv"
@@ -318,12 +303,7 @@ exports[`Hero Renders the UI snapshot correctly 9`] = `
   <div
     className="css-0"
     data-testid="hero-content"
-    style={
-      {
-        "backgroundColor": undefined,
-        "color": undefined,
-      }
-    }
+    style={{}}
   >
     <div
       className="css-1gt4hjv"
@@ -361,12 +341,7 @@ exports[`Hero Renders the UI snapshot correctly 10`] = `
   <div
     className="css-0"
     data-testid="hero-content"
-    style={
-      {
-        "backgroundColor": undefined,
-        "color": undefined,
-      }
-    }
+    style={{}}
   >
     <h1
       className="chakra-heading css-eyyo6e"
@@ -397,12 +372,7 @@ exports[`Hero Renders the UI snapshot correctly 11`] = `
   <div
     className="css-0"
     data-testid="hero-content"
-    style={
-      {
-        "backgroundColor": undefined,
-        "color": undefined,
-      }
-    }
+    style={{}}
   >
     <h1
       className="chakra-heading css-eyyo6e"