Merge branch 'reservoir-v4' into DSD-2084/table-fontsize-attribute

Author: bigfishdesign13

CHANGELOG.md

@@ -12,6 +12,7 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 - Adds the `useResponsiveSpacing` hook.
 - Adds docs for `Responsive Grid` Style Guide.
+- Consolidates message variants, sizes, highlight colors, and background colors arrays into shared constants
 
 ### Updates
 
@@ -24,6 +25,8 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 - Removes props with HTML equivalents and instructs devs to use the native attributes
 - Updates the grid layout of the content for the `Hero` `"primary"` variant.
 - Changes the names of theme objects that conflict with Chakra's base names from `Custom` to `Reservoir` for consistency. This impacts theme objects for `Breadcrumbs`, `Button`, `Select`, `Slider`, and `Table`.
+- Replaces positional function args with object references in utility functions/components when there are 3 or more arguments.
+- Updates `Table`'s `tableTextSize` prop to accept `caption`.
 
 ### Removals
 
@@ -43,6 +46,9 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 - Removes `role="search"` from `Searchbar` wrapper.
 - Removes use of `useNYPLBreakpoints` hook in `FilterBarInline` and `MultiSelectGroup`.
 - Removes `isDarkMode` function from `Slider` and `Accordion`.
+- Removes `useNYPLBreakpoints` from final component, `SearchBar`, and removes `mediaMatchMock` from test setup since it is no longer necessary.
+- Removes explicit `className` and `children` props in favor of expanded prop type definitions in all components.
+- Removes the use of the `window`'s `scrollIntoView` dependency in the `Tabs` component.
 - Removes the `tableTextSize` prop from the `Table` component in favor of using the native `fontSize` CSS prop.
 
 ## Prerelease

package-lock.json

@@ -4,21 +4,18 @@ import "@testing-library/jest-dom/extend-expect";
 // expect(...).toHaveNoViolations();
 import "jest-axe/extend-expect";
 
-import MatchMedia from "./mediaMatchMock";
-
 jest.setTimeout(35000);
 
 // We expect an error to be thrown and we do catch, but it still gets
 // logged and we don't want to see expected errors while we test.
 jest.spyOn(global.console, "error").mockImplementation(() => jest.fn());
 jest.spyOn(global.console, "warn").mockImplementation(() => jest.fn());
 
-// Mock match media and resize observer
+// Mock resize observer
 class ResizeObserver {
   observe() {}
   unobserve() {}
   disconnect() {}
 }
 
 window.ResizeObserver = ResizeObserver;
-new MatchMedia();

src/__tests__/setup.ts

@@ -2,17 +2,19 @@ import { range } from "../../utils/utils";
 
 describe("range", () => {
   it("returns an array of values not including the stop argument", () => {
-    expect(range(1, 2)).toEqual([1]);
-    expect(range(4, 7)).toEqual([4, 5, 6]);
-    expect(range(2, 9)).toEqual([2, 3, 4, 5, 6, 7, 8]);
+    expect(range({ start: 1, stop: 2 })).toEqual([1]);
+    expect(range({ start: 4, stop: 7 })).toEqual([4, 5, 6]);
+    expect(range({ start: 2, stop: 9 })).toEqual([2, 3, 4, 5, 6, 7, 8]);
   });
 
   it("returns an array of values skipping by the step argument", () => {
-    expect(range(1, 10, 2)).toEqual([1, 3, 5, 7, 9]);
-    expect(range(4, 8, 3)).toEqual([4, 7]);
-    expect(range(2, 20, 2)).toEqual([2, 4, 6, 8, 10, 12, 14, 16, 18]);
-    expect(range(2, 20, 4)).toEqual([2, 6, 10, 14, 18]);
-    expect(range(2, 6, 2)).toEqual([2, 4]);
-    expect(range(2, 20, 5)).toEqual([2, 7, 12, 17]);
+    expect(range({ start: 1, stop: 10, step: 2 })).toEqual([1, 3, 5, 7, 9]);
+    expect(range({ start: 4, stop: 8, step: 3 })).toEqual([4, 7]);
+    expect(range({ start: 2, stop: 20, step: 2 })).toEqual([
+      2, 4, 6, 8, 10, 12, 14, 16, 18,
+    ]);
+    expect(range({ start: 2, stop: 20, step: 4 })).toEqual([2, 6, 10, 14, 18]);
+    expect(range({ start: 2, stop: 6, step: 2 })).toEqual([2, 4]);
+    expect(range({ start: 2, stop: 20, step: 5 })).toEqual([2, 7, 12, 17]);
   });
 });

src/__tests__/utils/utils.test.ts

@@ -105,6 +105,8 @@ the `aria-label` passed to the `Accordion`.
 
 <Canvas of={AccordionStories.WithControls} />
 
+You may pass any Chakra `Box` props, as well as the props below.
+
 <ArgTypes of={AccordionStories.WithControls} />
 
 ## Accessibility

src/components/Accordion/Accordion.mdx

@@ -4,15 +4,11 @@ import {
   AccordionItem,
   AccordionPanel,
   Box,
+  BoxProps,
   chakra,
   ChakraComponent,
 } from "@chakra-ui/react";
-import React, {
-  ButtonHTMLAttributes,
-  forwardRef,
-  useEffect,
-  useState,
-} from "react";
+import React, { forwardRef, useEffect, useState } from "react";
 
 import Icon from "../Icons/Icon";
 
@@ -26,11 +22,7 @@ export interface AccordionDataProps {
   panel: string | React.ReactNode;
 }
 
-type HTMLButtonAttributes = Pick<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  "aria-label"
->;
-export interface AccordionProps extends HTMLButtonAttributes {
+export interface AccordionProps extends Omit<BoxProps, "onChange"> {
   /** Array of data to display, and an optional accordionType */
   accordionData: AccordionDataProps[];
   /** ID that other components can cross reference for accessibility purposes */
@@ -50,12 +42,18 @@ export interface AccordionProps extends HTMLButtonAttributes {
    * component. */
   userClickedOutside?: boolean;
 }
-
 /**
- * Get the minus or plus icon depending on whether the accordion
- * is open or closed.
+ * Get the minus or plus icon depending on whether the accordion is open or closed.
  */
-const getIcon = (isExpanded = false, index: number, id: string) => {
+const getIcon = ({
+  isExpanded = false,
+  index,
+  id,
+}: {
+  isExpanded?: boolean;
+  index: number;
+  id: string;
+}) => {
   const iconName = isExpanded ? "minus" : "plus";
   return (
     <Icon
@@ -73,27 +71,33 @@ const getIcon = (isExpanded = false, index: number, id: string) => {
  * array. This automatically creates the `AccordionButton` and `AccordionPanel`
  * combination that is required for the Chakra `Accordion` component.
  */
-const getElementsFromData = (
-  data: AccordionDataProps[] = [],
-  ariaLabel: string,
-  id: string,
-  isAlwaysRendered: boolean = false,
-  panelMaxHeight: string,
-  hoveredButtonIndex: number,
-  setHoveredButtonIndex: React.Dispatch<React.SetStateAction<number>>
-) => {
+const getElementsFromData = ({
+  data = [],
+  ariaLabel,
+  id,
+  isAlwaysRendered = false,
+  panelMaxHeight,
+  hoveredButtonIndex,
+  setHoveredButtonIndex,
+}: {
+  data?: AccordionDataProps[];
+  ariaLabel: string;
+  id: string;
+  isAlwaysRendered?: boolean;
+  panelMaxHeight: string;
+  hoveredButtonIndex: number;
+  setHoveredButtonIndex: React.Dispatch<React.SetStateAction<number>>;
+}) => {
   const colorMapLight = {
     default: "ui.white",
     warning: "ui.status.primary",
     error: "ui.status.secondary",
   };
-
   const colorMapDark = {
     default: "ui.white",
     warning: "ui.status.primary",
     error: "dark.ui.error.primary",
   };
-
   // For FAQ-style multiple accordions, the button should be bigger.
   // Otherwise, use the default.
   const numAccordionItems = data?.length;
@@ -212,7 +216,11 @@ const getElementsFromData = (
                 >
                   {content.label}
                 </Box>
-                {getIcon(isExpanded, index, id)}
+                {getIcon({
+                  isExpanded,
+                  index,
+                  id,
+                })}
               </AccordionButton>
               {(isAlwaysRendered || isExpanded) && panel}
             </>
@@ -309,15 +317,15 @@ export const Accordion: ChakraComponent<
         ref={ref}
         {...rest}
       >
-        {getElementsFromData(
-          updatedAccordionData,
+        {getElementsFromData({
+          data: updatedAccordionData,
           ariaLabel,
           id,
           isAlwaysRendered,
           panelMaxHeight,
           hoveredButtonIndex,
-          setHoveredButtonIndex
-        )}
+          setHoveredButtonIndex,
+        })}
       </ChakraAccordion>
     );
   })

src/components/Accordion/Accordion.tsx

@@ -17,6 +17,8 @@ export const changelogData: ChangelogData[] = [
     notes: [
       "Removes `ariaLabel` prop and instructs developers to use the native HTML attribute instead.",
       "Removes `isDarkMode` in favor of Chakra's `_dark` conditional key.",
+      "Replaces positional function arguments with objects for `getIcon` and `getElementsFromData`.",
+      "Extends prop definition to include Chakra's `BoxProps`",
     ],
   },
   {

src/components/Accordion/accordionChangelogData.ts

@@ -9,10 +9,10 @@ import { changelogData } from "./alphabetFilterChangelogData";
 
 # AlphabetFilter
 
-| Component Version | DS Version |
-| ----------------- | ---------- |
-| Added             | `1.2.0`    |
-| Latest            | `3.5.4`    |
+| Component Version | DS Version   |
+| ----------------- | ------------ |
+| Added             | `1.2.0`      |
+| Latest            | `Prerelease` |
 
 ## Table of Contents
 
@@ -46,6 +46,9 @@ component is addressing and the full list of items should be displayed.
 
 <Canvas of={AlphabetFilterStories.WithControls} />
 
+The `AlphabetFilter` composes a Chakra `Box` component, so you may pass
+any Chakra `Box` props, as well as the props below.
+
 <ArgTypes of={AlphabetFilterStories.WithControls} />
 
 ## Accessibility

src/components/AlphabetFilter/AlphabetFilter.mdx

@@ -10,7 +10,6 @@ const meta: Meta<typeof AlphabetFilter> = {
   component: AlphabetFilter,
   argTypes: {
     activeLetters: { control: false },
-    className: { control: false },
     currentLetter: { control: false },
     id: { control: false },
     isDisabled: argsBooleanType(),
@@ -28,7 +27,6 @@ type Story = StoryObj<typeof AlphabetFilter>;
 export const WithControls: Story = {
   args: {
     activeLetters: undefined,
-    className: undefined,
     currentLetter: undefined,
     descriptionText: "This is description text.",
     headingText: "AlphabetFilter",

src/components/AlphabetFilter/AlphabetFilter.stories.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef, useRef, useState } from "react";
 import {
   Box,
+  BoxProps,
   chakra,
   ChakraComponent,
   Flex,
@@ -10,12 +11,10 @@ import {
 import { Button } from "../Button/Button";
 import ComponentWrapper from "../ComponentWrapper/ComponentWrapper";
 
-export interface AlphabetFilterProps {
+export interface AlphabetFilterProps extends Omit<BoxProps, "onClick"> {
   /** Array of letters to specify which `Button` components should be set in an `enabled`
    * state. By default, all buttons are `enabled`. */
   activeLetters?: string[];
-  /** A class name for the AlphabetFilter parent div. */
-  className?: string;
   /** The currentLetter can be used to programatically set the selected letter without the
    * user explicitly requesting it. */
   currentLetter?: string;
@@ -42,7 +41,6 @@ export const AlphabetFilter: ChakraComponent<
   forwardRef<HTMLDivElement, AlphabetFilterProps>((props, ref?) => {
     const {
       activeLetters,
-      className,
       currentLetter,
       descriptionText,
       headingText,
@@ -166,7 +164,6 @@ export const AlphabetFilter: ChakraComponent<
       <Box as="nav" ref={ref} aria-label="Filter by letter">
         <ComponentWrapper
           id={id}
-          className={className}
           __css={styles}
           {...rest}
           headingText={headingText ? headingText : undefined}

src/components/AlphabetFilter/AlphabetFilter.tsx

@@ -9,6 +9,13 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Functionality"],
+    notes: ["Removed explicit `classname` prop."],
+  },
   {
     date: "2025-02-13",
     version: "3.5.4",

src/components/AlphabetFilter/alphabetFilterChangelogData.ts

@@ -9,10 +9,10 @@ import { changelogData } from "./audioPlayerChangelogData";
 
 # Audio Player
 
-| Component Version | DS Version |
-| ----------------- | ---------- |
-| Added             | `1.2.0`    |
-| Latest            | `3.0.0`    |
+| Component Version | DS Version   |
+| ----------------- | ------------ |
+| Added             | `1.2.0`      |
+| Latest            | `Prerelease` |
 
 ## Table of Contents
 
@@ -39,6 +39,9 @@ version of the component.
 
 <Canvas of={AudioPlayerStories.WithControls} />
 
+The `AudioPlayer` composes a Chakra `Box` component, so you may pass
+any Chakra `Box` props, as well as the props below.
+
 <ArgTypes of={AudioPlayerStories.WithControls} />
 
 ## Accessibility

src/components/AudioPlayer/AudioPlayer.mdx

@@ -11,7 +11,6 @@ const meta: Meta<typeof AudioPlayer> = {
       control: { type: "radio" },
       options: ["file", "libsyn", "soundcloud", "spotify"],
     },
-    className: { control: false },
     descriptionText: { control: "text" },
     embedCode: { control: false },
     headingText: { control: "text" },
@@ -34,7 +33,6 @@ const libsynPlayerEmbedCode =
 export const WithControls: Story = {
   args: {
     audioType: "libsyn",
-    className: undefined,
     descriptionText:
       "Audio description lorem ipsum dolor simet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis.",
     embedCode: libsynPlayerEmbedCode,

src/components/AudioPlayer/AudioPlayer.stories.tsx

@@ -1,5 +1,6 @@
 import {
   Box,
+  BoxProps,
   chakra,
   ChakraComponent,
   useMultiStyleConfig,
@@ -16,11 +17,9 @@ const thirdPartyServices = ["libsyn", "soundcloud", "spotify"] as const;
 export type ThirdPartyAudioType = typeof thirdPartyServices[number];
 export type AudioType = ThirdPartyAudioType | "file";
 
-export interface AudioPlayerProps {
+export interface AudioPlayerProps extends BoxProps {
   /** Required string used to specify the type of audio playback. */
   audioType: AudioType;
-  /** Optional className you can add in addition to `audio-player`. */
-  className?: string;
   /** Optional string to set the text for the audio player description. */
   descriptionText?: string;
   /** Optional string to set a code snippet provided by Libsyn, SoundCloud or Spotify; the

src/components/AudioPlayer/AudioPlayer.tsx

@@ -9,6 +9,15 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Functionality"],
+    notes: [
+      "Removed explicit `className` prop as interface can be extended to include Chakra prop or HTML attribute types.",
+    ],
+  },
   {
     date: "2024-03-14",
     version: "3.0.0",