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

package/src/components/CheckboxGroup/CheckboxGroup.stories.mdx

@@ -1,462 +0,0 @@
-import { Flex, Spacer } from "@chakra-ui/react";
-import {
-  ArgsTable,
-  Canvas,
-  Description,
-  Meta,
-  Story,
-} from "@storybook/addon-docs";
-import { withDesign } from "storybook-addon-designs";
-
-import Checkbox from "../Checkbox/Checkbox";
-import CheckboxGroup from "./CheckboxGroup";
-import { getCategory } from "../../utils/componentCategories";
-import DSProvider from "../../theme/provider";
-
-<Meta
-  title={getCategory("CheckboxGroup")}
-  component={CheckboxGroup}
-  decorators={[withDesign]}
-  parameters={{
-    design: {
-      type: "figma",
-      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=11895%3A658",
-    },
-    jest: ["CheckboxGroup.test.tsx"],
-  }}
-  argTypes={{
-    children: { table: { disable: true } },
-    defaultValue: { control: false },
-    id: { control: false },
-    isDisabled: {
-      table: { defaultValue: { summary: false } },
-    },
-    isFullWidth: {
-      table: { defaultValue: { summary: true } },
-    },
-    isInvalid: {
-      table: { defaultValue: { summary: false } },
-    },
-    isRequired: {
-      table: { defaultValue: { summary: false } },
-    },
-    key: { table: { disable: true } },
-    layout: {
-      table: { defaultValue: { summary: "column" } },
-    },
-    name: { control: false },
-    onChange: { control: false },
-    ref: { table: { disable: true } },
-    showHelperInvalidText: {
-      table: { defaultValue: { summary: true } },
-    },
-    showLabel: {
-      table: { defaultValue: { summary: true } },
-    },
-    showRequiredLabel: {
-      table: { defaultValue: { summary: true } },
-    },
-  }}
-/>
-
-# CheckboxGroup
-
-| Component Version | DS Version |
-| ----------------- | ---------- |
-| Added             | `0.25.1`   |
-| Latest            | `1.0.2`    |
-
-## Table of Contents
-
-- [Overview](#overview)
-- [Component Props](#component-props)
-- [Accessibility](#accessibility)
-- [Layout Patterns](#layout-patterns)
-- [Errored](#errored)
-- [Required](#required)
-- [Disabled](#disabled)
-- [With JSX Element labels](#with-jsx-element-labels)
-- [Indeterminate Example](#indeterminate-example)
-- [Getting Checkbox Input Values](#getting-checkbox-input-values)
-
-## Overview
-
-<Description of={CheckboxGroup} />
-
-## Component Props
-
-<Canvas withToolbar>
-  <Story
-    name="CheckboxGroup"
-    args={{
-      defaultValue: ["4"],
-      helperText: "This is the helper text for the full group.",
-      id: "checkboxGroup-id",
-      invalidText: "This is the error text :(",
-      isDisabled: false,
-      isFullWidth: false,
-      isInvalid: false,
-      isRequired: false,
-      labelText: "Standard Checkbox Group",
-      layout: "column",
-      name: "checkbox-story",
-      onChange: undefined,
-      showHelperInvalidText: true,
-      showLabel: true,
-      showRequiredLabel: true,
-    }}
-  >
-    {(args) => (
-      <CheckboxGroup {...args}>
-        <Checkbox value="2" labelText="Checkbox 2" />
-        <Checkbox value="3" labelText="Checkbox 3" />
-        <Checkbox value="4" labelText="Checkbox 4" />
-        <Checkbox value="5" labelText="Checkbox 5" />
-      </CheckboxGroup>
-    )}
-  </Story>
-</Canvas>
-
-<ArgsTable story="CheckboxGroup" />
-
-## Accessibility
-
-The `CheckboxGroup` renders a group of `Checkbox` components that are wrapped in
-a `<fieldset>` element. The `<fieldset>` element renders a `<legend>` element that
-can be visually hidden through the `showLabel` prop.
-
-Resources:
-
-- [Chakra UI Checkbox](https://chakra-ui.com/docs/components/form/checkbox)
-
-## Layout Patterns
-
-Use the `layout` prop to set the `Checkbox` buttons to display in a column or in
-a row.
-
-<Canvas>
-  <DSProvider>
-    <CheckboxGroup
-      id="column"
-      labelText="Column (default)"
-      name="column-example"
-    >
-      <Checkbox value="2" labelText="Checkbox 2" />
-      <Checkbox value="3" labelText="Checkbox 3" />
-      <Checkbox value="4" labelText="Checkbox 4" />
-      <Checkbox value="5" labelText="Checkbox 5" />
-    </CheckboxGroup>
-    <br />
-    <CheckboxGroup id="row" labelText="Row" name="row-example" layout="row">
-      <Checkbox value="2" labelText="Checkbox 2" />
-      <Checkbox value="3" labelText="Checkbox 3" />
-      <Checkbox value="4" labelText="Checkbox 4" />
-      <Checkbox value="5" labelText="Checkbox 5" />
-    </CheckboxGroup>
-  </DSProvider>
-</Canvas>
-
-## Errored
-
-<Canvas>
-  <DSProvider>
-    <CheckboxGroup
-      id="errored"
-      invalidText="Error message for the full group."
-      isInvalid
-      labelText="Errored Checkbox Group"
-      name="errored-example"
-    >
-      <Checkbox value="2" labelText="Checkbox 2" />
-      <Checkbox value="3" labelText="Checkbox 3" />
-      <Checkbox value="4" labelText="Checkbox 4" />
-      <Checkbox value="5" labelText="Checkbox 5" />
-    </CheckboxGroup>
-  </DSProvider>
-</Canvas>
-
-## Required
-
-<Canvas>
-  <DSProvider>
-    <CheckboxGroup
-      id="required"
-      isRequired
-      labelText="Required Checkbox Group"
-      name="required-example"
-      helperText="The reason for being required."
-    >
-      <Checkbox value="2" labelText="Checkbox 2" />
-      <Checkbox value="3" labelText="Checkbox 3" />
-      <Checkbox value="4" labelText="Checkbox 4" />
-      <Checkbox value="5" labelText="Checkbox 5" />
-    </CheckboxGroup>
-  </DSProvider>
-</Canvas>
-
-## Disabled
-
-<Canvas>
-  <DSProvider>
-    <CheckboxGroup
-      id="disabled"
-      isDisabled
-      labelText="Disabled Checkbox Group"
-      name="disabled-example"
-      helperText="The reason for being disabled."
-    >
-      <Checkbox value="2" labelText="Checkbox 2" />
-      <Checkbox value="3" labelText="Checkbox 3" />
-      <Checkbox value="4" labelText="Checkbox 4" />
-      <Checkbox value="5" labelText="Checkbox 5" />
-    </CheckboxGroup>
-  </DSProvider>
-</Canvas>
-
-## With JSX Element labels
-
-React elements can be passed to the `labelText` prop of the `Checkbox` component.
-This is useful if you need to pass information as part of the label. For example,
-if a `Checkbox` 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 `CheckboxGroup` is _not_ set to full width by default. In
-order to make this work, pass in the `isFullWidth` prop.
-
-<Canvas>
-  <DSProvider>
-    <CheckboxGroup
-      id="full-width"
-      isFullWidth
-      labelText="Checkbox Group"
-      name="checkbox-example"
-    >
-      <Checkbox
-        labelText={
-          <Flex>
-            <span>Arts</span>
-            <Spacer />
-            <span>4</span>
-          </Flex>
-        }
-        value="arts"
-      />
-      <Checkbox
-        labelText={
-          <Flex>
-            <span>English</span>
-            <Spacer />
-            <span>23</span>
-          </Flex>
-        }
-        value="English"
-      />
-      <Checkbox
-        labelText={
-          <Flex>
-            <span>Science</span>
-            <Spacer />
-            <span>10</span>
-          </Flex>
-        }
-        value="Science"
-      />
-      <Checkbox
-        labelText={
-          <Flex>
-            <span>Math</span>
-            <Spacer />
-            <span>3</span>
-          </Flex>
-        }
-        value="Math"
-      />
-    </CheckboxGroup>
-  </DSProvider>
-</Canvas>
-
-## Indeterminate Example
-
-The "indeterminate" state can be used when a group of checkboxes are not all
-checked or unchecked. In the following example, if only one child checkebox is
-checked, the parent checkbox will be in the "indeterminate" state. Once both
-children are checked, the parent will be in the "checked" state.
-
-The following working example can be used in your application to keep track of
-the checked and indeterminate states - taken and modified from Chakra's
-[Checkbox](https://chakra-ui.com/docs/form/checkbox#indeterminate) documentation.
-Note that this example is specifically using Reservoir Design System (DS)
-`Checkbox` and `CheckboxGroup` components.
-
-```tsx
-export function IndeterminateExample() {
-  const [checkedItems, setCheckedItems] = React.useState([false, false]);
-  const allChecked = checkedItems.every(Boolean);
-  const isIndeterminate = checkedItems.some(Boolean) && !allChecked;
-  return (
-    <CheckboxGroup
-      id="indeterminate"
-      labelText="Indeterminate Example"
-      name="indeterminate-example"
-    >
-      <Checkbox
-        isChecked={allChecked}
-        isIndeterminate={isIndeterminate}
-        onChange={(e) => setCheckedItems([e.target.checked, e.target.checked])}
-        labelText="Parent Checkbox"
-      />
-      <Checkbox
-        isChecked={checkedItems[0]}
-        onChange={(e) => setCheckedItems([e.target.checked, checkedItems[1]])}
-        labelText="Child Checkbox 1"
-      />
-      <Checkbox
-        isChecked={checkedItems[1]}
-        onChange={(e) => setCheckedItems([checkedItems[0], e.target.checked])}
-        labelText="Child Checkbox 2"
-      />
-    </CheckboxGroup>
-  );
-}
-```
-
-export function IndeterminateExample() {
-  const [checkedItems, setCheckedItems] = React.useState([false, false]);
-  const allChecked = checkedItems.every(Boolean);
-  const isIndeterminate = checkedItems.some(Boolean) && !allChecked;
-  return (
-    <CheckboxGroup
-      id="indeterminate"
-      labelText="Indeterminate Example"
-      name="indeterminate-example"
-    >
-      <Checkbox
-        isChecked={allChecked}
-        isIndeterminate={isIndeterminate}
-        onChange={(e) => setCheckedItems([e.target.checked, e.target.checked])}
-        labelText="Parent Checkbox"
-      />
-      <Checkbox
-        isChecked={checkedItems[0]}
-        onChange={(e) => setCheckedItems([e.target.checked, checkedItems[1]])}
-        labelText="Child Checkbox 1"
-      />
-      <Checkbox
-        isChecked={checkedItems[1]}
-        onChange={(e) => setCheckedItems([checkedItems[0], e.target.checked])}
-        labelText="Child Checkbox 2"
-      />
-    </CheckboxGroup>
-  );
-}
-
-<Canvas>
-  <DSProvider>
-    <IndeterminateExample />
-  </DSProvider>
-</Canvas>
-
-## Getting Checkbox Input Values
-
-### Controlled Component using `name`, `defaultValue`, and `onChange` props
-
-If your application uses controlled React components and the DS CheckboxGroup
-must be controlled, you can extract the data through the `name`, `defaultValue`,
-and `onChange` props. The `onChange` function will be called every time a new
-`Checkbox` value is checked or unchecked.
-
-```jsx
-const onChange = (data: string[]) => {
-  // This will return the values selected as an array of strings.
-  // Ex: ["2", "4"]
-  console.log(data);
-};
-// ...
-
-// Example of the DS CheckboxGroup instance with the function above:
-<CheckboxGroup
-  id="controlled-example"
-  labelText="Checkbox Group"
-  name="CheckboxExample"
-  defaultValue={["2"]}
-  onChange={onChange}
->
-  <Checkbox value="2" labelText="Checkbox 2" />
-  <Checkbox value="3" labelText="Checkbox 3" />
-  <Checkbox value="4" labelText="Checkbox 4" />
-</CheckboxGroup>;
-```
-
-### Uncontrolled Component using `ref`s
-
-If your application uses uncontrolled components, you can pass React `ref` props
-to the DS CheckboxGroup component to get the selected value from the DOM.
-
-The following example is using the `register` React `ref` from the
-`react-hook-form` package.
-
-```jsx
-import { useFormContext, Controller } from "react-hook-form";
-// ...
-const { register, handleSubmit, control } = useFormContext();
-// ...
-const submitForm = (formData) => {
-  // This will return an object with all the DOM element values that were
-  // registered with a `name` attribute.
-  // {
-  //   checkboxExample: ["3"]
-  // }
-  console.log(formData);
-  // ...
-};
-
-<form
-  onSubmit={handleSubmit(submitForm)}
-  method="post"
-  action="/some/api/endpoint"
->
-  <Controller
-    as={
-      <CheckboxGroup
-        id="uncontrolled-example"
-        labelText="Checkbox Group"
-        name="checkboxExample"
-        defaultValue={["3"]}
-        ref={register()}
-      >
-        <Checkbox value="2" labelText="Checkbox 2" />
-        <Checkbox value="3" labelText="Checkbox 3" />
-        <Checkbox value="4" labelText="Checkbox 4" />
-      </CheckboxGroup>
-    }
-    name="checkboxExample"
-    control={control}
-  />
-</form>;
-```
-
-The above is specific to `react-hook-form` but a similar pattern can be used
-with normal React `ref` values.
-
-```jsx
-const CheckboxGroupRef = React.createRef<HTMLInputElement>();
-// ...
-<CheckboxGroup
-  id="uncontrolled-example"
-  labelText="Checkbox Group"
-  name="checkboxExample"
-  defaultValue={["3"]}
-  ref={CheckboxGroupRef}
->
-  <Checkbox value="2" labelText="Checkbox 2" />
-  <Checkbox value="3" labelText="Checkbox 3" />
-  <Checkbox value="4" labelText="Checkbox 4" />
-</CheckboxGroup>
-
-// ...
-// Get the value through:
-const onSubmit = () => {
-  // ...
-  const CheckboxGroupValue = CheckboxGroupRef.current.value;
-};
-```