storybook components

sb/package-lock.json

@@ -7,6 +7,9 @@
     "": {
       "name": "angular-latest",
       "version": "0.0.0",
+      "workspaces": [
+        "../my-workspace/*"
+      ],
       "dependencies": {
         "@angular/animations": "^20.3.0",
         "@angular/common": "^20.3.0",

sb/src/app/composants/badges/badges.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-badges',
+  imports: [],
+  template: `
+    <p>
+      badges works!
+    </p>
+  `,
+  styles: ``
+})
+export class Badges {
+
+}

sb/src/app/composants/boutons/boutons.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-boutons',
+  imports: [],
+  template: `
+    <p>
+      boutons works!
+    </p>
+  `,
+  styles: ``
+})
+export class Boutons {
+
+}

sb/src/app/composants/checkboxes/checkboxes.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-checkboxes',
+  imports: [],
+  template: `
+    <p>
+      checkboxes works!
+    </p>
+  `,
+  styles: ``
+})
+export class Checkboxes {
+
+}

sb/src/app/composants/dropdown/dropdown.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-dropdown',
+  imports: [],
+  template: `
+    <p>
+      dropdown works!
+    </p>
+  `,
+  styles: ``
+})
+export class Dropdown {
+
+}

sb/src/app/composants/infobulles/infobulles.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-infobulles',
+  imports: [],
+  template: `
+    <p>
+      infobulles works!
+    </p>
+  `,
+  styles: ``
+})
+export class Infobulles {
+
+}

sb/src/app/composants/inputs/inputs.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-inputs',
+  imports: [],
+  template: `
+    <p>
+      inputs works!
+    </p>
+  `,
+  styles: ``
+})
+export class Inputs {
+
+}

sb/src/app/composants/radio/radio.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-radio',
+  imports: [],
+  template: `
+    <p>
+      radio works!
+    </p>
+  `,
+  styles: ``
+})
+export class Radio {
+
+}

sb/src/app/composants/steppers/steppers.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-steppers',
+  imports: [],
+  template: `
+    <p>
+      steppers works!
+    </p>
+  `,
+  styles: ``
+})
+export class Steppers {
+
+}

sb/src/app/composants/tabulations/tabulations.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tabulations',
+  imports: [],
+  template: `
+    <p>
+      tabulations works!
+    </p>
+  `,
+  styles: ``
+})
+export class Tabulations {
+
+}

sb/src/app/composants/tags-chips/tags-chips.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tags-chips',
+  imports: [],
+  template: `
+    <p>
+      tags-chips works!
+    </p>
+  `,
+  styles: ``
+})
+export class TagsChips {
+
+}

sb/src/app/composants/textarea/textarea.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-textarea',
+  imports: [],
+  template: `
+    <p>
+      textarea works!
+    </p>
+  `,
+  styles: ``
+})
+export class Textarea {
+
+}

sb/src/app/composants/toggle-switch/toggle-switch.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-toggle-switch',
+  imports: [],
+  template: `
+    <p>
+      toggle-switch works!
+    </p>
+  `,
+  styles: ``
+})
+export class ToggleSwitch {
+
+}

sb/src/app/foundations/charte/charte.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-charte',
+  imports: [],
+  template: `
+    <p>
+      charte works!
+    </p>
+  `,
+  styles: ``
+})
+export class Charte {
+
+}

sb/src/app/foundations/couleurs/couleurs.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-couleurs',
+  imports: [],
+  template: `
+    <p>
+      couleurs works!
+    </p>
+  `,
+  styles: ``
+})
+export class Couleurs {
+
+}

sb/src/app/foundations/effets/effets.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-effets',
+  imports: [],
+  template: `
+    <p>
+      effets works!
+    </p>
+  `,
+  styles: ``
+})
+export class Effets {
+
+}

sb/src/app/foundations/icones/icones.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-icones',
+  imports: [],
+  template: `
+    <p>
+      icones works!
+    </p>
+  `,
+  styles: ``
+})
+export class Icones {
+
+}

sb/src/app/foundations/layout/layout.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-layout',
+  imports: [],
+  template: `
+    <p>
+      layout works!
+    </p>
+  `,
+  styles: ``
+})
+export class Layout {
+
+}

sb/src/app/foundations/radius/radius.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-radius',
+  imports: [],
+  template: `
+    <p>
+      radius works!
+    </p>
+  `,
+  styles: ``
+})
+export class Radius {
+
+}

sb/src/app/foundations/strokes/strokes.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-strokes',
+  imports: [],
+  template: `
+    <p>
+      strokes works!
+    </p>
+  `,
+  styles: ``
+})
+export class Strokes {
+
+}

sb/src/app/foundations/typographies/typographies.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-typographies',
+  imports: [],
+  template: `
+    <p>
+      typographies works!
+    </p>
+  `,
+  styles: ``
+})
+export class Typographies {
+
+}

sb/src/app/m-button/m-button.ts

@@ -0,0 +1,203 @@
+import { Component, Input } from '@angular/core';
+import { ButtonKindType, ButtonSizeType, inconPositionKindType } from '../../../../my-workspace/projects/sae-lib/buttons/main-button/main-button';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-m-button', 
+  imports: [CommonModule],
+  template: `
+   <button
+  class="sae-main-button is-{{kind}} is-size-{{size}}"
+>
+
+  @if (icon && inconPosition !== "right") {
+    <i class="ri ri-{{icon}}"></i>
+  }
+  <span class="label">
+    {{ label }}
+    <ng-content></ng-content>
+  </span>
+  @if (divider) {
+    <span class="pipe">|</span>
+  }
+  @if (icon && inconPosition == "right") {
+    <i class="ri ri-{{icon}}"></i>
+  }
+</button>
+  `,
+  styles: `
+  @use "../../../../my-workspace/projects/sae-lib/src/styles/shadows.scss";
+@use "../../../../my-workspace/projects/sae-lib/src/styles/states.scss";
+@use "../../../../my-workspace/projects/sae-lib/src/styles/variables.scss";
+@use "sass:color";
+
+:host {
+  display: inline-block;
+  font-family: Barlow;
+
+
+  .pipe {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+
+  button {
+
+    background: transparent;
+    color: shadows.$neutral-white;
+    border-radius: shadows.$radius-main;
+    padding: 17px 24px;
+    cursor: pointer;
+    transition: all 0.25s ease;
+    border: 0;
+    width: 100%;
+    margin-top: 8px;
+    font-size: 18px;
+
+    i {
+      width: 16px;
+      height: 16px;
+    }
+
+    //&:hover, &:active, &:focus {
+    //  transition: all 0.25s ease;
+    //}
+
+    &:hover {
+      background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%));
+    }
+
+    &.is-size {
+      &-large {
+        padding: 17px 24px;
+
+        font-size: 18px;
+        font-weight: 600;
+        line-height: 26px;
+      }
+
+      &-medium {
+        padding: 14px 18px;
+        border-radius: var(--radius-2, 8px);
+
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 20px;
+      }
+
+      &-small {
+        padding: 14px 10px;
+        border-radius: var(--radius-2, 8px);
+
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 20px;
+
+      }
+
+      &-extrasm {
+        padding: 10px 10px;
+        border-radius: var(--radius-2, 4px);
+        color: var(--Colors-Blanc, #FFF);
+
+
+        font-size: 12px;
+        font-weight: 600;
+        line-height: 18px;
+      }
+    }
+
+    &.is-disabled {
+      background-color: #BED7EE;
+      color: white;
+    }
+
+    &.is-primary {
+      background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%));
+      color: variables.$neutral-white;
+      border-color: color.adjust(variables.$primary-color, $lightness: - 10%);
+
+      &:hover {
+        background: var(--Hover, linear-gradient(70deg, #073A7C 43.99%, #1767AD 94.38%, #255B8E 126.68%));
+      }
+
+      &:focus {
+        outline: 3px solid var(--Colors-Principal-100, #96BEE4);
+        background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%));
+      }
+
+      &.is-disabled {
+        background-color: #BED7EE !important;
+        color: white;
+      }
+    }
+
+
+    &.is-secondary {
+      //background: variables.$neutral-white;
+      background: white;
+      border: solid 1px #255B8E;
+      color: variables.$neutral-white;
+      color: #255B8E;
+
+      &.is-disabled {
+        background-color: #BED7EE;
+        color: white;
+      }
+    }
+
+    &.is-ghost {
+      background: variables.$neutral-white;
+      color: #255B8E;
+      border: 0;
+
+      &:focus {
+        background: variables.$neutral-white;
+      }
+
+      &.is-disabled {
+        background-color: #BED7EE;
+        color: #BED7EE;
+      }
+
+      &:hover {
+        background: #dedede;
+      }
+
+    }
+
+    &.is-link {
+      background: variables.$neutral-white;
+      color: #255B8E;
+      border: 0;
+
+      &:hover {
+        background: #dedede;
+      }
+
+
+      .label {
+        text-decoration: underline;
+        text-decoration-color: variables.$primary-color;
+      }
+
+      &.is-disabled {
+        background-color: #BED7EE;
+        color: #BED7EE;
+      }
+    }
+
+
+  }
+}
+`
+})
+export class MButton {
+  @Input() disabled: boolean = false;
+  @Input() divider: boolean = false;
+  @Input() label: string = '';
+  @Input() icon: string = '';
+  @Input() inconPosition: inconPositionKindType = 'left';
+  @Input() size: ButtonSizeType = '';
+  @Input() kind: ButtonKindType = '';
+}

sb/src/app/patterns/breadcrumb/breadcrumb.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-breadcrumb',
+  imports: [],
+  template: `
+    <p>
+      breadcrumb works!
+    </p>
+  `,
+  styles: ``
+})
+export class Breadcrumb {
+
+}

sb/src/app/patterns/chat-message/chat-message.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-chat-message',
+  imports: [],
+  template: `
+    <p>
+      chat-message works!
+    </p>
+  `,
+  styles: ``
+})
+export class ChatMessage {
+
+}

sb/src/app/patterns/error-message/error-message.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-error-message',
+  imports: [],
+  template: `
+    <p>
+      error-message works!
+    </p>
+  `,
+  styles: ``
+})
+export class ErrorMessage {
+
+}

sb/src/app/patterns/feedack/feedack.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-feedack',
+  imports: [],
+  template: `
+    <p>
+      feedack works!
+    </p>
+  `,
+  styles: ``
+})
+export class Feedack {
+
+}

sb/src/app/patterns/fileuploader/fileuploader.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-fileuploader',
+  imports: [],
+  template: `
+    <p>
+      fileuploader works!
+    </p>
+  `,
+  styles: ``
+})
+export class Fileuploader {
+
+}

sb/src/app/patterns/footer/footer.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  imports: [],
+  template: `
+    <p>
+      footer works!
+    </p>
+  `,
+  styles: ``
+})
+export class Footer {
+
+}

sb/src/app/patterns/header/header.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-header',
+  imports: [],
+  template: `
+    <p>
+      header works!
+    </p>
+  `,
+  styles: ``
+})
+export class Header {
+
+}

sb/src/app/patterns/navbar/navbar.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-navbar',
+  imports: [],
+  template: `
+    <p>
+      navbar works!
+    </p>
+  `,
+  styles: ``
+})
+export class Navbar {
+
+}

sb/src/app/patterns/pagination/pagination.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-pagination',
+  imports: [],
+  template: `
+    <p>
+      pagination works!
+    </p>
+  `,
+  styles: ``
+})
+export class Pagination {
+
+}

sb/src/app/patterns/rgpd/rgpd.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-rgpd',
+  imports: [],
+  template: `
+    <p>
+      rgpd works!
+    </p>
+  `,
+  styles: ``
+})
+export class Rgpd {
+
+}

sb/src/app/patterns/table/table.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-table',
+  imports: [],
+  template: `
+    <p>
+      table works!
+    </p>
+  `,
+  styles: ``
+})
+export class Table {
+
+}

sb/src/assets/fonts/Barlow/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2017 The Barlow Project Authors (https://github.com/jpt/barlow)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

sb/src/preview-head.html

@@ -0,0 +1,136 @@
+<style type="text/scss">
+  
+  @font-face {
+    font-family: 'Barlow';
+    src: url('fonts/Barlow/Barlow-Thin.ttf') format('truetype');
+    font-weight: 100;
+    font-style: normal;
+  }
+
+
+  @font-face {
+    font-family: 'Barlow';
+    src: url('fonts/Barlow/Barlow-ThinItalic.ttf') format('truetype');
+    font-weight: 100;
+    font-style: italic;
+  }
+
+  
+  @font-face {
+    font-family: 'Barlow';
+    src: url('fonts/Barlow/Barlow-ExtraLight.ttf') format('truetype');
+    font-weight: 200;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: 'Barlow';
+    src: url('fonts/Barlow/Barlow-ExtraLightItalic.ttf') format('truetype');
+    font-weight: 200;
+    font-style: italic;
+  }
+
+  @font-face {
+    font-family: 'Barlow';
+    src: url('fonts/Barlow/Barlow-Light.ttf') format('truetype');
+    font-weight: 300;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: 'Barlow';
+    src: url('fonts/Barlow/Barlow-LightItalic.ttf') format('truetype');
+    font-weight: 300;
+    font-style: italic;
+  }
+
+  @font-face {
+    font-family: 'Barlow';
+    src: url('fonts/Barlow/Barlow-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: 'Barlow';
+    src: url('fonts/Barlow/Barlow-Italic.ttf') format('truetype');
+    font-weight: 400;
+    font-style: italic;
+  }
+
+  
+  @font-face {
+    font-family: 'Barlow';
+    src: url('fonts/Barlow/Barlow-Medium.ttf') format('truetype');
+    font-weight: 500;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: 'Barlow';
+    src: url('fonts/Barlow/Barlow-MediumItalic.ttf') format('truetype');
+    font-weight: 500;
+    font-style: italic;
+  }
+
+  // Semi Bold (600)
+  @font-face {
+    font-family: 'Barlow';
+    src: url('fonts/Barlow/Barlow-SemiBold.ttf') format('truetype');
+    font-weight: 600;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: 'Barlow';
+    src: url('fonts/Barlow/Barlow-SemiBoldItalic.ttf') format('truetype');
+    font-weight: 600;
+    font-style: italic;
+  }
+
+  // Bold (700)
+  @font-face {
+    font-family: 'Barlow';
+    src: url('fonts/Barlow/Barlow-Bold.ttf') format('truetype');
+    font-weight: 700;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: 'Barlow';
+    src: url('fonts/Barlow/Barlow-BoldItalic.ttf') format('truetype');
+    font-weight: 700;
+    font-style: italic;
+  }
+
+  // Extra Bold (800)
+  @font-face {
+    font-family: 'Barlow';
+    src: url('fonts/Barlow/Barlow-ExtraBold.ttf') format('truetype');
+    font-weight: 800;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: 'Barlow';
+    src: url('fonts/Barlow/Barlow-ExtraBoldItalic.ttf') format('truetype');
+    font-weight: 800;
+    font-style: italic;
+  }
+
+  // Black (900)
+  @font-face {
+    font-family: 'Barlow';
+    src: url('fonts/Barlow/Barlow-Black.ttf') format('truetype');
+    font-weight: 900;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: 'Barlow';
+    src: url('fonts/Barlow/Barlow-BlackItalic.ttf') format('truetype');
+    font-weight: 900;
+    font-style: italic;
+  }
+
+</style>

sb/src/stories/button.stories.ts

@@ -2,20 +2,29 @@ import { applicationConfig } from '@storybook/angular';
 import type { Meta, StoryObj } from '@storybook/angular';
 import { provideAnimations } from '@angular/platform-browser/animations';
 
-import { MainButton } from '../../../my-workspace/projects/sae-lib/buttons/main-button/main-button';
+import { MButton } from '../app/m-button/m-button';
 
-const meta: Meta<MainButton> = {
+const meta: Meta<MButton> = {
-  title: 'SAE/Main Button',
+  title: 'Components/Buttons/Main Button',
-  component: MainButton,
+  component: MButton,
   decorators: [
     applicationConfig({ providers: [provideAnimations()] })
   ],
-  tags: ['autodocs']
+  tags: ['autodocs'],
+  argTypes: {
+    kind: { control: 'select', options: ['', 'primary', 'secondary', 'ghost', 'link'] },
+    size: { control: 'select', options: ['', 'large', 'medium', 'small', 'extrasm'] },
+    inconPosition: { control: 'inline-radio', options: ['', 'left', 'right'] },
+    label: { control: 'text' },
+    icon: { control: 'text' },
+    divider: { control: 'boolean' },
+    disabled: { control: 'boolean' }
+  }
 };
 
 export default meta;
 
-type Story = StoryObj<MainButton>;
+type Story = StoryObj<MButton>;
 
 export const Primary: Story = {
   render: (args) => ({ props: args }),
@@ -28,3 +37,126 @@ export const Primary: Story = {
     disabled: false
   }
 };
+
+export const Secondary: Story = {
+  render: (args) => ({ props: args }),
+  args: {
+    label: 'Annuler',
+    kind: 'secondary',
+    size: 'medium',
+    icon: '',
+    divider: false,
+    disabled: false
+  }
+};
+
+export const Ghost: Story = {
+  render: (args) => ({ props: args }),
+  args: {
+    label: 'Option',
+    kind: 'ghost',
+    size: 'medium',
+    icon: '',
+    divider: false,
+    disabled: false
+  }
+};
+
+export const Link: Story = {
+  render: (args) => ({ props: args }),
+  args: {
+    label: 'En savoir plus',
+    kind: 'link',
+    size: 'medium',
+    icon: '',
+    divider: false,
+    disabled: false
+  }
+};
+
+export const Disabled: Story = {
+  render: (args) => ({ props: args }),
+  args: {
+    label: 'Indisponible',
+    kind: 'primary',
+    size: 'medium',
+    icon: '',
+    divider: false,
+    disabled: true
+  }
+};
+
+export const Large: Story = {
+  render: (args) => ({ props: args }),
+  args: {
+    label: 'Valider',
+    kind: 'primary',
+    size: 'large',
+    icon: '',
+    divider: false,
+    disabled: false
+  }
+};
+
+export const Small: Story = {
+  render: (args) => ({ props: args }),
+  args: {
+    label: 'Valider',
+    kind: 'primary',
+    size: 'small',
+    icon: '',
+    divider: false,
+    disabled: false
+  }
+};
+
+export const ExtraSmall: Story = {
+  render: (args) => ({ props: args }),
+  args: {
+    label: 'Valider',
+    kind: 'primary',
+    size: 'extrasm',
+    icon: '',
+    divider: false,
+    disabled: false
+  }
+};
+
+export const WithIconLeft: Story = {
+  render: (args) => ({ props: args }),
+  args: {
+    label: 'Télécharger',
+    kind: 'primary',
+    size: 'medium',
+    icon: 'download-2-line',
+    inconPosition: 'left',
+    divider: false,
+    disabled: false
+  }
+};
+
+export const WithIconRight: Story = {
+  render: (args) => ({ props: args }),
+  args: {
+    label: 'Suivant',
+    kind: 'primary',
+    size: 'medium',
+    icon: 'arrow-right-line',
+    inconPosition: 'right',
+    divider: false,
+    disabled: false
+  }
+};
+
+export const WithDivider: Story = {
+  render: (args) => ({ props: args }),
+  args: {
+    label: 'Exporter',
+    kind: 'secondary',
+    size: 'medium',
+    icon: 'download-2-line',
+    inconPosition: 'left',
+    divider: true,
+    disabled: false
+  }
+};