@1024pix/pix-ui 22.0.0 → 23.0.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Pix-UI Changelog
 
+## v23.0.0 (08/12/2022)
+
+
+### :rocket: Amélioration
+- [#285](https://github.com/1024pix/pix-ui/pull/285) [FEATURE] Améliorer l'accessibilité de PixModal (PIX-6265)
+- [#287](https://github.com/1024pix/pix-ui/pull/287) [FEATURE] Améliorer l'accessiblité de PixSidebar (PIX-6424)
+
+### :coffee: Autre
+- [#302](https://github.com/1024pix/pix-ui/pull/302) [DOCS] Modifie l'exemple de la Modal pour utiliser `gap`
+
+## v22.0.1 (08/12/2022)
+
+
+### :building_construction: Tech
+- [#300](https://github.com/1024pix/pix-ui/pull/300) [TECH] Réparer l'affichage des stories
+
 ## v22.0.0 (08/12/2022)
 
 

package/addon/components/pix-modal.hbs

@@ -12,7 +12,7 @@
     aria-modal="true"
     ...attributes
   >
-    <header class="pix-modal__header">
+    <div class="pix-modal__header">
       <h1 id="modal-title--{{this.id}}" class="pix-modal__title">{{@title}}</h1>
       <PixIconButton
         @icon="xmark"
@@ -22,12 +22,12 @@
         @withBackground={{true}}
         class="pix-modal__close-button"
       />
-    </header>
-    <main id="modal-content--{{this.id}}" class="pix-modal__content">
+    </div>
+    <div id="modal-content--{{this.id}}" class="pix-modal__content">
       {{yield to="content"}}
-    </main>
-    <footer class="pix-modal__footer">
+    </div>
+    <div class="pix-modal__footer">
       {{yield to="footer"}}
-    </footer>
+    </div>
   </div>
 </div>

package/addon/components/pix-sidebar.hbs

@@ -12,7 +12,7 @@
     aria-modal="true"
     ...attributes
   >
-    <header class="pix-sidebar__header">
+    <div class="pix-sidebar__header">
       <h1 id="sidebar-title--{{this.id}}" class="pix-sidebar__title">{{@title}}</h1>
       <PixIconButton
         @icon="xmark"
@@ -22,12 +22,12 @@
         @withBackground={{true}}
         class="pix-sidebar__close-button"
       />
-    </header>
-    <main id="sidebar-content--{{this.id}}" class="pix-sidebar__content">
+    </div>
+    <div id="sidebar-content--{{this.id}}" class="pix-sidebar__content">
       {{yield to="content"}}
-    </main>
-    <footer class="pix-sidebar__footer">
+    </div>
+    <div class="pix-sidebar__footer">
       {{yield to="footer"}}
-    </footer>
+    </div>
   </div>
 </div>

package/addon/styles/_pix-modal.scss

@@ -15,7 +15,7 @@
   // if the content is less than 100vh
   // Inspired by https://mui.com/material-ui/react-dialog/#scrolling-long-content
   &::after {
-    content: "";
+    content: '';
     display: inline-block;
     vertical-align: middle;
     height: 100%;
@@ -39,8 +39,10 @@ $button-margin: 16px;
   display: inline-block;
   vertical-align: middle; // Centered vertically with the .pix-modal__overlay::after which is 100% height
   width: 512px;
-  max-width: calc(100% - #{2 * $spacing-xs}); // Horizontal margin sets here to have extra space for the .pix-modal__overlay::after on mobile
-  text-align: initial; 
+  max-width: calc(
+    100% - #{2 * $spacing-xs}
+  ); // Horizontal margin sets here to have extra space for the .pix-modal__overlay::after on mobile
+  text-align: initial;
   background-color: $pix-neutral-10;
   box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
@@ -94,21 +96,5 @@ $button-margin: 16px;
 
   &__footer {
     padding: 0 $modal-padding $modal-padding - $button-margin;
-
-    @include device-is('tablet') {
-      display: flex;
-      justify-content: flex-end;
-      flex-wrap: wrap;
-    }
-
-    .pix-button {
-      margin-bottom: $button-margin;
-      width: 100%;
-
-      @include device-is('tablet') {
-        margin: 0 0 $button-margin $button-margin;
-        width: auto;
-      }
-    }
   }
 }

package/app/stories/form.stories.js

@@ -7,20 +7,20 @@ export const form = (args) => {
   <PixInput
     @id='firstName'
     @label='Prénom'
-    @errorMessage={{genericErrorMessage}}
+    @errorMessage={{this.genericErrorMessage}}
     @requiredLabel='champ obligatoire'
   />
   <br />
-  <PixInputPassword @id='password' @label='Mot de passe' @errorMessage={{genericErrorMessage}} />
+  <PixInputPassword @id='password' @label='Mot de passe' @errorMessage={{this.genericErrorMessage}} />
   <br />
 
   <PixMultiSelect
     @innerText='Votre notation en étoiles...'
     @id='form__pix-mutli-select'
     @label='A quel point aimez vous Pix UI ?'
-    @onSelect={{onSelect}}
-    @selected={{selected}}
-    @options={{options}}
+    @onSelect={{this.onSelect}}
+    @selected={{this.selected}}
+    @options={{this.options}}
     as |star|
   >
     <PixStars @count={{star.value}} @total={{star.total}} />
@@ -31,10 +31,10 @@ export const form = (args) => {
     @innerText='Mes condiements'
     @id='form__pix-mutli-select-searchable'
     @label='Choississez vos condiments'
-    @onSelect={{onSelect}}
-    @selected={{selected}}
+    @onSelect={{this.onSelect}}
+    @selected={{this.selected}}
     @isSearchable={{true}}
-    @options={{optionsSearch}}
+    @options={{this.optionsSearch}}
     as |condiment|
   >
     {{condiment.label}}
@@ -44,7 +44,7 @@ export const form = (args) => {
   <PixSelect
     @id='form__searchable-pix-select'
     @label='Votre fruit préféré est : '
-    @options={{selectOptions}}
+    @options={{this.selectOptions}}
     @isSearchable={{true}}
     @isValidationActive={{true}}
     placeholder='Fraises, Mangues...'
@@ -54,7 +54,7 @@ export const form = (args) => {
 
   <PixDropdown
     @id='form__searchable-pix-dropdown'
-    @options={{selectOptions}}
+    @options={{this.selectOptions}}
     @placeholder='Choisir votre fruit'
     @isSearchable={{true}}
     @searchPlaceholder='Rechercher'
@@ -70,7 +70,7 @@ export const form = (args) => {
     @value=''
     @maxlength={{200}}
     @label='Un commentaire ?'
-    @errorMessage={{genericErrorMessage}}
+    @errorMessage={{this.genericErrorMessage}}
   />
   <br />
 
@@ -89,7 +89,7 @@ export const form = (args) => {
 
   <div class='pix-form__actions'>
     <PixButton
-      @triggerAction={{cancel}}
+      @triggerAction={{this.cancel}}
       @backgroundColor='transparent-light'
       @isBorderVisible={{true}}
     >

package/app/stories/pix-banner.stories.js

@@ -3,10 +3,10 @@ import { hbs } from 'ember-cli-htmlbars';
 const Template = (args) => {
   return {
     template: hbs`<PixBanner
-  @type={{type}}
-  @actionLabel={{actionLabel}}
-  @actionUrl={{actionUrl}}
-  @canCloseBanner={{canCloseBanner}}
+  @type={{this.type}}
+  @actionLabel={{this.actionLabel}}
+  @actionUrl={{this.actionUrl}}
+  @canCloseBanner={{this.canCloseBanner}}
 >
   Parcours de rentrée 2020 : les codes sont disponibles dans l'onglet campagne. N’oubliez pas de les
   diffuser aux élèves avant la Toussaint.

package/app/stories/pix-block.stories.js

@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export const block = (args) => ({
-  template: hbs`<PixBlock @shadow={{shadow}}>
+  template: hbs`<PixBlock @shadow={{this.shadow}}>
   Lorem ipsum
 </PixBlock>`,
   context: args,

package/app/stories/pix-button-link.stories.js

@@ -5,11 +5,11 @@ export const htmlLinkTemplate = (args) => {
     template: hbs`<PixButtonLink
   @href='https://pix.fr'
   target='NEW'
-  @shape={{shape}}
-  @backgroundColor={{backgroundColor}}
-  @size={{size}}
-  @isBorderVisible={{isBorderVisible}}
-  @isDisabled={{isDisabled}}
+  @shape={{this.shape}}
+  @backgroundColor={{this.backgroundColor}}
+  @size={{this.size}}
+  @isBorderVisible={{this.isBorderVisible}}
+  @isDisabled={{this.isDisabled}}
 >
   Lien HTML classique
 </PixButtonLink>`,
@@ -22,12 +22,12 @@ export const emberLinkTemplate = (args) => {
     template: hbs`<PixButtonLink
   @route=''
   @model=''
-  @query={{query}}
-  @shape={{shape}}
-  @backgroundColor={{backgroundColor}}
-  @size={{size}}
-  @isBorderVisible={{isBorderVisible}}
-  @isDisabled={{isDisabled}}
+  @query={{this.query}}
+  @shape={{this.shape}}
+  @backgroundColor={{this.backgroundColor}}
+  @size={{this.size}}
+  @isBorderVisible={{this.isBorderVisible}}
+  @isDisabled={{this.isDisabled}}
 >
   Lien route Ember (LinkTo)
 </PixButtonLink>`,

package/app/stories/pix-button-upload.stories.js

@@ -5,11 +5,11 @@ export const buttonUpload = (args) => {
   return {
     template: hbs`<PixButtonUpload
   @id='id'
-  @onChange={{onChange}}
-  @shape={{shape}}
-  @backgroundColor={{backgroundColor}}
-  @size={{size}}
-  @isBorderVisible={{isBorderVisible}}
+  @onChange={{this.onChange}}
+  @shape={{this.shape}}
+  @backgroundColor={{this.backgroundColor}}
+  @size={{this.size}}
+  @isBorderVisible={{this.isBorderVisible}}
 >
   Cliquer pour uploader un fichier
 </PixButtonUpload>`,

package/app/stories/pix-button.stories.js

@@ -3,22 +3,22 @@ import { hbs } from 'ember-cli-htmlbars';
 const Template = (args) => ({
   template: hbs`<section style={{this.style}}>
   <PixButton
-    @triggerAction={{action triggerAction}}
-    @loadingColor={{loadingColor}}
-    @shape={{shape}}
-    @backgroundColor={{backgroundColor}}
-    @isDisabled={{isDisabled}}
-    @isLoading={{isLoading}}
-    @size={{size}}
-    @isBorderVisible={{isBorderVisible}}
+    @triggerAction={{action this.triggerAction}}
+    @loadingColor={{this.loadingColor}}
+    @shape={{this.shape}}
+    @backgroundColor={{this.backgroundColor}}
+    @isDisabled={{this.isDisabled}}
+    @isLoading={{this.isLoading}}
+    @size={{this.size}}
+    @isBorderVisible={{this.isBorderVisible}}
   >
     {{this.label}}
   </PixButton>
 </section>
-{{#each extraButtons as |button|}}
+{{#each this.extraButtons as |button|}}
   <section style={{button.style}}>
     <PixButton
-      @triggerAction={{action triggerAction}}
+      @triggerAction={{action this.triggerAction}}
       @loadingColor={{button.loadingColor}}
       @shape={{button.shape}}
       @backgroundColor={{button.backgroundColor}}

package/app/stories/pix-checkbox.stories.js

@@ -3,11 +3,11 @@ import { hbs } from 'ember-cli-htmlbars';
 export const Template = (args) => {
   return {
     template: hbs`<PixCheckbox
-  @id={{id}}
-  @screenReaderOnly={{screenReaderOnly}}
-  @isIndeterminate={{isIndeterminate}}
-  @labelSize={{labelSize}}
-  @checked={{checked}}
+  @id={{this.id}}
+  @screenReaderOnly={{this.screenReaderOnly}}
+  @isIndeterminate={{this.isIndeterminate}}
+  @labelSize={{this.labelSize}}
+  @checked={{this.checked}}
 >
   {{label}}
 </PixCheckbox>`,

package/app/stories/pix-collapsible.stories.js

@@ -2,7 +2,7 @@ import { hbs } from 'ember-cli-htmlbars';
 
 export const collapsible = (args) => {
   return {
-    template: hbs`<PixCollapsible @title={{title}} @titleIcon={{titleIcon}}>
+    template: hbs`<PixCollapsible @title={{this.title}} @titleIcon={{this.titleIcon}}>
   <div>Contenu du PixCollapsible</div>
 </PixCollapsible>`,
     context: args,
@@ -11,7 +11,7 @@ export const collapsible = (args) => {
 
 export const collapsibleWithBlockTitle = (args) => {
   return {
-    template: hbs`<PixCollapsible @titleIcon={{titleIcon}}>
+    template: hbs`<PixCollapsible @titleIcon={{this.titleIcon}}>
   <:title>
     <span>Titre avec <em>contenu de type block</em></span>
   </:title>
@@ -26,15 +26,15 @@ export const collapsibleWithBlockTitle = (args) => {
 export const multipleCollapsible = (args) => {
   return {
     template: hbs`<div>
-  <PixCollapsible @title='Titre A' @titleIcon={{titleIcon}}>
+  <PixCollapsible @title='Titre A' @titleIcon={{this.titleIcon}}>
     <div>Contenu A</div>
   </PixCollapsible>
 
-  <PixCollapsible @title='Titre B' @titleIcon={{titleIcon}}>
+  <PixCollapsible @title='Titre B' @titleIcon={{this.titleIcon}}>
     <div>Contenu B</div>
   </PixCollapsible>
 
-  <PixCollapsible @title='Titre C' @titleIcon={{titleIcon}}>
+  <PixCollapsible @title='Titre C' @titleIcon={{this.titleIcon}}>
     <div>Contenu C</div>
   </PixCollapsible>
 </div>`,

package/app/stories/pix-dropdown.stories.js

@@ -5,19 +5,19 @@ export const Template = (args) => {
   return {
     template: hbs`<div style='width: 300px;'>
   <PixDropdown
-    @id={{id}}
-    @options={{options}}
-    @onSelect={{onSelect}}
-    @placeholder={{placeholder}}
-    @selectedOption={{selectedOption}}
-    @isSearchable={{isSearchable}}
-    @searchPlaceholder={{searchPlaceholder}}
-    @label={{label}}
-    @clearLabel={{clearLabel}}
-    @expandLabel={{expandLabel}}
-    @collapseLabel={{collapseLabel}}
-    @pageSize={{pageSize}}
-    @requiredLabel={{requiredLabel}}
+    @id={{this.id}}
+    @options={{this.options}}
+    @onSelect={{this.onSelect}}
+    @placeholder={{this.placeholder}}
+    @selectedOption={{this.selectedOption}}
+    @isSearchable={{this.isSearchable}}
+    @searchPlaceholder={{this.searchPlaceholder}}
+    @label={{this.label}}
+    @clearLabel={{this.clearLabel}}
+    @expandLabel={{this.expandLabel}}
+    @collapseLabel={{this.collapseLabel}}
+    @pageSize={{this.pageSize}}
+    @requiredLabel={{this.requiredLabel}}
   />
 </div>`,
     context: args,

package/app/stories/pix-filter-banner.stories.js

@@ -4,10 +4,10 @@ import { action } from '@storybook/addon-actions';
 export const filterBanner = (args) => {
   return {
     template: hbs`<PixFilterBanner
-  @title={{title}}
-  @details={{details}}
-  @clearFiltersLabel={{clearFiltersLabel}}
-  @onClearFilters={{onClearFilters}}
+  @title={{this.title}}
+  @details={{this.details}}
+  @clearFiltersLabel={{this.clearFiltersLabel}}
+  @onClearFilters={{this.onClearFilters}}
 >
   <PixSelect @options={{this.options}} @onChange={{this.onChange}} />
   <PixSelect @options={{this.options}} @onChange={{this.onChange}} />

package/app/stories/pix-filterable-and-searchable-select.stories.js

@@ -4,18 +4,18 @@ const Template = (args) => {
   return {
     template: hbs`
       <PixFilterableAndSearchableSelect
-        @label={{label}}
-        @subLabel={{subLabel}}
-        @screenReaderOnly={{screenReaderOnly}}
-        @placeholder={{placeholder}}
-        @options={{options}}
-        @onChange={{onChange}}
-        @categoriesLabel={{categoriesLabel}}
-        @categoriesPlaceholder={{categoriesPlaceholder}}
-        @isSearchable={{isSearchable}}
-        @value={{value}}
-        @requiredText={{requiredText}}
-        @errorMessage={{errorMessage}}
+        @label={{this.label}}
+        @subLabel={{this.subLabel}}
+        @screenReaderOnly={{this.screenReaderOnly}}
+        @placeholder={{this.placeholder}}
+        @options={{this.options}}
+        @onChange={{this.onChange}}
+        @categoriesLabel={{this.categoriesLabel}}
+        @categoriesPlaceholder={{this.categoriesPlaceholder}}
+        @isSearchable={{this.isSearchable}}
+        @value={{this.value}}
+        @requiredText={{this.requiredText}}
+        @errorMessage={{this.errorMessage}}
       />
     `,
     context: args,

package/app/stories/pix-icon-button.stories.js

@@ -4,14 +4,14 @@ import { action } from '@storybook/addon-actions';
 const Template = (args) => {
   return {
     template: hbs`<PixIconButton
-  @ariaLabel={{ariaLabel}}
-  @icon={{icon}}
-  @iconPrefix={{iconPrefix}}
-  @triggerAction={{triggerAction}}
-  @withBackground={{withBackground}}
-  @size={{size}}
-  disabled={{disabled}}
-  aria-disabled={{disabled}}
+  @ariaLabel={{this.ariaLabel}}
+  @icon={{this.icon}}
+  @iconPrefix={{this.iconPrefix}}
+  @triggerAction={{this.triggerAction}}
+  @withBackground={{this.withBackground}}
+  @size={{this.size}}
+  disabled={{this.disabled}}
+  aria-disabled={{this.disabled}}
 />`,
     context: args,
   };

package/app/stories/pix-input-code.stories.js

@@ -3,11 +3,11 @@ import { hbs } from 'ember-cli-htmlbars';
 export const Template = (args) => {
   return {
     template: hbs`<PixInputCode
-  @ariaLabel={{ariaLabel}}
-  @legend={{legend}}
-  @inputType={{inputType}}
-  @numInputs={{numInputs}}
-  @explanationOfUse={{explanationOfUse}}
+  @ariaLabel={{this.ariaLabel}}
+  @legend={{this.legend}}
+  @inputType={{this.inputType}}
+  @numInputs={{this.numInputs}}
+  @explanationOfUse={{this.explanationOfUse}}
 />`,
     context: args,
   };

package/app/stories/pix-input-password.stories.js

@@ -3,13 +3,13 @@ import { hbs } from 'ember-cli-htmlbars';
 export const Template = (args) => {
   return {
     template: hbs`<PixInputPassword
-  @ariaLabel={{ariaLabel}}
-  @id={{id}}
-  @label={{label}}
-  @information={{information}}
-  @errorMessage={{errorMessage}}
-  @prefix={{prefix}}
-  @requiredLabel={{requiredLabel}}
+  @ariaLabel={{this.ariaLabel}}
+  @id={{this.id}}
+  @label={{this.label}}
+  @information={{this.information}}
+  @errorMessage={{this.errorMessage}}
+  @prefix={{this.prefix}}
+  @requiredLabel={{this.requiredLabel}}
 />`,
     context: args,
   };

package/app/stories/pix-input.stories.js

@@ -3,13 +3,13 @@ import { hbs } from 'ember-cli-htmlbars';
 export const Template = (args) => {
   return {
     template: hbs`<PixInput
-  @id={{id}}
-  @label={{label}}
-  @information={{information}}
-  @errorMessage={{errorMessage}}
+  @id={{this.id}}
+  @label={{this.label}}
+  @information={{this.information}}
+  @errorMessage={{this.errorMessage}}
   placeholder='Jeanne, Pierre ...'
-  @requiredLabel={{requiredLabel}}
-  @ariaLabel={{ariaLabel}}
+  @requiredLabel={{this.requiredLabel}}
+  @ariaLabel={{this.ariaLabel}}
 />`,
     context: args,
   };

package/app/stories/pix-message.stories.js

@@ -2,9 +2,9 @@ import { hbs } from 'ember-cli-htmlbars';
 
 const Template = (args) => {
   return {
-    template: hbs`<PixMessage @type={{type}} @withIcon={{withIcon}}>
+    template: hbs`<PixMessage @type={{this.type}} @withIcon={{this.withIcon}}>
   Ceci est un message
-  {{type}}
+  {{this.type}}
   avec un texte tellement long qu'il est nécessaire
   <br />
   de l'afficher sur deux lignes.

package/app/stories/pix-modal.stories.js

@@ -3,9 +3,9 @@ import { hbs } from 'ember-cli-htmlbars';
 export const Template = (args) => {
   return {
     template: hbs`<PixModal
-  @showModal={{showModal}}
+  @showModal={{this.showModal}}
   @title={{this.title}}
-  @onCloseButtonClick={{fn (mut showModal) (not showModal)}}
+  @onCloseButtonClick={{fn (mut this.showModal) (not this.showModal)}}
 >
   <:content>
     <p>
@@ -18,16 +18,14 @@ export const Template = (args) => {
     </p>
   </:content>
   <:footer>
-    <PixButton
-      @backgroundColor='transparent-light'
-      @isBorderVisible='true'
-      @triggerAction={{fn (mut showModal) (not showModal)}}
-    >Annuler</PixButton>
-    <PixButton @triggerAction={{fn (mut showModal) (not showModal)}}>Valider</PixButton>
+    <div style="display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 16px">
+      <PixButton @backgroundColor='transparent-light' @isBorderVisible='true' @triggerAction={{fn (mut this.showModal) (not this.showModal)}}>Annuler</PixButton>
+      <PixButton @triggerAction={{fn (mut this.showModal) (not this.showModal)}}>Valider</PixButton>
+    </div>
   </:footer>
 </PixModal>
 <div style='display:flex; justify-content:center; align-items:center; height:105vh;'>
-  <PixButton @triggerAction={{fn (mut showModal) (not showModal)}}>Ouvrir la modale</PixButton>
+  <PixButton @triggerAction={{fn (mut this.showModal) (not this.showModal)}}>Ouvrir la modale</PixButton>
 </div>`,
     context: args,
   };

package/app/stories/pix-pagination.stories.js

@@ -3,10 +3,10 @@ import { hbs } from 'ember-cli-htmlbars';
 export const Template = (args) => {
   return {
     template: hbs`<PixPagination
-  @pagination={{pagination}}
-  @locale={{locale}}
-  @pageOptions={{pageOptions}}
-  @isCondensed={{isCondensed}}
+  @pagination={{this.pagination}}
+  @locale={{this.locale}}
+  @pageOptions={{this.pageOptions}}
+  @isCondensed={{this.isCondensed}}
 />`,
     context: args,
   };

package/app/stories/pix-progress-gauge.stories.js

@@ -3,11 +3,11 @@ import { hbs } from 'ember-cli-htmlbars';
 export const Default = (args) => {
   return {
     template: hbs`<PixProgressGauge
-  @value={{value}}
-  @color={{color}}
-  @isArrowLeft={{isArrowLeft}}
-  @subtitle={{subtitle}}
-  @tooltipText={{tooltipText}}
+  @value={{this.value}}
+  @color={{this.color}}
+  @isArrowLeft={{this.isArrowLeft}}
+  @subtitle={{this.subtitle}}
+  @tooltipText={{this.tooltipText}}
 />`,
     context: args,
   };
@@ -20,11 +20,11 @@ export const whiteProgressGauge = (args) => {
   return {
     template: hbs`<section style='width: 100%; padding: 35px 35px 5px;background-color: lightgray'>
   <PixProgressGauge
-    @value={{value}}
-    @color={{color}}
-    @isArrowLeft={{isArrowLeft}}
-    @subtitle={{subtitle}}
-    @tooltipText={{tooltipText}}
+    @value={{this.value}}
+    @color={{this.color}}
+    @isArrowLeft={{this.isArrowLeft}}
+    @subtitle={{this.subtitle}}
+    @tooltipText={{this.tooltipText}}
   />
 </section>`,
     context: args,

package/app/stories/pix-radio-button.stories.js

@@ -2,7 +2,7 @@ import { hbs } from 'ember-cli-htmlbars';
 
 const Template = (args) => {
   return {
-    template: hbs`<PixRadioButton @label={{label}} @value={{value}} @isDisabled={{isDisabled}} />`,
+    template: hbs`<PixRadioButton @label={{this.label}} @value={{this.value}} @isDisabled={{this.isDisabled}} />`,
     context: args,
   };
 };
@@ -20,7 +20,7 @@ isDisabled.args = {
 
 const checked = (args) => {
   return {
-    template: hbs`<PixRadioButton @label={{label}} @isDisabled={{isDisabled}} checked />`,
+    template: hbs`<PixRadioButton @label={{this.label}} @isDisabled={{this.isDisabled}} checked />`,
     context: args,
   };
 };

package/app/stories/pix-return-to.stories.js

@@ -2,7 +2,7 @@ import { hbs } from 'ember-cli-htmlbars';
 
 export const returnTo = (args) => {
   return {
-    template: hbs`<PixReturnTo @route='profile' @shade={{shade}} />`,
+    template: hbs`<PixReturnTo @route='profile' @shade={{this.shade}} />`,
     context: args,
   };
 };
@@ -12,7 +12,7 @@ returnTo.args = {
 
 export const returnToWithText = (args) => {
   return {
-    template: hbs`<PixReturnTo @route='profile' @shade={{shade}}>
+    template: hbs`<PixReturnTo @route='profile' @shade={{this.shade}}>
   Retour vers mon profil
 </PixReturnTo>`,
     context: args,

package/app/stories/pix-selectable-tag.stories.js

@@ -2,14 +2,14 @@ import { hbs } from 'ember-cli-htmlbars';
 
 export const selectableTagDefault = (args) => {
   return {
-    template: hbs`<PixSelectableTag @label='non sélectionné' @id='123' @onChange={{onChange}} @checked={{false}} />`,
+    template: hbs`<PixSelectableTag @label='non sélectionné' @id='123' @onChange={{this.onChange}} @checked={{false}} />`,
     context: args,
   };
 };
 
 export const selectableTagSelected = (args) => {
   return {
-    template: hbs`<PixSelectableTag @label='Sélectionné' @id='456' @onChange={{onChange}} @checked={{true}} />`,
+    template: hbs`<PixSelectableTag @label='Sélectionné' @id='456' @onChange={{this.onChange}} @checked={{true}} />`,
     context: args,
   };
 };
@@ -17,9 +17,9 @@ export const selectableTagSelected = (args) => {
 export const selectableTagMultiple = (args) => {
   return {
     template: hbs`<div style='display:flex;justify-content:space-around;width:400px;height:100%;padding:10px'>
-  <PixSelectableTag @label='Lorem ipsum' @id='1' @onChange={{onChange}} @checked={{false}} />
-  <PixSelectableTag @label='Lorem ipsum' @id='2' @onChange={{onChange}} @checked={{false}} />
-  <PixSelectableTag @label='Lorem ipsum' @id='3' @onChange={{onChange}} @checked={{false}} />
+  <PixSelectableTag @label='Lorem ipsum' @id='1' @onChange={{this.onChange}} @checked={{false}} />
+  <PixSelectableTag @label='Lorem ipsum' @id='2' @onChange={{this.onChange}} @checked={{false}} />
+  <PixSelectableTag @label='Lorem ipsum' @id='3' @onChange={{this.onChange}} @checked={{false}} />
 </div>`,
     context: args,
   };

package/app/stories/pix-sidebar.stories.js

@@ -3,9 +3,9 @@ import { hbs } from 'ember-cli-htmlbars';
 export const Template = (args) => {
   return {
     template: hbs`<PixSidebar
-  @showSidebar={{showSidebar}}
-  @title={{title}}
-  @onClose={{fn (mut showSidebar) (not showSidebar)}}
+  @showSidebar={{this.showSidebar}}
+  @title={{this.title}}
+  @onClose={{fn (mut this.showSidebar) (not this.showSidebar)}}
 >
   <:content>
     <p>
@@ -18,14 +18,14 @@ export const Template = (args) => {
       <PixButton
         @backgroundColor='transparent-light'
         @isBorderVisible='true'
-        @triggerAction={{fn (mut showSidebar) (not showSidebar)}}
+        @triggerAction={{fn (mut this.showSidebar) (not this.showSidebar)}}
       >Annuler</PixButton>
-      <PixButton @triggerAction={{fn (mut showSidebar) (not showSidebar)}}>Valider</PixButton>
+      <PixButton @triggerAction={{fn (mut this.showSidebar) (not this.showSidebar)}}>Valider</PixButton>
     </div>
   </:footer>
 </PixSidebar>
 <div style='display:flex; justify-content:center; align-items:center; height:105vh;'>
-  <PixButton @triggerAction={{fn (mut showSidebar) (not showSidebar)}} style='height:45px'>Ouvrir la
+  <PixButton @triggerAction={{fn (mut this.showSidebar) (not this.showSidebar)}} style='height:45px'>Ouvrir la
     sidebar</PixButton>
 </div>`,
     context: args,

package/app/stories/pix-stars.stories.js

@@ -2,7 +2,7 @@ import { hbs } from 'ember-cli-htmlbars';
 
 export const stars = (args) => {
   return {
-    template: hbs`<PixStars @count={{count}} @total={{total}} @alt={{alt}} @color={{color}} />`,
+    template: hbs`<PixStars @count={{this.count}} @total={{this.total}} @alt={{this.alt}} @color={{this.color}} />`,
     context: args,
   };
 };

package/app/stories/pix-tag.stories.js

@@ -2,7 +2,7 @@ import { hbs } from 'ember-cli-htmlbars';
 
 export const tag = (args) => {
   return {
-    template: hbs`<PixTag @color={{color}} @compact={{compact}}>
+    template: hbs`<PixTag @color={{this.color}} @compact={{this.compact}}>
   Contenu du tag
 </PixTag>`,
     context: args,
@@ -11,7 +11,7 @@ export const tag = (args) => {
 
 export const compactTag = (args) => {
   return {
-    template: hbs`<PixTag @color={{color}} @compact={{compact}}>
+    template: hbs`<PixTag @color={{this.color}} @compact={{this.compact}}>
   Contenu du tag
 </PixTag>`,
     context: args,

package/app/stories/pix-textarea.stories.js

@@ -3,11 +3,11 @@ import { hbs } from 'ember-cli-htmlbars';
 export const textarea = (args) => {
   return {
     template: hbs`<PixTextarea
-  @id={{id}}
-  @value={{value}}
-  @maxlength={{maxlength}}
-  @label={{label}}
-  @errorMessage={{errorMessage}}
+  @id={{this.id}}
+  @value={{this.value}}
+  @maxlength={{this.maxlength}}
+  @label={{this.label}}
+  @errorMessage={{this.errorMessage}}
 />`,
     context: args,
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "22.0.0",
+  "version": "23.0.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"