@nypl/design-system-react-components 0.27.0 → 0.28.0

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>
+`;

package/src/components/Slider/Slider.stories.mdx

@@ -8,8 +8,6 @@ import {
 import { withDesign } from "storybook-addon-designs";
 
 import Heading from "../Heading/Heading";
-import { HeadingLevels } from "../Heading/HeadingTypes";
-import { GridGaps } from "../Grid/GridTypes";
 import SimpleGrid from "../Grid/SimpleGrid";
 import Slider from "./Slider";
 import { getCategory } from "../../utils/componentCategories";
@@ -76,7 +74,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.4`   |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -160,10 +158,10 @@ Resources:
 ### Slider Accessibility Implementation
 
 Chakra's `Slider` component is accessible and, as recommended, we pass in an
-`aria-label` to their `Slider` component. On top of that, the Reservoir Design 
-System (DS) `Slider` component's `<label>` points to the `<input>` element 
-which shows the current value. This `input` element also has its own 
-`aria-label`. When the input box is hidden, the `for` attribute in the `label` 
+`aria-label` to their `Slider` component. On top of that, the Reservoir Design
+System (DS) `Slider` component's `<label>` points to the `<input>` element
+which shows the current value. This `input` element also has its own
+`aria-label`. When the input box is hidden, the `for` attribute in the `label`
 element is removed.
 
 Note that Chakra handles its single slider thumb aria attributes: `aria-valuemin`,
@@ -233,11 +231,7 @@ Note that Chakra handles its two slider thumbs aria attributes: `aria-valuemin`,
 
 <Canvas>
   <DSProvider>
-    <Heading
-      id="heading-single-default"
-      level={HeadingLevels.Four}
-      text="Default State"
-    />
+    <Heading id="heading-single-default" level="four" text="Default State" />
     <Slider
       defaultValue={50}
       helperText="Component helper text."
@@ -250,11 +244,7 @@ Note that Chakra handles its two slider thumbs aria attributes: `aria-valuemin`,
 
 <Canvas>
   <DSProvider>
-    <Heading
-      id="heading-single-errored"
-      level={HeadingLevels.Four}
-      text="Errored State"
-    />
+    <Heading id="heading-single-errored" level="four" text="Errored State" />
     <Slider
       defaultValue={50}
       helperText="Component helper text."
@@ -268,11 +258,7 @@ Note that Chakra handles its two slider thumbs aria attributes: `aria-valuemin`,
 
 <Canvas>
   <DSProvider>
-    <Heading
-      id="heading-single-required"
-      level={HeadingLevels.Four}
-      text="Required State"
-    />
+    <Heading id="heading-single-required" level="four" text="Required State" />
     <Slider
       defaultValue={50}
       helperText="Component helper text."
@@ -286,11 +272,7 @@ Note that Chakra handles its two slider thumbs aria attributes: `aria-valuemin`,
 
 <Canvas>
   <DSProvider>
-    <Heading
-      id="heading-single-disabled"
-      level={HeadingLevels.Four}
-      text="Disabled State"
-    />
+    <Heading id="heading-single-disabled" level="four" text="Disabled State" />
     <Slider
       defaultValue={50}
       helperText="Component helper text."
@@ -308,11 +290,7 @@ To enable the Range Slider, set the `isRangeSlider` prop to true.
 
 <Canvas>
   <DSProvider>
-    <Heading
-      id="heading-range-default"
-      level={HeadingLevels.Four}
-      text="Default State"
-    />
+    <Heading id="heading-range-default" level="four" text="Default State" />
     <Slider
       defaultValue={[25, 75]}
       helperText="Component helper text."
@@ -326,12 +304,8 @@ To enable the Range Slider, set the `isRangeSlider` prop to true.
 
 <Canvas>
   <DSProvider>
-    <Heading
-      id="heading-range-errored"
-      level={HeadingLevels.Four}
-      text="Errored State"
-    />
-    <SimpleGrid columns={1} gap={GridGaps.Large}>
+    <Heading id="heading-range-errored" level="four" text="Errored State" />
+    <SimpleGrid columns={1} gap="grid.l">
       <Slider
         defaultValue={[25, 75]}
         helperText="Component helper text."
@@ -364,11 +338,7 @@ To enable the Range Slider, set the `isRangeSlider` prop to true.
 
 <Canvas>
   <DSProvider>
-    <Heading
-      id="heading-range-required"
-      level={HeadingLevels.Four}
-      text="Required State"
-    />
+    <Heading id="heading-range-required" level="four" text="Required State" />
     <Slider
       defaultValue={[25, 75]}
       helperText="Component helper text."
@@ -383,11 +353,7 @@ To enable the Range Slider, set the `isRangeSlider` prop to true.
 
 <Canvas>
   <DSProvider>
-    <Heading
-      id="heading-range-disabled"
-      level={HeadingLevels.Four}
-      text="Disabled State"
-    />
+    <Heading id="heading-range-disabled" level="four" text="Disabled State" />
     <Slider
       defaultValue={[25, 75]}
       helperText="Component helper text."
@@ -409,10 +375,10 @@ input are hidden.
   <DSProvider>
     <Heading
       id="heading-single-labels"
-      level={HeadingLevels.Four}
+      level="four"
       text="With and Without Component Labels"
     />
-    <SimpleGrid columns={1} gap={GridGaps.ExtraLarge}>
+    <SimpleGrid columns={1} gap="grid.xl">
       <Slider
         defaultValue={50}
         helperText="Component helper text."
@@ -466,10 +432,10 @@ For the following examples, all labels are hidden.
   <DSProvider>
     <Heading
       id="heading-single-labels-inputs"
-      level={HeadingLevels.Four}
+      level="four"
       text="With and Without Internal Inputs and Labels"
     />
-    <SimpleGrid columns={1} gap={GridGaps.ExtraLarge}>
+    <SimpleGrid columns={1} gap="grid.xl">
       <Slider
         defaultValue={50}
         helperText="Component helper text."
@@ -516,7 +482,7 @@ In the following examples, all the labels are hidden.
 
 <Canvas>
   <DSProvider>
-    <SimpleGrid columns={1} gap={GridGaps.ExtraLarge}>
+    <SimpleGrid columns={1} gap="grid.xl">
       <Slider
         defaultValue={[15, 75]}
         helperText="Component helper text."

package/src/components/Slider/Slider.test.tsx

@@ -320,8 +320,8 @@ describe("Slider", () => {
 
     it("gets the current value through the onChange callback function", () => {
       let currentValue = 0;
-      function onChange(value) {
-        currentValue = value;
+      function onChange(value: number | number[]) {
+        currentValue = value as number;
       }
 
       render(

package/src/components/Slider/Slider.tsx

@@ -17,8 +17,7 @@ import Label from "../Label/Label";
 import HelperErrorText, {
   HelperErrorTextType,
 } from "../HelperErrorText/HelperErrorText";
-import TextInput from "../TextInput/TextInput";
-import { TextInputTypes } from "../TextInput/TextInputTypes";
+import TextInput, { TextInputTypes } from "../TextInput/TextInput";
 
 export interface SliderProps {
   /** Additional class name for the Slider component. */
@@ -121,9 +120,7 @@ export const Slider = chakra((props: React.PropsWithChildren<SliderProps>) => {
   if (isRangeSlider && currentValue[0] > currentValue[1]) {
     finalIsInvalid = true;
   }
-  const footnote: HelperErrorTextType = finalIsInvalid
-    ? invalidText
-    : helperText;
+  const footnote = finalIsInvalid ? invalidText : helperText;
   const styles = useMultiStyleConfig("CustomSlider", {
     isDisabled,
     isInvalid: finalIsInvalid,
@@ -151,15 +148,16 @@ export const Slider = chakra((props: React.PropsWithChildren<SliderProps>) => {
   };
   // Props that the two `TextInput` components use.
   const textInputSharedProps = {
-    attributes: { max, min },
     isDisabled,
     isInvalid: finalIsInvalid,
     isRequired,
+    max,
+    min,
     // Never show the label or helper text for the `TextInput` component.
     showHelperInvalidText: false,
     showLabel: false,
     step,
-    type: TextInputTypes.number,
+    type: "number" as TextInputTypes,
   };
   /**
    * This returns either the "start" or "end" `TextInput` component. Note that
@@ -222,7 +220,7 @@ export const Slider = chakra((props: React.PropsWithChildren<SliderProps>) => {
       <TextInput
         id={`${id}-textInput-${type}`}
         labelText={updatedLabel}
-        additionalStyles={{
+        __css={{
           ...styles.textInput,
           // Specific margins for each text input to
           // push the elements inside.
@@ -244,11 +242,11 @@ export const Slider = chakra((props: React.PropsWithChildren<SliderProps>) => {
         aria-label={
           !showLabel
             ? [`${labelText} - start value`, `${labelText} - end value`]
-            : null
+            : undefined
         }
         // Both slider thumbs need values and should be in an array,
         // even if it's the same label.
-        aria-labelledby={showLabel ? [`${id}-label`, `${id}-label`] : null}
+        aria-labelledby={showLabel ? [`${id}-label`, `${id}-label`] : undefined}
         value={currentValue as number[]}
         // Make the thumbs larger.
         size="lg"
@@ -262,7 +260,7 @@ export const Slider = chakra((props: React.PropsWithChildren<SliderProps>) => {
       </ChakraRangeSlider>
     ) : (
       <ChakraSlider
-        aria-label={!showLabel ? labelText : null}
+        aria-label={!showLabel ? labelText : undefined}
         aria-labelledby={`${id}-label`}
         value={currentValue as number}
         // Make the thumb larger.
@@ -289,7 +287,7 @@ export const Slider = chakra((props: React.PropsWithChildren<SliderProps>) => {
           htmlFor={
             showBoxes
               ? `${id}-textInput-${isRangeSlider ? "start" : "end"}`
-              : null
+              : ""
           }
           isRequired={showRequiredLabel && isRequired}
         >

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

@@ -856,7 +856,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 6`] = `
 >
   <label
     className="css-1xdhyk6"
-    htmlFor={null}
+    htmlFor=""
     id="noVisibleValues-label"
   >
     Label
@@ -1139,7 +1139,6 @@ exports[`Slider Single Slider renders the UI snapshot correctly 1`] = `
         />
       </div>
       <div
-        aria-label={null}
         aria-labelledby="defaultSlider-label"
         aria-orientation="horizontal"
         aria-valuemax={100}
@@ -1269,7 +1268,6 @@ exports[`Slider Single Slider renders the UI snapshot correctly 2`] = `
         />
       </div>
       <div
-        aria-label={null}
         aria-labelledby="errored-label"
         aria-orientation="horizontal"
         aria-valuemax={100}
@@ -1403,7 +1401,6 @@ exports[`Slider Single Slider renders the UI snapshot correctly 3`] = `
         />
       </div>
       <div
-        aria-label={null}
         aria-labelledby="required-label"
         aria-orientation="horizontal"
         aria-valuemax={100}
@@ -1537,7 +1534,6 @@ exports[`Slider Single Slider renders the UI snapshot correctly 4`] = `
       </div>
       <div
         aria-disabled={true}
-        aria-label={null}
         aria-labelledby="disabled-label"
         aria-orientation="horizontal"
         aria-valuemax={100}
@@ -1722,7 +1718,7 @@ exports[`Slider Single Slider renders the UI snapshot correctly 6`] = `
 >
   <label
     className="css-1xdhyk6"
-    htmlFor={null}
+    htmlFor=""
     id="noVisibleValues-label"
   >
     Label
@@ -1771,7 +1767,6 @@ exports[`Slider Single Slider renders the UI snapshot correctly 6`] = `
         />
       </div>
       <div
-        aria-label={null}
         aria-labelledby="noVisibleValues-label"
         aria-orientation="horizontal"
         aria-valuemax={100}
@@ -1958,7 +1953,6 @@ exports[`Slider Single Slider renders the UI snapshot correctly 8`] = `
         />
       </div>
       <div
-        aria-label={null}
         aria-labelledby="chakra-label"
         aria-orientation="horizontal"
         aria-valuemax={100}
@@ -2089,7 +2083,6 @@ exports[`Slider Single Slider renders the UI snapshot correctly 9`] = `
         />
       </div>
       <div
-        aria-label={null}
         aria-labelledby="props-label"
         aria-orientation="horizontal"
         aria-valuemax={100}