@nypl/design-system-react-components 0.25.11 → 0.26.0

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

@@ -1,14 +1,14 @@
 // 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="nypl-ds 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>
@@ -38,12 +38,13 @@ exports[`Template components Renders the UI snapshot correctly 1`] = `
   </header>
   <main
     className="css-0"
+    id="mainContent"
   >
     <div
       className="css-0"
     >
       <div
-        className="placeholder placeholder-undefined"
+        className="placeholder placeholder--undefined"
       >
         Content Top
       </div>
@@ -52,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>
@@ -61,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>
@@ -76,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>
@@ -84,15 +85,15 @@ 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="nypl-ds css-0"
+  className="css-1u8qly9"
 >
   <div
     className="css-0"
   >
     <div
-      className="placeholder placeholder-short"
+      className="placeholder placeholder--short"
     >
       Above Header
     </div>
@@ -101,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>
@@ -109,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>
@@ -122,12 +123,13 @@ exports[`Template components Renders the UI snapshot correctly 2`] = `
   </header>
   <main
     className="css-0"
+    id="mainContent"
   >
     <div
       className="css-0"
     >
       <div
-        className="placeholder placeholder-undefined"
+        className="placeholder placeholder--undefined"
       >
         Content Top
       </div>
@@ -136,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>
@@ -145,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>
@@ -160,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

@@ -8,14 +8,11 @@ import {
 import { withDesign } from "storybook-addon-designs";
 
 import Text from "./Text";
-import { TextDisplaySizes } from "./TextTypes";
+import { TextSizes } from "./TextTypes";
 import { getCategory } from "../../utils/componentCategories";
 import { getStorybookEnumValues } from "../../utils/utils";
 
-export const enumValues = getStorybookEnumValues(
-  TextDisplaySizes,
-  "TextDisplaySizes"
-);
+export const enumValues = getStorybookEnumValues(TextSizes, "TextSizes");
 
 <Meta
   title={getCategory("Text")}
@@ -29,14 +26,14 @@ export const enumValues = getStorybookEnumValues(
   }}
   argTypes={{
     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 } } },
+    size: {
+      control: { type: "select" },
+      options: enumValues.options,
+      table: { defaultValue: { summary: "TextSizes.Default" } },
+    },
   }}
 />
 
@@ -45,18 +42,29 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.1`   |
-| Latest            | `0.25.1`   |
+| 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 `displaySize` prop controls the size of the text rendered in the component.
+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"
     args={{
       className: undefined,
-      displaySize: "TextDisplaySizes.Default",
+      size: "TextSizes.Default",
       isBold: false,
       isItalic: false,
       noSpace: false,
@@ -64,7 +72,7 @@ The `Text` component renders a basic `<p>` element. As its name indicates, the `
   >
     {(args) => (
       <>
-        <Text {...args} displaySize={enumValues.getValue(args.displaySize)}>
+        <Text {...args} size={enumValues.getValue(args.size)}>
           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
@@ -74,7 +82,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} displaySize={enumValues.getValue(args.displaySize)}>
+        <Text {...args} size={enumValues.getValue(args.size)}>
           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
@@ -90,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

@@ -4,7 +4,7 @@ import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
 import Text from "./Text";
-import { TextDisplaySizes } from "./TextTypes";
+import { TextSizes } from "./TextTypes";
 
 describe("Text Accessibility", () => {
   it("passes axe accessibility test", async () => {
@@ -25,7 +25,8 @@ describe("Text", () => {
     const warn = jest.spyOn(console, "warn");
     render(<Text></Text>);
     expect(warn).toHaveBeenCalledWith(
-      "The Text component has no children and will not render correctly."
+      "NYPL Reservoir Text: No children were passed and the `Text` component " +
+        "will not render correctly."
     );
   });
 
@@ -35,29 +36,31 @@ describe("Text", () => {
       .toJSON();
     const caption = renderer
       .create(
-        <Text displaySize={TextDisplaySizes.Caption}>
-          Animal Crossing is all that!
-        </Text>
+        <Text size={TextSizes.Caption}>Animal Crossing is all that!</Text>
       )
       .toJSON();
     const tag = renderer
-      .create(
-        <Text displaySize={TextDisplaySizes.Tag}>
-          Animal Crossing is all that!
-        </Text>
-      )
+      .create(<Text size={TextSizes.Tag}>Animal Crossing is all that!</Text>)
       .toJSON();
     const mini = renderer
+      .create(<Text size={TextSizes.Mini}>Animal Crossing is all that!</Text>)
+      .toJSON();
+    const withChakraProps = renderer
       .create(
-        <Text displaySize={TextDisplaySizes.Mini}>
+        <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,37 +1,33 @@
+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 { TextDisplaySizes } from "./TextTypes";
+
+import { TextSizes } from "./TextTypes";
 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 */
+  size?: TextSizes;
 }
 
-function Text(props: React.PropsWithChildren<TextProps>) {
+export const Text = chakra((props: React.PropsWithChildren<TextProps>) => {
   const {
     children,
     className = "",
-    displaySize = TextDisplaySizes.Default,
     isBold,
     isItalic,
     noSpace,
+    size = TextSizes.Default,
+    ...rest
   } = props;
-
-  let variant = getVariant(
-    displaySize,
-    TextDisplaySizes,
-    TextDisplaySizes.Default
-  );
-
+  const variant = getVariant(size, TextSizes, TextSizes.Default);
   const styles = useStyleConfig("Text", {
     variant,
     isBold,
@@ -41,15 +37,16 @@ function Text(props: React.PropsWithChildren<TextProps>) {
 
   if (!children) {
     console.warn(
-      "The Text component has no children and will not render correctly."
+      "NYPL Reservoir Text: No children were passed and the `Text` component " +
+        "will not render correctly."
     );
   }
 
   return (
-    <ChakraText className={className} sx={styles}>
+    <ChakraText className={className} sx={styles} {...rest}>
       {children}
     </ChakraText>
   );
-}
+});
 
 export default Text;

package/src/components/Text/TextTypes.tsx

@@ -1,4 +1,4 @@
-export enum TextDisplaySizes {
+export enum TextSizes {
   Default = "default",
   Caption = "caption",
   Tag = "tag",

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>