@nypl/design-system-react-components 0.25.5 → 0.25.9

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

@@ -1,10 +1,10 @@
 import {
-  Meta,
-  Story,
-  Canvas,
   ArgsTable,
+  Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
 
 import { Tabs, TabList, Tab, TabPanels, TabPanel } from "./Tabs";
@@ -18,17 +18,21 @@ import DSProvider from "../../theme/provider";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=36835%3A26464",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=36835%3A26464",
     },
     jest: ["Tabs.test.tsx"],
   }}
   argTypes={{
     children: { table: { disable: true } },
-    id: { table: { disable: true } },
-    className: { table: { disable: true } },
-    data: { table: { disable: true } },
-    onChange: { table: { disable: true } },
+    contentData: { control: false },
+    defaultIndex: {
+      table: { defaultValue: { summary: 0 } },
+    },
+    id: { control: false },
+    onChange: { control: false },
+    useHash: {
+      table: { defaultValue: { summary: false } },
+    },
   }}
 />
 
@@ -89,18 +93,20 @@ export const animalCrossing = [
 
 <Canvas withToolbar>
   <Story
-    name="Basic with props"
+    name="Tabs with Controls"
     args={{
+      contentData: animalCrossing,
       defaultIndex: 0,
+      id: "tabs-id",
+      onChange: undefined,
       useHash: false,
-      contentData: animalCrossing,
     }}
   >
     {(args) => <Tabs {...args} />}
   </Story>
 </Canvas>
 
-<ArgsTable story="Basic with props" />
+<ArgsTable story="Tabs with Controls" />
 
 ## Composing with a Data Object
 

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

@@ -208,7 +208,7 @@ describe("Tabs", () => {
     expect(selectedIndex).toEqual(1);
   });
 
-  it("should throw warning when both the 'data' probp and children are passed", () => {
+  it("should throw warning when both the 'data' prop and children are passed", () => {
     const warn = jest.spyOn(console, "warn");
     render(
       <Tabs contentData={animalCrossing}>

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

@@ -1,12 +1,32 @@
 import {
-  Meta,
-  Story,
-  Canvas,
   ArgsTable,
+  Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
 
+import Accordion from "../Accordion/Accordion";
+import { faqContent } from "../Accordion/Accordion.stories.mdx";
+import Breadcrumbs from "../Breadcrumbs/Breadcrumbs";
+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,
+  NotificationHeading,
+  NotificationProps,
+} from "../Notification/Notification";
+import Placeholder from "../Placeholder/Placeholder";
 import {
   Template,
   TemplateHeader,
@@ -18,27 +38,7 @@ import {
   TemplateFooter,
   TemplateAppContainer,
 } from "./Template";
-import Placeholder from "../Placeholder/Placeholder";
-import Hero from "../Hero/Hero";
-import { HeroTypes } from "../Hero/HeroTypes";
-import Image from "../Image/Image";
-import { ImageRatios, ImageSizes } from "../Image/ImageTypes";
-import Breadcrumbs from "../Breadcrumbs/Breadcrumbs";
-import HorizontalRule from "../HorizontalRule/HorizontalRule";
-import Heading from "../Heading/Heading";
-import { HeadingLevels } from "../Heading/HeadingTypes";
-import Notification, {
-  NotificationContent,
-  NotificationHeading,
-  NotificationProps,
-} from "../Notification/Notification";
-import Form, { FormRow, FormField } from "../Form/Form";
 import TextInput from "../TextInput/TextInput";
-import Button from "../Button/Button";
-import Link from "../Link/Link";
-import Card, { CardHeading, CardContent, CardActions } from "../Card/Card";
-import Accordion from "../Accordion/Accordion";
-import { faqContent } from "../Accordion/Accordion.stories.mdx";
 import { NotificationTypes } from "../Notification/NotificationTypes";
 import { getCategory } from "../../utils/componentCategories";
 
@@ -49,8 +49,7 @@ import { getCategory } from "../../utils/componentCategories";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11982%3A47778",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11982%3A47778",
     },
   }}
 />
@@ -60,23 +59,26 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.3.6`    |
-| Latest            | `0.25.1`   |
+| Latest            | `0.25.9`   |
 
 ## TemplateAppContainer Component
 
 <Description of={TemplateAppContainer} />
 
+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.
+
 <b>This is the recommended way to render an app page template.</b>
 
 ```jsx
 import { TemplateAppContainer } from "@nypl/design-system-react-components";
 
 <TemplateAppContainer
-  header={<Placeholder modifiers={["short"]}>NYPL Header</Placeholder>}
+  header={<Placeholder variant="short">NYPL Header</Placeholder>}
   breakout={
     <>
-      <Placeholder modifiers={["short"]}>Breadcrumbs</Placeholder>
-      <Placeholder modifiers={["short"]}>Hero</Placeholder>
+      <Placeholder variant="short">Breadcrumbs</Placeholder>
+      <Placeholder variant="short">Hero</Placeholder>
     </>
   }
   sidebar="left"
@@ -85,10 +87,10 @@ import { TemplateAppContainer } from "@nypl/design-system-react-components";
   contentPrimary={
     <>
       <Placeholder>Main Content</Placeholder>
-      <Placeholder modifiers={["short"]}>More Content</Placeholder>
+      <Placeholder variant="short">More Content</Placeholder>
     </>
   }
-  footer={<Placeholder modifiers={["short"]}>Footer</Placeholder>}
+  footer={<Placeholder variant="short">Footer</Placeholder>}
 />;
 ```
 
@@ -96,31 +98,36 @@ import { TemplateAppContainer } from "@nypl/design-system-react-components";
   <Story
     name="TemplateAppContainer Component"
     args={{
-      header: <Placeholder modifiers={["short"]}>NYPL Header</Placeholder>,
       breakout: (
         <>
-          <Placeholder modifiers={["short"]}>Breadcrumbs</Placeholder>
-          <Placeholder modifiers={["short"]}>Hero</Placeholder>
+          <Placeholder variant="short">Breadcrumbs</Placeholder>
+          <Placeholder variant="short">Hero</Placeholder>
         </>
       ),
-      sidebar: "left",
-      contentTop: <Placeholder>Content Top</Placeholder>,
-      contentSidebar: <Placeholder>Left Sidebar</Placeholder>,
       contentPrimary: (
         <>
           <Placeholder>Main Content</Placeholder>
-          <Placeholder modifiers={["short"]}>More Content</Placeholder>
+          <Placeholder variant="short">More Content</Placeholder>
         </>
       ),
-      footer: <Placeholder modifiers={["short"]}>Footer</Placeholder>,
+      contentSidebar: <Placeholder>Left Sidebar</Placeholder>,
+      contentTop: <Placeholder>Content Top</Placeholder>,
+      footer: <Placeholder variant="short">Footer</Placeholder>,
+      header: <Placeholder variant="short">NYPL Header</Placeholder>,
+      sidebar: "left",
+      renderFooterElement: true,
     }}
     argTypes={{
-      header: { control: false },
       breakout: { control: false },
-      contentTop: { control: false },
-      contentSidebar: { control: false },
       contentPrimary: { control: false },
+      contentSidebar: { control: false },
+      contentTop: { control: false },
       footer: { control: false },
+      header: { control: false },
+      sidebar: {
+        control: false,
+        table: { defaultValue: { summary: "none" } },
+      },
     }}
   >
     {(args) => <TemplateAppContainer {...args} />}
@@ -160,7 +167,7 @@ import {
     </TemplateBreakout>
   </TemplateHeader>
 
-  <TemplateContent>
+  <TemplateContent sidebar="...">
     <TemplateContentTop>
       // ...
     </TemplateContentTop>
@@ -189,15 +196,16 @@ import {
       contentTop: { table: { disable: true } },
       footer: { table: { disable: true } },
       header: { table: { disable: true } },
+      sidebar: { description: "Only used in Storybook." },
     }}
   >
     {(args) => (
       <Template>
         <TemplateHeader>
-          <Placeholder modifiers={["short"]}>NYPL Header</Placeholder>
+          <Placeholder variant="short">NYPL Header</Placeholder>
           <TemplateBreakout>
-            <Placeholder modifiers={["short"]}>Breadcrumbs</Placeholder>
-            <Placeholder modifiers={["short"]}>Hero</Placeholder>
+            <Placeholder variant="short">Breadcrumbs</Placeholder>
+            <Placeholder variant="short">Hero</Placeholder>
           </TemplateBreakout>
         </TemplateHeader>
         <TemplateContent sidebar={args.sidebar}>
@@ -211,7 +219,7 @@ import {
           )}
           <TemplateContentPrimary>
             <Placeholder>Main Content</Placeholder>
-            <Placeholder modifiers={["short"]}>More Content</Placeholder>
+            <Placeholder variant="short">More Content</Placeholder>
           </TemplateContentPrimary>
           {args.sidebar === "right" && (
             <TemplateContentSidebar>
@@ -220,7 +228,7 @@ import {
           )}
         </TemplateContent>
         <TemplateFooter>
-          <Placeholder modifiers={["short"]}>Footer</Placeholder>
+          <Placeholder variant="short">Footer</Placeholder>
         </TemplateFooter>
       </Template>
     )}

package/src/components/Template/Template.test.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
+import renderer from "react-test-renderer";
 
 import {
   Template,
@@ -15,11 +16,11 @@ import {
 } from "./Template";
 import Placeholder from "../Placeholder/Placeholder";
 
-const header = <Placeholder modifiers={["short"]}>NYPL Header</Placeholder>;
+const header = <Placeholder variant="short">NYPL Header</Placeholder>;
 const breakout = (
   <>
-    <Placeholder modifiers={["short"]}>Breadcrumbs</Placeholder>
-    <Placeholder modifiers={["short"]}>Hero</Placeholder>
+    <Placeholder variant="short">Breadcrumbs</Placeholder>
+    <Placeholder variant="short">Hero</Placeholder>
   </>
 );
 const sidebar = "left";
@@ -28,10 +29,10 @@ const contentSidebar = <Placeholder>Left Sidebar</Placeholder>;
 const contentPrimary = (
   <>
     <Placeholder>Main Content</Placeholder>
-    <Placeholder modifiers={["short"]}>More Content</Placeholder>
+    <Placeholder variant="short">More Content</Placeholder>
   </>
 );
-const footer = <Placeholder modifiers={["short"]}>Footer</Placeholder>;
+const footer = <Placeholder variant="short">Footer</Placeholder>;
 
 describe("TemplateAppContainer accessibility", () => {
   it("passes axe accessibility test", async () => {
@@ -93,6 +94,44 @@ describe("TemplateAppContainer component", () => {
     expect(screen.getByText("More Content")).toBeInTheDocument();
     expect(screen.getByText("Footer")).toBeInTheDocument();
   });
+
+  it("renders only one footer in a custom footer component", () => {
+    const customFooter = <footer>Custom Footer</footer>;
+    render(
+      <TemplateAppContainer
+        header={header}
+        breakout={breakout}
+        sidebar={sidebar}
+        contentTop={contentTop}
+        contentSidebar={contentSidebar}
+        contentPrimary={contentPrimary}
+        footer={customFooter}
+        renderFooterElement={false}
+      />
+    );
+
+    expect(screen.getAllByRole("contentinfo")).toHaveLength(1);
+  });
+
+  it("consoles a warning when a footer element was passed without setting `renderFooterElement` to false", () => {
+    const warn = jest.spyOn(console, "warn");
+    const customFooter = <footer>Custom Footer</footer>;
+    render(
+      <TemplateAppContainer
+        header={header}
+        breakout={breakout}
+        sidebar={sidebar}
+        contentTop={contentTop}
+        contentSidebar={contentSidebar}
+        contentPrimary={contentPrimary}
+        footer={customFooter}
+      />
+    );
+    expect(warn).toHaveBeenCalledWith(
+      "`TemplateFooter`: An HTML `footer` element was passed in. Set " +
+        "`renderFooterElement` to `false` to avoid nested HTML `footer` elements."
+    );
+  });
 });
 
 describe("Template components", () => {
@@ -121,4 +160,25 @@ describe("Template components", () => {
     expect(screen.getByText("More Content")).toBeInTheDocument();
     expect(screen.getByText("Footer")).toBeInTheDocument();
   });
+
+  it("Renders the UI snapshot correctly", () => {
+    const basic = renderer
+      .create(
+        <Template>
+          <TemplateHeader>
+            {header}
+            <TemplateBreakout>{breakout}</TemplateBreakout>
+          </TemplateHeader>
+          <TemplateContent sidebar={sidebar}>
+            <TemplateContentTop>{contentTop}</TemplateContentTop>
+            <TemplateContentSidebar>{contentSidebar}</TemplateContentSidebar>
+            <TemplateContentPrimary>{contentPrimary}</TemplateContentPrimary>
+          </TemplateContent>
+          <TemplateFooter>{footer}</TemplateFooter>
+        </Template>
+      )
+      .toJSON();
+
+    expect(basic).toMatchSnapshot();
+  });
 });

package/src/components/Template/Template.tsx

@@ -2,13 +2,19 @@ import * as React from "react";
 import { Box, useStyleConfig } from "@chakra-ui/react";
 
 export interface TemplateProps {}
+export interface TemplateFooterProps {
+  /** Flag to render an HTML footer element. True by default. */
+  renderFooterElement?: boolean;
+}
 export interface TemplateSidebarProps {
   /** Renders the `TemplateContentSidebar` component either on the left or
    * right side of the `TemplateContentPrimary` component. */
   sidebar?: "none" | "left" | "right";
 }
 export interface TemplateContentProps extends TemplateSidebarProps {}
-export interface TemplateAppContainerProps extends TemplateSidebarProps {
+export interface TemplateAppContainerProps
+  extends TemplateFooterProps,
+    TemplateSidebarProps {
   /** DOM that will be rendered in the `TemplateBreakout` component section. */
   breakout?: React.ReactElement;
   /** DOM that will be rendered in the `TemplateContentPrimary` component section. */
@@ -152,10 +158,29 @@ const TemplateContentSidebar = (
 /**
  * This optional component should be the last child of the `Template`
  * component. This is rendered as an HTML `<footer>` element and spans the full
- * width of the page.
+ * width of the page. If an HTML `<footer>` element is already passed in a
+ * custom component, set `renderFooterElement` to `false`.
  */
-const TemplateFooter = (props: React.PropsWithChildren<TemplateProps>) => {
-  return <Box as="footer">{props.children}</Box>;
+const TemplateFooter = ({
+  children,
+  renderFooterElement = true,
+}: React.PropsWithChildren<TemplateFooterProps>) => {
+  let footerElement = <>{children}</>;
+
+  // 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) => {
+      if (child?.type === "footer" || child?.props?.mdxType === "footer") {
+        console.warn(
+          "`TemplateFooter`: An HTML `footer` element was passed in. Set " +
+            "`renderFooterElement` to `false` to avoid nested HTML `footer` elements."
+        );
+      }
+    });
+    footerElement = <Box as="footer">{children}</Box>;
+  }
+  return footerElement;
 };
 
 /**
@@ -176,6 +201,7 @@ const TemplateAppContainer = (
     footer,
     header,
     sidebar = "none",
+    renderFooterElement = true,
   } = props;
   const breakoutElem = breakout && (
     <TemplateBreakout>{breakout}</TemplateBreakout>
@@ -208,7 +234,11 @@ const TemplateAppContainer = (
 
         {sidebar === "right" && contentSidebarElem}
       </TemplateContent>
-      {footer && <TemplateFooter>{footer}</TemplateFooter>}
+      {footer && (
+        <TemplateFooter renderFooterElement={renderFooterElement}>
+          {footer}
+        </TemplateFooter>
+      )}
     </Template>
   );
 };

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

@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Template components Renders the UI snapshot correctly 1`] = `
+<div
+  className="nypl-ds css-0"
+>
+  <header
+    className="css-0"
+  >
+    <div
+      className="placeholder placeholder-short"
+    >
+      NYPL Header
+    </div>
+    <div
+      className="css-0"
+    >
+      <div
+        className="placeholder placeholder-short"
+      >
+        Breadcrumbs
+      </div>
+      <div
+        className="placeholder placeholder-short"
+      >
+        Hero
+      </div>
+    </div>
+  </header>
+  <main
+    className="css-0"
+  >
+    <div
+      className="css-0"
+    >
+      <div
+        className="placeholder placeholder-undefined"
+      >
+        Content Top
+      </div>
+    </div>
+    <div
+      className="css-0"
+    >
+      <div
+        className="placeholder placeholder-undefined"
+      >
+        Left Sidebar
+      </div>
+    </div>
+    <div
+      className="css-0"
+    >
+      <div
+        className="placeholder placeholder-undefined"
+      >
+        Main Content
+      </div>
+      <div
+        className="placeholder placeholder-short"
+      >
+        More Content
+      </div>
+    </div>
+  </main>
+  <footer
+    className="css-0"
+  >
+    <div
+      className="placeholder placeholder-short"
+    >
+      Footer
+    </div>
+  </footer>
+</div>
+`;

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

@@ -1,14 +1,21 @@
 import {
-  Meta,
-  Story,
-  Canvas,
   ArgsTable,
+  Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
 
 import Text from "./Text";
+import { TextDisplaySizes } from "./TextTypes";
 import { getCategory } from "../../utils/componentCategories";
+import { getStorybookEnumValues } from "../../utils/utils";
+
+export const enumValues = getStorybookEnumValues(
+  TextDisplaySizes,
+  "TextDisplaySizes"
+);
 
 <Meta
   title={getCategory("Text")}
@@ -17,13 +24,19 @@ import { getCategory } from "../../utils/componentCategories";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/?node-id=10733%3A56919",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/?node-id=10733%3A56919",
     },
   }}
   argTypes={{
-    displaySize: { table: { disable: false } },
-    className: { table: { disable: true } },
+    className: { control: false },
+    displaySize: {
+      control: { type: "select" },
+      options: enumValues.options,
+      table: { defaultValue: { summary: "TextDisplaySizes.Default" } },
+    },
+    isBold: { table: { defaultValue: { summary: false } } },
+    isItalic: { table: { defaultValue: { summary: false } } },
+    noSpace: { table: { defaultValue: { summary: false } } },
   }}
 />
 
@@ -39,10 +52,19 @@ import { getCategory } from "../../utils/componentCategories";
 The `Text` component renders a basic `<p>` element. As its name indicates, the `displaySize` prop controls the size of the text rendered in the component.
 
 <Canvas withToolbar>
-  <Story name="Text" args={{}}>
+  <Story
+    name="Text"
+    args={{
+      className: undefined,
+      displaySize: "TextDisplaySizes.Default",
+      isBold: false,
+      isItalic: false,
+      noSpace: false,
+    }}
+  >
     {(args) => (
       <>
-        <Text {...args}>
+        <Text {...args} displaySize={enumValues.getValue(args.displaySize)}>
           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
@@ -52,7 +74,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}>
+        <Text {...args} displaySize={enumValues.getValue(args.displaySize)}>
           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.tsx

@@ -6,14 +6,14 @@ import { getVariant } from "../../utils/utils";
 export interface TextProps {
   /** Additional class name to render in the `Text` component. */
   className?: string;
+  /** Optional prop to control the text styling */
+  displaySize?: TextDisplaySizes;
   /** Optional prop used to show bolded text */
   isBold?: boolean;
   /** Optional prop used to show itlicized text */
   isItalic?: boolean;
   /** Optional prop used to remove default spacing */
   noSpace?: boolean;
-  /** Optional prop to control the text styling */
-  displaySize?: TextDisplaySizes;
 }
 
 function Text(props: React.PropsWithChildren<TextProps>) {