refactor(storybook): reorganize design system

Add more stories for each components and change some components
categories for better organization.

1 files changed, 60 insertions, 9 deletions

diff --git a/src/components/molecules/layout/card.stories.tsx b/src/components/molecules/layout/card.stories.tsx
index a07f8dc..ed78d00 100644
--- a/src/components/molecules/layout/card.stories.tsx
+++ b/src/components/molecules/layout/card.stories.tsx
@@ -1,9 +1,12 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import CardComponent from './card';
+import Card from './card';
 
+/**
+ * Card - Storybook Meta
+ */
 export default {
-  title: 'Molecules/Layout',
-  component: CardComponent,
+  title: 'Molecules/Layout/Card',
+  component: Card,
   argTypes: {
     cover: {
       description: 'The card cover data (src, dimensions, alternative text).',
@@ -53,6 +56,8 @@ export default {
     titleLevel: {
       control: {
         type: 'number',
+        min: 1,
+        max: 6,
       },
       description: 'The title level.',
       type: {
@@ -71,17 +76,16 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof CardComponent>;
+} as ComponentMeta<typeof Card>;
 
-const Template: ComponentStory<typeof CardComponent> = (args) => (
-  <CardComponent {...args} />
-);
+const Template: ComponentStory<typeof Card> = (args) => <Card {...args} />;
 
 const cover = {
   alt: 'A picture',
   height: 480,
   src: 'http://placeimg.com/640/480',
   width: 640,
+  unoptimized: true,
 };
 
 const meta = [
@@ -92,10 +96,57 @@ const meta = [
   },
 ];
 
-export const Card = Template.bind({});
-Card.args = {
+/**
+ * Card Stories - Default
+ */
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Veritatis dicta quod',
+  titleLevel: 2,
+  url: '#',
+};
+
+/**
+ * Card Stories - With cover
+ */
+export const WithCover = Template.bind({});
+WithCover.args = {
+  cover,
+  title: 'Veritatis dicta quod',
+  titleLevel: 2,
+  url: '#',
+};
+
+/**
+ * Card Stories - With meta
+ */
+export const WithMeta = Template.bind({});
+WithMeta.args = {
+  meta,
+  title: 'Veritatis dicta quod',
+  titleLevel: 2,
+  url: '#',
+};
+
+/**
+ * Card Stories - With tagline
+ */
+export const WithTagline = Template.bind({});
+WithTagline.args = {
+  tagline: 'Ullam accusantium ipsa',
+  title: 'Veritatis dicta quod',
+  titleLevel: 2,
+  url: '#',
+};
+
+/**
+ * Card Stories - With all data
+ */
+export const WithAll = Template.bind({});
+WithAll.args = {
   cover,
   meta,
+  tagline: 'Ullam accusantium ipsa',
   title: 'Veritatis dicta quod',
   titleLevel: 2,
   url: '#',