up storybook main button

airwatch/src/app/buttons/main-button/main-button.stories.ts

@@ -1,27 +1,19 @@
 import type {Meta, StoryObj} from '@storybook/angular';
 import {MainButton} from './main-button';
-import {moduleMetadata} from '@storybook/angular';
-import {CommonModule} from '@angular/common';
 
 // More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
 const meta: Meta<MainButton> = {
   title: 'composants/boutons/MainButton',
   component: MainButton,
   tags: ['autodocs'],
-  decorators: [
-    moduleMetadata({
-      imports: [CommonModule],
-      providers: []
-    })
-  ],
   argTypes: {
+    disabled: {control: 'boolean'},
+    divider: {control: 'boolean'},
     label: {control: 'text'},
     icon: {control: 'text'},
-    kind: {
-      control: 'select',
-      options: ['', 'primary', 'secondary', 'info', 'success', 'warning', 'danger'],
-      description: 'Style du bouton'
-    },
+    inconPosition: {control: 'select', options: ['left', 'right']},
+    size: {control: 'select', options: ['', 'large', 'medium', 'small', 'extrasm']},
+    kind: {control: 'select', options: ['', 'primary', 'secondary', 'ghost', 'link']},
   },
 };
 
@@ -29,66 +21,146 @@ export default meta;
 type Story = StoryObj<MainButton>;
 
 // More on writing stories with args: https://storybook.js.org/docs/angular/writing-stories/args
+export const Default: Story = {
+  args: {
+    label: 'Call to action',
+    kind: 'primary',
+    size: 'large',
+    disabled: false,
+    divider: true,
+    icon: 'arrow-right-line',
+    inconPosition: 'right',
+  },
+};
+
 export const Primary: Story = {
   args: {
-    label: 'Button',
-    icon: 'home-line-2',
-    kind: 'primary'
+    label: 'Primary Button',
+    kind: 'primary',
+    size: 'medium',
+    disabled: false,
+    divider: false,
+    icon: '',
+    inconPosition: 'left',
   },
 };
 
 export const Secondary: Story = {
   args: {
     label: 'Secondary Button',
-    icon: 'settings-line',
-    kind: 'secondary'
-  },
-};
-
-export const Info: Story = {
-  args: {
-    label: 'Info Button',
-    icon: 'information-line',
-    kind: 'info'
-  },
-};
-
-export const Success: Story = {
-  args: {
-    label: 'Success Button',
-    icon: 'check-line',
-    kind: 'success'
-  },
-};
-
-export const Warning: Story = {
-  args: {
-    label: 'Warning Button',
-    icon: 'alert-line',
-    kind: 'warning'
-  },
-};
-
-export const Danger: Story = {
-  args: {
-    label: 'Danger Button',
-    icon: 'close-circle-line',
-    kind: 'danger'
-  },
-};
-
-export const WithoutIcon: Story = {
-  args: {
-    label: 'Button without icon',
+    kind: 'secondary',
+    size: 'medium',
+    disabled: false,
+    divider: false,
     icon: '',
-    kind: 'primary'
+    inconPosition: 'left',
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    label: 'Ghost Button',
+    kind: 'ghost',
+    size: 'medium',
+    disabled: false,
+    divider: false,
+    icon: '',
+    inconPosition: 'left',
+  },
+};
+
+export const Link: Story = {
+  args: {
+    label: 'Link Button',
+    kind: 'link',
+    size: 'medium',
+    disabled: false,
+    divider: false,
+    icon: '',
+    inconPosition: 'left',
   },
 };
 
 export const WithIcon: Story = {
   args: {
-    label: 'Button with icon',
-    icon: 'user-line',
-    kind: ''
+    label: 'Button with Icon',
+    kind: 'primary',
+    size: 'medium',
+    disabled: false,
+    divider: false,
+    icon: 'arrow-right-line',
+    inconPosition: 'left',
+  },
+};
+
+export const WithIconRight: Story = {
+  args: {
+    label: 'Button with Icon Right',
+    kind: 'primary',
+    size: 'medium',
+    disabled: false,
+    divider: false,
+    icon: 'arrow-right-line',
+    inconPosition: 'right',
+  },
+};
+
+export const WithDivider: Story = {
+  args: {
+    label: 'Button with Divider',
+    kind: 'primary',
+    size: 'medium',
+    disabled: false,
+    divider: true,
+    icon: 'arrow-right-line',
+    inconPosition: 'right',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: 'Disabled Button',
+    kind: 'primary',
+    size: 'medium',
+    disabled: true,
+    divider: false,
+    icon: '',
+    inconPosition: 'left',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    label: 'Large Button',
+    kind: 'primary',
+    size: 'large',
+    disabled: false,
+    divider: false,
+    icon: '',
+    inconPosition: 'left',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    label: 'Small Button',
+    kind: 'primary',
+    size: 'small',
+    disabled: false,
+    divider: false,
+    icon: '',
+    inconPosition: 'left',
+  },
+};
+
+export const ExtraSmall: Story = {
+  args: {
+    label: 'Extra Small Button',
+    kind: 'primary',
+    size: 'extrasm',
+    disabled: false,
+    divider: false,
+    icon: '',
+    inconPosition: 'left',
   },
 };