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

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(

package/src/components/Text/Text.tsx

@@ -1,8 +1,7 @@
 import { Text as ChakraText, chakra, useStyleConfig } from "@chakra-ui/react";
 import * as React from "react";
 
-import { TextSizes } from "./TextTypes";
-import { getVariant } from "../../utils/utils";
+export type TextSizes = "default" | "caption" | "tag" | "mini";
 
 export interface TextProps {
   /** Additional class name to render in the `Text` component. */
@@ -24,12 +23,11 @@ export const Text = chakra((props: React.PropsWithChildren<TextProps>) => {
     isBold,
     isItalic,
     noSpace,
-    size = TextSizes.Default,
+    size = "default",
     ...rest
   } = props;
-  const variant = getVariant(size, TextSizes, TextSizes.Default);
   const styles = useStyleConfig("Text", {
-    variant,
+    variant: size,
     isBold,
     isItalic,
     noSpace,

package/src/components/TextInput/TextInput.stories.mdx

@@ -9,15 +9,8 @@ import {
 import { withDesign } from "storybook-addon-designs";
 
 import TextInput from "./TextInput";
-import { TextInputTypes, TextInputVariants } from "./TextInputTypes";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
-import { getStorybookEnumValues } from "../../utils/utils";
-
-export const enumValues = getStorybookEnumValues(
-  TextInputTypes,
-  "TextInputTypes"
-);
 
 <Meta
   title={getCategory("TextInput")}
@@ -31,7 +24,6 @@ export const enumValues = getStorybookEnumValues(
     jest: ["TextInput.test.tsx"],
   }}
   argTypes={{
-    attributes: { control: false },
     id: { control: false },
     isDisabled: { table: { defaultValue: { summary: false } } },
     isInvalid: { table: { defaultValue: { summary: false } } },
@@ -45,12 +37,10 @@ export const enumValues = getStorybookEnumValues(
     step: { table: { defaultValue: { summary: 1 } } },
     textInputType: {
       control: false,
-      table: { defaultValue: { summary: "TextInputVariants.Default" } },
+      table: { defaultValue: { summary: "default" } },
     },
     type: {
-      control: { type: "select" },
-      table: { defaultValue: { summary: "TextInputTypes.text" } },
-      options: enumValues.options,
+      table: { defaultValue: { summary: "text" } },
     },
     value: { control: false },
   }}
@@ -61,7 +51,7 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.22.0`   |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -88,8 +78,6 @@ is left blank, a value will be generated for you.
   <Story
     name="TextInput with Controls"
     args={{
-      additionalStyles: undefined,
-      attributes: undefined,
       className: undefined,
       defaultValue: undefined,
       helperText: "Choose wisely.",
@@ -106,12 +94,12 @@ is left blank, a value will be generated for you.
       showLabel: true,
       showRequiredLabel: true,
       step: 1,
-      type: "TextInputTypes.text",
+      type: "text",
       value: undefined,
-      textInputType: TextInputVariants.Default,
+      textInputType: "default",
     }}
   >
-    {(args) => <TextInput {...args} type={enumValues.getValue(args.type)} />}
+    {(args) => <TextInput {...args} />}
   </Story>
 </Canvas>
 
@@ -129,7 +117,7 @@ Internally, a `Label` is associated with the `<input>` element. When `showLabel`
 is set to false, the `<input>` element's `aria-label` attribute is set to the
 required `labelText` value.
 
-When the `type` prop is set to `TextInputTypes.textarea`, the `<textarea>` element
+When the `type` prop is set to `"textarea"`, the `<textarea>` element
 is rendered instead of the `<input>` element. This element follows all the same
 accessibility rules described above.
 
@@ -251,8 +239,8 @@ helperText={<>Choose <b>wisely!</b></>}
 ## Textarea
 
 The TextInput component includes a multiline `textarea` form field. To render a
-`textarea` element, pass `TextInputTypes.textarea` for the `type` prop.
-All the variations described above are available for the `textarea` option.
+`textarea` element, pass `"textarea"` for the `type` prop. All the variations
+described above are available for the `textarea` option.
 
 <Canvas withToolbar>
   <Story
@@ -268,7 +256,7 @@ All the variations described above are available for the `textarea` option.
       placeholder: "Essay question...",
       showLabel: true,
       showRequiredLabel: true,
-      type: TextInputTypes.textarea,
+      type: "textarea",
     }}
     argTypes={{
       type: { control: false },