feat(pix-multi-select): add named yield to pix multi select

1024pix · Mar 12, 2024 · d98be31 · d98be31
1 parent 3e71826
commit d98be31
Show file tree

Hide file tree

Showing 8 changed files with 170 additions and 154 deletions.
diff --git a/addon/components/pix-filterable-and-searchable-select.hbs b/addon/components/pix-filterable-and-searchable-select.hbs
@@ -6,7 +6,7 @@
     @subLabel={{@subLabel}}
     @screenReaderOnly={{@screenReaderOnly}}
   >
-    {{@label}}
+    {{yield to="label"}}
   </PixLabel>
   <div
     class="pix-filterable-and-searchable-select{{if
@@ -17,12 +17,12 @@
     <PixMultiSelect
       id={{this.pixMultiSelectId}}
       @values={{this.selectedCategories}}
-      @label={{@categoriesLabel}}
       @options={{this.categories}}
       @onChange={{this.selectCategories}}
       @screenReaderOnly={{true}}
       @className="pix-filterable-and-searchable-select__pix-multi-select"
     >
+      <:label>{{yield to="categorieLabel"}}</:label>
       <:placeholder>{{this.categoriesPlaceholder}}</:placeholder>
       <:default as |option|>{{option.label}}</:default>
     </PixMultiSelect>

diff --git a/addon/components/pix-multi-select.hbs b/addon/components/pix-multi-select.hbs
@@ -12,7 +12,7 @@
     @labelSize={{@labelSize}}
     @screenReaderOnly={{@screenReaderOnly}}
   >
-    {{@label}}
+    {{yield to="label"}}
   </PixLabel>
 
   <PopperJS @placement={{@placement}} as |reference popover|>

diff --git a/addon/components/pix-multi-select.js b/addon/components/pix-multi-select.js
@@ -27,9 +27,6 @@ export default class PixMultiSelect extends Component {
   constructor(...args) {
     super(...args);
 
-    if (!this.args.label && !this.args.id)
-      throw new Error('ERROR in PixMultiSelect, a @label or an @id was not provided');
-
     this.options = [...(this.args.options || [])];
   }
 

diff --git a/app/stories/pix-multi-select.mdx b/app/stories/pix-multi-select.mdx
@@ -33,18 +33,16 @@ L'ajout de `class` et d'autres attributs comme `aria-label` sont possibles.
 ```html
 <PixMultiSelect
   @id="{{id}}"
-  @label="{{label}}"
   @screenReaderOnly="{{screenReaderOnly}}"
   @placeholder="{{placeholder}}"
   @onChange="{{doSomething}}"
   @values="{{values}}"
   @emptyMessage="{{emptyMessage}}"
   @className="{{className}}"
   @options="{{options}}"
-  as
-  |option|
 >
-  {{option.label}}
+  <:label>{{label}}</:label>
+  <:default as |option|>{{option.label}}</:default>
 </PixMultiSelect>
 ```
 

diff --git a/app/stories/pix-multi-select.stories.js b/app/stories/pix-multi-select.stories.js
@@ -152,20 +152,21 @@ export const multiSelectWithChildComponent = (args) => {
   return {
     template: hbs`<h4><strong>⚠️ La sélection des éléments ne fonctionne pas dans Storybook.</strong></h4>
 <PixMultiSelect
-  @label={{this.label}}
   @placeholder={{this.placeholder}}
   @screenReaderOnly={{this.screenReaderOnly}}
   @onChange={{this.onChange}}
   @emptyMessage={{this.emptyMessage}}
   @className={{this.className}}
   @options={{this.options}}
-  as |option|
 >
-  <PixStars
-    @alt={{concat 'Étoiles ' option.value ' sur ' option.total}}
-    @count={{option.value}}
-    @total={{option.total}}
-  />
+  <:label>{{this.label}}</:label>
+  <:default as |option|>
+    <PixStars
+      @alt={{concat 'Étoiles ' option.value ' sur ' option.total}}
+      @count={{option.value}}
+      @total={{option.total}}
+    />
+  </:default>
 </PixMultiSelect>`,
     context: args,
   };

diff --git a/tests/integration/components/pix-filterable-and-searchable-select-test.js b/tests/integration/components/pix-filterable-and-searchable-select-test.js
@@ -29,7 +29,10 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h
   @onChange={{this.onChange}}
   @categoriesLabel={{this.categoriesLabel}}
   @categoriesPlaceholder={{this.categoriesPlaceholder}}
-/>`);
+>
+  <:label>{{this.label}}</:label>
+  <:categoryLabel>{{this.categoriesLabel}}</:categoryLabel>
+</PixFilterableAndSearchableSelect>`);
 
     await click(screen.getByText(`${this.categoriesPlaceholder} (0)`));
     const items = await screen.findAllByRole('menuitem');
@@ -51,7 +54,10 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h
   @categoriesId={{this.categoriesId}}
   @categoriesLabel={{this.categoriesLabel}}
   @categoriesPlaceholder={{this.categoriesPlaceholder}}
-/>`);
+>
+  <:label>{{this.label}}</:label>
+  <:categoryLabel>{{this.categoriesLabel}}</:categoryLabel>
+</PixFilterableAndSearchableSelect>`);
 
     await clickByName(this.label);
     const options = await screen.findAllByRole('option');
@@ -79,7 +85,10 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h
   @categoriesId={{this.categoriesId}}
   @categoriesLabel={{this.categoriesLabel}}
   @categoriesPlaceholder={{this.categoriesPlaceholder}}
-/>`);
+>
+  <:label>{{this.label}}</:label>
+  <:categoryLabel>{{this.categoriesLabel}}</:categoryLabel>
+</PixFilterableAndSearchableSelect>`);
 
     await click(screen.getByText(`${this.categoriesPlaceholder} (0)`));
 
@@ -108,7 +117,10 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h
   @onChange={{this.onChange}}
   @categoriesLabel={{this.categoriesLabel}}
   @categoriesPlaceholder={{this.categoriesPlaceholder}}
-/>`);
+>
+  <:label>{{this.label}}</:label>
+  <:categoryLabel>{{this.categoriesLabel}}</:categoryLabel>
+</PixFilterableAndSearchableSelect>`);
 
     await click(screen.getByText(`${this.categoriesPlaceholder} (0)`));
     await click(await screen.findByRole('checkbox', { name: 'Hamburger' }));
@@ -133,7 +145,10 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h
   @categoriesId={{this.categoriesId}}
   @categoriesLabel={{this.categoriesLabel}}
   @categoriesPlaceholder={{this.categoriesPlaceholder}}
-/>`);
+>
+  <:label>{{this.label}}</:label>
+  <:categoryLabel>{{this.categoriesLabel}}</:categoryLabel>
+</PixFilterableAndSearchableSelect>`);
 
     await click(screen.getByText(`${this.categoriesPlaceholder} (0)`));
 
@@ -161,7 +176,10 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h
   @categoriesId={{this.categoriesId}}
   @categoriesLabel={{this.categoriesLabel}}
   @categoriesPlaceholder={{this.categoriesPlaceholder}}
-/>`);
+>
+  <:label>{{this.label}}</:label>
+  <:categoryLabel>{{this.categoriesLabel}}</:categoryLabel>
+</PixFilterableAndSearchableSelect>`);
 
     await click(screen.getByText(`${this.categoriesPlaceholder} (0)`));
 
@@ -194,7 +212,10 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h
   @categoriesId={{this.categoriesId}}
   @categoriesLabel={{this.categoriesLabel}}
   @categoriesPlaceholder={{this.categoriesPlaceholder}}
-/>`);
+>
+  <:label>{{this.label}}</:label>
+  <:categoryLabel>{{this.categoriesLabel}}</:categoryLabel>
+</PixFilterableAndSearchableSelect>`);
 
     await click(screen.getByRole('button', { name: this.label }));
     await click(await screen.findByRole('option', { name: 'Tomate' }));
@@ -222,7 +243,10 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h
   @categoriesPlaceholder={{this.categoriesPlaceholder}}
   @searchLabel={{this.searchLabel}}
   @isSearchable={{true}}
-/>`);
+>
+  <:label>{{this.label}}</:label>
+  <:categoryLabel>{{this.categoriesLabel}}</:categoryLabel>
+</PixFilterableAndSearchableSelect>`);
 
     await click(screen.getByRole('button', { name: this.label }));
     await fillByLabel(this.searchLabel, 'Tom');
@@ -256,7 +280,10 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h
   @categoriesPlaceholder={{this.categoriesPlaceholder}}
   @searchLabel={{this.searchLabel}}
   @isSearchable={{true}}
-/>`);
+>
+  <:label>{{this.label}}</:label>
+  <:categoryLabel>{{this.categoriesLabel}}</:categoryLabel>
+</PixFilterableAndSearchableSelect>`);
 
     await click(screen.getByRole('button', { name: this.label }));
     const option = await screen.findByRole('option', { selected: true });
@@ -283,7 +310,10 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h
   @categoriesId={{this.categoriesId}}
   @categoriesLabel={{this.categoriesLabel}}
   @categoriesPlaceholder={{this.categoriesPlaceholder}}
-/>`);
+>
+  <:label>{{this.label}}</:label>
+  <:categoryLabel>{{this.categoriesLabel}}</:categoryLabel>
+</PixFilterableAndSearchableSelect>`);
 
       const label = await screen.getByLabelText(this.label);
 
@@ -310,7 +340,10 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h
   @categoriesId={{this.categoriesId}}
   @categoriesLabel={{this.categoriesLabel}}
   @categoriesPlaceholder={{this.categoriesPlaceholder}}
-/>`);
+>
+  <:label>{{this.label}}</:label>
+  <:categoryLabel>{{this.categoriesLabel}}</:categoryLabel>
+</PixFilterableAndSearchableSelect>`);
 
       // then
       assert.dom(screen.getByText('Mon subLabel')).exists();
@@ -337,7 +370,10 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h
   @searchLabel={{this.searchLabel}}
   @isSearchable={{true}}
   @requiredText={{this.requiredText}}
-/>`);
+>
+  <:label>{{this.label}}</:label>
+  <:categoryLabel>{{this.categoriesLabel}}</:categoryLabel>
+</PixFilterableAndSearchableSelect>`);
 
       // then
       assert.dom(screen.getByLabelText('* Label de mon big composant trop compliqué')).exists();
@@ -367,7 +403,10 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h
   @isSearchable={{true}}
   @requiredText={{this.requiredText}}
   @errorMessage={{this.errorMessage}}
-/>`);
+>
+  <:label>{{this.label}}</:label>
+  <:categoryLabel>{{this.categoriesLabel}}</:categoryLabel>
+</PixFilterableAndSearchableSelect>`);
 
     // then
     assert.dom(screen.getByText(this.errorMessage)).exists();