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

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

@@ -1,15 +1,8 @@
-import { ButtonGroup } from "@chakra-ui/react";
 import { Canvas, Meta } from "@storybook/addon-docs";
 
 import Button from "../Button/Button";
-import { ButtonTypes } from "../Button/ButtonTypes";
+import ButtonGroup from "../ButtonGroup/ButtonGroup";
 import Icon from "../Icons/Icon";
-import {
-  IconAlign,
-  IconNames,
-  IconRotationTypes,
-  IconSizes,
-} from "../Icons/IconTypes";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 
@@ -32,9 +25,9 @@ Use the [Button](https://nypl.github.io/nypl-design-system/storybook-static/?pat
 component to render form buttons.
 
 ```jsx
-import { Button, ButtonTypes } from "@nypl/design-system-react-components";
+import { Button } from "@nypl/design-system-react-components";
 
-<Button buttonType={ButtonTypes.Primary}>Button Text</Button>;
+<Button id="btn">Button Text</Button>;
 ```
 
 ## Guidelines
@@ -64,26 +57,24 @@ can be achieved by using the `Form` component to wrap the `Button`s.
 <Canvas>
   <DSProvider>
     <ButtonGroup>
-      <Button buttonType={ButtonTypes.Primary}>Button Text</Button>
-      <Button buttonType={ButtonTypes.Primary}>
-        <Icon
-          name={IconNames.Search}
-          size={IconSizes.Small}
-          align={IconAlign.Left}
-        />
+      <Button id="basic">Button Text</Button>
+      <Button id="btn-search">
+        <Icon name="search" size="small" align="left" />
         Button Text
       </Button>
-      <Button buttonType={ButtonTypes.Primary}>
-        <Icon name={IconNames.Close} size={IconSizes.Medium} />
+      <Button id="only-icon">
+        <Icon name="close" size="medium" />
+      </Button>
+      <Button buttonType="callout" id="donate">
+        Donate
       </Button>
-      <Button buttonType={ButtonTypes.Callout}>Donate</Button>
-      <Button buttonType={ButtonTypes.Secondary}>
+      <Button buttonType="secondary" id="btn-back-to-top">
         Back to Top
         <Icon
-          name={IconNames.Arrow}
-          size={IconSizes.Small}
-          align={IconAlign.Right}
-          iconRotation={IconRotationTypes.Rotate180}
+          name="arrow"
+          size="small"
+          align="right"
+          iconRotation="rotate180"
         />
       </Button>
     </ButtonGroup>
@@ -98,44 +89,56 @@ component.
 <Canvas>
   <DSProvider>
     <ButtonGroup>
-      <Button buttonType={ButtonTypes.Primary}>Primary Button</Button>
-      <Button buttonType={ButtonTypes.Secondary}>Secondary Button</Button>
-      <Button buttonType={ButtonTypes.Callout}>Callout Button</Button>
-      <Button buttonType={ButtonTypes.Pill}>Pill Button</Button>
-      <Button buttonType={ButtonTypes.Link}>Link Button</Button>
-      <Button buttonType={ButtonTypes.NoBrand}>NoBrand Button</Button>
+      <Button buttonType="primary" id="primary">
+        Primary Button
+      </Button>
+      <Button buttonType="secondary" id="secondary">
+        Secondary Button
+      </Button>
+      <Button buttonType="callout" id="callout">
+        Callout Button
+      </Button>
+      <Button buttonType="pill" id="pill">
+        Pill Button
+      </Button>
+      <Button buttonType="link" id="link">
+        Link Button
+      </Button>
+      <Button buttonType="noBrand" id="noBrand">
+        NoBrand Button
+      </Button>
     </ButtonGroup>
   </DSProvider>
 </Canvas>
 
-### ButtonTypes.Primary
+### Primary
 
 - used for actions that move the user forward
 - Visual Treatment: rectangular, filled
 
-### ButtonTypes.Secondary
+### Secondary
 
 - used for actions that move the user back, such as a form cancel button
 - often paired with a Primary button
 - Visual Treatment: rectangular, outlined
 
-### ButtonTypes.Callout
+### Callout
 
 - used for call to actions such as donation buttons
 - Visual Treatment: rectangular, NYPL red background
 
-### ButtonTypes.Pill
+### Pill
 
 - used for equally weighted actions
 - should only be used for buttons that are displayed in a set (i.e. never use for a singleton button)
 - Visual Treatment: rounded, outlined
 
-### ButtonTypes.Link
+### Link
 
 - used for equally weighted actions
 - Visual Treatment: text link with underline
 
-### ButtonTypes.NoBrand
+### NoBrand
 
 - used in cases where there is no brand color
 - Visual Treatment: rectangular, filled with a black background
@@ -144,43 +147,40 @@ component.
 
 - Buttons are blue by default.
 - Buttons that are intended as a call out (i.e. Donation buttons) should be set
-  as `ButtonTypes.Callout`.
-- The "Back to Top" button must be set as `ButtonTypes.Secondary` and must
-  include an up arrow icon.
-- Previous and Next buttons should be set as `ButtonTypes.Secondary` and be
-  wrapped in a `ButtonGroup`.
-- Only use the `ButtonTypes.NoBrand` style where there is no brand color. _This
-  should be rarely used._
+  as `"callout"`.
+- The "Back to Top" button must be set as `"secondary"` and must include an up
+  arrow icon.
+- Previous and Next buttons should be set as `"secondary"` and be wrapped in a
+  `ButtonGroup`.
+- Only use the `"noBrand"` style where there is no brand color. _This should be
+  rarely used._
 
 <Canvas>
   <DSProvider>
     <ButtonGroup>
-      <Button buttonType={ButtonTypes.Callout}>Donate to this library</Button>
-      <Button buttonType={ButtonTypes.Secondary}>
+      <Button buttonType="callout" id="callout2">
+        Donate to this library
+      </Button>
+      <Button buttonType="secondary" id="secondary2">
         Back to Top
         <Icon
-          name={IconNames.Arrow}
-          iconRotation={IconRotationTypes.Rotate180}
-          size={IconSizes.Small}
-          align={IconAlign.Right}
+          align="right"
+          iconRotation="rotate180"
+          name="arrow"
+          size="small"
         />
       </Button>
-      <Button buttonType={ButtonTypes.Secondary}>
-        <Icon
-          name={IconNames.Arrow}
-          iconRotation={IconRotationTypes.Rotate90}
-          align={IconAlign.Left}
-          size={IconSizes.Small}
-        />
+      <Button buttonType="secondary" id="previous">
+        <Icon align="left" iconRotation="rotate90" name="arrow" size="small" />
         Previous
       </Button>
-      <Button buttonType={ButtonTypes.Secondary}>
+      <Button buttonType="secondary" id="next">
         Next
         <Icon
-          name={IconNames.Arrow}
-          iconRotation={IconRotationTypes.Rotate270}
-          align={IconAlign.Right}
-          size={IconSizes.Small}
+          align="right"
+          iconRotation="rotate270"
+          name="arrow"
+          size="small"
         />
       </Button>
     </ButtonGroup>

package/src/components/StyleGuide/ColorCard.tsx

@@ -2,8 +2,6 @@ import * as React from "react";
 
 import Card from "../Card/Card";
 import Heading from "../Heading/Heading";
-import { HeadingLevels } from "../Heading/HeadingTypes";
-import { LayoutTypes } from "../../helpers/enums";
 
 export interface ColorCardProps {
   /** backgroundColor of the color card */
@@ -27,10 +25,10 @@ export default function ColorCard(
         backgroundColor={backgroundColor}
         isBordered
         isCentered
-        layout={LayoutTypes.Column}
+        layout="column"
       />
       <div style={{ marginLeft: "1rem" }}>
-        <Heading level={HeadingLevels.Four}>{colorName}</Heading>
+        <Heading level="four">{colorName}</Heading>
         {/* 
         TODO:
         This code is returning the CSS variable name.  This is not what we 

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

@@ -2,7 +2,6 @@ import { Canvas, Meta } from "@storybook/addon-docs";
 
 import ColorCard from "./ColorCard";
 import Heading from "../Heading/Heading";
-import { HeadingLevels } from "../Heading/HeadingTypes";
 import SimpleGrid from "../Grid/SimpleGrid";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
@@ -115,7 +114,7 @@ Section colors are branding colors only in use at NYPL.
 
 <Canvas>
   <DSProvider>
-    <Heading level={HeadingLevels.Two}>Blogs</Heading>
+    <Heading>Blogs</Heading>
     <p>Blogs is used for the Blogs section.</p>
     <SimpleGrid columns={1}>{getColorCards("blogs")}</SimpleGrid>
   </DSProvider>
@@ -123,7 +122,7 @@ Section colors are branding colors only in use at NYPL.
 
 <Canvas>
   <DSProvider>
-    <Heading level={HeadingLevels.Two}>Books and More</Heading>
+    <Heading>Books and More</Heading>
     <p>
       Books and More is used for the Catalog, Staff Picks, Recommendations, New
       Arrivals, and E-Book Central.
@@ -134,7 +133,7 @@ Section colors are branding colors only in use at NYPL.
 
 <Canvas>
   <DSProvider>
-    <Heading level={HeadingLevels.Two}>Education</Heading>
+    <Heading>Education</Heading>
     <p>
       Education is used for the Education section front and all associated
       sub-sections.
@@ -145,7 +144,7 @@ Section colors are branding colors only in use at NYPL.
 
 <Canvas>
   <DSProvider>
-    <Heading level={HeadingLevels.Two}>Locations</Heading>
+    <Heading>Locations</Heading>
     <p>
       Locations is used for Location Finder and all branch pages with the
       exceptions of some research libraries.
@@ -156,7 +155,7 @@ Section colors are branding colors only in use at NYPL.
 
 <Canvas>
   <DSProvider>
-    <Heading level={HeadingLevels.Two}>Research</Heading>
+    <Heading>Research</Heading>
     <p>Research is used for the Research Catalog and SCC.</p>
     <SimpleGrid columns={1}>{getColorCards("research")}</SimpleGrid>
   </DSProvider>
@@ -164,7 +163,7 @@ Section colors are branding colors only in use at NYPL.
 
 <Canvas>
   <DSProvider>
-    <Heading level={HeadingLevels.Two}>Research Libraries</Heading>
+    <Heading>Research Libraries</Heading>
     <p>Research libraries with specific brand colors to adhere to.</p>
     <SimpleGrid columns={1}>{getColorCards("researchLibraries")}</SimpleGrid>
   </DSProvider>
@@ -172,7 +171,7 @@ Section colors are branding colors only in use at NYPL.
 
 <Canvas>
   <DSProvider>
-    <Heading level={HeadingLevels.Two}>What's On</Heading>
+    <Heading>What's On</Heading>
     <p>What's On is used for Events, Exhibitions &amp; Audio Guides.</p>
     <SimpleGrid columns={1}>{getColorCards("whatsOn")}</SimpleGrid>
   </DSProvider>

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

@@ -126,9 +126,9 @@ That said, if a DS component does need an updated style, first contact the
 Design System and UX teams about this update.
 
 If you receive approval to make a change in a consuming app, then you can add
-styles directly to the `additionalStyles` prop. For example, if the `Heading`
-component needs to render text in Reservoir's "success primary" green color and add
-a bold font weight, then you can do the following:
+styles directly as style props. For example, if the `Heading` component needs to
+render text in Reservoir's "success primary" green color and add a bold font
+weight, then you can do the following:
 
 ```tsx
 const theme = useNYPLTheme();
@@ -138,10 +138,8 @@ return (
   <div>
     <Heading
       level={2}
-      additionalStyles={{
-        color: theme.colors.ui.success.primary,
-        fontWeight: theme.fontWeights.bold,
-      }}
+      color={theme.colors.ui.success.primary}
+      fontWeight={theme.fontWeights.bold}
     >
       Get a Digital Library Card Today in a Few Easy Steps
     </Heading>

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

@@ -2,7 +2,6 @@ import { Meta } from "@storybook/addon-docs";
 
 import Card from "../Card/Card";
 import List from "../List/List";
-import { ListTypes } from "../List/ListTypes";
 import { getCategory } from "../../utils/componentCategories";
 
 <Meta title={getCategory("Forms")} />

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

@@ -2,7 +2,6 @@ import { Stack } from "@chakra-ui/react";
 import { Canvas, Meta } from "@storybook/addon-docs";
 
 import Icon from "../Icons/Icon";
-import { IconColors, IconSizes, IconNames } from "../Icons/IconTypes";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 
@@ -28,117 +27,100 @@ The DS utilizes the `Filled` icons available in the [Material UI Design System](
 
 ## Icon Examples
 
-The graphic of the `Icon` component is handled through the `IconNames` enum. To see all graphic options
-for `Icon`, please refer to the [Icon](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/icon--control-props)
+The graphic of the `Icon` component is handled through the `name` prop. To see
+all graphic options for `Icon`, please refer to the [Icon](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/icon--control-props)
 Storybook page.
 
 <Canvas>
   <DSProvider>
     <Stack spacing="s" direction="row">
-      <Icon
-        decorative
-        size={IconSizes.ExtraExtraExtraLarge}
-        name={IconNames.Check}
-      />
-      <Icon
-        decorative
-        size={IconSizes.ExtraExtraExtraLarge}
-        name={IconNames.Close}
-      />
-      <Icon
-        decorative
-        size={IconSizes.ExtraExtraExtraLarge}
-        name={IconNames.ErrorOutline}
-      />
-      <Icon
-        decorative
-        size={IconSizes.ExtraExtraExtraLarge}
-        name={IconNames.SpeakerNotes}
-      />
+      <Icon decorative size="xxxlarge" name="check" />
+      <Icon decorative size="xxxlarge" name="close" />
+      <Icon decorative size="xxxlarge" name="errorOutline" />
+      <Icon decorative size="xxxlarge" name="speakerNotes" />
     </Stack>
   </DSProvider>
 </Canvas>
 
-| Enum Values for Examples Above |
-| ------------------------------ |
-| `IconNames.Check`              |
-| `IconNames.Close`              |
-| `IconNames.ErrorOutline`       |
-| `IconNames.SpeakerNotes`       |
+| Values for Examples Above |
+| ------------------------- |
+| `check`                   |
+| `close`                   |
+| `errorOutline`            |
+| `speakerNotes`            |
 
 ## Icon Sizes
 
-The size of the `Icon` component is handled through the `IconSizes` enum.
+The size of the `Icon` component is handled through the `size` prop.
 
 <Canvas>
   <DSProvider>
     <Stack spacing="s" direction="row" alignItems="center">
-      <Icon size={IconSizes.Small} name={IconNames.Check} />
-      <Icon size={IconSizes.Medium} name={IconNames.Check} />
-      <Icon size={IconSizes.Large} name={IconNames.Check} />
-      <Icon size={IconSizes.ExtraLarge} name={IconNames.Check} />
-      <Icon size={IconSizes.ExtraExtraLarge} name={IconNames.Check} />
-      <Icon size={IconSizes.ExtraExtraExtraLarge} name={IconNames.Check} />
+      <Icon size="small" name="check" />
+      <Icon size="medium" name="check" />
+      <Icon size="large" name="check" />
+      <Icon size="xlarge" name="check" />
+      <Icon size="xxlarge" name="check" />
+      <Icon size="xxxlarge" name="check" />
     </Stack>
   </DSProvider>
 </Canvas>
 
-| IconSizes Enum Value             | CSS Value         | CSS Variable       |
-| -------------------------------- | ----------------- | ------------------ |
-| `IconSizes.Small`                | `0.875rem` (14px) | n/a                |
-| `IconSizes.Medium`               | `1.125rem` (18px) | n/a                |
-| `IconSizes.Large`                | `1.5rem` (24px)   | `--nypl-space-m`   |
-| `IconSizes.ExtraLarge`           | `2rem` (32px)     | `--nypl-space-l`   |
-| `IconSizes.ExtraExtraLarge`      | `3rem` (48px)     | `--nypl-space-xl`  |
-| `IconSizes.ExtraExtraExtraLarge` | `4rem` (64px)     | `--nypl-space-xxl` |
+| Value      | CSS Value         | CSS Variable       |
+| ---------- | ----------------- | ------------------ |
+| `small`    | `0.875rem` (14px) | n/a                |
+| `medium`   | `1.125rem` (18px) | n/a                |
+| `large`    | `1.5rem` (24px)   | `--nypl-space-m`   |
+| `xlarge`   | `2rem` (32px)     | `--nypl-space-l`   |
+| `xxlarge`  | `3rem` (48px)     | `--nypl-space-xl`  |
+| `xxxlarge` | `4rem` (64px)     | `--nypl-space-xxl` |
 
 ## Icon Colors
 
-The color of the `Icon` component is handled through the `IconColors` enum.
-Icons in NYPL projects should always be rendered with one color.
+The color of the `Icon` component is handled through the `color` prop. Icons in
+NYPL projects should always be rendered with one color.
 
 <Canvas>
   <DSProvider>
     <Stack spacing="s" direction="row">
-      <Icon size={IconSizes.ExtraExtraExtraLarge} name={IconNames.Check} />
-      <Icon
-        name={IconNames.Check}
-        size={IconSizes.ExtraExtraExtraLarge}
-        color={IconColors.BrandPrimary}
-      />
-      <Icon
-        name={IconNames.Check}
-        size={IconSizes.ExtraExtraExtraLarge}
-        color={IconColors.SectionResearchPrimary}
-      />
+      <Icon size="xxxlarge" name="check" />
+      <Icon name="check" size="xxxlarge" color="brand.primary" />
+      <Icon name="check" size="xxxlarge" color="section.research.primary" />
       <Icon
-        name={IconNames.Check}
-        size={IconSizes.ExtraExtraExtraLarge}
-        color={IconColors.SectionResearchLibrarySchwartzman}
+        name="check"
+        size="xxxlarge"
+        color="section.research-library.schwartzman"
       />
       <Icon
-        name={IconNames.Check}
-        size={IconSizes.ExtraExtraExtraLarge}
-        color={IconColors.SectionResearchLibrarySchomburg}
+        name="check"
+        size="xxxlarge"
+        color="section.research-library.schomburg"
       />
     </Stack>
   </DSProvider>
 </Canvas>
 
-| IconColors Enum Value                          | CSS Variable                                         |
-| ---------------------------------------------- | ---------------------------------------------------- |
-| `IconColors.UiBlack`                           | `--nypl-colors-ui-black`                             |
-| `IconColors.UiWhite`                           | `--nypl-colors-ui-white`                             |
-| `IconColors.BrandPrimary`                      | `--nypl-colors-brand-primary`                        |
-| `IconColors.BrandSecondary`                    | `--nypl-colors-brand-secondary`                      |
-| `IconColors.SectionWhatsOnPrimary`             | `--nypl-colors-section-whats-on-primary`             |
-| `IconColors.SectionBooksAndMorePrimary`        | `--nypl-colors-section-books-and-more-primary`       |
-| `IconColors.SectionResearchPrimary`            | `--nypl-colors-section-research-primary`             |
-| `IconColors.SectionResearchSecondary`          | `--nypl-colors-section-research-secondary`           |
-| `IconColors.SectionLocationsPrimary`           | `--nypl-colors-section-locations-primary`            |
-| `IconColors.SectionResearchLibraryLpa`         | `--nypl-colors-section-research-library-lpa`         |
-| `IconColors.SectionResearchLibrarySchomburg`   | `--nypl-colors-section-research-library-schomburg`   |
-| `IconColors.SectionResearchLibrarySchwartzman` | `--nypl-colors-section-research-library-schwartzman` |
+| Value                                  | CSS Variable                                         |
+| -------------------------------------- | ---------------------------------------------------- |
+| `ui.black`                             | `--nypl-colors-ui-black`                             |
+| `ui.white`                             | `--nypl-colors-ui-white`                             |
+| `brand.primary`                        | `--nypl-colors-brand-primary`                        |
+| `brand.secondary`                      | `--nypl-colors-brand-secondary`                      |
+| `section.blogs.primary`                | `--nypl-colors-section-blogs-primary`                |
+| `section.blogs.secondary`              | `--nypl-colors-section-blogs-secondary`              |
+| `section.books-and-more.primary`       | `--nypl-colors-section-books-and-more-primary`       |
+| `section.books-and-more.secondary`     | `--nypl-colors-section-books-and-more-secondary`     |
+| `section.education.primary`            | `--nypl-colors-section-education-primary`            |
+| `section.education.secondary`          | `--nypl-colors-section-education-secondary`          |
+| `section.locations.primary`            | `--nypl-colors-section-locations-primary`            |
+| `section.locations.secondary`          | `--nypl-colors-section-locations-secondary`          |
+| `section.research.primary`             | `--nypl-colors-section-research-primary`             |
+| `section.research.secondary`           | `--nypl-colors-section-research-secondary`           |
+| `section.research-library.lpa`         | `--nypl-colors-section-research-library-lpa`         |
+| `section.research.library.schomburg`   | `--nypl-colors-section-research-library-schomburg`   |
+| `section.research.library.schwartzman` | `--nypl-colors-section-research-library-schwartzman` |
+| `section.whats-on.primary`             | `--nypl-colors-section-whats-on-primary`             |
+| `section.whats-on.secondary`           | `--nypl-colors-section-whats-on-secondary`           |
 
 ## Development Notes
 

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

@@ -2,7 +2,6 @@ import { Meta } from "@storybook/addon-docs";
 
 import Card from "../Card/Card";
 import List from "../List/List";
-import { ListTypes } from "../List/ListTypes";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 

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

@@ -1,11 +1,8 @@
 import { Canvas, Meta } from "@storybook/addon-docs";
 
 import Heading from "../Heading/Heading";
-import { HeadingSizes, HeadingLevels } from "../Heading/HeadingTypes";
 import List from "../List/List";
-import { ListTypes } from "../List/ListTypes";
 import Text from "../Text/Text";
-import { TextSizes } from "../Text/TextTypes";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 
@@ -43,10 +40,10 @@ set the specific `<h>` tag that you require.
 
 <Canvas>
   <DSProvider>
-    <Heading level={HeadingLevels.One}>Heading Level 1</Heading>
-    <Heading level={HeadingLevels.Two}>Heading Level 2</Heading>
-    <Heading level={HeadingLevels.Three}>Heading Level 3</Heading>
-    <Heading level={HeadingLevels.Four}>Heading Level 4</Heading>
+    <Heading level="one">Heading Level 1</Heading>
+    <Heading level="two">Heading Level 2</Heading>
+    <Heading level="three">Heading Level 3</Heading>
+    <Heading level="four">Heading Level 4</Heading>
   </DSProvider>
 </Canvas>
 
@@ -61,7 +58,7 @@ elements. For example, the `h1` element has the `Primary` style applied by defau
 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} size={HeadingSizes.Primary}>
+<Heading level="one" size="primary">
   Primary Heading
 </Heading>
 
@@ -71,7 +68,7 @@ applied to any `Heading` element.
 | **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} size={HeadingSizes.Secondary}>
+<Heading level="one" size="secondary">
   Secondary Heading
 </Heading>
 
@@ -81,7 +78,7 @@ applied to any `Heading` element.
 | **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} size={HeadingSizes.Tertiary}>
+<Heading level="one" size="tertiary">
   Tertiary Heading
 </Heading>
 
@@ -91,7 +88,7 @@ applied to any `Heading` element.
 | **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} size={HeadingSizes.Callout}>
+<Heading level="one" size="callout">
   Callout Heading
 </Heading>
 
@@ -129,7 +126,7 @@ The `size` prop can be used to render a specific style from the DS default text
 - [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 size={TextSizes.Default}>Default</Text>
+<Text size="default">Default</Text>
 
 |                 | Value  | JS Theme Object              | CSS Variable                                        |
 | --------------- | ------ | ---------------------------- | --------------------------------------------------- |
@@ -137,7 +134,7 @@ The `size` prop can be used to render a specific style from the DS default text
 | **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 size={TextSizes.Caption}>Caption</Text>
+<Text size="caption">Caption</Text>
 
 |                 | Value      | JS Theme Object              | CSS Variable                                        |
 | --------------- | ---------- | ---------------------------- | --------------------------------------------------- |
@@ -145,7 +142,7 @@ The `size` prop can be used to render a specific style from the DS default text
 | **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 size={TextSizes.Tag}>Tag</Text>
+<Text size="tag">Tag</Text>
 
 |                 | Value     | JS Theme Object          | CSS Variable                                    |
 | --------------- | --------- | ------------------------ | ----------------------------------------------- |
@@ -153,7 +150,7 @@ The `size` prop can be used to render a specific style from the DS default text
 | **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 size={TextSizes.Mini}>Mini</Text>
+<Text size="mini">Mini</Text>
 
 |                 | Value      | JS Theme Object           | CSS Variable                                     |
 | --------------- | ---------- | ------------------------- | ------------------------------------------------ |
@@ -195,7 +192,7 @@ black on a white background.
 
 <Canvas>
   <DSProvider>
-    <Heading level={HeadingLevels.Three}>Default Heading Color</Heading>
+    <Heading level="three">Default Heading Color</Heading>
     <Text>
       This paragraph shows the default body text color. Curabitur blandit tempus
       porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur
@@ -359,7 +356,7 @@ prepositions do not get capital letters unless they start the title. For example
 
 <Canvas>
   <DSProvider>
-    <List type={ListTypes.Unordered}>
+    <List type="ul">
       <li>Snow White and the Seven Dwarfs</li>
       <li>The Last of the Mohicans</li>
       <li>Spooky Books for Kids: The Ultimate Creepy Guide</li>
@@ -377,7 +374,7 @@ prepositions do not get capital letters unless they start the title. For example
 
 <Canvas>
   <DSProvider>
-    <Heading level={HeadingLevels.Three}>
+    <Heading level="three">
       This is a Long Title to Show What 58 Characters Looks Like
     </Heading>
   </DSProvider>