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

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

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

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