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

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

@@ -0,0 +1,255 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Toggle Renders the UI snapshot correctly 1`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="chakra-switch css-u8kezd"
+    onClick={[Function]}
+  >
+    <input
+      aria-disabled={false}
+      aria-invalid={false}
+      aria-label="Test Label"
+      checked={false}
+      className="chakra-switch__input"
+      disabled={false}
+      id="inputID"
+      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 2`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="chakra-switch css-u8kezd"
+    data-checked=""
+    onClick={[Function]}
+  >
+    <input
+      aria-disabled={false}
+      aria-invalid={false}
+      aria-label="Test Label"
+      checked={true}
+      className="chakra-switch__input"
+      disabled={false}
+      id="Toggle-checked"
+      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"
+      data-checked=""
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+    >
+      <span
+        className="chakra-switch__thumb css-0"
+        data-checked=""
+      />
+    </span>
+    <span
+      className="chakra-switch__label css-1y8kf23"
+      data-checked=""
+      onMouseDown={[Function]}
+      onTouchStart={[Function]}
+    >
+      Test Label
+    </span>
+  </label>
+</div>
+`;
+
+exports[`Toggle Renders the UI snapshot correctly 3`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="chakra-switch css-u8kezd"
+    data-invalid=""
+    onClick={[Function]}
+  >
+    <input
+      aria-disabled={false}
+      aria-invalid={true}
+      aria-label="Test Label"
+      checked={false}
+      className="chakra-switch__input"
+      disabled={false}
+      id="Toggle-invalid"
+      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"
+      data-invalid=""
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+    >
+      <span
+        className="chakra-switch__thumb css-0"
+      />
+    </span>
+    <span
+      className="chakra-switch__label css-1y8kf23"
+      data-invalid=""
+      onMouseDown={[Function]}
+      onTouchStart={[Function]}
+    >
+      Test Label
+    </span>
+  </label>
+</div>
+`;
+
+exports[`Toggle Renders the UI snapshot correctly 4`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="chakra-switch css-u8kezd"
+    data-disabled=""
+    onClick={[Function]}
+  >
+    <input
+      aria-disabled={true}
+      aria-invalid={false}
+      aria-label="Test Label"
+      checked={false}
+      className="chakra-switch__input"
+      disabled={true}
+      id="Toggle-disabled"
+      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"
+      data-disabled=""
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+    >
+      <span
+        className="chakra-switch__thumb css-0"
+      />
+    </span>
+    <span
+      className="chakra-switch__label css-1y8kf23"
+      data-disabled=""
+      onMouseDown={[Function]}
+      onTouchStart={[Function]}
+    >
+      Test Label
+    </span>
+  </label>
+</div>
+`;

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

@@ -1,17 +1,27 @@
+import { action } from "@storybook/addon-actions";
 import {
-  Meta,
-  Story,
-  Canvas,
   ArgsTable,
+  Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 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";
+import { VideoPlayerAspectRatios, VideoPlayerTypes } from "./VideoPlayerTypes";
 import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
+import { getStorybookEnumValues } from "../../utils/utils";
+
+export const ratiosEnumValues = getStorybookEnumValues(
+  VideoPlayerAspectRatios,
+  "VideoPlayerAspectRatios"
+);
+export const typesEnumValues = getStorybookEnumValues(
+  VideoPlayerTypes,
+  "VideoPlayerTypes"
+);
 
 <Meta
   title={getCategory("VideoPlayer")}
@@ -20,15 +30,27 @@ import { getCategory } from "../../utils/componentCategories";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10968%3A3680",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10968%3A3680",
     },
     jest: ["VideoPlayer.test.tsx"],
   }}
   argTypes={{
-    attributes: { table: { disable: true } },
-    className: { table: { disable: true } },
-    modifiers: { table: { disable: true } },
+    aspectRatio: {
+      control: { type: "select" },
+      table: {
+        defaultValue: { summary: "VideoPlayerAspectRatios.SixteenByNine" },
+      },
+      options: ratiosEnumValues.options,
+    },
+    className: { control: false },
+    id: { control: false },
+    showHelperInvalidText: {
+      table: { defaultValue: { summary: true } },
+    },
+    videoType: {
+      control: { type: "select" },
+      options: typesEnumValues.options,
+    },
   }}
 />
 
@@ -37,11 +59,13 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.23.2`   |
-| Latest            | `0.25.2`   |
+| Latest            | `0.25.9`   |
 
 <Description of={VideoPlayer} />
 
-The `VideoPlayer` component is used to embed a `Vimeo` or `YouTube` video player on a page. The component requires both the `videoType` and `videoId` props. 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 `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.
 
 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`.
 
@@ -49,25 +73,27 @@ The `aspectRatio` prop is used to control the sizing of the space allotted for t
   <Story
     name="VideoPlayer"
     args={{
-      videoType: VideoPlayerTypes.Vimeo,
-      videoId: "",
-      headingText: "NYPL Video",
+      aspectRatio: "VideoPlayerAspectRatios.SixteenByNine",
+      className: undefined,
       descriptionText:
         "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",
+      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: "NYPL Video",
       helperText:
         "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.",
+      id: "videoPlayer-id",
+      iframeTitle: undefined,
+      showHelperInvalidText: true,
+      videoId: undefined,
+      videoType: undefined,
     }}
   >
     {(args) => (
       <VideoPlayer
         {...args}
-        videoType={args.videoType}
-        videoId={
-          args.videoType === "vimeo"
-            ? args.videoId || "474719268"
-            : args.videoId || "nm-dD2tx6bk"
-        }
-        aspectRatio={args.aspectRatio}
+        aspectRatio={ratiosEnumValues.getValue(args.aspectRatio)}
+        embedCode={args.embedCode}
+        videoType={args.videoType && typesEnumValues.getValue(args.videoType)}
       />
     )}
   </Story>
@@ -94,6 +120,37 @@ https://www.youtube.com/watch?v=[VIDEO_ID]
 https://www.youtube.com/watch?v=nm-dD2tx6bk
 ```
 
+## Example Embed Code Snippets
+
+The examples below are shown with precise HTML formatting. However, often the embed code snippets provided by 3rd party video services are delivered as one long string.
+
+### Vimeo
+
+```html
+<iframe
+  src="https://player.vimeo.com/video/421404144?h=5467db7edd"
+  width="640"
+  height="360"
+  frameborder="0"
+  allow="autoplay; fullscreen; picture-in-picture"
+  allowfullscreen
+></iframe>
+```
+
+### YouTube
+
+```html
+<iframe
+  width="560"
+  height="315"
+  src="https://www.youtube.com/embed/nm-dD2tx6bk"
+  title="YouTube video player"
+  frameborder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+  allowfullscreen
+></iframe>
+```
+
 ## Errored
 
 If the necessary props are not passed to the `VideoPlayer` component, the component UI will display an error message.
@@ -101,8 +158,22 @@ If the necessary props are not passed to the `VideoPlayer` component, the compon
 <Canvas>
   <DSProvider>
     <VideoPlayer
-      type={VideoPlayerTypes.Vimeo}
       videoId="https://vimeo.com/474719268"
+      videoType={VideoPlayerTypes.Vimeo}
+    />
+  </DSProvider>
+</Canvas>
+
+## HTML in Helper Text
+
+It's possible to include HTML in the `helperText` prop.
+
+<Canvas>
+  <DSProvider>
+    <VideoPlayer
+      helperText="This helper text <b>contains HTML</b>."
+      videoId="474719268"
+      videoType={VideoPlayerTypes.Vimeo}
     />
   </DSProvider>
 </Canvas>

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

@@ -63,6 +63,46 @@ describe("VideoPlayer", () => {
     });
   });
 
+  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(
@@ -121,7 +161,7 @@ describe("VideoPlayer", () => {
   });
 
   describe("prop validation", () => {
-    it("Throws error if videoId not formatted properly", () => {
+    it("Throws error if the videoId prop not is formatted properly", () => {
       render(
         <VideoPlayer
           videoType={VideoPlayerTypes.Vimeo}
@@ -135,6 +175,56 @@ describe("VideoPlayer", () => {
         )
       ).toBeInTheDocument();
     });
+
+    it("Throws appropriate error if VideoPlayer props are not configured properly", () => {
+      const warn = jest.spyOn(console, "warn");
+
+      render(<VideoPlayer />);
+      expect(warn).toHaveBeenCalledWith(
+        "VideoPlayer requires either the `embedCode` prop or both the `videoType` and `videoId` props."
+      );
+
+      render(<VideoPlayer videoId="http://vimeo.com/474719268" />);
+      expect(warn).toHaveBeenCalledWith(
+        "VideoPlayer also requires the `videoType` prop. You have only set the `videoId` prop."
+      );
+
+      render(<VideoPlayer videoType={VideoPlayerTypes.Vimeo} />);
+      expect(warn).toHaveBeenCalledWith(
+        "VideoPlayer also requires the `videoId` prop. You have only set the `videoType` prop."
+      );
+
+      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={VideoPlayerTypes.Vimeo}
+          videoId="http://vimeo.com/474719268"
+        />
+      );
+      expect(warn).toHaveBeenCalledWith(
+        "VideoPlayer can accept the `embedCode` prop or the `videoType` and `videoId` props. You have set both."
+      );
+
+      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={VideoPlayerTypes.Vimeo}
+        />
+      );
+      expect(warn).toHaveBeenCalledWith(
+        "VideoPlayer can accept the `embedCode` prop or the `videoType` and `videoId` props. You have set both."
+      );
+
+      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(
+        "VideoPlayer can accept the `embedCode` prop or the `videoType` and `videoId` props. You have set both."
+      );
+    });
   });
 
   it("renders the UI snapshot correctly", () => {
@@ -159,6 +249,17 @@ describe("VideoPlayer", () => {
         />
       )
       .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
@@ -171,6 +272,7 @@ describe("VideoPlayer", () => {
 
     expect(videoPlayerWithoutText).toMatchSnapshot();
     expect(videoPlayerWithText).toMatchSnapshot();
+    expect(videoPlayerUsingEmbedCode).toMatchSnapshot();
     expect(videoPlayerError).toMatchSnapshot();
   });
 });