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

package/src/components/Notification/Notification.tsx

@@ -13,12 +13,12 @@ import generateUUID from "../../helpers/generateUUID";
 interface BaseProps {
   /** Optional prop to control text alignment in `NotificationContent` */
   alignText?: boolean;
-  /** Optional prop to control horizontal alignment of the `Notification` content */
-  centered?: boolean;
   /** Optional custom `Icon` that will override the default `Icon`. */
   icon?: JSX.Element;
   /** ID that other components can cross reference for accessibility purposes. */
   id?: string;
+  /** Optional prop to control horizontal alignment of the `Notification` content */
+  isCentered?: boolean;
   /** Optional prop to control the coloring of the `Notification` text and the
    * visibility of an applicable icon. */
   notificationType?: NotificationTypes;
@@ -27,7 +27,7 @@ interface BaseProps {
 // Used for `NotificationHeading` and `Notification`
 type BasePropsWithoutAlignText = Omit<BaseProps, "alignText">;
 // Used for `NotificationContent`
-type BasePropsWithoutCentered = Omit<BaseProps, "centered">;
+type BasePropsWithoutIsCentered = Omit<BaseProps, "isCentered">;
 
 export interface NotificationProps extends BasePropsWithoutAlignText {
   /** Label used to describe the `Notification`'s aside HTML element. */
@@ -55,10 +55,10 @@ export interface NotificationProps extends BasePropsWithoutAlignText {
 export function NotificationHeading(
   props: React.PropsWithChildren<BasePropsWithoutAlignText>
 ) {
-  const { centered, children, icon, id, notificationType } = props;
+  const { children, icon, id, isCentered, notificationType } = props;
   const styles = useMultiStyleConfig("NotificationHeading", {
-    centered,
     icon,
+    isCentered,
     notificationType,
   });
   return (
@@ -79,7 +79,7 @@ export function NotificationHeading(
  * NotificationContent child-component.
  */
 export function NotificationContent(
-  props: React.PropsWithChildren<BasePropsWithoutCentered>
+  props: React.PropsWithChildren<BasePropsWithoutIsCentered>
 ) {
   const { alignText, children, icon, notificationType } = props;
   const styles = useMultiStyleConfig("NotificationContent", {
@@ -102,11 +102,11 @@ export function NotificationContent(
 export default function Notification(props: NotificationProps) {
   const {
     ariaLabel,
-    centered = false,
     className,
     dismissible = false,
     icon,
     id = generateUUID(),
+    isCentered = false,
     noMargin = false,
     notificationContent,
     notificationHeading,
@@ -116,8 +116,8 @@ export default function Notification(props: NotificationProps) {
   const [isOpen, setIsOpen] = useState(true);
   const handleClose = () => setIsOpen(false);
   const styles = useMultiStyleConfig("Notification", {
-    centered,
     dismissible,
+    isCentered,
     noMargin,
     notificationType,
   });
@@ -182,16 +182,16 @@ export default function Notification(props: NotificationProps) {
   const iconElem = iconElement();
   const childHeading = notificationHeading && (
     <NotificationHeading
-      centered={centered}
       icon={iconElem}
       id={id}
+      isCentered={isCentered}
       notificationType={notificationType}
     >
       {notificationHeading}
     </NotificationHeading>
   );
   // Specific alignment styles for the content.
-  const alignText = childHeading && showIcon && (!!icon || !centered);
+  const alignText = childHeading && showIcon && (!!icon || !isCentered);
   const childContent = (
     <NotificationContent
       alignText={alignText}

package/src/components/Pagination/Pagination.stories.mdx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { VStack } from "@chakra-ui/react";
 import {
   ArgsTable,
   Canvas,
@@ -43,7 +44,7 @@ export const hrefProps = getStorybookHrefProps(10);
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.10`   |
-| Latest            | `0.25.12`  |
+| Latest            | `0.25.13`  |
 
 <Description of={Pagination} />
 
@@ -144,7 +145,7 @@ export function CurrentPagePaginationExample() {
   const handleClick = () => setPage(1);
   const handleSelection = (selectedPage) => setPage(selectedPage);
   return (
-    <>
+    <VStack align="start" spacing={6}>
       <Pagination
         pageCount={10}
         currentPage={page}
@@ -153,7 +154,7 @@ export function CurrentPagePaginationExample() {
       <Button type="button" buttonType="primary" onClick={handleClick}>
         Go to Page 1
       </Button>
-    </>
+    </VStack>
   );
 }
 

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

@@ -205,6 +205,31 @@ describe("Pagination", () => {
   });
 
   describe("Behavior", () => {
+    it("navigates to the appropriate page when the Next or Previous links are clicked", () => {
+      const onPageChange = (page: number) => (currentPage = page);
+      let currentPage = 3;
+
+      render(
+        <Pagination
+          pageCount={5}
+          initialPage={currentPage}
+          onPageChange={onPageChange}
+        />
+      );
+
+      let links = screen.getAllByRole("link");
+
+      // Previous link
+      userEvent.click(links[0]);
+      expect(currentPage).toEqual(2);
+
+      links = screen.getAllByRole("link");
+
+      // Next link
+      userEvent.click(links[links.length - 1]);
+      expect(currentPage).toEqual(3);
+    });
+
     it("updates the links href value when getPageHref is used", () => {
       const getPageHref = (page: number) => `?page=${page}`;
       render(
@@ -348,7 +373,9 @@ describe("Pagination", () => {
         />
       );
       expect(warn).toHaveBeenCalledWith(
-        "NYPL Reservoir Pagination: Props for both `getPageHref` and `onPageChange` are passed. Will default to using `getPageHref`."
+        "NYPL Reservoir Pagination: Props for both `getPageHref` and " +
+          "`onPageChange` are passed. The component will default to using " +
+          "`getPageHref`."
       );
     });
 
@@ -359,7 +386,8 @@ describe("Pagination", () => {
         <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."
+        "NYPL Reservoir Pagination: The `currentPage` prop does not work with " +
+          "the `getPageHref` prop. Use `currentPage` with `onPageChange` instead."
       );
     });
   });

package/src/components/Pagination/Pagination.tsx

@@ -64,13 +64,16 @@ const Pagination: React.FC<PaginationProps> = (props: PaginationProps) => {
   }
   if (getPageHref && onPageChange) {
     console.warn(
-      "NYPL Reservoir Pagination: Props for both `getPageHref` and `onPageChange` are passed. Will default to using `getPageHref`."
+      "NYPL Reservoir Pagination: Props for both `getPageHref` and " +
+        "`onPageChange` are passed. The component 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."
+      "NYPL Reservoir Pagination: The `currentPage` prop does not work with " +
+        "the `getPageHref` prop. Use `currentPage` with `onPageChange` instead."
     );
   }
 
@@ -96,7 +99,7 @@ const Pagination: React.FC<PaginationProps> = (props: PaginationProps) => {
   // Select the next page.
   const nextPage = (e: Event) => {
     if (selectedPage < pageCount) {
-      handlePageClick(e, previousPageNumber);
+      handlePageClick(e, nextPageNumber);
     }
   };
   /**

package/src/components/ProgressIndicator/ProgressIndicator.stories.mdx

@@ -71,7 +71,7 @@ export const typesEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.4`   |
-| Latest            | `0.25.8`   |
+| Latest            | `0.25.12`  |
 
 <Description of={ProgressIndicator} />
 

package/src/components/ProgressIndicator/ProgressIndicator.test.tsx

@@ -120,7 +120,9 @@ describe("ProgressIndicator", () => {
     render(<ProgressIndicator labelText="Linear" value={-20} />);
 
     expect(warn).toHaveBeenCalledWith(
-      "ProgressIndicator: pass in a `value` between 0 and 100. Defaulting to 0."
+      "NYPL Reservoir ProgressIndicator: An invalid value was passed for the" +
+        " `value` prop, so 0 will be used. A valid value should be a number" +
+        " between 0 and 100."
     );
   });
 
@@ -129,7 +131,9 @@ describe("ProgressIndicator", () => {
     render(<ProgressIndicator labelText="Linear" value={150} />);
 
     expect(warn).toHaveBeenCalledWith(
-      "ProgressIndicator: pass in a `value` between 0 and 100. Defaulting to 0."
+      "NYPL Reservoir ProgressIndicator: An invalid value was passed for the" +
+        " `value` prop, so 0 will be used. A valid value should be a number" +
+        " between 0 and 100."
     );
   });
 

package/src/components/ProgressIndicator/ProgressIndicator.tsx

@@ -60,7 +60,9 @@ const ProgressIndicator: React.FC<ProgressIndicatorProps> = (
   let finalValue = value;
   if (finalValue < 0 || finalValue > 100) {
     console.warn(
-      "ProgressIndicator: pass in a `value` between 0 and 100. Defaulting to 0."
+      "NYPL Reservoir ProgressIndicator: An invalid value was passed for the" +
+        " `value` prop, so 0 will be used. A valid value should be a number" +
+        " between 0 and 100."
     );
     finalValue = 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.12`  |
+| Latest            | `0.25.13`  |
 
 <Description of={Radio} />
 
@@ -150,3 +150,15 @@ component will handle all the states and data management.
     />
   </DSProvider>
 </Canvas>
+
+## With JSX Element Label
+
+This is useful when you want to add dynamic content to the label or add
+a layout to the label. View the `RadioGroup` documentation for this
+usage.
+
+<Canvas>
+  <DSProvider>
+    <Radio labelText={<span>Arts</span>} name="jsxElementLabel" />
+  </DSProvider>
+</Canvas>

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

@@ -1,16 +1,33 @@
+import { Flex, Spacer } from "@chakra-ui/react";
 import * as React from "react";
 import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
-import * as generateUUID from "../../helpers/generateUUID";
 import Radio from "./Radio";
+import * as generateUUID from "../../helpers/generateUUID";
 
 describe("Radio Accessibility", () => {
-  it("passes axe accessibility", async () => {
+  it("passes axe accessibility test with string label", async () => {
     const { container } = render(<Radio id="inputID" labelText="Test Label" />);
     expect(await axe(container)).toHaveNoViolations();
   });
+
+  it("passes axe accessibility test with jsx label", async () => {
+    const { container } = render(
+      <Radio
+        id="jsxLabel"
+        labelText={
+          <Flex>
+            <span>Arts</span>
+            <Spacer />
+            <span>4</span>
+          </Flex>
+        }
+      />
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
 });
 
 describe("Radio Button", () => {
@@ -147,6 +164,27 @@ describe("Radio Button", () => {
     expect(screen.queryByText("There is an error!")).not.toBeInTheDocument();
   });
 
+  it("logs a warning if `labelText` is not a string and `showLabel` is false", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(
+      <Radio
+        value="arts"
+        labelText={
+          <Flex>
+            <span>Arts</span>
+            <Spacer />
+            <span>4</span>
+          </Flex>
+        }
+        showLabel={false}
+      />
+    );
+
+    expect(warn).toHaveBeenCalledWith(
+      "NYPL Reservoir Radio: `labelText` must be a string when `showLabel` is false."
+    );
+  });
+
   it("renders the UI snapshot correctly", () => {
     const primary = renderer
       .create(<Radio id="inputID" labelText="Test Label" />)
@@ -163,11 +201,27 @@ describe("Radio Button", () => {
     const isDisabled = renderer
       .create(<Radio id="radio-disabled" labelText="Test Label" isDisabled />)
       .toJSON();
+    const withJSXLabel = renderer
+      .create(
+        <Radio
+          id="jsxLabel"
+          labelText={
+            <Flex>
+              <span>Arts</span>
+              <Spacer />
+              <span>4</span>
+            </Flex>
+          }
+          value="arts"
+        />
+      )
+      .toJSON();
 
     expect(primary).toMatchSnapshot();
     expect(isChecked).toMatchSnapshot();
     expect(isRequired).toMatchSnapshot();
     expect(isInvalid).toMatchSnapshot();
     expect(isDisabled).toMatchSnapshot();
+    expect(withJSXLabel).toMatchSnapshot();
   });
 });

package/src/components/Radio/Radio.tsx

@@ -38,7 +38,7 @@ export interface RadioProps {
   /** The radio button's label. This will serve as the text content for the
    * `<label>` element if `showlabel` is true, or an "aria-label" if `showLabel`
    * is false. */
-  labelText: string;
+  labelText: string | JSX.Element;
   /** Used to reference the input element in forms. */
   name?: string;
   /** Should be passed along with `isChecked` for controlled components. */
@@ -74,6 +74,11 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>((props, ref?) => {
   const attributes = {};
 
   if (!showLabel) {
+    if (typeof labelText !== "string") {
+      console.warn(
+        "NYPL Reservoir Radio: `labelText` must be a string when `showLabel` is false."
+      );
+    }
     attributes["aria-label"] =
       labelText && footnote ? `${labelText} - ${footnote}` : labelText;
   } else {

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

@@ -251,3 +251,64 @@ exports[`Radio Button renders the UI snapshot correctly 5`] = `
   </span>
 </label>
 `;
+
+exports[`Radio Button renders the UI snapshot correctly 6`] = `
+<label
+  className="chakra-radio css-13p0l12"
+>
+  <input
+    checked={false}
+    className="chakra-radio__input"
+    disabled={false}
+    id="jsxLabel"
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    required={false}
+    style={
+      Object {
+        "border": "0px",
+        "clip": "rect(0px, 0px, 0px, 0px)",
+        "height": "1px",
+        "margin": "-1px",
+        "overflow": "hidden",
+        "padding": "0px",
+        "position": "absolute",
+        "whiteSpace": "nowrap",
+        "width": "1px",
+      }
+    }
+    type="radio"
+    value="arts"
+  />
+  <span
+    aria-hidden={true}
+    className="css-ssalds"
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+  />
+  <span
+    className="chakra-radio__label css-1y8kf23"
+    onMouseDown={[Function]}
+    onTouchStart={[Function]}
+  >
+    <div
+      className="css-k008qs"
+    >
+      <span>
+        Arts
+      </span>
+      <div
+        className="css-17xejub"
+      />
+      <span>
+        4
+      </span>
+    </div>
+  </span>
+</label>
+`;

package/src/components/RadioGroup/RadioGroup.stories.mdx

@@ -1,3 +1,4 @@
+import { Flex, Spacer } from "@chakra-ui/react";
 import {
   ArgsTable,
   Canvas,
@@ -9,15 +10,12 @@ import { withDesign } from "storybook-addon-designs";
 
 import Radio from "../Radio/Radio";
 import RadioGroup, { onChangeDefault } from "./RadioGroup";
-import { RadioGroupLayoutTypes } from "./RadioGroupLayoutTypes";
+import { LayoutTypes } from "../../helpers/enums";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 import { getStorybookEnumValues } from "../../utils/utils";
 
-export const enumValues = getStorybookEnumValues(
-  RadioGroupLayoutTypes,
-  "RadioGroupLayoutTypes"
-);
+export const enumValues = getStorybookEnumValues(LayoutTypes, "LayoutTypes");
 
 <Meta
   title={getCategory("RadioGroup")}
@@ -37,6 +35,9 @@ export const enumValues = getStorybookEnumValues(
     isDisabled: {
       table: { defaultValue: { summary: false } },
     },
+    isFullWidth: {
+      table: { defaultValue: { summary: false } },
+    },
     isInvalid: {
       table: { defaultValue: { summary: false } },
     },
@@ -45,7 +46,7 @@ export const enumValues = getStorybookEnumValues(
     },
     layout: {
       control: { type: "select" },
-      table: { defaultValue: { summary: "RadioGroupLayoutTypes.Column" } },
+      table: { defaultValue: { summary: "LayoutTypes.Column" } },
       options: enumValues.options,
     },
     key: { table: { disable: true } },
@@ -68,7 +69,7 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.0`   |
-| Latest            | `0.25.10`  |
+| Latest            | `0.25.13`  |
 
 <Description of={RadioGroup} />
 
@@ -82,10 +83,11 @@ export const enumValues = getStorybookEnumValues(
       id: "radioGroup-id",
       invalidText: "error!",
       isDisabled: false,
+      isFullWidth: false,
       isInvalid: false,
       isRequired: false,
       labelText: "Standard Radio Group",
-      layout: "RadioGroupLayoutTypes.Column",
+      layout: "LayoutTypes.Column",
       name: "radio-story",
       onChange: undefined,
       optReqFlag: true,
@@ -127,7 +129,7 @@ a row.
     <RadioGroup
       labelText="Row"
       name="row-example"
-      layout={RadioGroupLayoutTypes.Row}
+      layout={LayoutTypes.Row}
       optReqFlag={false}
     >
       <Radio value="2" labelText="Radio 2" />
@@ -176,6 +178,68 @@ a row.
   </DSProvider>
 </Canvas>
 
+## With JSX Element labels
+
+React elements can be passed to the `labelText` prop of the `Radio` component.
+This is useful if you need to pass information as part of the label. For example,
+if a `Radio` label needs to display how many items that option has, it can be
+displayed with the help of the `Flex` and `Spacer` components.
+
+Note: the width of `RadioGroup` is _not_ set to full width by default. In
+order to make this work, pass in the `isFullWidth` prop.
+
+<Canvas>
+  <DSProvider>
+    <RadioGroup
+      labelText="Radio Group"
+      name="radio-example"
+      optReqFlag={false}
+      isFullWidth
+    >
+      <Radio
+        labelText={
+          <Flex>
+            <span>Arts</span>
+            <Spacer />
+            <span>4</span>
+          </Flex>
+        }
+        value="arts"
+      />
+      <Radio
+        labelText={
+          <Flex>
+            <span>English</span>
+            <Spacer />
+            <span>23</span>
+          </Flex>
+        }
+        value="English"
+      />
+      <Radio
+        labelText={
+          <Flex>
+            <span>Science</span>
+            <Spacer />
+            <span>10</span>
+          </Flex>
+        }
+        value="Science"
+      />
+      <Radio
+        labelText={
+          <Flex>
+            <span>Math</span>
+            <Spacer />
+            <span>3</span>
+          </Flex>
+        }
+        value="Math"
+      />
+    </RadioGroup>
+  </DSProvider>
+</Canvas>
+
 ## Getting Radio Data Values
 
 ### Controlled Component using `name` and `onChange` props