@1024pix/pix-ui 46.10.7 → 46.11.0

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

@@ -8,14 +8,16 @@
     @isDisabled={{this.isDisabled}}
     @inlineLabel={{true}}
     @variant={{@variant}}
+    @state={{@state}}
   >
     <:inputElement>
       <input
         type="radio"
         id={{this.id}}
-        class="pix-radio-button__input"
+        class={{this.inputClasses}}
         value={{@value}}
         aria-disabled={{this.isDisabled}}
+        aria-describedby={{this.stateId}}
         {{on "click" this.avoidCheckedStateChangeIfIsDisabled}}
         ...attributes
       />
@@ -24,4 +26,12 @@
       {{yield to="label"}}
     </:default>
   </PixLabelWrapped>
+
+  <span class="screen-reader-only" id={{this.stateId}}>
+    {{#if this.hasSuccessState}}
+      {{this.stateSuccessMessage}}
+    {{else if this.hasErrorState}}
+      {{this.stateErrorMessage}}
+    {{/if}}
+  </span>
 </div>

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

@@ -2,14 +2,42 @@ import Component from '@glimmer/component';
 import { guidFor } from '@ember/object/internals';
 import { action } from '@ember/object';
 import { warn } from '@ember/debug';
+import { formatMessage } from '../translations';
 
 export default class PixRadioButton extends Component {
+  constructor() {
+    super(...arguments);
+
+    warn(
+      'PixRadioButton: @state attribute should be used along with @isDisabled attribute.',
+      this.stateWarning,
+      {
+        id: 'pix-ui.radio-button.state.cant-be-used-without-is-disabled',
+      },
+    );
+  }
   text = 'pix-radio-button';
 
+  get stateWarning() {
+    return Boolean(this.isDisabled) && (!this.hasErrorState || !this.hasSuccessState);
+  }
+
   get id() {
     return this.args.id || guidFor(this);
   }
 
+  get stateId() {
+    return `${this.id}-state`;
+  }
+
+  get hasSuccessState() {
+    return this.args.state === 'success';
+  }
+
+  get hasErrorState() {
+    return this.args.state === 'error';
+  }
+
   get isDisabled() {
     warn(
       'PixRadioButton: @isDisabled attribute should be a boolean.',
@@ -22,6 +50,28 @@ export default class PixRadioButton extends Component {
     return this.args.isDisabled || this.args.disabled ? 'true' : null;
   }
 
+  get inputClasses() {
+    const classes = ['pix-radio-button__input'];
+
+    if (this.hasSuccessState || this.hasErrorState) {
+      classes.push(`${classes[0]}--state`);
+    }
+
+    return classes.join(' ');
+  }
+
+  get stateSuccessMessage() {
+    return this.formatMessage('state.success');
+  }
+
+  get stateErrorMessage() {
+    return this.formatMessage('state.error');
+  }
+
+  formatMessage(message) {
+    return formatMessage('fr', `input.${message}`);
+  }
+
   @action
   avoidCheckedStateChangeIfIsDisabled(event) {
     if (this.args.isDisabled) {

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

@@ -104,6 +104,8 @@
   }
 
   &--tertiary {
+    padding-right: 0;
+    padding-left: 0;
     color: var(--pix-neutral-800);
     text-decoration: underline;
     background-color: transparent;

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

@@ -86,6 +86,11 @@
       &:checked::after {
         background-color: var(--pix-neutral-100);
       }
+
+      &.pix-radio-button__input--state {
+        position: absolute;
+        visibility: hidden;
+      }
     }
   }
 }

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

@@ -25,7 +25,7 @@ Un cursor `not-allowed` est défini sur la checkbox et son label lorsqu'elle est
 
 #### Succès/Erreur
 
-Un champ de statut permet de préciser une coloration particulière en cas de "succès" ou d'"erreur".
+Cumulée à la désactivation, une propriété de statut permet de préciser une coloration particulière en cas de "succès" ou d'"erreur".
 
 <Story of={ComponentStories.isDisabledIsSuccessVariantTile} height={120} />
 <Story of={ComponentStories.isDisabledIsErrorVariantTile} height={120} />

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

@@ -26,6 +26,13 @@ Un cursor `not-allowed` est défini sur le RadioButton et son label lorsqu'il es
 <Story of={ComponentStories.isDisabledVariantTile} height={120} />
 <Story of={ComponentStories.checkedIsDisabledVariantTile} height={120} />
 
+#### Succès/Erreur
+
+Cumulée à la désactivation, une propriété de statut permet de préciser une coloration particulière en cas de "succès" ou d'"erreur".
+
+<Story of={ComponentStories.isDisabledIsSuccessVariantTile} height={120} />
+<Story of={ComponentStories.isDisabledIsErrorVariantTile} height={120} />
+
 ## Usage
 
 ```html

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

@@ -11,6 +11,16 @@ export default {
       control: { type: 'select' },
       type: { required: true },
     },
+    state: {
+      name: 'state',
+      description: 'Si `isDisabled` permet de marquer le radiobutton comme correcte ou incorrecte',
+      options: ['neutral', 'success', 'error'],
+      control: { type: 'select' },
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'neutral' },
+      },
+    },
     ...pixRadioButtonStories.argTypes,
   },
 };
@@ -25,6 +35,8 @@ const VariantTileTemplate = (args) => {
     @isDisabled={{this.isDisabled}}
     checked={{this.checked}}
     @variant={{this.variant}}
+    @state={{this.state}}
+    @size={{this.size}}
   >
     <:label>{{this.label}}</:label>
   </PixRadioButton></div>`,
@@ -37,6 +49,7 @@ VariantTile.args = {
   id: 'proposal',
   label: 'Une réponse',
   variant: 'tile',
+  state: 'neutral',
 };
 
 export const isDisabledVariantTile = VariantTileTemplate.bind({});
@@ -45,6 +58,7 @@ isDisabledVariantTile.args = {
   label: 'Recevoir la newsletter',
   variant: 'tile',
   isDisabled: true,
+  state: 'neutral',
 };
 
 export const checkedIsDisabledVariantTile = VariantTileTemplate.bind({});
@@ -54,4 +68,25 @@ checkedIsDisabledVariantTile.args = {
   variant: 'tile',
   isDisabled: true,
   checked: true,
+  state: 'neutral',
+};
+
+export const isDisabledIsSuccessVariantTile = VariantTileTemplate.bind({});
+isDisabledIsSuccessVariantTile.args = {
+  id: 'accept-newsletter-2',
+  label: 'La réponse est correcte',
+  variant: 'tile',
+  isDisabled: true,
+  checked: true,
+  state: 'success',
+};
+
+export const isDisabledIsErrorVariantTile = VariantTileTemplate.bind({});
+isDisabledIsErrorVariantTile.args = {
+  id: 'accept-newsletter-2',
+  label: 'La réponse est fausse',
+  variant: 'tile',
+  isDisabled: true,
+  checked: true,
+  state: 'error',
 };

package/package.json

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