@nypl/design-system-react-components 0.25.7 → 0.25.8

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

@@ -0,0 +1,140 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { axe } from "jest-axe";
+import renderer from "react-test-renderer";
+import * as generateUUID from "../../helpers/generateUUID";
+import Toggle from "./Toggle";
+
+describe("Toggle Accessibility", () => {
+  it("Passes axe accessibility test", async () => {
+    const { container } = render(
+      <Toggle id="inputID" onChange={jest.fn()} labelText="Test Label" />
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("Toggle", () => {
+  let changeHandler;
+  let generateUUIDSpy;
+
+  beforeEach(() => {
+    changeHandler = jest.fn();
+  });
+
+  it("Renders with a Toggle input and label", () => {
+    render(<Toggle id="inputID" labelText="Test Label" />);
+    expect(screen.getByLabelText("Test Label")).toBeInTheDocument();
+    expect(screen.getByRole("checkbox")).toBeInTheDocument();
+  });
+
+  it("Renders visible helper or error text", () => {
+    const { rerender } = render(
+      <Toggle
+        id="inputID"
+        labelText="Test Label"
+        helperText="This is the helper text."
+        invalidText="This is the error text :("
+      />
+    );
+    expect(screen.getByText("This is the helper text.")).toBeVisible();
+    expect(
+      screen.queryByText("This is the error text :(")
+    ).not.toBeInTheDocument();
+
+    rerender(
+      <Toggle
+        id="inputID"
+        labelText="Test Label"
+        isInvalid
+        helperText="This is the helper text."
+        invalidText="This is the error text :("
+      />
+    );
+    expect(screen.getByText("This is the error text :(")).toBeVisible();
+    expect(
+      screen.queryByText("This is the helper text.")
+    ).not.toBeInTheDocument();
+  });
+
+  it("Sets the Toggle's ID", () => {
+    render(<Toggle id="inputID" labelText="Test Label" />);
+    expect(screen.getByRole("checkbox")).toHaveAttribute("id", "inputID");
+  });
+
+  it("Calls the UUID generation function if no id prop value is passed", () => {
+    generateUUIDSpy = jest.spyOn(generateUUID, "default");
+    expect(generateUUIDSpy).toHaveBeenCalledTimes(0);
+    render(<Toggle labelText="Test Label" />);
+    expect(generateUUIDSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("Sets the 'checked' attribute", () => {
+    render(<Toggle id="inputID" labelText="Test Label" isChecked />);
+    expect(screen.getByRole("checkbox")).toHaveAttribute("checked");
+  });
+
+  it("Sets the 'disabled' attribute", () => {
+    render(<Toggle id="inputID" labelText="Test Label" isDisabled />);
+    expect(screen.getByRole("checkbox")).toHaveAttribute("disabled");
+  });
+
+  it("Sets the error state", () => {
+    render(
+      <Toggle
+        id="inputID-attributes"
+        labelText="onChange test"
+        invalidText="This is the error text!"
+        isInvalid
+      />
+    );
+    expect(screen.getByRole("checkbox")).toHaveAttribute("aria-invalid");
+    expect(screen.getByText("This is the error text!")).toBeInTheDocument();
+  });
+
+  it("does not render the error text when 'isInvalid' is true but 'invalidText' is not passed", () => {
+    render(
+      <Toggle id="inputID-attributes" labelText="onChange test" isInvalid />
+    );
+    expect(screen.getByRole("checkbox")).toHaveAttribute("aria-invalid");
+    expect(
+      screen.queryByText("This is the error text!")
+    ).not.toBeInTheDocument();
+  });
+
+  it("Changing the value calls the onChange handler", () => {
+    const utils = render(
+      <Toggle
+        id="onChangeTest"
+        onChange={changeHandler}
+        labelText="onChangeTest Lab"
+        isChecked
+      />
+    );
+
+    expect(changeHandler).toHaveBeenCalledTimes(0);
+    userEvent.click(utils.getByText("onChangeTest Lab"));
+    expect(changeHandler).toHaveBeenCalledTimes(1);
+  });
+
+  it("Renders the UI snapshot correctly", () => {
+    const primary = renderer
+      .create(<Toggle id="inputID" labelText="Test Label" />)
+      .toJSON();
+    const isChecked = renderer
+      .create(<Toggle id="Toggle-checked" labelText="Test Label" isChecked />)
+      .toJSON();
+    const isInvalid = renderer
+      .create(<Toggle id="Toggle-invalid" labelText="Test Label" isInvalid />)
+      .toJSON();
+    const isDisabled = renderer
+      .create(<Toggle id="Toggle-disabled" labelText="Test Label" isDisabled />)
+      .toJSON();
+
+    expect(primary).toMatchSnapshot();
+    expect(isChecked).toMatchSnapshot();
+    expect(isInvalid).toMatchSnapshot();
+    expect(isDisabled).toMatchSnapshot();
+  });
+});

package/src/components/Toggle/Toggle.tsx

@@ -0,0 +1,118 @@
+import * as React from "react";
+import {
+  Box,
+  Switch,
+  useMultiStyleConfig,
+  useStyleConfig,
+} from "@chakra-ui/react";
+import generateUUID from "../../helpers/generateUUID";
+import { ToggleSizes } from "./ToggleSizes";
+import HelperErrorText from "../HelperErrorText/HelperErrorText";
+
+export interface ToggleProps {
+  /** Optionally pass in additional Chakra-based styles. */
+  additionalStyles?: { [key: string]: any };
+  /** Used for uncontrolled scenarios.  Sets the state of the Toggle when the page first loads.
+   *   If true, the toggle will be initially set to the "on" position. */
+  defaultChecked?: boolean;
+  /** Optional string to populate the HelperErrorText for standard state */
+  helperText?: string;
+  /** ID that other components can cross reference for accessibility purposes */
+  id?: string;
+  /** Optional string to populate the HelperErrorText for the error state
+   * when `isInvalid` is true. */
+  invalidText?: string;
+  /** When using the Toggle as a "controlled" form element, you can specify
+   * the Toggle's checked state using this prop.
+   * Learn more about controlled and uncontrolled form fields:
+   * https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/ */
+  isChecked?: boolean;
+  /** Adds the 'disabled' and `aria-disabled` attributes to the input when true.
+   * This also makes the text italic and color scheme gray. */
+  isDisabled?: boolean;
+  /** Adds the 'aria-invalid' attribute to the input when true. This also makes
+   * the color theme "NYPL error" red for the button and text. */
+  isInvalid?: boolean;
+  /** Adds the 'required' attribute to the input when true. */
+  isRequired?: boolean;
+  /** The checkbox's label. This will serve as the text content for a `<label>`
+   * element if `showlabel` is true, or an "aria-label" if `showLabel` is false. */
+  labelText: string;
+  /** The name prop indicates into which group of checkboxes this checkbox
+   * belongs. If none is specified, 'default' will be used */
+  name?: string;
+  /** The action to perform on the `<input>`'s onChange function  */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  /** Offers the ability to hide the helper/invalid text. */
+  size?: ToggleSizes;
+}
+
+export const onChangeDefault = () => {
+  return;
+};
+
+/**
+ * Component that renders Chakra's `Switch` component along with NYPL defaults.
+ */
+const Toggle = React.forwardRef<HTMLInputElement, ToggleProps>(
+  (props, ref?) => {
+    const {
+      additionalStyles = {},
+      defaultChecked = false,
+      helperText,
+      id = generateUUID(),
+      invalidText,
+      isChecked,
+      isDisabled = false,
+      isInvalid = false,
+      isRequired = false,
+      labelText,
+      name,
+      onChange = onChangeDefault,
+      size = ToggleSizes.Large,
+    } = props;
+    const footnote = isInvalid ? invalidText : helperText;
+    const ariaAttributes = {};
+    const styles = useMultiStyleConfig("Toggle", {});
+    const switchStyles = useStyleConfig("Switch");
+    ariaAttributes["aria-label"] =
+      labelText && footnote ? `${labelText} - ${footnote}` : labelText;
+
+    return (
+      <>
+        <Box __css={{ ...styles, ...additionalStyles }}>
+          <Switch
+            id={id}
+            name={name || "default"}
+            isDisabled={isDisabled}
+            isInvalid={isInvalid}
+            isRequired={isRequired}
+            ref={ref}
+            size={size === ToggleSizes.Large ? "lg" : "sm"}
+            {...(isChecked !== undefined
+              ? {
+                  isChecked,
+                  onChange,
+                }
+              : {
+                  defaultChecked,
+                })}
+            {...ariaAttributes}
+            __css={switchStyles}
+          >
+            {labelText}
+          </Switch>
+        </Box>
+        {footnote && (
+          <Box __css={styles.helper}>
+            <HelperErrorText isInvalid={isInvalid} id={`${id}-helperText`}>
+              {footnote}
+            </HelperErrorText>
+          </Box>
+        )}
+      </>
+    );
+  }
+);
+
+export default Toggle;

package/src/components/Toggle/ToggleSizes.tsx

@@ -0,0 +1,4 @@
+export enum ToggleSizes {
+  Large = "large",
+  Small = "small",
+}

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

@@ -37,11 +37,13 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.23.2`   |
-| Latest            | `0.25.2`   |
+| Latest            | `0.25.8`   |
 
 <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,27 +51,15 @@ 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",
       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.",
     }}
   >
-    {(args) => (
-      <VideoPlayer
-        {...args}
-        videoType={args.videoType}
-        videoId={
-          args.videoType === "vimeo"
-            ? args.videoId || "474719268"
-            : args.videoId || "nm-dD2tx6bk"
-        }
-        aspectRatio={args.aspectRatio}
-      />
-    )}
+    {(args) => <VideoPlayer {...args} />}
   </Story>
 </Canvas>
 
@@ -94,6 +84,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 +122,8 @@ 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>