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

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

@@ -59,15 +59,36 @@ export const typesEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.23.2`   |
-| Latest            | `0.25.9`   |
+| Latest            | `0.26.0`   |
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component Props](#component-props)
+- [Accessibility](#accessibility)
+- [Extracting Video IDs](#extracting-video-ids)
+- [Example Embed Code Snippets](#example-embed-code-snippets)
+- [Errored](#errored)
+- [HTML in Helper Text](#html-in-helper-text)
+
+## Overview
 
 <Description of={VideoPlayer} />
 
-The `VideoPlayer` component is used to embed a `Vimeo` or `YouTube` video player on a page. The component requires the `embedCode` prop or both the `videoType` and `videoId` props. The component will not function properly if you try to set all of them.
+The `VideoPlayer` component is used to embed a `Vimeo` or `YouTube` video player
+on a page. The component requires the `embedCode` prop or both the `videoType`
+and `videoId` props. The component will not function properly if you try to set
+all of them.
 
-You can extract the videoId from the video's URL. **IMPORTANT:** Do not try to enter the full video URL as the `videoId` value.
+You can extract the videoId from the video's URL. **IMPORTANT:** Do not try to
+enter the full video URL as the `videoId` value.
 
-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`.
+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`.
+
+## Component Props
 
 <Canvas withToolbar>
   <Story
@@ -104,6 +125,33 @@ The `aspectRatio` prop is used to control the sizing of the space allotted for t
 **Example Vimeo IDs:** `474719268`, `491405018`, `493795778` (square)<br />
 **Example YouTube IDs:** `PfqgDG1qrKg`, `roi5V8ppi7Y`, `nm-dD2tx6bk`
 
+## Accessibility
+
+The `VideoPlayer` component renders an `iframe` element with either a Vimeo or
+YouTube video. `iframe`s can be accessible if a `title` attribute is provided.
+When passing in a video type and a video `id`, make sure to pass a title. Otherwise,
+the title must already be provided in the embed code value that is passed to the
+`embedCode` prop. A default one is provided but a custom one is recommended.
+
+Not all the Vimeo or YouTube videos passed to the `VideoPlayer` component will
+be owned by The New York Public Library. Because these videos are hosted on a
+third-party platform, we cannot guarantee that the video will be accessible.
+Besides setting the `title` in the embedded `iframe`, there are _some_ ways we
+can reduce accessibility issues.
+
+- Never use autoplay on videos; a user must click the play button to start the
+  video.
+- Always show all the video player's controls for the user to interact with
+  the video.
+- Keep the full screen option available.
+
+Resources:
+
+- [W3C Making Audio and Video Media Accessible](https://www.w3.org/WAI/media/av/)
+- [WebAIM Creating Accessible Frames and Iframes](https://webaim.org/techniques/frames/)
+- [MDN iframe: The Inline Frame element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)
+- [Deque University Be Sure to Provide Titles for Iframes](https://dequeuniversity.com/tips/provide-iframe-titles)
+
 ## Extracting Video IDs
 
 ### Vimeo

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

@@ -181,17 +181,20 @@ describe("VideoPlayer", () => {
 
       render(<VideoPlayer />);
       expect(warn).toHaveBeenCalledWith(
-        "VideoPlayer requires either the `embedCode` prop or both the `videoType` and `videoId` props."
+        "NYPL Reservoir VideoPlayer: Pass in either the `embedCode` prop or " +
+          "both the `videoType` and `videoId` props; none were passed."
       );
 
       render(<VideoPlayer videoId="http://vimeo.com/474719268" />);
       expect(warn).toHaveBeenCalledWith(
-        "VideoPlayer also requires the `videoType` prop. You have only set the `videoId` prop."
+        "NYPL Reservoir VideoPlayer: The `videoType` prop is also required. " +
+          "Only the `videoId` prop was set."
       );
 
       render(<VideoPlayer videoType={VideoPlayerTypes.Vimeo} />);
       expect(warn).toHaveBeenCalledWith(
-        "VideoPlayer also requires the `videoId` prop. You have only set the `videoType` prop."
+        "NYPL Reservoir VideoPlayer: The `videoId` prop is also required. " +
+          "Only the `videoType` prop was set."
       );
 
       render(
@@ -202,7 +205,8 @@ describe("VideoPlayer", () => {
         />
       );
       expect(warn).toHaveBeenCalledWith(
-        "VideoPlayer can accept the `embedCode` prop or the `videoType` and `videoId` props. You have set both."
+        "NYPL Reservoir VideoPlayer: Pass in either the `embedCode` prop or " +
+          "both the `videoType` and `videoId` props; all were set."
       );
 
       render(
@@ -212,7 +216,8 @@ describe("VideoPlayer", () => {
         />
       );
       expect(warn).toHaveBeenCalledWith(
-        "VideoPlayer can accept the `embedCode` prop or the `videoType` and `videoId` props. You have set both."
+        "NYPL Reservoir VideoPlayer: Pass in either the `embedCode` prop or " +
+          "both the `videoType` and `videoId` props; all were set."
       );
 
       render(
@@ -222,7 +227,14 @@ describe("VideoPlayer", () => {
         />
       );
       expect(warn).toHaveBeenCalledWith(
-        "VideoPlayer can accept the `embedCode` prop or the `videoType` and `videoId` props. You have set both."
+        "NYPL Reservoir VideoPlayer: Pass in either the `embedCode` prop or " +
+          "both the `videoType` and `videoId` props; all were set."
+      );
+
+      const embedCode = `<iframe src="https://player./video/421404144?h=5467db7edd"></iframe>`;
+      render(<VideoPlayer embedCode={embedCode} />);
+      expect(warn).toHaveBeenCalledWith(
+        "NYPL Reservoir VideoPlayer: The `embedCode` prop is not configured properly."
       );
     });
   });
@@ -269,10 +281,33 @@ describe("VideoPlayer", () => {
         />
       )
       .toJSON();
+    const withChakraProps = renderer
+      .create(
+        <VideoPlayer
+          id="chakra"
+          videoId="474719268"
+          videoType={VideoPlayerTypes.Vimeo}
+          p="20px"
+          color="ui.error.primary"
+        />
+      )
+      .toJSON();
+    const withOtherProps = renderer
+      .create(
+        <VideoPlayer
+          id="props"
+          videoId="474719268"
+          videoType={VideoPlayerTypes.Vimeo}
+          data-testid="props"
+        />
+      )
+      .toJSON();
 
     expect(videoPlayerWithoutText).toMatchSnapshot();
     expect(videoPlayerWithText).toMatchSnapshot();
     expect(videoPlayerUsingEmbedCode).toMatchSnapshot();
     expect(videoPlayerError).toMatchSnapshot();
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
   });
 });

package/src/components/VideoPlayer/VideoPlayer.tsx

@@ -1,10 +1,9 @@
-import { Box, useMultiStyleConfig } from "@chakra-ui/react";
+import { Box, chakra, useMultiStyleConfig } from "@chakra-ui/react";
 import * as React from "react";
 
 import ComponentWrapper from "../ComponentWrapper/ComponentWrapper";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 import { VideoPlayerAspectRatios, VideoPlayerTypes } from "./VideoPlayerTypes";
-import generateUUID from "../../helpers/generateUUID";
 import { getVariant } from "../../utils/utils";
 
 export interface VideoPlayerProps {
@@ -40,132 +39,147 @@ export interface VideoPlayerProps {
   videoType?: VideoPlayerTypes;
 }
 
-export default function VideoPlayer(
-  props: React.PropsWithChildren<VideoPlayerProps>
-) {
-  const {
-    aspectRatio,
-    className,
-    descriptionText,
-    embedCode,
-    headingText,
-    helperText,
-    id = generateUUID(),
-    iframeTitle,
-    showHelperInvalidText = true,
-    videoId,
-    videoType,
-  } = props;
+export const VideoPlayer = chakra(
+  (props: React.PropsWithChildren<VideoPlayerProps>) => {
+    const {
+      aspectRatio,
+      className,
+      descriptionText,
+      embedCode,
+      headingText,
+      helperText,
+      id,
+      iframeTitle,
+      showHelperInvalidText = true,
+      videoId,
+      videoType,
+      ...rest
+    } = props;
 
-  const iframeTitleFinal =
-    videoType === VideoPlayerTypes.Vimeo
-      ? iframeTitle || "Vimeo video player"
-      : iframeTitle || "YouTube video player";
+    const iframeTitleFinal =
+      videoType === VideoPlayerTypes.Vimeo
+        ? iframeTitle || "Vimeo video player"
+        : iframeTitle || "YouTube video player";
 
-  const videoSrc =
-    videoType === VideoPlayerTypes.Vimeo
-      ? `https://player.vimeo.com/video/${videoId}?autoplay=0&loop=0`
-      : `https://www.youtube.com/embed/${videoId}?disablekb=1&autoplay=0&fs=1&modestbranding=0`;
+    const videoSrc =
+      videoType === VideoPlayerTypes.Vimeo
+        ? `https://player.vimeo.com/video/${videoId}?autoplay=0&loop=0`
+        : `https://www.youtube.com/embed/${videoId}?disablekb=1&autoplay=0&fs=1&modestbranding=0`;
 
-  const iFrameTitleEmbedCode = iframeTitle ? `${iframeTitle}` : `Video player`;
+    const iFrameTitleEmbedCode = iframeTitle
+      ? `${iframeTitle}`
+      : `Video player`;
 
-  const embedCodeFinal =
-    embedCode && embedCode.includes("<iframe") && !embedCode.includes("title=")
-      ? embedCode.replace(
-          `<iframe `,
-          `<iframe title="${iFrameTitleEmbedCode}" `
-        )
-      : embedCode;
+    const embedCodeFinal =
+      embedCode &&
+      embedCode.includes("<iframe") &&
+      !embedCode.includes("title=")
+        ? embedCode.replace(
+            `<iframe `,
+            `<iframe title="${iFrameTitleEmbedCode}" `
+          )
+        : embedCode;
 
-  const errorMessage =
-    "<strong>Error:</strong> This video player has not been configured properly. Please contact the site administrator.";
+    const errorMessage =
+      "<strong>Error:</strong> This video player has not been configured " +
+      "properly. Please contact the site administrator.";
 
-  let isInvalid = false;
-  if (!embedCodeFinal && !videoType && !videoId) {
-    console.warn(
-      "VideoPlayer requires either the `embedCode` prop or both the `videoType` and `videoId` props."
-    );
-    isInvalid = true;
-  } else if (!embedCodeFinal && !videoType) {
-    console.warn(
-      "VideoPlayer also requires the `videoType` prop. You have only set the `videoId` prop."
-    );
-    isInvalid = true;
-  } else if (!embedCodeFinal && !videoId) {
-    console.warn(
-      "VideoPlayer also requires the `videoId` prop. You have only set the `videoType` prop."
-    );
-    isInvalid = true;
-  } else if (embedCodeFinal && (videoType || videoId)) {
-    console.warn(
-      "VideoPlayer can accept the `embedCode` prop or the `videoType` and `videoId` props. You have set both."
-    );
-    isInvalid = true;
-  }
+    let isInvalid = false;
+    if (!embedCodeFinal && !videoType && !videoId) {
+      console.warn(
+        "NYPL Reservoir VideoPlayer: Pass in either the `embedCode` prop or " +
+          "both the `videoType` and `videoId` props; none were passed."
+      );
+      isInvalid = true;
+    } else if (!embedCodeFinal && !videoType) {
+      console.warn(
+        "NYPL Reservoir VideoPlayer: The `videoType` prop is also required. " +
+          "Only the `videoId` prop was set."
+      );
+      isInvalid = true;
+    } else if (!embedCodeFinal && !videoId) {
+      console.warn(
+        "NYPL Reservoir VideoPlayer: The `videoId` prop is also required. " +
+          "Only the `videoType` prop was set."
+      );
+      isInvalid = true;
+    } else if (embedCodeFinal && (videoType || videoId)) {
+      console.warn(
+        "NYPL Reservoir VideoPlayer: Pass in either the `embedCode` prop or " +
+          "both the `videoType` and `videoId` props; all were set."
+      );
+      isInvalid = true;
+    }
 
-  if (
-    videoId &&
-    (videoId.includes("://") ||
-      videoId.includes("http") ||
-      videoId.includes(".") ||
-      videoId.includes("youtube") ||
-      videoId.includes("vimeo"))
-  ) {
-    console.warn("The VideoPlayer `videoId` prop is not configured properly.");
-    isInvalid = true;
-  }
+    if (
+      videoId &&
+      (videoId.includes("://") ||
+        videoId.includes("http") ||
+        videoId.includes(".") ||
+        videoId.includes("youtube") ||
+        videoId.includes("vimeo"))
+    ) {
+      console.warn(
+        "NYPL Reservoir VideoPlayer: The `videoId` prop is not configured properly."
+      );
+      isInvalid = true;
+    }
 
-  if (
-    embedCodeFinal &&
-    ((!embedCodeFinal.includes("vimeo.com") &&
-      !embedCodeFinal.includes("youtube.com")) ||
-      !embedCodeFinal.includes("<iframe") ||
-      !embedCodeFinal.includes("</iframe"))
-  ) {
-    console.warn(
-      "The VideoPlayer `embedCode` prop is not configured properly."
-    );
-    isInvalid = true;
-  }
+    if (
+      embedCodeFinal &&
+      ((!embedCodeFinal.includes("vimeo.com") &&
+        !embedCodeFinal.includes("youtube.com")) ||
+        !embedCodeFinal.includes("<iframe") ||
+        !embedCodeFinal.includes("</iframe"))
+    ) {
+      console.warn(
+        "NYPL Reservoir VideoPlayer: The `embedCode` prop is not configured properly."
+      );
+      isInvalid = true;
+    }
 
-  const variant = isInvalid
-    ? "invalid"
-    : getVariant(aspectRatio, VideoPlayerAspectRatios);
-  const styles = useMultiStyleConfig("VideoPlayer", { variant });
+    const variant = isInvalid
+      ? "invalid"
+      : getVariant(aspectRatio, VideoPlayerAspectRatios);
+    const styles = useMultiStyleConfig("VideoPlayer", { variant });
 
-  const embedElement = embedCodeFinal ? (
-    <span dangerouslySetInnerHTML={{ __html: embedCodeFinal }} />
-  ) : (
-    <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}
-    />
-  );
+    const embedElement = embedCodeFinal ? (
+      <span dangerouslySetInnerHTML={{ __html: embedCodeFinal }} />
+    ) : (
+      <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 (
-    <Box
-      className={className}
-      data-testid="video-player-component"
-      id={id}
-      __css={styles}
-    >
-      {isInvalid ? (
-        <span dangerouslySetInnerHTML={{ __html: errorMessage }} />
-      ) : (
-        <ComponentWrapper
-          headingText={headingText ? headingText : null}
-          descriptionText={descriptionText ? descriptionText : null}
-          helperText={helperText && showHelperInvalidText ? helperText : null}
-          id={`${id}-componentWrapper`}
-        >
-          <Box __css={styles.inside}>{embedElement}</Box>
-        </ComponentWrapper>
-      )}
-    </Box>
-  );
-}
+    return (
+      <Box
+        className={className}
+        data-testid="video-player-component"
+        id={id}
+        __css={styles}
+        {...rest}
+      >
+        {isInvalid ? (
+          <span dangerouslySetInnerHTML={{ __html: errorMessage }} />
+        ) : (
+          <ComponentWrapper
+            headingText={headingText ? headingText : null}
+            descriptionText={descriptionText ? descriptionText : null}
+            helperText={helperText && showHelperInvalidText ? helperText : null}
+            id={`${id}-componentWrapper`}
+          >
+            <Box __css={styles.inside}>{embedElement}</Box>
+          </ComponentWrapper>
+        )}
+      </Box>
+    );
+  }
+);
+
+export default VideoPlayer;

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

@@ -2,12 +2,12 @@
 
 exports[`VideoPlayer renders the UI snapshot correctly 1`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
   data-testid="video-player-component"
   id="video-player-without-text"
 >
   <div
-    className="css-0"
+    className="css-1xdhyk6"
   >
     <div
       className="css-0"
@@ -27,21 +27,21 @@ exports[`VideoPlayer renders the UI snapshot correctly 1`] = `
 
 exports[`VideoPlayer renders the UI snapshot correctly 2`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
   data-testid="video-player-component"
   id="video-player-with-text"
 >
   <div
-    className="css-0"
+    className="css-1xdhyk6"
   >
     <h2
-      className="chakra-heading css-0"
+      className="chakra-heading css-1xdhyk6"
       id="video-player-with-text-componentWrapper-heading"
     >
       VideoPlayer Heading
     </h2>
     <p
-      className="chakra-text css-0"
+      className="chakra-text css-1xdhyk6"
     >
       VideoPlayer description
     </p>
@@ -58,42 +58,38 @@ exports[`VideoPlayer renders the UI snapshot correctly 2`] = `
       />
     </div>
     <div
-      className="css-0"
-    >
-      <div
-        aria-atomic={true}
-        aria-live="off"
-        className=" css-0"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "VideoPlayer helper test.",
-          }
+      aria-atomic={true}
+      aria-live="off"
+      className="css-1xdhyk6"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "VideoPlayer helper test.",
         }
-        data-isinvalid={false}
-        id="video-player-with-text-componentWrapper-helperText"
-      />
-    </div>
+      }
+      data-isinvalid={false}
+      id="video-player-with-text-componentWrapper-helperText"
+    />
   </div>
 </div>
 `;
 
 exports[`VideoPlayer renders the UI snapshot correctly 3`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
   data-testid="video-player-component"
   id="video-player-with-text"
 >
   <div
-    className="css-0"
+    className="css-1xdhyk6"
   >
     <h2
-      className="chakra-heading css-0"
+      className="chakra-heading css-1xdhyk6"
       id="video-player-with-text-componentWrapper-heading"
     >
       VideoPlayer Heading
     </h2>
     <p
-      className="chakra-text css-0"
+      className="chakra-text css-1xdhyk6"
     >
       VideoPlayer description
     </p>
@@ -109,28 +105,24 @@ exports[`VideoPlayer renders the UI snapshot correctly 3`] = `
       />
     </div>
     <div
-      className="css-0"
-    >
-      <div
-        aria-atomic={true}
-        aria-live="off"
-        className=" css-0"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "VideoPlayer helper test.",
-          }
+      aria-atomic={true}
+      aria-live="off"
+      className="css-1xdhyk6"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "VideoPlayer helper test.",
         }
-        data-isinvalid={false}
-        id="video-player-with-text-componentWrapper-helperText"
-      />
-    </div>
+      }
+      data-isinvalid={false}
+      id="video-player-with-text-componentWrapper-helperText"
+    />
   </div>
 </div>
 `;
 
 exports[`VideoPlayer renders the UI snapshot correctly 4`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
   data-testid="video-player-component"
   id="video-player-error"
 >
@@ -143,3 +135,53 @@ exports[`VideoPlayer renders the UI snapshot correctly 4`] = `
   />
 </div>
 `;
+
+exports[`VideoPlayer renders the UI snapshot correctly 5`] = `
+<div
+  className="css-kle7zy"
+  data-testid="video-player-component"
+  id="chakra"
+>
+  <div
+    className="css-1xdhyk6"
+  >
+    <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 6`] = `
+<div
+  className="css-1xdhyk6"
+  data-testid="props"
+  id="props"
+>
+  <div
+    className="css-1xdhyk6"
+  >
+    <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>
+`;