From 32b587a4b4bc03a239dbcb6b9d82ac7e06d7c99a Mon Sep 17 00:00:00 2001
From: Diedra <drater@contractor.chanzuckerberg.com>
Date: Mon, 23 Aug 2021 23:21:27 -0700
Subject: [PATCH] feat(link): add Link component; change Button to always use
 button tag

---
 .../components/src/Button/button.stories.tsx  |   2 +
 packages/components/src/Link/Link.spec.tsx    |  19 ++
 .../src/Link/Link.stories.module.css          |   7 +
 packages/components/src/Link/Link.stories.tsx | 242 ++++++++++++++++++
 packages/components/src/Link/Link.tsx         |  31 +++
 .../src/Link/__snapshots__/Link.spec.tsx.snap | 176 +++++++++++++
 packages/components/src/Link/index.ts         |   2 +
 .../tokens/lib/json/css-variables-nested.json |   2 +-
 .../tokens/lib/json/variables-nested.json     |   2 +-
 packages/tokens/lib/json/variables.json       |   2 +-
 10 files changed, 482 insertions(+), 3 deletions(-)
 create mode 100644 packages/components/src/Link/Link.spec.tsx
 create mode 100644 packages/components/src/Link/Link.stories.module.css
 create mode 100644 packages/components/src/Link/Link.stories.tsx
 create mode 100644 packages/components/src/Link/Link.tsx
 create mode 100644 packages/components/src/Link/__snapshots__/Link.spec.tsx.snap
 create mode 100644 packages/components/src/Link/index.ts

diff --git a/packages/components/src/Button/button.stories.tsx b/packages/components/src/Button/button.stories.tsx
index ffb17ae24..5b1923866 100644
--- a/packages/components/src/Button/button.stories.tsx
+++ b/packages/components/src/Button/button.stories.tsx
@@ -37,6 +37,8 @@ type Args = React.ComponentProps<typeof Button>;
 
 const Template: Story<Args> = (args) => <Button {...args} />;
 
+// TODO: Consolidate with Link stories.
+
 export const Primary = Template.bind(null);
 Primary.args = {
   children: "Button",
diff --git a/packages/components/src/Link/Link.spec.tsx b/packages/components/src/Link/Link.spec.tsx
new file mode 100644
index 000000000..3ab5bbfc2
--- /dev/null
+++ b/packages/components/src/Link/Link.spec.tsx
@@ -0,0 +1,19 @@
+import { generateSnapshots, prepareStory } from "@chanzuckerberg/story-utils";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import * as LinkStoryFile from "./Link.stories";
+
+describe("<Link />", () => {
+  generateSnapshots(LinkStoryFile);
+
+  it("forwards refs", () => {
+    const ref = React.createRef<HTMLAnchorElement>();
+    render(prepareStory(LinkStoryFile.Primary, { ref }));
+
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    ref.current!.focus();
+
+    const Link = screen.getByRole("link");
+    expect(Link).toHaveFocus();
+  });
+});
diff --git a/packages/components/src/Link/Link.stories.module.css b/packages/components/src/Link/Link.stories.module.css
new file mode 100644
index 000000000..5d8e46d67
--- /dev/null
+++ b/packages/components/src/Link/Link.stories.module.css
@@ -0,0 +1,7 @@
+.color {
+  @apply p-2;
+}
+
+.variant {
+  @apply mb-5;
+}
diff --git a/packages/components/src/Link/Link.stories.tsx b/packages/components/src/Link/Link.stories.tsx
new file mode 100644
index 000000000..0b23ce272
--- /dev/null
+++ b/packages/components/src/Link/Link.stories.tsx
@@ -0,0 +1,242 @@
+import { Story } from "@storybook/react/types-6-0";
+import React from "react";
+import Clickable from "../Clickable";
+import Heading from "../Heading";
+import CheckCircleRoundedIcon from "../Icons/CheckCircleRounded";
+import Text from "../Text";
+import Link, { LinkProps } from "./Link";
+import styles from "./Link.stories.module.css";
+
+const sizes = ["small", "medium", "large"] as const;
+const allColors = ["alert", "brand", "neutral", "success", "warning"] as const;
+const variants = ["flat", "outline", "link"] as const;
+const states = ["inactive", "hover", "focus", "active", "disabled"] as const;
+
+// For now, the UI kit only includes alert & brand "flat" buttons.
+const flatColors = ["alert", "brand"] as const;
+
+export default {
+  title: "Link",
+  component: Link,
+  argTypes: {
+    children: {
+      control: {
+        type: "text",
+      },
+    },
+    color: {
+      control: {
+        type: "radio",
+        options: allColors,
+      },
+    },
+  },
+};
+
+type Args = React.ComponentProps<typeof Link>;
+
+const Template: Story<Args> = (args) => <Link {...args} />;
+
+// TODO: Consolidate with button stories.
+
+const defaultArgs = {
+  children: "Link",
+  variant: "flat" as const,
+  size: "medium" as const,
+  color: "brand" as const,
+  href: "",
+};
+
+export const Primary = Template.bind(null);
+Primary.args = {
+  ...defaultArgs,
+};
+
+export const Secondary = Template.bind(null);
+Secondary.args = {
+  ...defaultArgs,
+  variant: "outline",
+};
+
+export const Tertiary = Template.bind(null);
+Tertiary.args = {
+  ...defaultArgs,
+  color: "neutral",
+  variant: "outline",
+};
+
+export const Destructive = Template.bind(null);
+Destructive.args = {
+  ...defaultArgs,
+  color: "alert",
+};
+
+export const PrimarySmall = Template.bind(null);
+PrimarySmall.args = {
+  ...defaultArgs,
+  size: "small",
+};
+
+export const SecondarySmall = Template.bind(null);
+SecondarySmall.args = {
+  ...defaultArgs,
+  size: "small",
+  variant: "outline",
+};
+
+export const TertiarySmall = Template.bind(null);
+TertiarySmall.args = {
+  ...defaultArgs,
+  color: "neutral",
+  size: "small",
+  variant: "outline",
+};
+
+export const LinkButton = Template.bind(null);
+LinkButton.args = {
+  ...defaultArgs,
+  children: "Link Button",
+  variant: "link",
+};
+
+export const linkInBody: Story<Args> = (args) => (
+  <Text size="body">
+    This text surrounds the <Link {...args} /> and shows that the link should
+    adhere to its appearance
+  </Text>
+);
+linkInBody.args = {
+  ...defaultArgs,
+  children: "Link Button",
+  variant: "link",
+};
+
+export const linkInHeading: Story<Args> = (args) => (
+  <Text size="h1">
+    This text surrounds the <Link {...args} /> and shows that the link should
+    adhere to its appearance
+  </Text>
+);
+linkInHeading.args = {
+  ...defaultArgs,
+  children: "Link Button",
+  variant: "link",
+};
+
+export const withDataTestId = Template.bind(null);
+withDataTestId.args = {
+  ...defaultArgs,
+  children: "Link with data-testid",
+  color: "alert",
+  "data-testid": "fake-test-id",
+};
+
+export const linkWithIcon = Template.bind(null);
+linkWithIcon.args = {
+  ...defaultArgs,
+  children: (
+    <>
+      Link with icon <CheckCircleRoundedIcon purpose="decorative" />
+    </>
+  ),
+  color: "success",
+  variant: "link",
+};
+
+export const outlineWithIcon = Template.bind(null);
+outlineWithIcon.args = {
+  ...defaultArgs,
+  children: (
+    <>
+      Outline with icon <CheckCircleRoundedIcon purpose="decorative" />
+    </>
+  ),
+  color: "warning",
+  variant: "outline",
+};
+
+export const withFakeClassName = Template.bind(null);
+withFakeClassName.args = {
+  ...defaultArgs,
+  children: "With fake className",
+  color: "warning",
+  variant: "outline",
+  className: "fake-className",
+};
+
+// Show grids with all variants
+
+const gridParameters = {
+  axe: {
+    skip: true,
+  },
+  snapshot: {
+    skip: true,
+  },
+};
+
+const renderSize = (
+  size: LinkProps["size"],
+  textColor: "white" | "neutral",
+  children: React.ReactNode,
+) =>
+  variants.map((variant) => {
+    const colors = variant === "flat" ? flatColors : allColors;
+
+    return (
+      <React.Fragment key={variant}>
+        <Heading size="h2" color={textColor}>
+          {variant} - {size}
+        </Heading>
+        <table className={styles.variant}>
+          <tbody>
+            {states.map((state) => (
+              <tr key={state}>
+                <th scope="row">
+                  <Text size="body" color={textColor}>
+                    {state}
+                  </Text>
+                </th>
+                {colors.map((color) => (
+                  <td key={color} className={styles.color}>
+                    {/* To pass the "state" prop (only used for demonstration in storybook),
+                    we must use Clickable instead of Link */}
+                    <Clickable
+                      as={"a"}
+                      size={size}
+                      color={color}
+                      variant={variant}
+                      state={state}
+                      href=""
+                    >
+                      {children}
+                    </Clickable>
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </React.Fragment>
+    );
+  });
+
+export const allVariants = () => (
+  <ul>
+    {sizes.map((size) => (
+      <li key={size}>{renderSize(size, "neutral", "Link")}</li>
+    ))}
+  </ul>
+);
+
+allVariants.parameters = gridParameters;
+
+export const mediumVariantsOnDarkBackground = () =>
+  renderSize("medium", "white", "Link");
+
+mediumVariantsOnDarkBackground.parameters = {
+  ...gridParameters,
+  backgrounds: {
+    default: "dark",
+  },
+};
diff --git a/packages/components/src/Link/Link.tsx b/packages/components/src/Link/Link.tsx
new file mode 100644
index 000000000..1eb492a4f
--- /dev/null
+++ b/packages/components/src/Link/Link.tsx
@@ -0,0 +1,31 @@
+import React, { ReactNode, forwardRef } from "react";
+import Clickable, { ClickableProps } from "../Clickable";
+
+type LinkHTMLElementProps = Omit<
+  React.AnchorHTMLAttributes<HTMLAnchorElement>,
+  "disabled"
+>;
+
+export type LinkProps = LinkHTMLElementProps & {
+  as?: "a" | React.ComponentType<any>;
+  /**
+   * The link contents or label.
+   */
+  children: ReactNode;
+  color?: ClickableProps<"button">["color"];
+  "data-testid"?: string;
+  size?: ClickableProps<"button">["size"];
+  variant?: ClickableProps<"button">["variant"];
+};
+
+const Link = forwardRef<HTMLAnchorElement, LinkProps>(
+  ({ as = "a", variant = "link", color = "brand", ...rest }, ref) => {
+    return (
+      <Clickable {...rest} as={as} variant={variant} color={color} ref={ref} />
+    );
+  },
+);
+
+Link.displayName = "Link";
+
+export default Link;
diff --git a/packages/components/src/Link/__snapshots__/Link.spec.tsx.snap b/packages/components/src/Link/__snapshots__/Link.spec.tsx.snap
new file mode 100644
index 000000000..7d3675ae2
--- /dev/null
+++ b/packages/components/src/Link/__snapshots__/Link.spec.tsx.snap
@@ -0,0 +1,176 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Link /> Destructive story renders snapshot 1`] = `
+<a
+  class="button sizeMedium variantFlat colorAlert"
+  href=""
+>
+  ​
+  Link
+</a>
+`;
+
+exports[`<Link /> LinkButton story renders snapshot 1`] = `
+<a
+  class="button variantLink colorBrand"
+  href=""
+>
+  ​
+  Link Button
+</a>
+`;
+
+exports[`<Link /> Primary story renders snapshot 1`] = `
+<a
+  class="button sizeMedium variantFlat colorBrand"
+  href=""
+>
+  ​
+  Link
+</a>
+`;
+
+exports[`<Link /> PrimarySmall story renders snapshot 1`] = `
+<a
+  class="button sizeSmall variantFlat colorBrand"
+  href=""
+>
+  ​
+  Link
+</a>
+`;
+
+exports[`<Link /> Secondary story renders snapshot 1`] = `
+<a
+  class="button sizeMedium variantOutline colorBrand"
+  href=""
+>
+  ​
+  Link
+</a>
+`;
+
+exports[`<Link /> SecondarySmall story renders snapshot 1`] = `
+<a
+  class="button sizeSmall variantOutline colorBrand"
+  href=""
+>
+  ​
+  Link
+</a>
+`;
+
+exports[`<Link /> Tertiary story renders snapshot 1`] = `
+<a
+  class="button sizeMedium variantOutline colorNeutral"
+  href=""
+>
+  ​
+  Link
+</a>
+`;
+
+exports[`<Link /> TertiarySmall story renders snapshot 1`] = `
+<a
+  class="button sizeSmall variantOutline colorNeutral"
+  href=""
+>
+  ​
+  Link
+</a>
+`;
+
+exports[`<Link /> linkInBody story renders snapshot 1`] = `
+<p
+  class="typography sizeBody colorBase"
+>
+  This text surrounds the 
+  <a
+    class="button variantLink colorBrand"
+    href=""
+  >
+    ​
+    Link Button
+  </a>
+   and shows that the link should adhere to its appearance
+</p>
+`;
+
+exports[`<Link /> linkInHeading story renders snapshot 1`] = `
+<p
+  class="typography sizeH1 colorBase"
+>
+  This text surrounds the 
+  <a
+    class="button variantLink colorBrand"
+    href=""
+  >
+    ​
+    Link Button
+  </a>
+   and shows that the link should adhere to its appearance
+</p>
+`;
+
+exports[`<Link /> linkWithIcon story renders snapshot 1`] = `
+<a
+  class="button variantLink colorSuccess"
+  href=""
+>
+  ​
+  Link with icon 
+  <svg
+    aria-hidden="true"
+    class="svgIcon"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM9.29 16.29L5.7 12.7a.9959.9959 0 010-1.41c.39-.39 1.02-.39 1.41 0L10 14.17l6.88-6.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-7.59 7.59c-.38.39-1.02.39-1.41 0z"
+    />
+  </svg>
+</a>
+`;
+
+exports[`<Link /> outlineWithIcon story renders snapshot 1`] = `
+<a
+  class="button sizeMedium variantOutline colorWarning"
+  href=""
+>
+  ​
+  Outline with icon 
+  <svg
+    aria-hidden="true"
+    class="svgIcon"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM9.29 16.29L5.7 12.7a.9959.9959 0 010-1.41c.39-.39 1.02-.39 1.41 0L10 14.17l6.88-6.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-7.59 7.59c-.38.39-1.02.39-1.41 0z"
+    />
+  </svg>
+</a>
+`;
+
+exports[`<Link /> withDataTestId story renders snapshot 1`] = `
+<a
+  class="button sizeMedium variantFlat colorAlert"
+  data-testid="fake-test-id"
+  href=""
+>
+  ​
+  Link with data-testid
+</a>
+`;
+
+exports[`<Link /> withFakeClassName story renders snapshot 1`] = `
+<a
+  class="fake-className button sizeMedium variantOutline colorWarning"
+  href=""
+>
+  ​
+  With fake className
+</a>
+`;
diff --git a/packages/components/src/Link/index.ts b/packages/components/src/Link/index.ts
new file mode 100644
index 000000000..90f46dc9c
--- /dev/null
+++ b/packages/components/src/Link/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./Link";
+export type { LinkProps } from "./Link";
diff --git a/packages/tokens/lib/json/css-variables-nested.json b/packages/tokens/lib/json/css-variables-nested.json
index 0d527dd30..f477eaa9a 100644
--- a/packages/tokens/lib/json/css-variables-nested.json
+++ b/packages/tokens/lib/json/css-variables-nested.json
@@ -179,4 +179,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/tokens/lib/json/variables-nested.json b/packages/tokens/lib/json/variables-nested.json
index 38b860dd4..d85351282 100644
--- a/packages/tokens/lib/json/variables-nested.json
+++ b/packages/tokens/lib/json/variables-nested.json
@@ -179,4 +179,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/tokens/lib/json/variables.json b/packages/tokens/lib/json/variables.json
index d28555fd4..fb9ac0a4a 100644
--- a/packages/tokens/lib/json/variables.json
+++ b/packages/tokens/lib/json/variables.json
@@ -127,4 +127,4 @@
   "LegacySizeLineHeightBody": "1.5rem",
   "LegacySizeLineHeightSm": "1.25rem",
   "LegacySizeLineHeightXs": "1rem"
-}
+}
\ No newline at end of file