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

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

@@ -5,6 +5,7 @@ import renderer from "react-test-renderer";
 
 import {
   Template,
+  TemplateAboveHeader,
   TemplateHeader,
   TemplateBreakout,
   TemplateContent,
@@ -16,6 +17,7 @@ import {
 } from "./Template";
 import Placeholder from "../Placeholder/Placeholder";
 
+const aboveHeader = <Placeholder variant="short">Above Header</Placeholder>;
 const header = <Placeholder variant="short">NYPL Header</Placeholder>;
 const breakout = (
   <>
@@ -38,6 +40,7 @@ describe("TemplateAppContainer accessibility", () => {
   it("passes axe accessibility test", async () => {
     const { container } = render(
       <TemplateAppContainer
+        aboveHeader={aboveHeader}
         header={header}
         breakout={breakout}
         sidebar={sidebar}
@@ -55,6 +58,7 @@ describe("Template components accessibility", () => {
   it("passes axe accessibility test", async () => {
     const { container } = render(
       <Template>
+        <TemplateAboveHeader>{aboveHeader}</TemplateAboveHeader>
         <TemplateHeader>
           {header}
           <TemplateBreakout>{breakout}</TemplateBreakout>
@@ -75,6 +79,7 @@ describe("TemplateAppContainer component", () => {
   it("renders each section", () => {
     render(
       <TemplateAppContainer
+        aboveHeader={aboveHeader}
         header={header}
         breakout={breakout}
         sidebar={sidebar}
@@ -84,7 +89,7 @@ describe("TemplateAppContainer component", () => {
         footer={footer}
       />
     );
-
+    expect(screen.getByText("Above Header")).toBeInTheDocument();
     expect(screen.getByText("NYPL Header")).toBeInTheDocument();
     expect(screen.getByText("Breadcrumbs")).toBeInTheDocument();
     expect(screen.getByText("Hero")).toBeInTheDocument();
@@ -95,6 +100,45 @@ describe("TemplateAppContainer component", () => {
     expect(screen.getByText("Footer")).toBeInTheDocument();
   });
 
+  it("renders only one header in a custom header component", () => {
+    const customHeader = <header>Custom header</header>;
+    render(
+      <TemplateAppContainer
+        header={customHeader}
+        renderHeaderElement={false}
+        breakout={breakout}
+        sidebar={sidebar}
+        contentTop={contentTop}
+        contentSidebar={contentSidebar}
+        contentPrimary={contentPrimary}
+        footer={footer}
+      />
+    );
+
+    // The `<header>` HTML element has the same meaning as `role="banner"`.
+    expect(screen.getAllByRole("banner")).toHaveLength(1);
+  });
+
+  it("consoles a warning when a header element was passed without setting `renderHeaderElement` to false", () => {
+    const warn = jest.spyOn(console, "warn");
+    const customHeader = <header>Custom header</header>;
+    render(
+      <TemplateAppContainer
+        header={customHeader}
+        breakout={breakout}
+        sidebar={sidebar}
+        contentTop={contentTop}
+        contentSidebar={contentSidebar}
+        contentPrimary={contentPrimary}
+        footer={footer}
+      />
+    );
+    expect(warn).toHaveBeenCalledWith(
+      "`TemplateHeader`: An HTML `header` element was passed in. Set " +
+        "`renderHeaderElement` to `false` to avoid nested HTML `header` elements."
+    );
+  });
+
   it("renders only one footer in a custom footer component", () => {
     const customFooter = <footer>Custom Footer</footer>;
     render(
@@ -138,6 +182,7 @@ describe("Template components", () => {
   it("renders each section", () => {
     render(
       <Template>
+        <TemplateAboveHeader>{aboveHeader}</TemplateAboveHeader>
         <TemplateHeader>
           {header}
           <TemplateBreakout>{breakout}</TemplateBreakout>
@@ -151,6 +196,7 @@ describe("Template components", () => {
       </Template>
     );
 
+    expect(screen.getByText("Above Header")).toBeInTheDocument();
     expect(screen.getByText("NYPL Header")).toBeInTheDocument();
     expect(screen.getByText("Breadcrumbs")).toBeInTheDocument();
     expect(screen.getByText("Hero")).toBeInTheDocument();
@@ -162,9 +208,10 @@ describe("Template components", () => {
   });
 
   it("Renders the UI snapshot correctly", () => {
-    const basic = renderer
+    const templateComponents = renderer
       .create(
         <Template>
+          <TemplateAboveHeader>{aboveHeader}</TemplateAboveHeader>
           <TemplateHeader>
             {header}
             <TemplateBreakout>{breakout}</TemplateBreakout>
@@ -178,7 +225,22 @@ describe("Template components", () => {
         </Template>
       )
       .toJSON();
+    const singleComponent = renderer
+      .create(
+        <TemplateAppContainer
+          aboveHeader={aboveHeader}
+          header={header}
+          breakout={breakout}
+          sidebar={sidebar}
+          contentTop={contentTop}
+          contentSidebar={contentSidebar}
+          contentPrimary={contentPrimary}
+          footer={footer}
+        />
+      )
+      .toJSON();
 
-    expect(basic).toMatchSnapshot();
+    expect(templateComponents).toMatchSnapshot();
+    expect(singleComponent).toMatchSnapshot();
   });
 });

package/src/components/Template/Template.tsx

@@ -2,6 +2,10 @@ import * as React from "react";
 import { Box, useStyleConfig } from "@chakra-ui/react";
 
 export interface TemplateProps {}
+export interface TemplateHeaderProps {
+  /** Flag to render an HTML header element. True by default. */
+  renderHeaderElement?: boolean;
+}
 export interface TemplateFooterProps {
   /** Flag to render an HTML footer element. True by default. */
   renderFooterElement?: boolean;
@@ -14,7 +18,11 @@ export interface TemplateSidebarProps {
 export interface TemplateContentProps extends TemplateSidebarProps {}
 export interface TemplateAppContainerProps
   extends TemplateFooterProps,
+    TemplateHeaderProps,
     TemplateSidebarProps {
+  /** DOM that will be rendered before the rest of the components in
+   * `TemplateAppContainer` and immediately before the `TemplateHeader` component. */
+  aboveHeader?: React.ReactElement;
   /** DOM that will be rendered in the `TemplateBreakout` component section. */
   breakout?: React.ReactElement;
   /** DOM that will be rendered in the `TemplateContentPrimary` component section. */
@@ -42,17 +50,52 @@ const Template = (props: React.PropsWithChildren<TemplateProps>) => {
   );
 };
 
+/**
+ * This optional component renders its children from edge-to-edge and should
+ * be used for alerts or notifications that are typically site-wide. This must
+ * be rendered immediately before the `TemplateHeader` component. This is meant
+ * for components that render an `aside` HTML element or HTML element with the
+ * `role="complementary"` attribute. These elements should *not* be rendered
+ * in the `header` HTML section since that's an accessibility violation.
+ */
+const TemplateAboveHeader = (props: React.PropsWithChildren<TemplateProps>) => {
+  const styles = useStyleConfig("TemplateBreakout", {});
+  return <Box __css={styles}>{props.children}</Box>;
+};
+
 /**
  * This optional component should be the first child of the `Template`
- * component. This is rendered as an HTML `<header>` element.
+ * component. This is rendered as an HTML `<header>` element. If an HTML
+ * `<header>` element is already passed in a custom component as the children,
+ * set `renderFooterElement` to `false`. Otherwise, the parent wrapper will
+ * render an HTML `<header>` element.
  */
-const TemplateHeader = (props: React.PropsWithChildren<TemplateProps>) => {
+const TemplateHeader = ({
+  children,
+  renderHeaderElement = true,
+}: React.PropsWithChildren<TemplateHeaderProps>) => {
   const styles = useStyleConfig("TemplateHeader", {});
-  return (
-    <Box as="header" __css={styles}>
-      {props.children}
-    </Box>
-  );
+  let headerElement = <Box __css={styles}>{children}</Box>;
+
+  // The user wants to render the `header` HTML element.
+  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) => {
+      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."
+        );
+      }
+    });
+    headerElement = (
+      <Box as="header" __css={styles}>
+        {children}
+      </Box>
+    );
+  }
+  return headerElement;
 };
 
 /**
@@ -194,6 +237,7 @@ const TemplateAppContainer = (
   props: React.PropsWithChildren<TemplateAppContainerProps>
 ) => {
   const {
+    aboveHeader,
     breakout,
     contentPrimary,
     contentSidebar,
@@ -202,7 +246,11 @@ const TemplateAppContainer = (
     header,
     sidebar = "none",
     renderFooterElement = true,
+    renderHeaderElement = true,
   } = props;
+  const aboveHeaderElem = aboveHeader && (
+    <TemplateAboveHeader>{aboveHeader}</TemplateAboveHeader>
+  );
   const breakoutElem = breakout && (
     <TemplateBreakout>{breakout}</TemplateBreakout>
   );
@@ -217,8 +265,9 @@ const TemplateAppContainer = (
   );
   return (
     <Template>
+      {aboveHeaderElem}
       {(header || breakoutElem) && (
-        <TemplateHeader>
+        <TemplateHeader renderHeaderElement={renderHeaderElement}>
           {header}
           {breakoutElem}
         </TemplateHeader>
@@ -246,6 +295,7 @@ const TemplateAppContainer = (
 export {
   TemplateAppContainer,
   Template,
+  TemplateAboveHeader,
   TemplateHeader,
   TemplateBreakout,
   TemplateContent,

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

@@ -4,6 +4,99 @@ exports[`Template components Renders the UI snapshot correctly 1`] = `
 <div
   className="nypl-ds css-0"
 >
+  <div
+    className="css-0"
+  >
+    <div
+      className="placeholder placeholder-short"
+    >
+      Above Header
+    </div>
+  </div>
+  <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>
+`;
+
+exports[`Template components Renders the UI snapshot correctly 2`] = `
+<div
+  className="nypl-ds css-0"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      className="placeholder placeholder-short"
+    >
+      Above Header
+    </div>
+  </div>
   <header
     className="css-0"
   >

package/src/index.ts

@@ -7,9 +7,11 @@ export {
   ButtonGroup,
   Center,
   Circle,
+  Flex,
   Grid,
   GridItem,
   HStack,
+  Spacer,
   Square,
   Stack,
   VStack,
@@ -29,12 +31,15 @@ export { CardLayouts } from "./components/Card/CardTypes";
 export { default as Checkbox } from "./components/Checkbox/Checkbox";
 export { default as CheckboxGroup } from "./components/CheckboxGroup/CheckboxGroup";
 export { CheckboxGroupLayoutTypes } from "./components/CheckboxGroup/CheckboxGroupLayoutTypes";
-export { default as DatePicker } from "./components/DatePicker/DatePicker";
+export {
+  default as DatePicker,
+  FullDateType,
+} from "./components/DatePicker/DatePicker";
 export { DatePickerTypes } from "./components/DatePicker/DatePickerTypes";
 export { default as DSProvider } from "./theme/provider";
 export { default as Fieldset } from "./components/Fieldset/Fieldset";
 export { default as Form, FormField, FormRow } from "./components/Form/Form";
-export { FormSpacing } from "./components/Form/FormTypes";
+export { FormGaps } from "./components/Form/FormTypes";
 export { GridGaps } from "./components/Grid/GridTypes";
 export { default as Heading } from "./components/Heading/Heading";
 export {
@@ -102,6 +107,7 @@ export {
 export {
   TemplateAppContainer,
   Template,
+  TemplateAboveHeader,
   TemplateHeader,
   TemplateBreakout,
   TemplateContent,

package/src/theme/components/breadcrumb.ts

@@ -67,7 +67,7 @@ const Breadcrumb = {
         marginInlineStart: "xxs",
       },
     },
-    "li:nth-last-child(2)": {
+    "li:nth-last-of-type(2)": {
       display: "inline-block",
       span: {
         display: { base: "none", md: "inline" },

package/src/theme/components/customTable.ts

@@ -3,6 +3,15 @@ const baseStyle = ({
   showRowDividers,
   useRowHeaders,
 }) => ({
+  // Headers `th` can be rendered as the first cell in every row through the
+  // `useRowHeaders`. Whereas the header `th` in the `thead` can be rendered
+  // with a custom color, the row header `th` in the `tbody` should always
+  // have text color black.
+  tbody: {
+    th: {
+      color: "var(--nypl-colors-ui-black)",
+    },
+  },
   th: {
     border: showRowDividers ? undefined : "none",
     borderBottom: showRowDividers ? undefined : "0px",
@@ -35,11 +44,15 @@ const baseStyle = ({
   },
   caption: {
     captionSide: "top",
-    textAlign: "left",
-    fontSize: "heading.secondary",
     color: "ui.black",
-    textTransform: "capitalize",
+    fontSize: "heading.secondary",
     fontWeight: "heading.secondary",
+    marginBottom: "s",
+    marginLeft: "0",
+    marginRight: "0",
+    marginTop: "0",
+    padding: "0",
+    textAlign: "left",
   },
 });
 

package/src/utils/componentCategories.ts

@@ -93,6 +93,7 @@ const categories = {
     title: "Chakra/Layout",
     components: [
       "Box",
+      "Flex",
       "Grid",
       "Center, Circle, Square",
       "Stack, HStack, VStack",