From 7ce732b39843a224b8ec64379fac20746c64864b Mon Sep 17 00:00:00 2001
From: Roberto Sousa <beto.sousa22@gmail.com>
Date: Wed, 21 Oct 2020 00:30:25 +0100
Subject: [PATCH] chore(alert): update alert story

Update the alert story for version 6 and display docs for the props
---
 .storybook/preview.js          |   5 +-
 src/components/Alert/Alert.tsx |   6 +-
 stories/alerts.stories.tsx     | 151 ++++++++++++++++++++++-----------
 3 files changed, 106 insertions(+), 56 deletions(-)

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 5d2f634a..f5cd5dfd 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -8,7 +8,8 @@ export const parameters = {
   },
   options: {
     storySort: {
-      order: ['Welcome'], 
+      method: 'alphabetical',
+      order: ['Welcome', ], 
     },
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
index fe74f845..17c68b18 100644
--- a/src/components/Alert/Alert.tsx
+++ b/src/components/Alert/Alert.tsx
@@ -4,7 +4,7 @@ import BootstrapAlert from 'react-bootstrap/Alert'
 import { ColorVariant } from '../../interfaces'
 import { Button } from '../Button'
 
-interface Props {
+export interface AlertProps {
   /**
    * Defines the color of the alert. Defaults to primary.
    * @default "primary"
@@ -48,8 +48,8 @@ interface State {
  * with the handful of available and flexible alert messages.
  */
 
-class Alert extends Component<Props, State> {
-  constructor(props: Props) {
+class Alert extends Component<AlertProps, State> {
+  constructor(props: AlertProps) {
     super(props)
     this.state = {
       show: true,
diff --git a/stories/alerts.stories.tsx b/stories/alerts.stories.tsx
index b52abe5e..4bc6da1a 100644
--- a/stories/alerts.stories.tsx
+++ b/stories/alerts.stories.tsx
@@ -1,53 +1,102 @@
-import { storiesOf } from '@storybook/react'
+import { Story, Meta } from '@storybook/react/types-6-0'
 import React from 'react'
 
-import { Alert } from '../src'
-
-storiesOf('Alert', module)
-  .addParameters({
-    info: {
-      inline: true,
-    },
-  })
-  .addDecorator((storyFn) => (
-    <div style={{ marginLeft: '2em', marginRight: '2em' }}>{storyFn()}</div>
-  ))
-  .add('Alert', () => (
-    <div>
-      <Alert
-        color="primary"
-        title="This is the title of the alert"
-        message="And this is the message of the alert"
-      />
-      <Alert color="secondary" title="This is an alert with only the title" />
-      <Alert color="success" message="This is an alert with only the message" />
-      <Alert color="danger" title="This alert is dismissible" dismissible />
-      <Alert
-        color="warning"
-        title="This alert is dismissible with a custom label"
-        dismissible
-        closeLabel="Close me"
-      />
-      <Alert color="info" title="This is an info alert" />
-      <Alert color="light" title="This is a light alert" />
-      <Alert
-        color="dark"
-        title="This is a dark alert"
-        message={<strong>With a strong message</strong>}
-      />
-      <Alert
-        title="This is an alert with a custom class"
-        className="customClass"
-        message="And it has a button with a custom class"
-        btnClassName="customClass2"
-        dismissible
-      />
-      <Alert
-        title="This is an alert with a custom style"
-        style={{ height: '50%', width: '50%', border: '2px solid red' }}
-        message="And it has a button with a custom style"
-        btnStyle={{ background: 'red', color: 'white' }}
-        dismissible
-      />
-    </div>
-  ))
+import { Alert, AlertProps } from '../src'
+
+export default {
+  title: 'Alert',
+  component: Alert,
+  decorators: [
+    (St) => (
+      <div style={{ margin: '3em' }}>
+        <St />
+      </div>
+    ),
+  ],
+} as Meta
+// your templates and stories
+
+// We create a “template” of how args map to rendering
+const Template: Story<AlertProps> = (args) => <Alert {...args} />
+
+// main story tha's editable and has the docs for the props
+export const Main = Template.bind({})
+Main.args = {
+  color: 'primary',
+  title: 'This is the title of the alert',
+  message: 'And this is the message of the alert',
+  dismissible: true,
+  closeLabel: 'Close',
+}
+
+// Rest of the stories
+export const Primary = Template.bind({})
+Primary.args = {
+  color: 'primary',
+  title: 'This is the title of the alert',
+  message: 'And this is the message of the alert',
+}
+
+export const Secondary = Template.bind({})
+Secondary.args = {
+  color: 'secondary',
+  title: 'This is an alert with only the title',
+}
+
+export const Success = Template.bind({})
+Success.args = {
+  color: 'success',
+  title: 'This is an alert with only the title',
+}
+
+export const Danger = Template.bind({})
+Danger.args = {
+  color: 'danger',
+  title: 'This alert is dismissible',
+  dismissible: true,
+}
+
+export const Warning = Template.bind({})
+Warning.args = {
+  color: 'warning',
+  title: 'This alert is dismissible with a custom label',
+  dismissible: true,
+  closeLabel: 'Close me',
+}
+
+export const Info = Template.bind({})
+Info.args = {
+  color: 'info',
+  title: 'This is an info alert',
+}
+
+export const Light = Template.bind({})
+Light.args = {
+  color: 'light',
+  title: 'This is an light alert',
+}
+
+export const Dark = Template.bind({})
+Dark.args = {
+  color: 'dark',
+  title: 'This is an dark alert',
+  message: <strong>With a strong message</strong>,
+}
+
+export const CustomClass = Template.bind({})
+CustomClass.args = {
+  title: 'This is an alert with a custom class',
+  className: 'customClass',
+  message: 'And it has a button with a custom class',
+  btnClassName: 'customClass2',
+  dismissible: true,
+}
+
+export const CustomStyle = Template.bind({})
+CustomStyle.args = {
+  title: 'This is an alert with a custom style',
+  style: { height: '50%', width: '50%', border: '2px solid red' },
+  message: 'And it has a button with a custom style',
+  btnStyle: { background: 'red', color: 'white' },
+  dismissible: true,
+}