@nypl/design-system-react-components 0.25.11 → 0.25.12

package/src/components/Pagination/Pagination.test.tsx

@@ -11,19 +11,19 @@ describe("Pagination Accessibility", () => {
 
   it("passes axe accessibility on the first page", async () => {
     const { container } = render(
-      <Pagination pageCount={20} initialPage={1} getPageHref={getPageHref} />
+      <Pagination pageCount={20} currentPage={1} getPageHref={getPageHref} />
     );
     expect(await axe(container)).toHaveNoViolations();
   });
   it("passes axe accessibility on a middle page", async () => {
     const { container } = render(
-      <Pagination pageCount={20} initialPage={10} getPageHref={getPageHref} />
+      <Pagination pageCount={20} currentPage={10} getPageHref={getPageHref} />
     );
     expect(await axe(container)).toHaveNoViolations();
   });
   it("passes axe accessibility on the last page", async () => {
     const { container } = render(
-      <Pagination pageCount={20} initialPage={20} getPageHref={getPageHref} />
+      <Pagination pageCount={20} currentPage={20} getPageHref={getPageHref} />
     );
     expect(await axe(container)).toHaveNoViolations();
   });
@@ -166,7 +166,7 @@ describe("Pagination", () => {
       expect(screen.queryByRole("navigation")).not.toBeInTheDocument();
     });
 
-    it("Renders the UI snapshot correctly", () => {
+    it("renders the UI snapshot correctly", () => {
       const firstPage = renderer
         .create(
           <Pagination
@@ -230,7 +230,7 @@ describe("Pagination", () => {
 
     // In this scenario, we need to update the current page ourselves
     // since we stay on the same page.
-    it("When page item is selected, runs the onPageChange callback", () => {
+    it("when page item is selected, runs the onPageChange callback", () => {
       const onPageChange = (page: number) => (currentPage = page);
       let currentPage = 5;
       const { rerender } = render(
@@ -304,5 +304,63 @@ describe("Pagination", () => {
       userEvent.click(links[2]);
       expect(currentPage).toEqual(6);
     });
+
+    it("uses the currentPage prop to update the selected page", () => {
+      const onPageChange = (page: number) => console.log(page);
+      const { rerender } = render(
+        <Pagination currentPage={1} onPageChange={onPageChange} pageCount={5} />
+      );
+
+      let links = screen.getAllByRole("link");
+      let page1 = links[0].getAttribute("aria-current");
+      let page2 = links[1].getAttribute("aria-current");
+      let page3 = links[2].getAttribute("aria-current");
+
+      // Only the current page has `aria-current="page"` for accessibility.
+      expect(page1).toEqual("page");
+      expect(page2).toEqual(null);
+      expect(page3).toEqual(null);
+
+      rerender(
+        <Pagination currentPage={3} onPageChange={onPageChange} pageCount={5} />
+      );
+
+      links = screen.getAllByRole("link");
+      // links[0] is now "Previous"
+      page1 = links[1].getAttribute("aria-current");
+      page2 = links[2].getAttribute("aria-current");
+      page3 = links[3].getAttribute("aria-current");
+
+      expect(page1).toEqual(null);
+      expect(page2).toEqual(null);
+      expect(page3).toEqual("page");
+    });
+
+    it("logs a warning if both `getPageHref` and `onPageChange` props are both passed", () => {
+      const getPageHref = (page: number) => `page=${page}`;
+      const onPageChange = (page: number) => console.log(page);
+      const warn = jest.spyOn(console, "warn");
+      render(
+        <Pagination
+          pageCount={10}
+          onPageChange={onPageChange}
+          getPageHref={getPageHref}
+        />
+      );
+      expect(warn).toHaveBeenCalledWith(
+        "NYPL Reservoir Pagination: Props for both `getPageHref` and `onPageChange` are passed. Will default to using `getPageHref`."
+      );
+    });
+
+    it("logs a warning if both `getPageHref` and `currentPage` props are both passed", () => {
+      const getPageHref = (page: number) => `page=${page}`;
+      const warn = jest.spyOn(console, "warn");
+      render(
+        <Pagination pageCount={10} currentPage={2} getPageHref={getPageHref} />
+      );
+      expect(warn).toHaveBeenCalledWith(
+        "NYPL Reservoir Pagination: The `currentPage` prop does not work with the `getPageHref` prop. Use `currentPage` with `onPageChange` instead."
+      );
+    });
   });
 });

package/src/components/Pagination/Pagination.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import { Box, useMultiStyleConfig } from "@chakra-ui/react";
 
 import Link from "../Link/Link";
@@ -10,14 +10,18 @@ import generateUUID from "../../helpers/generateUUID";
 export interface PaginationProps {
   /** Additional className. */
   className?: string;
+  /** The currentPage can be used to programatically force the selected page to change
+   * without the user explicitly requesting it – for example, if the user should be
+   * brought back to the first page of a set of results after a new search. */
+  currentPage?: number;
   /** The callback function that takes a page number and returns a string
    * to use for a link's `href` attribute. This is used when the current
    * page should refresh when navigating. */
   getPageHref?: undefined | ((pageNumber: number) => string);
   /** ID that other components can cross reference for accessibility purposes. */
   id?: string;
-  /** The current page selected. */
-  initialPage: number;
+  /** The initially selected page (default value is 1). */
+  initialPage?: number;
   /** The callback function called when an item is selected and the current
    * page should not refresh. */
   onPageChange?: (selected: number) => void;
@@ -31,16 +35,28 @@ export interface PaginationProps {
 const Pagination: React.FC<PaginationProps> = (props: PaginationProps) => {
   const {
     className,
+    currentPage,
     getPageHref,
     id = generateUUID(),
     initialPage = 1,
     onPageChange,
     pageCount,
   } = props;
-  const [currentPage, setCurrentPage] = useState<number>(initialPage);
+  const refCurrentPage = useRef(currentPage);
+  const [selectedPage, setSelectedPage] = useState<number>(initialPage);
   const styles = useMultiStyleConfig("Pagination", {});
-  const previousPageNumber = currentPage - 1;
-  const nextPageNumber = currentPage + 1;
+  const previousPageNumber = selectedPage - 1;
+  const nextPageNumber = selectedPage + 1;
+
+  // If the parent passes down a new currentPage, and an onPageChange
+  // function exists, then set the internal state – selectedPage –
+  // to the new currentPage and update the refCurrentPage with that value.
+  React.useEffect(() => {
+    if (onPageChange && currentPage !== refCurrentPage.current) {
+      setSelectedPage(currentPage);
+      refCurrentPage.current = currentPage;
+    }
+  }, [currentPage, onPageChange]);
 
   // If there are 0 or 1 page, the pagination should not show.
   if (pageCount <= 1) {
@@ -48,7 +64,13 @@ const Pagination: React.FC<PaginationProps> = (props: PaginationProps) => {
   }
   if (getPageHref && onPageChange) {
     console.warn(
-      "Props for both `getPageHref` and `onPageChange` are passed. Will default to using `getPageHref`."
+      "NYPL Reservoir Pagination: Props for both `getPageHref` and `onPageChange` are passed. Will default to using `getPageHref`."
+    );
+  }
+
+  if (getPageHref && currentPage) {
+    console.warn(
+      "NYPL Reservoir Pagination: The `currentPage` prop does not work with the `getPageHref` prop. Use `currentPage` with `onPageChange` instead."
     );
   }
 
@@ -59,22 +81,22 @@ const Pagination: React.FC<PaginationProps> = (props: PaginationProps) => {
    * This function is only called when clicking on a link should
    * not update the URL or refresh the page.
    */
-  const selectPage = (e: Event, selectedPage: number) => {
+  const handlePageClick = (e: Event, clickedPage: number) => {
     e.preventDefault && e.preventDefault();
-    if (currentPage === selectedPage) return;
-    setCurrentPage(selectedPage);
-    onPageChange && onPageChange(selectedPage);
+    if (selectedPage === clickedPage) return;
+    setSelectedPage(clickedPage);
+    onPageChange && onPageChange(clickedPage);
   };
   // Select the previous page.
   const previousPage = (e: Event) => {
-    if (currentPage > 1) {
-      selectPage(e, previousPageNumber);
+    if (selectedPage > 1) {
+      handlePageClick(e, previousPageNumber);
     }
   };
   // Select the next page.
   const nextPage = (e: Event) => {
-    if (currentPage < pageCount) {
-      selectPage(e, nextPageNumber);
+    if (selectedPage < pageCount) {
+      handlePageClick(e, previousPageNumber);
     }
   };
   /**
@@ -87,9 +109,9 @@ const Pagination: React.FC<PaginationProps> = (props: PaginationProps) => {
    *    "#" and call the `onPageChange` prop through the `onClick` callback.
    */
   const getLinkElement = (type: string, item?: number) => {
-    const isCurrentPage = currentPage === item;
+    const isSelectedPage = selectedPage === item;
     // The current page link has different styles.
-    const currentStyles = isCurrentPage
+    const currentStyles = isSelectedPage
       ? {
           color: "ui.black",
           pointerEvent: "none",
@@ -100,8 +122,8 @@ const Pagination: React.FC<PaginationProps> = (props: PaginationProps) => {
         href: changeUrls ? getPageHref(item) : "#",
         attributes: {
           "aria-label": `Page ${item}`,
-          "aria-current": isCurrentPage ? "page" : null,
-          onClick: changeUrls ? undefined : (e) => selectPage(e, item),
+          "aria-current": isSelectedPage ? "page" : null,
+          onClick: changeUrls ? undefined : (e) => handlePageClick(e, item),
         },
         text: item,
       },
@@ -210,11 +232,11 @@ const Pagination: React.FC<PaginationProps> = (props: PaginationProps) => {
   };
 
   // Don't display the previous link when you're on the first page.
-  const previousLiLink = currentPage !== 1 && (
+  const previousLiLink = selectedPage !== 1 && (
     <li key="previous">{getLinkElement("previous")}</li>
   );
-  /// Don't display the next link when you're on the last page.
-  const nextLiLink = currentPage !== pageCount && (
+  // Don't display the next link when you're on the last page.
+  const nextLiLink = selectedPage !== pageCount && (
     <li key="next">{getLinkElement("next")}</li>
   );
 
@@ -229,7 +251,7 @@ const Pagination: React.FC<PaginationProps> = (props: PaginationProps) => {
     >
       <List type={ListTypes.Unordered} inline noStyling id={`${id}-list`}>
         {previousLiLink}
-        {getPaginationNumbers(currentPage)}
+        {getPaginationNumbers(selectedPage)}
         {nextLiLink}
       </List>
     </Box>

package/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Pagination Rendering Renders the UI snapshot correctly 1`] = `
+exports[`Pagination Rendering renders the UI snapshot correctly 1`] = `
 <nav
   aria-label="Pagination"
   className="css-0"
@@ -108,7 +108,7 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 1`] = `
 </nav>
 `;
 
-exports[`Pagination Rendering Renders the UI snapshot correctly 2`] = `
+exports[`Pagination Rendering renders the UI snapshot correctly 2`] = `
 <nav
   aria-label="Pagination"
   className="css-0"
@@ -216,7 +216,7 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 2`] = `
 </nav>
 `;
 
-exports[`Pagination Rendering Renders the UI snapshot correctly 3`] = `
+exports[`Pagination Rendering renders the UI snapshot correctly 3`] = `
 <nav
   aria-label="Pagination"
   className="css-0"

package/src/components/Radio/Radio.stories.mdx

@@ -53,7 +53,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.22.0`   |
-| Latest            | `0.25.10`  |
+| Latest            | `0.25.12`  |
 
 <Description of={Radio} />
 

package/src/components/Radio/Radio.tsx

@@ -95,6 +95,7 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>((props, ref?) => {
         onChange={onChange}
         value={value}
         ref={ref}
+        alignItems="flex-start"
         __css={styles}
         {...attributes}
       >

package/src/components/Radio/__snapshots__/Radio.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Radio Button renders the UI snapshot correctly 1`] = `
 <label
-  className="chakra-radio css-1pw4d56"
+  className="chakra-radio css-13p0l12"
 >
   <input
     checked={false}
@@ -50,7 +50,7 @@ exports[`Radio Button renders the UI snapshot correctly 1`] = `
 
 exports[`Radio Button renders the UI snapshot correctly 2`] = `
 <label
-  className="chakra-radio css-1pw4d56"
+  className="chakra-radio css-13p0l12"
   data-checked=""
 >
   <input
@@ -101,7 +101,7 @@ exports[`Radio Button renders the UI snapshot correctly 2`] = `
 
 exports[`Radio Button renders the UI snapshot correctly 3`] = `
 <label
-  className="chakra-radio css-1pw4d56"
+  className="chakra-radio css-13p0l12"
 >
   <input
     aria-required={true}
@@ -150,7 +150,7 @@ exports[`Radio Button renders the UI snapshot correctly 3`] = `
 
 exports[`Radio Button renders the UI snapshot correctly 4`] = `
 <label
-  className="chakra-radio css-1pw4d56"
+  className="chakra-radio css-13p0l12"
   data-invalid=""
 >
   <input
@@ -202,7 +202,7 @@ exports[`Radio Button renders the UI snapshot correctly 4`] = `
 
 exports[`Radio Button renders the UI snapshot correctly 5`] = `
 <label
-  className="chakra-radio css-1pw4d56"
+  className="chakra-radio css-13p0l12"
   data-disabled=""
 >
   <input

package/src/components/RadioGroup/__snapshots__/RadioGroup.test.tsx.snap

@@ -19,7 +19,7 @@ exports[`Radio Button renders the UI snapshot correctly 1`] = `
     role="radiogroup"
   >
     <label
-      className="chakra-radio css-1pw4d56"
+      className="chakra-radio css-13p0l12"
     >
       <input
         checked={false}
@@ -66,7 +66,7 @@ exports[`Radio Button renders the UI snapshot correctly 1`] = `
       </span>
     </label>
     <label
-      className="chakra-radio css-1pw4d56"
+      className="chakra-radio css-13p0l12"
     >
       <input
         checked={false}
@@ -135,7 +135,7 @@ exports[`Radio Button renders the UI snapshot correctly 2`] = `
     role="radiogroup"
   >
     <label
-      className="chakra-radio css-1pw4d56"
+      className="chakra-radio css-13p0l12"
     >
       <input
         checked={false}
@@ -182,7 +182,7 @@ exports[`Radio Button renders the UI snapshot correctly 2`] = `
       </span>
     </label>
     <label
-      className="chakra-radio css-1pw4d56"
+      className="chakra-radio css-13p0l12"
     >
       <input
         checked={false}
@@ -251,7 +251,7 @@ exports[`Radio Button renders the UI snapshot correctly 3`] = `
     role="radiogroup"
   >
     <label
-      className="chakra-radio css-1pw4d56"
+      className="chakra-radio css-13p0l12"
     >
       <input
         checked={false}
@@ -298,7 +298,7 @@ exports[`Radio Button renders the UI snapshot correctly 3`] = `
       </span>
     </label>
     <label
-      className="chakra-radio css-1pw4d56"
+      className="chakra-radio css-13p0l12"
     >
       <input
         checked={false}
@@ -367,7 +367,7 @@ exports[`Radio Button renders the UI snapshot correctly 4`] = `
     role="radiogroup"
   >
     <label
-      className="chakra-radio css-1pw4d56"
+      className="chakra-radio css-13p0l12"
     >
       <input
         checked={false}
@@ -414,7 +414,7 @@ exports[`Radio Button renders the UI snapshot correctly 4`] = `
       </span>
     </label>
     <label
-      className="chakra-radio css-1pw4d56"
+      className="chakra-radio css-13p0l12"
     >
       <input
         checked={false}
@@ -499,7 +499,7 @@ exports[`Radio Button renders the UI snapshot correctly 5`] = `
     role="radiogroup"
   >
     <label
-      className="chakra-radio css-1pw4d56"
+      className="chakra-radio css-13p0l12"
     >
       <input
         checked={false}
@@ -546,7 +546,7 @@ exports[`Radio Button renders the UI snapshot correctly 5`] = `
       </span>
     </label>
     <label
-      className="chakra-radio css-1pw4d56"
+      className="chakra-radio css-13p0l12"
     >
       <input
         checked={false}
@@ -610,7 +610,7 @@ exports[`Radio Button renders the UI snapshot correctly 6`] = `
     role="radiogroup"
   >
     <label
-      className="chakra-radio css-1pw4d56"
+      className="chakra-radio css-13p0l12"
     >
       <input
         checked={false}
@@ -657,7 +657,7 @@ exports[`Radio Button renders the UI snapshot correctly 6`] = `
       </span>
     </label>
     <label
-      className="chakra-radio css-1pw4d56"
+      className="chakra-radio css-13p0l12"
     >
       <input
         checked={false}
@@ -726,7 +726,7 @@ exports[`Radio Button renders the UI snapshot correctly 7`] = `
     role="radiogroup"
   >
     <label
-      className="chakra-radio css-1pw4d56"
+      className="chakra-radio css-13p0l12"
     >
       <input
         aria-required={true}
@@ -774,7 +774,7 @@ exports[`Radio Button renders the UI snapshot correctly 7`] = `
       </span>
     </label>
     <label
-      className="chakra-radio css-1pw4d56"
+      className="chakra-radio css-13p0l12"
     >
       <input
         aria-required={true}
@@ -844,7 +844,7 @@ exports[`Radio Button renders the UI snapshot correctly 8`] = `
     role="radiogroup"
   >
     <label
-      className="chakra-radio css-1pw4d56"
+      className="chakra-radio css-13p0l12"
       data-invalid=""
     >
       <input
@@ -895,7 +895,7 @@ exports[`Radio Button renders the UI snapshot correctly 8`] = `
       </span>
     </label>
     <label
-      className="chakra-radio css-1pw4d56"
+      className="chakra-radio css-13p0l12"
       data-invalid=""
     >
       <input
@@ -968,7 +968,7 @@ exports[`Radio Button renders the UI snapshot correctly 9`] = `
     role="radiogroup"
   >
     <label
-      className="chakra-radio css-1pw4d56"
+      className="chakra-radio css-13p0l12"
       data-disabled=""
     >
       <input
@@ -1019,7 +1019,7 @@ exports[`Radio Button renders the UI snapshot correctly 9`] = `
       </span>
     </label>
     <label
-      className="chakra-radio css-1pw4d56"
+      className="chakra-radio css-13p0l12"
       data-disabled=""
     >
       <input

package/src/components/SearchBar/SearchBar.Test.tsx

@@ -217,6 +217,25 @@ describe("SearchBar", () => {
     expect(searchBarSubmit).toHaveBeenCalledTimes(1);
   });
 
+  it("renders a default placeholder", () => {
+    const textInputProps: TextInputProps = {
+      labelText: "Item Search",
+      name: "textInputName",
+    };
+
+    render(
+      <SearchBar
+        id="requiredState"
+        isDisabled
+        labelText={labelText}
+        onSubmit={jest.fn()}
+        textInputProps={textInputProps}
+      />
+    );
+
+    expect(screen.getByPlaceholderText("Search terms")).toBeInTheDocument();
+  });
+
   it("renders 'required' in the placeholder text", () => {
     const { rerender } = render(
       <SearchBar
@@ -247,8 +266,7 @@ describe("SearchBar", () => {
     ).toBeInTheDocument();
   });
 
-  // TODO: Fix the `Select` component before enabling this test
-  it.skip("renders the UI snapshot correctly", () => {
+  it("renders the UI snapshot correctly", () => {
     const basic = renderer
       .create(
         <SearchBar

package/src/components/SearchBar/SearchBar.stories.mdx

@@ -60,7 +60,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.25.11`  |
+| Latest            | `0.25.12`  |
 
 <Description of={SearchBar} />
 
@@ -166,9 +166,9 @@ const selectProps = {
 ### TextInput Component
 
 To render the `TextInput` component, an object must be passed to the
-`textInputProps` prop. It _must_ include `labelText`, `name`, and `placeholder`
-properties. The `labelText` value won't be rendered but will be used for its
-`aria-label` attribute. Optional properties to pass include `onChange` and `value`.
+`textInputProps` prop. It _must_ include `labelText` and `name` properties. The
+`labelText` value won't be rendered but will be used for its `aria-label`
+attribute. Optional properties to pass include `onChange`, `placeholder`, and `value`.
 
 ```
 const textInputProps = {

package/src/components/SearchBar/SearchBar.tsx

@@ -27,7 +27,7 @@ export interface SelectProps extends BaseProps {
   optionsData: string[];
 }
 export interface TextInputProps extends BaseProps {
-  placeholder: string;
+  placeholder?: string;
   value?: string;
 }
 
@@ -108,7 +108,8 @@ export default function SearchBar(props: SearchBarProps) {
   };
   const footnote = isInvalid ? invalidText : helperText;
   const finalAriaLabel = footnote ? `${labelText} - ${footnote}` : labelText;
-  const textInputPlaceholder = `${textInputProps?.placeholder} ${
+  const inputPlaceholder = textInputProps?.placeholder || "Search terms";
+  const textInputPlaceholder = `${inputPlaceholder} ${
     isRequired ? "(Required)" : ""
   }`;
   const buttonType = noBrandButtonType

package/src/components/Select/Select.stories.mdx

@@ -67,7 +67,7 @@ export const enumValues = getStorybookEnumValues(SelectTypes, "SelectTypes");
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.7.0`    |
-| Latest            | `0.25.11`  |
+| Latest            | `0.25.12`  |
 
 <Description of={Select} />
 

package/src/components/Slider/Slider.stories.mdx

@@ -76,7 +76,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.4`   |
-| Latest            | `0.25.10`  |
+| Latest            | `0.25.12`  |
 
 <Description of={Slider} />
 

package/src/components/Slider/Slider.tsx

@@ -120,8 +120,8 @@ export default function Slider(props: React.PropsWithChildren<SliderProps>) {
   const styles = useMultiStyleConfig("CustomSlider", {
     isDisabled,
     isInvalid: finalIsInvalid,
-    isRangeSlider,
     showBoxes,
+    showValues,
   });
   // Props that the `Slider` and `RangeSlider` Chakra
   // components both use.
@@ -138,6 +138,9 @@ export default function Slider(props: React.PropsWithChildren<SliderProps>) {
     // *final* value once a user stops dragging the slider.
     onChangeEnd: (val) => onChange && onChange(val),
     step,
+    // Additional margins so slider thumbs don't overflow past the
+    // edge when the value boxes or min/max values are hidden.
+    sx: styles.sliderContainer,
   };
   // Props that the two `TextInput` components use.
   const textInputSharedProps = {

package/src/components/StyleGuide/Bidirectionality.stories.mdx

@@ -51,11 +51,11 @@ implementation is `dir="rtl"`.
 
 The placement of this attribute can be added at the root `<html>` element but can
 also be placed in specific DOM elements within a page to target specific page sections.
-For example, if you only want to target NYPL DS components within the `nypl-ds` class,
-the `dir` attribute can be added to that element:
+For example, if you only want to target NYPL DS components within your top-level
+`app` class, the `dir` attribute can be added to that element:
 
 ```jsx
-<div className="app nypl-ds" dir="rtl">
+<div className="app" dir="rtl">
   ...
 </div>
 ```
@@ -66,7 +66,7 @@ do the following:
 
 ```jsx
 // don't do this
-<div className="app nypl-ds" dir="rtl">
+<div className="app" dir="rtl">
   <div dir="rtl">
     <p dir="rtl">
       Some text <button dir="rtl">Button</button>