Menu docs

couds · Apr 1, 2021 · 82c0a9d · 82c0a9d
1 parent de9d837
commit 82c0a9d
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 85 deletions.
diff --git a/src/components/menu/menu.story.mdx b/src/components/menu/menu.story.mdx
@@ -7,10 +7,6 @@ import { Message } from '../../index';
 
 # Menu
 
-<Canvas>
-  <Story story={stories.BasicUsage} name="Menu" />
-</Canvas>
-
 The `Menu` component allows you to create vertical navigation menus. It has two sub-components:
 
 - `Menu.List` defines a section in the menu with a title.
@@ -39,6 +35,12 @@ The `Menu` component allows you to create vertical navigation menus. It has two
 
 <ArgsTable of={Menu.List.Item} />
 
+## Example 
+
+<Canvas>
+  <Story story={stories.BasicUsage} name="Menu" />
+</Canvas>
+
 
 ## Related
 

diff --git a/src/components/message/message.story.js b/src/components/message/message.story.js
@@ -1,13 +1,16 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 import { Message, Button } from '../../index';
 import CONSTANTS from '../../constants';
 
-export const BasicUsage = (args) => (
+export const BasicUsage = ({ withoutHeader, ...args }) => (
   <Message {...args}>
-    <Message.Header>
-      Title
-      <Button remove />
-    </Message.Header>
+    {!withoutHeader && (
+      <Message.Header>
+        Title
+        <Button remove />
+      </Message.Header>
+    )}
     <Message.Body>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}
       <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
@@ -37,56 +40,10 @@ BasicUsage.argTypes = {
       options: ['small', 'medium', 'large'],
     },
   },
-};
-
-export const DifferentColors = () => (
-  <>
-    <Message color="info">
-      <Message.Header>
-        Title
-        <Button remove />
-      </Message.Header>
-      <Message.Body>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}
-        <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
-        nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida
-        purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac{' '}
-        <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
-        sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna
-        a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
-      </Message.Body>
-    </Message>
-    <Message color="danger">
-      <Message.Header>
-        Title
-        <Button remove />
-      </Message.Header>
-      <Message.Body>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}
-        <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
-        nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida
-        purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac{' '}
-        <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
-        sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna
-        a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
-      </Message.Body>
-    </Message>
-  </>
-);
-
-export const BodyOnly = (args) => (
-  <Message {...args}>
-    <Message.Body>This is some profound, inspirational message.</Message.Body>
-  </Message>
-);
-
-BodyOnly.argTypes = {
-  color: {
-    description: 'Color of the message block',
-    defaultValue: '',
+  withoutHeader: {
+    name: 'Hide Header',
     control: {
-      type: 'select',
-      options: Object.values(CONSTANTS.COLORS),
+      type: 'boolean',
     },
   },
 };

diff --git a/src/components/message/message.story.mdx b/src/components/message/message.story.mdx
@@ -6,39 +6,18 @@ import * as stories from './message.story';
 
 # Message
 
-<Canvas>
-  <Story story={stories.BasicUsage} />
-</Canvas>
-
 A colored message block that can be used to emphasize content or used as a notification banner. Use `Message.Header`
 to create a header of the block, and `Message.Body` for the body of the block.
 
-<Message color="primary">
-  <Message.Header>Meta!</Message.Header>
-  <Message.Body>
-    <code>Message</code> is used extensively in this doc. In fact, I am a{' '}
-    <code>Message</code> myself!
-  </Message.Body>
-</Message>
+The style of the message change depending if the Header is included or not, Play with the Controls in the canvas to
+ see how this component behave with different props
 
 ## Props
 
 <ArgsTable of={Message} />
 
-## Colors
-
-You can change the color of the message block easily with the `color` prop:
-
-<Story story={stories.DifferentColors} />
-
-## Sizes
+## Example
 
-You can also adjust the size of the message block with the `size` prop:
-
-<Story story={stories.DifferentSizes} />
-
-## Body-only message blocks
-
-You can create a `Message` without a header (`Message.Header`). You can use this to, for example, display quotes.
-
-<Story story={stories.BodyOnly} />
+<Canvas>
+  <Story story={stories.BasicUsage} name="Message" />
+</Canvas>