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

package/src/components/Template/Template.tsx

@@ -1,5 +1,5 @@
+import { Box, chakra, useStyleConfig } from "@chakra-ui/react";
 import * as React from "react";
-import { Box, useStyleConfig } from "@chakra-ui/react";
 
 export interface TemplateProps {}
 export interface TemplateHeaderProps {
@@ -49,10 +49,14 @@ export interface TemplateAppContainerProps
  * The main top-level parent component that wraps all template-related
  * components.
  */
-const Template = (props: React.PropsWithChildren<TemplateProps>) => {
+const Template = chakra((props: React.PropsWithChildren<TemplateProps>) => {
   const styles = useStyleConfig("Template", {});
-  return <Box __css={styles}>{props.children}</Box>;
-};
+  return (
+    <Box __css={styles} {...props}>
+      {props.children}
+    </Box>
+  );
+});
 
 /**
  * This optional component renders its children from edge-to-edge and should
@@ -241,68 +245,68 @@ const TemplateFooter = ({
  * be rendered. For example, if you want to render content in the
  * `TemplateContentPrimary` section, then pass it as a prop to `contentPrimary`.
  */
-const TemplateAppContainer = (
-  props: React.PropsWithChildren<TemplateAppContainerProps>
-) => {
-  const {
-    aboveHeader,
-    breakout,
-    contentId = "mainContent",
-    contentPrimary,
-    contentSidebar,
-    contentTop,
-    footer,
-    header,
-    sidebar = "none",
-    renderFooterElement = true,
-    renderHeaderElement = true,
-  } = props;
-  const aboveHeaderElem = aboveHeader && (
-    <TemplateAboveHeader>{aboveHeader}</TemplateAboveHeader>
-  );
-  const breakoutElem = breakout && (
-    <TemplateBreakout>{breakout}</TemplateBreakout>
-  );
-  const contentTopElem = contentTop && (
-    <TemplateContentTop>{contentTop}</TemplateContentTop>
-  );
-  const contentPrimaryElem = contentPrimary && (
-    <TemplateContentPrimary>{contentPrimary}</TemplateContentPrimary>
-  );
-  const contentSidebarElem = contentSidebar && (
-    <TemplateContentSidebar>{contentSidebar}</TemplateContentSidebar>
-  );
-  return (
-    <Template>
-      {aboveHeaderElem}
-      {(header || breakoutElem) && (
-        <TemplateHeader renderHeaderElement={renderHeaderElement}>
-          {header}
-          {breakoutElem}
-        </TemplateHeader>
-      )}
-      {/* Note that setting `sidebar` as a prop here affects the
+export const TemplateAppContainer = chakra(
+  (props: React.PropsWithChildren<TemplateAppContainerProps>) => {
+    const {
+      aboveHeader,
+      breakout,
+      contentId = "mainContent",
+      contentPrimary,
+      contentSidebar,
+      contentTop,
+      footer,
+      header,
+      sidebar = "none",
+      renderFooterElement = true,
+      renderHeaderElement = true,
+      ...rest
+    } = props;
+    const aboveHeaderElem = aboveHeader && (
+      <TemplateAboveHeader>{aboveHeader}</TemplateAboveHeader>
+    );
+    const breakoutElem = breakout && (
+      <TemplateBreakout>{breakout}</TemplateBreakout>
+    );
+    const contentTopElem = contentTop && (
+      <TemplateContentTop>{contentTop}</TemplateContentTop>
+    );
+    const contentPrimaryElem = contentPrimary && (
+      <TemplateContentPrimary>{contentPrimary}</TemplateContentPrimary>
+    );
+    const contentSidebarElem = contentSidebar && (
+      <TemplateContentSidebar>{contentSidebar}</TemplateContentSidebar>
+    );
+    return (
+      <Template {...rest}>
+        {aboveHeaderElem}
+        {(header || breakoutElem) && (
+          <TemplateHeader renderHeaderElement={renderHeaderElement}>
+            {header}
+            {breakoutElem}
+          </TemplateHeader>
+        )}
+        {/* Note that setting `sidebar` as a prop here affects the
        TemplateContentSidebar and TemplateContentPrimary components. */}
-      <TemplateContent id={contentId} sidebar={sidebar}>
-        {contentTopElem}
+        <TemplateContent id={contentId} sidebar={sidebar}>
+          {contentTopElem}
 
-        {sidebar === "left" && contentSidebarElem}
+          {sidebar === "left" && contentSidebarElem}
 
-        {contentPrimaryElem}
+          {contentPrimaryElem}
 
-        {sidebar === "right" && contentSidebarElem}
-      </TemplateContent>
-      {footer && (
-        <TemplateFooter renderFooterElement={renderFooterElement}>
-          {footer}
-        </TemplateFooter>
-      )}
-    </Template>
-  );
-};
+          {sidebar === "right" && contentSidebarElem}
+        </TemplateContent>
+        {footer && (
+          <TemplateFooter renderFooterElement={renderFooterElement}>
+            {footer}
+          </TemplateFooter>
+        )}
+      </Template>
+    );
+  }
+);
 
 export {
-  TemplateAppContainer,
   Template,
   TemplateAboveHeader,
   TemplateHeader,
@@ -313,3 +317,4 @@ export {
   TemplateContentSidebar,
   TemplateFooter,
 };
+export default TemplateAppContainer;

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

@@ -2,13 +2,13 @@
 
 exports[`Template components renders the UI snapshot correctly 1`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <div
     className="css-0"
   >
     <div
-      className="placeholder placeholder-short"
+      className="placeholder placeholder--short"
     >
       Above Header
     </div>
@@ -17,7 +17,7 @@ exports[`Template components renders the UI snapshot correctly 1`] = `
     className="css-0"
   >
     <div
-      className="placeholder placeholder-short"
+      className="placeholder placeholder--short"
     >
       NYPL Header
     </div>
@@ -25,12 +25,12 @@ exports[`Template components renders the UI snapshot correctly 1`] = `
       className="css-0"
     >
       <div
-        className="placeholder placeholder-short"
+        className="placeholder placeholder--short"
       >
         Breadcrumbs
       </div>
       <div
-        className="placeholder placeholder-short"
+        className="placeholder placeholder--short"
       >
         Hero
       </div>
@@ -44,7 +44,7 @@ exports[`Template components renders the UI snapshot correctly 1`] = `
       className="css-0"
     >
       <div
-        className="placeholder placeholder-undefined"
+        className="placeholder placeholder--undefined"
       >
         Content Top
       </div>
@@ -53,7 +53,7 @@ exports[`Template components renders the UI snapshot correctly 1`] = `
       className="css-0"
     >
       <div
-        className="placeholder placeholder-undefined"
+        className="placeholder placeholder--undefined"
       >
         Left Sidebar
       </div>
@@ -62,12 +62,12 @@ exports[`Template components renders the UI snapshot correctly 1`] = `
       className="css-0"
     >
       <div
-        className="placeholder placeholder-undefined"
+        className="placeholder placeholder--undefined"
       >
         Main Content
       </div>
       <div
-        className="placeholder placeholder-short"
+        className="placeholder placeholder--short"
       >
         More Content
       </div>
@@ -77,7 +77,7 @@ exports[`Template components renders the UI snapshot correctly 1`] = `
     className="css-0"
   >
     <div
-      className="placeholder placeholder-short"
+      className="placeholder placeholder--short"
     >
       Footer
     </div>
@@ -87,13 +87,13 @@ exports[`Template components renders the UI snapshot correctly 1`] = `
 
 exports[`Template components renders the UI snapshot correctly 2`] = `
 <div
-  className="css-0"
+  className="css-1u8qly9"
 >
   <div
     className="css-0"
   >
     <div
-      className="placeholder placeholder-short"
+      className="placeholder placeholder--short"
     >
       Above Header
     </div>
@@ -102,7 +102,7 @@ exports[`Template components renders the UI snapshot correctly 2`] = `
     className="css-0"
   >
     <div
-      className="placeholder placeholder-short"
+      className="placeholder placeholder--short"
     >
       NYPL Header
     </div>
@@ -110,12 +110,12 @@ exports[`Template components renders the UI snapshot correctly 2`] = `
       className="css-0"
     >
       <div
-        className="placeholder placeholder-short"
+        className="placeholder placeholder--short"
       >
         Breadcrumbs
       </div>
       <div
-        className="placeholder placeholder-short"
+        className="placeholder placeholder--short"
       >
         Hero
       </div>
@@ -129,7 +129,7 @@ exports[`Template components renders the UI snapshot correctly 2`] = `
       className="css-0"
     >
       <div
-        className="placeholder placeholder-undefined"
+        className="placeholder placeholder--undefined"
       >
         Content Top
       </div>
@@ -138,7 +138,7 @@ exports[`Template components renders the UI snapshot correctly 2`] = `
       className="css-0"
     >
       <div
-        className="placeholder placeholder-undefined"
+        className="placeholder placeholder--undefined"
       >
         Left Sidebar
       </div>
@@ -147,12 +147,12 @@ exports[`Template components renders the UI snapshot correctly 2`] = `
       className="css-0"
     >
       <div
-        className="placeholder placeholder-undefined"
+        className="placeholder placeholder--undefined"
       >
         Main Content
       </div>
       <div
-        className="placeholder placeholder-short"
+        className="placeholder placeholder--short"
       >
         More Content
       </div>
@@ -162,7 +162,178 @@ exports[`Template components renders the UI snapshot correctly 2`] = `
     className="css-0"
   >
     <div
-      className="placeholder placeholder-short"
+      className="placeholder placeholder--short"
+    >
+      Footer
+    </div>
+  </footer>
+</div>
+`;
+
+exports[`Template components renders the UI snapshot correctly 3`] = `
+<div
+  className="css-1y4kn3e"
+>
+  <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"
+    id="mainContent"
+  >
+    <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 4`] = `
+<div
+  className="css-1u8qly9"
+  data-testid="props"
+>
+  <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"
+    id="mainContent"
+  >
+    <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>

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

@@ -42,13 +42,23 @@ export const enumValues = getStorybookEnumValues(TextSizes, "TextSizes");
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.1`   |
-| Latest            | `0.25.13`  |
+| Latest            | `0.26.0`   |
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component Props](#component-props)
+- [Accessibility](#accessibility)
+
+## Overview
 
 <Description of={Text} />
 
 The `Text` component renders a basic `<p>` element. As its name indicates, the
 `size` prop controls the size of the text rendered in the component.
 
+## Component Props
+
 <Canvas withToolbar>
   <Story
     name="Text"
@@ -88,3 +98,12 @@ The `Text` component renders a basic `<p>` element. As its name indicates, the
 </Canvas>
 
 <ArgsTable story="Text" />
+
+## Accessibility
+
+The `Text` component renders paragraph `p` HTML elements which are inherently
+accessible and will be read by screen readers.
+
+Resources:
+
+- [Chakra UI Text](https://chakra-ui.com/docs/components/typography/text)

package/src/components/Text/Text.test.tsx

@@ -45,10 +45,22 @@ describe("Text", () => {
     const mini = renderer
       .create(<Text size={TextSizes.Mini}>Animal Crossing is all that!</Text>)
       .toJSON();
+    const withChakraProps = renderer
+      .create(
+        <Text p="20px" color="ui.error.primary">
+          Animal Crossing is all that!
+        </Text>
+      )
+      .toJSON();
+    const withOtherProps = renderer
+      .create(<Text data-testid="props">Animal Crossing is all that!</Text>)
+      .toJSON();
 
     expect(defaultText).toMatchSnapshot();
     expect(caption).toMatchSnapshot();
     expect(tag).toMatchSnapshot();
     expect(mini).toMatchSnapshot();
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
   });
 });

package/src/components/Text/Text.tsx

@@ -1,5 +1,6 @@
+import { Text as ChakraText, chakra, useStyleConfig } from "@chakra-ui/react";
 import * as React from "react";
-import { Text as ChakraText, useStyleConfig } from "@chakra-ui/react";
+
 import { TextSizes } from "./TextTypes";
 import { getVariant } from "../../utils/utils";
 
@@ -16,7 +17,7 @@ export interface TextProps {
   size?: TextSizes;
 }
 
-function Text(props: React.PropsWithChildren<TextProps>) {
+export const Text = chakra((props: React.PropsWithChildren<TextProps>) => {
   const {
     children,
     className = "",
@@ -24,6 +25,7 @@ function Text(props: React.PropsWithChildren<TextProps>) {
     isItalic,
     noSpace,
     size = TextSizes.Default,
+    ...rest
   } = props;
   const variant = getVariant(size, TextSizes, TextSizes.Default);
   const styles = useStyleConfig("Text", {
@@ -41,10 +43,10 @@ function Text(props: React.PropsWithChildren<TextProps>) {
   }
 
   return (
-    <ChakraText className={className} sx={styles}>
+    <ChakraText className={className} sx={styles} {...rest}>
       {children}
     </ChakraText>
   );
-}
+});
 
 export default Text;

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

@@ -2,7 +2,7 @@
 
 exports[`Text renders the UI snapshot correctly 1`] = `
 <p
-  className="chakra-text css-0"
+  className="chakra-text css-1xdhyk6"
 >
   Animal Crossing is all that!
 </p>
@@ -10,7 +10,7 @@ exports[`Text renders the UI snapshot correctly 1`] = `
 
 exports[`Text renders the UI snapshot correctly 2`] = `
 <p
-  className="chakra-text css-0"
+  className="chakra-text css-1xdhyk6"
 >
   Animal Crossing is all that!
 </p>
@@ -18,7 +18,7 @@ exports[`Text renders the UI snapshot correctly 2`] = `
 
 exports[`Text renders the UI snapshot correctly 3`] = `
 <p
-  className="chakra-text css-0"
+  className="chakra-text css-1xdhyk6"
 >
   Animal Crossing is all that!
 </p>
@@ -26,7 +26,24 @@ exports[`Text renders the UI snapshot correctly 3`] = `
 
 exports[`Text renders the UI snapshot correctly 4`] = `
 <p
-  className="chakra-text css-0"
+  className="chakra-text css-1xdhyk6"
+>
+  Animal Crossing is all that!
+</p>
+`;
+
+exports[`Text renders the UI snapshot correctly 5`] = `
+<p
+  className="chakra-text css-kle7zy"
+>
+  Animal Crossing is all that!
+</p>
+`;
+
+exports[`Text renders the UI snapshot correctly 6`] = `
+<p
+  className="chakra-text css-1xdhyk6"
+  data-testid="props"
 >
   Animal Crossing is all that!
 </p>