@nypl/design-system-react-components 1.0.2 → 1.0.3-beta

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

@@ -1,178 +0,0 @@
-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

@@ -1,141 +0,0 @@
-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

@@ -1,100 +0,0 @@
-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

@@ -1,117 +0,0 @@
-// 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>
-`;