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

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

@@ -0,0 +1,99 @@
+import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
+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, IconSizes } from "../Icons/IconTypes";
+import DSProvider from "../../theme/provider";
+
+<Meta title={getCategory("Center, Circle, Square")} component={Center} />
+
+# Center, Circle, Square
+
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.24.0`   |
+
+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.
+
+These components are directly exported from Chakra UI. The `Center`, `Circle`,
+and `Square` are layout component that center their child.
+
+All available props can be found on the [Style Props](https://chakra-ui.com/docs/features/style-props)
+guide on the Chakra UI site.
+
+## Center
+
+<Canvas>
+  <Story
+    name="Center, Circle, Square"
+    args={{
+      p: "5",
+      bg: "var(--brand-primary)",
+      color: "var(--ui-white)",
+    }}
+  >
+    {(args) => (
+      <Box>
+        Some text at the beginning.
+        <Center {...args}>
+          So when I look up at the stars, I just wonder...what will they all
+          become someday?
+        </Center>
+        Some text at the end.
+      </Box>
+    )}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <DSProvider>
+    <Center>
+      <Image src="https://placeimg.com/300/400/arch" alt="Centered Image" />
+    </Center>
+  </DSProvider>
+</Canvas>
+
+## Circle
+
+Similar to `Center` but is always a circle!
+
+<Canvas>
+  <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
+
+Similar to `Center` but always has equal height and width.
+
+<Canvas>
+  <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

@@ -0,0 +1,93 @@
+import { Meta, Story, Canvas } from "@storybook/addon-docs";
+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, IconSizes } from "../Icons/IconTypes";
+import Radio from "../Radio/Radio";
+
+<Meta title={getCategory("Stack, HStack, VStack")} component={Stack} />
+
+# Stack, HStack, VStack
+
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.24.0`   |
+
+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.
+
+These components are directly exported from Chakra UI. The `Stack`, `HStack`,
+and `VStack` are layout component that makes it easy to stack elements together
+with spacing between them.
+
+All available props can be found on the [Style Props](https://chakra-ui.com/docs/features/style-props)
+guide on the Chakra UI site.
+
+## Stack
+
+The `Stack` component is the most flexible component because it can stack elements
+both horizontally and vertically through the `direction` prop.
+
+<Canvas>
+  <Story
+    name="Stack, HStack, VStack"
+    args={{
+      direction: "column",
+      spacing: "10px",
+    }}
+    argTypes={{
+      direction: {
+        control: {
+          type: "select",
+        },
+        options: ["column", "row"],
+      },
+    }}
+  >
+    {(args) => (
+      <Stack {...args}>
+        <Circle size="50px" borderColor="ui.black" borderWidth="1px">
+          <Icon name={IconNames.ErrorFilled} size={IconSizes.Large} />
+        </Circle>
+        <Circle size="50px" borderColor="ui.black" borderWidth="1px">
+          <Icon name={IconNames.ErrorOutline} size={IconSizes.Large} />
+        </Circle>
+        <Circle size="50px" borderColor="ui.black" borderWidth="1px">
+          <Icon name={IconNames.Check} size={IconSizes.Large} />
+        </Circle>
+      </Stack>
+    )}
+  </Story>
+</Canvas>
+
+## HStack
+
+Stacks components horizontally.
+
+<Canvas>
+  <DSProvider>
+    <HStack>
+      <Radio checked labelText="Tom Nook" name="testChecked" />
+      <Radio labelText="Timmy" name="testChecked" />
+      <Radio labelText="Tommy" name="testChecked" />
+      <Radio labelText="Celeste" name="testChecked" />
+    </HStack>
+  </DSProvider>
+</Canvas>
+
+## VStack
+
+Stacks components vertically.
+
+<Canvas>
+  <DSProvider>
+    <VStack>
+      <Radio isChecked labelText="Tom Nook" name="testChecked" />
+      <Radio labelText="Timmy" name="testChecked" />
+      <Radio labelText="Tommy" name="testChecked" />
+      <Radio labelText="Celeste" name="testChecked" />
+    </VStack>
+  </DSProvider>
+</Canvas>

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

@@ -3,12 +3,13 @@ import {
   Story,
   Canvas,
   ArgsTable,
-  Preview,
   Description,
 } from "@storybook/addon-docs/blocks";
 import { withDesign } from "storybook-addon-designs";
-import { getCategory } from "../../utils/componentCategories";
+import { HStack } from "@chakra-ui/react";
 
+import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
 import Checkbox from "./Checkbox";
 import { onChangeDefault } from "./Checkbox";
 
@@ -25,89 +26,110 @@ import { onChangeDefault } from "./Checkbox";
     jest: ["Checkbox.test.tsx"],
   }}
   argTypes={{
+    className: { table: { disable: true } },
+    id: { table: { disable: true } },
+    isChecked: { table: { disable: true } },
     onChange: { table: { disable: true } },
-    checked: { table: { disable: true } },
   }}
 />
 
 # Checkbox
 
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.1.0`    |
+| Latest            | `0.25.0`   |
+
 <Description of={Checkbox} />
 
 This component renders a Checkbox button form element. See below for configuration information. Note that the `id` property, while optional, will
 cause an accessibility violation if none is present.
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story
     name="Checkbox"
     args={{
       labelText: "Test Label",
       showLabel: true,
       id: "test_id",
+      name: "test_name",
+      value: "1",
+      isDisabled: false,
+      isRequired: false,
+      isInvalid: false,
+      helperText: "This is the helper text!",
+      errorText: "This is the error text :(",
     }}
   >
     {(args) => <Checkbox {...args} />}
   </Story>
-</Preview>
+</Canvas>
 
 <ArgsTable story="Checkbox" />
 
 ## Checked
 
 <Canvas>
-  <Checkbox
-    checked
-    showLabel={true}
-    onChange={onChangeDefault}
-    labelText="I am checked"
-  ></Checkbox>
+  <DSProvider>
+    <Checkbox labelText="I am checked" isChecked value="1" />
+  </DSProvider>
 </Canvas>
 
 ## Focused
 
 <Canvas>
-  <Checkbox
-    name="testFocus"
-    labelText="Click or tab to the Radio to see its focus state"
-    showLabel={true}
-  ></Checkbox>
+  <DSProvider>
+    <Checkbox labelText="Click or tab to the Checkbox to see its focus state" />
+  </DSProvider>
 </Canvas>
 
 ## Errored
 
 <Canvas>
-  <Checkbox
-    errored
-    showLabel={true}
-    labelText="I am in an error state"
-  ></Checkbox>
+  <DSProvider>
+    <HStack>
+      <Checkbox isInvalid labelText="I am in an error state" />
+      <Checkbox
+        isInvalid
+        isChecked
+        labelText="I am checked in an error state"
+      />
+    </HStack>
+  </DSProvider>
 </Canvas>
 
 ## Disabled
 
 <Canvas>
-  <Checkbox disabled showLabel={true} labelText="I am disabled"></Checkbox>
+  <DSProvider>
+    <HStack>
+      <Checkbox isDisabled labelText="I am disabled" />
+      <Checkbox isDisabled isChecked labelText="I am checked and disabled" />
+    </HStack>
+  </DSProvider>
 </Canvas>
 
 ## Helper Text
 
 <Canvas>
-  <Checkbox
-    name="testHelperText"
-    showLabel={true}
-    labelText="I have helper text"
-    helperText="I am the helper text for this Radio"
-  ></Checkbox>
+  <DSProvider>
+    <Checkbox
+      name="testHelperText"
+      labelText="I have helper text"
+      helperText="I am the helper text for this Checkbox"
+    />
+  </DSProvider>
 </Canvas>
 
 ## Error Text
 
 <Canvas>
-  <Checkbox
-    name="testErrorText"
-    showLabel={true}
-    errored
-    labelText="I have error text"
-    errorText="I am the error text for this Radio"
-  ></Checkbox>
+  <DSProvider>
+    <Checkbox
+      name="testErrorText"
+      labelText="I have error text"
+      errorText="I am the error text for this Checkbox"
+      isInvalid
+    />
+  </DSProvider>
 </Canvas>