@nypl/design-system-react-components 0.25.7 → 0.25.10

package/src/components/TextInput/TextInput.test.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { render, screen, fireEvent } from "@testing-library/react";
 import { axe } from "jest-axe";
+import renderer from "react-test-renderer";
 import userEvent from "@testing-library/user-event";
 
 import TextInput from "./TextInput";
@@ -368,3 +369,98 @@ describe("Textarea element type", () => {
     expect(screen.getByLabelText(/Custom textarea Label/i)).toBeInTheDocument();
   });
 });
+
+describe("UI Snapshots", () => {
+  it("renders the text input UI snapshot correctly", () => {
+    const required = renderer
+      .create(
+        <TextInput
+          id="myTextInput"
+          isRequired
+          labelText="Custom Input Label"
+          placeholder="Input Placeholder"
+          type={TextInputTypes.text}
+        />
+      )
+      .toJSON();
+    const optional = renderer
+      .create(
+        <TextInput
+          id="myTextInput"
+          labelText="Custom Input Label"
+          placeholder="Input Placeholder"
+          type={TextInputTypes.text}
+        />
+      )
+      .toJSON();
+    const hiddenLabelText = renderer
+      .create(
+        <TextInput
+          id="myTextInput"
+          isRequired
+          labelText="Custom Input Label"
+          placeholder="Input Placeholder"
+          showLabel={false}
+          type={TextInputTypes.text}
+        />
+      )
+      .toJSON();
+    const withHelperText = renderer
+      .create(
+        <TextInput
+          helperText="Custom helper text"
+          id="myTextInput"
+          isRequired
+          labelText="Custom Input Label"
+          placeholder="Input Placeholder"
+          type={TextInputTypes.text}
+        />
+      )
+      .toJSON();
+    const errorState = renderer
+      .create(
+        <TextInput
+          id="myTextInput"
+          isInvalid
+          isRequired
+          labelText="Custom Input Label"
+          placeholder="Input Placeholder"
+          type={TextInputTypes.text}
+        />
+      )
+      .toJSON();
+    const disabledState = renderer
+      .create(
+        <TextInput
+          id="myTextInput"
+          isDisabled
+          isRequired
+          labelText="Custom Input Label"
+          placeholder="Input Placeholder"
+          type={TextInputTypes.text}
+        />
+      )
+      .toJSON();
+
+    expect(required).toMatchSnapshot();
+    expect(optional).toMatchSnapshot();
+    expect(hiddenLabelText).toMatchSnapshot();
+    expect(withHelperText).toMatchSnapshot();
+    expect(errorState).toMatchSnapshot();
+    expect(disabledState).toMatchSnapshot();
+  });
+  it("renders the textarea UI snapshot correctly", () => {
+    const basicTextarea = renderer
+      .create(
+        <TextInput
+          id="myTextarea"
+          labelText="Custom textarea Label"
+          placeholder="Textarea Placeholder"
+          type={TextInputTypes.textarea}
+        />
+      )
+      .toJSON();
+
+    expect(basicTextarea).toMatchSnapshot();
+  });
+});

package/src/components/TextInput/TextInput.tsx

@@ -12,7 +12,9 @@ import {
   TextInputVariants,
 } from "./TextInputTypes";
 import Label from "../Label/Label";
-import HelperErrorText from "../HelperErrorText/HelperErrorText";
+import HelperErrorText, {
+  HelperErrorTextType,
+} from "../HelperErrorText/HelperErrorText";
 import generateUUID from "../../helpers/generateUUID";
 
 export interface InputProps {
@@ -25,11 +27,11 @@ export interface InputProps {
   /** The starting value of the input field. */
   defaultValue?: string;
   /** Populates the HelperErrorText for the standard state */
-  helperText?: string;
+  helperText?: HelperErrorTextType;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
   /** Populates the HelperErrorText for the error state */
-  invalidText?: string;
+  invalidText?: HelperErrorTextType;
   /** Adds the `disabled` and `aria-disabled` prop to the input when true */
   isDisabled?: boolean;
   /** Adds errored styling to the input/textarea and helper text elements */
@@ -63,7 +65,7 @@ export interface InputProps {
   type?: TextInputTypes;
   /** Populates the value of the input/textarea elements */
   value?: string;
-  /** The variant to display. */
+  /** FOR INTERNAL DS USE ONLY: the input variant to display. */
   variantType?: TextInputVariants;
 }
 
@@ -111,7 +113,7 @@ const TextInput = React.forwardRef<TextInputRefType, InputProps>(
     const finalInvalidText = invalidText
       ? invalidText
       : "There is an error related to this field.";
-    let footnote: string | React.ReactNode = isInvalid
+    let footnote: HelperErrorTextType = isInvalid
       ? finalInvalidText
       : helperText;
     let fieldOutput;
@@ -184,9 +186,11 @@ const TextInput = React.forwardRef<TextInputRefType, InputProps>(
         {fieldOutput}
         {footnote && showHelperInvalidText && !isHidden && (
           <Box __css={finalStyles.helper} aria-disabled={isDisabled}>
-            <HelperErrorText isInvalid={isInvalid} id={`${id}-helperText`}>
-              {footnote}
-            </HelperErrorText>
+            <HelperErrorText
+              id={`${id}-helperText`}
+              isInvalid={isInvalid}
+              text={footnote}
+            />
           </Box>
         )}
       </Box>

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

@@ -0,0 +1,240 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UI Snapshots renders the text input UI snapshot correctly 1`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="css-0"
+    htmlFor="myTextInput"
+    id="myTextInput-label"
+  >
+    Custom Input Label
+    <div
+      className="css-0"
+    >
+      Required
+    </div>
+  </label>
+  <input
+    aria-required={true}
+    className="chakra-input css-0"
+    disabled={false}
+    id="myTextInput"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Input Placeholder"
+    required={true}
+    step={null}
+    type="text"
+  />
+</div>
+`;
+
+exports[`UI Snapshots renders the text input UI snapshot correctly 2`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="css-0"
+    htmlFor="myTextInput"
+    id="myTextInput-label"
+  >
+    Custom Input Label
+    <div
+      className="css-0"
+    >
+      Optional
+    </div>
+  </label>
+  <input
+    className="chakra-input css-0"
+    disabled={false}
+    id="myTextInput"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Input Placeholder"
+    required={false}
+    step={null}
+    type="text"
+  />
+</div>
+`;
+
+exports[`UI Snapshots renders the text input UI snapshot correctly 3`] = `
+<div
+  className="css-0"
+>
+  <input
+    aria-label="Custom Input Label"
+    aria-required={true}
+    className="chakra-input css-0"
+    disabled={false}
+    id="myTextInput"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Input Placeholder"
+    required={true}
+    step={null}
+    type="text"
+  />
+</div>
+`;
+
+exports[`UI Snapshots renders the text input UI snapshot correctly 4`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="css-0"
+    htmlFor="myTextInput"
+    id="myTextInput-label"
+  >
+    Custom Input Label
+    <div
+      className="css-0"
+    >
+      Required
+    </div>
+  </label>
+  <input
+    aria-describedby="myTextInput-helperText"
+    aria-required={true}
+    className="chakra-input css-0"
+    disabled={false}
+    id="myTextInput"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Input Placeholder"
+    required={true}
+    step={null}
+    type="text"
+  />
+  <div
+    aria-disabled={false}
+    className="css-0"
+  >
+    <div
+      aria-atomic={true}
+      aria-live="off"
+      className=" css-0"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "Custom helper text",
+        }
+      }
+      data-isinvalid={false}
+      id="myTextInput-helperText"
+    />
+  </div>
+</div>
+`;
+
+exports[`UI Snapshots renders the text input UI snapshot correctly 5`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="css-0"
+    htmlFor="myTextInput"
+    id="myTextInput-label"
+  >
+    Custom Input Label
+    <div
+      className="css-0"
+    >
+      Required
+    </div>
+  </label>
+  <input
+    aria-invalid={true}
+    aria-required={true}
+    className="chakra-input css-0"
+    disabled={false}
+    id="myTextInput"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Input Placeholder"
+    required={true}
+    step={null}
+    type="text"
+  />
+  <div
+    aria-disabled={false}
+    className="css-0"
+  >
+    <div
+      aria-atomic={true}
+      aria-live="polite"
+      className=" css-0"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "There is an error related to this field.",
+        }
+      }
+      data-isinvalid={true}
+      id="myTextInput-helperText"
+    />
+  </div>
+</div>
+`;
+
+exports[`UI Snapshots renders the text input UI snapshot correctly 6`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="css-0"
+    htmlFor="myTextInput"
+    id="myTextInput-label"
+  >
+    Custom Input Label
+    <div
+      className="css-0"
+    >
+      Required
+    </div>
+  </label>
+  <input
+    aria-required={true}
+    className="chakra-input css-0"
+    disabled={true}
+    id="myTextInput"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Input Placeholder"
+    required={true}
+    step={null}
+    type="text"
+  />
+</div>
+`;
+
+exports[`UI Snapshots renders the textarea UI snapshot correctly 1`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="css-0"
+    htmlFor="myTextarea"
+    id="myTextarea-label"
+  >
+    Custom textarea Label
+    <div
+      className="css-0"
+    >
+      Optional
+    </div>
+  </label>
+  <textarea
+    className="chakra-textarea css-0"
+    disabled={false}
+    id="myTextarea"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Textarea Placeholder"
+    required={false}
+    step={null}
+  />
+</div>
+`;

package/src/components/Toggle/Toggle.stories.mdx

@@ -0,0 +1,200 @@
+import { HStack, VStack, Grid, Box } from "@chakra-ui/react";
+import {
+  Meta,
+  Story,
+  Canvas,
+  ArgsTable,
+  Description,
+} from "@storybook/addon-docs";
+import { withDesign } from "storybook-addon-designs";
+
+import Heading from "../Heading/Heading";
+import SimpleGrid from "../Grid/SimpleGrid";
+import Toggle from "./Toggle";
+import { ToggleSizes } from "./ToggleSizes";
+import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
+import { getStorybookEnumValues } from "../../utils/utils";
+
+export const sizeEnumValues = getStorybookEnumValues(
+  ToggleSizes,
+  "ToggleSizes"
+);
+
+<Meta
+  title={getCategory("Toggle")}
+  component={Toggle}
+  decorators={[withDesign]}
+  parameters={{
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=31581%3A302",
+    },
+    jest: ["Toggle.test.tsx"],
+  }}
+  argTypes={{
+    additionalStyles: { control: false },
+    defaultChecked: { control: false },
+    id: { control: false },
+    key: { table: { disable: true } },
+    name: { control: false },
+    onChange: { control: false },
+    ref: { table: { disable: true } },
+    size: {
+      control: {
+        type: "select",
+        table: { defaultValue: { summary: "ToggleSizes.Large" } },
+        options: sizeEnumValues.options,
+      },
+    },
+  }}
+/>
+
+# Toggle
+
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.25.8`   |
+| Latest            | `0.25.9`   |
+
+<Description of={Toggle} />
+
+The Toggle component is used as an alternative for the Checkbox component and returns a boolean response. Like the Checkbox component, the Toggle component can display a label to the right of the toggle and helper/error text below the toggle.
+
+### Best Practices
+
+Toggle components are commonly used for “on/off” switches to perform binary actions that occur immediately after a user “flips the switch.”
+
+The Toggle component label should clarify the action being performed. Labels should be short and to the point, often three words or less.
+
+<Canvas>
+  <Story
+    name="Toggle"
+    args={{
+      additionalStyles: undefined,
+      defaultChecked: false,
+      helperText: "This is the helper text!",
+      id: "toggle-1",
+      invalidText: "",
+      isChecked: undefined,
+      isDisabled: false,
+      isInvalid: false,
+      isRequired: false,
+      labelText: "Test Label",
+      name: "toggle-1",
+      onChange: undefined,
+      size: "ToogleSizes.Large",
+    }}
+  >
+    {(args) => <Toggle {...args} size={sizeEnumValues.getValue(args.size)} />}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Toggle" />
+
+## Sizes
+
+<Canvas>
+  <DSProvider>
+    <SimpleGrid columns="2">
+      <VStack align="left" spacing="s">
+        <Heading level={3}>Large</Heading>
+        <Toggle size={ToggleSizes.Large} defaultChecked={true} labelText="On" />
+        <Toggle size={ToggleSizes.Large} labelText="Off" />
+      </VStack>
+      <VStack align="left" spacing="s">
+        <Heading level={3}>Small</Heading>
+        <Toggle size={ToggleSizes.Small} defaultChecked={true} labelText="On" />
+        <Toggle size={ToggleSizes.Small} labelText="Off" />
+      </VStack>
+    </SimpleGrid>
+  </DSProvider>
+</Canvas>
+
+## Controlled Toggle
+
+Note that the `isChecked` property in this example is set to `true`. Clicking
+on it won't change the toggle; The `isChecked` prop must now be controlled
+and removed manually by the parent component that controls this state. The
+`onChange` function will be called every time the `isChecked` prop changes.
+
+```jsx
+const isChecked = true;
+const onChange = (e) => {
+  // This will return the value through the event object.
+  console.log(e.target.value);
+};
+
+<Toggle isChecked={true} onChange={onChange} labelText="Controlled Toggle" />;
+```
+
+<Canvas>
+  <DSProvider>
+    <Toggle
+      isChecked={true}
+      onChange={(e) => {
+        console.log(e.target.value);
+      }}
+      labelText="Controlled Toggle"
+    />
+  </DSProvider>
+</Canvas>
+
+## Browser States
+
+<Canvas>
+  <DSProvider>
+    <SimpleGrid columns="3">
+      <VStack align="left" spacing="s">
+        <Heading level={3}>Default</Heading>
+        <Toggle size={ToggleSizes.Large} defaultChecked={true} labelText="On" />
+        <Toggle size={ToggleSizes.Large} labelText="Off" />
+      </VStack>
+      <VStack align="left" spacing="s">
+        <Heading level={3}>Disabled</Heading>
+        <Toggle
+          size={ToggleSizes.Large}
+          defaultChecked={true}
+          isDisabled={true}
+          labelText="On"
+        />
+        <Toggle size={ToggleSizes.Large} labelText="Off" isDisabled={true} />
+      </VStack>
+      <VStack align="left" spacing="s">
+        <Heading level={3}>Error</Heading>
+        <Toggle
+          size={ToggleSizes.Large}
+          defaultChecked={true}
+          labelText="On"
+          isInvalid={true}
+        />
+        <Toggle size={ToggleSizes.Large} labelText="Off" isInvalid={true} />
+      </VStack>
+    </SimpleGrid>
+  </DSProvider>
+</Canvas>
+
+## Layouts
+
+<Canvas>
+  <DSProvider>
+    <SimpleGrid columns="2">
+      <VStack align="left" spacing="s">
+        <Heading level={3}>Grouped</Heading>
+        <Toggle defaultChecked={true} labelText="On" />
+        <Toggle defaultChecked={true} labelText="On" />
+        <Toggle defaultChecked={true} labelText="On" />
+        <Toggle defaultChecked={true} labelText="On" />
+        <Toggle defaultChecked={true} labelText="On" />
+      </VStack>
+      <VStack align="left" spacing="s">
+        <Heading level={3}>With Helper Text</Heading>
+        <Toggle
+          defaultChecked={true}
+          labelText="On"
+          helperText="Component Helper Text"
+        />
+      </VStack>
+    </SimpleGrid>
+  </DSProvider>
+</Canvas>