Refactor: [M3-6522-link] feedback

linode · Jun 27, 2023 · 2048192 · 2048192
1 parent 4e0ce37
commit 2048192
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 34 deletions.
diff --git a/packages/manager/src/components/Link.stories.tsx b/packages/manager/src/components/Link.stories.tsx
@@ -4,14 +4,13 @@ import { Link } from 'src/components/Link';
 import type { LinkProps } from 'react-router-dom';
 import type { Meta, StoryObj } from '@storybook/react';
 
+/**
+ * TODO: remove the typography component from this story once M3-6772 is handled
+ */
 export const Default: StoryObj<LinkProps> = {
   render: (args: LinkProps) => (
     <Typography variant="body1">
-      <Link
-        {...args}
-        to="/"
-        onClick={() => alert('taking you to a relative path (in app)')}
-      >
+      <Link {...args} to="/">
         {args.children} (internal link)
       </Link>
     </Typography>
@@ -35,14 +34,59 @@ const meta: Meta<LinkProps> = {
   },
   argTypes: {
     to: {
+      control: 'text',
+      description:
+        "The link's destination. If the value contains `http` or `mailto`, it will be considered an external link and open in a new window.",
+      table: {
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    children: {
       control: {
         type: 'text',
       },
+      description: 'The text or content of the link.',
+      table: {
+        type: {
+          summary: 'ReactNode',
+        },
+      },
     },
-    children: {
+    className: {
       control: {
         type: 'text',
       },
+      description:
+        'Optional CSS class names that are applied to the component.',
+      table: {
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    onClick: {
+      action: 'clicked',
+      description: 'A function that will be called onClick.',
+      table: {
+        type: {
+          summary: '(e: React.SyntheticEvent<HTMLElement>) => void;',
+        },
+      },
+    },
+    replace: {
+      description:
+        'When `true`, clicking the link will replace the current entry in the history stack instead of adding a new one.',
+      control: {
+        type: 'boolean',
+        default: false,
+      },
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+      },
     },
   },
 };

diff --git a/packages/manager/src/components/Link.tsx b/packages/manager/src/components/Link.tsx
@@ -6,37 +6,10 @@ const isExternal = (href: string) => {
   return href.match(/http/) || href.match(/mailto/);
 };
 
-interface Props extends LinkProps {
-  /**
-   * The link's destination. If the value contains `http` or `mailto`, it will be considered an external link and open in a new window.
-   */
-  to: string;
-  /**
-   * The clickable text or content.
-   */
-  children?: React.ReactNode;
-  /**
-   * When `true`, clicking the link will replace the current entry in the history stack instead of adding a new one.
-   * @default false
-   * @see https://reactrouter.com/web/api/Link/replace-bool
-   */
-  replace?: boolean;
-  /**
-   * Optional CSS class names that are applied to the component.
-   */
-  className?: string;
-  /**
-   * A function that will be called onClick.
-   */
-  onClick?: (e: React.SyntheticEvent<HTMLElement>) => void;
-}
-
 /**
- *
  * A wrapper around React Router's `Link` component that will open external links in a new window when a non-relative URL is provided.
- *
  */
-export const Link = (props: Props) => {
+export const Link = (props: LinkProps) => {
   const isLinkExternal = isExternal(props.to as string);
 
   return isLinkExternal ? (