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

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

@@ -0,0 +1,470 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Toggle Renders the UI snapshot correctly 1`] = `
+<div
+  className="css-1u8qly9"
+  id="inputID-wrapper"
+>
+  <div
+    className="css-0"
+  >
+    <label
+      className="chakra-switch css-18x0has"
+      onClick={[Function]}
+    >
+      <input
+        aria-disabled={false}
+        aria-invalid={false}
+        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>
+</div>
+`;
+
+exports[`Toggle Renders the UI snapshot correctly 2`] = `
+<div
+  className="css-1u8qly9"
+  id="Toggle-checked-wrapper"
+>
+  <div
+    className="css-0"
+  >
+    <label
+      className="chakra-switch css-18x0has"
+      data-checked=""
+      onClick={[Function]}
+    >
+      <input
+        aria-disabled={false}
+        aria-invalid={false}
+        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>
+</div>
+`;
+
+exports[`Toggle Renders the UI snapshot correctly 3`] = `
+<div
+  className="css-1u8qly9"
+  id="Toggle-invalid-wrapper"
+>
+  <div
+    className="css-0"
+  >
+    <label
+      className="chakra-switch css-18x0has"
+      data-invalid=""
+      onClick={[Function]}
+    >
+      <input
+        aria-disabled={false}
+        aria-invalid={true}
+        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>
+</div>
+`;
+
+exports[`Toggle Renders the UI snapshot correctly 4`] = `
+<div
+  className="css-1u8qly9"
+  id="Toggle-disabled-wrapper"
+>
+  <div
+    className="css-0"
+  >
+    <label
+      className="chakra-switch css-18x0has"
+      data-disabled=""
+      onClick={[Function]}
+    >
+      <input
+        aria-disabled={true}
+        aria-invalid={false}
+        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>
+</div>
+`;
+
+exports[`Toggle Renders the UI snapshot correctly 5`] = `
+<div
+  className="css-1u8qly9"
+  id="Toggle-disabled-wrapper"
+>
+  <div
+    className="css-0"
+  >
+    <label
+      className="chakra-switch css-18x0has"
+      data-disabled=""
+      onClick={[Function]}
+    >
+      <input
+        aria-disabled={true}
+        aria-invalid={false}
+        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>
+</div>
+`;
+
+exports[`Toggle Renders the UI snapshot correctly 6`] = `
+<div
+  className="css-7zjd3y"
+  id="chakra-wrapper"
+>
+  <div
+    className="css-0"
+  >
+    <label
+      className="chakra-switch css-18x0has"
+      onClick={[Function]}
+    >
+      <input
+        aria-disabled={false}
+        aria-invalid={false}
+        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>
+</div>
+`;
+
+exports[`Toggle Renders the UI snapshot correctly 7`] = `
+<div
+  className="css-1u8qly9"
+  data-testid="props"
+  id="props-wrapper"
+>
+  <div
+    className="css-0"
+  >
+    <label
+      className="chakra-switch css-18x0has"
+      onClick={[Function]}
+    >
+      <input
+        aria-disabled={false}
+        aria-invalid={false}
+        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>
+</div>
+`;

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

@@ -0,0 +1,212 @@
+import { action } from "@storybook/addon-actions";
+import {
+  ArgsTable,
+  Canvas,
+  Description,
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
+import { withDesign } from "storybook-addon-designs";
+
+import VideoPlayer from "./VideoPlayer";
+import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
+
+<Meta
+  title={getCategory("VideoPlayer")}
+  component={VideoPlayer}
+  decorators={[withDesign]}
+  parameters={{
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10968%3A3680",
+    },
+    jest: ["VideoPlayer.test.tsx"],
+  }}
+  argTypes={{
+    aspectRatio: {
+      table: {
+        defaultValue: { summary: "sixteenByNine" },
+      },
+    },
+    className: { control: false },
+    id: { control: false },
+    showHelperInvalidText: {
+      table: { defaultValue: { summary: true } },
+    },
+    videoType: {},
+  }}
+/>
+
+# Video Player
+
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.23.2`   |
+| Latest            | `0.28.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.
+
+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`.
+
+## Component Props
+
+<Canvas withToolbar>
+  <Story
+    name="VideoPlayer"
+    args={{
+      aspectRatio: "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}
+        aspectRatio={args.aspectRatio}
+        embedCode={args.embedCode}
+        videoId={args.videoId && args.videoId}
+        videoType={args.videoType && args.videoType}
+      />
+    )}
+  </Story>
+</Canvas>
+
+<ArgsTable story="VideoPlayer" />
+
+**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
+
+```
+https://vimeo.com/[VIDEO_ID]
+https://vimeo.com/474719268
+```
+
+### YouTube
+
+```
+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.
+
+<Canvas>
+  <DSProvider>
+    <VideoPlayer videoId="https://vimeo.com/474719268" videoType="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="vimeo"
+    />
+  </DSProvider>
+</Canvas>