More updates per feedback

NYPL · Dec 9, 2024 · 0129f2c · 0129f2c
1 parent dc3c8cf
commit 0129f2c
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 36 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,7 +10,7 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ### Updates
 
-- [Updates `Template` component(s)](<(https://newyorkpubliclibrary.atlassian.net/browse/DSD-1884)>) and styles per TAD.
+- [Updates `Template` component(s)](https://newyorkpubliclibrary.atlassian.net/browse/DSD-1884) and styles per TAD.
 
 ## 3.5.0 (December 5, 2024)
 

diff --git a/src/components/Template/Template.mdx b/src/components/Template/Template.mdx
@@ -104,6 +104,10 @@ Resources
 In order to render a sidebar, the `Template` component needs to be aware of it.
 Pass the location of the sidebar to the `sidebar` prop as either "left" or "right".
 
+For accessibility purposes, you should also structure the DOM logically. This means
+if you are using `sidebar="left"`, place the `TemplateSidebar` before `TemplateMain`.
+If you are using `sidebar="right"`, place the `TemplateSidebar` after.
+
 <Source
   code={`
 <Template sidebar="left">

diff --git a/src/components/Template/Template.stories.tsx b/src/components/Template/Template.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { getPlaceholderImage } from "../../utils/utils";
+import { getPlaceholderImage, sidebarLabel } from "../../utils/utils";
 import Accordion, { AccordionDataProps } from "../Accordion/Accordion";
 import Banner from "../Banner/Banner";
 import Breadcrumbs from "../Breadcrumbs/Breadcrumbs";
@@ -22,7 +22,6 @@ import {
   TemplateSidebar,
   TemplateBottom,
   sidebarPlacementArray,
-  SidebarPlacement,
 } from "./Template";
 
 const meta: Meta<typeof Template> = {
@@ -180,10 +179,6 @@ const otherSubHeaderText =
  * Main Story for the Template component. This must contains the `args`
  * and `parameters` properties in this object.
  */
-
-export const sidebarLabel = (sidebar: SidebarPlacement) => {
-  return `${sidebar[0].toUpperCase()}${sidebar.slice(1)} Sidebar`;
-};
 export const WithControls: Story = {
   args: {
     id: "template",
@@ -197,7 +192,6 @@ export const WithControls: Story = {
   },
   render: (args) => {
     const { sidebar } = args;
-
     return (
       <Template {...args}>
         <TemplateBreakout>
@@ -232,9 +226,10 @@ export const TemplateFullExample: Story = {
   args: {
     sidebar: "left",
   },
-  render: (args) => (
-    <>
-      <Template sidebar={args.sidebar}>
+  render: (args) => {
+    const { sidebar } = args;
+    return (
+      <Template sidebar={sidebar}>
         <TemplateBreakout>
           <Breadcrumbs
             breadcrumbsData={[
@@ -265,26 +260,28 @@ export const TemplateFullExample: Story = {
             type="informative"
           />
         </TemplateTop>
-        <TemplateSidebar>
-          <p>Sidebar information in a `Card` component.</p>
-          <Card
-            imageProps={{
-              alt: "Alt text",
-              aspectRatio: "square",
-              size: "default",
-              src: getPlaceholderImage("smaller"),
-            }}
-            isCentered
-          >
-            <CardHeading size="heading4" subtitle="Animal info" id="heading1">
-              Library Image
-            </CardHeading>
-            <CardContent>
-              Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
-              libero, a pharetra augue.
-            </CardContent>
-          </Card>
-        </TemplateSidebar>
+        {sidebar === "left" && (
+          <TemplateSidebar>
+            <p>Sidebar information in a `Card` component.</p>
+            <Card
+              imageProps={{
+                alt: "Alt text",
+                aspectRatio: "square",
+                size: "default",
+                src: getPlaceholderImage("smaller"),
+              }}
+              isCentered
+            >
+              <CardHeading size="heading4" subtitle="Animal info" id="heading1">
+                Library Image
+              </CardHeading>
+              <CardContent>
+                Vestibulum id ligula porta felis euismod semper. Nulla vitae
+                elit libero, a pharetra augue.
+              </CardContent>
+            </Card>
+          </TemplateSidebar>
+        )}
         <TemplateMain>
           <p>This is the main content!</p>
           <Accordion accordionData={faqContentData} />
@@ -338,6 +335,28 @@ export const TemplateFullExample: Story = {
             useRowHeaders
           />
         </TemplateMain>
+        {sidebar === "right" && (
+          <TemplateSidebar>
+            <p>Sidebar information in a `Card` component.</p>
+            <Card
+              imageProps={{
+                alt: "Alt text",
+                aspectRatio: "square",
+                size: "default",
+                src: getPlaceholderImage("smaller"),
+              }}
+              isCentered
+            >
+              <CardHeading size="heading4" subtitle="Animal info" id="heading1">
+                Library Image
+              </CardHeading>
+              <CardContent>
+                Vestibulum id ligula porta felis euismod semper. Nulla vitae
+                elit libero, a pharetra augue.
+              </CardContent>
+            </Card>
+          </TemplateSidebar>
+        )}
         <TemplateBottom>
           <Banner
             content="This is the bottom content area!"
@@ -346,8 +365,8 @@ export const TemplateFullExample: Story = {
           />
         </TemplateBottom>
       </Template>
-    </>
-  ),
+    );
+  },
 };
 
 export const TemplateFullExampleNarrow = {

diff --git a/src/components/Template/Template.test.tsx b/src/components/Template/Template.test.tsx
@@ -14,7 +14,7 @@ import {
   TemplateMainNarrow,
 } from "./Template";
 import Placeholder from "../Placeholder/Placeholder";
-import { sidebarLabel } from "./Template.stories";
+import { sidebarLabel } from "../../utils/utils";
 
 const breakout = <Placeholder variant="short">Breakout</Placeholder>;
 const contentTop = <Placeholder>Content Top</Placeholder>;
@@ -48,10 +48,25 @@ const templateComponents = (
 );
 
 describe("Template components accessibility", () => {
+  it("passes axe accessibility test", async () => {
+    const { container } = render(templateComponents());
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
   it("passes axe accessibility test", async () => {
     const { container } = render(templateComponents("left"));
     expect(await axe(container)).toHaveNoViolations();
   });
+
+  it("passes axe accessibility test", async () => {
+    const { container } = render(templateComponents("right"));
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it("passes axe accessibility test", async () => {
+    const { container } = render(templateComponents("none", true));
+    expect(await axe(container)).toHaveNoViolations();
+  });
 });
 
 describe("Template components", () => {
@@ -66,7 +81,7 @@ describe("Template components", () => {
     expect(screen.getByText("Content Bottom")).toBeInTheDocument();
   });
 
-  it("renders each section with left sidebar", () => {
+  it("renders each section with right sidebar", () => {
     render(templateComponents("right"));
 
     expect(screen.getByText("Breakout")).toBeInTheDocument();

diff --git a/src/components/Template/templateChangelogData.ts b/src/components/Template/templateChangelogData.ts
@@ -14,7 +14,9 @@ export const changelogData: ChangelogData[] = [
     version: "Prerelease",
     type: "Update",
     affects: ["Functionality", "Styles"],
-    notes: ["Major update to component and styles based on the Template TAD."],
+    notes: [
+      "Major update to component and styles based on the Template TAD. Updates include simplified code and exported components, responsive sidebar and spacing, and accomodations for content needing a narrower container.",
+    ],
   },
   {
     date: "2024-12-05",

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -1,4 +1,5 @@
 import { HelperErrorTextType } from "../components/HelperErrorText/HelperErrorText";
+import { SidebarPlacement } from "../components/Template/Template";
 import { AriaAttributes } from "./interfaces";
 // Utility functions to use throughout the codebase
 
@@ -178,3 +179,8 @@ export const getPlaceholderImage = (
   const finalImage = `${selectedImage}&t=${t}`;
   return finalImage;
 };
+
+/** Creates the correct sidebar label in Template stories or tests */
+export const sidebarLabel = (sidebar: SidebarPlacement) => {
+  return `${sidebar[0].toUpperCase()}${sidebar.slice(1)} Sidebar`;
+};