@1024pix/pix-ui 46.9.4 → 46.10.0

package/addon/components/pix-checkbox.hbs

@@ -8,6 +8,7 @@
     @screenReaderOnly={{@screenReaderOnly}}
     @isDisabled={{this.isDisabled}}
     @variant={{@variant}}
+    @state={{@state}}
   >
     <:inputElement>
       <input
@@ -16,6 +17,7 @@
         class={{this.inputClasses}}
         checked={{@checked}}
         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-checkbox.js

@@ -2,6 +2,7 @@ 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 PixCheckbox extends Component {
   constructor() {
@@ -12,6 +13,18 @@ export default class PixCheckbox extends Component {
     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 inputClasses() {
     const classes = ['pix-checkbox__input'];
 
@@ -19,6 +32,10 @@ export default class PixCheckbox extends Component {
       classes.push(`${classes[0]}--indeterminate`);
     }
 
+    if (this.hasSuccessState || this.hasErrorState) {
+      classes.push(`${classes[0]}--state`);
+    }
+
     return classes.join(' ');
   }
 
@@ -40,4 +57,16 @@ export default class PixCheckbox extends Component {
       event.preventDefault();
     }
   }
+
+  get stateSuccessMessage() {
+    return this.formatMessage('state.success');
+  }
+
+  get stateErrorMessage() {
+    return this.formatMessage('state.error');
+  }
+
+  formatMessage(message) {
+    return formatMessage('fr', `input.${message}`);
+  }
 }

package/addon/components/pix-label-wrapped.hbs

@@ -1,4 +1,11 @@
 <label for={{@for}} class={{this.className}} ...attributes>
+  {{#if this.hasError}}
+    <FaIcon @icon="circle-xmark" />
+  {{/if}}
+  {{#if this.hasSuccess}}
+    <FaIcon @icon="circle-check" />
+  {{/if}}
+
   {{yield to="inputElement"}}
 
   <span class="{{if @screenReaderOnly 'screen-reader-only'}}">

package/addon/components/pix-label-wrapped.js

@@ -7,6 +7,8 @@ export default class PixLabelWrapped extends Component {
     if (this.args.inlineLabel) classes.push('pix-label--inline-label');
     if (this.args.isDisabled) classes.push('pix-label-wrapped--disabled');
     if (this.args.variant === 'tile') classes.push('pix-label-wrapped--variant-tile');
+    if (this.args.state === 'success') classes.push('pix-label-wrapped--state-success');
+    if (this.args.state === 'error') classes.push('pix-label-wrapped--state-error');
 
     const size = ['small', 'large'].includes(this.args.size) ? this.args.size : 'default';
 
@@ -14,4 +16,12 @@ export default class PixLabelWrapped extends Component {
 
     return classes.join(' ');
   }
+
+  get hasError() {
+    return this.args.state === 'error';
+  }
+
+  get hasSuccess() {
+    return this.args.state === 'success';
+  }
 }

package/addon/styles/_pix-checkbox.scss

@@ -114,6 +114,11 @@
       &::before {
         display: none;
       }
+
+      &.pix-checkbox__input--state {
+        position: absolute;
+        visibility: hidden;
+      }
     }
   }
 }

package/addon/styles/_pix-label-wrapped.scss

@@ -24,12 +24,29 @@
 
     &.pix-label-wrapped {
       &--disabled {
-        background: var(--pix-neutral-20);
-        border-color: var(--pix-neutral-100);
+        --state-background-color: var(--pix-neutral-20);
+        --state-border-color: var(--pix-neutral-100);
+
+        &.pix-label-wrapped--state-success {
+          --state-background-color: var(--pix-neutral-0);
+          --state-border-color: var(--pix-success-300);
+
+          color: var(--pix-success-700);
+        }
+
+        &.pix-label-wrapped--state-error {
+          --state-background-color: var(--pix-neutral-0);
+          --state-border-color: var(--pix-error-500);
+
+          color: var(--pix-error-700);
+        }
+
+        background: var(--state-background-color);
+        border-color: var(--state-border-color);
 
         &:hover,
         &:active {
-          background: var(--pix-neutral-20);
+          background: var(--state-background-color);
         }
       }
     }

package/addon/translations/fr.js

@@ -1,4 +1,10 @@
 export default {
+  input: {
+    state: {
+      success: 'Sélection correcte',
+      error: 'Sélection incorrecte',
+    },
+  },
   pagination: {
     beforeResultsPerPage: 'Voir',
     selectPageSizeLabel: "Nombre d'élément à afficher par page",

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

@@ -55,7 +55,7 @@ export default {
       description: `Nom de l'icône font-awesome à afficher **avant** le label`,
       type: { name: 'string', required: false },
       control: { type: 'select' },
-      options: ['trash-can', 'heart', 'magnifying-glass', 'plus', 'xmark'],
+      options: ['magnifying-glass', 'plus', 'xmark'],
       table: {
         type: { summary: 'string' },
         defaultValue: { summary: null },
@@ -66,7 +66,7 @@ export default {
       description: `Nom de l'icône font-awesome à afficher **après** le label`,
       type: { name: 'string', required: false },
       control: { type: 'select' },
-      options: ['trash-can', 'heart', 'magnifying-glass', 'plus', 'xmark'],
+      options: ['magnifying-glass', 'plus', 'xmark'],
       table: {
         type: { summary: 'string' },
         defaultValue: { summary: null },
@@ -231,7 +231,7 @@ export const icons = Template.bind({});
 icons.args = {
   ...Default.args,
   iconBefore: 'magnifying-glass',
-  iconAfter: 'heart',
+  iconAfter: 'plus',
 };
 
 export const disabled = Template.bind({});

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

@@ -23,6 +23,13 @@ Un cursor `not-allowed` est défini sur la checkbox et son label lorsqu'elle est
 <Story of={ComponentStories.checkedIsDisabledVariantTile} height={120} />
 <Story of={ComponentStories.isIndeterminateIsDisabledVariantTile} height={120} />
 
+#### Succès/Erreur
+
+Un champ 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-checkbox-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 la checkbox comme correcte ou incorrecte',
+      options: ['neutral', 'success', 'error'],
+      control: { type: 'select' },
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'neutral' },
+      },
+    },
     ...pixCheckboxStories.argTypes,
   },
 };
@@ -26,6 +36,7 @@ const VariantTileTemplate = (args) => {
     @checked={{this.checked}}
     @isDisabled={{this.isDisabled}}
     @variant={{this.variant}}
+    @state={{this.state}}
   >
     <:label>{{this.label}}</:label>
   </PixCheckbox></div>`,
@@ -45,6 +56,7 @@ isDisabledVariantTile.args = {
   id: 'accept-newsletter-2',
   label: 'Recevoir la newsletter',
   variant: 'tile',
+  state: 'neutral',
   isDisabled: true,
 };
 
@@ -53,6 +65,7 @@ checkedIsDisabledVariantTile.args = {
   id: 'accept-newsletter-2',
   label: 'Recevoir la newsletter',
   variant: 'tile',
+  state: 'neutral',
   isDisabled: true,
   checked: true,
 };
@@ -62,7 +75,28 @@ isIndeterminateIsDisabledVariantTile.args = {
   id: 'accept-newsletter-2',
   label: 'Recevoir la newsletter',
   variant: 'tile',
+  state: 'neutral',
   isDisabled: true,
   checked: true,
   isIndeterminate: true,
 };
+
+export const isDisabledIsSuccessVariantTile = VariantTileTemplate.bind({});
+isDisabledIsSuccessVariantTile.args = {
+  id: 'accept-newsletter-2',
+  label: 'Recevoir la newsletter',
+  variant: 'tile',
+  isDisabled: true,
+  checked: true,
+  state: 'success',
+};
+
+export const isDisabledIsErrorVariantTile = VariantTileTemplate.bind({});
+isDisabledIsErrorVariantTile.args = {
+  id: 'accept-newsletter-2',
+  label: 'Recevoir la newsletter',
+  variant: 'tile',
+  isDisabled: true,
+  checked: true,
+  state: 'error',
+};

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

@@ -42,7 +42,6 @@ export default {
         defaultValue: { summary: false },
       },
     },
-
     label: {
       name: 'label',
       description: 'Le label du champ',

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

@@ -52,7 +52,7 @@ Bouton de fermeture
 ```html
 <PixIconButton
   @ariaLabel="L'action du bouton"
-  @icon="times"
+  @icon="xmark"
   @triggerAction="{{triggerAction}}"
   @withBackground="{{true}}"
 />
@@ -63,7 +63,7 @@ Bouton d'action
 ```html
 <PixIconButton
   @ariaLabel="L'action du bouton"
-  @icon="arrow-left"
+  @icon="arrow-right"
   @triggerAction="{{triggerAction}}"
   @size="small"
   @withBackground="{{true}}"

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

@@ -90,8 +90,8 @@ const TemplateWithYields = (args) => {
   return {
     template: hbs`<PixToggle @toggled={{this.toggled}} @onChange={{this.onChange}}>
   <:label>{{this.label}}</:label>
-  <:on><FaIcon @icon='sun' /></:on>
-  <:off><FaIcon @icon='moon' /></:off>
+  <:on><FaIcon @icon='eye' /></:on>
+  <:off><FaIcon @icon='eye-slash' /></:off>
 </PixToggle>`,
     context: args,
   };

package/config/icons.js

@@ -1,5 +1,6 @@
 module.exports = () => ({
   'free-solid-svg-icons': [
+    'arrow-left',
     'arrow-right',
     'bullhorn',
     'check',
@@ -9,9 +10,11 @@ module.exports = () => ({
     'circle-exclamation',
     'circle-info',
     'circle-question',
+    'circle-xmark',
     'earth-europe',
     'eye',
     'eye-slash',
+    'magnifying-glass',
     'plus',
     'triangle-exclamation',
     'up-right-from-square',

package/package.json

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