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

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

@@ -3,9 +3,7 @@ import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
-import { ImageRatios, ImageSizes } from "../Image/ImageTypes";
 import StructuredContent from "./StructuredContent";
-import { StructuredContentImagePosition } from "./StructuredContentTypes";
 
 const htmlStringBodyContent =
   "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do" +
@@ -88,11 +86,11 @@ describe("StructuredContent Accessibility", () => {
         headingText="Heading text"
         imageProps={{
           alt: "Image alt text",
-          aspectRatio: ImageRatios.Original,
+          aspectRatio: "original",
           caption: "Image caption",
           credit: "Image credit",
-          position: StructuredContentImagePosition.Left,
-          size: ImageSizes.Medium,
+          position: "left",
+          size: "medium",
           src: "https://placeimg.com/400/300/animals",
         }}
       />
@@ -108,11 +106,11 @@ describe("StructuredContent Accessibility", () => {
         headingText="Heading text"
         imageProps={{
           alt: "Image alt text",
-          aspectRatio: ImageRatios.Original,
+          aspectRatio: "original",
           caption: "Image caption",
           credit: "Image credit",
-          position: StructuredContentImagePosition.Left,
-          size: ImageSizes.Medium,
+          position: "left",
+          size: "medium",
           src: "https://placeimg.com/400/300/animals",
         }}
       />
@@ -141,11 +139,11 @@ describe("StructuredContent", () => {
         headingText="Heading text"
         imageProps={{
           alt: "Image alt text",
-          aspectRatio: ImageRatios.Original,
+          aspectRatio: "original",
           caption: "Image caption",
           credit: "Image credit",
-          position: StructuredContentImagePosition.Left,
-          size: ImageSizes.Medium,
+          position: "left",
+          size: "medium",
           src: "https://placeimg.com/400/300/animals",
         }}
       />
@@ -165,11 +163,11 @@ describe("StructuredContent", () => {
         bodyContent={htmlStringBodyContent}
         imageProps={{
           alt: "Image alt text",
-          aspectRatio: ImageRatios.Original,
+          aspectRatio: "original",
           caption: "Image caption",
           credit: "Image credit",
-          position: StructuredContentImagePosition.Left,
-          size: ImageSizes.Medium,
+          position: "left",
+          size: "medium",
           src: "https://placeimg.com/400/300/animals",
         }}
       />
@@ -208,11 +206,11 @@ describe("StructuredContent", () => {
         calloutText="This is the callout text"
         headingText="Heading text"
         imageProps={{
-          aspectRatio: ImageRatios.Original,
+          aspectRatio: "original",
           caption: "Image caption",
           credit: "Image credit",
-          position: StructuredContentImagePosition.Left,
-          size: ImageSizes.Medium,
+          position: "left",
+          size: "medium",
           src: "https://placeimg.com/400/300/animals",
         }}
       />
@@ -233,11 +231,11 @@ describe("StructuredContent", () => {
         headingText="Heading text"
         imageProps={{
           alt: "Image alt text",
-          aspectRatio: ImageRatios.Original,
+          aspectRatio: "original",
           caption: "Image caption",
           credit: "Image credit",
-          position: StructuredContentImagePosition.Left,
-          size: ImageSizes.Medium,
+          position: "left",
+          size: "medium",
           src: "https://placeimg.com/400/300/animals",
         }}
       />
@@ -255,10 +253,10 @@ describe("StructuredContent", () => {
         headingText="Heading text"
         imageProps={{
           alt: "Image alt text",
-          aspectRatio: ImageRatios.Original,
+          aspectRatio: "original",
           credit: "Image credit",
-          position: StructuredContentImagePosition.Left,
-          size: ImageSizes.Medium,
+          position: "left",
+          size: "medium",
           src: "https://placeimg.com/400/300/animals",
         }}
       />
@@ -277,9 +275,9 @@ describe("StructuredContent", () => {
         headingText="Heading text"
         imageProps={{
           alt: "Image alt text",
-          aspectRatio: ImageRatios.Original,
-          position: StructuredContentImagePosition.Left,
-          size: ImageSizes.Medium,
+          aspectRatio: "original",
+          position: "left",
+          size: "medium",
           src: "https://placeimg.com/400/300/animals",
         }}
       />
@@ -300,11 +298,11 @@ describe("StructuredContent", () => {
           id="withHTMLStringContent"
           imageProps={{
             alt: "Image alt text",
-            aspectRatio: ImageRatios.Original,
+            aspectRatio: "original",
             caption: "Image caption",
             credit: "Image credit",
-            position: StructuredContentImagePosition.Left,
-            size: ImageSizes.Medium,
+            position: "left",
+            size: "medium",
             src: "https://placeimg.com/400/300/animals",
           }}
         />
@@ -319,11 +317,11 @@ describe("StructuredContent", () => {
           id="withHTMLDOMContent"
           imageProps={{
             alt: "Image alt text",
-            aspectRatio: ImageRatios.Original,
+            aspectRatio: "original",
             caption: "Image caption",
             credit: "Image credit",
-            position: StructuredContentImagePosition.Left,
-            size: ImageSizes.Medium,
+            position: "left",
+            size: "medium",
             src: "https://placeimg.com/400/300/animals",
           }}
         />
@@ -348,9 +346,9 @@ describe("StructuredContent", () => {
           id="withImageWithoutCaptionOrCredit"
           imageProps={{
             alt: "Image alt text",
-            aspectRatio: ImageRatios.Original,
-            position: StructuredContentImagePosition.Left,
-            size: ImageSizes.Medium,
+            aspectRatio: "original",
+            position: "left",
+            size: "medium",
             src: "https://placeimg.com/400/300/animals",
           }}
         />
@@ -364,11 +362,11 @@ describe("StructuredContent", () => {
           id="withoutHeading"
           imageProps={{
             alt: "Image alt text",
-            aspectRatio: ImageRatios.Original,
+            aspectRatio: "original",
             caption: "Image caption",
             credit: "Image credit",
-            position: StructuredContentImagePosition.Left,
-            size: ImageSizes.Medium,
+            position: "left",
+            size: "medium",
             src: "https://placeimg.com/400/300/animals",
           }}
         />
@@ -391,11 +389,11 @@ describe("StructuredContent", () => {
           id="withChakraProps"
           imageProps={{
             alt: "Image alt text",
-            aspectRatio: ImageRatios.Original,
+            aspectRatio: "original",
             caption: "Image caption",
             credit: "Image credit",
-            position: StructuredContentImagePosition.Left,
-            size: ImageSizes.Medium,
+            position: "left",
+            size: "medium",
             src: "https://placeimg.com/400/300/animals",
           }}
           bodyContent={htmlStringBodyContent}
@@ -412,11 +410,11 @@ describe("StructuredContent", () => {
           id="withOtherProps"
           imageProps={{
             alt: "Image alt text",
-            aspectRatio: ImageRatios.Original,
+            aspectRatio: "original",
             caption: "Image caption",
             credit: "Image credit",
-            position: StructuredContentImagePosition.Left,
-            size: ImageSizes.Medium,
+            position: "left",
+            size: "medium",
             src: "https://placeimg.com/400/300/animals",
           }}
           bodyContent={htmlStringBodyContent}

package/src/components/StructuredContent/StructuredContent.tsx

@@ -2,14 +2,13 @@ import { Box, chakra, useMultiStyleConfig } from "@chakra-ui/react";
 import * as React from "react";
 
 import Heading from "../Heading/Heading";
-import { HeadingSizes, HeadingLevels } from "../Heading/HeadingTypes";
 import Image, { ComponentImageProps, ImageProps } from "../Image/Image";
-import { ImageRatios, ImageSizes } from "../Image/ImageTypes";
-import { StructuredContentImagePosition } from "./StructuredContentTypes";
+
+export type StructuredContentImagePosition = "left" | "right" | "center";
 
 interface StructuredContentImageProps extends ComponentImageProps {
   /** Optional value to control the positioning of the internal `Image` component.
-   * Defaults to `StructuredContentImagePosition.Left`. */
+   * Defaults to `"left"`. */
   position?: StructuredContentImagePosition;
 }
 
@@ -74,12 +73,12 @@ export const StructuredContent = chakra(
       id,
       imageProps = {
         alt: "",
-        aspectRatio: ImageRatios.Square,
+        aspectRatio: "square",
         caption: undefined,
         component: undefined,
         credit: undefined,
-        position: StructuredContentImagePosition.Left,
-        size: ImageSizes.Medium,
+        position: "left",
+        size: "medium",
         src: "",
       },
       bodyContent,
@@ -111,17 +110,9 @@ export const StructuredContent = chakra(
 
     return (
       <Box id={id} className={className} __css={styles} {...rest}>
-        {headingText && (
-          <Heading id={`${id}-heading`} level={HeadingLevels.Two}>
-            {headingText}
-          </Heading>
-        )}
+        {headingText && <Heading id={`${id}-heading`}>{headingText}</Heading>}
         {calloutText && (
-          <Heading
-            id={`${id}-callout`}
-            level={HeadingLevels.Three}
-            size={HeadingSizes.Callout}
-          >
+          <Heading id={`${id}-callout`} level="three" size="callout">
             {calloutText}
           </Heading>
         )}
@@ -136,7 +127,7 @@ export const StructuredContent = chakra(
             caption={imageProps.caption}
             credit={imageProps.credit}
             size={imageProps.size}
-            src={imageProps.src ? imageProps.src : null}
+            src={imageProps.src ? imageProps.src : undefined}
           />
         )}
         {finalBodyContent}

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

@@ -1,11 +1,9 @@
 import { Canvas, Meta } from "@storybook/addon-docs";
 
-import SearchBar from "../SearchBar/SearchBar";
-import Icon from "../Icons/Icon";
-import { IconNames, IconSizes, IconAlign } from "../Icons/IconTypes";
 import Button from "../Button/Button";
-import { ButtonTypes } from "../Button/ButtonTypes";
 import HelperErrorText from "../HelperErrorText/HelperErrorText";
+import Icon from "../Icons/Icon";
+import SearchBar from "../SearchBar/SearchBar";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 
@@ -37,9 +35,9 @@ components should work appropriately in RTL configurations in any browser.
 
 ## Application Implementation
 
-Components in the DS will support layout and component mirroring, but application 
-directionality should be implemented at the application level. The following are 
-general guidelines on how to set up directionality but implementation will be up 
+Components in the DS will support layout and component mirroring, but application
+directionality should be implemented at the application level. The following are
+general guidelines on how to set up directionality but implementation will be up
 to the application and its architecture.
 
 ### `dir` HTML attribute
@@ -191,26 +189,14 @@ help reduce any visual mistakes.
     <div style={{ display: "flex", flexDirection: "column" }}>
       <div style={{ width: "300px" }}>
         A regular button:
-        <Button buttonType={ButtonTypes.Primary} id="button-ex4" type="submit">
-          <Icon
-            name={IconNames.Search}
-            size={IconSizes.Small}
-            align={IconAlign.Left}
-          />
+        <Button id="button-ex4" type="submit">
+          <Icon name="search" size="small" align="left" />
           Search
         </Button>
         <div dir="rtl">
           An RTL button:
-          <Button
-            buttonType={ButtonTypes.Primary}
-            id="button-ex5"
-            type="submit"
-          >
-            <Icon
-              name={IconNames.Search}
-              size={IconSizes.Small}
-              align={IconAlign.Left}
-            />
+          <Button id="button-ex5" type="submit">
+            <Icon name="search" size="small" align="left" />
             Search
           </Button>
         </div>

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")} />