@nypl/design-system-react-components 1.0.1 → 1.0.2

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

@@ -0,0 +1,308 @@
+import * as React from "react";
+import { render, RenderResult, screen } from "@testing-library/react";
+import { axe } from "jest-axe";
+import renderer from "react-test-renderer";
+
+import VideoPlayer from "./VideoPlayer";
+
+describe("VideoPlayer Accessibility", () => {
+  it("passes axe accessibility test", async () => {
+    const { container } = render(
+      <VideoPlayer videoType="youtube" videoId="nm-dD2tx6bk" />
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("VideoPlayer", () => {
+  const videoId = "nm-dD2tx6bk";
+  let utils: RenderResult;
+
+  describe("YouTube player", () => {
+    beforeEach(() => {
+      utils = render(<VideoPlayer videoType="youtube" videoId={videoId} />);
+    });
+
+    it("Renders VideoPlayer container", () => {
+      expect(screen.getByTestId("video-player-component")).toBeInTheDocument();
+    });
+
+    it("Renders VideoPlayer iframe", () => {
+      expect(screen.getByTitle("YouTube video player")).toBeInTheDocument();
+    });
+
+    it("Renders YouTube video", () => {
+      expect(screen.getByTitle("YouTube video player")).toHaveAttribute(
+        "src",
+        `https://www.youtube.com/embed/${videoId}?disablekb=1&autoplay=0&fs=1&modestbranding=0`
+      );
+    });
+  });
+
+  describe("Vimeo player", () => {
+    const videoId = "474719268";
+
+    beforeEach(() => {
+      utils = render(<VideoPlayer videoType="vimeo" videoId={videoId} />);
+    });
+
+    it("Renders VideoPlayer iframe", () => {
+      expect(screen.getByTitle("Vimeo video player")).toBeInTheDocument();
+    });
+
+    it("Renders Vimeo video", () => {
+      expect(screen.getByTitle("Vimeo video player")).toHaveAttribute(
+        "src",
+        `https://player.vimeo.com/video/${videoId}?autoplay=0&loop=0`
+      );
+    });
+  });
+
+  describe("using embedCode prop", () => {
+    const embedCode = `<iframe src="https://player.vimeo.com/video/421404144?h=5467db7edd" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>`;
+    const embedCodeWithTitle = `<iframe title="Pre-Existing iFrame Title" src="https://player.vimeo.com/video/421404144?h=5467db7edd" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>`;
+
+    it("Renders custom embed code", () => {
+      render(<VideoPlayer embedCode={embedCode} />);
+      expect(screen.getByTitle("Video player")).toBeInTheDocument();
+      expect(screen.getByTitle("Video player")).toHaveAttribute(
+        "src",
+        `https://player.vimeo.com/video/421404144?h=5467db7edd`
+      );
+    });
+
+    it("Renders custom embed code with custom iframe title", () => {
+      render(
+        <VideoPlayer embedCode={embedCode} iframeTitle="Custom iFrame Title" />
+      );
+      expect(screen.getByTitle("Custom iFrame Title")).toBeInTheDocument();
+    });
+
+    it("Renders custom embed code with pre-existing title", () => {
+      render(<VideoPlayer embedCode={embedCodeWithTitle} />);
+      expect(
+        screen.getByTitle("Pre-Existing iFrame Title")
+      ).toBeInTheDocument();
+    });
+
+    it("Renders custom embed code with pre-existing title and ignores `iframeTitle` prop", () => {
+      render(
+        <VideoPlayer
+          embedCode={embedCodeWithTitle}
+          iframeTitle="Custom iFrame Title"
+        />
+      );
+      expect(
+        screen.getByTitle("Pre-Existing iFrame Title")
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe("text elements", () => {
+    beforeEach(() => {
+      utils = render(
+        <VideoPlayer
+          videoType="youtube"
+          videoId={videoId}
+          headingText="Video Player Heading"
+          descriptionText="Video Player description text."
+          helperText="Video Player helper text."
+        />
+      );
+    });
+
+    it("Renders Heading component", () => {
+      expect(screen.getByText("Video Player Heading")).toBeInTheDocument();
+    });
+
+    it("Renders description text", () => {
+      expect(
+        screen.getByText("Video Player description text.")
+      ).toBeInTheDocument();
+    });
+
+    it("Renders HelperErrorText component", () => {
+      expect(screen.getByText("Video Player helper text.")).toBeInTheDocument();
+    });
+
+    it("does not render the helper text", () => {
+      utils.rerender(
+        <VideoPlayer
+          videoType="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", () => {
+    it("Uses iframeTitle prop to add custom title attribute to iframe", () => {
+      render(
+        <VideoPlayer
+          videoType="vimeo"
+          videoId="474719268"
+          iframeTitle="My custom iframe title."
+        />
+      );
+      expect(screen.getByTitle("My custom iframe title.")).toBeInTheDocument();
+    });
+  });
+
+  describe("prop validation", () => {
+    it("Throws error if the videoId prop not is formatted properly", () => {
+      render(
+        <VideoPlayer
+          videoType="vimeo"
+          videoId="http://vimeo.com/474719268"
+          aspectRatio="fourByThree"
+        />
+      );
+      expect(
+        screen.getByText(
+          "This video player has not been configured properly. Please contact the site administrator."
+        )
+      ).toBeInTheDocument();
+    });
+
+    it("Throws appropriate error if VideoPlayer props are not configured properly", () => {
+      const warn = jest.spyOn(console, "warn");
+
+      render(<VideoPlayer />);
+      expect(warn).toHaveBeenCalledWith(
+        "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(
+        "NYPL Reservoir VideoPlayer: The `videoType` prop is also required. " +
+          "Only the `videoId` prop was set."
+      );
+
+      render(<VideoPlayer videoType="vimeo" />);
+      expect(warn).toHaveBeenCalledWith(
+        "NYPL Reservoir VideoPlayer: The `videoId` prop is also required. " +
+          "Only the `videoType` prop was set."
+      );
+
+      render(
+        <VideoPlayer
+          embedCode="<iframe src='https://player.vimeo.com/video/421404144?h=5467db7edd' width='640' height='360' frameborder='0' allow='autoplay; fullscreen; picture-in-picture' allowfullscreen></iframe>"
+          videoType="vimeo"
+          videoId="http://vimeo.com/474719268"
+        />
+      );
+      expect(warn).toHaveBeenCalledWith(
+        "NYPL Reservoir VideoPlayer: Pass in either the `embedCode` prop or " +
+          "both the `videoType` and `videoId` props; all were set."
+      );
+
+      render(
+        <VideoPlayer
+          embedCode="<iframe src='https://player.vimeo.com/video/421404144?h=5467db7edd' width='640' height='360' frameborder='0' allow='autoplay; fullscreen; picture-in-picture' allowfullscreen></iframe>"
+          videoType="vimeo"
+        />
+      );
+      expect(warn).toHaveBeenCalledWith(
+        "NYPL Reservoir VideoPlayer: Pass in either the `embedCode` prop or " +
+          "both the `videoType` and `videoId` props; all were set."
+      );
+
+      render(
+        <VideoPlayer
+          embedCode="<iframe src='https://player.vimeo.com/video/421404144?h=5467db7edd' width='640' height='360' frameborder='0' allow='autoplay; fullscreen; picture-in-picture' allowfullscreen></iframe>"
+          videoId="http://vimeo.com/474719268"
+        />
+      );
+      expect(warn).toHaveBeenCalledWith(
+        "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."
+      );
+    });
+  });
+
+  it("renders the UI snapshot correctly", () => {
+    const videoPlayerWithoutText = renderer
+      .create(
+        <VideoPlayer
+          id="video-player-without-text"
+          videoId="474719268"
+          videoType="vimeo"
+        />
+      )
+      .toJSON();
+    const videoPlayerWithText = renderer
+      .create(
+        <VideoPlayer
+          descriptionText="VideoPlayer description"
+          headingText="VideoPlayer Heading"
+          id="video-player-with-text"
+          helperText="VideoPlayer helper test."
+          videoId="474719268"
+          videoType="vimeo"
+        />
+      )
+      .toJSON();
+    const videoPlayerUsingEmbedCode = renderer
+      .create(
+        <VideoPlayer
+          descriptionText="VideoPlayer description"
+          embedCode="<iframe src='https://player.vimeo.com/video/421404144?h=5467db7edd' width='640' height='360' frameborder='0' allow='autoplay; fullscreen; picture-in-picture' allowfullscreen></iframe>"
+          headingText="VideoPlayer Heading"
+          id="video-player-with-text"
+          helperText="VideoPlayer helper test."
+        />
+      )
+      .toJSON();
+    const videoPlayerError = renderer
+      .create(
+        <VideoPlayer
+          id="video-player-error"
+          videoId="https://vimeo.com/474719268"
+          videoType="vimeo"
+        />
+      )
+      .toJSON();
+    const withChakraProps = renderer
+      .create(
+        <VideoPlayer
+          id="chakra"
+          videoId="474719268"
+          videoType="vimeo"
+          p="20px"
+          color="ui.error.primary"
+        />
+      )
+      .toJSON();
+    const withOtherProps = renderer
+      .create(
+        <VideoPlayer
+          id="props"
+          videoId="474719268"
+          videoType="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

@@ -0,0 +1,188 @@
+import { Box, chakra, useMultiStyleConfig } from "@chakra-ui/react";
+import * as React from "react";
+
+import ComponentWrapper from "../ComponentWrapper/ComponentWrapper";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+
+export type VideoPlayerTypes = "vimeo" | "youtube";
+export type VideoPlayerAspectRatios =
+  | "fourByThree"
+  | "sixteenByNine"
+  | "square";
+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 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 a code snippet provided by YouTube or Vimeo; the
+   * `videoPlayer` component will accept the `embedCode` prop or the `videoId`
+   * and `videoType` props */
+  embedCode?: string;
+  /** Optional string to set the text for a `Heading` component */
+  headingText?: string;
+  /** Optional string to set the text for a `HelperErrorText` component */
+  helperText?: HelperErrorTextType;
+  /** 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; if a `title`
+   * attribute is already present in the `embedCode` prop, this prop will be
+   * ignored */
+  iframeTitle?: 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. */
+  videoType?: VideoPlayerTypes;
+}
+
+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 === "vimeo"
+        ? iframeTitle || "Vimeo video player"
+        : iframeTitle || "YouTube video player";
+
+    const videoSrc =
+      videoType === "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 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.";
+
+    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 (
+      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" : aspectRatio;
+    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}
+        {...rest}
+      >
+        {isInvalid ? (
+          <span dangerouslySetInnerHTML={{ __html: errorMessage }} />
+        ) : (
+          <ComponentWrapper
+            headingText={headingText ? headingText : undefined}
+            descriptionText={descriptionText ? descriptionText : undefined}
+            helperText={
+              helperText && showHelperInvalidText ? helperText : undefined
+            }
+            id={`${id}-componentWrapper`}
+          >
+            <Box __css={styles.inside}>{embedElement}</Box>
+          </ComponentWrapper>
+        )}
+      </Box>
+    );
+  }
+);
+
+export default VideoPlayer;

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

@@ -0,0 +1,192 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VideoPlayer renders the UI snapshot correctly 1`] = `
+<div
+  className="css-1xdhyk6"
+  data-testid="video-player-component"
+  id="video-player-without-text"
+>
+  <div
+    className="css-1xdhyk6"
+    id="video-player-without-text-componentWrapper-wrapper"
+  >
+    <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-1xdhyk6"
+  data-testid="video-player-component"
+  id="video-player-with-text"
+>
+  <div
+    className="css-1xdhyk6"
+    id="video-player-with-text-componentWrapper-wrapper"
+  >
+    <h2
+      className="chakra-heading css-1xdhyk6"
+      id="video-player-with-text-componentWrapper-heading"
+    >
+      VideoPlayer Heading
+    </h2>
+    <p
+      className="chakra-text css-1xdhyk6"
+    >
+      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
+      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>
+</div>
+`;
+
+exports[`VideoPlayer renders the UI snapshot correctly 3`] = `
+<div
+  className="css-1xdhyk6"
+  data-testid="video-player-component"
+  id="video-player-with-text"
+>
+  <div
+    className="css-1xdhyk6"
+    id="video-player-with-text-componentWrapper-wrapper"
+  >
+    <h2
+      className="chakra-heading css-1xdhyk6"
+      id="video-player-with-text-componentWrapper-heading"
+    >
+      VideoPlayer Heading
+    </h2>
+    <p
+      className="chakra-text css-1xdhyk6"
+    >
+      VideoPlayer description
+    </p>
+    <div
+      className="css-0"
+    >
+      <span
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "<iframe title=\\"Video player\\" src='https://player.vimeo.com/video/421404144?h=5467db7edd' width='640' height='360' frameborder='0' allow='autoplay; fullscreen; picture-in-picture' allowfullscreen></iframe>",
+          }
+        }
+      />
+    </div>
+    <div
+      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>
+</div>
+`;
+
+exports[`VideoPlayer renders the UI snapshot correctly 4`] = `
+<div
+  className="css-1xdhyk6"
+  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>
+`;
+
+exports[`VideoPlayer renders the UI snapshot correctly 5`] = `
+<div
+  className="css-kle7zy"
+  data-testid="video-player-component"
+  id="chakra"
+>
+  <div
+    className="css-1xdhyk6"
+    id="chakra-componentWrapper-wrapper"
+  >
+    <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"
+    id="props-componentWrapper-wrapper"
+  >
+    <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>
+`;