add alignment controls to Storybook

Author: mkernohanbc

packages/react-components/src/stories/AlertBanner.mdx

@@ -59,6 +59,12 @@ The `size` prop (defaults to `medium`) controls the vertical height and font siz
 
 <Canvas of={AlertBannerStories.SmallAlertBanner} />
 
+### Alignment
+
+By default, alert banner content is centered. Set `alignment` to `stretch` to make it full-width:
+
+<Canvas of={AlertBannerStories.FullWidthAlertBanner} />
+
 ### Alert content
 
 Pass content to the `children` slot to populate an alert banner.

packages/react-components/src/stories/AlertBanner.stories.tsx

@@ -22,6 +22,14 @@ const meta = {
         defaultValue: { summary: "medium" },
       },
     },
+    alignment: {
+      options: ["center", "stretch"],
+      control: { type: "radio" },
+      description: "Controls whether banner content is centered or full-width",
+      table: {
+        defaultValue: { summary: "center" },
+      },
+    },
     children: {
       control: { type: "object" },
       description: "Populates the content of the alert",
@@ -72,6 +80,14 @@ export const SmallAlertBanner: Story = {
   },
 };
 
+export const FullWidthAlertBanner: Story = {
+  ...AlertBannerTemplate,
+  args: {
+    alignment: "stretch",
+    ...AlertBannerTemplate.args,
+  },
+};
+
 export const SuccessBanner: Story = {
   ...AlertBannerTemplate,
   args: {