From caf3ed26c62899e1326168ece9d1274b8e98cd08 Mon Sep 17 00:00:00 2001
From: Enzo Vezzaro <enzo-vezzaro@live.it>
Date: Mon, 30 May 2022 11:56:34 -0400
Subject: [PATCH] added AnnouncementBanner story

---
 .../AnnouncementBanner/index.stories.tsx      | 65 +++++++++++++++++++
 .../@shared/AnnouncementBanner/index.tsx      | 14 ++--
 2 files changed, 73 insertions(+), 6 deletions(-)
 create mode 100644 src/components/@shared/AnnouncementBanner/index.stories.tsx

diff --git a/src/components/@shared/AnnouncementBanner/index.stories.tsx b/src/components/@shared/AnnouncementBanner/index.stories.tsx
new file mode 100644
index 000000000..356050c13
--- /dev/null
+++ b/src/components/@shared/AnnouncementBanner/index.stories.tsx
@@ -0,0 +1,65 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import AddAnnouncementBanner, {
+  AnnouncementBannerProps
+} from '@shared/AnnouncementBanner'
+
+export default {
+  title: 'Component/@shared/AnnouncementBanner',
+  component: AddAnnouncementBanner
+} as ComponentMeta<typeof AddAnnouncementBanner>
+
+const Template: ComponentStory<typeof AddAnnouncementBanner> = (
+  args: AnnouncementBannerProps
+) => <AddAnnouncementBanner {...args} />
+
+interface Props {
+  args: AnnouncementBannerProps
+}
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce malesuada ipsum ac enim auctor placerat.',
+  action: {
+    name: 'see more',
+    handleAction: () => {
+      alert('Link clicked!')
+    }
+  }
+}
+
+export const Success: Props = Template.bind({})
+Success.args = {
+  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce malesuada ipsum ac enim auctor placerat.',
+  state: 'success',
+  action: {
+    name: 'see more',
+    handleAction: () => {
+      alert('Link clicked!')
+    }
+  }
+}
+
+export const Warning: Props = Template.bind({})
+Warning.args = {
+  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce malesuada ipsum ac enim auctor placerat.',
+  state: 'warning',
+  action: {
+    name: 'see more',
+    handleAction: () => {
+      alert('Link clicked!')
+    }
+  }
+}
+
+export const Error: Props = Template.bind({})
+Error.args = {
+  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce malesuada ipsum ac enim auctor placerat.',
+  state: 'error',
+  action: {
+    name: 'see more',
+    handleAction: () => {
+      alert('Link clicked!')
+    }
+  }
+}
diff --git a/src/components/@shared/AnnouncementBanner/index.tsx b/src/components/@shared/AnnouncementBanner/index.tsx
index 2e1e532b9..1e0627f27 100644
--- a/src/components/@shared/AnnouncementBanner/index.tsx
+++ b/src/components/@shared/AnnouncementBanner/index.tsx
@@ -12,17 +12,19 @@ export interface AnnouncementAction {
   handleAction: () => void
 }
 
+export interface AnnouncementBannerProps {
+  text: string
+  action?: AnnouncementAction
+  state?: 'success' | 'warning' | 'error'
+  className?: string
+}
+
 export default function AnnouncementBanner({
   text,
   action,
   state,
   className
-}: {
-  text: string
-  action?: AnnouncementAction
-  state?: 'success' | 'warning' | 'error'
-  className?: string
-}): ReactElement {
+}: AnnouncementBannerProps): ReactElement {
   const styleClasses = cx({
     banner: true,
     error: state === 'error',