@1024pix/pix-ui 44.3.8 → 45.0.0

package/addon/components/pix-checkbox.hbs

@@ -11,11 +11,11 @@
   <PixLabel
     @for={{this.id}}
     @requiredLabel={{@requiredLabel}}
-    @labelSize={{@labelSize}}
+    @size={{@size}}
     @inlineLabel={{true}}
     @screenReaderOnly={{@screenReaderOnly}}
     @isDisabled={{@isDisabled}}
   >
-    {{yield}}
+    {{yield to="label"}}
   </PixLabel>
 </div>

package/addon/components/pix-filterable-and-searchable-select.hbs

@@ -1,12 +1,13 @@
 <div id={{this.mainId}} ...attributes>
   <PixLabel
     @for={{this.pixSelectId}}
-    @requiredLabel={{@requiredText}}
-    @labelSize={{@labelSize}}
+    @requiredLabel={{@requiredLabel}}
+    @size={{@size}}
     @subLabel={{@subLabel}}
     @screenReaderOnly={{@screenReaderOnly}}
+    @inlineLabel={{@inlineLabel}}
   >
-    {{@label}}
+    {{yield to="label"}}
   </PixLabel>
   <div
     class="pix-filterable-and-searchable-select{{if
@@ -17,12 +18,12 @@
     <PixMultiSelect
       id={{this.pixMultiSelectId}}
       @values={{this.selectedCategories}}
-      @label={{@categoriesLabel}}
       @options={{this.categories}}
       @onChange={{this.selectCategories}}
       @screenReaderOnly={{true}}
       @className="pix-filterable-and-searchable-select__pix-multi-select"
     >
+      <:label>{{yield to="categoriesLabel"}}</:label>
       <:placeholder>{{this.categoriesPlaceholder}}</:placeholder>
       <:default as |option|>{{option.label}}</:default>
     </PixMultiSelect>

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

@@ -0,0 +1,44 @@
+import Component from '@glimmer/component';
+
+import { guidFor } from '@ember/object/internals';
+
+export default class PixInputBase extends Component {
+  prefix;
+  inputValidationError;
+
+  constructor() {
+    super(...arguments);
+
+    this.prefix = 'pix-input-base';
+    this.inputValidationError = {
+      default: '',
+      error: 'pix-input-base--error',
+      success: 'pix-input-base--success',
+    };
+  }
+
+  get id() {
+    if (this.args.id) return this.args.id;
+    return this.prefix + '-' + guidFor(this);
+  }
+
+  get validationStatusClassName() {
+    return this.inputValidationError[this.args.validationStatus] || '';
+  }
+
+  get ariaDescribedBy() {
+    return this.args.validationStatus === 'error' ? this.prefix + '-error' : null;
+  }
+
+  get hasError() {
+    return this.args.validationStatus === 'error';
+  }
+
+  get hasErrorMessage() {
+    return this.hasError && !!this.args.errorMessage;
+  }
+
+  get hasSuccess() {
+    return this.args.validationStatus === 'success';
+  }
+}

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

@@ -1,52 +1,59 @@
-<div class="pix-input-password">
+<div class="pix-input-password {{if @inlineLabel ' pix-input-password--inline'}}">
   <PixLabel
     @for={{this.id}}
     @requiredLabel={{@requiredLabel}}
-    @labelSize={{@labelSize}}
-    @subLabel={{@information}}
+    @size={{@size}}
+    @subLabel={{@subLabel}}
     @screenReaderOnly={{@screenReaderOnly}}
+    @inlineLabel={{@inlineLabel}}
   >
-    {{@label}}
+    {{yield to="label"}}
   </PixLabel>
-  <div
-    class="pix-input-password__container
-      {{this.validationStatusClassName}}
-      {{if @prefix 'pix-input-password__with-prefix'}}"
-  >
+  <div>
+    <div
+      class="pix-input-password__container
+        {{this.validationStatusClassName}}
+        {{if @prefix 'pix-input-password__with-prefix'}}"
+    >
 
-    {{#if @prefix}}
-      <span class="pix-input-password__prefix">{{@prefix}}</span>
-    {{/if}}
+      {{#if @prefix}}
+        <span class="pix-input-password__prefix">{{@prefix}}</span>
+      {{/if}}
 
-    <input
-      id={{this.id}}
-      type={{if this.isPasswordVisible "text" "password"}}
-      value={{@value}}
-      aria-required="{{if @requiredLabel true false}}"
-      required={{if @requiredLabel true false}}
-      aria-describedby={{if (eq @validationStatus "error") "text-input-password-error"}}
-      ...attributes
-    />
+      <input
+        id={{this.id}}
+        type={{if this.isPasswordVisible "text" "password"}}
+        value={{@value}}
+        aria-required="{{if @requiredLabel true false}}"
+        required={{if @requiredLabel true false}}
+        aria-describedby={{this.ariaDescribedBy}}
+        ...attributes
+      />
 
-    <PixIconButton
-      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"
-    />
+      <PixIconButton
+        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 (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 this.hasError}}
+        <FaIcon @icon="xmark" class="pix-input-password__icon pix-input-password__error-icon" />
+      {{/if}}
+      {{#if this.hasSuccess}}
+        <FaIcon @icon="check" class="pix-input-password__icon pix-input-password__success-icon" />
+      {{/if}}
+    </div>
+
+    {{#if this.hasErrorMessage}}
+      <p id={{this.ariaDescribedBy}} class="pix-input-password__error-message">
+        {{@errorMessage}}
+      </p>
     {{/if}}
   </div>
-
-  {{#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

@@ -1,32 +1,21 @@
-import PixInput from './pix-input';
+import PixInputBase from './pix-input-base';
+
 import { action } from '@ember/object';
 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 PixInputBase {
+  constructor() {
+    super(...arguments);
 
-export default class PixInputPassword extends PixInput {
-  @tracked isPasswordVisible = false;
-
-  get label() {
-    if (!this.args.label && !this.args.ariaLabel) {
-      throw new Error(ERROR_MESSAGE);
-    }
-    return this.args.label;
+    this.prefix = 'pix-input-password';
+    this.inputValidationError = {
+      default: '',
+      error: 'pix-input-password__container--error',
+      success: 'pix-input-password__container--success',
+    };
   }
 
-  get ariaLabel() {
-    if (!this.args.label && !this.args.ariaLabel) {
-      throw new Error(ERROR_MESSAGE);
-    }
-    return this.args.label ? null : this.args.ariaLabel;
-  }
+  @tracked isPasswordVisible = false;
 
   @action
   togglePasswordVisibility() {
@@ -36,8 +25,4 @@ export default class PixInputPassword extends PixInput {
       InputElement.focus();
     }
   }
-
-  get validationStatusClassName() {
-    return INPUT_VALIDATION_STATUS_MAP[this.args.validationStatus] || '';
-  }
 }

package/addon/components/pix-input.hbs

@@ -1,34 +1,36 @@
-<div class="pix-input">
+<div class="pix-input {{if @inlineLabel ' pix-input--inline'}}">
   <PixLabel
     @for={{this.id}}
     @requiredLabel={{@requiredLabel}}
-    @subLabel={{@information}}
-    @labelSize={{@labelSize}}
+    @subLabel={{@subLabel}}
+    @size={{@size}}
     @screenReaderOnly={{@screenReaderOnly}}
+    @inlineLabel={{@inlineLabel}}
   >
-    {{@label}}
+    {{yield to="label"}}
   </PixLabel>
+  <div>
+    <div class="pix-input__container">
+      <input
+        id={{this.id}}
+        class="pix-input__input {{this.validationStatusClassName}}"
+        value={{@value}}
+        aria-required="{{if @requiredLabel true false}}"
+        required={{if @requiredLabel true false}}
+        aria-describedby={{this.ariaDescribedBy}}
+        ...attributes
+      />
 
-  <div class="pix-input__container">
-    <input
-      id={{this.id}}
-      class="pix-input__input {{this.validationStatusClassName}}"
-      value={{@value}}
-      aria-required="{{if @requiredLabel true false}}"
-      required={{if @requiredLabel true false}}
-      aria-describedby={{if (eq @validationStatus "error") "text-input-error"}}
-      ...attributes
-    />
+      {{#if this.hasError}}
+        <FaIcon @icon="xmark" class="pix-input__error-icon" />
+      {{/if}}
+      {{#if this.hasSuccess}}
+        <FaIcon @icon="check" class="pix-input__success-icon" />
+      {{/if}}
+    </div>
 
-    {{#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 this.hasErrorMessage}}
+      <p id={{this.ariaDescribedBy}} class="pix-input__error-message">{{@errorMessage}}</p>
     {{/if}}
   </div>
-
-  {{#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

@@ -1,20 +1,14 @@
-import Component from '@glimmer/component';
+import PixInputBase from './pix-input-base';
 
-const INPUT_VALIDATION_STATUS_MAP = {
-  default: '',
-  error: 'pix-input__input--error',
-  success: 'pix-input__input--success',
-};
+export default class PixInput extends PixInputBase {
+  constructor() {
+    super(...arguments);
 
-export default class PixInput extends Component {
-  get id() {
-    if (!this.args.id || !this.args.id.toString().trim()) {
-      throw new Error('ERROR in PixInput component, @id param is not provided');
-    }
-    return this.args.id;
-  }
-
-  get validationStatusClassName() {
-    return INPUT_VALIDATION_STATUS_MAP[this.args.validationStatus] || '';
+    this.prefix = 'pix-input';
+    this.inputValidationError = {
+      default: '',
+      error: 'pix-input__input--error',
+      success: 'pix-input__input--success',
+    };
   }
 }

package/addon/components/pix-label.js

@@ -8,11 +8,9 @@ export default class PixLabel extends Component {
     if (this.args.inlineLabel) classes.push('pix-label--inline-label');
     if (this.args.isDisabled) classes.push('pix-label--disabled');
 
-    const labelSize = ['small', 'large'].includes(this.args.labelSize)
-      ? this.args.labelSize
-      : 'default';
+    const size = ['small', 'large'].includes(this.args.size) ? this.args.size : 'default';
 
-    classes.push(`pix-label--${labelSize}`);
+    classes.push(`pix-label--${size}`);
 
     return classes.join(' ');
   }

package/addon/components/pix-multi-select.hbs

@@ -1,5 +1,5 @@
 <div
-  class="pix-multi-select"
+  class="pix-multi-select {{if @inlineLabel ' pix-multi-select--inline'}}"
   ...attributes
   {{on-click-outside this.hideDropDown}}
   {{on-arrow-down-up-action this.listId this.showDropDown this.isExpanded}}
@@ -7,12 +7,13 @@
 >
   <PixLabel
     @for={{this.multiSelectId}}
-    @requiredLabel={{@requiredText}}
+    @requiredLabel={{@requiredLabel}}
     @subLabel={{@subLabel}}
-    @labelSize={{@labelSize}}
+    @size={{@size}}
     @screenReaderOnly={{@screenReaderOnly}}
+    @inlineLabel={{@inlineLabel}}
   >
-    {{@label}}
+    {{yield to="label"}}
   </PixLabel>
 
   <PopperJS @placement={{@placement}} as |reference popover|>
@@ -71,14 +72,14 @@
             <PixCheckbox
               @id={{concat this.multiSelectId "-" option.value}}
               @checked={{option.checked}}
-              @labelSize="small"
+              @size="small"
               @class="pix-multi-select-list__item-label"
               value={{option.value}}
               {{on "change" this.onSelect}}
               {{on-enter-action this.hideDropDown this.multiSelectId}}
               tabindex={{if this.isExpanded "0" "-1"}}
             >
-              {{yield option}}
+              <:label>{{yield option}}</:label>
             </PixCheckbox>
           </li>
         {{/each}}

package/addon/components/pix-multi-select.js

@@ -27,9 +27,6 @@ export default class PixMultiSelect extends Component {
   constructor(...args) {
     super(...args);
 
-    if (!this.args.label && !this.args.id)
-      throw new Error('ERROR in PixMultiSelect, a @label or an @id was not provided');
-
     this.options = [...(this.args.options || [])];
   }
 

package/addon/components/pix-pagination.hbs

@@ -2,7 +2,6 @@
   <section class="pix-pagination__size">
     <span class="pagination-size__label">{{this.beforeResultsPerPage}}</span>
     <PixSelect
-      @label={{this.selectPageSizeLabel}}
       @placeholder={{this.pageSize}}
       @screenReaderOnly={{true}}
       class="pagination-size__choice"
@@ -10,7 +9,9 @@
       @hideDefaultOption={{true}}
       @onChange={{this.changePageSize}}
       @options={{this.pageOptions}}
-    />
+    >
+      <:label>{{this.selectPageSizeLabel}}</:label>
+    </PixSelect>
   </section>
   <section class="pix-pagination__navigation">
     <span>

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

@@ -9,11 +9,11 @@
   <PixLabel
     @for={{this.id}}
     @requiredLabel={{@requiredLabel}}
-    @labelSize={{@labelSize}}
+    @size={{@size}}
     @screenReaderOnly={{@screenReaderOnly}}
     @isDisabled={{@isDisabled}}
     @inlineLabel={{true}}
   >
-    {{yield}}
+    {{yield to="label"}}
   </PixLabel>
 </div>

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

@@ -1,18 +1,19 @@
-<div class="pix-search-input">
+<div class="pix-search-input {{if @inlineLabel ' pix-search-input--inline'}}">
   <PixLabel
-    @for={{this.searchInputId}}
-    @requiredLabel={{@requiredText}}
+    @for={{this.id}}
+    @requiredLabel={{@requiredLabel}}
     @subLabel={{@subLabel}}
-    @labelSize={{@labelSize}}
+    @size={{@size}}
     @screenReaderOnly={{@screenReaderOnly}}
+    @inlineLabel={{@inlineLabel}}
   >
-    {{@label}}
+    {{yield to="label"}}
   </PixLabel>
 
   <div class="pix-search-input__input-container">
     <FaIcon @icon="magnifying-glass" />
     <input
-      id={{this.searchInputId}}
+      id={{this.id}}
       class="pix-search-input__input"
       name={{@inputName}}
       placeholder={{@placeholder}}

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

@@ -1,14 +1,16 @@
-import Component from '@glimmer/component';
+import PixInputBase from './pix-input-base';
+
 import { action } from '@ember/object';
-import { guidFor } from '@ember/object/internals';
 import { debounceTask } from 'ember-lifeline';
 
-export default class PixSearchInput extends Component {
+export default class PixSearchInput extends PixInputBase {
   initialValue = this.args.value;
 
   constructor() {
     super(...arguments);
 
+    this.prefix = 'pix-search-input';
+
     this.debounceTimeBeforeSearch = parseInt(this.args.debounceTimeInMs);
     if (Number.isNaN(this.debounceTimeBeforeSearch)) {
       throw new Error('ERROR in PixSearchInput component, @debounceTimeInMs param is not provided');
@@ -16,25 +18,10 @@ export default class PixSearchInput extends Component {
     if (!this.args.triggerFiltering) {
       throw new Error('ERROR in PixSearchInput component, @triggerFiltering param is not provided');
     }
-    if (!this.args.label && !this.args.ariaLabel) {
-      throw new Error(
-        'ERROR in PixSearchInput component, you must provide @label or @ariaLabel params',
-      );
-    }
-
-    this.searchInputId = this.args.id || guidFor(this);
-  }
-
-  get label() {
-    return this.args.label;
-  }
-
-  get ariaLabel() {
-    return this.args.label ? null : this.args.ariaLabel;
   }
 
   debouncedTriggerFiltering(value) {
-    this.args.triggerFiltering(this.searchInputId, value);
+    this.args.triggerFiltering(this.id, value);
   }
 
   @action