feat(PixButton) : rename color variant

1024pix · May 7, 2024 · d323f37 · d323f37
1 parent 193d18a
commit d323f37
Show file tree

Hide file tree

Showing 12 changed files with 38 additions and 38 deletions.
diff --git a/addon/styles/_pix-button-base.scss b/addon/styles/_pix-button-base.scss
@@ -88,7 +88,7 @@
     }
   }
 
-  &--secondary {
+  &--primary-bis {
     color: var(--pix-neutral-900);
     background-color: var(--pix-secondary-500);
 
@@ -137,7 +137,7 @@
     }
   }
 
-  &--neutral {
+  &--tertiary {
     color: var(--pix-neutral-900);
     background-color: var(--pix-neutral-20);
 
@@ -162,7 +162,7 @@
     }
   }
 
-  &--transparent-light {
+  &--secondary {
     color: var(--pix-primary-700);
     background-color: transparent;
     border: 2px solid var(--pix-primary-700);

diff --git a/app/stories/form.stories.js b/app/stories/form.stories.js
@@ -92,7 +92,7 @@ export const form = (args) => {
 
   <ul class='pix-form__actions'>
     <li>
-      <PixButtonLink @route='' @model='' @variant='transparent-light' @isBorderVisible={{true}}>
+      <PixButtonLink @route='' @model='' @variant='secondary' @isBorderVisible={{true}}>
         Annuler
       </PixButtonLink>
     </li>

diff --git a/app/stories/pix-button-link.stories.js b/app/stories/pix-button-link.stories.js
@@ -29,14 +29,14 @@ export default {
     variant: {
       name: 'variant',
       description:
-        'color: `primary`, `secondary`, `success`, `error`, `neutral`, `transparent-light`, `transparent-dark`',
+        'color: `primary`, `primary-bis`, `secondary`,`tertiary`, `success`, `error`, `transparent-dark`',
       options: [
         'primary',
+        'primary-bis',
         'secondary',
+        'tertiary',
         'success',
         'error',
-        'neutral',
-        'transparent-light',
         'transparent-dark',
       ],
       type: { name: 'string', required: false },
@@ -60,7 +60,7 @@ export default {
     isBorderVisible: {
       name: 'isBorderVisible',
       description:
-        'Paramètre utilisé seulement quand le `variant` est `transparent-light` ou `transparent-dark`',
+        'Paramètre utilisé seulement quand le `variant` est `secondary` ou `transparent-dark`',
       type: { name: 'boolean', required: false },
       control: { type: 'boolean' },
       table: {

diff --git a/app/stories/pix-button-upload.stories.js b/app/stories/pix-button-upload.stories.js
@@ -18,14 +18,14 @@ export default {
     variant: {
       name: 'variant',
       description:
-        'color: `primary`, `success`, `secondary`, `error`, `neutral`, `transparent-light`, `transparent-dark`',
+        'color: `primary`, `primary-bis`, `secondary`,`tertiary`, `success`, `error`, `transparent-dark`',
       options: [
         'primary',
-        'success',
+        'primary-bis',
         'secondary',
+        'tertiary',
+        'success',
         'error',
-        'neutral',
-        'transparent-light',
         'transparent-dark',
       ],
       type: { name: 'string', required: false },
@@ -49,7 +49,7 @@ export default {
     isBorderVisible: {
       name: 'isBorderVisible',
       description:
-        'Paramètre utilisé seulement quand le `variant` est `transparent-light` ou `transparent-dark`',
+        'Paramètre utilisé seulement quand le `variant` est `secondary` ou `transparent-dark`',
       type: { name: 'boolean', required: false },
       control: { type: 'boolean' },
       table: {

diff --git a/app/stories/pix-button.mdx b/app/stories/pix-button.mdx
@@ -71,7 +71,7 @@ Un petit bouton avec les bords arrondis en fond transparent avec une bordure
   @triggerAction="{{action"
   triggerAction}}
   @loadingColor="white"
-  @variant="transparent-light"
+  @variant="secondary"
   @isDisabled="{{false}}"
   @size="small"
   @isBorderVisible="{{true}}"

diff --git a/app/stories/pix-button.stories.js b/app/stories/pix-button.stories.js
@@ -33,14 +33,14 @@ export default {
     variant: {
       name: 'variant',
       description:
-        'color: `primary`, `secondary`, `success`, `error`, `neutral`, `transparent-light`, `transparent-dark`',
+        'color: `primary`, `primary-bis`, `secondary`,`tertiary`, `success`, `error`, `transparent-dark`',
       options: [
         'primary',
+        'primary-bis',
         'secondary',
+        'tertiary',
         'success',
         'error',
-        'neutral',
-        'transparent-light',
         'transparent-dark',
       ],
       type: { name: 'string', required: false },
@@ -128,7 +128,7 @@ export default {
     isBorderVisible: {
       name: 'isBorderVisible',
       description:
-        'Paramètre utilisé seulement quand le `variant` est `transparent-light` ou `transparent-dark`',
+        'Paramètre utilisé seulement quand le `variant` est `secondary` ou `transparent-dark`',
       type: { name: 'boolean', required: false },
       control: { type: 'boolean' },
       table: {
@@ -191,7 +191,7 @@ export const borders = Template.bind({});
 borders.args = {
   ...Default.args,
   label: 'Bouton avec bordure sur fond clair',
-  variant: 'transparent-light',
+  variant: 'secondary',
   loadingColor: 'grey',
   isBorderVisible: true,
   extraButtons: [
@@ -208,34 +208,34 @@ borders.args = {
 export const colors = Template.bind({});
 colors.args = {
   ...Default.args,
-  label: 'Bouton avec background primary (default)',
+  label: 'Bouton primary (default)',
   extraButtons: [
     {
       ...Default.args,
-      label: 'Bouton avec background success',
-      variant: 'success',
+      label: 'Bouton primary-bis',
+      variant: 'primary-bis',
+      loadingColor: 'grey',
+      isBorderVisible: true,
     },
     {
       ...Default.args,
-      label: 'Bouton avec background secondary',
+      label: 'Bouton secondary',
       variant: 'secondary',
     },
     {
       ...Default.args,
-      label: 'Bouton avec background error',
-      variant: 'error',
+      label: 'Bouton tertiary',
+      variant: 'tertiary',
     },
     {
       ...Default.args,
-      label: 'Bouton avec background neutral',
-      variant: 'neutral',
+      label: 'Bouton success',
+      variant: 'success',
     },
     {
       ...Default.args,
-      label: 'Bouton avec bordure sur fond clair',
-      variant: 'transparent-light',
-      loadingColor: 'grey',
-      isBorderVisible: true,
+      label: 'Bouton error',
+      variant: 'error',
     },
     {
       ...Default.args,
@@ -265,7 +265,7 @@ export const loader = Template.bind({});
 loader.args = {
   ...Default.args,
   label: 'Bouton avec loader au clic',
-  variant: 'yellow',
+  variant: 'primary-bis',
   loadingColor: 'grey',
   triggerAction: () => {
     return new Promise((resolve) => {

diff --git a/app/stories/pix-modal.mdx b/app/stories/pix-modal.mdx
@@ -37,7 +37,7 @@ Ce composant possède deux `yield` :
  </:content>
  <:footer>
   <PixButton
-    @variant="transparent-light"
+    @variant="secondary"
     @isBorderVisible={{true}}
     @triggerAction={{this.closeModal}}
   >

diff --git a/app/stories/pix-modal.stories.js b/app/stories/pix-modal.stories.js
@@ -25,7 +25,7 @@ export default {
       style='display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 16px'
     >
       <PixButton
-        @variant='transparent-light'
+        @variant='secondary'
         @isBorderVisible='true'
         @triggerAction={{fn (mut this.showModal) (not this.showModal)}}
       >Annuler</PixButton>

diff --git a/app/stories/pix-sidebar.mdx b/app/stories/pix-sidebar.mdx
@@ -33,7 +33,7 @@ Ce composant possède deux `yield` :
  </:content>
  <:footer>
   <PixButton
-    @variant="transparent-light"
+    @variant="secondary"
     @isBorderVisible={{true}}
     @triggerAction={{this.closeSidebar}}
   >

diff --git a/app/stories/pix-sidebar.stories.js b/app/stories/pix-sidebar.stories.js
@@ -45,7 +45,7 @@ const Template = (args) => {
     {{! template-lint-disable no-inline-styles }}
     <div style='display: flex; gap: 8px'>
       <PixButton
-        @variant='transparent-light'
+        @variant='secondary'
         @isBorderVisible='true'
         @triggerAction={{fn (mut this.showSidebar) (not this.showSidebar)}}
       >Annuler</PixButton>

diff --git a/tests/dummy/app/templates/modal-page.hbs b/tests/dummy/app/templates/modal-page.hbs
@@ -8,7 +8,7 @@
   </:content>
   <:footer>
     <PixButton
-      @variant="transparent-light"
+      @variant="secondary"
       @isBorderVisible="true"
       @triggerAction={{fn (mut this.showModal) (not this.showModal)}}
     >Annuler</PixButton>

diff --git a/tests/dummy/app/templates/sidebar-page.hbs b/tests/dummy/app/templates/sidebar-page.hbs
@@ -8,7 +8,7 @@
   </:content>
   <:footer>
     <PixButton
-      @variant="transparent-light"
+      @variant="secondary"
       @isBorderVisible="true"
       @triggerAction={{fn (mut this.showSidebar) (not this.showSidebar)}}
     >