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

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

@@ -0,0 +1,178 @@
+import {
+  ArgsTable,
+  Canvas,
+  Description,
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
+import { withDesign } from "storybook-addon-designs";
+
+import Button from "../Button/Button";
+import ButtonGroup from "./ButtonGroup";
+import Heading from "../Heading/Heading";
+import SimpleGrid from "../Grid/SimpleGrid";
+import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
+
+<Meta
+  title={getCategory("ButtonGroup")}
+  component={ButtonGroup}
+  decorators={[withDesign]}
+  parameters={{
+    jest: ["ButtonGroup.test.tsx"],
+  }}
+  argTypes={{
+    buttonWidth: { table: { defaultValue: { summary: "default" } } },
+    className: { control: false },
+    id: { control: false },
+    isDisabled: { table: { defaultValue: { summary: false } } },
+    layout: { table: { defaultValue: { summary: "row" } } },
+  }}
+/>
+
+# ButtonGroup
+
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.28.0`   |
+| Latest            | `1.0.2`    |
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component Props](#component-props)
+- [Accessibility](#accessibility)
+- [Button Width](#button-width)
+- [Layout](#layout)
+- [isDisabled](#isDisabled)
+
+## Overview
+
+<Description of={ButtonGroup} />
+
+Note: The `ButtonGroup` component does not come from Chakra because we want to
+display the `Button`s in a column layout as an option, as well as control the
+width.
+
+## Component Props
+
+<Canvas withToolbar>
+  <Story
+    name="ButtonGroup with Controls"
+    args={{
+      buttonWidth: "default",
+      className: undefined,
+      id: "button-id",
+      isDisabled: false,
+      layout: "row",
+    }}
+  >
+    {(args) => (
+      <ButtonGroup {...args}>
+        <Button buttonType="secondary" id="group-1">
+          Button
+        </Button>
+        <Button id="group-2">Submit</Button>
+      </ButtonGroup>
+    )}
+  </Story>
+</Canvas>
+
+<ArgsTable story="ButtonGroup with Controls" />
+
+## Accessibility
+
+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/v1/?path=/docs/components-form-elements-button--button-with-controls#accessibility)
+documentation.
+
+## Button Width
+
+The `buttonWidth` prop can be used to set the width of the internal `Button`
+components. The default value is `default` and it sets the width to `"fit-content"`
+so the buttons will expand to its content. The `"full"` value will set the width
+to the parent's width.
+
+<Canvas>
+  <DSProvider>
+    <SimpleGrid columns={1}>
+      <Heading level="three">default fit-content</Heading>
+      <ButtonGroup>
+        <Button buttonType="secondary" id="width-fit-1">
+          Button
+        </Button>
+        <Button id="width-fit-2">Submit</Button>
+      </ButtonGroup>
+      <Heading level="three">full width</Heading>
+      <ButtonGroup buttonWidth="full">
+        <Button buttonType="secondary" id="width-full-1">
+          Button
+        </Button>
+        <Button id="width-full-2">Submit</Button>
+      </ButtonGroup>
+    </SimpleGrid>
+  </DSProvider>
+</Canvas>
+
+## Layout
+
+The `layout` prop can be used to set the layout to either `row` or `column`.
+
+<Canvas>
+  <DSProvider>
+    <SimpleGrid columns={1}>
+      <Heading level="three">default row</Heading>
+      <ButtonGroup>
+        <Button buttonType="secondary" id="row-1">
+          Button
+        </Button>
+        <Button id="row-2">Submit</Button>
+      </ButtonGroup>
+      <Heading level="three">column</Heading>
+      <ButtonGroup layout="column">
+        <Button buttonType="secondary" id="column-1">
+          Button
+        </Button>
+        <Button id="column-2">Submit</Button>
+      </ButtonGroup>
+      <Heading level="three">column layout with full-width</Heading>
+      <ButtonGroup buttonWidth="full" layout="column">
+        <Button buttonType="secondary" id="column-full-1">
+          Button
+        </Button>
+        <Button id="column-full-2">Submit</Button>
+      </ButtonGroup>
+    </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.test.tsx

@@ -0,0 +1,141 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { axe } from "jest-axe";
+import renderer from "react-test-renderer";
+
+import Button from "../Button/Button";
+import ButtonGroup from "../ButtonGroup/ButtonGroup";
+
+describe("ButtonGroup Accessibility", () => {
+  it("passes axe accessibility test", async () => {
+    const { container } = render(
+      <ButtonGroup>
+        <Button buttonType="secondary" id="btn-1">
+          Button
+        </Button>
+        <Button id="btn-2">Submit</Button>
+      </ButtonGroup>
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("ButtonGroup", () => {
+  it("renders only Button components", () => {
+    render(
+      <ButtonGroup>
+        <Button buttonType="secondary" id="btn-1">
+          Button
+        </Button>
+        <Button id="btn-2">Submit</Button>
+        <p data-test="paragraph">This is not a button</p>
+      </ButtonGroup>
+    );
+
+    expect(screen.getAllByRole("button")).toHaveLength(2);
+    expect(screen.queryByTestId("paragraph")).not.toBeInTheDocument();
+  });
+
+  it("sets all `Button` children as disabled if isDisabled is true", () => {
+    const { rerender } = render(
+      <ButtonGroup>
+        <Button buttonType="secondary" id="btn-1">
+          Button
+        </Button>
+        <Button id="btn-2">Submit</Button>
+      </ButtonGroup>
+    );
+
+    expect(screen.getAllByRole("button")[0]).not.toBeDisabled();
+    expect(screen.getAllByRole("button")[1]).not.toBeDisabled();
+
+    rerender(
+      <ButtonGroup isDisabled>
+        <Button buttonType="secondary" id="btn-1">
+          Button
+        </Button>
+        <Button id="btn-2">Submit</Button>
+      </ButtonGroup>
+    );
+
+    expect(screen.getAllByRole("button")[0]).toBeDisabled();
+    expect(screen.getAllByRole("button")[1]).toBeDisabled();
+  });
+
+  it("logs a warning when any element that is not a Button is passed ", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(
+      <ButtonGroup>
+        <Button buttonType="secondary" id="btn-1">
+          Button
+        </Button>
+        <Button id="btn-2">Submit</Button>
+        <p data-test="paragraph">This is not a button</p>
+      </ButtonGroup>
+    );
+    expect(warn).toHaveBeenCalledWith(
+      "NYPL Reservoir ButtonGroup: Only Button components can be children of ButtonGroup."
+    );
+  });
+});
+
+describe("ButtonGroup Snapshot", () => {
+  it("renders the UI snapshot correctly", () => {
+    const basic = renderer
+      .create(
+        <ButtonGroup>
+          <Button buttonType="secondary" id="btn-1">
+            Button
+          </Button>
+          <Button id="btn-2">Submit</Button>
+        </ButtonGroup>
+      )
+      .toJSON();
+    const fullWidth = renderer
+      .create(
+        <ButtonGroup buttonWidth="full">
+          <Button buttonType="secondary" id="btn-1">
+            Button
+          </Button>
+          <Button id="btn-2">Submit</Button>
+        </ButtonGroup>
+      )
+      .toJSON();
+    const column = renderer
+      .create(
+        <ButtonGroup layout="column">
+          <Button buttonType="secondary" id="btn-1">
+            Button
+          </Button>
+          <Button id="btn-2">Submit</Button>
+        </ButtonGroup>
+      )
+      .toJSON();
+    const withChakraProps = renderer
+      .create(
+        <ButtonGroup p="s" color="ui.error.primary">
+          <Button buttonType="secondary" id="btn-1">
+            Button
+          </Button>
+          <Button id="btn-2">Submit</Button>
+        </ButtonGroup>
+      )
+      .toJSON();
+    const withOtherProps = renderer
+      .create(
+        <ButtonGroup data-testid="testid">
+          <Button buttonType="secondary" id="btn-1">
+            Button
+          </Button>
+          <Button id="btn-2">Submit</Button>
+        </ButtonGroup>
+      )
+      .toJSON();
+
+    expect(basic).toMatchSnapshot();
+    expect(fullWidth).toMatchSnapshot();
+    expect(column).toMatchSnapshot();
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
+  });
+});

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,100 @@
+import { chakra, Stack, useStyleConfig } from "@chakra-ui/react";
+import * as React from "react";
+
+import Button from "../Button/Button";
+import { LayoutTypes } from "../../helpers/types";
+import useWindowSize from "../../hooks/useWindowSize";
+
+export type ButtonGroupWidths = "default" | "full";
+
+interface ButtonGroupProps {
+  /** Sets the width to "default" (for "fit-content") or "full". */
+  buttonWidth?: ButtonGroupWidths;
+  /** Additional className to use. */
+  className?: string;
+  /** ID that other components can cross reference for accessibility purposes. */
+  id?: string;
+  /** Set's the disabled state to all the internal `Button` components. */
+  isDisabled?: boolean;
+  /** Renders the layout of `Button` components in a row or column. */
+  layout?: LayoutTypes;
+}
+
+const noop = () => {};
+
+/**
+ * A simple wrapper to group `Button` components together. The layout can be set
+ * to row or column and the width of internal `Button` components can be set to
+ * the parent's full width or the `Button`'s content width
+ */
+export const ButtonGroup = chakra(
+  (props: React.PropsWithChildren<ButtonGroupProps>) => {
+    const {
+      buttonWidth = "default",
+      children,
+      className = "",
+      id,
+      isDisabled = false,
+      layout = "row",
+      ...rest
+    } = props;
+    const newChildren: JSX.Element[] = [];
+    // Based on --nypl-breakpoint-medium
+    const breakpointMedium = 600;
+    const [finalLayout, setFinalLayout] = React.useState<LayoutTypes>(layout);
+    const [finalButtonWidth, setFinalButtonWidth] =
+      React.useState<ButtonGroupWidths>(buttonWidth);
+    const windowDimensions = useWindowSize();
+    React.useEffect(() => {
+      // When on a mobile device or narrow window, always set the layout to
+      // column and the button width to "full".
+      if (windowDimensions.width <= breakpointMedium) {
+        setFinalButtonWidth("full");
+        setFinalLayout("column");
+      } else {
+        // Otherwise, set the layout and button width to the values
+        // passed in via the `buttonWidth` and `layout` props.
+        setFinalButtonWidth(buttonWidth);
+        setFinalLayout(layout);
+      }
+    }, [buttonWidth, layout, windowDimensions.width]);
+    const styles = useStyleConfig("ButtonGroup", {
+      buttonWidth: finalButtonWidth,
+    });
+
+    React.Children.map(
+      children as JSX.Element,
+      (child: React.ReactElement, key: number) => {
+        if (child.type !== Button) {
+          // Special case for Storybook MDX documentation.
+          if (child.props.mdxType && child.props.mdxType === "Button") {
+            noop();
+          } else {
+            console.warn(
+              "NYPL Reservoir ButtonGroup: Only Button components can be children of ButtonGroup."
+            );
+            return;
+          }
+        }
+        const disabledProps = isDisabled ? { isDisabled } : {};
+        newChildren.push(React.cloneElement(child, { key, ...disabledProps }));
+      }
+    );
+
+    return (
+      <Stack
+        id={id}
+        className={className}
+        direction={finalLayout}
+        // Always set the spacing to "8px".
+        spacing="xs"
+        sx={styles}
+        {...rest}
+      >
+        {newChildren}
+      </Stack>
+    );
+  }
+);
+
+export default ButtonGroup;

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

@@ -0,0 +1,117 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonGroup Snapshot renders the UI snapshot correctly 1`] = `
+<div
+  className="chakra-stack css-ytb711"
+>
+  <button
+    className="chakra-button css-1xdhyk6"
+    data-testid="button"
+    id="btn-1"
+    type="button"
+  >
+    Button
+  </button>
+  <button
+    className="chakra-button css-1xdhyk6"
+    data-testid="button"
+    id="btn-2"
+    type="button"
+  >
+    Submit
+  </button>
+</div>
+`;
+
+exports[`ButtonGroup Snapshot renders the UI snapshot correctly 2`] = `
+<div
+  className="chakra-stack css-ytb711"
+>
+  <button
+    className="chakra-button css-1xdhyk6"
+    data-testid="button"
+    id="btn-1"
+    type="button"
+  >
+    Button
+  </button>
+  <button
+    className="chakra-button css-1xdhyk6"
+    data-testid="button"
+    id="btn-2"
+    type="button"
+  >
+    Submit
+  </button>
+</div>
+`;
+
+exports[`ButtonGroup Snapshot renders the UI snapshot correctly 3`] = `
+<div
+  className="chakra-stack css-6dfzd0"
+>
+  <button
+    className="chakra-button css-1xdhyk6"
+    data-testid="button"
+    id="btn-1"
+    type="button"
+  >
+    Button
+  </button>
+  <button
+    className="chakra-button css-1xdhyk6"
+    data-testid="button"
+    id="btn-2"
+    type="button"
+  >
+    Submit
+  </button>
+</div>
+`;
+
+exports[`ButtonGroup Snapshot renders the UI snapshot correctly 4`] = `
+<div
+  className="chakra-stack css-1pxah8o"
+>
+  <button
+    className="chakra-button css-1xdhyk6"
+    data-testid="button"
+    id="btn-1"
+    type="button"
+  >
+    Button
+  </button>
+  <button
+    className="chakra-button css-1xdhyk6"
+    data-testid="button"
+    id="btn-2"
+    type="button"
+  >
+    Submit
+  </button>
+</div>
+`;
+
+exports[`ButtonGroup Snapshot renders the UI snapshot correctly 5`] = `
+<div
+  className="chakra-stack css-ytb711"
+  data-testid="testid"
+>
+  <button
+    className="chakra-button css-1xdhyk6"
+    data-testid="button"
+    id="btn-1"
+    type="button"
+  >
+    Button
+  </button>
+  <button
+    className="chakra-button css-1xdhyk6"
+    data-testid="button"
+    id="btn-2"
+    type="button"
+  >
+    Submit
+  </button>
+</div>
+`;