From 85021b19af4efe1c63dbec753b25faad3cdad74a Mon Sep 17 00:00:00 2001
From: AndreiaPena <andreia.pena@pix.fr>
Date: Thu, 5 Dec 2024 17:19:39 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20mon-pix:=20change=20yield=20names?=
 =?UTF-8?q?=20for=20pix=20toggle=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addon/components/pix-toggle-button.hbs        |  8 ++--
 addon/styles/_pix-toggle-button.scss          | 17 +++-----
 app/stories/pix-toggle-button.mdx             |  6 +--
 app/stories/pix-toggle-button.stories.js      | 42 +++++++++----------
 .../components/pix-toggle-button-test.js      | 36 ++++++++--------
 5 files changed, 51 insertions(+), 58 deletions(-)

diff --git a/addon/components/pix-toggle-button.hbs b/addon/components/pix-toggle-button.hbs
index 8922963de..f940f6526 100644
--- a/addon/components/pix-toggle-button.hbs
+++ b/addon/components/pix-toggle-button.hbs
@@ -13,11 +13,11 @@
     type="button"
     {{on "click" this.onToggle}}
   >
-    <span class="pix-toggle-button__on{{if @useIcons ' pix-toggle-button__with-icon'}}">
-      {{yield to="on"}}
+    <span class="pix-toggle-button__view-a{{if @useIcons ' pix-toggle-button__with-icon'}}">
+      {{yield to="viewA"}}
     </span>
-    <span class="pix-toggle-button__off{{if @useIcons ' pix-toggle-button__with-icon'}}">
-      {{yield to="off"}}
+    <span class="pix-toggle-button__view-b{{if @useIcons ' pix-toggle-button__with-icon'}}">
+      {{yield to="viewB"}}
     </span>
   </button>
 </div>
\ No newline at end of file
diff --git a/addon/styles/_pix-toggle-button.scss b/addon/styles/_pix-toggle-button.scss
index 3e39007cd..0f3cb5ea9 100644
--- a/addon/styles/_pix-toggle-button.scss
+++ b/addon/styles/_pix-toggle-button.scss
@@ -25,37 +25,32 @@
     }
   }
 
-  &__with-icon > svg {
-    width: 1.4rem;
-    height: 1.4rem;
-  }
-
-  &__on,
-  &__off {
+  &__view-a,
+  &__view-b {
     display: inline-block;
     padding: var(--pix-spacing-1x) var(--pix-spacing-2x);
     border-radius: 4px;
   }
 
-  &__on {
+  &__view-a {
     color: var(--pix-neutral-800);
     font-weight: var(--pix-font-normal);
   }
 
-  &__off {
+  &__view-b {
     color: var(--pix-neutral-20);
     background-color: var(--pix-neutral-800);
   }
 
   &--pressed {
     .pix-toggle-button {
-      &__on {
+      &__view-a {
         color: var(--pix-neutral-20);
         font-weight: inherit;
         background-color: var(--pix-neutral-800);
       }
 
-      &__off {
+      &__view-b {
         color: var(--pix-neutral-800);
         font-weight: var(--pix-font-normal);
         background-color: transparent;
diff --git a/app/stories/pix-toggle-button.mdx b/app/stories/pix-toggle-button.mdx
index d1f337fb1..6889ec5c3 100644
--- a/app/stories/pix-toggle-button.mdx
+++ b/app/stories/pix-toggle-button.mdx
@@ -12,8 +12,8 @@ Affiche un bouton à deux états.
 <PixToggleButton>
 
   <:label>Mon super toggle</:label>
-  <:on>Option 1</:on>
-  <:off>Option 2</:off>
+  <:viewA>Option 1</:viewA>
+  <:viewB>Option 2</:viewB>
 
 </PixToggleButton>
 ```
@@ -32,7 +32,7 @@ Affiche un bouton à deux états.
 
 ## WithYields
 
-<Story of={ComponentStories.WithYields} height={200} />
+<Story of={ComponentStories.WithIcons} height={200} />
 
 ## Arguments
 
diff --git a/app/stories/pix-toggle-button.stories.js b/app/stories/pix-toggle-button.stories.js
index 42ae4b47f..6cd597089 100644
--- a/app/stories/pix-toggle-button.stories.js
+++ b/app/stories/pix-toggle-button.stories.js
@@ -29,15 +29,13 @@ export default {
       description: "Définit si l'on utilise des icons dans le PixToggleButton",
       type: { name: 'boolean', required: true },
     },
-    onLabel: {
-      name: 'onLabel',
-      description: "Le label de l'état actif du PixToggleButton à placer dans les yield <:on>",
-      type: { name: 'string', required: false },
+    viewALabel: {
+      name: '<:viewA>',
+      description: "Yield où l'on place le label ou l'icône de l'état actif du PixToggleButton",
     },
-    offLabel: {
-      name: 'offLabel',
-      description: "Le label de l'état non actif du PixToggleButton à placer dans les yield <:off>",
-      type: { name: 'string', required: false },
+    viewBLabel: {
+      name: '<:viewB>',
+      description: "Yield où l'on place le label ou l'icône de l'état non actif du PixToggleButton",
     },
     toggled: {
       name: 'toggled',
@@ -85,22 +83,22 @@ const Template = (args) => {
   @screenReaderOnly={{this.screenReaderOnly}}
 >
   <:label>{{this.label}}</:label>
-  <:on>{{this.onLabel}}</:on>
-  <:off>{{this.offLabel}}</:off>
+  <:viewA>{{this.viewALabel}}</:viewA>
+  <:viewB>{{this.viewBLabel}}</:viewB>
 
 </PixToggleButton>`,
     context: args,
   };
 };
 
-const TemplateWithYields = (args) => {
+const TemplateWithIcons = (args) => {
   return {
     template: hbs`<PixToggleButton @toggled={{this.toggled}} @onChange={{this.onChange}} @useIcons={{this.useIcons}}>
   <:label>{{this.label}}</:label>
   {{! template-lint-disable no-inline-styles }}
-  <:on><PixIcon @name='eye' /></:on>
+  <:viewA><PixIcon @name='eye' /></:viewA>
   {{! template-lint-disable no-inline-styles }}
-  <:off><PixIcon @name='eyeOff' /></:off>
+  <:viewB><PixIcon @name='eyeOff' /></:viewB>
 </PixToggleButton>`,
     context: args,
   };
@@ -109,18 +107,18 @@ const TemplateWithYields = (args) => {
 export const Default = Template.bind({});
 Default.args = {
   label: 'Mon toggle',
-  onLabel: 'Option A',
-  offLabel: 'Option B',
+  viewALabel: 'Option A',
+  viewBLabel: 'Option B',
   toggled: false,
   onChange: action('onChange'),
 };
 
 export const Inline = Template.bind({});
 Inline.args = {
-  inline: true,
+  inlineLabel: true,
   label: 'Mon toggle',
-  onLabel: 'Option A',
-  offLabel: 'Option B',
+  viewALabel: 'Option A',
+  viewBLabel: 'Option B',
   toggled: false,
   onChange: action('onChange'),
 };
@@ -129,14 +127,14 @@ export const ScreenReaderOnly = Template.bind({});
 ScreenReaderOnly.args = {
   screenReaderOnly: true,
   label: 'Mon toggle',
-  onLabel: 'Option A',
-  offLabel: 'Option B',
+  viewALabel: 'Option A',
+  viewBLabel: 'Option B',
   toggled: false,
   onChange: action('onChange'),
 };
 
-export const WithYields = TemplateWithYields.bind({});
-WithYields.args = {
+export const WithIcons = TemplateWithIcons.bind({});
+WithIcons.args = {
   label: 'Mon toggle',
   toggled: false,
   useIcons: true,
diff --git a/tests/integration/components/pix-toggle-button-test.js b/tests/integration/components/pix-toggle-button-test.js
index 689d99664..9814d70c1 100644
--- a/tests/integration/components/pix-toggle-button-test.js
+++ b/tests/integration/components/pix-toggle-button-test.js
@@ -10,28 +10,28 @@ module('Integration | Component | PixToggleButton', function (hooks) {
   setupRenderingTest(hooks);
 
   this.label = 'Mon bouton toggle';
-  this.onLabel = 'Oui';
-  this.offLabel = 'Non';
+  this.viewALabel = 'Oui';
+  this.viewBLabel = 'Non';
 
   test('it renders PixToggleButton', async function (assert) {
     // given & when
     const screen = await render(hbs`<PixToggleButton>
   <:label>{{this.label}}</:label>
-  <:on>{{this.onLabel}}</:on>
-  <:off>{{this.offLabel}}</:off>
+  <:viewA>{{this.viewALabel}}</:viewA>
+  <:viewB>{{this.viewBLabel}}</:viewB>
 </PixToggleButton>`);
 
     assert.dom(screen.getByText(this.label)).exists();
-    assert.dom(screen.getByText(this.onLabel)).exists();
-    assert.dom(screen.getByText(this.offLabel)).exists();
+    assert.dom(screen.getByText(this.viewALabel)).exists();
+    assert.dom(screen.getByText(this.viewBLabel)).exists();
   });
 
   test('it pressed PixToggleButton', async function (assert) {
     // given & when
     const screen = await render(hbs`<PixToggleButton @toggled={{true}}>
   <:label>{{this.label}}</:label>
-  <:on>{{this.onLabel}}</:on>
-  <:off>{{this.offLabel}}</:off>
+  <:viewA>{{this.viewALabel}}</:viewA>
+  <:viewB>{{this.viewBLabel}}</:viewB>
 </PixToggleButton>`);
 
     // then
@@ -42,8 +42,8 @@ module('Integration | Component | PixToggleButton', function (hooks) {
     // given & when
     const screen = await render(hbs`<PixToggleButton @toggled={{false}}>
   <:label>{{this.label}}</:label>
-  <:on>{{this.onLabel}}</:on>
-  <:off>{{this.offLabel}}</:off>
+  <:viewA>{{this.viewALabel}}</:viewA>
+  <:viewB>{{this.viewBLabel}}</:viewB>
 </PixToggleButton>`);
 
     // then
@@ -56,8 +56,8 @@ module('Integration | Component | PixToggleButton', function (hooks) {
 
     const screen = await render(hbs`<PixToggleButton @toggled={{false}} @onChange={{this.onChange}}>
   <:label>{{this.label}}</:label>
-  <:on>{{this.onLabel}}</:on>
-  <:off>{{this.offLabel}}</:off>
+  <:viewA>{{this.viewALabel}}</:viewA>
+  <:viewB>{{this.viewBLabel}}</:viewB>
 
 </PixToggleButton>`);
 
@@ -74,8 +74,8 @@ module('Integration | Component | PixToggleButton', function (hooks) {
 
     const screen = await render(hbs`<PixToggleButton @toggled={{true}} @onChange={{this.onChange}}>
   <:label>{{this.label}}</:label>
-  <:on>{{this.onLabel}}</:on>
-  <:off>{{this.offLabel}}</:off>
+  <:viewA>{{this.viewALabel}}</:viewA>
+  <:viewB>{{this.viewBLabel}}</:viewB>
 </PixToggleButton>`);
 
     await click(screen.getByRole('button'));
@@ -91,8 +91,8 @@ module('Integration | Component | PixToggleButton', function (hooks) {
 
     const screen = await render(hbs`<PixToggleButton @onChange={{this.onChange}}>
   <:label>{{this.label}}</:label>
-  <:on>{{this.onLabel}}</:on>
-  <:off>{{this.offLabel}}</:off>
+  <:viewA>{{this.viewALabel}}</:viewA>
+  <:viewB>{{this.viewBLabel}}</:viewB>
 
 </PixToggleButton>`);
 
@@ -109,8 +109,8 @@ module('Integration | Component | PixToggleButton', function (hooks) {
 
     const screen = await render(hbs`<PixToggleButton @onChange={{this.onChange}}>
   <:label>{{this.label}}</:label>
-  <:on>{{this.onLabel}}</:on>
-  <:off>{{this.offLabel}}</:off>
+  <:viewA>{{this.viewALabel}}</:viewA>
+  <:viewB>{{this.viewBLabel}}</:viewB>
 
 </PixToggleButton>`);