@1024pix/pix-ui 41.2.0 → 42.0.1

package/addon/styles/{pix-design-tokens → component-state}/_form.scss

@@ -1,90 +1,87 @@
-@mixin hoverFormElement() {
-  &:hover {
-    background-color: var(--pix-neutral-20);
-    border-color: var(--pix-neutral-900);
-  }
+%pix-input-default {
+  @extend %pix-body-s;
+
+  padding: 0 var(--pix-spacing-3x);
+  color: var(--pix-neutral-900);
+  border-radius: var(--pix-spacing-1x);
 }
 
-@mixin hoverFormElementDisabled() {
-  &:hover {
-    background-color: var(--pix-neutral-20);
-    border-color:  var(--pix-neutral-100);
-  }
+%pix-input-error-message {
+  @extend %pix-body-xs;
+
+  margin-top: var(--pix-spacing-1x);
+  color: var(--pix-error-700);
 }
 
-@mixin formElementDisabled() {
-  color: var(--pix-neutral-500);
-  background-color: var(--pix-neutral-20);
-  border-color:  var(--pix-neutral-100);
-  cursor: not-allowed;
+%pix-form-success-state {
+  border: 2px solid var(--pix-success-700);
 }
 
-@mixin focusFormElement() {
-  &:focus {
-    border-color: var(--pix-primary-500);
-    outline: 2px solid var(--pix-primary-300);
-  }
+%pix-form-error-state {
+  border: 2px solid var(--pix-error-700);
 }
 
-@mixin activeFormElement() {
+%pix-form-element-state {
+  &:hover {
+    background-color: var(--pix-neutral-20);
+    border-color: var(--pix-neutral-900);
+  }
+
   &:active {
     background-color: var(--pix-neutral-0);
     border-color: var(--pix-primary-500);
     outline: none;
   }
-}
 
-@mixin focusWithinFormElement() {
-  &:focus-within {
+  &:focus-within, &:focus {
     border-color: var(--pix-primary-500);
     outline: 2px solid var(--pix-primary-300);
   }
-}
 
-@mixin label() {
-  display: block;
-  margin-bottom: var(--pix-spacing-1x);
-  color: var(--pix-neutral-900);
-  font-weight: $font-medium;
-  font-size: 0.875rem;
-  line-height: 1.375rem;
-}
-
-@mixin subLabel() {
-  @include label();
+  &[aria-disabled],
+  &[disabled],
+  &[readonly] {
+    color: var(--pix-neutral-500);
+    background-color: var(--pix-neutral-20);
+    border-color:  var(--pix-neutral-100);
+    cursor: not-allowed;
 
-  color: var(--pix-neutral-500);
-  font-weight: $font-normal;
-  font-size: 0.813rem;
-  line-height: 1rem;
-}
+    &:hover {
+      background-color: var(--pix-neutral-20);
+      border-color:  var(--pix-neutral-100);
+    }
+  }
 
-@mixin errorMessage() {
-  margin-top: var(--pix-spacing-1x);
-  color: var(--pix-error-700);
-  font-size: 0.75rem;
+  &[readonly] {
+    cursor: default;
+  }
 }
 
-@mixin formElementInError() {
-  border-color: var(--pix-error-700);
-}
+%pix-label {
+  @extend %pix-body-s;
 
-@mixin formElementInSuccess() {
-  border-color: var(--pix-success-700);
+  display: block;
+  margin-bottom: var(--pix-spacing-1x);
+  color: var(--pix-neutral-900);
+  font-weight: var(--pix-font-medium);
 }
 
-@mixin input() {
+%pix-sublabel {
   @extend %pix-body-s;
 
-  padding: 0 var(--pix-spacing-3x);
-  color: var(--pix-neutral-900);
-  border-radius: var(--pix-spacing-1x);
+  display: block;
+  margin-bottom: var(--pix-spacing-1x);
+  color: var(--pix-neutral-500);
 }
 
+
+// Only on StoryBook
 .pix-form__label {
-  @include label();
+  @extend %pix-body-m;
 
-  padding-bottom: var(--pix-spacing-3x);
+  display: block;
+  margin-bottom: var(--pix-spacing-3x);
+  color: var(--pix-neutral-900);
 }
 
 .pix-form__actions {

package/addon/styles/component-state/index.scss

@@ -0,0 +1 @@
+@import 'form';

package/addon/styles/normalize-reset/_reset.scss

@@ -10,7 +10,7 @@ html {
 }
 
 body {
-  font-family: $font-roboto;
+  @extend %pix-body-l;
 }
 
 *,

package/addon/styles/pix-design-tokens/index.scss

@@ -2,6 +2,5 @@
 @import 'colors';
 @import 'fonts';
 @import 'spacing';
-@import 'form';
 @import 'shadows';
 @import 'typography';

package/app/stories/form.stories.js

@@ -16,7 +16,11 @@ export const form = (args) => {
     @validationStatus={{this.validationStatus}}
   />
   <br />
-  <PixInputPassword @id='password' @label='Mot de passe' @errorMessage={{this.genericErrorMessage}} />
+  <PixInputPassword
+    @id='password'
+    @label='Mot de passe'
+    @errorMessage={{this.genericErrorMessage}}
+  />
   <br />
 
   <PixMultiSelect
@@ -45,6 +49,7 @@ export const form = (args) => {
     {{condiment.label}}
   </PixMultiSelect>
   <br /><br />
+  {{! template-lint-disable no-inline-styles }}
 
   <PixSelect
     @id='form__searchable-pix-select'
@@ -72,10 +77,7 @@ export const form = (args) => {
   <PixRadioButton @label='Carotte' @value='carotte' name='légume' />
   <br />
 
-  <PixCheckbox
-    @id='spam-pub'
-    @labelSize='small'
-  >
+  <PixCheckbox @id='spam-pub' @labelSize='small'>
     Acceptez-vous de vous faire spammer de PUB ?
   </PixCheckbox>
 

package/app/stories/pix-background-header.stories.js

@@ -7,8 +7,10 @@ export default {
 export const backgroundHeader = (args) => {
   return {
     template: hbs`<PixBackgroundHeader>
+  {{! template-lint-disable no-inline-styles }}
 
   <PixBlock style='margin: 0 0 32px; padding: 14px 24px;'>Un panel avec du text</PixBlock>
+  {{! template-lint-disable no-inline-styles }}
 
   <PixBlock style='padding: 14px 24px;'>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a interdum mauris. Morbi ac diam

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

@@ -40,13 +40,21 @@ export default {
     backgroundColor: {
       name: 'backgroundColor',
       description:
-        'color: `blue`, `green`, `yellow`, `red`, `grey`, `transparent-light`, `transparent-dark`',
-      options: ['blue', 'green', 'yellow', 'red', 'grey', 'transparent-light', 'transparent-dark'],
+        'color: `primary`, `secondary`, `success`, `error`, `neutral`, `transparent-light`, `transparent-dark`',
+      options: [
+        'primary',
+        'secondary',
+        'success',
+        'error',
+        'neutral',
+        'transparent-light',
+        'transparent-dark',
+      ],
       type: { name: 'string', required: false },
       control: { type: 'select' },
       table: {
         type: { summary: 'string' },
-        defaultValue: { summary: 'blue' },
+        defaultValue: { summary: 'primary' },
       },
     },
     size: {

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

@@ -147,23 +147,13 @@ export default {
         defaultValue: { summary: 'false' },
       },
     },
-    route: {
-      name: 'route',
-      description: 'Déprécié et remplacé par le composant PixButtonLink',
-      type: { name: 'string', required: false },
-    },
-    model: {
-      name: 'model',
-      description: 'Déprécié et remplacé par le composant PixButtonLink',
-      type: { required: false },
-    },
   },
 };
 
 const Template = (args) => ({
   template: hbs`<section style={{this.style}}>
   <PixButton
-    @triggerAction={{action this.triggerAction}}
+    @triggerAction={{this.triggerAction}}
     @loadingColor={{this.loadingColor}}
     @shape={{this.shape}}
     @backgroundColor={{this.backgroundColor}}
@@ -182,7 +172,7 @@ const Template = (args) => ({
 {{#each this.extraButtons as |button|}}
   <section style={{button.style}}>
     <PixButton
-      @triggerAction={{action this.triggerAction}}
+      @triggerAction={{this.triggerAction}}
       @loadingColor={{button.loadingColor}}
       @shape={{button.shape}}
       @backgroundColor={{button.backgroundColor}}
@@ -236,23 +226,23 @@ colors.args = {
   extraButtons: [
     {
       ...Default.args,
-      label: 'Bouton avec background green',
-      backgroundColor: 'green',
+      label: 'Bouton avec background success',
+      backgroundColor: 'success',
     },
     {
       ...Default.args,
-      label: 'Bouton avec background yellow',
-      backgroundColor: 'yellow',
+      label: 'Bouton avec background secondary',
+      backgroundColor: 'secondary',
     },
     {
       ...Default.args,
-      label: 'Bouton avec background red',
-      backgroundColor: 'red',
+      label: 'Bouton avec background error',
+      backgroundColor: 'error',
     },
     {
       ...Default.args,
-      label: 'Bouton avec background grey',
-      backgroundColor: 'grey',
+      label: 'Bouton avec background neutral',
+      backgroundColor: 'neutral',
     },
     {
       ...Default.args,

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

@@ -71,8 +71,7 @@ export default {
 
 export const Template = (args) => {
   return {
-    template: hbs`
-<PixCheckbox
+    template: hbs`<PixCheckbox
   @id={{this.id}}
   @class={{this.class}}
   @screenReaderOnly={{this.screenReaderOnly}}
@@ -82,8 +81,7 @@ export const Template = (args) => {
   disabled={{this.disabled}}
 >
   {{this.label}}
-</PixCheckbox>
-`,
+</PixCheckbox>`,
     context: args,
   };
 };
@@ -142,9 +140,8 @@ checkboxInterminateDisabled.args = {
 
 export const MultipleTemplate = (args) => {
   return {
-    template: hbs`
-<PixCheckbox
-  @id="one"
+    template: hbs`<PixCheckbox
+  @id='one'
   @class={{this.class}}
   @screenReaderOnly={{this.screenReaderOnly}}
   @isIndeterminate={{this.isIndeterminate}}
@@ -155,7 +152,7 @@ export const MultipleTemplate = (args) => {
   {{this.label}}
 </PixCheckbox>
 <PixCheckbox
-  @id="two"
+  @id='two'
   @class={{this.class}}
   @screenReaderOnly={{this.screenReaderOnly}}
   @isIndeterminate={{this.isIndeterminate}}
@@ -164,8 +161,7 @@ export const MultipleTemplate = (args) => {
   disabled={{this.disabled}}
 >
   {{this.label}}
-</PixCheckbox>
-`,
+</PixCheckbox>`,
     context: args,
   };
 };

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

@@ -46,9 +46,27 @@ export const filterBanner = (args) => {
   @onClearFilters={{this.onClearFilters}}
   @isClearFilterButtonDisabled={{this.isClearFilterButtonDisabled}}
 >
-  <PixSelect @options={{this.options}} @onChange={{this.onChange}} @label="mon label" @screenReaderOnly={{true}} @placeholder="placeholer"/>
-  <PixSelect @options={{this.options}} @onChange={{this.onChange}} @label="mon label" @screenReaderOnly={{true}} @placeholder="placeholer"/>
-  <PixSelect @options={{this.options}} @onChange={{this.onChange}} @label="mon label" @screenReaderOnly={{true}} @placeholder="placeholer"/>
+  <PixSelect
+    @options={{this.options}}
+    @onChange={{this.onChange}}
+    @label='mon label'
+    @screenReaderOnly={{true}}
+    @placeholder='placeholer'
+  />
+  <PixSelect
+    @options={{this.options}}
+    @onChange={{this.onChange}}
+    @label='mon label'
+    @screenReaderOnly={{true}}
+    @placeholder='placeholer'
+  />
+  <PixSelect
+    @options={{this.options}}
+    @onChange={{this.onChange}}
+    @label='mon label'
+    @screenReaderOnly={{true}}
+    @placeholder='placeholer'
+  />
 </PixFilterBanner>`,
     context: args,
   };

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

@@ -139,23 +139,21 @@ export default {
 
 const Template = (args) => {
   return {
-    template: hbs`
-      <PixFilterableAndSearchableSelect
-        @label={{this.label}}
-        @subLabel={{this.subLabel}}
-        @screenReaderOnly={{this.screenReaderOnly}}
-        @placeholder={{this.placeholder}}
-        @hideDefaultOption={{this.hideDefaultOption}}
-        @options={{this.options}}
-        @onChange={{this.onChange}}
-        @categoriesLabel={{this.categoriesLabel}}
-        @categoriesPlaceholder={{this.categoriesPlaceholder}}
-        @isSearchable={{this.isSearchable}}
-        @value={{this.value}}
-        @requiredText={{this.requiredText}}
-        @errorMessage={{this.errorMessage}}
-      />
-    `,
+    template: hbs`<PixFilterableAndSearchableSelect
+  @label={{this.label}}
+  @subLabel={{this.subLabel}}
+  @screenReaderOnly={{this.screenReaderOnly}}
+  @placeholder={{this.placeholder}}
+  @hideDefaultOption={{this.hideDefaultOption}}
+  @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-indicator-card.stories.js

@@ -39,23 +39,23 @@ export default {
 
 const Template = (args) => {
   return {
-    template: hbs`
-    <div style="min-width:300px">
-      <PixIndicatorCard
-        @title={{this.title}}
-        @color={{this.color}}
-        @icon={{this.icon}}
-        @iconPrefix={{this.iconPrefix}}
-        @info={{this.info}}
-        @isLoading={{this.isLoading}}
-        @loadingMessage={{this.loadingMessage}}
-      >
-        <:default>{{this.value}}</:default>
-        <:sub>
-          <span>En cours : 1</span><span>En attente : 2</span><span>Envoyés : 3</span>
-        </:sub>
-      </PixIndicatorCard>
-    </div>`,
+    template: hbs`{{! template-lint-disable no-inline-styles }}
+<div style='min-width:300px'>
+  <PixIndicatorCard
+    @title={{this.title}}
+    @color={{this.color}}
+    @icon={{this.icon}}
+    @iconPrefix={{this.iconPrefix}}
+    @info={{this.info}}
+    @isLoading={{this.isLoading}}
+    @loadingMessage={{this.loadingMessage}}
+  >
+    <:default>{{this.value}}</:default>
+    <:sub>
+      <span>En cours : 1</span><span>En attente : 2</span><span>Envoyés : 3</span>
+    </:sub>
+  </PixIndicatorCard>
+</div>`,
     context: args,
   };
 };

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

@@ -19,12 +19,22 @@ export default {
     </p>
   </:content>
   <:footer>
-    <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>
+    {{! template-lint-disable no-inline-styles }}
+
+    <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>
+{{! template-lint-disable no-inline-styles }}
+
 <div style='display:flex; justify-content:center; align-items:center; height:105vh;'>
   <PixButton @triggerAction={{fn (mut this.showModal) (not this.showModal)}}>Ouvrir la modale</PixButton>
 </div>`,

package/app/stories/pix-multi-select.stories.js

@@ -4,32 +4,30 @@ import { action } from '@storybook/addon-actions';
 export default {
   title: 'Form/Multi Select',
   render: (args) => ({
-    template: hbs`
-  <style>
-    .custom {
-      border : none;
-    }
-  </style>
-  <h4><strong>⚠️ La sélection des éléments ne fonctionne pas dans Storybook.</strong></h4>
-  {{#if this.id}}
-    <div>
-      <label for={{this.id}}>Un label en dehors du composant</label>
-    </div>
-  {{/if}}
-  <PixMultiSelect
-    @id={{this.id}}
-    @label={{this.label}}
-    @placeholder={{this.placeholder}}
-    @screenReaderOnly={{this.screenReaderOnly}}
-    @onChange={{this.onChange}}
-    @emptyMessage={{this.emptyMessage}}
-    @className={{this.className}}
-    @isSearchable={{this.isSearchable}}
-    @strictSearch={{this.strictSearch}}
-    @values={{this.values}}
-    @options={{this.options}} as |option|
-  >{{option.label}}</PixMultiSelect>
- `,
+    template: hbs`{{! template-lint-disable no-forbidden-elements }}
+<style>
+  .custom { border : none; }
+</style>
+<h4><strong>⚠️ La sélection des éléments ne fonctionne pas dans Storybook.</strong></h4>
+{{#if this.id}}
+  <div>
+    <label for={{this.id}}>Un label en dehors du composant</label>
+  </div>
+{{/if}}
+<PixMultiSelect
+  @id={{this.id}}
+  @label={{this.label}}
+  @placeholder={{this.placeholder}}
+  @screenReaderOnly={{this.screenReaderOnly}}
+  @onChange={{this.onChange}}
+  @emptyMessage={{this.emptyMessage}}
+  @className={{this.className}}
+  @isSearchable={{this.isSearchable}}
+  @strictSearch={{this.strictSearch}}
+  @values={{this.values}}
+  @options={{this.options}}
+  as |option|
+>{{option.label}}</PixMultiSelect>`,
     context: args,
   }),
   argTypes: {
@@ -141,24 +139,23 @@ export const Default = {
 
 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}}
-        />
-      </PixMultiSelect>
-    `,
+    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}}
+  />
+</PixMultiSelect>`,
     context: args,
   };
 };
@@ -202,23 +199,21 @@ export const multiSelectWithId = {
 };
 
 const TemplateWithYield = (args) => ({
-  template: hbs`
-  <PixMultiSelect
-    @id={{this.id}}
-    @label={{this.label}}
-    @screenReaderOnly={{this.screenReaderOnly}}
-    @onChange={{this.onChange}}
-    @emptyMessage={{this.emptyMessage}}
-    @className={{this.className}}
-    @isSearchable={{this.isSearchable}}
-    @strictSearch={{this.strictSearch}}
-    @values={{this.values}}
-    @options={{this.options}}
-  >
-    <:placeholder>filtres (2)</:placeholder>
-    <:default as |option|>{{option.label}}</:default>
-  </PixMultiSelect>
- `,
+  template: hbs`<PixMultiSelect
+  @id={{this.id}}
+  @label={{this.label}}
+  @screenReaderOnly={{this.screenReaderOnly}}
+  @onChange={{this.onChange}}
+  @emptyMessage={{this.emptyMessage}}
+  @className={{this.className}}
+  @isSearchable={{this.isSearchable}}
+  @strictSearch={{this.strictSearch}}
+  @values={{this.values}}
+  @options={{this.options}}
+>
+  <:placeholder>filtres (2)</:placeholder>
+  <:default as |option|>{{option.label}}</:default>
+</PixMultiSelect>`,
   context: args,
 });
 

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

@@ -95,7 +95,8 @@ Tertiary.args = {
 
 export const darkModeProgressGauge = (args) => {
   return {
-    template: hbs`<section style='width: 100%; padding: 35px 35px 5px;background-color: #253858'>
+    template: hbs`{{! template-lint-disable no-inline-styles }}
+<section style='width: 100%; padding: 35px 35px 5px;background-color: #253858'>
   <PixProgressGauge
     @value={{this.value}}
     @color={{this.color}}