@nypl/design-system-react-components 0.25.0 → 0.25.1

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

@@ -9,10 +9,10 @@ import {
   Link as ReactRouterLink,
 } from "react-router-dom";
 import Icon from "../Icons/Icon";
-import { IconRotationTypes, IconNames } from "../Icons/IconTypes";
+import { IconRotationTypes, IconNames, IconAlign } from "../Icons/IconTypes";
 
 describe("Link Accessibility", () => {
-  it("passes axe accessibility test", async () => {
+  it("passes axe accessibility test for children component", async () => {
     const { container } = render(
       <Link>
         <a href="#test">Test</a>
@@ -20,26 +20,28 @@ describe("Link Accessibility", () => {
     );
     expect(await axe(container)).toHaveNoViolations();
   });
+
+  it("passes axe accessibility test for href prop", async () => {
+    const { container } = render(<Link href="#test">Test</Link>);
+    expect(await axe(container)).toHaveNoViolations();
+  });
 });
 
 describe("Link", () => {
-  it("Can pass in icon, text as child and url as props", () => {
+  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}>
         <Icon
-          name={IconNames.download}
-          blockName="more-link"
-          modifiers={["left"]}
-          decorative={true}
-          iconRotation={IconRotationTypes.rotate0}
+          className="more-link"
+          name={IconNames.Download}
+          align={IconAlign.Left}
+          iconRotation={IconRotationTypes.Rotate0}
         />
         Download
       </Link>
     );
     expect(screen.getByRole("link")).toBeInTheDocument();
-    expect(
-      utils.container.querySelector(".more-link__icon")
-    ).toBeInTheDocument();
+    expect(utils.container.querySelector(".more-link")).toBeInTheDocument();
   });
 
   it("Can pass a link with <a> tag", () => {
@@ -56,20 +58,17 @@ describe("Link", () => {
       <Link type={LinkTypes.Action}>
         <a href="#test2">
           <Icon
-            name={IconNames.download}
-            blockName="more-link"
-            modifiers={["left"]}
-            decorative={true}
-            iconRotation={IconRotationTypes.rotate0}
+            className="more-link"
+            name={IconNames.Download}
+            align={IconAlign.Left}
+            iconRotation={IconRotationTypes.Rotate0}
           />
           Test
         </a>
       </Link>
     );
     expect(screen.getByRole("link")).toBeInTheDocument();
-    expect(
-      utils.container.querySelector(".more-link__icon")
-    ).toBeInTheDocument();
+    expect(utils.container.querySelector(".more-link")).toBeInTheDocument();
   });
 
   it("Generated back link has icon", () => {
@@ -78,13 +77,10 @@ describe("Link", () => {
         content
       </Link>
     );
+    expect(utils.container.querySelector(".more-link")).toBeInTheDocument();
     expect(
-      utils.container.querySelector(".more-link__icon")
-    ).toBeInTheDocument();
-    expect(utils.container.querySelector(".more-link__icon")).toHaveAttribute(
-      "class",
-      "more-link__icon more-link__icon--left more-link__icon--rotate-90 "
-    );
+      utils.container.querySelector(".more-link").getAttribute("class")
+    ).toContain("chakra-icon more-link");
   });
 
   it("Generated forwards link has icon", () => {
@@ -93,13 +89,10 @@ describe("Link", () => {
         content
       </Link>
     );
+    expect(utils.container.querySelector(".more-link")).toBeInTheDocument();
     expect(
-      utils.container.querySelector(".more-link__icon")
-    ).toBeInTheDocument();
-    expect(utils.container.querySelector(".more-link__icon")).toHaveAttribute(
-      "class",
-      "more-link__icon more-link__icon--right more-link__icon--rotate-270 "
-    );
+      utils.container.querySelector(".more-link").getAttribute("class")
+    ).toContain("chakra-icon more-link");
   });
 
   it("Can pass in text as child and url as props", () => {
@@ -113,12 +106,10 @@ describe("Link", () => {
         <Link type={LinkTypes.Action}>
           <ReactRouterLink to="#">
             <Icon
-              name={IconNames.download}
-              blockName="more-link"
-              modifiers={["left"]}
-              decorative={true}
-              iconRotation={IconRotationTypes.rotate0}
-            ></Icon>
+              name={IconNames.Download}
+              align={IconAlign.Left}
+              iconRotation={IconRotationTypes.Rotate0}
+            />
             Download
           </ReactRouterLink>
         </Link>
@@ -138,16 +129,14 @@ describe("Link", () => {
       render(
         <Link>
           <Icon
-            name={IconNames.download}
-            blockName="more-link"
-            modifiers={["left"]}
-            decorative={true}
-            iconRotation={IconRotationTypes.rotate0}
-          ></Icon>
+            name={IconNames.Download}
+            align={IconAlign.Left}
+            iconRotation={IconRotationTypes.Rotate0}
+          />
           <a href="#test">Test</a>
         </Link>
       )
-    ).toThrowError("Please pass only one child into Link");
+    ).toThrowError("Please pass only one child into `Link`.");
   });
 
   // TODO:

package/src/components/Link/Link.tsx

@@ -1,128 +1,142 @@
 import * as React from "react";
-import bem from "../../utils/bem";
+import { Box, useStyleConfig } from "@chakra-ui/react";
+
 import { LinkTypes } from "./LinkTypes";
-import Icon, { IconProps } from "../Icons/Icon";
-import { IconRotationTypes, IconNames } from "../Icons/IconTypes";
+import Icon from "../Icons/Icon";
+import { IconRotationTypes, IconNames, IconAlign } from "../Icons/IconTypes";
+import generateUUID from "../../helpers/generateUUID";
 
 export interface LinkProps {
   /** Additional attributes, such as `rel=nofollow`, to pass to the `<a>` tag. */
   attributes?: { [key: string]: any };
-  /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-  blockName?: string;
-  /** className that appears in addition to "link" */
+  /** Any child node passed to the component. */
+  children: React.ReactNode;
+  /** Additional class name to render in the `Link` component. */
   className?: string;
-  /** Href attribute */
+  /** The `href` attribute for the anchor element. */
   href?: string;
-  /** ID */
+  /** ID used for accessibility purposes. */
   id?: string;
-  /** Controls the link visuals—action, button, or default. */
+  /** Controls the link visuals: action, button, backwards, forwards, or default. */
   type?: LinkTypes;
-  /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-  modifiers?: string[];
-  /** Any child node passed to the component. */
-  children: React.ReactNode;
 }
 
 /**
- * A component that uses an `href` prop or a child anchor element, to create an
- * anchor element with added styling and conventions.
+ * Renders the `Link` children components with a direction arrow icon based
+ * on the `Backwards` or `Forwards` `LinkTypes` type.
  */
-const Link = React.forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
-  const {
-    attributes,
-    blockName,
-    className,
-    href,
-    id,
-    type = LinkTypes.Default,
-    modifiers = [],
-    children,
-  } = props;
-
-  // Merge the necessary props alongside any extra props for the
-  // anchor element.
-  const linkProps = {
-    id,
-    href,
-    ...attributes,
-  };
-  let baseClass = "link";
-
-  let childProps = {};
+function getWithDirectionIcon(children, type: LinkTypes) {
+  let iconRotation;
+  let iconAlign;
+  let icon = null;
 
-  if (typeof children === "string" && !href) {
-    throw new Error("Link needs prop 'href'");
-  }
-
-  if (
-    type === LinkTypes.Action ||
-    type === LinkTypes.Forwards ||
-    type === LinkTypes.Backwards
-  ) {
-    baseClass = "more-link";
-  } else if (type === LinkTypes.Button) {
-    baseClass = "button";
-  }
-
-  let iconRotation, iconPosition, iconLeft, iconRight;
   // An icon needs a position in order for it to be created and
   // rendered in the link.
   if (type === LinkTypes.Backwards) {
-    iconRotation = IconRotationTypes.rotate90;
-    iconPosition = "left";
+    iconRotation = IconRotationTypes.Rotate90;
+    iconAlign = IconAlign.Left;
   } else if (type === LinkTypes.Forwards) {
-    iconRotation = IconRotationTypes.rotate270;
-    iconPosition = "right";
+    iconRotation = IconRotationTypes.Rotate270;
+    iconAlign = IconAlign.Right;
   }
 
-  const navigationIconProps: IconProps = {
-    name: IconNames.arrow,
-    modifiers: [iconPosition, iconRotation, ...modifiers],
-    blockName: "more-link",
-    decorative: true,
-  };
+  icon = (
+    <Icon
+      name={IconNames.Arrow}
+      align={iconAlign}
+      iconRotation={iconRotation}
+      className="more-link"
+    />
+  );
 
-  if (type === LinkTypes.Backwards) {
-    iconLeft = <Icon {...navigationIconProps} />;
-  } else if (type === LinkTypes.Forwards) {
-    iconRight = <Icon {...navigationIconProps} />;
-  }
-  const linkClassName = bem(baseClass, modifiers, blockName, [className]);
+  return (
+    <>
+      {type === LinkTypes.Backwards && icon}
+      {children}
+      {type === LinkTypes.Forwards && icon}
+    </>
+  );
+}
+
+/**
+ * A component that uses an `href` prop or a child anchor element, to create
+ * an anchor element with added styling and conventions.
+ */
+const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
+  (props, ref: any) => {
+    const {
+      attributes,
+      children,
+      className,
+      href,
+      id = generateUUID(),
+      type = LinkTypes.Default,
+    } = props;
 
-  if (!props.href) {
-    // React Types error makes this fail:  https://github.com/DefinitelyTyped/DefinitelyTyped/issues/32832
-    // let children = React.Children.only(props.children);
-    if (React.Children.count(props.children) > 1) {
-      throw new Error("Please pass only one child into Link");
+    // Merge the necessary props alongside any extra props for the
+    // anchor element.
+    const linkProps = {
+      id,
+      href,
+      ...attributes,
+    };
+    // The LinkTypes.Default type.
+    let variant = "link";
+
+    if (typeof children === "string" && !href) {
+      throw new Error("Link needs prop 'href'");
     }
-    const children = props.children[0] ? props.children[0] : props.children;
-    childProps = children.props;
 
-    return React.cloneElement(
-      children,
-      {
-        className: linkClassName,
-        ...linkProps,
-        ...childProps,
-        ref,
-      },
-      [children.props.children]
-    );
-  } else {
-    return React.createElement(
-      "a",
-      {
-        ...linkProps,
-        className: linkClassName,
-        ref,
-      },
-      iconLeft,
-      props.children,
-      iconRight
-    );
-  }
-});
+    if (
+      type === LinkTypes.Action ||
+      type === LinkTypes.Forwards ||
+      type === LinkTypes.Backwards
+    ) {
+      variant = "moreLink";
+    } else if (type === LinkTypes.Button) {
+      variant = "button";
+    }
+    const style = useStyleConfig("Link", { variant });
+    // Render with specific direction arrows only if the type
+    // is Forwards or Backwards.
+    const newChildren =
+      type === LinkTypes.Forwards || type === LinkTypes.Backwards
+        ? getWithDirectionIcon(children, type)
+        : children;
 
-Link.displayName = "Link";
+    if (!href) {
+      // React Types error makes this fail:
+      // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/32832
+      // let children = React.Children.only(children);
+      if (React.Children.count(children) > 1) {
+        throw new Error("Please pass only one child into `Link`.");
+      }
+      const childrenToClone: any = children[0] ? children[0] : children;
+      const childProps = childrenToClone.props;
+      return React.cloneElement(
+        childrenToClone,
+        {
+          className,
+          ...linkProps,
+          ...childProps,
+          ref,
+        },
+        [childrenToClone.props.children]
+      );
+    } else {
+      return (
+        <Box
+          as="a"
+          className={className}
+          ref={ref}
+          {...linkProps}
+          __css={style}
+        >
+          {newChildren}
+        </Box>
+      );
+    }
+  }
+);
 
 export default Link;

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

@@ -9,8 +9,6 @@ import {
 import { withDesign } from "storybook-addon-designs";
 import Card from "../Card/Card";
 import Heading from "../Heading/Heading";
-import Icon from "../Icons/Icon";
-import { IconNames, IconRotationTypes } from "../Icons/IconTypes";
 import Image from "../Image/Image";
 import Link from "../Link/Link";
 import { LinkTypes } from "../Link/LinkTypes";

package/src/components/List/List.stories.tsx

@@ -4,7 +4,7 @@ import CardEdition from "../CardEdition/CardEdition";
 import Heading from "../Heading/Heading";
 import { HeadingLevels } from "../Heading/HeadingTypes";
 import Icon from "../Icons/Icon";
-import { IconNames } from "../Icons/IconTypes";
+import { IconAlign, IconNames, IconSizes } from "../Icons/IconTypes";
 import Image from "../Image/Image";
 import Link from "../Link/Link";
 import { LinkTypes } from "../Link/LinkTypes";
@@ -118,10 +118,10 @@ const exampleCard = (
       </div>
       <div className="book__filetype">
         <Icon
-          name={IconNames.headset}
-          decorative={true}
-          modifiers={["left", "small"]}
-        ></Icon>
+          name={IconNames.Headset}
+          align={IconAlign.Left}
+          size={IconSizes.Small}
+        />
         Audiobook
       </div>
       <div className="book__description">

package/src/components/List/_List.scss

@@ -11,7 +11,7 @@
   margin: unset; // browser automatically applies margin
 
   &__definition-list {
-    border-bottom: 1px solid var(--ui-gray-light);
+    border-bottom: 1px solid var(--ui-gray-light-cool);
 
     h2 {
       border-top: 3px solid var(--section-research-primary);
@@ -26,7 +26,7 @@
       margin: var(--space-xs) 0 0;
 
       dt {
-        border-top: 1px solid var(--ui-gray-light);
+        border-top: 1px solid var(--ui-gray-light-cool);
         font-size: var(--font-size-0);
         font-weight: bold;
         padding-bottom: 0;
@@ -45,7 +45,7 @@
         padding-bottom: var(--space-s);
 
         @include breakpoint($breakpoint-medium) {
-          border-top: 1px solid var(--ui-gray-light);
+          border-top: 1px solid var(--ui-gray-light-cool);
           padding-top: var(--space-s);
         }
       }

package/src/components/Modal/_Modal.scss

@@ -7,7 +7,7 @@
 .modal {
   @include space-inset-s;
 
-  background-color: var(--ui-gray-warm-xlight);
+  background-color: var(--ui-gray-x-light-warm);
   height: 100vh;
   left: 0;
   overflow-y: auto;

package/src/components/Notification/Notification.stories.mdx

@@ -15,6 +15,12 @@ import Notification, {
 } from "./Notification";
 import { NotificationTypes } from "./NotificationTypes";
 import Icon from "../Icons/Icon";
+import {
+  IconSizes,
+  IconColors,
+  IconNames,
+  IconAlign,
+} from "../Icons/IconTypes";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 
@@ -183,7 +189,12 @@ The default icon can be overridden by using the `icon` prop to pass a custom `Ic
     {(args) => (
       <Notification
         icon={
-          <Icon name="check" size="large" color="section-research-secondary" />
+          <Icon
+            align={IconAlign.Left}
+            name={IconNames.Check}
+            size={IconSizes.Large}
+            color={IconColors.SectionResearchSecondary}
+          />
         }
       >
         <NotificationHeading>Custom Icon</NotificationHeading>

package/src/components/Notification/Notification.test.tsx

@@ -86,13 +86,6 @@ describe("Notification: check for Announcement Notification", () => {
       utils.container.querySelector(".notification--announcement")
     ).toBeInTheDocument();
   });
-  it("Renders Icon with proper color", () => {
-    expect(
-      utils.container.querySelector(
-        ".notification-icon.icon--section-research-secondary"
-      )
-    ).toBeInTheDocument();
-  });
 });
 
 describe("Notification: check for Warning Notification", () => {
@@ -114,12 +107,6 @@ describe("Notification: check for Warning Notification", () => {
       utils.container.querySelector(".notification--warning")
     ).toBeInTheDocument();
   });
-
-  it("Renders Icon with proper color", () => {
-    expect(
-      utils.container.querySelector(".notification-icon.icon--brand-primary")
-    ).toBeInTheDocument();
-  });
 });
 
 describe("Notification: check for custom Icon", () => {
@@ -130,9 +117,9 @@ describe("Notification: check for custom Icon", () => {
         id="notificationID"
         icon={
           <Icon
-            name={IconNames.check}
-            size={IconSizes.large}
-            color={IconColors.brand_primary}
+            name={IconNames.Check}
+            size={IconSizes.Large}
+            color={IconColors.BrandPrimary}
             className="custom-icon"
           />
         }

package/src/components/Notification/Notification.tsx

@@ -6,7 +6,7 @@ import { ButtonTypes } from "../Button/ButtonTypes";
 import Heading from "../Heading/Heading";
 import { HeadingLevels } from "../Heading/HeadingTypes";
 import Icon from "../Icons/Icon";
-import { IconColors, IconNames } from "../Icons/IconTypes";
+import { IconColors, IconNames, IconSizes } from "../Icons/IconTypes";
 import { NotificationTypes } from "./NotificationTypes";
 
 export interface NotificationProps {
@@ -95,9 +95,9 @@ export default function Notification(
           <Icon
             decorative={false}
             className="notification-icon"
-            name={IconNames.speaker_notes}
-            color={IconColors.section_research_secondary}
-            modifiers={["large"]}
+            name={IconNames.SpeakerNotes}
+            color={IconColors.SectionResearchSecondary}
+            size={IconSizes.Large}
           />
         );
       case "warning":
@@ -105,9 +105,9 @@ export default function Notification(
           <Icon
             decorative={false}
             className="notification-icon"
-            name={IconNames.error_filled}
-            color={IconColors.brand_primary}
-            modifiers={["large"]}
+            name={IconNames.ErrorFilled}
+            color={IconColors.BrandPrimary}
+            size={IconSizes.Large}
           />
         );
       default:
@@ -190,10 +190,9 @@ export default function Notification(
           onClick={handleClose}
         >
           <Icon
-            modifiers={["medium"]}
             decorative={false}
-            name={IconNames.close}
-            titleText={"Close notification"}
+            name={IconNames.Close}
+            size={IconSizes.Large}
           />
         </Button>
       ) : null}

package/src/components/Notification/_Notification.scss

@@ -45,7 +45,7 @@
   }
 
   &--announcement {
-    background-color: var(--ui-gray-light);
+    background-color: var(--ui-gray-light-cool);
 
     .notification-heading {
       color: var(--section-research-secondary);
@@ -53,7 +53,7 @@
   }
 
   &--warning {
-    background-color: var(--ui-gray-xxlight);
+    background-color: var(--ui-gray-xx-light-cool);
 
     .notification-heading {
       color: var(--brand-primary);
@@ -79,7 +79,7 @@
     }
   }
 
-  .icon {
+  .chakra-icon {
     flex-shrink: 0;
     margin-right: var(--space-s);
   }
@@ -101,7 +101,7 @@
       width: var(--space-m);
     }
 
-    .icon {
+    .chakra-icon {
       height: var(--space-m);
       margin-right: 0;
       width: var(--space-m);