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

package/src/components/TextInput/TextInput.tsx

@@ -1,106 +1,127 @@
 import * as React from "react";
-import bem from "../../utils/bem";
-import { TextInputTypes, TextInputFormats } from "./TextInputTypes";
+import {
+  Box,
+  Input as ChakraInput,
+  Textarea as ChakraTextarea,
+  useMultiStyleConfig,
+} from "@chakra-ui/react";
+
+import {
+  TextInputTypes,
+  TextInputFormats,
+  TextInputVariants,
+} from "./TextInputTypes";
 import Label from "../Label/Label";
 import HelperErrorText from "../HelperErrorText/HelperErrorText";
 import generateUUID from "../../helpers/generateUUID";
 
 export interface InputProps {
-  /** Additional attributes to pass to the `<input>` tag */
+  /** Optionally pass in additional Chakra-based styles. */
+  additionalStyles?: { [key: string]: any };
+  /** Additional attributes to pass to the `<input>` or `<textarea>` element */
   attributes?: { [key: string]: any };
-  /** HTML Input types as defined by MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input */
-  type?: TextInputTypes;
-  /** Will add 'aria-required: true' to input */
-  required?: boolean;
+  /** A class name for the TextInput parent div. */
+  className?: string;
+  /** The starting value of the input field. */
+  defaultValue?: string;
+  /** Populates the HelperErrorText for the standard state */
+  helperText?: string;
+  /** ID that other components can cross reference for accessibility purposes */
+  id?: string;
+  /** Populates the HelperErrorText for the error state */
+  invalidText?: string;
+  /** 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 */
+  isInvalid?: boolean;
+  /** Will add `required` and `aria-required` props to the input/textarea elements */
+  isRequired?: boolean;
   /** Provides text for a `Label` component if `showLabel` is set to true;
-   * populates a `aria-label` sttribute if `showLabel` is set to false. */
+   * populates an `aria-label` attribute if `showLabel` is set to false. */
   labelText: string;
+  /** Used to reference the input element in forms. */
+  name?: string;
+  /** The action to perform on the `input`/`textarea`'s onChange function  */
+  onChange?: (
+    event:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.ChangeEvent<HTMLTextAreaElement>
+  ) => void;
+  /** Populates the placeholder for the input/textarea elements */
+  placeholder?: string;
+  /** Offers the ability to hide the helper/invalid text. */
+  showHelperInvalidText?: boolean;
   /** Offers the ability to show the label onscreen or hide it. Refer to the
    * `labelText` property for more information. */
   showLabel?: boolean;
   /** Offers the ability to show the "Required"/"Optional" label onscreen or
    * hide it. True by default. */
   showOptReqLabel?: boolean;
-  /** Populates the HelperErrorText for standard state */
-  helperText?: string;
-  /** Populates the HelperErrorText for error state */
-  invalidText?: string;
-  /** Populates the placeholder of the input */
-  placeholder?: string;
-  /** Populates the value of the input */
+  /** The amount to increase or decrease when using the number type. */
+  step?: number;
+  /** 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;
-  /** className you can add in addition to 'textinput' */
-  className?: string;
-  /** ID that other components can cross reference for accessibility purposes */
-  id?: string;
-  /** Helper for modifiers array; adds 'errored' styling */
-  errored?: boolean;
-  /** Adds the 'disabled' prop to the input when true */
-  disabled?: boolean;
-  /** Modifiers array for use with BEM. See how to work with modifiers and BEM
-   * here: http://getbem.com/introduction/ */
-  modifiers?: string[];
-  /** The action to perform on the `<input>`'s onChange function  */
-  onChange?: (
-    event:
-      | React.ChangeEvent<HTMLInputElement>
-      | React.ChangeEvent<HTMLTextAreaElement>
-  ) => void;
+  /** The variant to display. */
+  variantType?: TextInputVariants;
 }
 
-/** The type used for `ref`s. We want to extend both `input` and `textarea`
+/**
+ * The type used for `ref`s. We want to extend both `input` and `textarea`
  * since both are available to create through `TextInput`.
  */
 export type TextInputRefType = HTMLInputElement & HTMLTextAreaElement;
 
-/** Renders either an `input` element with a specified type or a `textarea`
- * element. All types will render an accessible Label component and an optional
- * HelperErrorText component.
+/**
+ * Renders either an `input` element with a specified type or a `textarea`
+ * element. All types will render an accessible `Label` component and an
+ * optional `HelperErrorText` component.
  */
 const TextInput = React.forwardRef<TextInputRefType, InputProps>(
   (props, ref: React.Ref<TextInputRefType>) => {
     const {
+      additionalStyles = {},
       attributes = {},
-      type = TextInputTypes.text,
-      required,
-      labelText,
-      showLabel = true,
-      showOptReqLabel = true,
+      className,
+      defaultValue,
       helperText,
+      id = generateUUID(),
       invalidText,
+      isDisabled = false,
+      isInvalid = false,
+      isRequired = false,
+      labelText,
+      name,
+      onChange,
       placeholder,
+      showHelperInvalidText = true,
+      showLabel = true,
+      showOptReqLabel = true,
+      step = 1,
+      type = TextInputTypes.text,
       value,
-      className,
-      disabled,
-      errored,
-      onChange,
-      modifiers = [],
-      id = generateUUID(),
+      variantType = TextInputVariants.Default,
     } = props;
-
+    const styles = useMultiStyleConfig("TextInput", { variant: variantType });
+    const finalStyles = { ...styles, ...additionalStyles };
     const isTextArea = type === TextInputTypes.textarea;
     const isHidden = type === TextInputTypes.hidden;
-    const optReqFlag = required ? "Required" : "Optional";
-    const errorOutput = invalidText
+    const optReqFlag = isRequired ? "Required" : "Optional";
+    const finalInvalidText = invalidText
       ? invalidText
       : "There is an error related to this field.";
-    let footnote;
+    let footnote: string | React.ReactNode = isInvalid
+      ? finalInvalidText
+      : helperText;
+    let fieldOutput;
     let options;
 
-    if (!showLabel) attributes["aria-label"] = labelText;
-    if (helperText) attributes["aria-describedby"] = helperText;
-
-    if (errored) {
-      modifiers.push("error");
-    }
-    if (isTextArea) {
-      modifiers.push("textarea");
-    }
-
-    if (errored) {
-      footnote = errorOutput;
-    } else {
-      footnote = helperText;
+    if (!showLabel) {
+      attributes["aria-label"] =
+        labelText && footnote ? `${labelText} - ${footnote}` : labelText;
+    } else if (helperText) {
+      attributes["aria-describedby"] = `${id}-helperText`;
     }
 
     if (
@@ -118,54 +139,59 @@ const TextInput = React.forwardRef<TextInputRefType, InputProps>(
       );
     }
 
-    options = {
-      id,
-      className: bem("inputfield", modifiers, "", [className]),
-      "aria-required": required,
-      "aria-hidden": isHidden,
-      disabled,
-      required,
-      placeholder,
-      onChange,
-      ref,
-      ...attributes,
-    };
+    // When the type is "hidden", the input element needs fewer attributes.
+    options = isHidden
+      ? { id, "aria-hidden": isHidden, name, onChange, ref }
+      : {
+          "aria-required": isRequired,
+          defaultValue,
+          id,
+          isDisabled,
+          isRequired,
+          isInvalid,
+          placeholder,
+          name,
+          onChange,
+          ref,
+          // The `step` attribute is useful for the number type.
+          step: type === TextInputTypes.number ? step : null,
+          ...attributes,
+        };
     // For `input` and `textarea`, all attributes are the same but `input`
     // also needs `type` and `value` to render correctly.
     if (!isTextArea) {
       options = { type, value, ...options } as any;
+      fieldOutput = <ChakraInput {...options} __css={finalStyles.input} />;
+    } else {
+      fieldOutput = (
+        <ChakraTextarea {...options} __css={finalStyles.textarea}>
+          {value}
+        </ChakraTextarea>
+      );
     }
 
-    const fieldOutput = React.createElement(
-      isTextArea ? "textarea" : "input",
-      options,
-      isTextArea ? value : null
-    );
-
-    const transformedInput = (
-      <div className="textinput">
+    return (
+      <Box __css={finalStyles} className={className}>
         {labelText && showLabel && !isHidden && (
           <Label
             htmlFor={id}
             optReqFlag={showOptReqLabel && optReqFlag}
-            id={id + `-label`}
+            id={`${id}-label`}
           >
             {labelText}
           </Label>
         )}
         {fieldOutput}
-        {((helperText && !isHidden) || errored) && (
-          <HelperErrorText isError={errored} id={id + `-helperText`}>
-            {footnote}
-          </HelperErrorText>
+        {footnote && showHelperInvalidText && !isHidden && (
+          <Box __css={finalStyles.helper} aria-disabled={isDisabled}>
+            <HelperErrorText isInvalid={isInvalid} id={`${id}-helperText`}>
+              {footnote}
+            </HelperErrorText>
+          </Box>
         )}
-      </div>
+      </Box>
     );
-
-    return transformedInput;
   }
 );
 
-TextInput.displayName = "TextInput";
-
 export default TextInput;

package/src/components/TextInput/TextInputTypes.tsx

@@ -11,6 +11,7 @@ export enum TextInputTypes {
   url = "url",
 }
 
+// Only used internally in `TextInput`.
 export enum TextInputFormats {
   email = "jdoe@domain.com",
   hidden = "",
@@ -23,6 +24,13 @@ export enum TextInputFormats {
   url = "https://domain.com",
 }
 
+// Only used internally in `TextInput` and `SearchBar`.
+export enum TextInputVariants {
+  Default = "default",
+  SearchBar = "searchBar",
+  SearchBarSelect = "searchBarSelect",
+}
+
 /*
 export enum TextInputPatterns {
   // eslint-disable-next-line prettier/prettier

package/src/components/VideoPlayer/VideoPlayer.stories.mdx

@@ -3,11 +3,11 @@ import {
   Story,
   Canvas,
   ArgsTable,
-  Preview,
   Description,
 } from "@storybook/addon-docs/blocks";
 import { withDesign } from "storybook-addon-designs";
 
+import DSProvider from "../../theme/provider";
 import VideoPlayer from "./VideoPlayer";
 import { VideoPlayerTypes } from "./VideoPlayerTypes";
 import { action } from "@storybook/addon-actions";
@@ -37,7 +37,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.23.2`   |
-| Latest            | `0.23.4`   |
+| Latest            | `0.25.2`   |
 
 <Description of={VideoPlayer} />
 
@@ -45,7 +45,7 @@ The `VideoPlayer` component is used to embed a `Vimeo` or `YouTube` video player
 
 The `aspectRatio` prop is used to control the sizing of the space allotted for the video rendering. Ultimately, the `aspectRatio` prop should be set to match the aspect ratio of the video that is being rendered. The default aspect ratio is `16:9`.
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story
     name="VideoPlayer"
     args={{
@@ -71,7 +71,7 @@ The `aspectRatio` prop is used to control the sizing of the space allotted for t
       />
     )}
   </Story>
-</Preview>
+</Canvas>
 
 <ArgsTable story="VideoPlayer" />
 
@@ -93,3 +93,16 @@ https://vimeo.com/474719268
 https://www.youtube.com/watch?v=[VIDEO_ID]
 https://www.youtube.com/watch?v=nm-dD2tx6bk
 ```
+
+## Errored
+
+If the necessary props are not passed to the `VideoPlayer` component, the component UI will display an error message.
+
+<Canvas>
+  <DSProvider>
+    <VideoPlayer
+      type={VideoPlayerTypes.Vimeo}
+      videoId="https://vimeo.com/474719268"
+    />
+  </DSProvider>
+</Canvas>

package/src/components/VideoPlayer/VideoPlayer.test.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
+import renderer from "react-test-renderer";
 
 import VideoPlayer from "./VideoPlayer";
 import { VideoPlayerAspectRatios, VideoPlayerTypes } from "./VideoPlayerTypes";
@@ -26,9 +27,7 @@ describe("VideoPlayer", () => {
     });
 
     it("Renders VideoPlayer container", () => {
-      expect(
-        utils.container.querySelector(".video-player")
-      ).toBeInTheDocument();
+      expect(screen.getByTestId("video-player-component")).toBeInTheDocument();
     });
 
     it("Renders VideoPlayer iframe", () => {
@@ -45,7 +44,6 @@ describe("VideoPlayer", () => {
 
   describe("Vimeo player", () => {
     const videoId = "474719268";
-    let utils;
 
     beforeEach(() => {
       utils = render(
@@ -53,12 +51,6 @@ describe("VideoPlayer", () => {
       );
     });
 
-    it("Renders VideoPlayer container", () => {
-      expect(
-        utils.container.querySelector(".video-player")
-      ).toBeInTheDocument();
-    });
-
     it("Renders VideoPlayer iframe", () => {
       expect(screen.getByTitle("Vimeo video player")).toBeInTheDocument();
     });
@@ -97,6 +89,22 @@ describe("VideoPlayer", () => {
     it("Renders HelperErrorText component", () => {
       expect(screen.getByText("Video Player helper text.")).toBeInTheDocument();
     });
+
+    it("does not render the helper text", () => {
+      utils.rerender(
+        <VideoPlayer
+          videoType={VideoPlayerTypes.YouTube}
+          videoId={videoId}
+          headingText="Video Player Heading"
+          descriptionText="Video Player description text."
+          helperText="Video Player helper text."
+          showHelperInvalidText={false}
+        />
+      );
+      expect(
+        screen.queryByText("Video Player helper text.")
+      ).not.toBeInTheDocument();
+    });
   });
 
   describe("custom iframe title", () => {
@@ -112,64 +120,57 @@ describe("VideoPlayer", () => {
     });
   });
 
-  describe("aspect ratio", () => {
-    it("Renders with 4:3 aspect ratio", () => {
-      const utils = render(
+  describe("prop validation", () => {
+    it("Throws error if videoId not formatted properly", () => {
+      render(
         <VideoPlayer
           videoType={VideoPlayerTypes.Vimeo}
-          videoId="474719268"
+          videoId="http://vimeo.com/474719268"
           aspectRatio={VideoPlayerAspectRatios.FourByThree}
         />
       );
-      expect(utils.container.querySelector(".video-player")).toHaveAttribute(
-        "class",
-        "video-player video-player--four-by-three "
-      );
+      expect(
+        screen.getByText(
+          "This video player has not been configured properly. Please contact the site administrator."
+        )
+      ).toBeInTheDocument();
     });
+  });
 
-    it("Renders with 16:9 aspect ratio", () => {
-      const utils = render(
+  it("renders the UI snapshot correctly", () => {
+    const videoPlayerWithoutText = renderer
+      .create(
         <VideoPlayer
-          videoType={VideoPlayerTypes.Vimeo}
+          id="video-player-without-text"
           videoId="474719268"
-          aspectRatio={VideoPlayerAspectRatios.SixteenByNine}
+          videoType={VideoPlayerTypes.Vimeo}
         />
-      );
-      expect(utils.container.querySelector(".video-player")).toHaveAttribute(
-        "class",
-        "video-player video-player--sixteen-by-nine "
-      );
-    });
-
-    it("Renders with 1:1 aspect ratio", () => {
-      const utils = render(
+      )
+      .toJSON();
+    const videoPlayerWithText = renderer
+      .create(
         <VideoPlayer
-          videoType={VideoPlayerTypes.Vimeo}
+          descriptionText="VideoPlayer description"
+          headingText="VideoPlayer Heading"
+          id="video-player-with-text"
+          helperText="VideoPlayer helper test."
           videoId="474719268"
-          aspectRatio={VideoPlayerAspectRatios.Square}
+          videoType={VideoPlayerTypes.Vimeo}
         />
-      );
-
-      expect(utils.container.querySelector(".video-player")).toHaveAttribute(
-        "class",
-        "video-player video-player--square "
-      );
-    });
-  });
-
-  describe("prop validation", () => {
-    it("Throws error if videoId not formatted properly", () => {
-      const utils = render(
+      )
+      .toJSON();
+    const videoPlayerError = renderer
+      .create(
         <VideoPlayer
+          id="video-player-error"
+          videoId="https://vimeo.com/474719268"
           videoType={VideoPlayerTypes.Vimeo}
-          videoId="http://vimeo.com/474719268"
-          aspectRatio={VideoPlayerAspectRatios.FourByThree}
         />
-      );
-      expect(utils.container.querySelector(".video-player")).toHaveAttribute(
-        "class",
-        "video-player video-player--four-by-three video-player--errored "
-      );
-    });
+      )
+      .toJSON();
+
+    expect(videoPlayerWithoutText).toMatchSnapshot();
+    expect(videoPlayerWithText).toMatchSnapshot();
+    expect(videoPlayerError).toMatchSnapshot();
   });
 });

package/src/components/VideoPlayer/VideoPlayer.tsx

@@ -1,27 +1,27 @@
 import * as React from "react";
-import bem from "../../utils/bem";
+import { Box, useMultiStyleConfig } from "@chakra-ui/react";
+import ComponentWrapper from "../ComponentWrapper/ComponentWrapper";
+import generateUUID from "../../helpers/generateUUID";
+import { getVariant } from "../../utils/utils";
 import { VideoPlayerAspectRatios, VideoPlayerTypes } from "./VideoPlayerTypes";
-import Heading from "../Heading/Heading";
-import { HeadingLevels } from "../Heading/HeadingTypes";
-import HelperErrorText from "../HelperErrorText/HelperErrorText";
 
 export interface VideoPlayerProps {
   /** Optional aspect ratio prop to control the sizing of the video player; if omitted, the video player defaults to `sixteen-by-nine` */
   aspectRatio?: VideoPlayerAspectRatios;
-  /** Optional additional attributes passed to the video player iframe */
-  attributes?: { [key: string]: any };
   /** Optional className you can add in addition to `video-player` */
   className?: string;
   /** Optional string to set the text for a video description */
   descriptionText?: string;
+  /** Optional string to set the text for a `Heading` component */
+  headingText?: string;
   /** Optional string to set the text for a `HelperErrorText` component */
   helperText?: string;
+  /** ID that other components can cross reference for accessibility purposes */
+  id?: string;
   /** Optional title to be added to the `<iframe>` element for improved accessibility; this title should describe in a few words the content of the video; if omitted, a generic title will be added */
   iframeTitle?: string;
-  /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-  modifiers?: string[];
-  /** Optional string to set the text for a `Heading` component */
-  headingText?: string;
+  /** Offers the ability to hide the helper/invalid text. */
+  showHelperInvalidText?: boolean;
   /** Required YouTube or Vimeo video ID. This value can be pulled from a video's YouTube or Vimeo URL. */
   videoId: string;
   /** Required. Used to specify which video service is being used. */
@@ -33,13 +33,13 @@ export default function VideoPlayer(
 ) {
   const {
     aspectRatio,
-    attributes = {},
     className,
     descriptionText,
+    headingText,
     helperText,
+    id = generateUUID(),
     iframeTitle,
-    modifiers = [],
-    headingText,
+    showHelperInvalidText = true,
     videoId,
     videoType,
   } = props;
@@ -57,31 +57,16 @@ export default function VideoPlayer(
   const errorMessage =
     "<strong>Error:</strong> This video player has not been configured properly. Please contact the site administrator.";
 
-  {
-    aspectRatio && modifiers.push(aspectRatio);
-  }
-
-  const embedCode = (
-    <iframe
-      src={videoSrc}
-      title={iframeTitleFinal}
-      frameBorder="0"
-      allow="accelerometer; autoplay; clipboard-write; encrypted-media; fullscreen; gyroscope; picture-in-picture"
-      allowFullScreen
-      {...attributes}
-    />
-  );
-
-  let errored = false;
+  let isInvalid = false;
   if (!videoType && !videoId) {
     console.warn("VideoPlayer requires the `videoType` and `videoId` props");
-    errored = true;
+    isInvalid = true;
   } else if (!videoType) {
     console.warn("VideoPlayer requires the `videoType` prop");
-    errored = true;
+    isInvalid = true;
   } else if (!videoId) {
     console.warn("VideoPlayer requires the `videoId` prop");
-    errored = true;
+    isInvalid = true;
   }
 
   if (
@@ -92,31 +77,45 @@ export default function VideoPlayer(
     videoId.includes("vimeo")
   ) {
     console.warn("VideoPlayer `videoId` prop is not configured properly");
-    errored = true;
+    isInvalid = true;
   }
 
-  {
-    errored && modifiers.push("errored");
-  }
+  const variant = isInvalid
+    ? "invalid"
+    : getVariant(aspectRatio, VideoPlayerAspectRatios);
+  const styles = useMultiStyleConfig("VideoPlayer", { variant });
+
+  const embedCode = (
+    <Box
+      as="iframe"
+      src={videoSrc}
+      title={iframeTitleFinal}
+      frameBorder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; fullscreen; gyroscope; picture-in-picture"
+      allowFullScreen
+      __css={styles.iframe}
+    />
+  );
 
   return (
-    <div className={bem("video-player", modifiers, "", [className])}>
-      {errored ? (
+    <Box
+      className={className}
+      data-testid="video-player-component"
+      id={id}
+      __css={styles}
+    >
+      {isInvalid ? (
         <span dangerouslySetInnerHTML={{ __html: errorMessage }} />
       ) : (
-        <>
-          {headingText && (
-            <Heading level={HeadingLevels.Two} text={headingText} />
-          )}
-          {descriptionText && <p>{descriptionText}</p>}
-          <div className={bem("video-player__inside", modifiers, "", [])}>
-            {embedCode}
-          </div>
-          {helperText && (
-            <HelperErrorText isError={false}>{helperText}</HelperErrorText>
-          )}
-        </>
+        <ComponentWrapper
+          headingText={headingText ? headingText : null}
+          descriptionText={descriptionText ? descriptionText : null}
+          helperText={helperText && showHelperInvalidText ? helperText : null}
+          id={`${id}-componentWrapper`}
+        >
+          <Box __css={styles.inside}>{embedCode}</Box>
+        </ComponentWrapper>
       )}
-    </div>
+    </Box>
   );
 }