@nypl/design-system-react-components 0.25.0 → 0.25.1

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

@@ -1,10 +1,11 @@
 import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
-import { Box, Center, Square, Circle } from "@chakra-ui/react";
+import { Box, Center, Square, Circle, HStack } from "@chakra-ui/react";
 
 import { getCategory } from "../../utils/componentCategories";
 import Image from "../Image/Image";
 import Icon from "../Icons/Icon";
-import { IconNames, IconColors } from "../Icons/IconTypes";
+import { IconNames, IconColors, IconSizes } from "../Icons/IconTypes";
+import DSProvider from "../../theme/provider";
 
 <Meta title={getCategory("Center, Circle, Square")} component={Center} />
 
@@ -60,12 +61,20 @@ guide on the Chakra UI site.
 Similar to `Center` but is always a circle!
 
 <Canvas>
-  <Circle size="50px" bg="var(--ui-test)">
-    <Icon name={IconNames.download} />
-  </Circle>
-  <Circle size="50px" bg="var(--ui-link-primary)">
-    <Icon name={IconNames.check} color={IconColors.ui_white} />
-  </Circle>
+  <DSProvider>
+    <HStack spacing="s">
+      <Circle size="50px" bg="var(--ui-test)">
+        <Icon name={IconNames.Download} size={IconSizes.Large} />
+      </Circle>
+      <Circle size="50px" bg="var(--ui-link-primary)">
+        <Icon
+          name={IconNames.Check}
+          color={IconColors.UiWhite}
+          size={IconSizes.Large}
+        />
+      </Circle>
+    </HStack>
+  </DSProvider>
 </Canvas>
 
 ## Square
@@ -73,10 +82,18 @@ Similar to `Center` but is always a circle!
 Similar to `Center` but always has equal height and width.
 
 <Canvas>
-  <Square size="50px" bg="var(--ui-test)">
-    <Icon name={IconNames.download} />
-  </Square>
-  <Square size="50px" bg="var(--ui-link-primary)">
-    <Icon name={IconNames.check} color={IconColors.ui_white} />
-  </Square>
+  <DSProvider>
+    <HStack spacing="s">
+      <Square size="50px" bg="var(--ui-test)">
+        <Icon name={IconNames.Download} size={IconSizes.Large} />
+      </Square>
+      <Square size="50px" bg="var(--ui-link-primary)">
+        <Icon
+          name={IconNames.Check}
+          color={IconColors.UiWhite}
+          size={IconSizes.Large}
+        />
+      </Square>
+    </HStack>
+  </DSProvider>
 </Canvas>

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

@@ -0,0 +1,79 @@
+import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
+import { Box } from "@chakra-ui/react";
+import { Grid, GridItem } from "@chakra-ui/react";
+import { getCategory } from "../../utils/componentCategories";
+
+<Meta title={getCategory("Grid")} component={Grid} />
+
+# Grid
+
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.25.1`   |
+
+Note: This needs the use of the `DSProvider` component. See the [README](https://github.com/NYPL/nypl-design-system#using-the-design-system-in-your-product)
+for more information.
+
+This component is directly exported from Chakra UI. The `Grid` component is useful for grid layouts and offers more complexity and formatting options than the DS `SimpleGrid` component. `Grid` is `Box` with `display: grid` and it comes with helpful style shorthand. It renders a `div` element.
+
+Details about available props and related child components can be found on the [Grid component](https://chakra-ui.com/docs/layout/grid)
+page on the Chakra UI site.
+
+<Canvas>
+  <Story
+    name="Grid"
+    args={{
+      templateColumns: "repeat(5, 1fr)",
+      gap: "l",
+    }}
+  >
+    {(args) => (
+      <Grid {...args}>
+        <Box w="100%" h="20" bg="brand.primary" />
+        <Box w="100%" h="20" bg="brand.secondary" />
+        <Box w="100%" h="20" bg="brand.primary" />
+        <Box w="100%" h="20" bg="brand.secondary" />
+        <Box w="100%" h="20" bg="brand.primary" />
+        <Box w="100%" h="20" bg="brand.secondary" />
+        <Box w="100%" h="20" bg="brand.primary" />
+        <Box w="100%" h="20" bg="brand.secondary" />
+        <Box w="100%" h="20" bg="brand.primary" />
+        <Box w="100%" h="20" bg="brand.secondary" />
+      </Grid>
+    )}
+  </Story>
+</Canvas>
+
+## Complex Layouts with Grid Child Components
+
+In some layouts, you may need certain grid items to span a specific amount of columns or rows instead of an even distribution. To achieve this, you need to pass the `colSpan` prop to the `GridItem` component to span across columns and also pass the `rowSpan` component to span across rows. You also need to specify the `templateColumns` and `templateRows`.
+
+<Canvas>
+  <DSProvider>
+    <Grid
+      h="200px"
+      templateRows="repeat(2, 1fr)"
+      templateColumns="repeat(5, 1fr)"
+      gap="32"
+    >
+      <GridItem rowSpan={2} colSpan={1} bg="var(--ui-link-primary)" />
+      <GridItem colSpan={2} bg="var(--ui-success-primary)" />
+      <GridItem colSpan={2} bg="var(--ui-success-secondary)" />
+      <GridItem colSpan={4} bg="var(--ui-link-secondary)" />
+    </Grid>
+  </DSProvider>
+</Canvas>
+
+```jsx
+<Grid
+  h="200px"
+  templateRows="repeat(2, 1fr)"
+  templateColumns="repeat(5, 1fr)"
+  gap="32"
+>
+  <GridItem rowSpan={2} colSpan={1} bg="var(--ui-link-primary)" />
+  <GridItem colSpan={2} bg="var(--ui-success-primary)" />
+  <GridItem colSpan={2} bg="var(--ui-success-secondary)" />
+  <GridItem colSpan={4} bg="var(--ui-link-secondary)" />
+</Grid>
+```

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

@@ -4,7 +4,7 @@ import { Box, Stack, HStack, VStack, Circle } from "@chakra-ui/react";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 import Icon from "../Icons/Icon";
-import { IconNames, IconRotationTypes, IconColors } from "../Icons/IconTypes";
+import { IconNames, IconRotationTypes, IconSizes } from "../Icons/IconTypes";
 import Radio from "../Radio/Radio";
 
 <Meta title={getCategory("Stack, HStack, VStack")} component={Stack} />
@@ -49,13 +49,13 @@ both horizontally and vertically through the `direction` prop.
     {(args) => (
       <Stack {...args}>
         <Circle size="50px" borderColor="ui.black" borderWidth="1px">
-          <Icon name={IconNames.error_filled} />
+          <Icon name={IconNames.ErrorFilled} size={IconSizes.Large} />
         </Circle>
         <Circle size="50px" borderColor="ui.black" borderWidth="1px">
-          <Icon name={IconNames.error_outline} />
+          <Icon name={IconNames.ErrorOutline} size={IconSizes.Large} />
         </Circle>
         <Circle size="50px" borderColor="ui.black" borderWidth="1px">
-          <Icon name={IconNames.check} />
+          <Icon name={IconNames.Check} size={IconSizes.Large} />
         </Circle>
       </Stack>
     )}

package/src/components/Checkbox/Checkbox.tsx

@@ -51,7 +51,9 @@ export const onChangeDefault = () => {
 };
 
 function CheckboxIcon(props) {
-  const { isIndeterminate, ...rest } = props;
+  // Don't need the `isChecked` prop but it causes
+  // rendering issues on the SVG element.
+  const { isIndeterminate, isChecked, ...rest } = props;
 
   const d = isIndeterminate
     ? "M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm0,19a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,12,19Zm1.6-6.08a1,1,0,0,0-.6.917,1,1,0,1,1-2,0,3,3,0,0,1,1.8-2.75A2,2,0,1,0,10,9.255a1,1,0,1,1-2,0,4,4,0,1,1,5.6,3.666Z"
@@ -70,7 +72,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
       className,
       errorText,
       helperText,
-      id,
+      id = generateUUID(),
       isChecked,
       isDisabled = false,
       isInvalid = false,
@@ -84,20 +86,19 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
     const styles = useMultiStyleConfig("Checkbox", {});
     const footnote = isInvalid ? errorText : helperText;
     const attributes = {};
-    const checkboxID = id || generateUUID();
     const onChange = props.onChange || onChangeDefault;
 
     if (!showLabel) {
       attributes["aria-label"] =
         labelText && footnote ? `${labelText} - ${footnote}` : labelText;
     } else {
-      if (footnote) attributes["aria-describedby"] = `${checkboxID}-helperText`;
+      if (footnote) attributes["aria-describedby"] = `${id}-helperText`;
     }
 
     return (
       <>
         <ChakraCheckbox
-          id={checkboxID}
+          id={id}
           className={className}
           name={name || "default"}
           isDisabled={isDisabled}
@@ -107,14 +108,13 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
           value={value}
           {...(isChecked !== undefined
             ? {
-                isChecked: isChecked,
-                onChange: onChange,
+                isChecked,
+                onChange,
               }
             : {
                 defaultIsChecked: false,
               })}
           icon={<CheckboxIcon />}
-          //iconColor="ui.focus"
           __css={styles}
           {...attributes}
         >
@@ -122,10 +122,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
         </ChakraCheckbox>
         {footnote && showLabel && (
           <Box __css={styles.helper} aria-disabled={isDisabled}>
-            <HelperErrorText
-              isError={isInvalid}
-              id={`${checkboxID}-helperText`}
-            >
+            <HelperErrorText isError={isInvalid} id={`${id}-helperText`}>
               {footnote}
             </HelperErrorText>
           </Box>

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

@@ -45,7 +45,6 @@ exports[`Checkbox Renders the UI snapshot correctly 1`] = `
     <svg
       className="chakra-icon css-1vfv7ic"
       focusable={false}
-      isChecked={false}
       viewBox="0 0 24 24"
     >
       <path
@@ -67,6 +66,7 @@ exports[`Checkbox Renders the UI snapshot correctly 1`] = `
 exports[`Checkbox Renders the UI snapshot correctly 2`] = `
 <label
   className="chakra-checkbox css-1uiwwan"
+  data-checked=""
   onClick={[Function]}
 >
   <input
@@ -110,7 +110,6 @@ exports[`Checkbox Renders the UI snapshot correctly 2`] = `
     <svg
       className="chakra-icon css-oi1lnb"
       focusable={false}
-      isChecked={true}
       viewBox="0 0 24 24"
     >
       <path
@@ -175,7 +174,6 @@ exports[`Checkbox Renders the UI snapshot correctly 3`] = `
     <svg
       className="chakra-icon css-1vfv7ic"
       focusable={false}
-      isChecked={false}
       viewBox="0 0 24 24"
     >
       <path
@@ -197,6 +195,7 @@ exports[`Checkbox Renders the UI snapshot correctly 3`] = `
 exports[`Checkbox Renders the UI snapshot correctly 4`] = `
 <label
   className="chakra-checkbox css-1uiwwan"
+  data-invalid=""
   onClick={[Function]}
 >
   <input
@@ -240,7 +239,6 @@ exports[`Checkbox Renders the UI snapshot correctly 4`] = `
     <svg
       className="chakra-icon css-1vfv7ic"
       focusable={false}
-      isChecked={false}
       viewBox="0 0 24 24"
     >
       <path
@@ -307,7 +305,6 @@ exports[`Checkbox Renders the UI snapshot correctly 5`] = `
     <svg
       className="chakra-icon css-1vfv7ic"
       focusable={false}
-      isChecked={false}
       viewBox="0 0 24 24"
     >
       <path

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

@@ -0,0 +1,249 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  ArgsTable,
+  Description,
+} from "@storybook/addon-docs/blocks";
+import { withDesign } from "storybook-addon-designs";
+
+import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
+import CheckboxGroup from "./CheckboxGroup";
+import { CheckboxGroupLayoutTypes } from "./CheckboxGroupLayoutTypes";
+import Checkbox from "../Checkbox/Checkbox";
+
+<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: { table: { disable: true } },
+    id: { table: { disable: true } },
+    name: { table: { disable: true } },
+    onChange: { table: { disable: true } },
+  }}
+/>
+
+# CheckboxGroup
+
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.25.1`   |
+| Latest            | `0.25.1`   |
+
+<Description of={CheckboxGroup} />
+
+<Canvas withToolbar>
+  <Story
+    name="CheckboxGroup"
+    args={{
+      defaultValue: ["4"],
+      invalidText: "This is the error text :(",
+      helperText: "This is the helper text for the full group.",
+      isDisabled: false,
+      isInvalid: false,
+      isRequired: false,
+      labelText: "Standard Checkbox Group",
+      layout: CheckboxGroupLayoutTypes.Column,
+      name: "checkbox-story",
+      optReqFlag: true,
+      showLabel: 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" />
+
+## Layout Patterns
+
+Use the `layout` prop to set the `Checkbox` buttons to display in a column or in
+a row.
+
+<Canvas>
+  <DSProvider>
+    <CheckboxGroup
+      labelText="Column (default)"
+      name="column-example"
+      optReqFlag={false}
+    >
+      <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
+      labelText="Row"
+      name="row-example"
+      layout={CheckboxGroupLayoutTypes.Row}
+      optReqFlag={false}
+    >
+      <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
+      labelText="Errored Checkbox Group"
+      name="errored-example"
+      optReqFlag={false}
+      invalidText="Error message for the full group."
+      isInvalid
+    >
+      <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
+      labelText="Disabled Checkbox Group"
+      name="disabled-example"
+      optReqFlag={false}
+      helperText="The reason for being disabled."
+      isDisabled
+    >
+      <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>
+
+## Getting Checkbox Data 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;
+};
+```