Merge pull request #628 from RobertoMSousa/alert_storybook_docs

fix(alert): update alert story

Author: matteovivona

.storybook/preview.js

@@ -8,7 +8,8 @@ export const parameters = {
   },
   options: {
     storySort: {
-      order: ['Welcome'], 
+      method: 'alphabetical',
+      order: ['Welcome', ], 
     },
   }
-}
+}

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,

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,
+}