@1024pix/pix-ui 32.0.0 → 33.0.0

package/.circleci/config.yml

@@ -7,24 +7,61 @@ workflows:
   version: 2
   build-and-test:
     jobs:
-      - build-and-test:
+      - install:
           filters:
             branches:
               ignore:
                 - gh-pages
+      - lint-and-test:
+          filters:
+            branches:
+              ignore:
+                - gh-pages
+          requires:
+            - install
+      - chromatic-deployment:
+          filters:
+            branches:
+              ignore:
+                - gh-pages
+          requires:
+            - install
 
 jobs:
-  build-and-test:
+  install:
+    docker:
+      - image: cimg/node:16.19.1-browsers
+    resource_class: medium+
+    steps:
+      - checkout
+      - run: npm ci
+      - save_cache:
+          name: Save node modules
+          key: node_modules
+          paths:
+            - node_modules
+  lint-and-test:
     docker:
       - image: cimg/node:16.19.1-browsers
     resource_class: medium+
     steps:
       - checkout
+      - restore_cache:
+          name: Restore node modules
+          key: node_modules
       - browser-tools/install-chrome
       - browser-tools/install-chromedriver
-      - run: npm ci
       - run: npm run lint:js
       - run: npm run lint:hbs
       - run: npm run lint:scss
       - run: npm test
       - run: npx ember try:one embroider-safe
+  chromatic-deployment:
+    docker:
+      - image: cimg/node:16.19.1-browsers
+    steps:
+      - checkout
+      - restore_cache:
+          name: Restore node modules
+          key: node_modules
+      - run: npm run chromatic -- --exit-zero-on-changes

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Pix-UI Changelog
 
+## v32.1.0 (27/04/2023)
+
+
+### :rocket: Amélioration
+- [#389](https://github.com/1024pix/pix-ui/pull/389) [FEATURE] Ajouter l'argument requiredLabel au TextArea (PIX-7710)
+- [#388](https://github.com/1024pix/pix-ui/pull/388) [FEATURE] Rectifier et uniformiser les composants Checkbox et Radio
+- [#390](https://github.com/1024pix/pix-ui/pull/390) [FEATURE] Ajouter Chromatic (PIX-7872)
+- [#386](https://github.com/1024pix/pix-ui/pull/386) [FEATURE] Améliorer le contraste du composant PixProgressGauge (PIX-7268)
+
 ## v32.0.0 (24/04/2023)
 
 

package/addon/components/pix-checkbox.hbs

@@ -2,19 +2,17 @@
   <input
     id={{@id}}
     type="checkbox"
-    class="pix-checkbox__input {{if @isIndeterminate ' pix-checkbox__input--indeterminate'}}"
+    class={{this.inputClasses}}
     checked={{@checked}}
     ...attributes
   />
 
   {{#if (has-block)}}
-    <span
-      class="pix-checkbox__label
-        {{if @screenReaderOnly 'screen-reader-only'}}
-        {{this.labelSizeClass}}"
-    >{{yield}}</span>
+    <span class={{this.labelClasses}}>{{yield}}</span>
   {{else}}
-    yield required to give a label for PixCheckBox
-    {{@id}}.
+    <span>
+      yield required to give a label for PixCheckbox
+      {{@id}}.
+    </span>
   {{/if}}
 </label>

package/addon/components/pix-checkbox.js

@@ -1,11 +1,5 @@
 import Component from '@glimmer/component';
 
-const labelSizeToClass = new Map([
-  ['small', 'pix-checkbox__label--small'],
-  ['default', 'pix-checkbox__label--default'],
-  ['large', 'pix-checkbox__label--large'],
-]);
-
 export default class PixCheckbox extends Component {
   constructor() {
     super(...arguments);
@@ -15,7 +9,27 @@ export default class PixCheckbox extends Component {
     }
   }
 
-  get labelSizeClass() {
-    return labelSizeToClass.get(this.args.labelSize);
+  get inputClasses() {
+    const classes = ['pix-checkbox__input'];
+
+    if (this.args.isIndeterminate) {
+      classes.push(`${classes[0]}--indeterminate`);
+    }
+
+    return classes.join(' ');
+  }
+
+  get labelClasses() {
+    const classes = ['pix-checkbox__label'];
+
+    if (this.args.labelSize) {
+      classes.push(`${classes[0]}--${this.args.labelSize}`);
+    }
+
+    if (this.args.screenReaderOnly) {
+      classes.push('screen-reader-only');
+    }
+
+    return classes.join(' ');
   }
 }

package/addon/components/pix-progress-gauge.js

@@ -19,10 +19,10 @@ export default class PixProgressGauge extends Component {
   }
 
   get progressGaugeClass() {
-    const availableColor = ['yellow', 'white'];
+    const availableColor = ['blue', 'white'];
 
     const color =
-      this.args.color && availableColor.includes(this.args.color) ? this.args.color : `yellow`;
+      this.args.color && availableColor.includes(this.args.color) ? this.args.color : `blue`;
 
     return `progress-gauge--${color}`;
   }

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

@@ -1,12 +1,10 @@
-<div class="pix-radio-button">
-  <label class="{{if @isDisabled ' pix-radio-button--disabled'}}">
-    <input
-      disabled={{@isDisabled}}
-      aria-disabled="{{@isDisabled}}"
-      type="radio"
-      value={{@value}}
-      ...attributes
-    />
-    {{@label}}
-  </label>
-</div>
+<label class="pix-radio-button">
+  <input
+    class="pix-radio-button__input"
+    type="radio"
+    value={{@value}}
+    disabled={{@isDisabled}}
+    ...attributes
+  />
+  <span class="pix-radio-button__label">{{@label}}</span>
+</label>

package/addon/components/pix-textarea.hbs

@@ -1,16 +1,25 @@
 <div class="pix-textarea">
 
   {{#if this.label}}
-    <label for={{@id}} class="pix-textarea__label">{{this.label}}</label>
+
+    <label for={{@id}} class="pix-textarea__label">
+      {{#if this.requiredLabel}}
+        <abbr title={{this.requiredLabel}} class="mandatory-mark" aria-hidden="true">*</abbr>
+      {{/if}}
+      {{this.label}}
+    </label>
   {{/if}}
 
   <Textarea
     id={{@id}}
     @value={{@value}}
     maxlength={{if @maxlength @maxlength}}
+    aria-required="{{if this.requiredLabel true false}}"
+    required={{if this.requiredLabel true false}}
     class="{{if @errorMessage 'pix-textarea--error'}}"
     ...attributes
   />
+
   {{#if @maxlength}}
     <p>{{this.textLengthIndicator}} / {{@maxlength}}</p>
   {{/if}}

package/addon/components/pix-textarea.js

@@ -7,11 +7,23 @@ export default class PixTextarea extends Component {
 
   get label() {
     const labelIsDefined = this.args.label?.trim();
-    const idIsNotDefined = !this.args.id?.trim();
+    const idIsDefined = this.args.id?.trim();
 
-    if (labelIsDefined && idIsNotDefined) {
+    if (labelIsDefined && !idIsDefined) {
       throw new Error('ERROR in PixTextarea component, @id param is necessary when giving @label');
     }
     return this.args.label || null;
   }
+
+  get requiredLabel() {
+    const idRequiredLabelDefined = this.args.requiredLabel?.trim();
+    const labelIsDefined = this.args.label?.trim();
+
+    if (idRequiredLabelDefined && !labelIsDefined) {
+      throw new Error(
+        'ERROR in PixTextarea component, @label param is necessary when giving @requiredLabel'
+      );
+    }
+    return this.args.requiredLabel || null;
+  }
 }

package/addon/styles/_pix-checkbox.scss

@@ -1,74 +1,137 @@
 .pix-checkbox {
+  position: relative;
+  z-index: 0;
   align-items: center;
   display: flex;
   color: $pix-neutral-70;
   cursor: pointer;
 
-  &__label {
-    @extend %pix-body-m;
+  & + .pix-checkbox {
+    margin-top: $pix-spacing-s;
+  }
+}
 
-    &--small {
-      @extend %pix-body-s;
-    }
+/* Label */
+.pix-checkbox__label {
+  padding-left: 12px;
+  color: $pix-neutral-90;
+  font-size: 1rem;
+  line-height: 1.5;
+
+  &--small {
+    font-size: 0.875rem;
+  }
+
+  &--large {
+    font-size: 1.125rem;
+  }
+}
+
+/* Input */
+.pix-checkbox__input {
+  position: relative;
+  width: 1rem;
+  height: 1rem;
+  background-color: $pix-neutral-0;
+  border: 1.5px solid $pix-neutral-70;
+  border-radius: 2px;
+  appearance: none;
+  cursor: pointer;
+
+  // Hover effect
+  &::before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    top: 50%;
+    left: 50%;
+    width: 1rem;
+    height: 1rem;
+    transform: translate(-50%, -50%) scale(1);
+    border-radius: 50%;
+    background-color: $pix-neutral-15;
+    visibility: hidden;
+    opacity: 0;
+    transition: all 0.3s ease;
+  }
+
+  &:hover,
+  &:focus-visible,
+  &:active {
+    border-color: $pix-neutral-90;
 
-    &--large {
-      @extend %pix-body-l;
+    &::before {
+      visibility: visible;
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1.75);
     }
   }
 
-  input {
-    cursor: pointer;
+  &:active {
+    &::before {
+      background-color: $pix-neutral-22;
+    }
   }
 
-  &__input {
-    appearance: none;
-    margin: 0 10px;
-    min-width: 18px;
-    min-height: 18px;
-    border: 1.2px solid $pix-neutral-90;
-    border-radius: 2px;
-    position: relative;
+  // Checked state
+  &:checked {
+    background: $pix-primary;
+    border-color: $pix-primary;
 
     &:hover,
-    &:focus {
-      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 6px $pix-neutral-15;
+    &:focus-visible,
+    &:active {
+      background: $pix-primary-60;
+      border-color: $pix-primary-60;
     }
 
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 10%;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: contain;
+      background-image: url("data:image/svg+xml,%3Csvg width='13' height='10' viewBox='0 0 13 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 3L0 4.5L5 9.5L13 1.5L11.5 0L5 6.5L1.5 3Z' fill='white'/%3E%3C/svg%3E%0A");
+    }
+  }
+
+  // Indeterminate state
+  &--indeterminate:checked {
+    background: $pix-neutral-70;
+    border-color: $pix-neutral-70;
+
+    &:hover,
+    &:focus-visible,
     &:active {
-      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 6px $pix-neutral-22;
+      background: $pix-neutral-90;
+      border-color: $pix-neutral-90;
+    }
+
+    &::after {
+      inset: 15%;
+      background-image: url("data:image/svg+xml,%3Csvg width='10' height='2' viewBox='0 0 10 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='10' height='2' fill='white'/%3E%3C/svg%3E%0A");
+    }
+  }
+
+  // Disabled state
+  &:disabled,
+  &--indeterminate:disabled {
+    background: $pix-neutral-10;
+    border-color: $pix-neutral-30;
+    cursor: not-allowed;
+
+    & + .pix-checkbox__label {
+      cursor: not-allowed;
     }
 
     &:checked {
-      background: $pix-primary border-box;
-      border-color: $pix-primary;
-
-      &::after {
-        content: '';
-        background-image: url("data:image/svg+xml,%3Csvg width='13' height='10' viewBox='0 0 13 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 3L0 4.5L5 9.5L13 1.5L11.5 0L5 6.5L1.5 3Z' fill='white'/%3E%3C/svg%3E%0A");
-        background-repeat: no-repeat;
-        background-position: center;
-        width: 16px;
-        height: 16px;
-        position: absolute;
-        top: 0;
-        left: 0;
-      }
+      background: $pix-neutral-30;
+      border-color: $pix-neutral-30;
     }
 
-    &.pix-checkbox__input--indeterminate {
-      &:checked {
-        background: $pix-neutral-60 border-box;
-        border-color: $pix-neutral-60;
-
-        &::after {
-          content: '';
-          background-image: url("data:image/svg+xml,%3Csvg width='10' height='2' viewBox='0 0 10 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='10' height='2' fill='white'/%3E%3C/svg%3E%0A");
-          background-repeat: no-repeat;
-          background-position: center;
-          width: 16px;
-          height: 16px;
-        }
-      }
+    &::before {
+      display: none;
     }
   }
 }

package/addon/styles/_pix-progress-gauge.scss

@@ -6,7 +6,7 @@
 
   &__sub-title {
     font-size: 0.813rem;
-    color: $pix-warning-40;
+    color: $pix-primary-60;
     margin: 6px 0;
     letter-spacing: 0.4px;
     text-transform: uppercase;
@@ -74,27 +74,26 @@
     }
   }
 
-  &--yellow {
+  &--blue {
     & .progress-gauge__referrer {
       background-color: $pix-neutral-20;
     }
 
     & .progress-gauge__marker {
-      background: $pix-secondary-app-gradient;
+      background-color: $pix-primary-60;
     }
 
     & .progress-gauge__tooltip {
-      background: $pix-secondary-app-gradient;
+      background-color: $pix-primary-60;
       color: $pix-neutral-0;
 
       &::before {
-        color: $pix-warning-40;
-        border-top-color: $pix-warning-40;
+        border-top-color: $pix-primary-60;
       }
     }
 
     & .progress-gauge__sub-title {
-      color: $pix-warning-40;
+      color: $pix-primary-60;
     }
   }
 

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

@@ -1,71 +1,95 @@
 .pix-radio-button {
+  display: flex;
+  align-items: center;
   cursor: pointer;
-  font-size: 0.875rem;
-  color: $pix-neutral-70;
 
-  label {
-    display: flex;
-    align-items: center;
+  & + .pix-radio-button {
+    margin-top: $pix-spacing-s;
   }
 
-  input {
-    appearance: none;
+  &__label {
+    padding-left: 12px;
+    color: $pix-neutral-90;
+    font-size: 1rem;
+    line-height: 1.5;
+  }
+
+  &__input {
     position: relative;
+    width: 1rem;
+    height: 1rem;
+    background-color: $pix-neutral-0;
+    border: 1.5px solid $pix-neutral-70;
     border-radius: 50%;
-    width: 18px;
-    height: 18px;
-    margin: 0 10px 0 0;
-    border: 1px solid $pix-neutral-70;
-    cursor: pointer;
-    background-color: transparent;
+    appearance: none;
 
-    &:hover {
+    // Hover effect
+    &::before {
+      content: '';
+      position: absolute;
+      z-index: -1;
+      top: 50%;
+      left: 50%;
+      width: 1rem;
+      height: 1rem;
+      transform: translate(-50%, -50%) scale(1);
+      border-radius: 50%;
       background-color: $pix-neutral-15;
-      box-shadow: 0 0 0 8px $pix-neutral-15;
+      visibility: hidden;
+      opacity: 0;
       transition: all 0.3s ease;
     }
 
-    &:focus-visible {
-      box-shadow: $pix-neutral-0 0 0 0 2px, $pix-primary 0 0 0 4px;
-      outline: none;
+    &:hover,
+    &:focus-visible,
+    &:active {
+      &::before {
+        visibility: visible;
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1.75);
+      }
     }
 
     &:active {
-      border-color: $pix-primary;
-      background-color: transparent;
-      box-shadow: none;
+      &::before {
+        background-color: $pix-neutral-22;
+      }
     }
 
+    // Checked state
     &:checked {
       border-color: $pix-primary;
 
-      &:after {
-        background-color: $pix-primary;
-        border-radius: 50%;
+      &::after {
         content: '';
-        height: 12px;
-        width: 12px;
         position: absolute;
-        left: 50%;
         top: 50%;
+        left: 50%;
+        height: 62.5%;
+        width: 62.5%;
         transform: translate(-50%, -50%);
+        background-color: $pix-primary;
+        border-radius: 50%;
       }
     }
 
+    // Disabled state
     &:disabled {
-      border: 1px solid $pix-neutral-45;
-      background-color: transparent;
-      box-shadow: none;
+      background-color: $pix-neutral-10;
+      border-color: $pix-neutral-30;
       cursor: not-allowed;
 
-      &:checked:after {
-        background-color: $pix-neutral-25;
+      & + .pix-radio-button__label {
+        cursor: not-allowed;
+      }
+
+      &::before {
+        display: none;
       }
-    }
-  }
 
-  &--disabled {
-    cursor: not-allowed;
-    color: $pix-neutral-45;
+      &:checked::after {
+        background-color: $pix-neutral-30;
+      }
+    }
   }
 }

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

@@ -80,10 +80,6 @@
   padding-bottom: 12px;
 }
 
-.pix-radio-button {
-  padding: $pix-spacing-xs 0 $pix-spacing-xs 0;
-}
-
 .pix-form__actions {
   display: flex;
   justify-content: center;

package/app/stories/form.stories.js

@@ -71,6 +71,7 @@ export const form = (args) => {
     @value=''
     @maxlength={{200}}
     @label='Un commentaire ?'
+    @requiredLabel='Champ obligatoire'
     @errorMessage={{this.genericErrorMessage}}
   />
   <br />

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

@@ -2,15 +2,18 @@ import { hbs } from 'ember-cli-htmlbars';
 
 export const Template = (args) => {
   return {
-    template: hbs`<PixCheckbox
+    template: hbs`
+<PixCheckbox
   @id={{this.id}}
   @screenReaderOnly={{this.screenReaderOnly}}
   @isIndeterminate={{this.isIndeterminate}}
   @labelSize={{this.labelSize}}
   @checked={{this.checked}}
+  disabled={{this.disabled}}
 >
   {{this.label}}
-</PixCheckbox>`,
+</PixCheckbox>
+`,
     context: args,
   };
 };
@@ -26,6 +29,7 @@ indeterminateCheckbox.args = {
   id: 'accept-newsletter-2',
   label: 'Recevoir la newsletter',
   isIndeterminate: true,
+  checked: true,
 };
 
 export const checkboxWithSmallLabel = Template.bind({});
@@ -42,6 +46,63 @@ checkboxWithLargeLabel.args = {
   labelSize: 'large',
 };
 
+export const checkboxDisabled = Template.bind({});
+checkboxDisabled.args = {
+  id: 'accept-newsletter-2',
+  label: 'Recevoir la newsletter',
+  disabled: true,
+};
+
+export const checkboxCheckedDisabled = Template.bind({});
+checkboxCheckedDisabled.args = {
+  id: 'accept-newsletter-2',
+  label: 'Recevoir la newsletter',
+  disabled: true,
+  checked: true,
+};
+
+export const checkboxInterminateDisabled = Template.bind({});
+checkboxInterminateDisabled.args = {
+  id: 'accept-newsletter-2',
+  label: 'Recevoir la newsletter',
+  disabled: true,
+  checked: true,
+  isIndeterminate: true,
+};
+
+export const MultipleTemplate = (args) => {
+  return {
+    template: hbs`
+<PixCheckbox
+  @id="one"
+  @screenReaderOnly={{this.screenReaderOnly}}
+  @isIndeterminate={{this.isIndeterminate}}
+  @labelSize={{this.labelSize}}
+  @checked={{this.checked}}
+  disabled={{this.disabled}}
+>
+  {{this.label}}
+</PixCheckbox>
+<PixCheckbox
+  @id="two"
+  @screenReaderOnly={{this.screenReaderOnly}}
+  @isIndeterminate={{this.isIndeterminate}}
+  @labelSize={{this.labelSize}}
+  @checked={{this.checked}}
+  disabled={{this.disabled}}
+>
+  {{this.label}}
+</PixCheckbox>
+`,
+    context: args,
+  };
+};
+
+export const multiple = MultipleTemplate.bind({});
+multiple.args = {
+  label: 'Recevoir la newsletter',
+};
+
 export const argTypes = {
   id: {
     name: 'id',
@@ -96,4 +157,13 @@ export const argTypes = {
       defaultValue: { summary: false },
     },
   },
+  disabled: {
+    name: 'disabled',
+    description: 'Permet de désactiver la checkbox',
+    type: { name: 'boolean', required: false },
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
 };

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

@@ -12,19 +12,44 @@ La PixCheckbox permet de créer des checkbox basiques ou des checkbox mixées (c
   <Story name="Default" story={stories.Default} height={60} />
 </Canvas>
 
-## Checkbox indéterminée
+### Liste de checkboxes
+
+Il n'est pas rare d'avoir plusieurs champs checkbox qui se suivent.<br/>
+En ce sens, nous avons déjà prévu un espace vertical pour séparer 2 composants qui se suivent.
+
+<Canvas>
+  <Story name="Multiple" story={stories.multiple} height={140} />
+</Canvas>
+
+## États de la Checkbox
+
+<br />
+
+### Checkbox interminée
 
 <Canvas>
   <Story name="Indeterminate" story={stories.indeterminateCheckbox} height={60} />
 </Canvas>
 
-## Checkbox avec un petit label
+### Checkbox désactivée
+
+<Canvas>
+  <Story name="Disabled" story={stories.checkboxDisabled} height={60} />
+  <Story name="CheckedDisabled" story={stories.checkboxCheckedDisabled} height={60} />
+  <Story name="InterminateDisabled" story={stories.checkboxInterminateDisabled} height={60} />
+</Canvas>
+
+## Autres tailles de police du label
+
+<br />
+
+### Small
 
 <Canvas>
   <Story name="SmallLabel" story={stories.checkboxWithSmallLabel} height={60} />
 </Canvas>
 
-## Checkbox avec un grand label
+### Large
 
 <Canvas>
   <Story name="LargeLabel" story={stories.checkboxWithLargeLabel} height={60} />
@@ -38,6 +63,7 @@ La PixCheckbox permet de créer des checkbox basiques ou des checkbox mixées (c
   @screenReaderOnly="{{false}}"
   @isIndeterminate="{{false}}"
   @labelSize="small"
+  disabled
 >
   Recevoir la newsletter
 </PixCheckbox>

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

@@ -48,11 +48,11 @@ export const argTypes = {
   color: {
     name: 'color',
     description:
-      'Modifie la couleur de la barre de progression. Peut prendre les valeurs `yellow` ou `white`',
+      'Modifie la couleur de la barre de progression. Peut prendre les valeurs `blue` ou `white`',
     type: { name: 'string', required: false },
-    table: { defaultValue: { summary: 'yellow' } },
+    table: { defaultValue: { summary: 'blue' } },
     control: { type: 'select' },
-    options: ['yellow', 'white'],
+    options: ['blue', 'white'],
   },
   isArrowLeft: {
     name: 'isArrowLeft',

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

@@ -1,5 +1,6 @@
 import { hbs } from 'ember-cli-htmlbars';
 
+/* Default stories */
 const Template = (args) => {
   return {
     template: hbs`<PixRadioButton @label={{this.label}} @value={{this.value}} @isDisabled={{this.isDisabled}} />`,
@@ -18,6 +19,7 @@ isDisabled.args = {
   isDisabled: true,
 };
 
+/* Checked stories */
 const checked = (args) => {
   return {
     template: hbs`<PixRadioButton @label={{this.label}} @isDisabled={{this.isDisabled}} checked />`,
@@ -34,6 +36,23 @@ disabledChecked.args = {
 export const defaultChecked = checked.bind({});
 defaultChecked.args = Default.args;
 
+/* Multiple components story */
+const multipleTemplate = (args) => {
+  return {
+    template: hbs`
+<PixRadioButton @label={{this.label}} @isDisabled={{this.isDisabled}} name="radio" />
+<PixRadioButton @label={{this.label}} @isDisabled={{this.isDisabled}} name="radio" />
+<PixRadioButton @label={{this.label}} @isDisabled={{this.isDisabled}} name="radio" />
+`,
+    context: args,
+  };
+};
+
+export const multiple = multipleTemplate.bind({});
+multiple.args = {
+  ...Default.args,
+};
+
 export const argTypes = {
   label: {
     name: 'label',

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

@@ -8,7 +8,7 @@ import * as stories from './pix-radio-button.stories.js';
 
 Un bouton radio permettant de sélectionner une seule option dans une liste.
 
-⚠️ Le bouton radio ne peut pas être utilisé seul : il faut au minimum **2 options**.
+⚠️ Le bouton radio ne peut pas être utilisé seul : il faut au minimum **2 options**.<br/>
 Il est préférable de ne pas sélectionner d’option par défaut pour que le choix de l’utilisateur soit conscient (en particulier si le choix est obligatoire).
 
 ## Default
@@ -18,6 +18,15 @@ Il est préférable de ne pas sélectionner d’option par défaut pour que le c
   <Story name="Default checked" story={stories.defaultChecked} height={60} />
 </Canvas>
 
+### Liste de radios
+
+Puisqu'on ne souhaite en aucune avoir un input radio unique, il est déjà prévu l'espacement vertical avec un input radio suivant.<br/>
+Pour les considérer comme un seul groupe d'inputs, **il est nécessaire qu'ils aient chacun un attribut `name` avec une valeur commune**.
+
+<Canvas>
+  <Story name="Multiple" story={stories.multiple} height={140} />
+</Canvas>
+
 ## IsDisabled
 
 État inactif du bouton radio.
@@ -30,7 +39,12 @@ Il est préférable de ne pas sélectionner d’option par défaut pour que le c
 ## Usage
 
 ```html
-<PixRadioButton @label="{{label}}" @value="{{value}}" @isDisabled="{{isDisabled}}" />
+<PixRadioButton
+  name="input-name"
+  @label="{{label}}"
+  @value="{{value}}"
+  @isDisabled="{{isDisabled}}"
+/>
 ```
 
 ## Arguments

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

@@ -7,6 +7,7 @@ const Template = (args) => {
   @value={{this.value}}
   @maxlength={{this.maxlength}}
   @label={{this.label}}
+  @requiredLabel={{this.requiredLabel}}
   @errorMessage={{this.errorMessage}}
 />`,
     context: args,
@@ -44,6 +45,13 @@ export const argTypes = {
     type: { name: 'string', required: false },
   },
 
+  requiredLabel: {
+    name: 'requiredLabel',
+    description:
+      'Label indiquant que le champ est requis, le paramètre @label devient obligatoire avec ce paramètre.',
+    type: { name: 'string', required: false },
+  },
+
   errorMessage: {
     name: 'errorMessage',
     description: 'Affiche une erreur en dessous du champ.',

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

@@ -23,6 +23,7 @@ Optionellement, il peut afficher le nombre de caractères tapés ainsi que le no
   @value="{{value}}"
   @maxlength="{{maxlength}}"
   @errorMessage="{{errorMessage}}"
+  @requiredLabel="{{requiredLabel}}"
 />
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "32.0.0",
+  "version": "33.0.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -44,7 +44,8 @@
     "storybook": "npm-run-all --parallel serve-ember serve-storybook",
     "test": "ember test",
     "test:ember": "ember test",
-    "test:ember-compatibility": "ember try:each"
+    "test:ember-compatibility": "ember try:each",
+    "chromatic": "npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN"
   },
   "dependencies": {
     "@formatjs/intl": "^2.5.1",
@@ -85,6 +86,7 @@
     "@storybook/theming": "^6.5.13",
     "@testing-library/dom": "^8.20.0",
     "@testing-library/user-event": "^14.4.3",
+    "chromatic": "^6.17.3",
     "core-js": "^3.26.1",
     "ember-cli": "^4.8.0",
     "ember-cli-dependency-checker": "^3.3.1",