From 0c8de53d5b3fd75c2732f3f7f21454d11253231d Mon Sep 17 00:00:00 2001
From: olyn-octo <carolyn.orieux@octo.com>
Date: Wed, 26 Jun 2024 16:59:09 +0200
Subject: [PATCH] MR review correction

---
 src/stories/Button.stories.ts |  4 +---
 src/stories/Button.vue        |  6 +++---
 src/stories/button.css        | 12 +++++-------
 src/tokens/colors.css         |  5 +++--
 4 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/stories/Button.stories.ts b/src/stories/Button.stories.ts
index f65f282..f4a8a82 100644
--- a/src/stories/Button.stories.ts
+++ b/src/stories/Button.stories.ts
@@ -10,11 +10,9 @@ const meta = {
   tags: ['autodocs'],
   argTypes: {
     size: { control: 'select', options: ['small', 'medium', 'large'] },
-    type: { options: ['primary', 'seondary', 'destructive'] },
-    backgroundColor: { control: 'color' },
+    type: { options: ['primary', 'secondary', 'destructive'] },
   },
   args: {
-    primary: false,
     // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
     onClick: fn(),
   },
diff --git a/src/stories/Button.vue b/src/stories/Button.vue
index e635883..c4830c1 100644
--- a/src/stories/Button.vue
+++ b/src/stories/Button.vue
@@ -2,7 +2,7 @@
   <button type="button" :class="classes" @click="onClick" >{{ label }} </button>
 </template>
 
-<script lang="ts"setup>
+<script lang="ts" setup>
 
 import { computed } from 'vue';
 import "@/tokens/colors.css";
@@ -15,9 +15,9 @@ type ButtonProps = {
    */
   label: string,
   /**
-   * type of the button
+   * Button type
    */
-  type ?: 'primary'| 'secondary' | 'destructive',
+  type?: 'primary'| 'secondary' | 'destructive',
 
   /**
    * size of the button
diff --git a/src/stories/button.css b/src/stories/button.css
index fd9dd23..6ff6072 100644
--- a/src/stories/button.css
+++ b/src/stories/button.css
@@ -38,7 +38,7 @@ button {
 
 .storybook-button--secondary:hover {
   border: 2px solid var(--color-button-border-secondary-hover);
-  box-shadow: 2px 4px 7px 2px rgb(from var(--color-button-shadow-primary) r g b / 30%);
+  box-shadow: 2px 4px 7px 2px rgb(from var(--color-button-shadow-secondary) r g b / 30%);
   color:var(--color-button-text-secondary-hover);
 }
 
@@ -52,19 +52,17 @@ button {
 .storybook-button--destructive {
   background-color:var(--color-button-background-destructive);
   border: 1px solid var(--color-button-border-destructive);
-  color: #FFF;
+  color: var(--color-button-text-destructive);
 }
 
 .storybook-button--destructive:hover {
   background-color: var(--color-button-background-destructive);
-  border-color: var(--color-button-background-destructive);
-  box-shadow: 2px 4px 7px 2px var(--color-button-shadow-destructive);
-  /*remplacer par des tokens de couleurs pour la shadow ou pas ?*/
+  border-color: var(--color-button-shadow-destructive);
+  box-shadow: 2px 4px 7px 2px rgb(from var(--color-button-shadow-destructive) r g b / 30%);
 }
 
 .storybook-button--destructive:active {
-  box-shadow: 0px 2px 3px 1px rgba(241, 176, 174);
-  /*remplacer par des tokens pour la shadow ou pas ?*/
+  box-shadow: 0px 2px 3px 1px rgb(from var(--color-button-shadow-destructive-active) r g b / 60%);
 }
 
 /* BUTTON SIZES*/
diff --git a/src/tokens/colors.css b/src/tokens/colors.css
index faedefb..df212b2 100644
--- a/src/tokens/colors.css
+++ b/src/tokens/colors.css
@@ -69,10 +69,11 @@
     --color-button-shadow-secondary-active: var(--color-navy-500);
 
 
-    --color-button-text-destructive:#FFF;
+    --color-button-text-destructive: white;
     --color-button-background-destructive:var(--color-red-600);
     --color-button-border-destructive:var(--color-red-500);
-    --color-button-shadow-destructive:var(--color-red-200);
+    --color-button-shadow-destructive:var(--color-red-500);
+    --color-button-shadow-destructive-active:var(--color-red-200);
 /*TODO* variablisier les couleurs primary*/
 }