@nypl/design-system-react-components 1.0.0 → 1.0.3-beta

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

@@ -1,308 +0,0 @@
-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

@@ -1,188 +0,0 @@
-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

@@ -1,187 +0,0 @@
-// 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"
-  >
-    <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"
-  >
-    <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"
-  >
-    <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"
-  >
-    <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>
-`;