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

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

@@ -74,6 +74,14 @@ describe("Image", () => {
     const figCaption = renderer
       .create(<Image src="test.png" alt="" imageCaption="Caption" />)
       .toJSON();
+    const sizeExtraExtraSmall = renderer
+      .create(
+        <Image src="test.png" alt="" imageSize={ImageSizes.ExtraExtraSmall} />
+      )
+      .toJSON();
+    const sizeExtraSmall = renderer
+      .create(<Image src="test.png" alt="" imageSize={ImageSizes.ExtraSmall} />)
+      .toJSON();
     const sizeSmall = renderer
       .create(<Image src="test.png" alt="" imageSize={ImageSizes.Small} />)
       .toJSON();
@@ -152,6 +160,8 @@ describe("Image", () => {
       .toJSON();
     expect(basic).toMatchSnapshot();
     expect(figCaption).toMatchSnapshot();
+    expect(sizeExtraExtraSmall).toMatchSnapshot();
+    expect(sizeExtraSmall).toMatchSnapshot();
     expect(sizeSmall).toMatchSnapshot();
     expect(sizeMedium).toMatchSnapshot();
     expect(sizeLarge).toMatchSnapshot();

package/src/components/Image/ImageTypes.ts

@@ -14,6 +14,8 @@ export enum ImageSizes {
   Large = "large",
   Medium = "medium",
   Small = "small",
+  ExtraSmall = "xsmall",
+  ExtraExtraSmall = "xxsmall",
 }
 
 export enum ImageTypes {

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

@@ -54,6 +54,22 @@ exports[`Image Renders the UI snapshot correctly 5`] = `
 `;
 
 exports[`Image Renders the UI snapshot correctly 6`] = `
+<img
+  alt=""
+  className="css-0"
+  src="test.png"
+/>
+`;
+
+exports[`Image Renders the UI snapshot correctly 7`] = `
+<img
+  alt=""
+  className="css-0"
+  src="test.png"
+/>
+`;
+
+exports[`Image Renders the UI snapshot correctly 8`] = `
 <div
   className="the-wrap  css-0"
 >
@@ -69,7 +85,7 @@ exports[`Image Renders the UI snapshot correctly 6`] = `
 </div>
 `;
 
-exports[`Image Renders the UI snapshot correctly 7`] = `
+exports[`Image Renders the UI snapshot correctly 9`] = `
 <div
   className="the-wrap  css-0"
 >
@@ -85,7 +101,7 @@ exports[`Image Renders the UI snapshot correctly 7`] = `
 </div>
 `;
 
-exports[`Image Renders the UI snapshot correctly 8`] = `
+exports[`Image Renders the UI snapshot correctly 10`] = `
 <img
   alt=""
   className="css-0"
@@ -93,7 +109,7 @@ exports[`Image Renders the UI snapshot correctly 8`] = `
 />
 `;
 
-exports[`Image Renders the UI snapshot correctly 9`] = `
+exports[`Image Renders the UI snapshot correctly 11`] = `
 <div
   className="the-wrap  css-0"
 >
@@ -109,7 +125,7 @@ exports[`Image Renders the UI snapshot correctly 9`] = `
 </div>
 `;
 
-exports[`Image Renders the UI snapshot correctly 10`] = `
+exports[`Image Renders the UI snapshot correctly 12`] = `
 <div
   className="the-wrap  css-0"
 >
@@ -125,7 +141,7 @@ exports[`Image Renders the UI snapshot correctly 10`] = `
 </div>
 `;
 
-exports[`Image Renders the UI snapshot correctly 11`] = `
+exports[`Image Renders the UI snapshot correctly 13`] = `
 <div
   className="the-wrap  css-0"
 >
@@ -141,7 +157,7 @@ exports[`Image Renders the UI snapshot correctly 11`] = `
 </div>
 `;
 
-exports[`Image Renders the UI snapshot correctly 12`] = `
+exports[`Image Renders the UI snapshot correctly 14`] = `
 <div
   className="the-wrap  css-0"
 >
@@ -157,7 +173,7 @@ exports[`Image Renders the UI snapshot correctly 12`] = `
 </div>
 `;
 
-exports[`Image Renders the UI snapshot correctly 13`] = `
+exports[`Image Renders the UI snapshot correctly 15`] = `
 <div
   className="the-wrap  css-0"
 >
@@ -173,7 +189,7 @@ exports[`Image Renders the UI snapshot correctly 13`] = `
 </div>
 `;
 
-exports[`Image Renders the UI snapshot correctly 14`] = `
+exports[`Image Renders the UI snapshot correctly 16`] = `
 <div
   className="the-wrap  css-0"
 >

package/src/components/Label/Label.stories.mdx

@@ -27,7 +27,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.10`   |
-| Latest            | `0.25.1`   |
+| Latest            | `0.25.8`   |
 
 <Description of={Label} />
 

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

@@ -26,8 +26,7 @@ import DSProvider from "../../theme/provider";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=36854%3A24387",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=36854%3A24387",
     },
     jest: ["Link.test.tsx"],
   }}
@@ -48,7 +47,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.25.1`   |
+| Latest            | `0.25.8`   |
 
 <Description of={Link} />
 

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.