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

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

@@ -2,7 +2,7 @@
 
 exports[`Toggle Renders the UI snapshot correctly 1`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <label
     className="chakra-switch css-18x0has"
@@ -63,7 +63,7 @@ exports[`Toggle Renders the UI snapshot correctly 1`] = `
 
 exports[`Toggle Renders the UI snapshot correctly 2`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <label
     className="chakra-switch css-18x0has"
@@ -128,7 +128,7 @@ exports[`Toggle Renders the UI snapshot correctly 2`] = `
 
 exports[`Toggle Renders the UI snapshot correctly 3`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <label
     className="chakra-switch css-18x0has"
@@ -192,7 +192,7 @@ exports[`Toggle Renders the UI snapshot correctly 3`] = `
 
 exports[`Toggle Renders the UI snapshot correctly 4`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <label
     className="chakra-switch css-18x0has"
@@ -256,7 +256,7 @@ exports[`Toggle Renders the UI snapshot correctly 4`] = `
 
 exports[`Toggle Renders the UI snapshot correctly 5`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <label
     className="chakra-switch css-18x0has"
@@ -317,3 +317,126 @@ exports[`Toggle Renders the UI snapshot correctly 5`] = `
   </label>
 </div>
 `;
+
+exports[`Toggle Renders the UI snapshot correctly 6`] = `
+<div
+  className="css-13xjm0o"
+>
+  <label
+    className="chakra-switch css-18x0has"
+    onClick={[Function]}
+  >
+    <input
+      aria-disabled={false}
+      aria-invalid={false}
+      aria-label="Test Label"
+      checked={false}
+      className="chakra-switch__input"
+      disabled={false}
+      id="chakra"
+      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"
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+    >
+      <span
+        className="chakra-switch__thumb css-0"
+      />
+    </span>
+    <span
+      className="chakra-switch__label css-1y8kf23"
+      onMouseDown={[Function]}
+      onTouchStart={[Function]}
+    >
+      Test Label
+    </span>
+  </label>
+</div>
+`;
+
+exports[`Toggle Renders the UI snapshot correctly 7`] = `
+<div
+  className="css-1xdhyk6"
+  data-testid="props"
+>
+  <label
+    className="chakra-switch css-18x0has"
+    onClick={[Function]}
+  >
+    <input
+      aria-disabled={false}
+      aria-invalid={false}
+      aria-label="Test Label"
+      checked={false}
+      className="chakra-switch__input"
+      disabled={false}
+      id="props"
+      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"
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+    >
+      <span
+        className="chakra-switch__thumb css-0"
+      />
+    </span>
+    <span
+      className="chakra-switch__label css-1y8kf23"
+      onMouseDown={[Function]}
+      onTouchStart={[Function]}
+    >
+      Test Label
+    </span>
+  </label>
+</div>
+`;

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

@@ -281,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,139 +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(
-      "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;
-  }
+    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(
+        "NYPL Reservoir VideoPlayer: The `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."
+    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 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}
+      />
     );
-    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."
+    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>
     );
-    isInvalid = true;
   }
+);
 
-  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}
-    />
-  );
-
-  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>
-  );
-}
+export default VideoPlayer;