From d19746aad60e8573e0a4ad4c1108af119a10664f Mon Sep 17 00:00:00 2001
From: Jordan Dullier <jordan.dullier29@gmail.com>
Date: Tue, 1 Oct 2024 12:03:02 +0200
Subject: [PATCH] icon button component

---
 src/stories/Button.stories.ts | 10 ++++++----
 src/stories/Button.vue        | 14 +++++++++++---
 src/stories/button.css        | 24 +++++++++++++++++++++++-
 3 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/src/stories/Button.stories.ts b/src/stories/Button.stories.ts
index 3cd6f07..4107303 100644
--- a/src/stories/Button.stories.ts
+++ b/src/stories/Button.stories.ts
@@ -12,12 +12,14 @@ const meta = {
     size: { control: 'select', options: ['small', 'medium', 'large'] },
     variant: { options: ['contained', 'outlined', 'subtle'] },
     type: { options: ['primary', 'destructive'] },
+    shape: { options: ['rounded','squared'] },
     label: {
-      options: ['Sans icone', 'Icone droite', 'Icone gauche'],
+      options: ['Sans icône', 'Icône droite', 'Icône gauche', 'Icône seule'],
       mapping: {
-          'Sans icone': { text: 'Button' },
-          'Icone droite': { text: 'Button', icon: { name: 'fa fa-smile', position: 'right' } },
-          'Icone gauche': { text: 'Button', icon: { name: 'fa fa-smile', position: 'left' } },
+          'Sans icône': { text: 'Button' },
+          'Icône droite': { text: 'Button', icon: { name: 'fa fa-smile', position: 'right' } },
+          'Icône gauche': { text: 'Button', icon: { name: 'fa fa-smile', position: 'left' } },
+          'Icône seule': { icon: { name: 'fa fa-smile', position: 'left' }  },
       },
     }
   },
diff --git a/src/stories/Button.vue b/src/stories/Button.vue
index 54a4cd1..fecdd90 100644
--- a/src/stories/Button.vue
+++ b/src/stories/Button.vue
@@ -22,7 +22,7 @@ type ButtonProps = {
    * The label of the button
    */
   label: {
-    text: string,
+    text?: string,
     icon?: Icon
   },
   /**
@@ -40,6 +40,11 @@ type ButtonProps = {
    */
   size?: 'small' | 'medium' | 'large',
 
+  /**
+   * shape of the button
+   */
+  shape?: 'rounded' | 'squared',
+
   /**
    * Button disabled state
    */
@@ -50,6 +55,7 @@ const props = withDefaults(defineProps<ButtonProps>(), {
   type:'primary',
   variant:'contained',
   size:'medium',
+  shape: 'rounded'
 });
 
 const emit = defineEmits<{
@@ -58,8 +64,10 @@ const emit = defineEmits<{
 
 const classes = computed(() => ({
   'storybook-button': true,
-  [`storybook-button--${props.type || 'primary'}-${props.variant || 'contained'}`]: true,
-  [`storybook-button--${props.size || 'medium'}`]: true,
+  [`storybook-button--${props.type}-${props.variant}`]: true,
+  [`storybook-button--${props.size}`]: true,
+  [`storybook-button--${props.shape}`]: true,
+  [`storybook-button--icon-button`]: (props.label.icon && !props.label.text) ,
   [`storybook-button-icon--${props.label.icon?.position}`]: props.label.icon,
 
 }));
diff --git a/src/stories/button.css b/src/stories/button.css
index 56670fb..e0963da 100644
--- a/src/stories/button.css
+++ b/src/stories/button.css
@@ -8,7 +8,6 @@ button {
   cursor: pointer;
   transition:box-shadow 200ms ease-in-out;
   padding: 12px 24px;
-  border-radius: 24px;
   font-size: 16px;
 }
 
@@ -170,19 +169,42 @@ button {
   box-shadow: none;
 }
 
+/* BUTTON SHAPE */
+
+.storybook-button--rounded{
+  border-radius: 2rem;
+}
+
+.storybook-button--squared{
+  border-radius: .5rem;
+}
+
 /* BUTTON SIZES*/
 
 .storybook-button--small {
   font-size: 12px;
   padding: 10px 16px;
+
+  &.storybook-button--icon-button{
+    padding: .75rem;
+  }
+
 }
 .storybook-button--medium {
   font-size: 14px;
   padding: 11px 20px;
+
+  &.storybook-button--icon-button{
+    padding: 1rem;
+  }
 }
 .storybook-button--large {
   font-size: 16px;
   padding: 12px 24px;
+
+  &.storybook-button--icon-button{
+    padding: 1.25rem;
+  }
 }
 
 .storybook-button-icon--left{