@nypl/design-system-react-components 0.25.5 → 0.25.9

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.
@@ -87,25 +109,31 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
     let variant = "link";
 
     if (typeof children === "string" && !href) {
-      throw new Error("Link needs prop 'href'");
+      throw new Error("`Link` needs the `href` prop.");
     }
 
     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:
@@ -116,15 +144,24 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
       }
       const childrenToClone: any = children[0] ? children[0] : children;
       const childProps = childrenToClone.props;
-      return React.cloneElement(
-        childrenToClone,
-        {
-          className,
-          ...linkProps,
-          ...childProps,
-          ref,
-        },
-        [childrenToClone.props.children]
+      return (
+        <Box as="span" __css={style}>
+          {React.cloneElement(
+            childrenToClone,
+            {
+              className,
+              ...linkProps,
+              ...childProps,
+              ref,
+              rel,
+              target,
+              // Useful if more styles are needed for the custom
+              // anchor element or link component.
+              style: additionalStyles,
+            },
+            [childrenToClone.props.children]
+          )}
+        </Box>
       );
     } else {
       return (
@@ -132,6 +169,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,261 @@
+// 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>
+`;
+
+exports[`Link renders the UI snapshot correctly 7`] = `
+<span
+  className="css-0"
+>
+  <a
+    href="#existing-anchor-tag"
+    id="anchor-link"
+    rel={null}
+    style={Object {}}
+    target={null}
+  >
+    check link
+  </a>
+</span>
+`;
+
+exports[`Link renders the UI snapshot correctly 8`] = `
+<span
+  className="css-0"
+>
+  <svg
+    aria-hidden={true}
+    className="chakra-icon css-onkibi"
+    focusable={false}
+    id="link-icon"
+    role="img"
+    title="check 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
+    href="#existing-anchor-tag"
+  >
+    check link
+  </a>
+</span>
+`;

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

@@ -1,10 +1,10 @@
 import {
-  Meta,
-  Story,
-  Canvas,
   ArgsTable,
+  Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
 
 import Heading from "../Heading/Heading";
@@ -15,6 +15,9 @@ 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")}
@@ -23,21 +26,22 @@ import { getCategory } from "../../utils/componentCategories";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=16115%3A304",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=16115%3A304",
     },
     jest: ["List.test.tsx"],
   }}
   argTypes={{
+    additionalStyles: { control: false },
     children: { table: { disable: true } },
-    className: { table: { disable: true } },
-    id: { table: { disable: true } },
-    listItems: { table: { disable: true } },
+    className: { control: false },
+    id: { control: false },
+    inline: { table: { defaultValue: { summary: false } } },
+    listItems: { control: false },
+    noStyling: { table: { defaultValue: { summary: false } } },
     type: {
-      control: {
-        type: "radio",
-      },
-      options: Object.keys(ListTypes),
+      control: { type: "select" },
+      options: enumValues.options,
+      table: { defaultValue: { summary: "ListTypes.Unordered" } },
     },
   }}
 />
@@ -118,17 +122,21 @@ export const definitions = [
 
 <Canvas withToolbar>
   <Story
-    name="List"
+    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: "ListTypes.Unordered",
     }}
   >
     {(args) => (
-      <List {...args} type={ListTypes[args.type]}>
-        {ListTypes[args.type] !== ListTypes.Definition
+      <List {...args} type={enumValues.getValue(args.type)}>
+        {args.type !== "ListTypes.Definition"
           ? itemGroups.map((item, i) => <li key={i}>{item}</li>)
           : definitions.map((item, i) => [
               <dt key={`dt_${i}`}>{item.term}</dt>,
@@ -139,7 +147,7 @@ export const definitions = [
   </Story>
 </Canvas>
 
-<ArgsTable story="List" />
+<ArgsTable story="List with Controls" />
 
 ## Definition List
 
@@ -163,13 +171,14 @@ This type of list renders `dt` and `dd` elements.
       title: "Middle-Earth Peoples",
     }}
     argTypes={{
-      type: { table: { disable: true } },
+      inline: { control: false },
+      noStyling: { control: false },
+      type: { control: false },
     }}
     parameters={{
       design: {
         type: "figma",
-        url:
-          "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10734%3A5178",
+        url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10734%3A5178",
       },
     }}
   >
@@ -196,13 +205,14 @@ An example with HTML elements inside of the `dd` elements.
       title: "Details",
     }}
     argTypes={{
+      inline: { control: false },
+      noStyling: { control: false },
       type: { table: { disable: true } },
     }}
     parameters={{
       design: {
         type: "figma",
-        url:
-          "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10734%3A5178",
+        url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10734%3A5178",
       },
     }}
   >
@@ -330,7 +340,9 @@ const fishDefinitions = [
       title: "Animal Crossing Fish",
     }}
     argTypes={{
-      type: { table: { disable: true } },
+      inline: { control: false },
+      noStyling: { control: false },
+      type: { control: false },
     }}
   >
     {(args) => <List {...args} type={ListTypes.Definition} />}