@1024pix/pix-ui 25.0.1 → 26.0.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Pix-UI Changelog
 
+## v26.0.0 (06/02/2023)
+
+
+### :rocket: Amélioration
+- [#328](https://github.com/1024pix/pix-ui/pull/328) [FEATURE] Ajout de l'état de succès pour les composants pixInput et pixInputPassword
+
 ## v25.0.1 (06/02/2023)
 
 

package/addon/components/pix-input-password.hbs

@@ -14,7 +14,7 @@
   {{/if}}
   <div
     class="pix-input-password__container
-      {{if @errorMessage 'pix-input-password__error-container'}}
+      {{this.validationStatusClassName}}
       {{if @prefix 'pix-input-password__with-prefix'}}"
   >
 
@@ -29,24 +29,29 @@
       aria-label={{this.ariaLabel}}
       aria-required="{{if @requiredLabel true false}}"
       required={{if @requiredLabel true false}}
-      aria-describedby={{if @errorMessage "text-input-password-error"}}
+      aria-describedby={{if (eq @validationStatus "error") "text-input-password-error"}}
       ...attributes
     />
 
     <PixIconButton
-      class="pix-input-password__button {{if @errorMessage ' pix-input-password__error-button'}}"
+      class="pix-input-password__button"
       @icon={{if this.isPasswordVisible "eye" "eye-slash"}}
       @ariaLabel={{if this.isPasswordVisible "Masquer le mot de passe" "Afficher le mot de passe"}}
       @triggerAction={{this.togglePasswordVisibility}}
       @size="small"
     />
 
-    {{#if @errorMessage}}
-      <FaIcon @icon="xmark" class="pix-input-password__error-icon" />
+    {{#if (eq @validationStatus "error")}}
+      <FaIcon @icon="xmark" class="pix-input-password__icon pix-input-password__error-icon" />
+    {{/if}}
+    {{#if (eq @validationStatus "success")}}
+      <FaIcon @icon="check" class="pix-input-password__icon pix-input-password__success-icon" />
     {{/if}}
   </div>
 
-  {{#if @errorMessage}}
-    <p id="text-input-password-error" class="pix-input__error-message">{{@errorMessage}}</p>
+  {{#if (and (eq @validationStatus "error") @errorMessage)}}
+    <p id="text-input-password-error" class="pix-input-password__error-message">
+      {{@errorMessage}}
+    </p>
   {{/if}}
 </div>

package/addon/components/pix-input-password.js

@@ -5,6 +5,12 @@ import { tracked } from '@glimmer/tracking';
 const ERROR_MESSAGE =
   'ERROR in PixInputPassword component, you must provide @label or @ariaLabel params';
 
+const INPUT_VALIDATION_STATUS_MAP = {
+  default: '',
+  error: 'pix-input-password__error-container',
+  success: 'pix-input-password__success-container',
+};
+
 export default class PixInputPassword extends PixInput {
   @tracked isPasswordVisible = false;
 
@@ -30,4 +36,8 @@ export default class PixInputPassword extends PixInput {
       InputElement.focus();
     }
   }
+
+  get validationStatusClassName() {
+    return INPUT_VALIDATION_STATUS_MAP[this.args.validationStatus] || '';
+  }
 }

package/addon/components/pix-input.hbs

@@ -16,21 +16,24 @@
   <div class="pix-input__container">
     <input
       id={{this.id}}
-      class={{if @errorMessage "pix-input__input--error"}}
+      class="pix-input__input--default {{this.validationStatusClassName}}"
       value={{@value}}
       aria-label={{this.ariaLabel}}
       aria-required="{{if @requiredLabel true false}}"
       required={{if @requiredLabel true false}}
-      aria-describedby={{if @errorMessage "text-input-error"}}
+      aria-describedby={{if (eq @validationStatus "error") "text-input-error"}}
       ...attributes
     />
 
-    {{#if @errorMessage}}
+    {{#if (eq @validationStatus "error")}}
       <FaIcon @icon="xmark" class="pix-input__error-icon" />
     {{/if}}
+    {{#if (eq @validationStatus "success")}}
+      <FaIcon @icon="check" class="pix-input__success-icon" />
+    {{/if}}
   </div>
 
-  {{#if @errorMessage}}
+  {{#if (and (eq @validationStatus "error") @errorMessage)}}
     <p id="text-input-error" class="pix-input__error-message">{{@errorMessage}}</p>
   {{/if}}
 </div>

package/addon/components/pix-input.js

@@ -2,6 +2,12 @@ import Component from '@glimmer/component';
 
 const ERROR_MESSAGE = 'ERROR in PixInput component, you must provide @label or @ariaLabel params';
 
+const INPUT_VALIDATION_STATUS_MAP = {
+  default: '',
+  error: 'pix-input__input--error',
+  success: 'pix-input__input--success',
+};
+
 export default class PixInput extends Component {
   get id() {
     if (!this.args.id || !this.args.id.toString().trim()) {
@@ -23,4 +29,8 @@ export default class PixInput extends Component {
     }
     return this.args.label ? null : this.args.ariaLabel;
   }
+
+  get validationStatusClassName() {
+    return INPUT_VALIDATION_STATUS_MAP[this.args.validationStatus] || '';
+  }
 }

package/addon/styles/_pix-input-password.scss

@@ -53,15 +53,31 @@
     @include formElementInError();
   }
 
-  svg.pix-input-password__error-icon {
+  &__success-container {
+    padding-right: $spacing-m;
+    @include formElementInSuccess();
+  }
+
+  &__icon {
     position: absolute;
-    right: 6px;
     color: $pix-neutral-0;
-    background: $pix-error-70;
     border-radius: 50%;
     font-size: 0.6rem;
     padding: 2px;
-    width: 18px;
-    height: 18px;
+    right: 12px;
+    width: 10px;
+    height: 10px
+  }
+
+  &__error-icon {
+    background: $pix-error-70;
+  }
+
+  &__success-icon {
+    background: $pix-success-60;
+  }
+
+  &__error-message {
+    @include errorMessage();
   }
 }

package/addon/styles/_pix-input.scss

@@ -23,30 +23,31 @@
     position: relative;
   }
 
-  svg.pix-input__error-icon {
+  svg {
     position: absolute;
-    bottom: 7px;
-    right: 6px;
     color: $pix-neutral-0;
-    background: $pix-error-70;
     border-radius: 50%;
     font-size: 0.6rem;
     padding: 2px;
-    width: 18px;
-    height: 18px;
+    bottom: 11px;
+    right: 12px;
+    width: 10px;
+    height: 10px;
+
+    &.pix-input__error-icon {
+      background: $pix-error-70;
+    }
+
+    &.pix-input__success-icon {
+      background: $pix-success-60;
+    }
   }
 
   &__error-message {
     @include errorMessage();
-    margin-bottom: 0;
-    bottom: calc(-4px - 1px - 0.75rem);
-
-    &.pix-input__error-message {
-      margin-top: 4px;
-    }
   }
 
-  input {
+  &__input--default {
     width: 100%;
     height: 36px;
     border: 1px solid $pix-neutral-40;
@@ -58,10 +59,15 @@
     &::placeholder {
       color: $pix-neutral-30;
     }
+  }
 
-    &.pix-input__input--error {
-      padding-right: 32px;
-      @include formElementInError();
-    }
+  &__input--error {
+    padding-right: $spacing-l;
+    @include formElementInError();
+  }
+
+  &__input--success {
+    padding-right: $spacing-l;
+    @include formElementInSuccess();
   }
 }

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

@@ -12,7 +12,7 @@
   }
 }
 
-@mixin formElementDisabled() {  
+@mixin formElementDisabled() {
   background-color: $pix-neutral-20;
 }
 
@@ -63,6 +63,11 @@
   box-shadow: inset 0px 0px 0px 0.6px $pix-error-70;
 }
 
+@mixin formElementInSuccess() {
+  border-color: $pix-success-60;
+  box-shadow: inset 0px 0px 0px 0.6px $pix-success-60;
+}
+
 @mixin input() {
   font-family: $font-roboto;
   font-size: 0.875rem;

package/app/stories/form.stories.js

@@ -9,6 +9,7 @@ export const form = (args) => {
     @label='Prénom'
     @errorMessage={{this.genericErrorMessage}}
     @requiredLabel='champ obligatoire'
+    @validationStatus={{this.validationStatus}}
   />
   <br />
   <PixInputPassword @id='password' @label='Mot de passe' @errorMessage={{this.genericErrorMessage}} />
@@ -16,8 +17,8 @@ export const form = (args) => {
 
   <PixMultiSelect
     @innerText='Votre notation en étoiles...'
-    @id='form__pix-mutli-select'
-    @label='A quel point aimez vous Pix UI ?'
+    @id='form__pix-multi-select'
+    @label='A quel point aimez-vous Pix UI ?'
     @onSelect={{this.onSelect}}
     @selected={{this.selected}}
     @options={{this.options}}
@@ -28,8 +29,8 @@ export const form = (args) => {
   <br /><br />
 
   <PixMultiSelect
-    @innerText='Mes condiements'
-    @id='form__pix-mutli-select-searchable'
+    @innerText='Mes condiments'
+    @id='form__pix-multi-select-searchable'
     @label='Choississez vos condiments'
     @onSelect={{this.onSelect}}
     @selected={{this.selected}}
@@ -82,8 +83,9 @@ export const form = (args) => {
   <PixCheckbox
     @id='spam-pub'
     @labelSize='small'
-    @label='Acceptez-vous de vous faire spammer de PUB ?'
-  />
+  >
+    Acceptez-vous de vous faire spammer de PUB ?
+  </PixCheckbox>
 
   <br /><br />
 

package/app/stories/pix-input-password.stories.js

@@ -10,6 +10,7 @@ export const Template = (args) => {
   @errorMessage={{this.errorMessage}}
   @prefix={{this.prefix}}
   @requiredLabel={{this.requiredLabel}}
+  @validationStatus={{this.validationStatus}}
 />`,
     context: args,
   };
@@ -28,11 +29,19 @@ withLabelAndInformation.args = {
   information: 'Une brève information',
 };
 
-export const withErrorMessage = Template.bind({});
-withErrorMessage.args = {
+export const errorState = Template.bind({});
+errorState.args = {
   id: 'password',
   label: 'Mot de passe',
-  errorMessage: "Un message d'erreur.",
+  errorMessage: "un message d'erreur",
+  validationStatus: 'error',
+};
+
+export const successState = Template.bind({});
+successState.args = {
+  id: 'password',
+  label: 'Mot de passe',
+  validationStatus: 'success',
 };
 
 export const withPrefix = Template.bind({});
@@ -75,9 +84,18 @@ export const argTypes = {
     description: 'Un descriptif complétant le label',
     type: { name: 'string', required: false },
   },
+  validationStatus: {
+    name: 'validationStatus',
+    description:
+      "Définit l'état du champ, neutre par défaut, en succès ou erreur selon l'action de l'utilisateur",
+    type: { name: 'string', required: false },
+    options: ['default', 'success', 'error'],
+    control: { type: 'select' },
+  },
   errorMessage: {
     name: 'errorMessage',
-    description: "Affiche le message d'erreur donné et encadre en rouge le champ",
+    description:
+      "Affiche le message d'erreur donné. Doit s'accompagner du paramètre validationStatus en 'error'",
     type: { name: 'string', required: false },
   },
   prefix: {

package/app/stories/pix-input-password.stories.mdx

@@ -29,13 +29,19 @@ Si vous utilisez le `PixInputPassword` sans label alors il faut renseigner le pa
 ## With label and information
 
 <Canvas>
-  <Story story={stories.withLabelAndInformation} height={100} />
+  <Story story={stories.withLabelAndInformation} height={110} />
 </Canvas>
 
-## With error message
+## Error state (with error message)
 
 <Canvas>
-  <Story story={stories.withErrorMessage} height={100} />
+  <Story story={stories.errorState} height={110} />
+</Canvas>
+
+## Success state
+
+<Canvas>
+  <Story story={stories.successState} height={100} />
 </Canvas>
 
 ## With prefix
@@ -59,6 +65,7 @@ Si vous utilisez le `PixInputPassword` sans label alors il faut renseigner le pa
   @information="8 caractères dont une majuscule..."
   @value="pix123"
   @errorMessage="Le mot de passe est erroné"
+  @validationStatus="default"
   @prefix="C-"
   @requiredLabel="Champ obligatoire"
 />

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

@@ -10,6 +10,7 @@ export const Template = (args) => {
   placeholder='Jeanne, Pierre ...'
   @requiredLabel={{this.requiredLabel}}
   @ariaLabel={{this.ariaLabel}}
+  @validationStatus={{this.validationStatus}}
 />`,
     context: args,
   };
@@ -28,12 +29,19 @@ withLabel.args = {
   information: 'a small information',
 };
 
-export const withErrorMessage = Template.bind({});
-withErrorMessage.args = {
+export const errorState = Template.bind({});
+errorState.args = {
   id: 'first-name',
   label: 'Prénom',
-  information: 'a small information',
   errorMessage: "un message d'erreur",
+  validationStatus: 'error',
+};
+
+export const successState = Template.bind({});
+successState.args = {
+  id: 'first-name',
+  label: 'Prénom',
+  validationStatus: 'success',
 };
 
 export const withRequiredLabel = Template.bind({});
@@ -69,9 +77,18 @@ export const argTypes = {
     description: 'Un descriptif complétant le label',
     type: { name: 'string', required: false },
   },
+  validationStatus: {
+    name: 'validationStatus',
+    description:
+      "Définit l'état du champ, neutre par défaut, en succès ou erreur selon l'action de l'utilisateur",
+    type: { name: 'string', required: false },
+    options: ['default', 'success', 'error'],
+    control: { type: 'select' },
+  },
   errorMessage: {
     name: 'errorMessage',
-    description: "Affiche le message d'erreur donné et encadre en rouge le champ",
+    description:
+      "Affiche le message d'erreur donné. Doit s'accompagner du paramètre validationStatus en 'error'",
     type: { name: 'string', required: false },
   },
   requiredLabel: {

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

@@ -43,19 +43,25 @@ screen.getByLabelText('Prénom exemple: Barry');
 ## With label and information
 
 <Canvas>
-  <Story story={stories.withLabel} height={100} />
+  <Story story={stories.withLabel} height={110} />
 </Canvas>
 
-## With error message
+## Error state (with error message)
 
 <Canvas>
-  <Story story={stories.withErrorMessage} height={130} />
+  <Story story={stories.errorState} height={110} />
+</Canvas>
+
+## Success state
+
+<Canvas>
+  <Story story={stories.successState} height={100} />
 </Canvas>
 
 ## With required label
 
 <Canvas>
-  <Story story={stories.withRequiredLabel} height={130} />
+  <Story story={stories.withRequiredLabel} height={100} />
 </Canvas>
 
 ## Usage
@@ -66,6 +72,7 @@ screen.getByLabelText('Prénom exemple: Barry');
   @label="Prénom"
   @information="Complément du label"
   @errorMessage="Un message d`erreur"
+  @validationStatus="default"
   @requiredLabel="Champ obligatoire"
 />
 ```

package/package.json

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