fix(button): link button example in storybook was using base appearance (#1176)

Author: lorumic

src/components/Button/Button.stories.tsx

@@ -40,6 +40,13 @@ export const Default: Story = {
   args: {
     children: "Button",
   },
+  parameters: {
+    docs: {
+      description: {
+        story: "Button with default appearance",
+      },
+    },
+  },
 };
 
 export const DefaultDisabled: Story = {
@@ -49,6 +56,13 @@ export const DefaultDisabled: Story = {
     children: "Button",
     disabled: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story: "Disabled button with default appearance",
+      },
+    },
+  },
 };
 
 export const Base: Story = {
@@ -58,6 +72,13 @@ export const Base: Story = {
     children: "Base button",
     appearance: "base",
   },
+  parameters: {
+    docs: {
+      description: {
+        story: "Button with base appearance",
+      },
+    },
+  },
 };
 
 export const BaseDisabled: Story = {
@@ -68,29 +89,46 @@ export const BaseDisabled: Story = {
     appearance: "base",
     disabled: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story: "Disabled button with base appearance",
+      },
+    },
+  },
 };
 
 export const Link = {
   name: "Link",
 
   args: {
     children: "Link button",
-    appearance: "base",
-    element: "a",
-    href: "#test",
+    appearance: "link",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Button with link appearance",
+      },
+    },
   },
 };
 
-export const LinkDisabled: Story<HTMLProps<HTMLAnchorElement>> = {
+export const LinkDisabled = {
   name: "Link disabled",
 
   args: {
     children: "Link button disabled",
-    appearance: "base",
-    element: "a",
-    href: "#test",
+    appearance: "link",
     disabled: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story: "Disabled button with link appearance",
+      },
+    },
+  },
 };
 
 export const Positive: Story = {
@@ -100,6 +138,13 @@ export const Positive: Story = {
     children: "Positive button",
     appearance: "positive",
   },
+  parameters: {
+    docs: {
+      description: {
+        story: "Button with positive appearance",
+      },
+    },
+  },
 };
 
 export const PositiveDisabled: Story = {
@@ -110,6 +155,13 @@ export const PositiveDisabled: Story = {
     appearance: "positive",
     disabled: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story: "Disabled button with positive appearance",
+      },
+    },
+  },
 };
 
 export const Negative: Story = {
@@ -119,6 +171,13 @@ export const Negative: Story = {
     children: "Negative button",
     appearance: "negative",
   },
+  parameters: {
+    docs: {
+      description: {
+        story: "Button with negative appearance",
+      },
+    },
+  },
 };
 
 export const NegativeDisabled: Story = {
@@ -129,6 +188,13 @@ export const NegativeDisabled: Story = {
     appearance: "negative",
     disabled: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story: "Disabled button with negative appearance",
+      },
+    },
+  },
 };
 
 export const Brand: Story = {
@@ -138,6 +204,13 @@ export const Brand: Story = {
     children: "Brand button",
     appearance: "brand",
   },
+  parameters: {
+    docs: {
+      description: {
+        story: "Button with brand appearance",
+      },
+    },
+  },
 };
 
 export const BrandDisabled: Story = {
@@ -148,6 +221,13 @@ export const BrandDisabled: Story = {
     appearance: "brand",
     disabled: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story: "Disabled button with brand appearance",
+      },
+    },
+  },
 };
 
 export const Inline: Story = {
@@ -161,6 +241,13 @@ export const Inline: Story = {
   ),
 
   name: "Inline",
+  parameters: {
+    docs: {
+      description: {
+        story: "Button that displays on the same line as the sibling elements",
+      },
+    },
+  },
 };
 
 export const Dense: Story = {
@@ -172,6 +259,13 @@ export const Dense: Story = {
   ),
 
   name: "Dense",
+  parameters: {
+    docs: {
+      description: {
+        story: "Button with reduced vertical padding",
+      },
+    },
+  },
 };
 
 export const Small: Story = {
@@ -185,6 +279,13 @@ export const Small: Story = {
   ),
 
   name: "Small",
+  parameters: {
+    docs: {
+      description: {
+        story: "Button that can fit small text inside",
+      },
+    },
+  },
 };
 
 export const Icon: Story = {
@@ -194,6 +295,13 @@ export const Icon: Story = {
     children: <i className="p-icon--plus"></i>,
     hasIcon: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story: "Button with an icon inside",
+      },
+    },
+  },
 };
 
 export const IconText: Story = {
@@ -208,9 +316,16 @@ export const IconText: Story = {
 
     hasIcon: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story: "Button with both an icon and text inside",
+      },
+    },
+  },
 };
 
-export const IconWithTooltip: Story = {
+export const DisabledWithTooltip: Story = {
   name: "Disabled with tooltip",
 
   args: {
@@ -224,4 +339,48 @@ export const IconWithTooltip: Story = {
       </Tooltip>
     </div>
   ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Disabled button that displays a tooltip when hovered",
+      },
+    },
+  },
+};
+
+export const ButtonAsLink = {
+  name: "Button as link",
+
+  args: {
+    children: "Button as link",
+    appearance: "base",
+    element: "a",
+    href: "#test",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Button that is rendered as an `a` element",
+      },
+    },
+  },
+};
+
+export const ButtonAsLinkDisabled: Story<HTMLProps<HTMLAnchorElement>> = {
+  name: "Button as link disabled",
+
+  args: {
+    children: "Button as link disabled",
+    appearance: "base",
+    element: "a",
+    href: "#test",
+    disabled: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Disabled button that is rendered as an `a` element",
+      },
+    },
+  },
 };