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

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

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

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

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

@@ -1,130 +0,0 @@
-// 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>
-`;