@nypl/design-system-react-components 0.28.0 → 1.0.2

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

@@ -11,7 +11,7 @@ exports[`Accordion Renders the UI snapshot correctly 1`] = `
     <button
       aria-controls="accordion-panel-accordian-item-0"
       aria-expanded={false}
-      className="chakra-accordion__button css-1l67k39"
+      className="chakra-accordion__button css-ilurlz"
       disabled={false}
       id="accordion-button-accordian-item-0"
       onClick={[Function]}
@@ -20,7 +20,7 @@ exports[`Accordion Renders the UI snapshot correctly 1`] = `
       type="button"
     >
       <div
-        className="css-1eziwv"
+        className="css-ox82o1"
       >
         Gerry Kellman
       </div>
@@ -133,7 +133,7 @@ exports[`Accordion Renders the UI snapshot correctly 2`] = `
     <button
       aria-controls="accordion-panel-accordian-item-0"
       aria-expanded={false}
-      className="chakra-accordion__button css-1l67k39"
+      className="chakra-accordion__button css-ilurlz"
       disabled={false}
       id="accordion-button-accordian-item-0"
       onClick={[Function]}
@@ -142,7 +142,7 @@ exports[`Accordion Renders the UI snapshot correctly 2`] = `
       type="button"
     >
       <div
-        className="css-1eziwv"
+        className="css-ox82o1"
       >
         Gerry Kellman
       </div>
@@ -255,7 +255,7 @@ exports[`Accordion Renders the UI snapshot correctly 3`] = `
     <button
       aria-controls="accordion-panel-accordian-item-0"
       aria-expanded={false}
-      className="chakra-accordion__button css-1l67k39"
+      className="chakra-accordion__button css-ilurlz"
       disabled={false}
       id="accordion-button-accordian-item-0"
       onClick={[Function]}
@@ -264,7 +264,7 @@ exports[`Accordion Renders the UI snapshot correctly 3`] = `
       type="button"
     >
       <div
-        className="css-1eziwv"
+        className="css-ox82o1"
       >
         Gerry Kellman
       </div>
@@ -378,7 +378,7 @@ exports[`Accordion Renders the UI snapshot correctly 4`] = `
     <button
       aria-controls="accordion-panel-accordian-item-0"
       aria-expanded={false}
-      className="chakra-accordion__button css-1l67k39"
+      className="chakra-accordion__button css-ilurlz"
       disabled={false}
       id="accordion-button-accordian-item-0"
       onClick={[Function]}
@@ -387,7 +387,7 @@ exports[`Accordion Renders the UI snapshot correctly 4`] = `
       type="button"
     >
       <div
-        className="css-1eziwv"
+        className="css-ox82o1"
       >
         Gerry Kellman
       </div>
@@ -500,7 +500,7 @@ exports[`Accordion Renders the UI snapshot correctly 5`] = `
     <button
       aria-controls="accordion-panel-accordian-item-0"
       aria-expanded={false}
-      className="chakra-accordion__button css-1uqlcgc"
+      className="chakra-accordion__button css-gne4sq"
       disabled={false}
       id="accordion-button-accordian-item-0"
       onClick={[Function]}
@@ -509,7 +509,7 @@ exports[`Accordion Renders the UI snapshot correctly 5`] = `
       type="button"
     >
       <div
-        className="css-1eziwv"
+        className="css-ox82o1"
       >
         Gerry Kellman
       </div>
@@ -622,7 +622,7 @@ exports[`Accordion Renders the UI snapshot correctly 6`] = `
     <button
       aria-controls="accordion-panel-accordian-item-0"
       aria-expanded={false}
-      className="chakra-accordion__button css-1ld1swj"
+      className="chakra-accordion__button css-11hvvs4"
       disabled={false}
       id="accordion-button-accordian-item-0"
       onClick={[Function]}
@@ -631,7 +631,7 @@ exports[`Accordion Renders the UI snapshot correctly 6`] = `
       type="button"
     >
       <div
-        className="css-1eziwv"
+        className="css-ox82o1"
       >
         Gerry Kellman
       </div>

package/src/components/Button/Button.stories.mdx

@@ -85,7 +85,7 @@ export const iconNames = [
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.28.0`   |
+| Latest            | `1.0.2`    |
 
 ## Table of Contents
 

package/src/components/ButtonGroup/ButtonGroup.stories.mdx

@@ -35,7 +35,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.28.0`   |
-| Latest            | `0.28.0`   |
+| Latest            | `1.0.2`    |
 
 ## Table of Contents
 
@@ -44,6 +44,7 @@ import DSProvider from "../../theme/provider";
 - [Accessibility](#accessibility)
 - [Button Width](#button-width)
 - [Layout](#layout)
+- [isDisabled](#isDisabled)
 
 ## Overview
 
@@ -83,7 +84,7 @@ width.
 
 This component is a wrapper around the `Button` component. For accessibility
 information on the `Button` component, see the
-[Button Accessibility](https://nypl.github.io/nypl-design-system/reservoir/v0/?path=/docs/components-form-elements-button--button-with-controls#accessibility)
+[Button Accessibility](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/components-form-elements-button--button-with-controls#accessibility)
 documentation.
 
 ## Button Width
@@ -145,3 +146,33 @@ The `layout` prop can be used to set the layout to either `row` or `column`.
     </SimpleGrid>
   </DSProvider>
 </Canvas>
+
+## isDisabled
+
+The `isDisabled` prop can be used to disable all the `Button` children at once.
+Individual `Button`s can still be disabled with their own `isDisabled` prop.
+
+<Canvas>
+  <DSProvider>
+    <SimpleGrid columns={1}>
+      <Heading level="three">ButtonGroup isDisabled</Heading>
+      <ButtonGroup isDisabled>
+        <Button buttonType="secondary" id="group-disabled-1">
+          Button disabled
+        </Button>
+        <Button buttonType="secondary" id="group-disabled-2">
+          Button disabled
+        </Button>
+      </ButtonGroup>
+      <Heading level="three">Individual Button isDisabled</Heading>
+      <ButtonGroup>
+        <Button buttonType="secondary" id="individual-disabled-1">
+          Button not disabled
+        </Button>
+        <Button buttonType="secondary" id="individual-disabled-2" isDisabled>
+          Button disabled
+        </Button>
+      </ButtonGroup>
+    </SimpleGrid>
+  </DSProvider>
+</Canvas>

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -76,7 +76,8 @@ export const ButtonGroup = chakra(
             return;
           }
         }
-        newChildren.push(React.cloneElement(child, { key, isDisabled }));
+        const disabledProps = isDisabled ? { isDisabled } : {};
+        newChildren.push(React.cloneElement(child, { key, ...disabledProps }));
       }
     );
 

package/src/components/Card/Card.stories.mdx

@@ -75,7 +75,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.24.0`   |
-| Latest            | `0.28.0`   |
+| Latest            | `1.0.2`    |
 
 ## Table of Contents
 
@@ -107,7 +107,7 @@ grouped together and displayed in some type of grid layout.
 ### CardHeading
 
 The `CardHeading` component mirrors the standard Reservoir Design System (DS)
-`Heading` component and accepts the [same props](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/components-typography-styles-heading--heading-with-controls).
+`Heading` component and accepts the [same props](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/story/components-typography-styles-heading--heading-with-controls).
 
 ### CardActions
 
@@ -612,11 +612,9 @@ image component in using the `imageProps.component` prop.
     <Card
       imageProps={{
         alt: "Alt text",
-        aspectRatio: "sixteenByNine",
         component: (
           <Image src="https://placeimg.com/400/400/animals" alt="Alt text" />
         ),
-        src: "https://placeimg.com/400/200/animals",
       }}
     >
       <CardHeading level="two" id="img1-heading1">

package/src/components/Card/Card.tsx

@@ -222,7 +222,7 @@ export const Card = chakra((props: React.PropsWithChildren<CardProps>) => {
   const windowDimensions = useWindowSize();
   let cardHeadingCount = 0;
 
-  if (imageProps.component && imageProps.aspectRatio !== "square") {
+  if (imageProps.component && imageProps.aspectRatio) {
     console.warn(
       "NYPL Reservoir Card: Both the `imageProps.component` and `imageProps.aspectRatio` " +
         "props were set but `imageProps.aspectRatio` will be ignored in favor " +
@@ -248,6 +248,7 @@ export const Card = chakra((props: React.PropsWithChildren<CardProps>) => {
   const styles = useMultiStyleConfig("Card", {
     hasImage,
     imageIsAtEnd: imageProps.isAtEnd,
+    isAlignedRightActions,
     isBordered,
     isCentered,
     layout,

package/src/components/Chakra/Box.stories.mdx

@@ -14,7 +14,7 @@ import DSProvider from "../../theme/provider";
 | Added             | `0.24.0`   |
 
 Note: This needs the use of the `DSProvider` component. See the
-[README](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/chakra-ui--page#dsprovider)
+[README](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/story/chakra-ui--page#dsprovider)
 for more information.
 
 This component is directly exported from Chakra UI. The `Box` is a simple and

package/src/components/Chakra/Center.stories.mdx

@@ -15,7 +15,7 @@ import DSProvider from "../../theme/provider";
 | Added             | `0.24.0`   |
 
 Note: This needs the use of the `DSProvider` component. See the
-[README](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/chakra-ui--page#dsprovider)
+[README](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/story/chakra-ui--page#dsprovider)
 for more information.
 
 These components are directly exported from Chakra UI. The `Center`, `Circle`,

package/src/components/Chakra/Flex.stories.mdx

@@ -16,7 +16,7 @@ import DSProvider from "../../theme/provider";
 | Latest            | `0.25.10`  |
 
 Note: This needs the use of the `DSProvider` component. See the
-[README](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/chakra-ui--page#dsprovider)
+[README](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/story/chakra-ui--page#dsprovider)
 for more information.
 
 This component is directly exported from Chakra UI. The `Flex` component is

package/src/components/Chakra/Grid.stories.mdx

@@ -14,7 +14,7 @@ import DSProvider from "../../theme/provider";
 | Latest            | `0.25.1`   |
 
 Note: This needs the use of the `DSProvider` component. See the
-[README](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/chakra-ui--page#dsprovider)
+[README](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/story/chakra-ui--page#dsprovider)
 for more information.
 
 This component is directly exported from Chakra UI. The `Grid` component is

package/src/components/Chakra/Stack.stories.mdx

@@ -14,7 +14,7 @@ import DSProvider from "../../theme/provider";
 | Added             | `0.24.0`   |
 
 Note: This needs the use of the `DSProvider` component. See the
-[README](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/chakra-ui--page#dsprovider)
+[README](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/story/chakra-ui--page#dsprovider)
 for more information.
 
 These components are directly exported from Chakra UI. The `Stack`, `HStack`,

package/src/components/Checkbox/Checkbox.stories.mdx

@@ -57,7 +57,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.1.0`    |
-| Latest            | `0.28.0`   |
+| Latest            | `1.0.2`    |
 
 ## Table of Contents
 

package/src/components/Checkbox/Checkbox.test.tsx

@@ -39,12 +39,6 @@ describe("Checkbox Accessibility", () => {
 });
 
 describe("Checkbox", () => {
-  let changeHandler: jest.MockedFunction<() => void>;
-
-  beforeEach(() => {
-    changeHandler = jest.fn();
-  });
-
   it("Renders with a checkbox input and label", () => {
     render(<Checkbox id="inputID" labelText="Test Label" />);
     expect(screen.getByLabelText("Test Label")).toBeInTheDocument();
@@ -189,20 +183,57 @@ describe("Checkbox", () => {
     ).not.toBeInTheDocument();
   });
 
+  it("should call onChange only once when checkbox is clicked", () => {
+    const onChangeMock = jest.fn();
+
+    render(
+      <Checkbox
+        id="onChangeCalledOnce"
+        onChange={onChangeMock}
+        labelText="onChangeTest"
+        showLabel={true}
+        isChecked={false}
+      />
+    );
+
+    expect(
+      screen.getByRole("checkbox", { name: /onchangetest/i })
+    ).toBeInTheDocument();
+    userEvent.click(screen.getByRole("checkbox", { name: /onchangetest/i }));
+    expect(onChangeMock).toBeCalledTimes(1);
+  });
+
   it("Changing the value calls the onChange handler", () => {
+    let isChecked = false;
+    const onChange = (e) => {
+      isChecked = e.target.checked;
+    };
     const utils = render(
       <Checkbox
         id="onChangeTest"
-        onChange={changeHandler}
+        onChange={onChange}
         labelText="onChangeTest Lab"
         showLabel={true}
-        isChecked
+        isChecked={isChecked}
+      />
+    );
+
+    expect(isChecked).toEqual(false);
+    userEvent.click(utils.getByText("onChangeTest Lab"));
+    expect(isChecked).toEqual(true);
+
+    utils.rerender(
+      <Checkbox
+        id="onChangeTest"
+        onChange={onChange}
+        labelText="onChangeTest Lab"
+        showLabel={true}
+        isChecked={isChecked}
       />
     );
 
-    expect(changeHandler).toHaveBeenCalledTimes(0);
-    userEvent.type(utils.getByText("onChangeTest Lab"), "Hello");
-    expect(changeHandler).toHaveBeenCalledTimes(1);
+    userEvent.click(utils.getByText("onChangeTest Lab"));
+    expect(isChecked).toEqual(false);
   });
 
   it("logs a warning if `labelText` is not a string and `showLabel` is false", () => {

package/src/components/Checkbox/Checkbox.tsx

@@ -5,11 +5,10 @@ import {
   useMultiStyleConfig,
 } from "@chakra-ui/react";
 import * as React from "react";
-import { AriaAttributes } from "../../utils/interfaces";
 
-import HelperErrorText, {
-  HelperErrorTextType,
-} from "../HelperErrorText/HelperErrorText";
+import ComponentWrapper from "../ComponentWrapper/ComponentWrapper";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+import { getAriaAttrs } from "../../utils/utils";
 
 interface CheckboxIconProps {
   /** When using the Checkbox as a "controlled" form element, you can specify
@@ -56,10 +55,6 @@ export interface CheckboxProps extends CheckboxIconProps {
   value?: string;
 }
 
-export const onChangeDefault = () => {
-  return;
-};
-
 function CheckboxIcon(props: CheckboxIconProps) {
   // We don't need the `isIndeterminate` or `isChecked` props but it
   // causes rendering issues on the SVG element, so we remove them
@@ -90,6 +85,7 @@ export const Checkbox = chakra(
       isRequired = false,
       labelText,
       name,
+      onChange,
       showHelperInvalidText = true,
       showLabel = true,
       value,
@@ -97,10 +93,15 @@ export const Checkbox = chakra(
     } = props;
     const styles = useMultiStyleConfig("Checkbox", {});
     const footnote = isInvalid ? invalidText : helperText;
-    const ariaAttributes: AriaAttributes = {};
-    const onChange = props.onChange || onChangeDefault;
     // Use Chakra's default indeterminate icon.
     const icon = !isIndeterminate ? <CheckboxIcon /> : undefined;
+    const ariaAttributes = getAriaAttrs({
+      footnote,
+      id,
+      labelText,
+      name: "Checkbox",
+      showLabel,
+    });
 
     if (!id) {
       console.warn(
@@ -108,30 +109,25 @@ export const Checkbox = chakra(
       );
     }
 
-    if (!showLabel) {
-      if (typeof labelText !== "string") {
-        console.warn(
-          "NYPL Reservoir Checkbox: `labelText` must be a string when `showLabel` is false."
-        );
-      }
-      ariaAttributes["aria-label"] =
-        labelText && footnote
-          ? `${labelText} - ${footnote}`
-          : (labelText as string);
-    } else {
-      if (footnote) ariaAttributes["aria-describedby"] = `${id}-helperText`;
-    }
-
     return (
-      <>
+      <ComponentWrapper
+        helperText={helperText}
+        helperTextStyles={styles.helperErrorText}
+        id={id}
+        invalidText={invalidText}
+        isInvalid={isInvalid}
+        showHelperInvalidText={showHelperInvalidText}
+        {...rest}
+      >
         <ChakraCheckbox
-          id={id}
           className={className}
-          name={name || "default"}
+          icon={icon}
+          id={id}
           isDisabled={isDisabled}
+          isIndeterminate={isIndeterminate}
           isInvalid={isInvalid}
           isRequired={isRequired}
-          isIndeterminate={isIndeterminate}
+          name={name || "default"}
           ref={ref}
           value={value}
           {...(isChecked !== undefined
@@ -142,23 +138,13 @@ export const Checkbox = chakra(
             : {
                 defaultIsChecked: false,
               })}
-          icon={icon}
           alignItems="flex-start"
           __css={styles}
           {...ariaAttributes}
-          {...rest}
         >
           {showLabel && labelText}
         </ChakraCheckbox>
-        {footnote && showHelperInvalidText && (
-          <HelperErrorText
-            id={`${id}-helperText`}
-            isInvalid={isInvalid}
-            text={footnote}
-            __css={styles.helperErrorText}
-          />
-        )}
-      </>
+      </ComponentWrapper>
     );
   })
 );