@nypl/design-system-react-components 0.26.1 → 1.0.0

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

@@ -29,7 +29,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 1`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -45,7 +45,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 1`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -57,7 +57,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 1`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -108,7 +108,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 2`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -124,7 +124,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 2`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -136,7 +136,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 2`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -187,7 +187,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 3`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -203,7 +203,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 3`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -215,7 +215,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 3`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -259,7 +259,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 4`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -275,7 +275,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 4`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -287,7 +287,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 4`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -338,7 +338,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 5`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -350,7 +350,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 5`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -401,7 +401,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 6`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -440,7 +440,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 7`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -456,7 +456,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 7`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -468,7 +468,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 7`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -530,7 +530,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 8`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -546,7 +546,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 8`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -558,7 +558,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 8`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -609,7 +609,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 9`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -625,7 +625,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 9`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -637,7 +637,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 9`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -688,7 +688,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 10`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -704,7 +704,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 10`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -716,7 +716,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 10`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -767,7 +767,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 11`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -783,7 +783,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 11`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -795,7 +795,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 11`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -847,7 +847,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 12`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -863,7 +863,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 12`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />
@@ -875,7 +875,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 12`] = `
           className="css-0"
           style={
             Object {
-              "marginBottom": null,
+              "marginBottom": undefined,
             }
           }
         />

package/src/components/SkipNavigation/SkipNavigation.stories.mdx

@@ -0,0 +1,90 @@
+import { Box, VStack } from "@chakra-ui/react";
+import {
+  ArgsTable,
+  Canvas,
+  Description,
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
+
+import Button from "../Button/Button";
+import SkipNavigation from "./SkipNavigation";
+import { getCategory } from "../../utils/componentCategories";
+
+<Meta
+  title={getCategory("SkipNavigation")}
+  component={SkipNavigation}
+  parameters={{
+    jest: ["SkipNavigation.test.tsx"],
+  }}
+  argTypes={{
+    className: { control: false },
+    id: { control: false },
+    target: { control: false },
+  }}
+/>
+
+# SkipNavigation
+
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.28.0`   |
+| Latest            | `0.28.0`   |
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component Props](#component-props)
+- [Accessibility](#accessibility)
+
+## Overview
+
+<Description of={SkipNavigation} />
+
+**NOTE: In order to see the links in the `SkipNavigation` component, start by focusing
+on the button below by tabbing or clicking on it. Then press "tab" to see the
+first link and press "tab" again to see the second link. Hiding the links
+intentional as the links should initially be visually hidden.**
+
+## Component Props
+
+<Canvas>
+  <Story
+    name="SkipNavigation with Controls"
+    args={{
+      className: undefined,
+      id: "skip-nav",
+      target: "mainContent",
+    }}
+  >
+    {(args) => (
+      <>
+        <Button>Focus on me and then press "tab"</Button>
+        <SkipNavigation {...args} />
+      </>
+    )}
+  </Story>
+</Canvas>
+
+<ArgsTable story="SkipNavigation with Controls" />
+
+## Accessibility
+
+To create a useable page for screen readers, a link or a navigational list of
+links should be added before all the content on a page. The Reservoir Design
+System (DS) achieves this through the `SkipNavigation` component which renders
+a `<nav>` element with an `aria-label` of "Skip Navigation". Inside the `<nav>`
+element, an unordered list is rendered.
+
+The reason this is a navigation list of links is because the first main link
+points to the anchor of the main content, in this case `"#mainContent"`. The
+second link points to accessibility information on [NYPL.org/accessibility](https://nypl.org/accessibility).
+
+See the [Skip Navigation accessibility guide](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/accessibility-guide-skip-navigation--page)
+for more information on how to use this component with other DS components.
+
+Resources:
+
+- [WebAIM Skip Navigation Links](https://webaim.org/techniques/skipnav/)
+- [WebAIM CSS in Action "Skip" links](https://webaim.org/techniques/css/invisiblecontent/#skipnavlinks)
+- [CSS-Tricks A Deep Dive on Skipping to Content](https://css-tricks.com/a-deep-dive-on-skipping-to-content/)

package/src/components/SkipNavigation/SkipNavigation.test.tsx

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { render, screen, within } from "@testing-library/react";
+import { axe } from "jest-axe";
+import renderer from "react-test-renderer";
+
+import SkipNavigation from "./SkipNavigation";
+
+describe("SkipNavigation Accessibility", () => {
+  it("passes axe accessibility test", async () => {
+    const { container } = render(<SkipNavigation />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("Label", () => {
+  it("renders a nav element with an unordered list", () => {
+    render(<SkipNavigation />);
+    const nav = screen.getByRole("navigation");
+
+    expect(nav).toBeInTheDocument();
+    expect(nav).toHaveAttribute("aria-label", "Skip Navigation");
+    // Chakra renders other lists so we only want the list we
+    // created within the nav element.
+    const { getByRole } = within(nav);
+    expect(getByRole("list")).toBeInTheDocument();
+  });
+
+  it("renders two links", () => {
+    render(<SkipNavigation />);
+    const links = screen.getAllByRole("link");
+
+    expect(links[0]).toHaveAttribute("href", "#mainContent");
+    expect(links[1]).toHaveAttribute(
+      "href",
+      "https://www.nypl.org/accessibility"
+    );
+  });
+
+  it("renders a custom main link target", () => {
+    render(<SkipNavigation target="customId" />);
+    const links = screen.getAllByRole("link");
+
+    expect(links[0]).toHaveAttribute("href", "customId");
+  });
+
+  it("Renders the UI snapshot correctly", () => {
+    const simple = renderer.create(<SkipNavigation />).toJSON();
+    const customTarget = renderer
+      .create(<SkipNavigation target="customId" />)
+      .toJSON();
+    const withChakraProps = renderer
+      .create(<SkipNavigation p="20px" color="ui.error.primary" />)
+      .toJSON();
+    const withOtherProps = renderer
+      .create(<SkipNavigation data-testid="props" />)
+      .toJSON();
+
+    expect(simple).toMatchSnapshot();
+    expect(customTarget).toMatchSnapshot();
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
+  });
+});

package/src/components/SkipNavigation/SkipNavigation.tsx

@@ -0,0 +1,51 @@
+import { Box, chakra, useStyleConfig } from "@chakra-ui/react";
+import * as React from "react";
+
+import Link from "../Link/Link";
+import List from "../List/List";
+
+interface SkipNavigationProps {
+  /** Additional CSS class name to render in the `nav` element. */
+  className?: string;
+  /** ID that other components can cross reference for accessibility purposes */
+  id?: string;
+  /** The anchor target for the main skip link. The default is "#mainContent". */
+  target?: string;
+}
+
+/**
+ * SkipNavigation is a component that is used to provide a navigational list of
+ * links. The first link is used to skip to the main content of the page using
+ * the `#mainContent` id, and the second link points to accessibility information
+ * on NYPL.org. These links are visually hidden but can be read by screenreaders.
+ */
+export const SkipNavigation = chakra(
+  (props: React.PropsWithChildren<SkipNavigationProps>) => {
+    const { className, id, target = "#mainContent", ...rest } = props;
+    const styles = useStyleConfig("SkipNavigation");
+
+    return (
+      <Box
+        as="nav"
+        aria-label="Skip Navigation"
+        className={className}
+        id={id}
+        __css={styles}
+        {...rest}
+      >
+        <List inline noStyling type="ul">
+          <li>
+            <Link href={target}>Skip to Main Content</Link>
+          </li>
+          <li>
+            <Link href="https://www.nypl.org/accessibility">
+              Click to learn about accessibility at the Library
+            </Link>
+          </li>
+        </List>
+      </Box>
+    );
+  }
+);
+
+export default SkipNavigation;

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

@@ -0,0 +1,130 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Label Renders the UI snapshot correctly 1`] = `
+<nav
+  aria-label="Skip Navigation"
+  className="css-1xdhyk6"
+>
+  <ul
+    className="css-1xdhyk6"
+  >
+    <li>
+      <a
+        className="css-1xdhyk6"
+        href="#mainContent"
+        rel={null}
+        target={null}
+      >
+        Skip to Main Content
+      </a>
+    </li>
+    <li>
+      <a
+        className="css-1xdhyk6"
+        href="https://www.nypl.org/accessibility"
+        rel={null}
+        target={null}
+      >
+        Click to learn about accessibility at the Library
+      </a>
+    </li>
+  </ul>
+</nav>
+`;
+
+exports[`Label Renders the UI snapshot correctly 2`] = `
+<nav
+  aria-label="Skip Navigation"
+  className="css-1xdhyk6"
+>
+  <ul
+    className="css-1xdhyk6"
+  >
+    <li>
+      <a
+        className="css-1xdhyk6"
+        href="customId"
+        rel={null}
+        target={null}
+      >
+        Skip to Main Content
+      </a>
+    </li>
+    <li>
+      <a
+        className="css-1xdhyk6"
+        href="https://www.nypl.org/accessibility"
+        rel={null}
+        target={null}
+      >
+        Click to learn about accessibility at the Library
+      </a>
+    </li>
+  </ul>
+</nav>
+`;
+
+exports[`Label Renders the UI snapshot correctly 3`] = `
+<nav
+  aria-label="Skip Navigation"
+  className="css-kle7zy"
+>
+  <ul
+    className="css-1xdhyk6"
+  >
+    <li>
+      <a
+        className="css-1xdhyk6"
+        href="#mainContent"
+        rel={null}
+        target={null}
+      >
+        Skip to Main Content
+      </a>
+    </li>
+    <li>
+      <a
+        className="css-1xdhyk6"
+        href="https://www.nypl.org/accessibility"
+        rel={null}
+        target={null}
+      >
+        Click to learn about accessibility at the Library
+      </a>
+    </li>
+  </ul>
+</nav>
+`;
+
+exports[`Label Renders the UI snapshot correctly 4`] = `
+<nav
+  aria-label="Skip Navigation"
+  className="css-1xdhyk6"
+  data-testid="props"
+>
+  <ul
+    className="css-1xdhyk6"
+  >
+    <li>
+      <a
+        className="css-1xdhyk6"
+        href="#mainContent"
+        rel={null}
+        target={null}
+      >
+        Skip to Main Content
+      </a>
+    </li>
+    <li>
+      <a
+        className="css-1xdhyk6"
+        href="https://www.nypl.org/accessibility"
+        rel={null}
+        target={null}
+      >
+        Click to learn about accessibility at the Library
+      </a>
+    </li>
+  </ul>
+</nav>
+`;