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

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>
   );
 }

package/src/components/VideoPlayer/VideoPlayerTypes.tsx

@@ -4,7 +4,7 @@ export enum VideoPlayerTypes {
 }
 
 export enum VideoPlayerAspectRatios {
-  FourByThree = "four-by-three",
-  SixteenByNine = "sixteen-by-nine",
+  FourByThree = "fourByThree",
+  SixteenByNine = "sixteenByNine",
   Square = "square",
 }

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

@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VideoPlayer renders the UI snapshot correctly 1`] = `
+<div
+  className="css-0"
+  data-testid="video-player-component"
+  id="video-player-without-text"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-0"
+    >
+      <iframe
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; fullscreen; gyroscope; picture-in-picture"
+        allowFullScreen={true}
+        className="css-0"
+        frameBorder="0"
+        src="https://player.vimeo.com/video/474719268?autoplay=0&loop=0"
+        title="Vimeo video player"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VideoPlayer renders the UI snapshot correctly 2`] = `
+<div
+  className="css-0"
+  data-testid="video-player-component"
+  id="video-player-with-text"
+>
+  <div
+    className="css-0"
+  >
+    <h2
+      className="chakra-heading css-0"
+      id="video-player-with-text-componentWrapper-heading"
+    >
+      VideoPlayer Heading
+    </h2>
+    <p
+      className="chakra-text css-0"
+    >
+      VideoPlayer description
+    </p>
+    <div
+      className="css-0"
+    >
+      <iframe
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; fullscreen; gyroscope; picture-in-picture"
+        allowFullScreen={true}
+        className="css-0"
+        frameBorder="0"
+        src="https://player.vimeo.com/video/474719268?autoplay=0&loop=0"
+        title="Vimeo video player"
+      />
+    </div>
+    <div
+      className="css-0"
+    >
+      <div
+        aria-atomic={true}
+        aria-live="off"
+        className=" css-0"
+        data-isinvalid={false}
+        id="video-player-with-text-componentWrapper-helperText"
+      >
+        VideoPlayer helper test.
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VideoPlayer renders the UI snapshot correctly 3`] = `
+<div
+  className="css-0"
+  data-testid="video-player-component"
+  id="video-player-error"
+>
+  <span
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "<strong>Error:</strong> This video player has not been configured properly. Please contact the site administrator.",
+      }
+    }
+  />
+</div>
+`;