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

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

@@ -1580,3 +1580,124 @@ exports[`Table renders the UI snapshot correctly 7`] = `
   </tbody>
 </table>
 `;
+
+exports[`Table renders the UI snapshot correctly 8`] = `
+<table
+  className="chakra-table css-1xdhyk6"
+  id="jsx-example"
+  role="table"
+>
+  <thead
+    className="css-0"
+  >
+    <tr
+      className="css-0"
+      role="row"
+    >
+      <th
+        className="css-0"
+        scope="col"
+      >
+        First Name
+      </th>
+      <th
+        className="css-0"
+        scope="col"
+      >
+        Last Name
+      </th>
+      <th
+        className="css-0"
+        scope="col"
+      >
+        Avatar
+      </th>
+    </tr>
+  </thead>
+  <tbody
+    className="css-0"
+  >
+    <tr
+      className="css-0"
+      role="row"
+    >
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        Tom
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        Nook
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        <img
+          alt="Tom Nook"
+          className="css-0"
+          src="https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
+        />
+      </td>
+    </tr>
+    <tr
+      className="css-0"
+      role="row"
+    >
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        Isabelle
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        -
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        <img
+          alt="Isabelle"
+          className="css-0"
+          src="https://play.nintendo.com/images/AC_Isabelle_7XU6aGu.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
+        />
+      </td>
+    </tr>
+    <tr
+      className="css-0"
+      role="row"
+    >
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        K.K.
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        Slider
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        <img
+          alt="K.K Slider"
+          className="css-0"
+          src="https://play.nintendo.com/images/AC_KK_jh4yj5t.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
+        />
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;

package/src/components/Tabs/Tabs.stories.mdx

@@ -41,7 +41,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.24.0`   |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 

package/src/components/Tabs/Tabs.test.tsx

@@ -73,7 +73,7 @@ describe("Tabs Accessibility", () => {
 });
 
 describe("Tabs", () => {
-  const getTabByName = (name) => screen.getByRole("tab", { name });
+  const getTabByName = (name: string) => screen.getByRole("tab", { name });
 
   it("renders all tabs but only one panel at a time with children", () => {
     render(
@@ -191,7 +191,7 @@ describe("Tabs", () => {
 
   it("invokes the callback function", () => {
     let selectedIndex = 0;
-    const onChange = (index) => (selectedIndex = index);
+    const onChange = (index: number) => (selectedIndex = index);
 
     render(<Tabs tabsData={animalCrossing} onChange={onChange} />);
 

package/src/components/Tabs/Tabs.tsx

@@ -10,10 +10,8 @@ import {
 } from "@chakra-ui/react";
 import * as React from "react";
 
-import { IconNames, IconRotationTypes, IconSizes } from "../Icons/IconTypes";
-import Icon from "../Icons/Icon";
-import { ButtonTypes } from "../Button/ButtonTypes";
 import Button from "../Button/Button";
+import Icon from "../Icons/Icon";
 import useCarouselStyles from "../../hooks/useCarouselStyles";
 import useWindowSize from "../../hooks/useWindowSize";
 
@@ -47,7 +45,7 @@ export interface TabsProps {
  * An internal function used to update the hash in the URL.
  * This function is only used when `useHash` is `true`.
  */
-const onClickHash = (tabHash) => {
+const onClickHash = (tabHash: string) => {
   window.location.hash = tabHash;
 };
 
@@ -55,9 +53,12 @@ const onClickHash = (tabHash) => {
  * This returns an object with `Tab` and `TabPanel` components to rendered in
  * `TabList` and `TabPanels` components respectively.
  */
-const getElementsFromData = (data, useHash): TabPanelProps => {
-  const tabs = [];
-  const panels = [];
+const getElementsFromData = (
+  data: TabsDataProps[],
+  useHash: boolean
+): TabPanelProps => {
+  const tabs: React.ReactNode[] = [];
+  const panels: React.ReactNode[] = [];
 
   if (!data?.length) {
     return { tabs: [], panels: [] };
@@ -76,7 +77,7 @@ const getElementsFromData = (data, useHash): TabPanelProps => {
       <Tab
         fontSize={["0", null, "1"]}
         key={index}
-        onClick={useHash ? () => onClickHash(`tab${index + 1}`) : null}
+        onClick={useHash ? () => onClickHash(`tab${index + 1}`) : undefined}
       >
         {tab.label}
       </Tab>
@@ -107,14 +108,14 @@ const getElementsFromData = (data, useHash): TabPanelProps => {
  * the DOM when building up the `Tabs` component using child component.
  */
 const getElementsFromChildren = (children): TabPanelProps => {
-  const tabs = [];
-  const panels = [];
+  const tabs: React.ReactNode[] = [];
+  const panels: React.ReactNode[] = [];
 
   if (!children?.length) {
     return { tabs: [], panels: [] };
   }
 
-  children.forEach((child) => {
+  children.forEach((child: JSX.Element) => {
     if (child.type === TabList || child.props.mdxType === "TabList") {
       tabs.push(child);
 
@@ -187,39 +188,37 @@ export const Tabs = chakra((props: React.PropsWithChildren<TabsProps>) => {
   }, [goToStart, windowDimensions.width]);
   const previousButton = (
     <Button
-      attributes={{
-        "aria-label": "Previous",
+      aria-label="Previous"
+      id={`tabs-previous-${id}`}
+      onClick={prevSlide}
+      __css={{
         ...styles.buttonArrows,
         left: "0",
       }}
-      buttonType={ButtonTypes.Primary}
-      id={`tabs-previous-${id}`}
-      onClick={prevSlide}
     >
       <Icon
-        iconRotation={IconRotationTypes.Rotate90}
+        iconRotation="rotate90"
         id={`tabs-previous-icon-${id}`}
-        name={IconNames.Arrow}
-        size={IconSizes.Small}
+        name="arrow"
+        size="small"
       />
     </Button>
   );
   const nextButton = (
     <Button
-      attributes={{
-        "aria-label": "Next",
+      aria-label="Next"
+      id={`tabs-next-${id}`}
+      onClick={nextSlide}
+      __css={{
         ...styles.buttonArrows,
         right: "0",
       }}
-      buttonType={ButtonTypes.Primary}
-      id={`tabs-next-${id}`}
-      onClick={nextSlide}
     >
       <Icon
-        iconRotation={IconRotationTypes.Rotate270}
+        iconRotation="rotate270"
         id={`tabs-next-icon-${id}`}
-        name={IconNames.Arrow}
-        size={IconSizes.Small}
+        name="arrow"
+        size="small"
       />
     </Button>
   );

package/src/components/Template/Template.stories.mdx

@@ -14,12 +14,9 @@ import Button from "../Button/Button";
 import Card, { CardHeading, CardContent, CardActions } from "../Card/Card";
 import Form, { FormRow, FormField } from "../Form/Form";
 import Heading from "../Heading/Heading";
-import { HeadingLevels } from "../Heading/HeadingTypes";
 import Hero from "../Hero/Hero";
 import HorizontalRule from "../HorizontalRule/HorizontalRule";
-import { HeroTypes } from "../Hero/HeroTypes";
 import Image from "../Image/Image";
-import { ImageRatios, ImageSizes } from "../Image/ImageTypes";
 import Link from "../Link/Link";
 import Notification, {
   NotificationContent,
@@ -27,6 +24,7 @@ import Notification, {
   NotificationProps,
 } from "../Notification/Notification";
 import Placeholder from "../Placeholder/Placeholder";
+import SkipNavigation from "../SkipNavigation/SkipNavigation";
 import {
   Template,
   TemplateAboveHeader,
@@ -40,7 +38,6 @@ import {
   TemplateAppContainer,
 } from "./Template";
 import TextInput from "../TextInput/TextInput";
-import { NotificationTypes } from "../Notification/NotificationTypes";
 import { getCategory } from "../../utils/componentCategories";
 
 <Meta
@@ -79,6 +76,9 @@ If you have a custom `Header` component that _already_ renders an HTML `<header>
 element, set `renderHeaderElement` to false so only one `<header>` element is
 rendered.
 
+If you need to render the `SkipNavigation` component, set `renderSkipNavigation`
+to true.
+
 Likewise, if you have a custom `Footer` component that _already_ renders an HTML
 `<footer>` element, set `renderFooterElement` to false so only one `<footer>`
 element is rendered.
@@ -107,6 +107,7 @@ import { TemplateAppContainer } from "@nypl/design-system-react-components";
     </>
   }
   footer={<Placeholder variant="short">Footer</Placeholder>}
+  renderSkipNavigation={true}
 />;
 ```
 
@@ -137,6 +138,7 @@ import { TemplateAppContainer } from "@nypl/design-system-react-components";
       sidebar: "left",
       renderFooterElement: true,
       renderHeaderElement: true,
+      renderSkipNavigation: false,
     }}
     argTypes={{
       aboveHeader: { control: false },
@@ -176,11 +178,15 @@ accessibility violation.
 
 The `TemplateAppContainer` component renders a full DOM and one of the children
 is the `main` HTML element with a default "id" of `"mainContent"`. This should
-be used as the anchor element that the skip navigation link points to. As of
-v0.25.13, the consuming application is responsible for adding the skip
-navigation feature to the application. If your application is using the current
-NYPL Header, it already contains the skip navigation feature but make sure it is
-pointing to the correct anchor element.
+be used as the anchor element that the skip navigation link points to. If your
+application is using the current NYPL Header, it already contains the skip
+navigation feature but make sure it is pointing to the correct anchor element.
+
+If you are using a custom header component or you need to use the Reservoir
+Design System (DS) `SkipNavigation` component, then set the `renderSkipNavigation`
+prop to true. This will render the `SkipNavigation` component at the top of the
+page before any other elements. The main link will point to the `#mainContent`
+`main` element.
 
 Resources
 
@@ -191,13 +197,17 @@ Resources
 
 ## Template Children Overview
 
-The Reservoir Design System (DS) also provides a set of "template" components 
-that work together to render a consistent mobile and desktop layout. More 
-information on individual components and how they should be composed can be 
-found below. Even though these component are available for use, we recommend 
-using the `TemplateAppContainer` component and passing down children component 
+The Reservoir Design System (DS) also provides a set of "template" components
+that work together to render a consistent mobile and desktop layout. More
+information on individual components and how they should be composed can be
+found below. Even though these component are available for use, we recommend
+using the `TemplateAppContainer` component and passing down children component
 as props as needed.
 
+Note: If you need to render the `SkipNavigation` component, you need to explicitly
+render it immediately before the `TemplateAboveHeader` component. This is done
+automatically in the `TemplateAppContainer` component.
+
 Basic "template" components structure:
 
 ```
@@ -215,6 +225,7 @@ import {
 
 
 <Template>
+  <SkipNavigation />
   <TemplateAboveHeader>
     // ...
   </TemplateAboveHeader>
@@ -263,6 +274,7 @@ import {
   >
     {(args) => (
       <Template>
+        <SkipNavigation />
         <TemplateAboveHeader>
           <Placeholder variant="short">Above Header</Placeholder>
         </TemplateAboveHeader>
@@ -524,9 +536,9 @@ This is best viewed in the Storybook "Canvas" and not "Docs" section.
 <Canvas>
   <Story name="Full Example with Template Children Components">
     <Template>
+      <SkipNavigation />
       <TemplateAboveHeader>
         <Notification
-          notificationType={NotificationTypes.Standard}
           notificationHeading="Standard Notification"
           notificationContent={
             <>
@@ -555,12 +567,12 @@ This is best viewed in the Storybook "Canvas" and not "Docs" section.
           />
           <Hero
             backgroundImageSrc="https://placeimg.com/2400/800/nature/grayscale"
-            heroType={HeroTypes.Campaign}
-            heading={
-              <Heading level={HeadingLevels.One} id="1" text="Hero Campaign" />
-            }
-            imageAlt="Image example"
-            imageSrc="https://placeimg.com/800/400/animals"
+            heroType="campaign"
+            heading={<Heading level="one" id="1" text="Hero Campaign" />}
+            imageProps={{
+              alt: "Image example",
+              src: "https://placeimg.com/800/400/animals",
+            }}
             subHeaderText={otherSubHeaderText}
           />
         </TemplateBreakout>
@@ -568,7 +580,7 @@ This is best viewed in the Storybook "Canvas" and not "Docs" section.
       <TemplateContent sidebar="right">
         <TemplateContentTop>
           <Notification
-            notificationType={NotificationTypes.Announcement}
+            notificationType="announcement"
             notificationHeading="Announcement Notification"
             notificationContent={
               <>
@@ -587,18 +599,20 @@ This is best viewed in the Storybook "Canvas" and not "Docs" section.
           <Accordion accordionData={faqContent} />
           <HorizontalRule />
           <p>Fill out the form!</p>
-          <Form action="/end/point">
+          <Form id="form1" action="/end/point">
             <FormField>
               <TextInput
-                labelText="Username"
                 helperText="Make sure to complete this field."
+                id="username"
+                labelText="Username"
                 required
               />
             </FormField>
             <FormField>
               <TextInput
-                labelText="Password"
                 helperText="Make sure to complete this field."
+                id="password"
+                labelText="Password"
                 required
               />
             </FormField>
@@ -614,7 +628,7 @@ This is best viewed in the Storybook "Canvas" and not "Docs" section.
               </FormField>
             </FormRow>
             <FormField>
-              <Button>Submit</Button>
+              <Button id="submit">Submit</Button>
             </FormField>
           </Form>
         </TemplateContentPrimary>
@@ -623,16 +637,14 @@ This is best viewed in the Storybook "Canvas" and not "Docs" section.
           <Card
             imageProps={{
               alt: "Alt text",
-              aspectRatio: ImageRatios.Square,
-              size: ImageSizes.Small,
+              aspectRatio: "square",
+              size: "small",
               src: "https://placeimg.com/400/200/animals",
             }}
             isCentered
           >
-            <CardHeading level={HeadingLevels.Two} id="heading1">
-              Small Animal Image
-            </CardHeading>
-            <CardHeading level={HeadingLevels.Three} id="heading2">
+            <CardHeading id="heading1">Small Animal Image</CardHeading>
+            <CardHeading level="three" id="heading2">
               Animal info
             </CardHeading>
             <CardContent>
@@ -647,16 +659,14 @@ This is best viewed in the Storybook "Canvas" and not "Docs" section.
           id="custom-card"
           imageProps={{
             alt: "Alt text",
-            aspectRatio: ImageRatios.SixteenByNine,
+            aspectRatio: "sixteenByNine",
             src: "https://cdn-d8.nypl.org/s3fs-public/2020-05/NYPL_MainFacadeRev2Cam2.png",
           }}
           layout="horizontal"
           backgroundColor="#616161"
           foregroundColor="#FFF"
         >
-          <CardHeading id="heading1-footer" level={HeadingLevels.Two}>
-            Footer
-          </CardHeading>
+          <CardHeading id="heading1-footer">Footer</CardHeading>
           <CardContent>
             <p>This is an example footer using the `Card` component.</p>
             <p>
@@ -665,27 +675,12 @@ This is best viewed in the Storybook "Canvas" and not "Docs" section.
             </p>
           </CardContent>
           <CardActions>
-            <Link
-              attributes={{
-                style: { color: "#FFF", textDecoration: "underline" },
-              }}
-              href="#"
-            >
+            <Link color="#FFF" href="#" textDecoration="underline">
               Facebook
             </Link>
-            ,<Link
-              attributes={{
-                style: { color: "#FFF", textDecoration: "underline" },
-              }}
-              href="#"
-            >
+            ,<Link color="#FFF" href="#" textDecoration="underline">
               Instagram
-            </Link>,<Link
-              attributes={{
-                style: { color: "#FFF", textDecoration: "underline" },
-              }}
-              href="#"
-            >
+            </Link>,<Link color="#FFF" href="#" textDecoration="underline">
               Twitter
             </Link>
           </CardActions>

package/src/components/Template/Template.tsx

@@ -1,6 +1,8 @@
 import { Box, chakra, useStyleConfig } from "@chakra-ui/react";
 import * as React from "react";
 
+import SkipNavigation from "../SkipNavigation/SkipNavigation";
+
 export interface TemplateProps {}
 export interface TemplateHeaderProps {
   /** Flag to render an HTML header element. True by default. */
@@ -43,6 +45,8 @@ export interface TemplateAppContainerProps
   footer?: React.ReactElement;
   /** DOM that will be rendered in the `TemplateHeader` component section. */
   header?: React.ReactElement;
+  /** Render the `SkipNavigation` component or not. False by default. */
+  renderSkipNavigation?: boolean;
 }
 
 /**
@@ -89,7 +93,7 @@ const TemplateHeader = ({
   if (renderHeaderElement) {
     // But if they passed in a component that renders an HTML `<header>`,
     // then log a warning.
-    React.Children.map(children, (child: React.ReactElement) => {
+    React.Children.map(children as JSX.Element, (child: React.ReactElement) => {
       if (child?.type === "header" || child?.props?.mdxType === "header") {
         console.warn(
           "NYPL Reservoir TemplateHeader: An HTML `header` element was passed " +
@@ -137,7 +141,7 @@ const TemplateContent = (
   // Manually pass in the `sidebar` prop to the `TemplateContentPrimary` and
   // `TemplateContentSidebar` components.
   const newChildren = React.Children.map(
-    children,
+    children as JSX.Element,
     (child: React.ReactElement) => {
       let newChild = child;
       if (
@@ -224,7 +228,7 @@ const TemplateFooter = ({
   // The user wants to render the `footer` HTML element.
   if (renderFooterElement) {
     // But give a warning if one was passed.
-    React.Children.map(children, (child: React.ReactElement) => {
+    React.Children.map(children as JSX.Element, (child: React.ReactElement) => {
       if (child?.type === "footer" || child?.props?.mdxType === "footer") {
         console.warn(
           "NYPL Reservoir TemplateFooter: An HTML `footer` element was passed " +
@@ -259,6 +263,7 @@ export const TemplateAppContainer = chakra(
       sidebar = "none",
       renderFooterElement = true,
       renderHeaderElement = true,
+      renderSkipNavigation = false,
       ...rest
     } = props;
     const aboveHeaderElem = aboveHeader && (
@@ -278,6 +283,7 @@ export const TemplateAppContainer = chakra(
     );
     return (
       <Template {...rest}>
+        {renderSkipNavigation ? <SkipNavigation /> : null}
         {aboveHeaderElem}
         {(header || breakoutElem) && (
           <TemplateHeader renderHeaderElement={renderHeaderElement}>

package/src/components/Text/Text.stories.mdx

@@ -8,11 +8,7 @@ import {
 import { withDesign } from "storybook-addon-designs";
 
 import Text from "./Text";
-import { TextSizes } from "./TextTypes";
 import { getCategory } from "../../utils/componentCategories";
-import { getStorybookEnumValues } from "../../utils/utils";
-
-export const enumValues = getStorybookEnumValues(TextSizes, "TextSizes");
 
 <Meta
   title={getCategory("Text")}
@@ -30,9 +26,7 @@ export const enumValues = getStorybookEnumValues(TextSizes, "TextSizes");
     isItalic: { table: { defaultValue: { summary: false } } },
     noSpace: { table: { defaultValue: { summary: false } } },
     size: {
-      control: { type: "select" },
-      options: enumValues.options,
-      table: { defaultValue: { summary: "TextSizes.Default" } },
+      table: { defaultValue: { summary: "default" } },
     },
   }}
 />
@@ -42,7 +36,7 @@ export const enumValues = getStorybookEnumValues(TextSizes, "TextSizes");
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.1`   |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -64,7 +58,7 @@ The `Text` component renders a basic `<p>` element. As its name indicates, the
     name="Text"
     args={{
       className: undefined,
-      size: "TextSizes.Default",
+      size: "default",
       isBold: false,
       isItalic: false,
       noSpace: false,
@@ -72,7 +66,7 @@ The `Text` component renders a basic `<p>` element. As its name indicates, the
   >
     {(args) => (
       <>
-        <Text {...args} size={enumValues.getValue(args.size)}>
+        <Text {...args}>
           Animal Crossing[a] is a social simulation video game series developed
           and published by Nintendo. The series was conceptualized and created
           by Katsuya Eguchi and Hisashi Nogami. In Animal Crossing, the player
@@ -82,7 +76,7 @@ The `Text` component renders a basic `<p>` element. As its name indicates, the
           open-ended gameplay and use of the video game console's internal clock
           and calendar to simulate real passage of time.
         </Text>
-        <Text {...args} size={enumValues.getValue(args.size)}>
+        <Text {...args}>
           Since its initial release in 2001, five Animal Crossing games have
           been released worldwide, one each for the Nintendo 64/iQue Player
           (enhanced and reissued for the GameCube), Nintendo DS, Wii, Nintendo

package/src/components/Text/Text.test.tsx

@@ -4,7 +4,6 @@ import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
 import Text from "./Text";
-import { TextSizes } from "./TextTypes";
 
 describe("Text Accessibility", () => {
   it("passes axe accessibility test", async () => {
@@ -35,15 +34,13 @@ describe("Text", () => {
       .create(<Text>Animal Crossing is all that!</Text>)
       .toJSON();
     const caption = renderer
-      .create(
-        <Text size={TextSizes.Caption}>Animal Crossing is all that!</Text>
-      )
+      .create(<Text size="caption">Animal Crossing is all that!</Text>)
       .toJSON();
     const tag = renderer
-      .create(<Text size={TextSizes.Tag}>Animal Crossing is all that!</Text>)
+      .create(<Text size="tag">Animal Crossing is all that!</Text>)
       .toJSON();
     const mini = renderer
-      .create(<Text size={TextSizes.Mini}>Animal Crossing is all that!</Text>)
+      .create(<Text size="mini">Animal Crossing is all that!</Text>)
       .toJSON();
     const withChakraProps = renderer
       .create(