@nypl/design-system-react-components 0.25.7 → 0.25.8

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
+import renderer from "react-test-renderer";
 
 import Link from "./Link";
 import { LinkTypes } from "./LinkTypes";
@@ -139,6 +140,76 @@ describe("Link", () => {
     ).toThrowError("Please pass only one child into `Link`.");
   });
 
+  it("renders the UI snapshot correctly", () => {
+    const standard = renderer
+      .create(
+        <Link href="#passed-in-link" id="standard-link" type={LinkTypes.Action}>
+          Standard
+        </Link>
+      )
+      .toJSON();
+    const typeForwards = renderer
+      .create(
+        <Link
+          href="#passed-in-link"
+          id="forwards-link"
+          type={LinkTypes.Forwards}
+        >
+          Forwards
+        </Link>
+      )
+      .toJSON();
+    const typeBackwards = renderer
+      .create(
+        <Link
+          href="#passed-in-link"
+          id="backwards-link"
+          type={LinkTypes.Backwards}
+        >
+          Backwards
+        </Link>
+      )
+      .toJSON();
+    const typeExternal = renderer
+      .create(
+        <Link
+          href="#passed-in-link"
+          id="external-link"
+          type={LinkTypes.External}
+        >
+          External
+        </Link>
+      )
+      .toJSON();
+    const typeButton = renderer
+      .create(
+        <Link href="#passed-in-link" id="button-link" type={LinkTypes.Button}>
+          Button
+        </Link>
+      )
+      .toJSON();
+    const withIconChild = renderer
+      .create(
+        <Link href="#passed-in-link" id="icon-link" type={LinkTypes.Action}>
+          <Icon
+            align={IconAlign.Left}
+            className="more-link"
+            iconRotation={IconRotationTypes.Rotate0}
+            id="link-icon"
+            name={IconNames.Download}
+          />
+          Download
+        </Link>
+      )
+      .toJSON();
+    expect(standard).toMatchSnapshot();
+    expect(typeForwards).toMatchSnapshot();
+    expect(typeBackwards).toMatchSnapshot();
+    expect(typeExternal).toMatchSnapshot();
+    expect(typeButton).toMatchSnapshot();
+    expect(withIconChild).toMatchSnapshot();
+  });
+
   // TODO:
   // it("Passes the ref to the input element", () => {
   //   const ref = React.createRef<HTMLAnchorElement>();

package/src/components/Link/Link.tsx

@@ -27,7 +27,7 @@ export interface LinkProps {
  * Renders the `Link` children components with a direction arrow icon based
  * on the `Backwards` or `Forwards` `LinkTypes` type.
  */
-function getWithDirectionIcon(children, type: LinkTypes) {
+function getWithDirectionIcon(children, type: LinkTypes, linkId) {
   let iconRotation;
   let iconAlign;
   let icon = null;
@@ -42,12 +42,15 @@ function getWithDirectionIcon(children, type: LinkTypes) {
     iconAlign = IconAlign.Right;
   }
 
+  const iconId = `${linkId}-icon`;
+
   icon = (
     <Icon
-      name={IconNames.Arrow}
       align={iconAlign}
-      iconRotation={iconRotation}
       className="more-link"
+      iconRotation={iconRotation}
+      id={iconId}
+      name={IconNames.Arrow}
     />
   );
 
@@ -60,6 +63,25 @@ function getWithDirectionIcon(children, type: LinkTypes) {
   );
 }
 
+function getExternalIcon(children, linkId) {
+  const iconId = `${linkId}-icon`;
+  const icon = (
+    <Icon
+      align={IconAlign.Right}
+      className="more-link"
+      id={iconId}
+      name={IconNames.ActionLaunch}
+    />
+  );
+
+  return (
+    <>
+      {children}
+      {icon}
+    </>
+  );
+}
+
 /**
  * A component that uses an `href` prop or a child anchor element, to create
  * an anchor element with added styling and conventions.
@@ -93,19 +115,25 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
     if (
       type === LinkTypes.Action ||
       type === LinkTypes.Forwards ||
-      type === LinkTypes.Backwards
+      type === LinkTypes.Backwards ||
+      type === LinkTypes.External
     ) {
       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.
+    // 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)
-        : children;
+      ((type === LinkTypes.Forwards || type === LinkTypes.Backwards) &&
+        getWithDirectionIcon(children, type, id)) ||
+      (type === LinkTypes.External && getExternalIcon(children, id)) ||
+      children;
+
+    const rel = type === LinkTypes.External ? "nofollow" : null;
+    const target = type === LinkTypes.External ? "_blank" : null;
 
     if (!href) {
       // React Types error makes this fail:
@@ -123,6 +151,8 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
           ...linkProps,
           ...childProps,
           ref,
+          rel,
+          target,
         },
         [childrenToClone.props.children]
       );
@@ -132,6 +162,8 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
           as="a"
           className={className}
           ref={ref}
+          rel={rel}
+          target={target}
           {...linkProps}
           __css={{ ...style, ...additionalStyles }}
         >

package/src/components/Link/LinkTypes.tsx

@@ -3,5 +3,6 @@ export enum LinkTypes {
   Backwards = "backwards",
   Button = "button",
   Default = "default",
+  External = "external",
   Forwards = "forwards",
 }

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

@@ -0,0 +1,201 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Link renders the UI snapshot correctly 1`] = `
+<a
+  className="css-0"
+  href="#passed-in-link"
+  id="standard-link"
+  rel={null}
+  target={null}
+>
+  Standard
+</a>
+`;
+
+exports[`Link renders the UI snapshot correctly 2`] = `
+<a
+  className="css-0"
+  href="#passed-in-link"
+  id="forwards-link"
+  rel={null}
+  target={null}
+>
+  Forwards
+  <svg
+    aria-hidden={true}
+    className="chakra-icon more-link css-onkibi"
+    focusable={false}
+    id="forwards-link-icon"
+    role="img"
+    title="arrow icon"
+    viewBox="0 0 24 24"
+  >
+    <g
+      stroke="currentColor"
+      strokeWidth="1.5"
+    >
+      <path
+        d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+        fill="none"
+        strokeLinecap="round"
+      />
+      <path
+        d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+        fill="currentColor"
+        strokeLinecap="round"
+      />
+      <circle
+        cx="12"
+        cy="12"
+        fill="none"
+        r="11.25"
+        strokeMiterlimit="10"
+      />
+    </g>
+  </svg>
+</a>
+`;
+
+exports[`Link renders the UI snapshot correctly 3`] = `
+<a
+  className="css-0"
+  href="#passed-in-link"
+  id="backwards-link"
+  rel={null}
+  target={null}
+>
+  <svg
+    aria-hidden={true}
+    className="chakra-icon more-link css-onkibi"
+    focusable={false}
+    id="backwards-link-icon"
+    role="img"
+    title="arrow icon"
+    viewBox="0 0 24 24"
+  >
+    <g
+      stroke="currentColor"
+      strokeWidth="1.5"
+    >
+      <path
+        d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+        fill="none"
+        strokeLinecap="round"
+      />
+      <path
+        d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+        fill="currentColor"
+        strokeLinecap="round"
+      />
+      <circle
+        cx="12"
+        cy="12"
+        fill="none"
+        r="11.25"
+        strokeMiterlimit="10"
+      />
+    </g>
+  </svg>
+  Backwards
+</a>
+`;
+
+exports[`Link renders the UI snapshot correctly 4`] = `
+<a
+  className="css-0"
+  href="#passed-in-link"
+  id="external-link"
+  rel="nofollow"
+  target="_blank"
+>
+  External
+  <svg
+    aria-hidden={true}
+    className="chakra-icon more-link css-onkibi"
+    focusable={false}
+    id="external-link-icon"
+    role="img"
+    title="action_launch icon"
+    viewBox="0 0 24 24"
+  >
+    <g
+      stroke="currentColor"
+      strokeWidth="1.5"
+    >
+      <path
+        d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+        fill="none"
+        strokeLinecap="round"
+      />
+      <path
+        d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+        fill="currentColor"
+        strokeLinecap="round"
+      />
+      <circle
+        cx="12"
+        cy="12"
+        fill="none"
+        r="11.25"
+        strokeMiterlimit="10"
+      />
+    </g>
+  </svg>
+</a>
+`;
+
+exports[`Link renders the UI snapshot correctly 5`] = `
+<a
+  className="css-0"
+  href="#passed-in-link"
+  id="button-link"
+  rel={null}
+  target={null}
+>
+  Button
+</a>
+`;
+
+exports[`Link renders the UI snapshot correctly 6`] = `
+<a
+  className="css-0"
+  href="#passed-in-link"
+  id="icon-link"
+  rel={null}
+  target={null}
+>
+  <svg
+    aria-hidden={true}
+    className="chakra-icon more-link css-onkibi"
+    focusable={false}
+    id="link-icon"
+    role="img"
+    title="download icon"
+    viewBox="0 0 24 24"
+  >
+    <g
+      stroke="currentColor"
+      strokeWidth="1.5"
+    >
+      <path
+        d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+        fill="none"
+        strokeLinecap="round"
+      />
+      <path
+        d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+        fill="currentColor"
+        strokeLinecap="round"
+      />
+      <circle
+        cx="12"
+        cy="12"
+        fill="none"
+        r="11.25"
+        strokeMiterlimit="10"
+      />
+    </g>
+  </svg>
+  Download
+</a>
+`;

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

@@ -27,8 +27,7 @@ import DSProvider from "../../theme/provider";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/?node-id=10734%3A812",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/?node-id=10734%3A812",
     },
     jest: ["Notification.test.tsx"],
   }}
@@ -39,7 +38,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.23.2`   |
-| Latest            | `0.25.4`   |
+| Latest            | `0.25.8`   |
 
 <Description of={Notification} />
 
@@ -67,6 +66,7 @@ within a parent element.
           nisi erat porttitor ligula.
         </>
       ),
+      showIcon: true,
     }}
   >
     {(args) => (
@@ -194,6 +194,39 @@ within a parent element.
   </DSProvider>
 </Canvas>
 
+### Without Icon
+
+The `Notification` icon can be hidden with the `showIcon` prop set to `false`.
+
+<Canvas>
+  <DSProvider>
+    <Notification
+      notificationHeading="Standard Notification without Icon"
+      notificationContent={
+        <>
+          Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus
+          mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum
+          at eros. Cum sociis natoque penatibus et magnis dis parturient montes,
+          nascetur ridiculus mus.
+        </>
+      }
+      showIcon={false}
+    />
+    <Notification
+      notificationContent={
+        <>
+          This is an Standard Notification without a heading or icon. Cras
+          mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis
+          interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at
+          eros. Cum sociis natoque penatibus et magnis dis parturient montes,
+          nascetur ridiculus mus.
+        </>
+      }
+      showIcon={false}
+    />
+  </DSProvider>
+</Canvas>
+
 ## Custom Icon
 
 The default icon can be overridden by using the `icon` prop to pass a custom `Icon` component.

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

@@ -13,8 +13,8 @@ describe("Notification Accessibility", () => {
     const { container } = render(
       <Notification
         id="notificationID"
-        notificationHeading="Notification Heading"
         notificationContent={<>Notification content.</>}
+        notificationHeading="Notification Heading"
       />
     );
     expect(await axe(container)).toHaveNoViolations();
@@ -29,6 +29,18 @@ describe("Notification Accessibility", () => {
     );
     expect(await axe(container)).toHaveNoViolations();
   });
+
+  it("passes axe accessibility test without an icon", async () => {
+    const { container } = render(
+      <Notification
+        id="notificationID"
+        notificationContent={<>Notification content.</>}
+        notificationHeading="Notification Heading"
+        showIcon={false}
+      />
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
 });
 
 describe("Notification", () => {
@@ -37,8 +49,8 @@ describe("Notification", () => {
     utils = render(
       <Notification
         id="notificationID"
-        notificationHeading="Notification Heading"
         notificationContent={<>Notification content.</>}
+        notificationHeading="Notification Heading"
       />
     );
   });
@@ -51,7 +63,20 @@ describe("Notification", () => {
     expect(screen.getByText("Notification content.")).toBeInTheDocument();
   });
 
-  it("renders without Icon", () => {
+  it("renders with an Icon", () => {
+    // The Icon's role is "img".
+    expect(screen.queryByRole("img")).toBeInTheDocument();
+  });
+
+  it("does not render an Icon", () => {
+    utils.rerender(
+      <Notification
+        id="notificationID"
+        notificationContent={<>Notification content.</>}
+        notificationHeading="Notification Heading"
+        showIcon={false}
+      />
+    );
     // The Icon's role is "img".
     expect(screen.queryByRole("img")).not.toBeInTheDocument();
   });
@@ -59,18 +84,18 @@ describe("Notification", () => {
   it("renders a custom Icon component", () => {
     utils.rerender(
       <Notification
-        id="notificationID"
         icon={
           <Icon
             id="custom-icon"
+            className="custom-icon"
+            color={IconColors.BrandPrimary}
             name={IconNames.Check}
             size={IconSizes.Large}
-            color={IconColors.BrandPrimary}
-            className="custom-icon"
           />
         }
-        notificationHeading="Notification Heading"
+        id="notificationID"
         notificationContent={<>Notification content.</>}
+        notificationHeading="Notification Heading"
       />
     );
     expect(utils.container.querySelector(".custom-icon")).toBeInTheDocument();
@@ -80,9 +105,9 @@ describe("Notification", () => {
     utils.rerender(
       <Notification
         id="notificationID"
-        notificationType={NotificationTypes.Announcement}
-        notificationHeading="Notification Heading"
         notificationContent={<>Notification content.</>}
+        notificationHeading="Notification Heading"
+        notificationType={NotificationTypes.Announcement}
       />
     );
 
@@ -96,9 +121,9 @@ describe("Notification", () => {
     utils.rerender(
       <Notification
         id="notificationID"
-        notificationType={NotificationTypes.Warning}
-        notificationHeading="Notification Heading"
         notificationContent={<>Notification content.</>}
+        notificationHeading="Notification Heading"
+        notificationType={NotificationTypes.Warning}
       />
     );
 
@@ -113,8 +138,8 @@ describe("Notification", () => {
       .create(
         <Notification
           id="notificationID1"
-          notificationHeading="Notification Heading"
           notificationContent={<>Notification content.</>}
+          notificationHeading="Notification Heading"
         />
       )
       .toJSON();
@@ -122,9 +147,9 @@ describe("Notification", () => {
       .create(
         <Notification
           id="notificationID2"
-          notificationType={NotificationTypes.Announcement}
-          notificationHeading="Notification Heading"
           notificationContent={<>Notification content.</>}
+          notificationHeading="Notification Heading"
+          notificationType={NotificationTypes.Announcement}
         />
       )
       .toJSON();
@@ -132,9 +157,9 @@ describe("Notification", () => {
       .create(
         <Notification
           id="notificationID3"
-          notificationType={NotificationTypes.Warning}
-          notificationHeading="Notification Heading"
           notificationContent={<>Notification content.</>}
+          notificationHeading="Notification Heading"
+          notificationType={NotificationTypes.Warning}
         />
       )
       .toJSON();
@@ -146,9 +171,30 @@ describe("Notification", () => {
         />
       )
       .toJSON();
+    const withoutAnIcon = renderer
+      .create(
+        <Notification
+          id="notificationID5"
+          notificationHeading="Notification Heading"
+          notificationContent={<>Notification content.</>}
+          showIcon={false}
+        />
+      )
+      .toJSON();
+    const withoutHeadingAndIcon = renderer
+      .create(
+        <Notification
+          id="notificationID6"
+          notificationContent={<>Notification content.</>}
+          showIcon={false}
+        />
+      )
+      .toJSON();
     expect(standard).toMatchSnapshot();
     expect(announcement).toMatchSnapshot();
     expect(warning).toMatchSnapshot();
     expect(withoutHeading).toMatchSnapshot();
+    expect(withoutAnIcon).toMatchSnapshot();
+    expect(withoutHeadingAndIcon).toMatchSnapshot();
   });
 });