@1024pix/pix-ui 45.5.1 → 46.0.0

package/addon/components/pix-button-base.js

@@ -1,19 +1,19 @@
 import Component from '@glimmer/component';
 
 export default class PixButtonBase extends Component {
-  get backgroundColor() {
-    return this.args.backgroundColor || 'primary';
+  get variant() {
+    return this.args.variant || 'primary';
   }
 
   get size() {
-    return this.args.size || 'big';
+    return this.args.size || 'large';
   }
 
   get baseClassNames() {
     const classNames = [
       'pix-button',
       `pix-button--size-${this.size}`,
-      `pix-button--${this.backgroundColor}`,
+      `pix-button--${this.variant}`,
     ];
 
     this.args.isBorderVisible && classNames.push('pix-button--border');

package/addon/components/pix-checkbox.hbs

@@ -2,22 +2,24 @@
   <PixLabel
     @for={{this.id}}
     @requiredLabel={{@requiredLabel}}
+    @subLabel={{@subLabel}}
     @size={{@size}}
     @inlineLabel={{true}}
     @screenReaderOnly={{@screenReaderOnly}}
     @isDisabled={{this.isDisabled}}
     @wrappedElement={{true}}
   >
-    <input
-      type="checkbox"
-      id={{this.id}}
-      class={{this.inputClasses}}
-      checked={{@checked}}
-      aria-disabled={{this.isDisabled}}
-      {{on "click" this.avoidCheckedStateChangeIfIsDisabled}}
-      ...attributes
-    />
-
-    {{yield to="label"}}
+    <:inputElement>
+      <input
+        type="checkbox"
+        id={{this.id}}
+        class={{this.inputClasses}}
+        checked={{@checked}}
+        aria-disabled={{this.isDisabled}}
+        {{on "click" this.avoidCheckedStateChangeIfIsDisabled}}
+        ...attributes
+      />
+    </:inputElement>
+    <:default>{{yield to="label"}}</:default>
   </PixLabel>
 </div>

package/addon/components/pix-label.hbs

@@ -1,11 +1,17 @@
 <label for={{@for}} class={{this.className}} ...attributes>
-  {{#if @requiredLabel}}
-    <abbr title={{@requiredLabel}} class="mandatory-mark">*</abbr>
+  {{#if (has-block "inputElement")}}
+    {{yield to="inputElement"}}
   {{/if}}
 
-  {{yield}}
+  <span class={{if @screenReaderOnly "screen-reader-only"}}>
+    {{#if @requiredLabel}}
+      <abbr title={{@requiredLabel}} class="mandatory-mark">*</abbr>
+    {{/if}}
 
-  {{#if @subLabel}}
-    <span class="pix-label__sub-label">{{@subLabel}}</span>
-  {{/if}}
+    {{yield}}
+
+    {{#if @subLabel}}
+      <span class="pix-label__sub-label">{{@subLabel}}</span>
+    {{/if}}
+  </span>
 </label>

package/addon/components/pix-label.js

@@ -4,9 +4,9 @@ export default class PixLabel extends Component {
   get className() {
     const classes = ['pix-label'];
 
-    if (this.args.screenReaderOnly) classes.push('screen-reader-only');
     if (this.args.wrappedElement) classes.push('pix-label--wrapped-element');
-    if (this.args.inlineLabel) classes.push('pix-label--inline-label');
+    if (this.args.inlineLabel && !this.args.screenReaderOnly)
+      classes.push('pix-label--inline-label');
     if (this.args.isDisabled) classes.push('pix-label--disabled');
 
     const size = ['small', 'large'].includes(this.args.size) ? this.args.size : 'default';

package/addon/components/pix-radio-button.hbs

@@ -2,21 +2,24 @@
   <PixLabel
     @for={{this.id}}
     @requiredLabel={{@requiredLabel}}
+    @subLabel={{@subLabel}}
     @size={{@size}}
     @screenReaderOnly={{@screenReaderOnly}}
     @isDisabled={{this.isDisabled}}
     @inlineLabel={{true}}
     @wrappedElement={{true}}
   >
-    <input
-      type="radio"
-      id={{this.id}}
-      class="pix-radio-button__input"
-      value={{@value}}
-      aria-disabled={{this.isDisabled}}
-      {{on "click" this.avoidCheckedStateChangeIfIsDisabled}}
-      ...attributes
-    />
-    {{yield to="label"}}
+    <:inputElement>
+      <input
+        type="radio"
+        id={{this.id}}
+        class="pix-radio-button__input"
+        value={{@value}}
+        aria-disabled={{this.isDisabled}}
+        {{on "click" this.avoidCheckedStateChangeIfIsDisabled}}
+        ...attributes
+      />
+    </:inputElement>
+    <:default>{{yield to="label"}}</:default>
   </PixLabel>
 </div>

package/addon/styles/_pix-button-base.scss

@@ -36,7 +36,7 @@
     }
   }
 
-  &--size-big {
+  &--size-large {
     padding: var(--pix-spacing-3x) var(--pix-spacing-6x);
   }
 
@@ -66,129 +66,130 @@
     }
   }
 
-  &--success {
-    background-color: var(--pix-success-500);
+  &--primary-bis {
+    color: var(--pix-neutral-900);
+    background-color: var(--pix-secondary-500);
 
     &:not([aria-disabled="true"]) {
       &:hover {
-        background-color: var(--pix-success-700);
+        color: var(--pix-neutral-0);
+        background-color: var(--pix-secondary-700);
       }
 
       &:focus,
       &:focus-visible {
-        background-color: var(--pix-success-700);
+        color: var(--pix-neutral-0);
+        background-color: var(--pix-secondary-700);
         outline: 1px solid var(--pix-neutral-0);
         outline-offset: -4px;
       }
 
       &:active {
-        background-color: var(--pix-success-900);
+        color: var(--pix-neutral-0);
+        background-color: var(--pix-secondary-900);
         outline: none;
       }
     }
   }
 
   &--secondary {
-    color: var(--pix-neutral-900);
-    background-color: var(--pix-secondary-500);
+    color: var(--pix-primary-700);
+    background-color: transparent;
+    border: 2px solid var(--pix-primary-700);
 
     &:not([aria-disabled="true"]) {
       &:hover {
-        color: var(--pix-neutral-0);
-        background-color: var(--pix-secondary-700);
+        color: var(--pix-neutral-700);
+        background-color: var(--pix-primary-100);
       }
 
       &:focus,
       &:focus-visible {
-        color: var(--pix-neutral-0);
-        background-color: var(--pix-secondary-700);
-        outline: 1px solid var(--pix-neutral-0);
-        outline-offset: -4px;
+        color: var(--pix-primary-900);
+        background-color: var(--pix-primary-100);
+        outline: 1px solid var(--pix-primary-700);
+        outline-offset: -5px;
       }
 
       &:active {
         color: var(--pix-neutral-0);
-        background-color: var(--pix-secondary-900);
+        background-color: var(--pix-primary-700);
         outline: none;
       }
     }
   }
 
-  &--error {
-    color: var(--pix-neutral-0);
-    background-color: var(--pix-error-500);
+  &--tertiary {
+    color: var(--pix-neutral-900);
+    background-color: var(--pix-neutral-20);
 
     &:not([aria-disabled="true"]) {
       &:hover {
-        background-color: var(--pix-error-700);
+        background-color: var(--pix-neutral-100);
       }
 
       &:focus,
       &:focus-visible {
-        background-color: var(--pix-error-700);
+        color: var(--pix-neutral-0);
+        background-color: var(--pix-neutral-900);
         outline: 1px solid var(--pix-neutral-0);
         outline-offset: -4px;
       }
 
       &:active {
-        background-color: var(--pix-error-900);
+        color: var(--pix-neutral-900);
+        background-color: var(--pix-neutral-100);
         outline: none;
       }
     }
   }
 
-  &--neutral {
-    color: var(--pix-neutral-900);
-    background-color: var(--pix-neutral-20);
+  &--success {
+    background-color: var(--pix-success-500);
 
     &:not([aria-disabled="true"]) {
       &:hover {
-        background-color: var(--pix-neutral-100);
+        background-color: var(--pix-success-700);
       }
 
       &:focus,
       &:focus-visible {
-        color: var(--pix-neutral-0);
-        background-color: var(--pix-neutral-900);
+        background-color: var(--pix-success-700);
         outline: 1px solid var(--pix-neutral-0);
         outline-offset: -4px;
       }
 
       &:active {
-        color: var(--pix-neutral-900);
-        background-color: var(--pix-neutral-100);
+        background-color: var(--pix-success-900);
         outline: none;
       }
     }
   }
 
-  &--transparent-light {
-    color: var(--pix-primary-700);
-    background-color: transparent;
-    border: 2px solid var(--pix-primary-700);
+  &--error {
+    color: var(--pix-neutral-0);
+    background-color: var(--pix-error-500);
 
     &:not([aria-disabled="true"]) {
       &:hover {
-        color: var(--pix-neutral-700);
-        background-color: var(--pix-primary-100);
+        background-color: var(--pix-error-700);
       }
 
       &:focus,
       &:focus-visible {
-        color: var(--pix-primary-900);
-        background-color: var(--pix-primary-100);
-        outline: 1px solid var(--pix-primary-700);
-        outline-offset: -5px;
+        background-color: var(--pix-error-700);
+        outline: 1px solid var(--pix-neutral-0);
+        outline-offset: -4px;
       }
 
       &:active {
-        color: var(--pix-neutral-0);
-        background-color: var(--pix-primary-700);
+        background-color: var(--pix-error-900);
         outline: none;
       }
     }
   }
 
+  // DO NOT USE DEPRECATED
   &--transparent-dark {
     color: var(--pix-neutral-0);
     background-color: transparent;

package/app/stories/form.stories.js

@@ -92,12 +92,7 @@ export const form = (args) => {
 
   <ul class='pix-form__actions'>
     <li>
-      <PixButtonLink
-        @route=''
-        @model=''
-        @backgroundColor='transparent-light'
-        @isBorderVisible={{true}}
-      >
+      <PixButtonLink @route='' @model='' @variant='secondary' @isBorderVisible={{true}}>
         Annuler
       </PixButtonLink>
     </li>

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

@@ -8,7 +8,7 @@ import * as ComponentStories from './pix-button-link.stories';
 
 Affiche un lien avec le style d'un bouton Pix. Il peut être de type HTML ou Route EmberJS.
 
-Hérite des styles de base de `PixButton` (`backgroundColor`, `size`, `isBorderVisible`, `isDisabled`)
+Hérite des styles de base de `PixButton` (`variant`, `size`, `isBorderVisible`, `isDisabled`)
 
 ## Lien HTML
 

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

@@ -26,17 +26,17 @@ export default {
         "Paramètre facultatif du <LinkTo> Ember permettant d'ajouter des paires de clé/valeur dans les paramètres d'une URL",
       type: { required: false },
     },
-    backgroundColor: {
-      name: 'backgroundColor',
+    variant: {
+      name: 'variant',
       description:
-        'color: `primary`, `secondary`, `success`, `error`, `neutral`, `transparent-light`, `transparent-dark`',
+        'color: `primary`, `primary-bis`, `secondary`,`tertiary`, `success`, `error`, `transparent-dark`',
       options: [
         'primary',
+        'primary-bis',
         'secondary',
+        'tertiary',
         'success',
         'error',
-        'neutral',
-        'transparent-light',
         'transparent-dark',
       ],
       type: { name: 'string', required: false },
@@ -48,19 +48,19 @@ export default {
     },
     size: {
       name: 'size',
-      description: 'taille: `big`,`small`',
-      options: ['big', 'small'],
+      description: 'taille: `large`,`small`',
+      options: ['large', 'small'],
       type: { name: 'string', required: false },
       control: { type: 'select' },
       table: {
         type: { summary: 'string' },
-        defaultValue: { summary: 'big' },
+        defaultValue: { summary: 'large' },
       },
     },
     isBorderVisible: {
       name: 'isBorderVisible',
       description:
-        'Paramètre utilisé seulement quand le `backgroundColor` est `transparent-light` ou `transparent-dark`',
+        'Paramètre utilisé seulement quand le `variant` est `secondary` ou `transparent-dark`',
       type: { name: 'boolean', required: false },
       control: { type: 'boolean' },
       table: {
@@ -85,7 +85,7 @@ export const htmlLink = {
     template: hbs`<PixButtonLink
   @href='https://pix.fr'
   target='NEW'
-  @backgroundColor={{this.backgroundColor}}
+  @variant={{this.variant}}
   @size={{this.size}}
   @isBorderVisible={{this.isBorderVisible}}
   @isDisabled={{this.isDisabled}}
@@ -102,7 +102,7 @@ export const emberLink = (args) => {
   @route=''
   @model=''
   @query={{this.query}}
-  @backgroundColor={{this.backgroundColor}}
+  @variant={{this.variant}}
   @size={{this.size}}
   @isBorderVisible={{this.isBorderVisible}}
   @isDisabled={{this.isDisabled}}

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

@@ -7,7 +7,7 @@ import * as ComponentStories from './pix-button-upload.stories';
 
 Affiche un bouton d'upload de fichiers.
 
-Hérite des styles de base de `PixButton` (`backgroundColor`, `size`, `isBorderVisible`)
+Hérite des styles de base de `PixButton` (`variant`, `size`, `isBorderVisible`)
 
 Toutes les [propriétés HTML d'un input de type file](https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/file) sont supportées.
 

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

@@ -15,17 +15,17 @@ export default {
         "fonction à exécuter au moment de l'upload du fichier, elle prend en entrée la liste des fichiers uploadés.",
       type: { name: 'function', required: true },
     },
-    backgroundColor: {
-      name: 'backgroundColor',
+    variant: {
+      name: 'variant',
       description:
-        'color: `primary`, `success`, `secondary`, `error`, `neutral`, `transparent-light`, `transparent-dark`',
+        'color: `primary`, `primary-bis`, `secondary`,`tertiary`, `success`, `error`, `transparent-dark`',
       options: [
         'primary',
-        'success',
+        'primary-bis',
         'secondary',
+        'tertiary',
+        'success',
         'error',
-        'neutral',
-        'transparent-light',
         'transparent-dark',
       ],
       type: { name: 'string', required: false },
@@ -38,18 +38,18 @@ export default {
     size: {
       name: 'size',
       description: 'taille: `big`,`small`',
-      options: ['big', 'small'],
+      options: ['large', 'small'],
       type: { name: 'string', required: false },
       control: { type: 'select' },
       table: {
         type: { summary: 'string' },
-        defaultValue: { summary: 'big' },
+        defaultValue: { summary: 'large' },
       },
     },
     isBorderVisible: {
       name: 'isBorderVisible',
       description:
-        'Paramètre utilisé seulement quand le `backgroundColor` est `transparent-light` ou `transparent-dark`',
+        'Paramètre utilisé seulement quand le `variant` est `secondary` ou `transparent-dark`',
       type: { name: 'boolean', required: false },
       control: { type: 'boolean' },
       table: {
@@ -65,7 +65,7 @@ export const buttonUpload = (args) => {
     template: hbs`<PixButtonUpload
   @id={{this.id}}
   @onChange={{this.onChange}}
-  @backgroundColor={{this.backgroundColor}}
+  @variant={{this.variant}}
   @size={{this.size}}
   @isBorderVisible={{this.isBorderVisible}}
 >

package/app/stories/pix-button.mdx

@@ -11,17 +11,11 @@ Le bouton par défaut qui empêche les clics multiples.
 
   <Story of={ComponentStories.Default} />
 
-## Borders
+## Variants
 
-Le bouton avec bordures et fond transparent
+Le bouton avec toutes ses variations
 
-  <Story of={ComponentStories.borders} height={150} />
-
-## Colors
-
-Le bouton avec toutes ses variations de couleur
-
-  <Story of={ComponentStories.colors} height={500} />
+  <Story of={ComponentStories.variants} height={500} />
 
 ## Icons
 
@@ -71,7 +65,7 @@ Un petit bouton avec les bords arrondis en fond transparent avec une bordure
   @triggerAction="{{action"
   triggerAction}}
   @loadingColor="white"
-  @backgroundColor="transparent-light"
+  @variant="secondary"
   @isDisabled="{{false}}"
   @size="small"
   @isBorderVisible="{{true}}"

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

@@ -30,17 +30,17 @@ export default {
         defaultValue: { summary: 'white' },
       },
     },
-    backgroundColor: {
-      name: 'backgroundColor',
+    variant: {
+      name: 'variant',
       description:
-        'color: `primary`, `secondary`, `success`, `error`, `neutral`, `transparent-light`, `transparent-dark`',
+        'color: `primary`, `primary-bis`, `secondary`,`tertiary`, `success`, `error`, `transparent-dark`',
       options: [
         'primary',
+        'primary-bis',
         'secondary',
+        'tertiary',
         'success',
         'error',
-        'neutral',
-        'transparent-light',
         'transparent-dark',
       ],
       type: { name: 'string', required: false },
@@ -116,19 +116,19 @@ export default {
     },
     size: {
       name: 'size',
-      description: 'taille: `big`,`small`',
-      options: ['big', 'small'],
+      description: 'taille: `large`,`small`',
+      options: ['large', 'small'],
       type: { name: 'string', required: false },
       control: { type: 'select' },
       table: {
         type: { summary: 'string' },
-        defaultValue: { summary: 'big' },
+        defaultValue: { summary: 'large' },
       },
     },
     isBorderVisible: {
       name: 'isBorderVisible',
       description:
-        'Paramètre utilisé seulement quand le `backgroundColor` est `transparent-light` ou `transparent-dark`',
+        'Paramètre utilisé seulement quand le `variant` est `secondary` ou `transparent-dark`',
       type: { name: 'boolean', required: false },
       control: { type: 'boolean' },
       table: {
@@ -144,7 +144,7 @@ const Template = (args) => ({
   <PixButton
     @triggerAction={{this.triggerAction}}
     @loadingColor={{this.loadingColor}}
-    @backgroundColor={{this.backgroundColor}}
+    @variant={{this.variant}}
     @isDisabled={{this.isDisabled}}
     @isLoading={{this.isLoading}}
     @size={{this.size}}
@@ -162,7 +162,7 @@ const Template = (args) => ({
     <PixButton
       @triggerAction={{this.triggerAction}}
       @loadingColor={{button.loadingColor}}
-      @backgroundColor={{button.backgroundColor}}
+      @variant={{button.variant}}
       @isDisabled={{button.isDisabled}}
       @isLoading={{button.isLoading}}
       @size={{button.size}}
@@ -182,66 +182,47 @@ const Template = (args) => ({
 export const Default = Template.bind({});
 Default.args = {
   loadingColor: 'white',
-  size: 'big',
-  backgroundColor: 'primary',
+  size: 'large',
+  variant: 'primary',
   label: 'Bouton',
 };
 
-export const borders = Template.bind({});
-borders.args = {
+export const variants = Template.bind({});
+variants.args = {
   ...Default.args,
-  label: 'Bouton avec bordure sur fond clair',
-  backgroundColor: 'transparent-light',
-  loadingColor: 'grey',
-  isBorderVisible: true,
-  extraButtons: [
-    {
-      ...Default.args,
-      label: 'Bouton avec bordure sur fond sombre',
-      style: 'background-color: #775555',
-      backgroundColor: 'transparent-dark',
-      isBorderVisible: true,
-    },
-  ],
-};
-
-export const colors = Template.bind({});
-colors.args = {
-  ...Default.args,
-  label: 'Bouton avec background primary (default)',
+  label: 'Bouton primary (default)',
   extraButtons: [
     {
       ...Default.args,
-      label: 'Bouton avec background success',
-      backgroundColor: 'success',
+      label: 'Bouton primary-bis',
+      variant: 'primary-bis',
+      loadingColor: 'grey',
     },
     {
       ...Default.args,
-      label: 'Bouton avec background secondary',
-      backgroundColor: 'secondary',
+      label: 'Bouton secondary',
+      variant: 'secondary',
     },
     {
       ...Default.args,
-      label: 'Bouton avec background error',
-      backgroundColor: 'error',
+      label: 'Bouton tertiary',
+      variant: 'tertiary',
     },
     {
       ...Default.args,
-      label: 'Bouton avec background neutral',
-      backgroundColor: 'neutral',
+      label: 'Bouton success',
+      variant: 'success',
     },
     {
       ...Default.args,
-      label: 'Bouton avec bordure sur fond clair',
-      backgroundColor: 'transparent-light',
-      loadingColor: 'grey',
-      isBorderVisible: true,
+      label: 'Bouton error',
+      variant: 'error',
     },
     {
       ...Default.args,
-      label: 'Bouton avec bordure sur fond sombre',
+      label: 'Bouton avec bordure sur fond sombre (DEPRECATED)',
       style: 'background-color: #775555',
-      backgroundColor: 'transparent-dark',
+      variant: 'transparent-dark',
       isBorderVisible: true,
     },
   ],
@@ -265,7 +246,7 @@ export const loader = Template.bind({});
 loader.args = {
   ...Default.args,
   label: 'Bouton avec loader au clic',
-  backgroundColor: 'yellow',
+  variant: 'primary-bis',
   loadingColor: 'grey',
   triggerAction: () => {
     return new Promise((resolve) => {

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

@@ -97,6 +97,8 @@ const Template = (args) => {
   @isDisabled={{this.isDisabled}}
   disabled={{this.disabled}}
   @size={{this.size}}
+  @subLabel={{this.subLabel}}
+  @requiredLabel={{this.requiredLabel}}
   @inlineLabel={{this.inlineLabel}}
   @screenReaderOnly={{this.screenReaderOnly}}
 >

package/app/stories/pix-modal.mdx

@@ -37,7 +37,7 @@ Ce composant possède deux `yield` :
  </:content>
  <:footer>
   <PixButton
-    @backgroundColor="transparent-light"
+    @variant="secondary"
     @isBorderVisible={{true}}
     @triggerAction={{this.closeModal}}
   >

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

@@ -25,7 +25,7 @@ export default {
       style='display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 16px'
     >
       <PixButton
-        @backgroundColor='transparent-light'
+        @variant='secondary'
         @isBorderVisible='true'
         @triggerAction={{fn (mut this.showModal) (not this.showModal)}}
       >Annuler</PixButton>

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

@@ -94,6 +94,7 @@ const Template = (args) => {
   @size={{this.size}}
   @screenReaderOnly={{this.screenReaderOnly}}
   @requiredLabel={{this.requiredLabel}}
+  @subLabel={{this.subLabel}}
 >
   <:label>{{this.label}}</:label>
 </PixRadioButton>`,

package/app/stories/pix-sidebar.mdx

@@ -33,7 +33,7 @@ Ce composant possède deux `yield` :
  </:content>
  <:footer>
   <PixButton
-    @backgroundColor="transparent-light"
+    @variant="secondary"
     @isBorderVisible={{true}}
     @triggerAction={{this.closeSidebar}}
   >

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

@@ -45,7 +45,7 @@ const Template = (args) => {
     {{! template-lint-disable no-inline-styles }}
     <div style='display: flex; gap: 8px'>
       <PixButton
-        @backgroundColor='transparent-light'
+        @variant='secondary'
         @isBorderVisible='true'
         @triggerAction={{fn (mut this.showSidebar) (not this.showSidebar)}}
       >Annuler</PixButton>

package/package.json

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