@nypl/design-system-react-components 0.25.12 → 0.25.13

package/src/components/Text/Text.stories.mdx

@@ -8,14 +8,11 @@ import {
 import { withDesign } from "storybook-addon-designs";
 
 import Text from "./Text";
-import { TextDisplaySizes } from "./TextTypes";
+import { TextSizes } from "./TextTypes";
 import { getCategory } from "../../utils/componentCategories";
 import { getStorybookEnumValues } from "../../utils/utils";
 
-export const enumValues = getStorybookEnumValues(
-  TextDisplaySizes,
-  "TextDisplaySizes"
-);
+export const enumValues = getStorybookEnumValues(TextSizes, "TextSizes");
 
 <Meta
   title={getCategory("Text")}
@@ -29,14 +26,14 @@ export const enumValues = getStorybookEnumValues(
   }}
   argTypes={{
     className: { control: false },
-    displaySize: {
-      control: { type: "select" },
-      options: enumValues.options,
-      table: { defaultValue: { summary: "TextDisplaySizes.Default" } },
-    },
     isBold: { table: { defaultValue: { summary: false } } },
     isItalic: { table: { defaultValue: { summary: false } } },
     noSpace: { table: { defaultValue: { summary: false } } },
+    size: {
+      control: { type: "select" },
+      options: enumValues.options,
+      table: { defaultValue: { summary: "TextSizes.Default" } },
+    },
   }}
 />
 
@@ -45,18 +42,19 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.1`   |
-| Latest            | `0.25.1`   |
+| Latest            | `0.25.13`  |
 
 <Description of={Text} />
 
-The `Text` component renders a basic `<p>` element. As its name indicates, the `displaySize` prop controls the size of the text rendered in the component.
+The `Text` component renders a basic `<p>` element. As its name indicates, the
+`size` prop controls the size of the text rendered in the component.
 
 <Canvas withToolbar>
   <Story
     name="Text"
     args={{
       className: undefined,
-      displaySize: "TextDisplaySizes.Default",
+      size: "TextSizes.Default",
       isBold: false,
       isItalic: false,
       noSpace: false,
@@ -64,7 +62,7 @@ The `Text` component renders a basic `<p>` element. As its name indicates, the `
   >
     {(args) => (
       <>
-        <Text {...args} displaySize={enumValues.getValue(args.displaySize)}>
+        <Text {...args} size={enumValues.getValue(args.size)}>
           Animal Crossing[a] is a social simulation video game series developed
           and published by Nintendo. The series was conceptualized and created
           by Katsuya Eguchi and Hisashi Nogami. In Animal Crossing, the player
@@ -74,7 +72,7 @@ The `Text` component renders a basic `<p>` element. As its name indicates, the `
           open-ended gameplay and use of the video game console's internal clock
           and calendar to simulate real passage of time.
         </Text>
-        <Text {...args} displaySize={enumValues.getValue(args.displaySize)}>
+        <Text {...args} size={enumValues.getValue(args.size)}>
           Since its initial release in 2001, five Animal Crossing games have
           been released worldwide, one each for the Nintendo 64/iQue Player
           (enhanced and reissued for the GameCube), Nintendo DS, Wii, Nintendo

package/src/components/Text/Text.test.tsx

@@ -4,7 +4,7 @@ import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
 import Text from "./Text";
-import { TextDisplaySizes } from "./TextTypes";
+import { TextSizes } from "./TextTypes";
 
 describe("Text Accessibility", () => {
   it("passes axe accessibility test", async () => {
@@ -25,7 +25,8 @@ describe("Text", () => {
     const warn = jest.spyOn(console, "warn");
     render(<Text></Text>);
     expect(warn).toHaveBeenCalledWith(
-      "The Text component has no children and will not render correctly."
+      "NYPL Reservoir Text: No children were passed and the `Text` component " +
+        "will not render correctly."
     );
   });
 
@@ -35,24 +36,14 @@ describe("Text", () => {
       .toJSON();
     const caption = renderer
       .create(
-        <Text displaySize={TextDisplaySizes.Caption}>
-          Animal Crossing is all that!
-        </Text>
+        <Text size={TextSizes.Caption}>Animal Crossing is all that!</Text>
       )
       .toJSON();
     const tag = renderer
-      .create(
-        <Text displaySize={TextDisplaySizes.Tag}>
-          Animal Crossing is all that!
-        </Text>
-      )
+      .create(<Text size={TextSizes.Tag}>Animal Crossing is all that!</Text>)
       .toJSON();
     const mini = renderer
-      .create(
-        <Text displaySize={TextDisplaySizes.Mini}>
-          Animal Crossing is all that!
-        </Text>
-      )
+      .create(<Text size={TextSizes.Mini}>Animal Crossing is all that!</Text>)
       .toJSON();
 
     expect(defaultText).toMatchSnapshot();

package/src/components/Text/Text.tsx

@@ -1,37 +1,31 @@
 import * as React from "react";
 import { Text as ChakraText, useStyleConfig } from "@chakra-ui/react";
-import { TextDisplaySizes } from "./TextTypes";
+import { TextSizes } from "./TextTypes";
 import { getVariant } from "../../utils/utils";
 
 export interface TextProps {
   /** Additional class name to render in the `Text` component. */
   className?: string;
-  /** Optional prop to control the text styling */
-  displaySize?: TextDisplaySizes;
   /** Optional prop used to show bolded text */
   isBold?: boolean;
   /** Optional prop used to show itlicized text */
   isItalic?: boolean;
   /** Optional prop used to remove default spacing */
   noSpace?: boolean;
+  /** Optional prop to control the text styling */
+  size?: TextSizes;
 }
 
 function Text(props: React.PropsWithChildren<TextProps>) {
   const {
     children,
     className = "",
-    displaySize = TextDisplaySizes.Default,
     isBold,
     isItalic,
     noSpace,
+    size = TextSizes.Default,
   } = props;
-
-  let variant = getVariant(
-    displaySize,
-    TextDisplaySizes,
-    TextDisplaySizes.Default
-  );
-
+  const variant = getVariant(size, TextSizes, TextSizes.Default);
   const styles = useStyleConfig("Text", {
     variant,
     isBold,
@@ -41,7 +35,8 @@ function Text(props: React.PropsWithChildren<TextProps>) {
 
   if (!children) {
     console.warn(
-      "The Text component has no children and will not render correctly."
+      "NYPL Reservoir Text: No children were passed and the `Text` component " +
+        "will not render correctly."
     );
   }
 

package/src/components/Text/TextTypes.tsx

@@ -1,4 +1,4 @@
-export enum TextDisplaySizes {
+export enum TextSizes {
   Default = "default",
   Caption = "caption",
   Tag = "tag",

package/src/components/TextInput/TextInput.stories.mdx

@@ -43,16 +43,16 @@ export const enumValues = getStorybookEnumValues(
     showLabel: { table: { defaultValue: { summary: true } } },
     showOptReqLabel: { table: { defaultValue: { summary: true } } },
     step: { table: { defaultValue: { summary: 1 } } },
+    textInputType: {
+      control: false,
+      table: { defaultValue: { summary: "TextInputVariants.Default" } },
+    },
     type: {
       control: { type: "select" },
       table: { defaultValue: { summary: "TextInputTypes.text" } },
       options: enumValues.options,
     },
     value: { control: false },
-    variantType: {
-      control: false,
-      table: { defaultValue: { summary: "TextInputVariants.Default" } },
-    },
   }}
 />
 
@@ -61,7 +61,7 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.22.0`   |
-| Latest            | `0.25.11`  |
+| Latest            | `0.25.13`  |
 
 <Description of={TextInput} />
 
@@ -95,7 +95,7 @@ is left blank, a value will be generated for you.
       step: 1,
       type: "TextInputTypes.text",
       value: undefined,
-      variantType: TextInputVariants.Default,
+      textInputType: TextInputVariants.Default,
     }}
   >
     {(args) => <TextInput {...args} type={enumValues.getValue(args.type)} />}
@@ -206,8 +206,8 @@ helperText={<>Choose <b>wisely!</b></>}
 ## Textarea
 
 The TextInput component includes a multiline `textarea` form field. To render a
-`textarea` element, pass `TextInputTypes.textarea` for the `type` prop. All the
-variations described above are available for the `textarea` option.
+`textarea` element, pass `TextInputTypes.textarea` for the `type` prop.
+All the variations described above are available for the `textarea` option.
 
 <Canvas withToolbar>
   <Story
@@ -226,7 +226,7 @@ variations described above are available for the `textarea` option.
     }}
     argTypes={{
       type: { control: false },
-      variantType: { control: false },
+      textInputType: { control: false },
     }}
   >
     {(args) => <TextInput {...args} />}

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

@@ -12,11 +12,11 @@ describe("TextInput Accessibility", () => {
   it("passes axe accessibility test for the input element", async () => {
     const { container } = render(
       <TextInput
-        labelText="Custom input label"
         isRequired
+        labelText="Custom input label"
+        onChange={jest.fn()}
         placeholder="Input Placeholder"
         type={TextInputTypes.text}
-        onChange={jest.fn()}
       />
     );
     expect(await axe(container)).toHaveNoViolations();
@@ -25,11 +25,11 @@ describe("TextInput Accessibility", () => {
   it("passes axe accessibility test for the textarea element", async () => {
     const { container } = render(
       <TextInput
-        labelText="Custom textarea label"
         isRequired
+        labelText="Custom textarea label"
+        onChange={jest.fn()}
         placeholder="Input Placeholder"
         type={TextInputTypes.textarea}
-        onChange={jest.fn()}
       />
     );
     expect(await axe(container)).toHaveNoViolations();
@@ -46,13 +46,13 @@ describe("TextInput", () => {
     changeHandler = jest.fn();
     utils = render(
       <TextInput
+        attributes={{ onFocus: focusHandler }}
         id="myTextInput"
-        labelText="Custom Input Label"
         isRequired
+        labelText="Custom Input Label"
+        onChange={changeHandler}
         placeholder="Input Placeholder"
         type={TextInputTypes.text}
-        attributes={{ onFocus: focusHandler }}
-        onChange={changeHandler}
       />
     );
   });
@@ -73,13 +73,13 @@ describe("TextInput", () => {
   it("renders 'Optional' along with the label text", () => {
     utils.rerender(
       <TextInput
+        attributes={{ onFocus: focusHandler }}
         id="myTextInput"
-        labelText="Custom Input Label"
         isRequired={false}
+        labelText="Custom Input Label"
+        onChange={changeHandler}
         placeholder="Input Placeholder"
         type={TextInputTypes.text}
-        attributes={{ onFocus: focusHandler }}
-        onChange={changeHandler}
       />
     );
 
@@ -90,14 +90,14 @@ describe("TextInput", () => {
   it("does not render 'Required' along with the label text", () => {
     utils.rerender(
       <TextInput
+        attributes={{ onFocus: focusHandler }}
         id="myTextInput"
-        labelText="Custom Input Label"
         isRequired
-        showOptReqLabel={false}
+        labelText="Custom Input Label"
+        onChange={changeHandler}
         placeholder="Input Placeholder"
+        showOptReqLabel={false}
         type={TextInputTypes.text}
-        attributes={{ onFocus: focusHandler }}
-        onChange={changeHandler}
       />
     );
 
@@ -145,11 +145,11 @@ describe("Renders TextInput with auto-generated ID, hidden label and visible hel
     generateUUIDSpy = jest.spyOn(generateUUID, "default");
     render(
       <TextInput
-        labelText="Custom Input Label"
-        showLabel={false}
         helperText="Custom Helper Text"
         isRequired
+        labelText="Custom Input Label"
         placeholder="Input Placeholder"
+        showLabel={false}
         type={TextInputTypes.text}
       />
     );
@@ -185,12 +185,12 @@ describe("TextInput shows error state", () => {
   beforeEach(() => {
     const utils = render(
       <TextInput
-        id="myTextInputError"
-        labelText="Custom Input Label"
         helperText="Custom Helper Text"
+        id="myTextInputError"
         invalidText="Custom Error Text"
-        placeholder="Input Placeholder"
         isInvalid
+        labelText="Custom Input Label"
+        placeholder="Input Placeholder"
         type={TextInputTypes.text}
       />
     );
@@ -214,14 +214,14 @@ describe("TextInput shows error state", () => {
   it("does not render the invalid text when 'showHelperInvalidText' is set to false", () => {
     rerender(
       <TextInput
-        id="myTextInputError"
-        labelText="Custom Input Label"
         helperText="Custom Helper Text"
+        id="myTextInputError"
         invalidText="Custom Error Text"
+        isInvalid
+        labelText="Custom Input Label"
         placeholder="Input Placeholder"
         showHelperInvalidText={false}
         type={TextInputTypes.text}
-        isInvalid
       />
     );
     expect(screen.queryByText("Custom Helper Text")).not.toBeInTheDocument();
@@ -241,16 +241,16 @@ describe("Renders HTML attributes passed through the `attributes` prop", () => {
   beforeEach(() => {
     render(
       <TextInput
-        id="inputID-attributes"
-        labelText="Input Label"
-        placeholder="Input Placeholder"
-        type={TextInputTypes.text}
         attributes={{
           onChange: onChangeSpy,
           onBlur: onBlurSpy,
           maxLength: 10,
           tabIndex: 0,
         }}
+        id="inputID-attributes"
+        labelText="Input Label"
+        placeholder="Input Placeholder"
+        type={TextInputTypes.text}
       />
     );
   });
@@ -336,9 +336,9 @@ describe("Hidden input", () => {
   it("does not show the helper text", () => {
     render(
       <TextInput
+        helperText="Helper Text"
         id="inputID-hidden"
         labelText="Hidden Input Label"
-        helperText="Helper Text"
         type={TextInputTypes.hidden}
         value="hidden"
       />
@@ -449,6 +449,7 @@ describe("UI Snapshots", () => {
     expect(errorState).toMatchSnapshot();
     expect(disabledState).toMatchSnapshot();
   });
+
   it("renders the textarea UI snapshot correctly", () => {
     const basicTextarea = renderer
       .create(

package/src/components/TextInput/TextInput.tsx

@@ -61,12 +61,12 @@ export interface InputProps {
   showOptReqLabel?: boolean;
   /** The amount to increase or decrease when using the number type. */
   step?: number;
+  /** FOR INTERNAL DS USE ONLY: the input variant to display. */
+  textInputType?: TextInputVariants;
   /** HTML Input types as defined by MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input */
   type?: TextInputTypes;
   /** Populates the value of the input/textarea elements */
   value?: string;
-  /** FOR INTERNAL DS USE ONLY: the input variant to display. */
-  variantType?: TextInputVariants;
 }
 
 /**
@@ -101,11 +101,11 @@ const TextInput = React.forwardRef<TextInputRefType, InputProps>(
       showLabel = true,
       showOptReqLabel = true,
       step = 1,
+      textInputType = TextInputVariants.Default,
       type = TextInputTypes.text,
       value,
-      variantType = TextInputVariants.Default,
     } = props;
-    const styles = useMultiStyleConfig("TextInput", { variant: variantType });
+    const styles = useMultiStyleConfig("TextInput", { variant: textInputType });
     const finalStyles = { ...styles, ...additionalStyles };
     const isTextArea = type === TextInputTypes.textarea;
     const isHidden = type === TextInputTypes.hidden;

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

@@ -11,7 +11,7 @@ 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 { ToggleSizes } from "./ToggleTypes";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 import { getStorybookEnumValues } from "../../utils/utils";
@@ -43,7 +43,7 @@ export const sizeEnumValues = getStorybookEnumValues(
     size: {
       control: {
         type: "select",
-        table: { defaultValue: { summary: "ToggleSizes.Large" } },
+        table: { defaultValue: { summary: "ToggleSizes.Default" } },
         options: sizeEnumValues.options,
       },
     },
@@ -55,7 +55,7 @@ export const sizeEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.8`   |
-| Latest            | `0.25.12`  |
+| Latest            | `0.25.13`  |
 
 <Description of={Toggle} />
 
@@ -98,9 +98,9 @@ The Toggle component label should clarify the action being performed. Labels sho
   <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" />
+        <Heading level={3}>Default</Heading>
+        <Toggle defaultChecked={true} labelText="On" />
+        <Toggle labelText="Off" />
       </VStack>
       <VStack align="left" spacing="s">
         <Heading level={3}>Small</Heading>
@@ -147,28 +147,18 @@ const onChange = (e) => {
     <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" />
+        <Toggle defaultChecked={true} labelText="On" />
+        <Toggle 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} />
+        <Toggle defaultChecked={true} isDisabled={true} labelText="On" />
+        <Toggle 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} />
+        <Toggle defaultChecked={true} labelText="On" isInvalid={true} />
+        <Toggle labelText="Off" isInvalid={true} />
       </VStack>
     </SimpleGrid>
   </DSProvider>

package/src/components/Toggle/Toggle.test.tsx

@@ -1,10 +1,12 @@
-import * as React from "react";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { axe } from "jest-axe";
+import * as React from "react";
 import renderer from "react-test-renderer";
-import * as generateUUID from "../../helpers/generateUUID";
+
 import Toggle from "./Toggle";
+import { ToggleSizes } from "./ToggleTypes";
+import * as generateUUID from "../../helpers/generateUUID";
 
 describe("Toggle Accessibility", () => {
   it("Passes axe accessibility test", async () => {
@@ -131,10 +133,21 @@ describe("Toggle", () => {
     const isDisabled = renderer
       .create(<Toggle id="Toggle-disabled" labelText="Test Label" isDisabled />)
       .toJSON();
+    const small = renderer
+      .create(
+        <Toggle
+          id="Toggle-disabled"
+          labelText="Test Label"
+          isDisabled
+          size={ToggleSizes.Small}
+        />
+      )
+      .toJSON();
 
     expect(primary).toMatchSnapshot();
     expect(isChecked).toMatchSnapshot();
     expect(isInvalid).toMatchSnapshot();
     expect(isDisabled).toMatchSnapshot();
+    expect(small).toMatchSnapshot();
   });
 });

package/src/components/Toggle/Toggle.tsx

@@ -9,7 +9,7 @@ import * as React from "react";
 import HelperErrorText, {
   HelperErrorTextType,
 } from "../HelperErrorText/HelperErrorText";
-import { ToggleSizes } from "./ToggleSizes";
+import { ToggleSizes } from "./ToggleTypes";
 import generateUUID from "../../helpers/generateUUID";
 
 export interface ToggleProps {
@@ -33,20 +33,19 @@ export interface ToggleProps {
   /** Adds the 'disabled' and `aria-disabled` attributes to the input when true.
    * This also makes the text italic and color scheme gray. */
   isDisabled?: boolean;
-  /** Adds the 'aria-invalid' attribute to the input when true. This also makes
-   * the color theme "NYPL error" red for the button and text. */
+  /** Adds the 'aria-invalid' attribute to the input when true. */
   isInvalid?: boolean;
   /** Adds the 'required' attribute to the input when true. */
   isRequired?: boolean;
-  /** The checkbox's label. This will serve as the text content for a `<label>`
+  /** The toggle's label. This will serve as the text content for a `<label>`
    * element if `showlabel` is true, or an "aria-label" if `showLabel` is false. */
   labelText: string;
-  /** The name prop indicates into which group of checkboxes this checkbox
-   * belongs. If none is specified, 'default' will be used */
+  /** The name prop indicates the `Toggle`'s form element name. If none is
+   * specified, 'default' will be used. */
   name?: string;
   /** The action to perform on the `<input>`'s onChange function  */
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  /** Offers the ability to hide the helper/invalid text. */
+  /** The size of the Toggle. Defaults to "large". */
   size?: ToggleSizes;
 }
 
@@ -72,7 +71,7 @@ const Toggle = React.forwardRef<HTMLInputElement, ToggleProps>(
       labelText,
       name,
       onChange = onChangeDefault,
-      size = ToggleSizes.Large,
+      size = ToggleSizes.Default,
     } = props;
     const footnote: HelperErrorTextType = isInvalid ? invalidText : helperText;
     const ariaAttributes = {};
@@ -91,7 +90,7 @@ const Toggle = React.forwardRef<HTMLInputElement, ToggleProps>(
             isInvalid={isInvalid}
             isRequired={isRequired}
             ref={ref}
-            size={size === ToggleSizes.Large ? "lg" : "sm"}
+            size={size === ToggleSizes.Default ? "lg" : "sm"}
             lineHeight="1.5"
             {...(isChecked !== undefined
               ? {

package/src/components/Toggle/{ToggleSizes.tsx → ToggleTypes.tsx}

@@ -1,4 +1,4 @@
 export enum ToggleSizes {
-  Large = "large",
+  Default = "default",
   Small = "small",
 }

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

@@ -253,3 +253,67 @@ exports[`Toggle Renders the UI snapshot correctly 4`] = `
   </label>
 </div>
 `;
+
+exports[`Toggle Renders the UI snapshot correctly 5`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="chakra-switch css-18x0has"
+    data-disabled=""
+    onClick={[Function]}
+  >
+    <input
+      aria-disabled={true}
+      aria-invalid={false}
+      aria-label="Test Label"
+      checked={false}
+      className="chakra-switch__input"
+      disabled={true}
+      id="Toggle-disabled"
+      name="default"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      required={false}
+      style={
+        Object {
+          "border": "0px",
+          "clip": "rect(0px, 0px, 0px, 0px)",
+          "height": "1px",
+          "margin": "-1px",
+          "overflow": "hidden",
+          "padding": "0px",
+          "position": "absolute",
+          "whiteSpace": "nowrap",
+          "width": "1px",
+        }
+      }
+      type="checkbox"
+    />
+    <span
+      aria-hidden={true}
+      className="chakra-switch__track css-14qxnv8"
+      data-disabled=""
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+    >
+      <span
+        className="chakra-switch__thumb css-0"
+      />
+    </span>
+    <span
+      className="chakra-switch__label css-1y8kf23"
+      data-disabled=""
+      onMouseDown={[Function]}
+      onTouchStart={[Function]}
+    >
+      Test Label
+    </span>
+  </label>
+</div>
+`;