@nypl/design-system-react-components 0.26.1 → 1.0.0

package/src/components/Image/Image.test.tsx

@@ -4,7 +4,6 @@ import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
 import Image from "./Image";
-import { ImageRatios, ImageSizes, ImageTypes } from "./ImageTypes";
 
 describe("Image Accessibility", () => {
   it("passes axe accessibility for regular img element", async () => {
@@ -76,66 +75,52 @@ describe("Image", () => {
       .create(<Image src="test.png" alt="" caption="Caption" credit="Credit" />)
       .toJSON();
     const sizeExtraExtraSmall = renderer
-      .create(<Image src="test.png" alt="" size={ImageSizes.ExtraExtraSmall} />)
+      .create(<Image src="test.png" alt="" size="xxsmall" />)
       .toJSON();
     const sizeExtraSmall = renderer
-      .create(<Image src="test.png" alt="" size={ImageSizes.ExtraSmall} />)
+      .create(<Image src="test.png" alt="" size="xsmall" />)
       .toJSON();
     const sizeSmall = renderer
-      .create(<Image src="test.png" alt="" size={ImageSizes.Small} />)
+      .create(<Image src="test.png" alt="" size="small" />)
       .toJSON();
     const sizeMedium = renderer
-      .create(<Image src="test.png" alt="" size={ImageSizes.Medium} />)
+      .create(<Image src="test.png" alt="" size="medium" />)
       .toJSON();
     const sizeLarge = renderer
-      .create(<Image src="test.png" alt="" size={ImageSizes.Large} />)
+      .create(<Image src="test.png" alt="" size="large" />)
       .toJSON();
     const ratioFourByThree = renderer
-      .create(
-        <Image src="test.png" alt="" aspectRatio={ImageRatios.FourByThree} />
-      )
+      .create(<Image src="test.png" alt="" aspectRatio="fourByThree" />)
       .toJSON();
     const ratioOneByTwo = renderer
-      .create(
-        <Image src="test.png" alt="" aspectRatio={ImageRatios.OneByTwo} />
-      )
+      .create(<Image src="test.png" alt="" aspectRatio="oneByTwo" />)
       .toJSON();
     const ratioOriginal = renderer
-      .create(
-        <Image src="test.png" alt="" aspectRatio={ImageRatios.Original} />
-      )
+      .create(<Image src="test.png" alt="" aspectRatio="original" />)
       .toJSON();
     const ratioSixteenByNine = renderer
-      .create(
-        <Image src="test.png" alt="" aspectRatio={ImageRatios.SixteenByNine} />
-      )
+      .create(<Image src="test.png" alt="" aspectRatio="sixteenByNine" />)
       .toJSON();
     const ratioSquare = renderer
-      .create(<Image src="test.png" alt="" aspectRatio={ImageRatios.Square} />)
+      .create(<Image src="test.png" alt="" aspectRatio="square" />)
       .toJSON();
     const ratioThreeByFour = renderer
-      .create(
-        <Image src="test.png" alt="" aspectRatio={ImageRatios.ThreeByFour} />
-      )
+      .create(<Image src="test.png" alt="" aspectRatio="threeByFour" />)
       .toJSON();
     const ratioThreeByTwo = renderer
-      .create(
-        <Image src="test.png" alt="" aspectRatio={ImageRatios.ThreeByTwo} />
-      )
+      .create(<Image src="test.png" alt="" aspectRatio="threeByTwo" />)
       .toJSON();
     const ratioTwoByOne = renderer
-      .create(
-        <Image src="test.png" alt="" aspectRatio={ImageRatios.TwoByOne} />
-      )
+      .create(<Image src="test.png" alt="" aspectRatio="twoByOne" />)
       .toJSON();
     const typeCircle = renderer
       .create(
         <Image
           src="test.png"
           alt=""
-          aspectRatio={ImageRatios.Square}
-          size={ImageSizes.Small}
-          imageType={ImageTypes.Circle}
+          aspectRatio="square"
+          size="small"
+          imageType="circle"
         />
       )
       .toJSON();

package/src/components/Image/Image.tsx

@@ -1,8 +1,23 @@
 import { Box, chakra, useMultiStyleConfig } from "@chakra-ui/react";
 import * as React from "react";
 
-import { ImageRatios, ImageSizes, ImageTypes } from "./ImageTypes";
-
+export type ImageRatios =
+  | "fourByThree"
+  | "oneByTwo"
+  | "original"
+  | "sixteenByNine"
+  | "square"
+  | "threeByFour"
+  | "threeByTwo"
+  | "twoByOne";
+export type ImageSizes =
+  | "default"
+  | "xxsmall"
+  | "xsmall"
+  | "small"
+  | "medium"
+  | "large";
+export type ImageTypes = "default" | "circle";
 // Used for components that have an `imageProps` prop.
 export interface ComponentImageProps {
   /** String value used to populate the `alt` attribute of the internal `Image`
@@ -18,7 +33,7 @@ export interface ComponentImageProps {
   /** Optional value to render as a credit for the internal `Image` component. */
   credit?: string;
   /** Optional value to control the size of the internal `Image` component.
-   * Defaults to `ImageSizes.Medium`. */
+   * Defaults to `ImageSizes.Default`. */
   size?: ImageSizes;
   /** Optional value that contains the path to an image. If omitted, the internal
    * DS `Image` component will not render. */
@@ -30,7 +45,8 @@ interface ImageWrapperProps {
   additionalWrapperStyles?: { [key: string]: any };
   /** ClassName you can add in addition to 'image' */
   className?: string;
-  /** Optional value to control the aspect ratio of the cartd image; default value is `square` */
+  /** Optional value to control the aspect ratio of the card image; default
+   * value is `"original"` */
   aspectRatio?: ImageRatios;
   /** Optional value to control the size of the image */
   size?: ImageSizes;
@@ -42,7 +58,7 @@ export interface ImageProps extends ImageWrapperProps {
   /** Optionally pass in additional Chakra-based styles only for the image. */
   additionalImageStyles?: { [key: string]: any };
   /** Alternate text description of the image */
-  alt: string;
+  alt?: string;
   /** Adding will wrap the image in a <figure> */
   caption?: string;
   /** Custom image component */
@@ -52,7 +68,7 @@ export interface ImageProps extends ImageWrapperProps {
   /** Optional value for the image type */
   imageType?: ImageTypes;
   /** The src attribute is required, and contains the path to the image you want to embed. */
-  src: string;
+  src?: string;
 }
 
 const ImageWrapper = chakra(
@@ -61,8 +77,8 @@ const ImageWrapper = chakra(
       additionalWrapperStyles = {},
       className = "",
       children,
-      aspectRatio = ImageRatios.Original,
-      size = ImageSizes.Default,
+      aspectRatio = "original",
+      size = "default",
       ...rest
     } = props;
     const styles = useMultiStyleConfig("CustomImageWrapper", {
@@ -89,17 +105,17 @@ export const Image = chakra((props: ImageProps) => {
     additionalImageStyles = {},
     additionalWrapperStyles = {},
     alt,
-    aspectRatio = ImageRatios.Original,
+    aspectRatio = "original",
     caption,
     className = "",
     component,
     credit,
-    imageType = ImageTypes.Default,
-    size = ImageSizes.Default,
+    imageType = "default",
+    size = "default",
     src,
     ...rest
   } = props;
-  const useImageWrapper = aspectRatio !== ImageRatios.Original;
+  const useImageWrapper = aspectRatio !== "original";
   const styles = useMultiStyleConfig("CustomImage", {
     variant: imageType,
     size,

package/src/components/Link/Link.stories.mdx

@@ -6,21 +6,12 @@ import {
   Meta,
   Story,
 } from "@storybook/addon-docs";
-import {
-  BrowserRouter as Router,
-  Link as ReactRouterLink,
-} from "react-router-dom";
 import { withDesign } from "storybook-addon-designs";
 
 import Link from "./Link";
-import { LinkTypes } from "./LinkTypes";
 import Icon from "../Icons/Icon";
-import { IconAlign, IconNames, IconSizes } from "../Icons/IconTypes";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
-import { getStorybookEnumValues } from "../../utils/utils";
-
-export const enumValues = getStorybookEnumValues(LinkTypes, "LinkTypes");
 
 <Meta
   title={getCategory("Link")}
@@ -34,15 +25,11 @@ export const enumValues = getStorybookEnumValues(LinkTypes, "LinkTypes");
     jest: ["Link.test.tsx"],
   }}
   argTypes={{
-    additionalStyles: { control: false },
-    attributes: { control: false },
     children: { table: { disable: true } },
     key: { table: { disable: true } },
     ref: { table: { disable: true } },
     type: {
-      control: { type: "select" },
-      table: { defaultValue: { summary: "LinkTypes.Default" } },
-      options: enumValues.options,
+      table: { defaultValue: { summary: "default" } },
     },
   }}
 />
@@ -52,7 +39,7 @@ export const enumValues = getStorybookEnumValues(LinkTypes, "LinkTypes");
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -73,22 +60,13 @@ export const enumValues = getStorybookEnumValues(LinkTypes, "LinkTypes");
   <Story
     name="Link with Controls"
     args={{
-      additionalStyles: undefined,
-      attributes: {
-        rel: "nofollow",
-        onClick: (e) => e.preventDefault(),
-      },
       className: "custom-class",
       href: "https://nypl.org",
       id: "nypl-link",
-      type: "LinkTypes.Action",
+      type: "action",
     }}
   >
-    {(args) => (
-      <Link {...args} type={enumValues.getValue(args.type)}>
-        Link
-      </Link>
-    )}
+    {(args) => <Link {...args}>Link</Link>}
   </Story>
 </Canvas>
 
@@ -108,35 +86,27 @@ Resources:
 ## Links With Icons
 
 To render an `Icon` as part of the link, make sure that the `Link` component
-wraps the `Icon`. Use `type={LinkTypes.Action}` to apply appropriate styling to
+wraps the `Icon`. Use `type="action"` to apply appropriate styling to
 links with icons. Icons can be rendered to the left or right of the link text.
 
 <Canvas>
   <Story name="With Icons">
     <VStack spacing="xs" align="flex-start">
-      <Link type={LinkTypes.Action} href="#passed-in-link">
-        <Icon name="headset" align={IconAlign.Left} size={IconSizes.Small} />
+      <Link type="action" href="#passed-in-link">
+        <Icon name="headset" align="left" size="small" />
         Headset Link
       </Link>
-      <Link type={LinkTypes.Action} href="#passed-in-link">
-        <Icon name="clock" align={IconAlign.Left} size={IconSizes.Small} />
+      <Link type="action" href="#passed-in-link">
+        <Icon name="clock" align="left" size="small" />
         Clock Link
       </Link>
-      <Link type={LinkTypes.Action} href="#passed-in-link">
-        <Icon
-          name={IconNames.Check}
-          align={IconAlign.Left}
-          size={IconSizes.Small}
-        />
+      <Link type="action" href="#passed-in-link">
+        <Icon name="check" align="left" size="small" />
         Check Link
       </Link>
-      <Link type={LinkTypes.Action} href="#passed-in-link-right">
+      <Link type="action" href="#passed-in-link-right">
         Check Link Right
-        <Icon
-          name={IconNames.Check}
-          align={IconAlign.Right}
-          size={IconSizes.Small}
-        />
+        <Icon name="check" align="right" size="small" />
       </Link>
     </VStack>
   </Story>
@@ -149,21 +119,21 @@ can use the `href` prop to generate an `<a>` element.
 
 ```jsx
 // Existing anchor element
-<Link type={LinkTypes.Action}>
+<Link type="action">
   <a href="#existing-anchor-tag">link</a>
 </Link>
 
 // Also works with an icon component. Make sure to wrap the icon and anchor
 // in a single element for this pattern.
-<Link type={LinkTypes.Action}>
+<Link type="action">
   <>
-    <Icon name={IconNames.Check} align={IconAlign.Left} size={IconSizes.Small} />
+    <Icon name="check" align="left" size="small" />
     <a href="#existing-anchor-tag">check link</a>
   </>
 </Link>
 
 // Otherwise, the `href` prop will generate an `<a>` tag.
-<Link type={LinkTypes.Action} href="#passed-in-link">
+<Link type="action" href="#passed-in-link">
   link
 </Link>
 ```
@@ -172,22 +142,18 @@ can use the `href` prop to generate an `<a>` element.
   <Story name="Anchor Element Rendering">
     <>
       This is a{" "}
-      <Link type={LinkTypes.Action}>
+      <Link type="action">
         <a href="#existing-anchor-tag">link</a>
       </Link>{" "}
       with the &lt;a&gt; element as a child of the `Link` component. This is a{" "}
-      <Link type={LinkTypes.Action} href="#passed-in-link">
+      <Link type="action" href="#passed-in-link">
         link
       </Link>{" "}
       where the `Link` component uses the `href` prop and has a string-only
       child. Finally, this is a{" "}
-      <Link type={LinkTypes.Action}>
+      <Link type="action">
         <>
-          <Icon
-            name={IconNames.Check}
-            align={IconAlign.Left}
-            size={IconSizes.Small}
-          />
+          <Icon name="check" align="left" size="small" />
           <a href="#existing-anchor-tag">link</a>
         </>
       </Link>{" "}
@@ -198,23 +164,6 @@ can use the `href` prop to generate an `<a>` element.
 
 ## Link with Routers
 
-<Canvas>
-  <Story name="Link with Routers">
-    <div>With React Router</div>
-    <Router>
-      <Link type={LinkTypes.Action}>
-        <ReactRouterLink to="#">Next Page</ReactRouterLink>
-      </Link>
-    </Router>
-    <br />
-    <br />
-    <div>With NextJS</div>
-    <NextJsLink href="#" passHref>
-      <Link type={LinkTypes.Action}>Next Page</Link>
-    </NextJsLink>
-  </Story>
-</Canvas>
-
 ### React Router
 
 The Design System's `Link` component should wrap around `react-router`'s own
@@ -228,9 +177,9 @@ import {
   BrowserRouter as Router,
   Link as ReactRouterLink,
 } from "react-router-dom";
-import { Link, LinkTypes } from "@nypl/design-system-react-components";
+import { Link } from "@nypl/design-system-react-components";
 
-<Link type={LinkTypes.Action}>
+<Link type="action">
   <ReactRouterLink to="#">Next Page</ReactRouterLink>
 </Link>;
 
@@ -238,12 +187,9 @@ import { Link, LinkTypes } from "@nypl/design-system-react-components";
 // is not renamed but the DS's `Link` component is renamed
 // to `DSLink`.
 import { BrowserRouter, Link } from "react-router-dom";
-import {
-  Link as DSLink,
-  LinkTypes,
-} from "@nypl/design-system-react-components";
+import { Link as DSLink } from "@nypl/design-system-react-components";
 
-<DSLink type={LinkTypes.Action}>
+<DSLink type="action">
   <Link to="#">Next Page</Link>
 </DSLink>;
 
@@ -253,21 +199,11 @@ import {
 import { BrowserRouter, Link } from "react-router-dom";
 import DS from "@nypl/design-system-react-components";
 
-<DS.Link type={DS.LinkTypes.Action}>
+<DS.Link type="action">
   <Link to="#">Next Page</Link>
 </DS.Link>;
 ```
 
-<Canvas>
-  <DSProvider>
-    <Router>
-      <Link type={LinkTypes.Action}>
-        <ReactRouterLink to="#">Next Page</ReactRouterLink>
-      </Link>
-    </Router>
-  </DSProvider>
-</Canvas>
-
 ### NextJS
 
 NextJS's `Link` component should wrap the Design System's `Link` component.
@@ -277,7 +213,7 @@ These props, along with an implicit `ref` from NextJS and the Design System's
 pages in a NextJS app.
 
 ```jsx
-import { Link, LinkTypes } from "@nypl/design-system-react-components";
+import { Link } from "@nypl/design-system-react-components";
 
 /**
  * This is just an example wrapper that works similarly to NextJS' `Link`
@@ -293,21 +229,21 @@ export const NextJsLink = (props: HTMLAnchorElement) =>
 
 // Note that NextJS' `href` and `passHref` props are required.
 <NextJsLink href="#" passHref>
-  <Link type={LinkTypes.Action}>Next Page</Link>
+  <Link type="action">Next Page</Link>
 </NextJsLink>;
 ```
 
 export const NextJsLink = (props) =>
   React.cloneElement(
     props.children,
-    { ...props },
+    { href: props.href },
     props.children.props.children
   );
 
 <Canvas>
   <DSProvider>
     <NextJsLink href="#" passHref>
-      <Link type={LinkTypes.Action}>Next Page</Link>
+      <Link type="action">Next Page</Link>
     </NextJsLink>
   </DSProvider>
 </Canvas>

package/src/components/Link/Link.test.tsx

@@ -1,21 +1,10 @@
 import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
 import * as React from "react";
-import {
-  BrowserRouter as Router,
-  Link as ReactRouterLink,
-} from "react-router-dom";
 import renderer from "react-test-renderer";
 
 import Link from "./Link";
-import { LinkTypes } from "./LinkTypes";
 import Icon from "../Icons/Icon";
-import {
-  IconAlign,
-  IconNames,
-  IconRotationTypes,
-  IconSizes,
-} from "../Icons/IconTypes";
 
 describe("Link Accessibility", () => {
   it("passes axe accessibility test for children component", async () => {
@@ -36,12 +25,12 @@ describe("Link Accessibility", () => {
 describe("Link", () => {
   it("Can pass in an icon and text as children and url as prop", () => {
     const utils = render(
-      <Link href="#passed-in-link" type={LinkTypes.Action}>
+      <Link href="#passed-in-link" type="action">
         <Icon
           className="more-link"
-          name={IconNames.Download}
-          align={IconAlign.Left}
-          iconRotation={IconRotationTypes.Rotate0}
+          name="download"
+          align="left"
+          iconRotation="rotate0"
         />
         Download
       </Link>
@@ -61,13 +50,13 @@ describe("Link", () => {
 
   it("Can pass a link with <a> tag and an icon", () => {
     const utils = render(
-      <Link type={LinkTypes.Action}>
+      <Link type="action">
         <a href="#test2">
           <Icon
             className="more-link"
-            name={IconNames.Download}
-            align={IconAlign.Left}
-            iconRotation={IconRotationTypes.Rotate0}
+            name="download"
+            align="left"
+            iconRotation="rotate0"
           />
           Test
         </a>
@@ -79,25 +68,25 @@ describe("Link", () => {
 
   it("Generated back link has icon", () => {
     const utils = render(
-      <Link href="#passed-in-link" type={LinkTypes.Backwards}>
+      <Link href="#passed-in-link" type="backwards">
         content
       </Link>
     );
     expect(utils.container.querySelector(".more-link")).toBeInTheDocument();
     expect(
-      utils.container.querySelector(".more-link").getAttribute("class")
+      utils.container.querySelector(".more-link")?.getAttribute("class")
     ).toContain("chakra-icon more-link");
   });
 
   it("Generated forwards link has icon", () => {
     const utils = render(
-      <Link href="#passed-in-link" type={LinkTypes.Forwards}>
+      <Link href="#passed-in-link" type="forwards">
         content
       </Link>
     );
     expect(utils.container.querySelector(".more-link")).toBeInTheDocument();
     expect(
-      utils.container.querySelector(".more-link").getAttribute("class")
+      utils.container.querySelector(".more-link")?.getAttribute("class")
     ).toContain("chakra-icon more-link");
   });
 
@@ -106,24 +95,6 @@ describe("Link", () => {
     expect(screen.getByRole("link")).toBeInTheDocument();
   });
 
-  it("Can pass in a ReactRouter Link", () => {
-    render(
-      <Router>
-        <Link type={LinkTypes.Action}>
-          <ReactRouterLink to="#">
-            <Icon
-              name={IconNames.Download}
-              align={IconAlign.Left}
-              iconRotation={IconRotationTypes.Rotate0}
-            />
-            Download
-          </ReactRouterLink>
-        </Link>
-      </Router>
-    );
-    expect(screen.getByRole("link")).toBeInTheDocument();
-  });
-
   it("throws an error if text is passed but no url is passed", () => {
     expect(() => render(<Link>Test</Link>)).toThrowError(
       "`Link` needs the `href` prop."
@@ -134,11 +105,7 @@ describe("Link", () => {
     expect(() =>
       render(
         <Link>
-          <Icon
-            name={IconNames.Download}
-            align={IconAlign.Left}
-            iconRotation={IconRotationTypes.Rotate0}
-          />
+          <Icon name="download" align="left" iconRotation="rotate0" />
           <a href="#test">Test</a>
         </Link>
       )
@@ -148,60 +115,48 @@ describe("Link", () => {
   it("renders the UI snapshot correctly", () => {
     const standard = renderer
       .create(
-        <Link href="#passed-in-link" id="standard-link" type={LinkTypes.Action}>
+        <Link href="#passed-in-link" id="standard-link" type="action">
           Standard
         </Link>
       )
       .toJSON();
     const typeForwards = renderer
       .create(
-        <Link
-          href="#passed-in-link"
-          id="forwards-link"
-          type={LinkTypes.Forwards}
-        >
+        <Link href="#passed-in-link" id="forwards-link" type="forwards">
           Forwards
         </Link>
       )
       .toJSON();
     const typeBackwards = renderer
       .create(
-        <Link
-          href="#passed-in-link"
-          id="backwards-link"
-          type={LinkTypes.Backwards}
-        >
+        <Link href="#passed-in-link" id="backwards-link" type="backwards">
           Backwards
         </Link>
       )
       .toJSON();
     const typeExternal = renderer
       .create(
-        <Link
-          href="#passed-in-link"
-          id="external-link"
-          type={LinkTypes.External}
-        >
+        <Link href="#passed-in-link" id="external-link" type="external">
           External
         </Link>
       )
       .toJSON();
     const typeButton = renderer
       .create(
-        <Link href="#passed-in-link" id="button-link" type={LinkTypes.Button}>
+        <Link href="#passed-in-link" id="button-link" type="button">
           Button
         </Link>
       )
       .toJSON();
     const withIconChild = renderer
       .create(
-        <Link href="#passed-in-link" id="icon-link" type={LinkTypes.Action}>
+        <Link href="#passed-in-link" id="icon-link" type="action">
           <Icon
-            align={IconAlign.Left}
+            align="left"
             className="more-link"
-            iconRotation={IconRotationTypes.Rotate0}
+            iconRotation="rotate0"
             id="link-icon"
-            name={IconNames.Download}
+            name="download"
           />
           Download
         </Link>
@@ -209,21 +164,16 @@ describe("Link", () => {
       .toJSON();
     const withAchorChild = renderer
       .create(
-        <Link id="anchor-link" type={LinkTypes.Action}>
+        <Link id="anchor-link" type="action">
           <a href="#existing-anchor-tag">check link</a>
         </Link>
       )
       .toJSON();
     const withAchorChildAndIcon = renderer
       .create(
-        <Link id="anchor-icon-link" type={LinkTypes.Action}>
+        <Link id="anchor-icon-link" type="action">
           <>
-            <Icon
-              align={IconAlign.Left}
-              id="link-icon"
-              name={IconNames.Check}
-              size={IconSizes.Small}
-            />
+            <Icon align="left" id="link-icon" name="check" size="small" />
             <a href="#existing-anchor-tag">check link</a>
           </>
         </Link>