@nypl/design-system-react-components 0.25.12 → 0.25.13

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

@@ -76,7 +76,7 @@ describe("Table", () => {
     const warn = jest.spyOn(console, "warn");
     render(<Table tableData={[]} />);
     expect(warn).toHaveBeenCalledWith(
-      "Table: data should be two dimensional array."
+      "NYPL Reservoir Table: Data in the `tableData` prop must be a two dimensional array."
     );
   });
 

package/src/components/Table/Table.tsx

@@ -91,7 +91,9 @@ function Table(props: React.PropsWithChildren<TableProps>) {
       tableData.length <= 0 ||
       tableData[0].constructor !== Array
     ) {
-      console.warn("Table: data should be two dimensional array.");
+      console.warn(
+        "NYPL Reservoir Table: Data in the `tableData` prop must be a two dimensional array."
+      );
       return null;
     }
 

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

@@ -24,12 +24,12 @@ import DSProvider from "../../theme/provider";
   }}
   argTypes={{
     children: { table: { disable: true } },
-    contentData: { control: false },
     defaultIndex: {
       table: { defaultValue: { summary: 0 } },
     },
     id: { control: false },
     onChange: { control: false },
+    tabsData: { control: false },
     useHash: {
       table: { defaultValue: { summary: false } },
     },
@@ -41,7 +41,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.24.0`   |
-| Latest            | `0.25.11`  |
+| Latest            | `0.25.13`  |
 
 <Description of={Tabs} />
 
@@ -95,7 +95,7 @@ export const animalCrossing = [
   <Story
     name="Tabs with Controls"
     args={{
-      contentData: animalCrossing,
+      tabsData: animalCrossing,
       defaultIndex: 0,
       id: "tabs-id",
       onChange: undefined,
@@ -154,12 +154,12 @@ const animalCrossing = [
 ];
 
 // ...
-<Tabs contentData={animalCrossing} />;
+<Tabs tabsData={animalCrossing} />;
 ```
 
 ## Responsive Mobile Carousel
 
-For both, the `contentData` prop approach and the children component approach
+For both, the `tabsData` prop approach and the children component approach
 (described below in this document), the mobile carousel feature is built. This
 adds "previous" and "next" arrows in the tab list for users to scroll through
 all the tabs while the panel stays static.
@@ -183,7 +183,7 @@ export const onChange = (value) => {
 };
 
 // ...
-<Tabs contentData={animalCrossing} onChange={onChange} />;
+<Tabs tabsData={animalCrossing} onChange={onChange} />;
 ```
 
 export const onChange = (value) => {
@@ -192,7 +192,7 @@ export const onChange = (value) => {
 
 <Canvas>
   <Story name="With Callback Event Function">
-    <Tabs contentData={animalCrossing} onChange={onChange} />
+    <Tabs tabsData={animalCrossing} onChange={onChange} />
   </Story>
 </Canvas>
 
@@ -203,7 +203,7 @@ To enable this, set the `useHash` prop to true.
 
 <Canvas>
   <Story name="With URL Hash Option">
-    <Tabs contentData={animalCrossing} useHash={true} />
+    <Tabs tabsData={animalCrossing} useHash={true} />
   </Story>
 </Canvas>
 

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

@@ -36,7 +36,7 @@ export const animalCrossing = [
 
 describe("Tabs Accessibility", () => {
   it("passes axe accessibility test with the data prop", async () => {
-    const { container } = render(<Tabs contentData={animalCrossing} />);
+    const { container } = render(<Tabs tabsData={animalCrossing} />);
     expect(await axe(container)).toHaveNoViolations();
   });
 
@@ -121,7 +121,7 @@ describe("Tabs", () => {
   });
 
   it("renders all tabs but only one visible panel at a time with data prop", () => {
-    render(<Tabs contentData={animalCrossing} />);
+    render(<Tabs tabsData={animalCrossing} />);
     expect(getTabByName("Tom Nook")).toBeInTheDocument();
     expect(getTabByName("Isabelle")).toBeInTheDocument();
     expect(getTabByName("K.K. Slider")).toBeInTheDocument();
@@ -137,7 +137,7 @@ describe("Tabs", () => {
   });
 
   it("switches between tabs", () => {
-    render(<Tabs contentData={animalCrossing} />);
+    render(<Tabs tabsData={animalCrossing} />);
     const isabelleTab = getTabByName("Isabelle");
     const kkSliderTab = getTabByName("K.K. Slider");
 
@@ -179,7 +179,7 @@ describe("Tabs", () => {
   });
 
   it("renders the specified initial index value", () => {
-    render(<Tabs contentData={animalCrossing} defaultIndex={2} />);
+    render(<Tabs tabsData={animalCrossing} defaultIndex={2} />);
     let tomTab = getTabByName("Tom Nook");
     let isabelleTab = getTabByName("Isabelle");
     let kkSliderTab = getTabByName("K.K. Slider");
@@ -193,7 +193,7 @@ describe("Tabs", () => {
     let selectedIndex = 0;
     const onChange = (index) => (selectedIndex = index);
 
-    render(<Tabs contentData={animalCrossing} onChange={onChange} />);
+    render(<Tabs tabsData={animalCrossing} onChange={onChange} />);
 
     const tomTab = getTabByName("Tom Nook");
     const isabelleTab = getTabByName("Isabelle");
@@ -213,14 +213,14 @@ describe("Tabs", () => {
     const warn = jest.spyOn(console, "warn");
     render(<Tabs />);
     expect(warn).toHaveBeenCalledWith(
-      "Tabs: Pass data in the `data` props or as children."
+      "NYPL Reservoir Tabs: Pass data in the `contentData` props or as children."
     );
   });
 
   it("should throw a warning when both the 'data' prop and children are passed", () => {
     const warn = jest.spyOn(console, "warn");
     render(
-      <Tabs contentData={animalCrossing}>
+      <Tabs tabsData={animalCrossing}>
         <TabList>
           <Tab>Tom Nook</Tab>
           <Tab>Isabelle</Tab>
@@ -247,7 +247,8 @@ describe("Tabs", () => {
       </Tabs>
     );
     expect(warn).toHaveBeenCalledWith(
-      "Tabs: Only pass children or data in the `data` props but not both."
+      "NYPL Reservoir Tabs: Only pass children or data in the `contentData` " +
+        "prop. Do not pass both."
     );
   });
 
@@ -255,7 +256,7 @@ describe("Tabs", () => {
     const warn = jest.spyOn(console, "warn");
     render(
       <Tabs
-        contentData={[
+        tabsData={[
           ...animalCrossing,
           ...[
             { label: "Another character 1", content: "Text" },
@@ -267,13 +268,14 @@ describe("Tabs", () => {
       />
     );
     expect(warn).toHaveBeenCalledWith(
-      "Tabs: We recommend to use no more than six tabs. If more than six tabs are needed, consider other navigational patterns."
+      "NYPL Reservoir Tabs: it is recommended to use no more than six tabs. If " +
+        "more than six tabs are needed, consider other navigational patterns."
     );
   });
 
   it("renders the UI snapshot correctly", () => {
     const basic = renderer
-      .create(<Tabs contentData={animalCrossing} id="basic" />)
+      .create(<Tabs tabsData={animalCrossing} id="basic" />)
       .toJSON();
     expect(basic).toMatchSnapshot();
   });

package/src/components/Tabs/Tabs.tsx

@@ -24,20 +24,20 @@ interface TabPanelProps {
   panels: React.ReactNode[] | React.ReactNode;
 }
 // The general shape of the data object for each Tab.
-export interface TabsContentDataProps {
+export interface TabsDataProps {
   label: string;
   content: string | React.ReactNode;
 }
 
 export interface TabsProps {
-  /** Array of data to display */
-  contentData?: TabsContentDataProps[];
   /** The index of the tab to display for controlled situations. */
   defaultIndex?: number;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
   /** The callback function invoked on every tab change event. */
   onChange?: (index: number) => any;
+  /** Array of data to display */
+  tabsData?: TabsDataProps[];
   /** Render a hash in the url for each tab. Only available when data is
    * passed through the `data` props. */
   useHash?: boolean;
@@ -55,7 +55,7 @@ const onClickHash = (tabHash) => {
  * This returns an object with `Tab` and `TabPanel` components to rendered in
  * `TabList` and `TabPanels` components respectively.
  */
-const getElementsFromContentData = (data, useHash): TabPanelProps => {
+const getElementsFromData = (data, useHash): TabPanelProps => {
   const tabs = [];
   const panels = [];
 
@@ -65,8 +65,8 @@ const getElementsFromContentData = (data, useHash): TabPanelProps => {
 
   if (data?.length > 6) {
     console.warn(
-      "Tabs: We recommend to use no more than six tabs. If more than six tabs " +
-        "are needed, consider other navigational patterns."
+      "NYPL Reservoir Tabs: it is recommended to use no more than six tabs. If " +
+        "more than six tabs are needed, consider other navigational patterns."
     );
   }
   data.forEach((tab, index) => {
@@ -121,8 +121,8 @@ const getElementsFromChildren = (children): TabPanelProps => {
       const childTabs = React.Children.count(child.props.children);
       if (childTabs > 6) {
         console.warn(
-          "Tabs: We recommend to use no more than six tabs. If more than six " +
-            "tabs are needed, consider other navigational patterns."
+          "NYPL Reservoir Tabs: It is recommended to use no more than six tabs. " +
+            "If more than six tabs are needed, consider other navigational patterns."
         );
       }
     }
@@ -142,10 +142,10 @@ const getElementsFromChildren = (children): TabPanelProps => {
 function Tabs(props: React.PropsWithChildren<TabsProps>) {
   const {
     children,
-    contentData,
     defaultIndex = 0,
     id = generateUUID(),
     onChange,
+    tabsData,
     useHash = false,
   } = props;
   const styles = useMultiStyleConfig("Tabs", {});
@@ -155,16 +155,18 @@ function Tabs(props: React.PropsWithChildren<TabsProps>) {
   const mediumTabWidth = 40;
   const [tabWidth, setTabWidth] = React.useState(initTabWidth);
   const windowDimensions = useWindowSize();
-  const { tabs, panels }: any = contentData
-    ? getElementsFromContentData(contentData, useHash)
+  const { tabs, panels }: any = tabsData
+    ? getElementsFromData(tabsData, useHash)
     : getElementsFromChildren(children);
 
   if (tabs.length === 0 || panels.length === 0) {
-    console.warn("Tabs: Pass data in the `data` props or as children.");
+    console.warn(
+      "NYPL Reservoir Tabs: Pass data in the `contentData` props or as children."
+    );
   }
 
   // `tabs` is an array for the children component approach but an object for
-  // the `contentData` prop approach. We need to get the right props key value
+  // the `tabsData` prop approach. We need to get the right props key value
   // to set the carousel's length.
   const tabProps = tabs[0] ? tabs[0]?.props : (tabs as any).props;
   const { prevSlide, nextSlide, carouselStyle, goToStart } = useCarouselStyles(
@@ -221,9 +223,10 @@ function Tabs(props: React.PropsWithChildren<TabsProps>) {
     </Button>
   );
 
-  if (children && contentData?.length) {
+  if (children && tabsData?.length) {
     console.warn(
-      "Tabs: Only pass children or data in the `data` props but not both."
+      "NYPL Reservoir Tabs: Only pass children or data in the `contentData` " +
+        "prop. Do not pass both."
     );
   }
 

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

@@ -60,7 +60,44 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.3.6`    |
-| Latest            | `0.25.12`  |
+| Latest            | `0.25.13`  |
+
+## Table of Contents
+
+- [Accessibility for TemplateAppContainer](#accessibility-for-templateappcontainer)
+- [TemplateAppContainer Component](#templateappcontainer-component)
+- [TemplateAppContainer Props](#templateappcontainer-props)
+- [Template Children Components](#template-children-components)
+- [Template Children Props](#template-children-props)
+- [Full Example with Template Children Components](#full-example-with-template-children-components)
+
+## Accessibility
+
+**The `TemplateAppContainer` component is the recommended way to render the entire
+application.** Therefore, this accessibility section is specifically for the
+`TemplateAppContainer` but the same rules apply to the individual "Template"
+components.
+
+If you need to render an alert or notification at the top of the page with an
+`aside` HTML element or HTML element with the `role="complementary"` attribute,
+then pass that alert or notification component to the `aboveHeader` prop. These
+elements should _not_ be rendered in the `header` HTML section since that's an
+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.
+
+Resources
+
+- [W3C Aria Landmarks Example](https://www.w3.org/TR/wai-aria-practices/examples/landmarks/complementary.html)
+- [Digital A11y Role=Complementary](https://www.digitala11y.com/complementary-role/)
+- [WebAim Skip Navigation Link](https://webaim.org/techniques/skipnav/)
+- [A11ymatters Skip Navigation Link](https://www.a11ymatters.com/pattern/skip-link/)
 
 ## TemplateAppContainer Component
 
@@ -74,13 +111,7 @@ 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.
 
-If you need to render an alert or notification at the top of the page with an
-`aside` HTML element or HTML element with the `role="complementary"` attribute,
-then pass that alert or notification component to the `aboveHeader` prop. These
-elements should _not_ be rendered in the `header` HTML section since that's an
-accessibility violation.
-
-<b>This is the recommended way to render an app page template.</b>
+**This is the recommended way to render an app page template.**
 
 ```jsx
 import { TemplateAppContainer } from "@nypl/design-system-react-components";
@@ -107,6 +138,8 @@ import { TemplateAppContainer } from "@nypl/design-system-react-components";
 />;
 ```
 
+## TemplateAppContainer Props
+
 <Canvas>
   <Story
     name="TemplateAppContainer Component"
@@ -124,6 +157,7 @@ import { TemplateAppContainer } from "@nypl/design-system-react-components";
           <Placeholder variant="short">More Content</Placeholder>
         </>
       ),
+      contentId: "mainContent",
       contentSidebar: <Placeholder>Left Sidebar</Placeholder>,
       contentTop: <Placeholder>Content Top</Placeholder>,
       footer: <Placeholder variant="short">Footer</Placeholder>,
@@ -203,6 +237,8 @@ import {
 </Template>
 ```
 
+## Template Children Props
+
 <Canvas>
   <Story
     name="Template Children Components"
@@ -212,6 +248,7 @@ import {
     argTypes={{
       aboveHeader: { table: { disable: true } },
       breakout: { table: { disable: true } },
+      contentId: { table: { disable: true } },
       contentPrimary: { table: { disable: true } },
       contentSidebar: { table: { disable: true } },
       contentTop: { table: { disable: true } },
@@ -334,7 +371,7 @@ The components consist of:
 ```
 <Template>
   <TemplateHeader>...</TemplateHeader>
-  <TemplateContent sidebar="left">
+  <TemplateContent id="mainContent" sidebar="left">
     // ...
   </TemplateContent>
 <Template>
@@ -513,18 +550,14 @@ 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"
             subHeaderText={otherSubHeaderText}
-            backgroundImageSrc="https://placeimg.com/2400/800/nature/grayscale"
-            image={
-              <Image
-                src="https://placeimg.com/800/400/animals"
-                alt="Image example"
-              />
-            }
           />
         </TemplateBreakout>
       </TemplateHeader>
@@ -547,7 +580,7 @@ This is best viewed in the Storybook "Canvas" and not "Docs" section.
         </TemplateContentTop>
         <TemplateContentPrimary>
           <p>This is the main content!</p>
-          <Accordion contentData={faqContent} />
+          <Accordion accordionData={faqContent} />
           <HorizontalRule />
           <p>Fill out the form!</p>
           <Form action="/end/point">
@@ -584,11 +617,13 @@ This is best viewed in the Storybook "Canvas" and not "Docs" section.
         <TemplateContentSidebar>
           <p>Sidebar information in a `Card` component.</p>
           <Card
-            center
-            imageSrc="https://placeimg.com/400/200/animals"
-            imageAlt="Alt text"
-            imageAspectRatio={ImageRatios.Square}
-            imageSize={ImageSizes.Small}
+            imageProps={{
+              alt: "Alt text",
+              aspectRatio: ImageRatios.Square,
+              size: ImageSizes.Small,
+              src: "https://placeimg.com/400/200/animals",
+            }}
+            isCentered
           >
             <CardHeading level={HeadingLevels.Two} id="heading1">
               Small Animal Image
@@ -606,9 +641,11 @@ This is best viewed in the Storybook "Canvas" and not "Docs" section.
       <TemplateFooter>
         <Card
           id="custom-card"
-          imageAlt="Alt text"
-          imageSrc="https://cdn-d8.nypl.org/s3fs-public/2020-05/NYPL_MainFacadeRev2Cam2.png"
-          imageAspectRatio={ImageRatios.SixteenByNine}
+          imageProps={{
+            alt: "Alt text",
+            aspectRatio: ImageRatios.SixteenByNine,
+            src: "https://cdn-d8.nypl.org/s3fs-public/2020-05/NYPL_MainFacadeRev2Cam2.png",
+          }}
           layout="horizontal"
           backgroundColor="#616161"
           foregroundColor="#FFF"

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

@@ -100,6 +100,23 @@ describe("TemplateAppContainer component", () => {
     expect(screen.getByText("Footer")).toBeInTheDocument();
   });
 
+  it("renders a #mainContent id in the `main` DOM element", () => {
+    const { container } = render(
+      <TemplateAppContainer
+        aboveHeader={aboveHeader}
+        header={header}
+        breakout={breakout}
+        sidebar={sidebar}
+        contentTop={contentTop}
+        contentSidebar={contentSidebar}
+        contentPrimary={contentPrimary}
+        footer={footer}
+      />
+    );
+    expect(container.querySelector("#mainContent")).toBeInTheDocument();
+    expect(screen.getByRole("main")).toHaveAttribute("id", "mainContent");
+  });
+
   it("renders only one header in a custom header component", () => {
     const customHeader = <header>Custom header</header>;
     render(
@@ -134,8 +151,9 @@ describe("TemplateAppContainer component", () => {
       />
     );
     expect(warn).toHaveBeenCalledWith(
-      "`TemplateHeader`: An HTML `header` element was passed in. Set " +
-        "`renderHeaderElement` to `false` to avoid nested HTML `header` elements."
+      "NYPL Reservoir TemplateHeader: An HTML `header` element was passed " +
+        "in. Set `renderHeaderElement` to `false` to avoid nested HTML " +
+        "`header` elements."
     );
   });
 
@@ -172,8 +190,9 @@ describe("TemplateAppContainer component", () => {
       />
     );
     expect(warn).toHaveBeenCalledWith(
-      "`TemplateFooter`: An HTML `footer` element was passed in. Set " +
-        "`renderFooterElement` to `false` to avoid nested HTML `footer` elements."
+      "NYPL Reservoir TemplateFooter: An HTML `footer` element was passed " +
+        "in. Set `renderFooterElement` to `false` to avoid nested HTML " +
+        "`footer` elements."
     );
   });
 });
@@ -207,7 +226,18 @@ describe("Template components", () => {
     expect(screen.getByText("Footer")).toBeInTheDocument();
   });
 
-  it("Renders the UI snapshot correctly", () => {
+  it("renders a #mainContent id in the TemplateContent component", () => {
+    const { container } = render(
+      <TemplateContent>
+        <TemplateContentPrimary>{contentPrimary}</TemplateContentPrimary>
+      </TemplateContent>
+    );
+
+    expect(container.querySelector("#mainContent")).toBeInTheDocument();
+    expect(screen.getByRole("main")).toHaveAttribute("id", "mainContent");
+  });
+
+  it("renders the UI snapshot correctly", () => {
     const templateComponents = renderer
       .create(
         <Template>

package/src/components/Template/Template.tsx

@@ -15,7 +15,12 @@ export interface TemplateSidebarProps {
    * right side of the `TemplateContentPrimary` component. */
   sidebar?: "none" | "left" | "right";
 }
-export interface TemplateContentProps extends TemplateSidebarProps {}
+export interface TemplateContentProps extends TemplateSidebarProps {
+  /** ID used for the `main` HTML element. Defaults to "mainContent". Useful
+   * anchor for the application skip navigation. */
+  id?: string;
+}
+
 export interface TemplateAppContainerProps
   extends TemplateFooterProps,
     TemplateHeaderProps,
@@ -25,6 +30,9 @@ export interface TemplateAppContainerProps
   aboveHeader?: React.ReactElement;
   /** DOM that will be rendered in the `TemplateBreakout` component section. */
   breakout?: React.ReactElement;
+  /** ID used for the `main` HTML element. Defaults to "mainContent". Useful
+   * anchor for the application skip navigation. */
+  contentId?: string;
   /** DOM that will be rendered in the `TemplateContentPrimary` component section. */
   contentPrimary?: React.ReactElement;
   /** DOM that will be rendered in the `TemplateContentSidebar` component section. */
@@ -80,8 +88,9 @@ const TemplateHeader = ({
     React.Children.map(children, (child: React.ReactElement) => {
       if (child?.type === "header" || child?.props?.mdxType === "header") {
         console.warn(
-          "`TemplateHeader`: An HTML `header` element was passed in. Set " +
-            "`renderHeaderElement` to `false` to avoid nested HTML `header` elements."
+          "NYPL Reservoir TemplateHeader: An HTML `header` element was passed " +
+            "in. Set `renderHeaderElement` to `false` to avoid nested HTML " +
+            "`header` elements."
         );
       }
     });
@@ -106,16 +115,18 @@ const TemplateBreakout = (props: React.PropsWithChildren<TemplateProps>) => {
 
 /**
  * This component is most useful to render content on the page. This renders an
- * HTML `<main>` element and takes a `sidebar` prop with optional "left" or
- * "right" values. This will set the correct styling needed for the
- * `TemplateContentPrimary` and `TemplateContentSidebar` components. Note that
- * `TemplateContentPrimary` and `TemplateContentSidebar` must be ordered
- * correctly as children elements for the appropriate styles to take effect.
+ * HTML `<main>` element with an id of "mainContent". The "mainContent" id should
+ * be used as the consuming application's skip navigation link. The `TemplateContent`
+ * component also takes a `sidebar` prop with optional "left" or "right" values.
+ * This will set the correct *styling* needed for the `TemplateContentPrimary`
+ * and `TemplateContentSidebar` components. Note that `TemplateContentPrimary`
+ * and `TemplateContentSidebar` must be ordered correctly as children elements
+ * for the appropriate styles to take effect.
  */
 const TemplateContent = (
   props: React.PropsWithChildren<TemplateContentProps>
 ) => {
-  const { sidebar = "none", children } = props;
+  const { children, id = "mainContent", sidebar = "none" } = props;
   const styles = useStyleConfig("TemplateContent", {
     variant: sidebar !== "none" ? "sidebar" : null,
   });
@@ -139,7 +150,7 @@ const TemplateContent = (
   );
 
   return (
-    <Box as="main" __css={styles}>
+    <Box as="main" id={id} __css={styles}>
       {newChildren}
     </Box>
   );
@@ -212,8 +223,9 @@ const TemplateFooter = ({
     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."
+          "NYPL Reservoir TemplateFooter: An HTML `footer` element was passed " +
+            "in. Set `renderFooterElement` to `false` to avoid nested HTML " +
+            "`footer` elements."
         );
       }
     });
@@ -235,6 +247,7 @@ const TemplateAppContainer = (
   const {
     aboveHeader,
     breakout,
+    contentId = "mainContent",
     contentPrimary,
     contentSidebar,
     contentTop,
@@ -270,7 +283,7 @@ const TemplateAppContainer = (
       )}
       {/* Note that setting `sidebar` as a prop here affects the
        TemplateContentSidebar and TemplateContentPrimary components. */}
-      <TemplateContent sidebar={sidebar}>
+      <TemplateContent id={contentId} sidebar={sidebar}>
         {contentTopElem}
 
         {sidebar === "left" && contentSidebarElem}

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Template components Renders the UI snapshot correctly 1`] = `
+exports[`Template components renders the UI snapshot correctly 1`] = `
 <div
   className="css-0"
 >
@@ -38,6 +38,7 @@ exports[`Template components Renders the UI snapshot correctly 1`] = `
   </header>
   <main
     className="css-0"
+    id="mainContent"
   >
     <div
       className="css-0"
@@ -84,7 +85,7 @@ exports[`Template components Renders the UI snapshot correctly 1`] = `
 </div>
 `;
 
-exports[`Template components Renders the UI snapshot correctly 2`] = `
+exports[`Template components renders the UI snapshot correctly 2`] = `
 <div
   className="css-0"
 >
@@ -122,6 +123,7 @@ exports[`Template components Renders the UI snapshot correctly 2`] = `
   </header>
   <main
     className="css-0"
+    id="mainContent"
   >
     <div
       className="css-0"