chore: improve storybook docs for component

aragon · Jan 25, 2024 · 5203629 · 5203629
1 parent 0116e15
commit 5203629
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 17 deletions.
diff --git a/src/components/link/link.api.ts b/src/components/link/link.api.ts
@@ -1,6 +1,9 @@
 import type { AnchorHTMLAttributes } from 'react';
 import { type IconType } from '../icon';
-
+/**
+ * Variant of the link.
+ * @default 'primary'
+ */
 export type LinkVariant = 'primary' | 'neutral';
 
 export interface ILinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {

diff --git a/src/components/link/link.stories.tsx b/src/components/link/link.stories.tsx
@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { Link, type ILinkProps } from '.';
 import { IconType } from '../icon';
-import { Link } from './link';
-import { type ILinkProps } from './link.api';
 
 /** bolting on a new prop to the LinkProps type
  * for the purposes of testing the iconRight prop
@@ -13,13 +12,16 @@ type LinkStoryProps = ILinkProps & { showIconRight: boolean };
 const meta: Meta<LinkStoryProps> = {
     title: 'components/Link',
     component: Link,
-    argTypes: {
-        disabled: { control: 'boolean' },
-        external: { control: 'boolean' },
-        label: { control: 'text' },
-        description: { control: 'text' },
-        variant: {
-            control: { type: 'select', options: ['primary', 'neutral'] },
+    tags: ['autodocs'],
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/ISSDryshtEpB7SUSdNqAcw/branch/jfKRr1V9evJUp1uBeyP3Zz/Aragon-ODS?type=design&node-id=7958%3A15661&mode=design&t=chS7QmnJNo46KjlP-1',
+        },
+        docs: {
+            description: {
+                component: 'Component will auto size text from **14px to 16px** above `md` breakpoint.',
+            },
         },
     },
     args: {
@@ -28,8 +30,24 @@ const meta: Meta<LinkStoryProps> = {
         disabled: false,
         external: true,
         variant: 'primary',
-        showIconRight: true,
         href: '#',
+        /** only used for testing the icon right prop */
+        showIconRight: true,
+    },
+    argTypes: {
+        iconRight: {
+            control: 'select',
+            options: Object.values(IconType),
+            description: 'Select an icon to display on the right side of the link. Toggle visibility below.',
+        },
+        showIconRight: {
+            description:
+                'Toggle to show or hide the icon on the right for visual testing. Not part of the actual component API.',
+            control: { type: 'boolean' },
+            table: {
+                category: 'Visual Testing',
+            },
+        },
     },
 };
 
@@ -39,27 +57,30 @@ type Story = StoryObj<LinkStoryProps>;
 export const Primary: Story = {
     args: {
         variant: 'primary',
+        iconRight: IconType.UPPER_RIGHT_ARROW, // Set default icon
     },
-    render: ({ showIconRight, ...props }) => (
-        <Link {...props} iconRight={showIconRight ? IconType.UPPER_RIGHT_ARROW : undefined} />
+    render: ({ showIconRight, iconRight, ...props }) => (
+        <Link {...props} iconRight={showIconRight ? iconRight : undefined} />
     ),
 };
 
 export const Neutral: Story = {
     args: {
         variant: 'neutral',
+        iconRight: IconType.UPPER_RIGHT_ARROW, // Set default icon
     },
-    render: ({ showIconRight, ...props }) => (
-        <Link {...props} iconRight={showIconRight ? IconType.UPPER_RIGHT_ARROW : undefined} />
+    render: ({ showIconRight, iconRight, ...props }) => (
+        <Link {...props} iconRight={showIconRight ? iconRight : undefined} />
     ),
 };
 
 export const Disabled: Story = {
     args: {
         disabled: true,
+        iconRight: IconType.UPPER_RIGHT_ARROW, // Set default icon
     },
-    render: ({ showIconRight, ...props }) => (
-        <Link {...props} iconRight={showIconRight ? IconType.UPPER_RIGHT_ARROW : undefined} />
+    render: ({ showIconRight, iconRight, ...props }) => (
+        <Link {...props} iconRight={showIconRight ? iconRight : undefined} />
     ),
 };