@1024pix/pix-ui 21.0.0 → 22.0.1

package/.storybook/main.js

@@ -7,4 +7,7 @@ module.exports = {
     '../docs/**/*.stories.@(mdx)',
     '../app/**/*.stories.@(js|mdx)',
   ],
+  core: {
+    builder: 'webpack5',
+  },
 };

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Pix-UI Changelog
 
+## 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)
+
+
+### :rocket: Amélioration
+- [#288](https://github.com/1024pix/pix-ui/pull/288) [FEATURE] Ajout le composant PixToggle (PIX-6427)
+
+### :building_construction: Tech
+- [#292](https://github.com/1024pix/pix-ui/pull/292) [TECH] Mettre à jour `ember-source` vers la 4.0.1 (PIX-6462).
+
 ## v21.0.0 (05/12/2022)
 
 

package/README.md

@@ -15,8 +15,8 @@ Pix-UI c'est l'implémentation des principes du design system de Pix. Cela se ma
 
 ##### Version du projet : 
 
-* Ember CLI v3.25.1
-* Node 14.16.0
+* Ember CLI v3.24 or above
+* Node 12 or above
 
 
 ## Installation de l'addon Pix-UI <a id="Addon"></a>

package/addon/components/pix-toggle.hbs

@@ -0,0 +1,24 @@
+<label class={{this.className}}>
+  <span class="pix-toggle__label{{if @screenReaderOnly ' screen-reader-only'}}">{{@label}}</span>
+  <button
+    class="pix-toggle__button"
+    aria-pressed={{if @toggled "true" "false"}}
+    type="button"
+    {{on "click" this.onToggle}}
+  >
+    <span class="pix-toggle__on">
+      {{#if @onLabel}}
+        {{@onLabel}}
+      {{else}}
+        {{yield to="on"}}
+      {{/if}}
+    </span>
+    <span class="pix-toggle__off">
+      {{#if @offLabel}}
+        {{@offLabel}}
+      {{else}}
+        {{yield to="off"}}
+      {{/if}}
+    </span>
+  </button>
+</label>

package/addon/components/pix-toggle.js

@@ -0,0 +1,23 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class PixToggle extends Component {
+  get className() {
+    const classes = ['pix-toggle'];
+    if (this.args.inline) {
+      classes.push('pix-toggle--inline');
+    }
+    if (this.args.toggled) {
+      classes.push('pix-toggle--pressed');
+    }
+    if (this.args.screenReaderOnly) {
+      classes.push('pix-toggle--screen-reader-only');
+    }
+    return classes.join(' ');
+  }
+
+  @action
+  onToggle() {
+    this.args.onChange(!this.args.toggled);
+  }
+}

package/addon/styles/_pix-toggle.scss

@@ -0,0 +1,63 @@
+.pix-toggle {
+  display: flex;
+  flex-direction: column;
+
+  &__label {
+    color: $pix-neutral-90;
+
+    @include text;
+  }
+
+  &__button {
+    width: fit-content;
+    background-color: transparent;
+    border: 1px solid $pix-neutral-30;
+    border-radius: 4px;
+    padding: $spacing-xxs;
+    margin-top: $spacing-xxs;
+  }
+
+  &__on,
+  &__off {
+    display: inline-block;
+    border-radius: 4px;
+    padding: $spacing-xs;
+    color: $pix-neutral-70;
+
+    @include text-small;
+  }
+
+  &__off {
+    background-color: $pix-neutral-45;
+    color: $white;
+  }
+
+  &--inline {
+    flex-direction: row;
+    align-items: center;
+    gap: $spacing-xxs;
+  }
+
+  &--inline,
+  &--screen-reader-only {
+    .pix-toggle {
+      &__button {
+        margin-top: 0;
+      }
+    }
+  }
+
+  &--pressed {
+    .pix-toggle {
+      &__on {
+        background-color: $pix-neutral-45;
+        color: $white;
+      }
+
+      &__off {
+        background-color: transparent;
+        color: inherit;
+      }
+    }
+  }
+}

package/addon/styles/addon.scss

@@ -29,6 +29,7 @@
 @import 'pix-dropdown';
 @import 'pix-pagination';
 @import 'pix-checkbox';
+@import 'pix-toggle';
 @import 'trap-focus';
 
 // at the end so it can override it's children scss

package/app/components/pix-toggle.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-toggle';

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>
@@ -21,13 +21,13 @@ export const Template = (args) => {
     <PixButton
       @backgroundColor='transparent-light'
       @isBorderVisible='true'
-      @triggerAction={{fn (mut showModal) (not showModal)}}
+      @triggerAction={{fn (mut this.showModal) (not this.showModal)}}
     >Annuler</PixButton>
-    <PixButton @triggerAction={{fn (mut showModal) (not showModal)}}>Valider</PixButton>
+    <PixButton @triggerAction={{fn (mut this.showModal) (not this.showModal)}}>Valider</PixButton>
   </: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/app/stories/pix-toggle.stories.js

@@ -0,0 +1,120 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+export const Template = (args) => {
+  return {
+    template: hbs`
+      <PixToggle
+        @label={{this.label}}
+        @onLabel={{this.onLabel}}
+        @offLabel={{this.offLabel}}
+        @toggled={{this.toggled}}
+        @onChange={{this.onChange}}
+        @inline={{this.inline}}
+        @screenReaderOnly={{this.screenReaderOnly}}
+      />
+    `,
+    context: args,
+  };
+};
+
+export const TemplateWithYields = (args) => {
+  return {
+    template: hbs`
+      <PixToggle
+        @label={{this.label}}
+        @toggled={{this.toggled}}
+        @onChange={{this.onChange}}
+      >
+        <:on><FaIcon @icon="sun" /></:on>
+        <:off><FaIcon @icon="moon" /></:off>
+      </PixToggle>
+    `,
+    context: args,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'Mon toggle',
+  onLabel: 'Oui',
+  offLabel: 'Non',
+  toggled: false,
+  onChange: action('onChange'),
+};
+
+export const Inline = Template.bind({});
+Inline.args = {
+  inline: true,
+  label: 'Mon toggle',
+  onLabel: 'Oui',
+  offLabel: 'Non',
+  toggled: false,
+  onChange: action('onChange'),
+};
+
+export const ScreenReaderOnly = Template.bind({});
+ScreenReaderOnly.args = {
+  screenReaderOnly: true,
+  label: 'Mon toggle',
+  onLabel: 'Oui',
+  offLabel: 'Non',
+  toggled: false,
+  onChange: action('onChange'),
+};
+
+export const WithYields = TemplateWithYields.bind({});
+WithYields.args = {
+  label: 'Mon toggle',
+  toggled: false,
+  onChange: action('onChange'),
+};
+
+export const argTypes = {
+  label: {
+    name: 'label',
+    description: 'Le label du PixToggle',
+    type: { name: 'string', required: true },
+  },
+  onLabel: {
+    name: 'onLabel',
+    description: "Le label de l'état actif du PixToggle",
+    type: { name: 'string', required: false },
+  },
+  offLabel: {
+    name: 'offLabel',
+    description: "Le label de l'état non actif du PixToggle",
+    type: { name: 'string', required: false },
+  },
+  toggled: {
+    name: 'toggled',
+    description: 'Détermine si le PixToggle est activé',
+    type: { name: 'boolean', required: true },
+  },
+  onChange: {
+    name: 'onChange',
+    description: "Fonction à appeler quand le PixToggle change d'état.",
+    type: { required: true },
+    control: { disable: true },
+  },
+  inline: {
+    name: 'inline',
+    description: "Permet d'afficher le PixToggle sur une seule ligne",
+    control: { type: 'boolean' },
+    type: { name: 'boolean', required: false },
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  screenReaderOnly: {
+    name: 'screenReaderOnly',
+    description: "Permet de rendre le label lisible uniquement par les lecteurs d'écran",
+    control: { type: 'boolean' },
+    type: { name: 'boolean', required: false },
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+};

package/app/stories/pix-toggle.stories.mdx

@@ -0,0 +1,38 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+import * as stories from './pix-toggle.stories.js';
+
+<Meta
+  title='Form/Toggle'
+  component='PixToggle'
+  argTypes={stories.argTypes}
+/>
+
+# Pix Select
+
+Affiche un bouton à deux états.
+
+## Default
+
+<Canvas>
+  <Story name='Default' story={stories.Default} height={200} />
+</Canvas>
+
+## Inline
+
+<Canvas>
+  <Story name='Inline' story={stories.Inline} height={200} />
+</Canvas>
+
+## ScreenReaderOnly
+
+<Canvas>
+  <Story name='ScreenReaderOnly' story={stories.ScreenReaderOnly} height={200} />
+</Canvas>
+
+## WithYields
+
+<Canvas>
+  <Story name='WithYields' story={stories.WithYields} height={200} />
+</Canvas>
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "21.0.0",
+  "version": "22.0.1",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -43,7 +43,7 @@
     "signal-github": "./scripts/signal-deploy-to-pr.sh"
   },
   "dependencies": {
-    "ember-cli-babel": "^7.26.6",
+    "ember-cli-babel": "^7.26.8",
     "ember-cli-htmlbars": "^6.1.1",
     "ember-cli-sass": "^11.0.1",
     "ember-cli-string-utils": "^1.1.0",
@@ -52,12 +52,13 @@
     "ember-truth-helpers": "^3.1.1"
   },
   "devDependencies": {
-    "@1024pix/ember-testing-library": "^0.5.0",
+    "@1024pix/ember-testing-library": "^0.6.0",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-decorators": "^7.20.5",
     "@ember/optional-features": "^2.0.0",
     "@ember/render-modifiers": "^2.0.4",
     "@ember/test-helpers": "^2.8.1",
+    "@embroider/test-setup": "^0.48.1",
     "@formatjs/intl": "^2.5.1",
     "@fortawesome/ember-fontawesome": "^0.4.1",
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
@@ -70,16 +71,18 @@
     "@storybook/addon-docs": "^6.5.13",
     "@storybook/addon-essentials": "^6.5.13",
     "@storybook/addons": "^6.5.13",
+    "@storybook/builder-webpack5": "^6.5.13",
     "@storybook/ember": "^6.5.13",
     "@storybook/ember-cli-storybook": "^0.6.0",
+    "@storybook/manager-webpack5": "^6.5.13",
     "@storybook/storybook-deployer": "^2.8.16",
     "@storybook/theming": "^6.5.13",
     "@testing-library/user-event": "^14.4.3",
     "axios": "^1.2.0",
     "broccoli-asset-rev": "^3.0.0",
     "core-js": "^3.26.1",
-    "ember-auto-import": "^1.12.0",
-    "ember-cli": "^3.27.0",
+    "ember-auto-import": "^2.5.0",
+    "ember-cli": "^4.8.0",
     "ember-cli-dependency-checker": "^3.3.1",
     "ember-cli-google-fonts": "^2.16.2",
     "ember-cli-inject-live-reload": "^2.1.0",
@@ -88,11 +91,11 @@
     "ember-disable-prototype-extensions": "^1.1.3",
     "ember-export-application-global": "^2.0.1",
     "ember-load-initializers": "^2.1.2",
-    "ember-maybe-import-regenerator": "^1.0.0",
-    "ember-qunit": "^4.6.0",
+    "ember-page-title": "^7.0.0",
+    "ember-qunit": "^6.0.0",
     "ember-resolver": "^8.0.3",
     "ember-sinon": "^5.0.0",
-    "ember-source": "^3.28.0",
+    "ember-source": "^4.0.1",
     "ember-source-channel-url": "^3.0.0",
     "ember-template-lint": "^4.18.2",
     "ember-template-lint-plugin-prettier": "^4.1.0",
@@ -104,13 +107,21 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-qunit": "^7.3.3",
     "fs-extra": "^10.1.0",
+    "html-webpack-plugin": "^5.5.0",
     "loader.js": "^4.7.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.0",
+    "qunit": "^2.19.3",
     "qunit-dom": "^2.0.0",
-    "sass": "^1.56.1"
+    "sass": "^1.56.1",
+    "webpack": "^5.75.0"
+  },
+  "overrides": {
+    "@storybook/ember": {
+      "ember-source": "^4.0.1"
+    }
   },
   "bugs": {
     "url": "https://github.com/1024pix/pix-ui/issues"

package/.github/workflows/auto-merge.yml

@@ -1,23 +0,0 @@
-name: automerge check
-
-on:
-  pull_request:
-    types:
-      - labeled
-      - unlabeled
-  check_suite:
-    types:
-      - completed
-  status:
-    types:
-      - success
-
-permissions: write-all
-
-jobs:
-  automerge:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: 1024pix/pix-actions/auto-merge@v0
-        with:
-          auto_merge_token: "${{ github.token }}"

package/.github/workflows/deploy-storybook.yml

@@ -1,22 +0,0 @@
-name: Deploy Pix UI Storybook
-
-on:
-  workflow_dispatch:
-  push:
-    tags:
-      - '*'
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16.14.0
-      - run: npm i -g npm@8.13.2
-      - run: npm ci
-      - name: Deploy storybook to Github Pages
-        run: npm run deploy-storybook -- --ci
-        env:
-          GH_TOKEN: 1024pix:${{ secrets.GITHUB_TOKEN }}

package/.github/workflows/npm-publish.yml

@@ -1,23 +0,0 @@
-# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
-# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
-
-name: Node.js Package
-
-on:
-  push:
-    tags:
-      - '*'
-
-jobs:
-  publish-npm:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '16'
-          check-latest: true
-          registry-url: https://registry.npmjs.org/
-      - run: npm publish --access public
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_PUBLISH_ACCESS_TOKEN}}

package/.github/workflows/on-dev-merge.yml

@@ -1,33 +0,0 @@
-name: Merge on Dev
-on:
-  push:
-    branches:
-      - dev
-jobs:
-  transition-issue:
-    name: Transition Issue
-    runs-on: ubuntu-latest
-    steps:
-    - name: Checkout
-      uses: actions/checkout@master
-
-    - name: Login
-      uses: atlassian/gajira-login@master
-      env:
-        JIRA_BASE_URL: ${{ secrets.JIRA_BASE_URL }}
-        JIRA_USER_EMAIL: ${{ secrets.JIRA_USER_EMAIL }}
-        JIRA_API_TOKEN: ${{ secrets.JIRA_API_TOKEN }}
-
-    - name: Find Issue Key
-      id: find
-      uses: atlassian/gajira-find-issue-key@master
-      continue-on-error: true
-      with:
-        from: commits
-
-    - name: Transition issue
-      uses: atlassian/gajira-transition@master
-      if: ${{ steps.find.outputs.issue }}
-      with:
-        issue: ${{ steps.find.outputs.issue }}
-        transition: "Move to 'Deployed in Integration'"

package/.prettierignore

@@ -1 +0,0 @@
-/blueprints/**