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

package/src/components/Link/Link.tsx

@@ -1,19 +1,16 @@
 import { Box, chakra, useStyleConfig } from "@chakra-ui/react";
 import * as React from "react";
 
-import { LinkTypes } from "./LinkTypes";
 import Icon from "../Icons/Icon";
-import {
-  IconRotationTypes,
-  IconNames,
-  IconAlign,
-  IconSizes,
-} from "../Icons/IconTypes";
+
+export type LinkTypes =
+  | "action"
+  | "backwards"
+  | "button"
+  | "default"
+  | "external"
+  | "forwards";
 export interface LinkProps {
-  /** Optionally pass in additional Chakra-based styles. */
-  additionalStyles?: { [key: string]: any };
-  /** Additional attributes, such as `rel=nofollow`, to pass to the `<a>` tag. */
-  attributes?: { [key: string]: any };
   /** Any child node passed to the component. */
   children: React.ReactNode;
   /** Additional class name to render in the `Link` component. */
@@ -28,21 +25,25 @@ export interface LinkProps {
 
 /**
  * Renders the `Link` children components with a direction arrow icon based
- * on the `Backwards` or `Forwards` `LinkTypes` type.
+ * on the `"backwards"` or `"forwards"` `linkType` value.
  */
-function getWithDirectionIcon(children, type: LinkTypes, linkId) {
+function getWithDirectionIcon(
+  children: JSX.Element,
+  type: LinkTypes,
+  linkId: string
+) {
   let iconRotation;
   let iconAlign;
   let icon = null;
 
   // An icon needs a position in order for it to be created and
   // rendered in the link.
-  if (type === LinkTypes.Backwards) {
-    iconRotation = IconRotationTypes.Rotate90;
-    iconAlign = IconAlign.Left;
-  } else if (type === LinkTypes.Forwards) {
-    iconRotation = IconRotationTypes.Rotate270;
-    iconAlign = IconAlign.Right;
+  if (type === "backwards") {
+    iconRotation = "rotate90";
+    iconAlign = "left";
+  } else if (type === "forwards") {
+    iconRotation = "rotate270";
+    iconAlign = "right";
   }
 
   const iconId = `${linkId}-icon`;
@@ -53,29 +54,29 @@ function getWithDirectionIcon(children, type: LinkTypes, linkId) {
       className="more-link"
       iconRotation={iconRotation}
       id={iconId}
-      name={IconNames.Arrow}
-      size={IconSizes.Medium}
+      name="arrow"
+      size="medium"
     />
   );
 
   return (
     <>
-      {type === LinkTypes.Backwards && icon}
+      {type === "backwards" && icon}
       {children}
-      {type === LinkTypes.Forwards && icon}
+      {type === "forwards" && icon}
     </>
   );
 }
 
-function getExternalIcon(children, linkId) {
+function getExternalIcon(children: JSX.Element, linkId: string) {
   const iconId = `${linkId}-icon`;
   const icon = (
     <Icon
-      align={IconAlign.Right}
+      align={"right"}
       className="more-link"
       id={iconId}
-      name={IconNames.ActionLaunch}
-      size={IconSizes.Medium}
+      name="actionLaunch"
+      size="medium"
     />
   );
 
@@ -93,25 +94,16 @@ function getExternalIcon(children, linkId) {
  */
 export const Link = chakra(
   React.forwardRef<HTMLAnchorElement, LinkProps>((props, ref: any) => {
-    const {
-      additionalStyles = {},
-      attributes,
-      children,
-      className,
-      href,
-      id,
-      type = LinkTypes.Default,
-      ...rest
-    } = props;
+    const { children, className, href, id, type = "default", ...rest } = props;
 
     // Merge the necessary props alongside any extra props for the
     // anchor element.
     const linkProps = {
       id,
       href,
-      ...attributes,
+      ...rest,
     };
-    // The LinkTypes.Default type.
+    // The "default" type.
     let variant = "link";
 
     if (typeof children === "string" && !href) {
@@ -119,28 +111,27 @@ export const Link = chakra(
     }
 
     if (
-      type === LinkTypes.Action ||
-      type === LinkTypes.Forwards ||
-      type === LinkTypes.Backwards ||
-      type === LinkTypes.External
+      type === "action" ||
+      type === "forwards" ||
+      type === "backwards" ||
+      type === "external"
     ) {
       variant = "moreLink";
-    } else if (type === LinkTypes.Button) {
+    } else if (type === "button") {
       variant = "button";
     }
     const style = useStyleConfig("Link", { variant });
+    const rel = type === "external" ? "nofollow" : null;
+    const target = type === "external" ? "_blank" : null;
     // Render with specific direction arrows if the type is
     // Forwards or Backwards.  Or render with the launch icon
     // if the type is External.  Otherwise, do not add an icon.
     const newChildren =
-      ((type === LinkTypes.Forwards || type === LinkTypes.Backwards) &&
-        getWithDirectionIcon(children, type, id)) ||
-      (type === LinkTypes.External && getExternalIcon(children, id)) ||
+      ((type === "forwards" || type === "backwards") &&
+        getWithDirectionIcon(children as JSX.Element, type, id)) ||
+      (type === "external" && getExternalIcon(children as JSX.Element, id)) ||
       children;
 
-    const rel = type === LinkTypes.External ? "nofollow" : null;
-    const target = type === LinkTypes.External ? "_blank" : null;
-
     if (!href) {
       // React Types error makes this fail:
       // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/32832
@@ -151,7 +142,7 @@ export const Link = chakra(
       const childrenToClone: any = children[0] ? children[0] : children;
       const childProps = childrenToClone.props;
       return (
-        <Box as="span" __css={style} {...rest}>
+        <Box as="span" __css={style}>
           {React.cloneElement(
             childrenToClone,
             {
@@ -161,9 +152,6 @@ export const Link = chakra(
               ref,
               rel,
               target,
-              // Useful if more styles are needed for the custom
-              // anchor element or link component.
-              style: additionalStyles,
             },
             [childrenToClone.props.children]
           )}
@@ -178,8 +166,7 @@ export const Link = chakra(
           rel={rel}
           target={target}
           {...linkProps}
-          __css={{ ...style, ...additionalStyles }}
-          {...rest}
+          __css={style}
         >
           {newChildren}
         </Box>

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

@@ -115,7 +115,7 @@ exports[`Link renders the UI snapshot correctly 4`] = `
     focusable={false}
     id="external-link-icon"
     role="img"
-    title="action_launch icon"
+    title="actionLaunch icon"
     viewBox="0 0 24 24"
   >
     <g
@@ -209,7 +209,6 @@ exports[`Link renders the UI snapshot correctly 7`] = `
     href="#existing-anchor-tag"
     id="anchor-link"
     rel={null}
-    style={Object {}}
     target={null}
   >
     check link

package/src/components/List/List.stories.mdx

@@ -8,16 +8,10 @@ import {
 import { withDesign } from "storybook-addon-designs";
 
 import Heading from "../Heading/Heading";
-import { HeadingLevels } from "../Heading/HeadingTypes";
 import Image from "../Image/Image";
 import Link from "../Link/Link";
-import { LinkTypes } from "../Link/LinkTypes";
 import List from "./List";
-import { ListTypes } from "./ListTypes";
 import { getCategory } from "../../utils/componentCategories";
-import { getStorybookEnumValues } from "../../utils/utils";
-
-export const enumValues = getStorybookEnumValues(ListTypes, "ListTypes");
 
 <Meta
   title={getCategory("List")}
@@ -31,7 +25,6 @@ export const enumValues = getStorybookEnumValues(ListTypes, "ListTypes");
     jest: ["List.test.tsx"],
   }}
   argTypes={{
-    additionalStyles: { control: false },
     children: { table: { disable: true } },
     className: { control: false },
     id: { control: false },
@@ -39,9 +32,7 @@ export const enumValues = getStorybookEnumValues(ListTypes, "ListTypes");
     listItems: { control: false },
     noStyling: { table: { defaultValue: { summary: false } } },
     type: {
-      control: { type: "select" },
-      options: enumValues.options,
-      table: { defaultValue: { summary: "ListTypes.Unordered" } },
+      table: { defaultValue: { summary: "ul" } },
     },
   }}
 />
@@ -51,7 +42,7 @@ export const enumValues = getStorybookEnumValues(ListTypes, "ListTypes");
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.7.0`    |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -154,19 +145,18 @@ export const descriptions = [
   <Story
     name="List with Controls"
     args={{
-      additionalStyles: undefined,
       className: undefined,
       id: "nypl-list",
       inline: false,
       listItems: undefined,
       noStyling: false,
       title: "Middle-Earth Peoples",
-      type: "ListTypes.Unordered",
+      type: "ul",
     }}
   >
     {(args) => (
-      <List {...args} type={enumValues.getValue(args.type)}>
-        {args.type !== "ListTypes.Description"
+      <List {...args}>
+        {args.type !== "dl"
           ? itemGroups.map((item, i) => <li key={i}>{item}</li>)
           : descriptions.map((item, i) => [
               <dt key={`dt_${i}`}>{item.term}</dt>,
@@ -205,12 +195,12 @@ may still use this name. In the Reservoir Design System, we will use the
 - [W3C Using description lists](https://www.w3.org/WAI/WCAG21/Techniques/html/H40.html)
 - [MDN dl: The Description List element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl)
 
-To render a description list, pass in `ListTypes.Description` to the `type` prop.
-The optional `title` prop will now render above the description list element.
-This type of list renders `dt` and `dd` elements.
+To render a description list, pass in `"dl"` to the `type` prop. The optional
+`title` prop will now render above the description list element. This type of
+list renders `dt` and `dd` elements.
 
 ```jsx
-<List type={ListTypes.Description}>
+<List type="dl">
   <dt>Term</dt>
   <dd>Description</dd>
 </List>
@@ -237,7 +227,7 @@ This type of list renders `dt` and `dd` elements.
     }}
   >
     {(args) => (
-      <List {...args} type={ListTypes.Description}>
+      <List {...args} type="dl">
         {descriptions.map((item, i) => [
           <dt key={`dt_${i}`}>{item.term}</dt>,
           <dd key={`dd_${i}`}>{item.description}</dd>,
@@ -271,7 +261,7 @@ An example with HTML elements inside of the `dd` elements.
     }}
   >
     {(args) => (
-      <List {...args} type={ListTypes.Description}>
+      <List {...args} type="dl">
         <dt>Authors</dt>
         <dd>
           <a href="#">Chirwa, Ephraim Wadonda, author</a>
@@ -320,14 +310,13 @@ children elements or the `listItems` prop should be passed but not both.
 
 ### Unordered and Ordered
 
-For lists of type `ListTypes.Unordered` (ul) or `ListTypes.Ordered` (ol), `li`
-list item elements can be passed as children. If that's not possible but the
-data to render is stored as an array of strings, then that data array can be
-passed into `listItems`.
+For lists of type `"ul"` (unorderd) or `"ol"` (ordered), `li` list item elements
+can be passed as children. If that's not possible but the data to render is
+stored as an array of strings, then that data array can be passed into `listItems`.
 
 ```jsx
 <!-- With `li` elements -->
-<List type={ListTypes.Unordered}>
+<List type={ul}>
   <li>Mahi-mahi</li>
   <li>Golden trout</li>
   <li>Rainbowfish</li>
@@ -336,19 +325,19 @@ passed into `listItems`.
 
 <!-- With `itemList` data prop -->
 const fishArray = ["Mahi-mahi", "Golden trout", "Rainbowfish", "Suckerfish"];
-<List type={ListTypes.Unordered} listItems={fishArray} />
+<List type={ul} listItems={fishArray} />
 ```
 
 ### Description
 
-For lists of type `ListTypes.Description` (dl), `dt` and `dd` elements can be
+For lists of type `"dl"` (description), `dt` and `dd` elements can be
 passed as children. If that's not possible but the data to render is stored as
 an array of objects, then that data array can be passed into `listItems`. The
 object must have two keys, `term` and `description`.
 
 ```jsx
 // With `dt`/`dd` elements
-<List type={ListTypes.Description} title="Animal Crossing Fish">
+<List type="dl" title="Animal Crossing Fish">
   <dt>Mahi-mahi</dt>
   <dd>The mahi-mahi is an ocean fish known...</dd>
   <dt>Golden trout</dt>
@@ -381,7 +370,7 @@ const fishDescriptions = [
 <List
   listItems={fishDescriptions}
   title="Animal Crossing Fish"
-  type={ListTypes.Description}
+  type="dl"
 />
 ```
 
@@ -399,6 +388,6 @@ const fishDescriptions = [
       type: { control: false },
     }}
   >
-    {(args) => <List {...args} type={ListTypes.Description} />}
+    {(args) => <List {...args} type="dl" />}
   </Story>
 </Canvas>

package/src/components/List/List.test.tsx

@@ -4,7 +4,6 @@ import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
 import List from "./List";
-import { ListTypes } from "./ListTypes";
 
 const fishArray = ["Mahi-mahi", "Golden trout", "Rainbowfish", "Suckerfish"];
 const fishDescriptions = [
@@ -21,32 +20,32 @@ const fishDescriptions = [
 describe("List Accessibility", () => {
   it("passes axe accessibility test for unordered list", async () => {
     const { container, rerender } = render(
-      <List type={ListTypes.Unordered}>
+      <List type="ul">
         <li>Mahi-mahi</li>
         <li>Golden trout</li>
       </List>
     );
     expect(await axe(container)).toHaveNoViolations();
 
-    rerender(<List type={ListTypes.Unordered} listItems={fishArray} />);
+    rerender(<List type="ul" listItems={fishArray} />);
     expect(await axe(container)).toHaveNoViolations();
   });
   it("passes axe accessibility test for ordered list", async () => {
     const { container, rerender } = render(
-      <List type={ListTypes.Ordered}>
+      <List type="ol">
         <li>Mahi-mahi</li>
         <li>Golden trout</li>
       </List>
     );
     expect(await axe(container)).toHaveNoViolations();
 
-    rerender(<List type={ListTypes.Ordered} listItems={fishArray} />);
+    rerender(<List type="ol" listItems={fishArray} />);
     expect(await axe(container)).toHaveNoViolations();
   });
   it("passes axe accessibility test for description list", async () => {
     const { container } = render(
       <List
-        type={ListTypes.Description}
+        type="dl"
         title="Animal Crossing Fish"
         listItems={fishDescriptions}
       />
@@ -58,7 +57,7 @@ describe("List Accessibility", () => {
 describe("List", () => {
   it("renders unordered list", () => {
     render(
-      <List type={ListTypes.Unordered}>
+      <List type="ul">
         <li>Mahi-mahi</li>
         <li>Golden trout</li>
       </List>
@@ -70,7 +69,7 @@ describe("List", () => {
   });
 
   it("renders unordered list with the `listItems` prop", () => {
-    render(<List type={ListTypes.Unordered} listItems={fishArray} />);
+    render(<List type="ul" listItems={fishArray} />);
 
     expect(screen.getAllByRole("listitem")).toHaveLength(4);
     expect(screen.getByText("Mahi-mahi")).toBeInTheDocument();
@@ -81,7 +80,7 @@ describe("List", () => {
 
   it("renders ordered list", () => {
     render(
-      <List type={ListTypes.Ordered}>
+      <List type="ol">
         <li>Mahi-mahi</li>
         <li>Golden trout</li>
       </List>
@@ -93,7 +92,7 @@ describe("List", () => {
   });
 
   it("renders ordered list with the `listItems` prop", () => {
-    render(<List type={ListTypes.Ordered} listItems={fishArray} />);
+    render(<List type="ol" listItems={fishArray} />);
 
     expect(screen.getAllByRole("listitem")).toHaveLength(4);
     expect(screen.getByText("Mahi-mahi")).toBeInTheDocument();
@@ -104,7 +103,7 @@ describe("List", () => {
 
   it("returns description list", () => {
     render(
-      <List type={ListTypes.Description}>
+      <List type="dl">
         <dt>Mahi-mahi</dt>
         <dd>The mahi-mahi is an ocean fish known...</dd>
       </List>
@@ -119,7 +118,7 @@ describe("List", () => {
   it("returns description list with the `listItems` prop", () => {
     render(
       <List
-        type={ListTypes.Description}
+        type="dl"
         title="Animal Crossing Fish"
         listItems={fishDescriptions}
       />
@@ -130,7 +129,7 @@ describe("List", () => {
   it("consoles a warning when children and the `listItems` prop are both passed", () => {
     const warn = jest.spyOn(console, "warn");
     render(
-      <List type={ListTypes.Ordered} listItems={fishArray}>
+      <List type="ol" listItems={fishArray}>
         <li>Mahi-mahi</li>
         <li>Golden trout</li>
         <li>Rainbowfish</li>
@@ -145,7 +144,7 @@ describe("List", () => {
 
   it("consoles a warning when no children are passed or the `listItems` prop is not passed", () => {
     const warn = jest.spyOn(console, "warn");
-    render(<List type={ListTypes.Ordered}></List>);
+    render(<List type="ol"></List>);
     expect(warn).toHaveBeenCalledWith(
       "NYPL Reservoir List: Pass in either `<li>` children or pass data in " +
         "the `listItems` prop, not both."
@@ -155,7 +154,7 @@ describe("List", () => {
   it("consoles a warning when you pass an ordered or unordered list children that aren't <li>s", () => {
     const warn = jest.spyOn(console, "warn");
     render(
-      <List type={ListTypes.Ordered}>
+      <List type="ol">
         <span>Mahi-mahi</span>
         <span>Golden trout</span>
         <span>Rainbowfish</span>
@@ -169,7 +168,7 @@ describe("List", () => {
   it("consoles a warning when you pass a description list children that aren't `<dt>`s or `<dd>`s", () => {
     const warn = jest.spyOn(console, "warn");
     render(
-      <List type={ListTypes.Description}>
+      <List type="dl">
         <span>Mahi-mahi</span>
         <span>Golden trout</span>
         <span>Rainbowfish</span>
@@ -183,34 +182,21 @@ describe("List", () => {
 
   it("Renders the UI snapshot correctly", () => {
     const unordered = renderer
-      .create(
-        <List id="unordered" type={ListTypes.Unordered} listItems={fishArray} />
-      )
+      .create(<List id="unordered" type="ul" listItems={fishArray} />)
       .toJSON();
     const unorderedNoStyling = renderer
-      .create(
-        <List
-          id="ordered"
-          type={ListTypes.Unordered}
-          listItems={fishArray}
-          noStyling
-        />
-      )
+      .create(<List id="ordered" type="ul" listItems={fishArray} noStyling />)
       .toJSON();
     const ordered = renderer
       .create(
-        <List
-          id="unordered-no-styling"
-          type={ListTypes.Ordered}
-          listItems={fishArray}
-        />
+        <List id="unordered-no-styling" type="ol" listItems={fishArray} />
       )
       .toJSON();
     const orderedNoStyling = renderer
       .create(
         <List
           id="ordered-no-styling"
-          type={ListTypes.Ordered}
+          type="ol"
           listItems={fishArray}
           noStyling
         />
@@ -220,7 +206,7 @@ describe("List", () => {
       .create(
         <List
           id="description"
-          type={ListTypes.Description}
+          type="dl"
           title="Animal Crossing Fish"
           listItems={fishDescriptions}
         />
@@ -230,7 +216,7 @@ describe("List", () => {
       .create(
         <List
           id="chakra"
-          type={ListTypes.Unordered}
+          type="ul"
           listItems={fishArray}
           p="20px"
           color="ui.error.primary"
@@ -239,19 +225,14 @@ describe("List", () => {
       .toJSON();
     const withOtherPropsUnordered = renderer
       .create(
-        <List
-          id="other"
-          type={ListTypes.Unordered}
-          listItems={fishArray}
-          data-testid="other"
-        />
+        <List id="other" type="ul" listItems={fishArray} data-testid="other" />
       )
       .toJSON();
     const withChakraPropsDescription = renderer
       .create(
         <List
           id="chakra"
-          type={ListTypes.Description}
+          type="dl"
           title="Animal Crossing Fish"
           listItems={fishDescriptions}
           p="20px"
@@ -263,7 +244,7 @@ describe("List", () => {
       .create(
         <List
           id="other"
-          type={ListTypes.Description}
+          type="dl"
           title="Animal Crossing Fish"
           listItems={fishDescriptions}
           data-testid="other"