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

package/src/components/StructuredContent/StructuredContent.test.tsx

@@ -83,16 +83,18 @@ describe("StructuredContent Accessibility", () => {
   it("passes axe accessibility for HTML string text content", async () => {
     const { container } = render(
       <StructuredContent
+        bodyContent={htmlStringBodyContent}
         calloutText="This is the callout text"
         headingText="Heading text"
-        imageAlt="Image alt text"
-        imageAspectRatio={ImageRatios.Original}
-        imageCaption="Image caption"
-        imageCredit="Image credit"
-        imagePosition={StructuredContentImagePosition.Left}
-        imageSize={ImageSizes.Medium}
-        imageSrc="https://placeimg.com/400/300/animals"
-        bodyContent={htmlStringBodyContent}
+        imageProps={{
+          alt: "Image alt text",
+          aspectRatio: ImageRatios.Original,
+          caption: "Image caption",
+          credit: "Image credit",
+          position: StructuredContentImagePosition.Left,
+          size: ImageSizes.Medium,
+          src: "https://placeimg.com/400/300/animals",
+        }}
       />
     );
     expect(await axe(container)).toHaveNoViolations();
@@ -101,16 +103,18 @@ describe("StructuredContent Accessibility", () => {
   it("passes axe accessibility for HTML DOM text content", async () => {
     const { container } = render(
       <StructuredContent
+        bodyContent={htmlDOMBodyContent}
         calloutText="This is the callout text"
         headingText="Heading text"
-        imageAlt="Image alt text"
-        imageAspectRatio={ImageRatios.Original}
-        imageCaption="Image caption"
-        imageCredit="Image credit"
-        imagePosition={StructuredContentImagePosition.Left}
-        imageSize={ImageSizes.Medium}
-        imageSrc="https://placeimg.com/400/300/animals"
-        bodyContent={htmlDOMBodyContent}
+        imageProps={{
+          alt: "Image alt text",
+          aspectRatio: ImageRatios.Original,
+          caption: "Image caption",
+          credit: "Image credit",
+          position: StructuredContentImagePosition.Left,
+          size: ImageSizes.Medium,
+          src: "https://placeimg.com/400/300/animals",
+        }}
       />
     );
     expect(await axe(container)).toHaveNoViolations();
@@ -119,9 +123,9 @@ describe("StructuredContent Accessibility", () => {
   it("passes axe accessibility without an image", async () => {
     const { container } = render(
       <StructuredContent
+        bodyContent={htmlStringBodyContent}
         calloutText="This is the callout text"
         headingText="Heading text"
-        bodyContent={htmlStringBodyContent}
       />
     );
     expect(await axe(container)).toHaveNoViolations();
@@ -132,16 +136,18 @@ describe("StructuredContent", () => {
   it("renders two headings, an image, and body text", () => {
     render(
       <StructuredContent
+        bodyContent={htmlStringBodyContent}
         calloutText="This is the callout text"
         headingText="Heading text"
-        imageAlt="Image alt text"
-        imageAspectRatio={ImageRatios.Original}
-        imageCaption="Image caption"
-        imageCredit="Image credit"
-        imagePosition={StructuredContentImagePosition.Left}
-        imageSize={ImageSizes.Medium}
-        imageSrc="https://placeimg.com/400/300/animals"
-        bodyContent={htmlStringBodyContent}
+        imageProps={{
+          alt: "Image alt text",
+          aspectRatio: ImageRatios.Original,
+          caption: "Image caption",
+          credit: "Image credit",
+          position: StructuredContentImagePosition.Left,
+          size: ImageSizes.Medium,
+          src: "https://placeimg.com/400/300/animals",
+        }}
       />
     );
     const mainHeading = screen.getByRole("heading", { level: 2 });
@@ -156,14 +162,16 @@ describe("StructuredContent", () => {
   it("optionally renders without the headings", () => {
     render(
       <StructuredContent
-        imageAlt="Image alt text"
-        imageAspectRatio={ImageRatios.Original}
-        imageCaption="Image caption"
-        imageCredit="Image credit"
-        imagePosition={StructuredContentImagePosition.Left}
-        imageSize={ImageSizes.Medium}
-        imageSrc="https://placeimg.com/400/300/animals"
         bodyContent={htmlStringBodyContent}
+        imageProps={{
+          alt: "Image alt text",
+          aspectRatio: ImageRatios.Original,
+          caption: "Image caption",
+          credit: "Image credit",
+          position: StructuredContentImagePosition.Left,
+          size: ImageSizes.Medium,
+          src: "https://placeimg.com/400/300/animals",
+        }}
       />
     );
     const mainHeading = screen.queryByRole("heading", { level: 2 });
@@ -178,9 +186,9 @@ describe("StructuredContent", () => {
   it("optionally renders without the image", () => {
     render(
       <StructuredContent
+        bodyContent={htmlStringBodyContent}
         calloutText="This is the callout text"
         headingText="Heading text"
-        bodyContent={htmlStringBodyContent}
       />
     );
     const mainHeading = screen.getByRole("heading", { level: 2 });
@@ -192,24 +200,27 @@ describe("StructuredContent", () => {
     expect(screen.getByText(/Lorem ipsum dolor sit amet/i)).toBeInTheDocument();
   });
 
-  it("logs a warning when an image is used but no alt text is passed to `imageAlt`", () => {
+  it("logs a warning when an image is used but no alt text is passed to `imageProps.alt`", () => {
     const warn = jest.spyOn(console, "warn");
     render(
       <StructuredContent
+        bodyContent={htmlStringBodyContent}
         calloutText="This is the callout text"
         headingText="Heading text"
-        imageAspectRatio={ImageRatios.Original}
-        imageCaption="Image caption"
-        imageCredit="Image credit"
-        imagePosition={StructuredContentImagePosition.Left}
-        imageSize={ImageSizes.Medium}
-        imageSrc="https://placeimg.com/400/300/animals"
-        bodyContent={htmlStringBodyContent}
+        imageProps={{
+          aspectRatio: ImageRatios.Original,
+          caption: "Image caption",
+          credit: "Image credit",
+          position: StructuredContentImagePosition.Left,
+          size: ImageSizes.Medium,
+          src: "https://placeimg.com/400/300/animals",
+        }}
       />
     );
 
     expect(warn).toHaveBeenCalledWith(
-      "StructuredContent: `imageAlt` prop is required when using an image."
+      "NYPL Reservoir StructuredContent: The `imageProps.alt` prop is required " +
+        "when using an image."
     );
     expect(screen.getByRole("img")).toBeInTheDocument();
   });
@@ -217,16 +228,18 @@ describe("StructuredContent", () => {
   it("renders an image wrapped in figure when provided an image caption or credit", () => {
     const { rerender } = render(
       <StructuredContent
+        bodyContent={htmlStringBodyContent}
         calloutText="This is the callout text"
         headingText="Heading text"
-        imageAlt="Image alt text"
-        imageAspectRatio={ImageRatios.Original}
-        imageCaption="Image caption"
-        imageCredit="Image credit"
-        imagePosition={StructuredContentImagePosition.Left}
-        imageSize={ImageSizes.Medium}
-        imageSrc="https://placeimg.com/400/300/animals"
-        bodyContent={htmlStringBodyContent}
+        imageProps={{
+          alt: "Image alt text",
+          aspectRatio: ImageRatios.Original,
+          caption: "Image caption",
+          credit: "Image credit",
+          position: StructuredContentImagePosition.Left,
+          size: ImageSizes.Medium,
+          src: "https://placeimg.com/400/300/animals",
+        }}
       />
     );
     expect(screen.getByRole("img")).toBeInTheDocument();
@@ -237,15 +250,17 @@ describe("StructuredContent", () => {
     // Not passing in the image's caption
     rerender(
       <StructuredContent
+        bodyContent={htmlStringBodyContent}
         calloutText="This is the callout text"
         headingText="Heading text"
-        imageAlt="Image alt text"
-        imageAspectRatio={ImageRatios.Original}
-        imageCredit="Image credit"
-        imagePosition={StructuredContentImagePosition.Left}
-        imageSize={ImageSizes.Medium}
-        imageSrc="https://placeimg.com/400/300/animals"
-        bodyContent={htmlStringBodyContent}
+        imageProps={{
+          alt: "Image alt text",
+          aspectRatio: ImageRatios.Original,
+          credit: "Image credit",
+          position: StructuredContentImagePosition.Left,
+          size: ImageSizes.Medium,
+          src: "https://placeimg.com/400/300/animals",
+        }}
       />
     );
     expect(screen.getByRole("img")).toBeInTheDocument();
@@ -257,14 +272,16 @@ describe("StructuredContent", () => {
   it("renders a simple image element when no image caption or credit are provided", () => {
     render(
       <StructuredContent
+        bodyContent={htmlStringBodyContent}
         calloutText="This is the callout text"
         headingText="Heading text"
-        imageAlt="Image alt text"
-        imageAspectRatio={ImageRatios.Original}
-        imagePosition={StructuredContentImagePosition.Left}
-        imageSize={ImageSizes.Medium}
-        imageSrc="https://placeimg.com/400/300/animals"
-        bodyContent={htmlStringBodyContent}
+        imageProps={{
+          alt: "Image alt text",
+          aspectRatio: ImageRatios.Original,
+          position: StructuredContentImagePosition.Left,
+          size: ImageSizes.Medium,
+          src: "https://placeimg.com/400/300/animals",
+        }}
       />
     );
     expect(screen.getByRole("img")).toBeInTheDocument();
@@ -277,91 +294,101 @@ describe("StructuredContent", () => {
     const withHTMLStringContent = renderer
       .create(
         <StructuredContent
+          bodyContent={htmlStringBodyContent}
           calloutText="This is the callout text"
           headingText="Heading text"
           id="withHTMLStringContent"
-          imageAlt="Image alt text"
-          imageAspectRatio={ImageRatios.Original}
-          imageCaption="Image caption"
-          imageCredit="Image credit"
-          imagePosition={StructuredContentImagePosition.Left}
-          imageSize={ImageSizes.Medium}
-          imageSrc="https://placeimg.com/400/300/animals"
-          bodyContent={htmlStringBodyContent}
+          imageProps={{
+            alt: "Image alt text",
+            aspectRatio: ImageRatios.Original,
+            caption: "Image caption",
+            credit: "Image credit",
+            position: StructuredContentImagePosition.Left,
+            size: ImageSizes.Medium,
+            src: "https://placeimg.com/400/300/animals",
+          }}
         />
       )
       .toJSON();
     const withHTMLDOMContent = renderer
       .create(
         <StructuredContent
+          bodyContent={htmlDOMBodyContent}
           calloutText="This is the callout text"
           headingText="Heading text"
           id="withHTMLDOMContent"
-          imageAlt="Image alt text"
-          imageAspectRatio={ImageRatios.Original}
-          imageCaption="Image caption"
-          imageCredit="Image credit"
-          imagePosition={StructuredContentImagePosition.Left}
-          imageSize={ImageSizes.Medium}
-          imageSrc="https://placeimg.com/400/300/animals"
-          bodyContent={htmlDOMBodyContent}
+          imageProps={{
+            alt: "Image alt text",
+            aspectRatio: ImageRatios.Original,
+            caption: "Image caption",
+            credit: "Image credit",
+            position: StructuredContentImagePosition.Left,
+            size: ImageSizes.Medium,
+            src: "https://placeimg.com/400/300/animals",
+          }}
         />
       )
       .toJSON();
     const withoutAnImage = renderer
       .create(
         <StructuredContent
+          bodyContent={htmlStringBodyContent}
           calloutText="This is the callout text"
           headingText="Heading text"
           id="withoutAnImage"
-          bodyContent={htmlStringBodyContent}
         />
       )
       .toJSON();
     const withImageWithoutCaptionOrCredit = renderer
       .create(
         <StructuredContent
+          bodyContent={htmlStringBodyContent}
           calloutText="This is the callout text"
           headingText="Heading text"
           id="withImageWithoutCaptionOrCredit"
-          imageAlt="Image alt text"
-          imageAspectRatio={ImageRatios.Original}
-          imagePosition={StructuredContentImagePosition.Left}
-          imageSize={ImageSizes.Medium}
-          imageSrc="https://placeimg.com/400/300/animals"
-          bodyContent={htmlStringBodyContent}
+          imageProps={{
+            alt: "Image alt text",
+            aspectRatio: ImageRatios.Original,
+            position: StructuredContentImagePosition.Left,
+            size: ImageSizes.Medium,
+            src: "https://placeimg.com/400/300/animals",
+          }}
         />
       )
       .toJSON();
     const withoutHeading = renderer
       .create(
         <StructuredContent
+          bodyContent={htmlStringBodyContent}
           calloutText="This is the callout text"
           id="withoutHeading"
-          imageAlt="Image alt text"
-          imageAspectRatio={ImageRatios.Original}
-          imageCaption="Image caption"
-          imageCredit="Image credit"
-          imagePosition={StructuredContentImagePosition.Left}
-          imageSize={ImageSizes.Medium}
-          imageSrc="https://placeimg.com/400/300/animals"
-          bodyContent={htmlStringBodyContent}
+          imageProps={{
+            alt: "Image alt text",
+            aspectRatio: ImageRatios.Original,
+            caption: "Image caption",
+            credit: "Image credit",
+            position: StructuredContentImagePosition.Left,
+            size: ImageSizes.Medium,
+            src: "https://placeimg.com/400/300/animals",
+          }}
         />
       )
       .toJSON();
     const withoutCalloutText = renderer
       .create(
         <StructuredContent
+          bodyContent={htmlStringBodyContent}
           headingText="Heading text"
           id="withoutCalloutText"
-          imageAlt="Image alt text"
-          imageAspectRatio={ImageRatios.Original}
-          imageCaption="Image caption"
-          imageCredit="Image credit"
-          imagePosition={StructuredContentImagePosition.Left}
-          imageSize={ImageSizes.Medium}
-          imageSrc="https://placeimg.com/400/300/animals"
-          bodyContent={htmlStringBodyContent}
+          imageProps={{
+            alt: "Image alt text",
+            aspectRatio: ImageRatios.Original,
+            caption: "Image caption",
+            credit: "Image credit",
+            position: StructuredContentImagePosition.Left,
+            size: ImageSizes.Medium,
+            src: "https://placeimg.com/400/300/animals",
+          }}
         />
       )
       .toJSON();

package/src/components/StructuredContent/StructuredContent.tsx

@@ -2,12 +2,18 @@ import * as React from "react";
 import { Box, useMultiStyleConfig } from "@chakra-ui/react";
 
 import Heading from "../Heading/Heading";
-import { HeadingDisplaySizes, HeadingLevels } from "../Heading/HeadingTypes";
-import Image, { ImageProps } from "../Image/Image";
+import { HeadingSizes, HeadingLevels } from "../Heading/HeadingTypes";
+import Image, { ComponentImageProps, ImageProps } from "../Image/Image";
 import { ImageRatios, ImageSizes } from "../Image/ImageTypes";
 import { StructuredContentImagePosition } from "./StructuredContentTypes";
 import generateUUID from "../../helpers/generateUUID";
 
+interface StructuredContentImageProps extends ComponentImageProps {
+  /** Optional value to control the positioning of the internal `Image` component.
+   * Defaults to `StructuredContentImagePosition.Left`. */
+  position?: StructuredContentImagePosition;
+}
+
 export interface StructuredContentProps {
   /** Optional value to set the text for the callout heading text. */
   calloutText?: string;
@@ -17,27 +23,8 @@ export interface StructuredContentProps {
   headingText?: string;
   /** ID that other components can cross reference for accessibility purposes. */
   id?: string;
-  /** String value used to populate the `alt` attribute of the internal `Image`
-   * component's `img` element. @NOTE if an image is used, this value must be passed. */
-  imageAlt?: string;
-  /** Optional value to control the aspect ratio of the internal `Image` component.
-   * Defaults to `ImageRatios.Square`. */
-  imageAspectRatio?: ImageRatios;
-  /** Optional value to render as a caption for the internal `Image` component. */
-  imageCaption?: string;
-  /** Optional DOM element to use instead of the DS `Image` component. */
-  imageComponent?: JSX.Element;
-  /** Optional value to render as a credit for the internal `Image` component. */
-  imageCredit?: string;
-  /** Optional value to control the positioning of the internal `Image` component.
-   * Defaults to `StructuredContentImagePosition.Left`. */
-  imagePosition?: StructuredContentImagePosition;
-  /** Optional value to control the size of the internal `Image` component.
-   * Defaults to `ImageSizes.Medium`. */
-  imageSize?: ImageSizes;
-  /** Optional value that contains the path to an image. If omitted, the internal
-   * DS `Image` component will not render. */
-  imageSrc?: string;
+  /** Object used to create and render the `Image` component. */
+  imageProps?: StructuredContentImageProps;
   /** Required value to set the text for the body content. */
   bodyContent: string | JSX.Element;
 }
@@ -52,11 +39,11 @@ function StructuredContentImage(props: ImageProps) {
     additionalImageStyles,
     additionalWrapperStyles,
     alt,
+    aspectRatio,
+    caption,
     component,
-    imageAspectRatio,
-    imageCaption,
-    imageCredit,
-    imageSize,
+    credit,
+    size,
     src,
   } = props;
   return (
@@ -66,10 +53,10 @@ function StructuredContentImage(props: ImageProps) {
       additionalWrapperStyles={additionalWrapperStyles}
       alt={alt}
       component={component}
-      imageAspectRatio={imageAspectRatio}
-      imageSize={imageSize}
-      imageCaption={imageCaption}
-      imageCredit={imageCredit}
+      aspectRatio={aspectRatio}
+      size={size}
+      caption={caption}
+      credit={credit}
       src={src}
     />
   );
@@ -87,22 +74,24 @@ export default function StructuredContent(
     className,
     headingText,
     id = generateUUID(),
-    imageAlt = "",
-    imageAspectRatio = ImageRatios.Square,
-    imageCaption,
-    imageComponent,
-    imageCredit,
-    imagePosition = StructuredContentImagePosition.Left,
-    imageSize = ImageSizes.Medium,
-    imageSrc,
+    imageProps = {
+      alt: "",
+      aspectRatio: ImageRatios.Square,
+      caption: undefined,
+      component: undefined,
+      credit: undefined,
+      position: StructuredContentImagePosition.Left,
+      size: ImageSizes.Medium,
+      src: "",
+    },
     bodyContent,
   } = props;
-  const hasImage = imageSrc || imageComponent;
-  const hasFigureImage = imageCaption || imageCredit;
+  const hasImage = imageProps.src || imageProps.component;
+  const hasFigureImage = imageProps.caption || imageProps.credit;
   const styles = useMultiStyleConfig("StructuredContent", {
     hasFigureImage,
-    imageAspectRatio,
-    imagePosition,
+    imageAspectRatio: imageProps.aspectRatio,
+    imagePosition: imageProps.position,
   });
   const finalBodyContent =
     typeof bodyContent === "string" ? (
@@ -111,9 +100,10 @@ export default function StructuredContent(
       <Box>{bodyContent}</Box>
     );
 
-  if (hasImage && !imageAlt) {
+  if (hasImage && !imageProps.alt) {
     console.warn(
-      "StructuredContent: `imageAlt` prop is required when using an image."
+      "NYPL Reservoir StructuredContent: The `imageProps.alt` prop is required " +
+        "when using an image."
     );
   }
 
@@ -126,9 +116,9 @@ export default function StructuredContent(
       )}
       {calloutText && (
         <Heading
-          displaySize={HeadingDisplaySizes.Callout}
           id={`${id}-callout`}
           level={HeadingLevels.Three}
+          size={HeadingSizes.Callout}
         >
           {calloutText}
         </Heading>
@@ -138,13 +128,13 @@ export default function StructuredContent(
           additionalFigureStyles={styles.imageFigure}
           additionalImageStyles={styles.image}
           additionalWrapperStyles={styles.imageWrapper}
-          alt={imageAlt}
-          component={imageComponent}
-          imageAspectRatio={imageAspectRatio}
-          imageCaption={imageCaption}
-          imageCredit={imageCredit}
-          imageSize={imageSize}
-          src={imageSrc ? imageSrc : null}
+          alt={imageProps.alt}
+          component={imageProps.component}
+          aspectRatio={imageProps.aspectRatio}
+          caption={imageProps.caption}
+          credit={imageProps.credit}
+          size={imageProps.size}
+          src={imageProps.src ? imageProps.src : null}
         />
       )}
       {finalBodyContent}

package/src/components/StyleGuide/ColorCard.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
 
 import Card from "../Card/Card";
-import { CardLayouts } from "../Card/CardTypes";
 import Heading from "../Heading/Heading";
 import { HeadingLevels } from "../Heading/HeadingTypes";
+import { LayoutTypes } from "../../helpers/enums";
 
 export interface ColorCardProps {
   /** backgroundColor of the color card */
@@ -25,9 +25,9 @@ export default function ColorCard(
     <div style={{ display: "flex", alignItems: "center" }}>
       <Card
         backgroundColor={backgroundColor}
-        center
-        layout={CardLayouts.Column}
         border
+        isCentered
+        layout={LayoutTypes.Column}
       />
       <div style={{ marginLeft: "1rem" }}>
         <Heading level={HeadingLevels.Four}>{colorName}</Heading>

package/src/components/StyleGuide/Typography.stories.mdx

@@ -2,11 +2,11 @@ import { Canvas, Meta } from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
 
 import Heading from "../Heading/Heading";
-import { HeadingDisplaySizes, HeadingLevels } from "../Heading/HeadingTypes";
+import { HeadingSizes, HeadingLevels } from "../Heading/HeadingTypes";
 import List from "../List/List";
 import { ListTypes } from "../List/ListTypes";
 import Text from "../Text/Text";
-import { TextDisplaySizes } from "../Text/TextTypes";
+import { TextSizes } from "../Text/TextTypes";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 
@@ -59,9 +59,14 @@ Use the NYPL Design System [Heading](/docs/components-typography-styles-heading-
 
 <DSProvider>
 
-Each heading level has a default style and size, but those styles can be overridden using the `displaySize` prop. The display sizes are separate from semantic elements and may be used to override the default size and styling of the semantic HTML heading elements. For example, the `h1` element has the `Primary` style applied by default, but a new style can be applied through the `displaySize` prop. Any `displaySize` style can be applied to any `Heading` element.
+Each heading level has a default style and size, but those styles can be overridden
+using the `size` prop. The display sizes are separate from semantic elements and
+may be used to override the default size and styling of the semantic HTML heading
+elements. For example, the `h1` element has the `Primary` style applied by default,
+but a new style can be applied through the `size` prop. Any `size` style can be
+applied to any `Heading` element.
 
-<Heading level={HeadingLevels.One} displaySize={HeadingDisplaySizes.Primary}>
+<Heading level={HeadingLevels.One} size={HeadingSizes.Primary}>
   Primary Heading
 </Heading>
 
@@ -71,7 +76,7 @@ Each heading level has a default style and size, but those styles can be overrid
 | **Font Weight** | `300`     | `fontWeight: "heading.primary"` | `font-weight: var(--nypl-fontWeights-heading-primary)` |
 | **Line Height** | `1.1`     | n/a                             | n/a                                                    |
 
-<Heading level={HeadingLevels.One} displaySize={HeadingDisplaySizes.Secondary}>
+<Heading level={HeadingLevels.One} size={HeadingSizes.Secondary}>
   Secondary Heading
 </Heading>
 
@@ -81,7 +86,7 @@ Each heading level has a default style and size, but those styles can be overrid
 | **Font Weight** | `500`     | `fontWeight: "heading.secondary"` | `font-weight: var(--nypl-fontWeights-heading-secondary)` |
 | **Line Height** | `1.25`    | n/a                               | n/a                                                      |
 
-<Heading level={HeadingLevels.One} displaySize={HeadingDisplaySizes.Tertiary}>
+<Heading level={HeadingLevels.One} size={HeadingSizes.Tertiary}>
   Tertiary Heading
 </Heading>
 
@@ -91,7 +96,7 @@ Each heading level has a default style and size, but those styles can be overrid
 | **Font Weight** | `500`      | `fontWeight: "heading.tertiary"` | `font-weight: var(--nypl-fontWeights-heading-tertiary)` |
 | **Line Height** | `1.25`     | n/a                              | n/a                                                     |
 
-<Heading level={HeadingLevels.One} displaySize={HeadingDisplaySizes.Callout}>
+<Heading level={HeadingLevels.One} size={HeadingSizes.Callout}>
   Callout Heading
 </Heading>
 
@@ -122,12 +127,12 @@ Use the NYPL Design System [Text](/docs/components-typography-styles-text--text)
 
 <DSProvider>
 
-The `displaySize` prop can be used to render a specific style from the DS default text styles.
+The `size` prop can be used to render a specific style from the DS default text styles.
 
 - [Typography: Body Styles](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10975%3A52)
 - [Typography: Other Styles](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10975%3A100)
 
-<Text displaySize={TextDisplaySizes.Default}>Default</Text>
+<Text size={TextSizes.Default}>Default</Text>
 
 |                 | Value  | JS Theme Object              | CSS Variable                                        |
 | --------------- | ------ | ---------------------------- | --------------------------------------------------- |
@@ -135,7 +140,7 @@ The `displaySize` prop can be used to render a specific style from the DS defaul
 | **Font Weight** | `300`  | `fontWeight: "text.default"` | `font-weight: var(--nypl-fontWeights-text-default)` |
 | **Line Height** | `1.5`  | `fontWeight: 1.5`            | `font-weight: 1.5`                                  |
 
-<Text displaySize={TextDisplaySizes.Caption}>Caption</Text>
+<Text size={TextSizes.Caption}>Caption</Text>
 
 |                 | Value      | JS Theme Object              | CSS Variable                                        |
 | --------------- | ---------- | ---------------------------- | --------------------------------------------------- |
@@ -143,7 +148,7 @@ The `displaySize` prop can be used to render a specific style from the DS defaul
 | **Font Weight** | `300`      | `fontWeight: "text.caption"` | `font-weight: var(--nypl-fontWeights-text-caption)` |
 | **Line Height** | `1.25`     | `fontWeight: 1.25`           | `font-weight: 1.25`                                 |
 
-<Text displaySize={TextDisplaySizes.Tag}>Tag</Text>
+<Text size={TextSizes.Tag}>Tag</Text>
 
 |                 | Value     | JS Theme Object          | CSS Variable                                    |
 | --------------- | --------- | ------------------------ | ----------------------------------------------- |
@@ -151,7 +156,7 @@ The `displaySize` prop can be used to render a specific style from the DS defaul
 | **Font Weight** | `400`     | `fontWeight: "text.tag"` | `font-weight: var(--nypl-fontWeights-text-tag)` |
 | **Line Height** | `1.5`     | `fontWeight: 1.5`        | `font-weight: 1.5`                              |
 
-<Text displaySize={TextDisplaySizes.Mini}>Mini</Text>
+<Text size={TextSizes.Mini}>Mini</Text>
 
 |                 | Value      | JS Theme Object           | CSS Variable                                     |
 | --------------- | ---------- | ------------------------- | ------------------------------------------------ |