feat: rename clickable component

packages/components/src/Button/button.stories.tsx

@@ -1,6 +1,6 @@
 import { Story } from "@storybook/react/types-6-0";
 import React from "react";
-import Clickable from "../Clickable";
+import ClickableStyleWrapper from "../ClickableStyleWrapper";
 import Heading from "../Heading";
 import CheckCircleRoundedIcon from "../Icons/CheckCircleRounded";
 import Text from "../Text";
@@ -189,8 +189,8 @@ const renderSize = (
                 {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 Button */}
-                    <Clickable
+                    we must use ClickableStyleWrapper instead of Button */}
+                    <ClickableStyleWrapper
                       as={"button"}
                       size={size}
                       color={color}
@@ -199,7 +199,7 @@ const renderSize = (
                       disabled={state === "disabled"}
                     >
                       {children}
-                    </Clickable>
+                    </ClickableStyleWrapper>
                   </td>
                 ))}
               </tr>

packages/components/src/Button/button.tsx

@@ -1,5 +1,7 @@
 import React, { ReactNode, forwardRef } from "react";
-import Clickable, { ClickableProps } from "../Clickable";
+import ClickableStyleWrapper, {
+  ClickableStyleWrapperProps,
+} from "../ClickableStyleWrapper";
 
 type ButtonHTMLElementProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
 
@@ -8,10 +10,10 @@ export type ButtonProps = ButtonHTMLElementProps & {
    * The button contents or label.
    */
   children: ReactNode;
-  color?: ClickableProps<"button">["color"];
+  color?: ClickableStyleWrapperProps<"button">["color"];
   "data-testid"?: string;
-  size?: ClickableProps<"button">["size"];
-  variant?: ClickableProps<"button">["variant"];
+  size?: ClickableStyleWrapperProps<"button">["size"];
+  variant?: ClickableStyleWrapperProps<"button">["variant"];
 };
 
 /**
@@ -34,7 +36,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     ref,
   ) => {
     return (
-      <Clickable
+      <ClickableStyleWrapper
         {...rest}
         as="button"
         variant={variant}

packages/components/src/ClickableStyleWrapper/ClickableStyleWrapper.spec.tsx

@@ -0,0 +1,6 @@
+import { generateSnapshots } from "@chanzuckerberg/story-utils";
+import * as ClickableStyleWrapperStoryFile from "./ClickableStyleWrapper.stories";
+
+describe("<ClickableStyleWrapper />", () => {
+  generateSnapshots(ClickableStyleWrapperStoryFile);
+});

packages/components/src/ClickableStyleWrapper/ClickableStyleWrapper.stories.tsx

@@ -0,0 +1,21 @@
+import { Story } from "@storybook/react/types-6-0";
+import React from "react";
+import ClickableStyleWrapper from "./ClickableStyleWrapper";
+
+export default {
+  title: "ClickableStyleWrapper",
+  component: ClickableStyleWrapper,
+};
+
+type Args = React.ComponentProps<typeof ClickableStyleWrapper>;
+
+const Template: Story<Args> = (args) => <ClickableStyleWrapper {...args} />;
+
+export const ClickableStyleWrapperAsAnATag = Template.bind(null);
+ClickableStyleWrapperAsAnATag.args = {
+  as: "a",
+  color: "brand",
+  variant: "flat",
+  size: "medium",
+  children: "ClickableStyleWrapper As An A Tag",
+};

packages/components/src/Clickable/Clickable.tsx → packages/components/src/ClickableStyleWrapper/ClickableStyleWrapper.tsx

@@ -1,8 +1,8 @@
 import clsx from "clsx";
 import React from "react";
-import styles from "./Clickable.module.css";
+import styles from "./ClickableStyleWrapper.module.css";
 
-export type ClickableProps<IComponent extends React.ElementType> = {
+export type ClickableStyleWrapperProps<IComponent extends React.ElementType> = {
   /**
    * CSS class for custom styles.
    */
@@ -30,7 +30,7 @@ export type ClickableProps<IComponent extends React.ElementType> = {
  *
  * See the Button stories for usage examples.
  */
-const Clickable = React.forwardRef(
+const ClickableStyleWrapper = React.forwardRef(
   <IComponent extends React.ElementType>(
     {
       as: Component,
@@ -41,7 +41,7 @@ const Clickable = React.forwardRef(
       variant,
       className,
       ...rest
-    }: ClickableProps<IComponent>,
+    }: ClickableStyleWrapperProps<IComponent>,
     ref: React.ForwardedRef<HTMLElement>,
   ) => {
     return (
@@ -81,6 +81,6 @@ const Clickable = React.forwardRef(
   },
 );
 
-Clickable.displayName = "Clickable";
+ClickableStyleWrapper.displayName = "ClickableStyleWrapper";
 
-export default Clickable;
+export default ClickableStyleWrapper;

packages/components/src/ClickableStyleWrapper/__snapshots__/ClickableStyleWrapper.spec.tsx.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ClickableStyleWrapper /> ClickableStyleWrapperAsAnATag story renders snapshot 1`] = `
+<a
+  class="button sizeMedium variantFlat colorBrand"
+>
+  ​
+  ClickableStyleWrapper As An A Tag
+</a>
+`;

packages/components/src/ClickableStyleWrapper/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./ClickableStyleWrapper";
+export type { ClickableStyleWrapperProps } from "./ClickableStyleWrapper";

packages/components/src/Link/Link.stories.tsx

@@ -1,6 +1,6 @@
 import { Story } from "@storybook/react/types-6-0";
 import React from "react";
-import Clickable from "../Clickable";
+import ClickableStyleWrapper from "../ClickableStyleWrapper";
 import Heading from "../Heading";
 import CheckCircleRoundedIcon from "../Icons/CheckCircleRounded";
 import Text from "../Text";
@@ -105,8 +105,8 @@ const renderSize = (
                 {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
+                    we must use ClickableStyleWrapper instead of Link */}
+                    <ClickableStyleWrapper
                       as={"a"}
                       size={size}
                       color={color}
@@ -115,7 +115,7 @@ const renderSize = (
                       href=""
                     >
                       {children}
-                    </Clickable>
+                    </ClickableStyleWrapper>
                   </td>
                 ))}
               </tr>

packages/components/src/Link/Link.tsx

@@ -1,5 +1,7 @@
 import React, { ReactNode, forwardRef } from "react";
-import Clickable, { ClickableProps } from "../Clickable";
+import ClickableStyleWrapper, {
+  ClickableStyleWrapperProps,
+} from "../ClickableStyleWrapper";
 
 type LinkHTMLElementProps = Omit<
   React.AnchorHTMLAttributes<HTMLAnchorElement>,
@@ -11,10 +13,10 @@ export type LinkProps = LinkHTMLElementProps & {
    * The link contents or label.
    */
   children: ReactNode;
-  color?: ClickableProps<"a">["color"];
+  color?: ClickableStyleWrapperProps<"a">["color"];
   "data-testid"?: string;
-  size?: ClickableProps<"a">["size"];
-  variant?: ClickableProps<"a">["variant"];
+  size?: ClickableStyleWrapperProps<"a">["size"];
+  variant?: ClickableStyleWrapperProps<"a">["variant"];
 };
 
 /**
@@ -30,7 +32,7 @@ export type LinkProps = LinkHTMLElementProps & {
 const Link = forwardRef<HTMLAnchorElement, LinkProps>(
   ({ variant = "link", color = "brand", size = "medium", ...rest }, ref) => {
     return (
-      <Clickable
+      <ClickableStyleWrapper
         {...rest}
         as="a"
         variant={variant}

packages/components/src/index.ts

@@ -1,6 +1,6 @@
 export { default as Banner } from "./Banner";
 export { default as Button } from "./Button";
-export { default as Clickable } from "./Clickable";
+export { default as ClickableStyleWrapper } from "./ClickableStyleWrapper";
 export { default as Heading } from "./Heading";
 export { default as SvgIcon } from "./SvgIcon";
 export type { IconProps } from "./SvgIcon";