merge from reservoir-v4 branch

.github/CONTRIBUTING.md

@@ -24,24 +24,24 @@ There are currently two main branches named `development` and `release`.
 
 ### `development` Branch
 
-All feature, bug, and task updates MUST first branch off the `development` branch. Make sure to include the JIRA ticket number in the branch name. For example: If there is a bug fix for JIRA ticket `DSD-101`, then the branch name can be `DSD-101/bug-fix` or `DSD-101-bug-fix`. The prefix can be either convention as long as the ticket number is a part of the branch name.
+All feature, bug, and task updates MUST first branch off the `development` branch. Make sure to include the JIRA ticket number in the branch name. For example: If there is a bug fix for JIRA ticket `DSD-101`, then the branch name should be `DSD-101/bug-fix`. If there is no JIRA ticket reference, prefix the branch with `no_ref/` such as `no_ref/typo-fix`.
 
-Once the feature branch pull request is approved, it can be merged into the `development` branch.
+Once the feature branch pull request is approved, it should be merged into the `development` branch.
 
 End-to-end steps:
 
 - Branch off `development` for your feature branch such as
 
 ```sh
-$ git checkout -b DSD-101-bug-fix
+$ git checkout -b DSD-101/bug-fix
 ```
 
 - Implement your changes or bug fixes, commit, and push.
 
 ```sh
 $ git add [name-of-files]
 $ git commit -m "Fixing the bug"
-$ git push -u origin DSD-101-bug-fix
+$ git push -u origin DSD-101/bug-fix
 ```
 
 - Create a PR pointing to `development` in Github.

.github/PULL_REQUEST_TEMPLATE

@@ -6,27 +6,43 @@ Fixes JIRA ticket xxx
 
 ## How has this been tested?
 
-<!--- Please describe in detail how you tested your changes. -->
+<!-- Please describe in detail how you tested your changes. -->
+
+-
 
 ## Accessibility concerns or updates
 
-<!--- Describe any accessibility concerns or updates that were made that should be known. -->
+<!-- Describe any accessibility concerns or updates that were made that should be known. -->
+
+-
+
+### Accessibility Checklist
+
+- [ ] Checked Storybook's "Accessibility" tab for color contrast and other issues.
+- [ ] The feature works with keyboard inputs including tabbing back and forward and pressing space, enter, arrow, and esc keys.
+- [ ] For hidden text or when `aria-live` is used, a screenreader was used to verify the text is read.
+- [ ] For features that involve UI updates and focusing on DOM `ref`s, focus management was reviewed.
+- [ ] The feature works when the page is zoomed in to 200% and 400%.
+
+## Open Questions
+
+<!-- Any questions you want to ask the reviewer? -->
 
 -
 
 ### Checklist:
 
-<!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
-<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
+<!-- Go over all the following points, and put an `x` in all the boxes that apply. -->
+<!-- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
 
-- [ ] I have updated the Storybook documentation accordingly.
+- [ ] I have updated the Storybook documentation and changelog accordingly.
 - [ ] I have added relevant accessibility documentation for this pull request.
 - [ ] All new and existing tests passed.
 
 ### Front End Review:
 
-<!--- This step is done AFTER creating a PR. -->
-<!--- Vercel creates a static Storybook preview URL once the PR is created. -->
-<!--- That preview URL is added by Vercel as a comment. -->
+<!-- This step is done AFTER creating a PR. -->
+<!-- Vercel creates a static Storybook preview URL once the PR is created. -->
+<!-- That preview URL is added by Vercel as a comment. -->
 
 - [ ] Review the Vercel preview deployment once it is ready.

.gitignore

@@ -7,7 +7,6 @@ dependencyGraph.json
 .DS_Store
 lib
 dist
-.vscode
 .eslintcache
 coverage
 .idea

.prettierignore

@@ -1 +1,2 @@
 /.jest-test-results.json
+/src/components/DevelopmentGuide/ConditionalViewport.mdx 

.storybook/main.ts

@@ -59,9 +59,24 @@ const config: StorybookConfig = {
       // accept Chakra props but this makes it so that the Chakra props
       // are just hidden in Storybook.
       propFilter: (prop) => {
-        // This is a bit of a "hack" but it tells Storybook that the prop
-        // is defined in a DS component. If we define it, then display it
-        // in the `ArgTypes` table in a component Storybook document page.
+        /** @Info: The following code would allow for typescript `type`
+         * declarations to also show up in the  argTypes table of storybook
+         * (The manual workaround in the argTypl like on MultiSelect `with` or
+         * SocilaMediaLinks `borders` would be redundant)
+         */
+        // if (
+        //   !prop.parent &&
+        //   prop.declarations &&
+        //   prop.declarations[0].name === "TypeLiteral" &&
+        //   !/node_modules/.test(prop.declarations[0].fileName)
+        // ) {
+        //   return true;
+        // }
+
+        /** This is a bit of a "hack" but it tells Storybook that the prop
+         * is defined in a DS component. If we define it, then display it
+         * in the `ArgTypes` table in a component Storybook document page.
+         */
         return prop.parent ? !/node_modules/.test(prop.parent.fileName) : false;
       },
     },

.vscode/settings.json

@@ -4,4 +4,4 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "typescript.tsdk": "node_modules/typescript/lib"
-}
+}

CHAKRA_MIGRATION_GUIDE.md

@@ -6,7 +6,7 @@ The first Reservoir Design System (DS) version that includes the Chakra UI libra
 
 If you would rather read documentation on the Design System's internal use of Chakra, check the Storybook documentation page. The following two links have the same information but in different formats for your reading preference:
 
-- [MDX format](/src/docs/Chakra.stories.mdx)
+- [MDX format](/src/docs/Chakra.mdx)
 - [Storybook page](https://nypl.github.io/nypl-design-system/reservoir/v3/?path=/docs/chakra-ui--docs)
 
 | Table of Contents |                                                       |

CHANGELOG.md

@@ -17,15 +17,160 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ### Adds
 
-- Adds Storybook interaction tests for `CheckboxGroup`, `DatePicker`, `Slider`, and `FeedbackBox` components.
-- Adds `digitalCollections` color variant to `Breadcrumbs` component.
-- Adds `closeOnBlur` prop to `MultiSelect` component which, when set to true, closes the component if it loses focus.
+- Adds `jest-transformer-svg` to mock SVGs more accurately in our tests
+
+### Fixes
+
+- Fixes `TextInput`'s conflicting internal and external ref values for the clearable button focus management.
+
+## 3.5.0 (December 5, 2024)
+
+### Adds
+
+- Adds the `"SubNav"`component.
+- Adds the `useScrollFadeStyles` hook.
+
+### Updates
+
+- Updates the `MultiSelect` component to add `itemCount` as a data property to the `items` prop to render the item count for an option.
+
+### Fixes
+
+- Fixes issue where focus indicator was being cut off in places in the `Template` component.
+
+## 3.4.4 (November 20, 2024)
+
+### Adds
+
+- Fixes a styling issue in the `Header`'s list to make it stricter.
+
+## 3.4.3 (November 18, 2024)
+
+### Adds
+
+- Adds the NYPL Header as a DS component as a temporary solution for a specific application. It's only meant to be used internally and teams are still encouraged to use the `nypl-header-app`.
+
+## 3.4.2 (November 7, 2024)
+
+### Adds
+
+- Adds the `"contentFilterRelease"` option to the `Icon` component.
+- Adds the `"socialX"` option to the `Icon` component.
+- Adds the `heading7` and `heading8` to the font size design tokens.
+- Adds the `heading7` and `heading8` options for the `size` prop in the `Heading` component.
+
+### Updates
+
+- Updates Storybook and related dependencies to version 8.3.6.
+- Updates the `Link` component to prevent line breaks.
+- Updates the `SocialMediaLinks` component to support the `"socialX"` icon.
+
+## Fixes
+
+- Fixes spacing issues and dark mode color styles in the `Table` component.
+
+## 3.4.1 (October 24, 2024)
+
+### Adds
+
+- Adds the `"decorativeBookBroken"` option (for error pages) to the `Icon` component.
+- Adds the `"xxxxlarge"` and `"xxxxxlarge"` size options for the `Icon` component.
+- Adds the `"2xlarge"`, `"3xlarge"`, `"4xlarge"`, and `"5xlarge"` sustainable size options for the `Icon` component.
+
+### Updates
+
+- Updates `Select` in the `SearchBar` component to allow long option titles before truncation.
+- Updates the `ProgressIndicator` component to add the `labelPlacement` prop to allow for custom placement of a label for circular indicators.
+- Updates image props in the `Hero` component to allow custom image components.
+- Updates Vite from `5.2.8` to `5.2.14` to fix a security vulnerability.
+
+### Removes
+
+- Removes unused dependencies, two of which were causing npm vulnerabilities.
+
+## 3.4.0 (October 2, 2024)
+
+### Updates
+
+- Updates invalid text in the `SearchBar` component to include "There was a problem. " prefix.
+- Updates the `MultiSelect` component to add interaction tests.
+- Increases the z-index of the `FeedbackBox`'s `Drawer` component so it displays above all other elements on a page.
+- Updates the `Table` component to add the `isScrollable` prop to enable horizontal scrolling.
+- Updates the `Table` component to add the `columnStyles` prop to allow for custom column styles (i.e. width, text alignment, etc.).
+- Updates the `Table` component to add the `tableTextSize` prop to set the size of the text within the table.
+- Updates the `Table` component to add the `titleText` and `showTitleText` props to control the `<caption>` element and `aria-label` attribute.
+- Updates the styles for the `Template` component to better accommodate the horizontal scrolling in the `Table` component.
+
+## 3.3.2 (September 19, 2024)
+
+### Updates
+
+- Lowercases the 'r' of '(required)' in labels and placeholders where necessary in order to align with sentence case guidelines.
+- Updates the `CheckboxGroup`, `DatePicker`, `FeedbackBox`, `Label`, `RadioGroup`, `SearchBar`, `Select`, `Slider`, and `TextInput` component to use a lowercase 'r' for '(required)' in labels and placeholders in order to align with sentence case typography guidelines.
+
+### Fixes
+
+- Passes the `fallbackSrc` and `onError` properties to the `Card`'s `imageProps` prop object.
+- Fixes issue with `HelperErrorText` where, if text value was not a string, necessary styles weren't applied.
+
+## 3.3.1 (September 5, 2024)
+
+### Updates
+
+- Updates `Tooltip` component with `placement` and `offset` props for custom positioning.
+
+### Fixes
+
+- Fixes a duplicate `id` issue in the `Image` component. This happened when an aspect ratio value rendered a wrapper div with the same `id` as the `img` element. This was not picked up by internal accessibility tests but in a consuming application.
+
+## 3.3.0 (August 29, 2024)
+
+### Adds
+
+- Adds development guide for Conditional Viewport
+- Adds the `FilterBarPopup` compoonent and `useFilterBarPopup` hook.
+
+### Updates
+
+- Updates the `FilterBarInline` component to apply `closeOnBlur` to `MultiSelect` components when `layout="row"`.
+- Updates the `Breadcrumbs` component props to include `customLinkComponent` and `linkProps`.
+- Updates the `Banner` component to allow for HTML content in the `content` prop when passed as a string.
+- Updates the `SearchBar` component styles for mobile viewports.
+- Updates the `Select` component to accept a `defaultValue` prop to set initial value of uncontrolled components.
+- Updates the legend in the `MultiSelect`'s `CheckboxGroup` to use the `buttonText` prop value for better accessibility context.
+- Updates the `Menu` component to add the `showSelectionAsLabel` prop and improve the `aria-label` values.
+- Updates the `Image` component to default the `alt` attribute to an empty string if no value is passed.
+
+### Removes
+
+- Removes `imageProps.alt` missing warning message from `FeaturedContent` as the prop is not always required.
+
+## 3.2.0 (July 25, 2024)
+
+### Adds
+
+- Adds the `FilterBarInline` component.
+- Adds refined `NewsletterSignup` component with updated props.
+- Adds refined `SocialMediaLinks` component with updated props
+
+### Updates
+
+- Updates Storybook and related npm packages to version `8.1.11`. Does not affect any DS component.
+- Updates `Menu` component with new `showSelectionAsLabel` prop and `aria-label` behavior.
+- Updates the `Banner`, `Button`, `ButtonGroup`, `DatePicker`, `FeaturedContent`, `FeedbackBox`, `Fieldset`, `HelperErrorText`, `Label`, `SkipNavigation`, and `StyledList` components to export all types and prop interfaces.
+
+## 3.1.7 (July 3, 2024)
+
+### Adds
+
+- Adds Storybook interaction tests for the `CheckboxGroup`, `DatePicker`, `FeedbackBox`, and `Slider` components.
+- Adds `digitalCollections` color variant to the `Breadcrumbs` component.
+- Adds `closeOnBlur` prop to the `MultiSelect` component which, when set to true, closes the component if it loses focus.
 
 ### Updates
 
 - Updates base font stack to only `system-ui` and `sans-serif`.
-- Updates `Accordion` to close focused panel when "esc" key is pressed.
-- Updates `Accordion` to close panel when element within panel is focused and "esc" key is pressed.
+- Updates the `Accordion` component to close panel when element within panel is focused and "esc" key is pressed.
 
 ## 3.1.6 (June 20, 2024)
 
@@ -74,6 +219,10 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 - Adds `showRowDividers` prop to show/hide row dividers for the `List` `"dl"` variant.
 
+### Updates
+
+- Updates the `Accordion` component to close focused panel when "esc" key is pressed.
+
 ### Fixes
 
 - Fixes the z-index issue in the `MultiSelect` component's selected item button.