storybook docs and examples

bcgov · Aug 12, 2024 · 198a322 · 198a322
1 parent 411cede
commit 198a322
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/packages/react-components/src/stories/ButtonGroup.stories.tsx b/packages/react-components/src/stories/ButtonGroup.stories.tsx
@@ -4,7 +4,7 @@ import { Button, ButtonGroup } from "../components";
 import { ButtonGroupProps } from "@/components/ButtonGroup";
 
 const meta = {
-  title: "Components/Button/Button group",
+  title: "Components/Button/ButtonGroup",
   component: ButtonGroup,
   parameters: {
     layout: "centered",

diff --git a/packages/react-components/src/stories/InlineAlert.mdx b/packages/react-components/src/stories/InlineAlert.mdx
@@ -72,6 +72,10 @@ Use the `title` and optional `description` props to populate an alert's content:
 
 <Canvas of={InlineAlertStories.InlineAlertTemplate} />
 
+Use the `buttons` prop to pass an array of button components, which are rendered inside a [ButtonGroup](/docs/components-button-button-group--docs):
+
+<Canvas of={InlineAlertStories.AlertWithButtons} />
+
 Pass `isIconHidden` to hide the theme icon on the left:
 
 <Canvas of={InlineAlertStories.InlineAlertWithoutIcon} />

diff --git a/packages/react-components/src/stories/InlineAlert.stories.tsx b/packages/react-components/src/stories/InlineAlert.stories.tsx
@@ -23,6 +23,10 @@ const meta = {
       control: { type: "text" },
       description: "Sets the alert text",
     },
+    buttons: {
+      control: { type: "object" },
+      description: "Expects an array of button components",
+    },
     isIconHidden: {
       control: { type: "boolean" },
       description: "Show or hide the left icon",