@1024pix/pix-ui 41.1.2 → 42.0.0

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

@@ -6,7 +6,7 @@ export default class PixButtonBase extends Component {
   }
 
   get backgroundColor() {
-    return this.args.backgroundColor || 'blue';
+    return this.args.backgroundColor || 'primary';
   }
 
   get size() {
@@ -18,10 +18,10 @@ export default class PixButtonBase extends Component {
       'pix-button',
       `pix-button--shape-${this.shape}`,
       `pix-button--size-${this.size}`,
-      `pix-button--background-${this.backgroundColor}`,
+      `pix-button--${this.backgroundColor}`,
     ];
     this.args.isBorderVisible && classNames.push('pix-button--border');
-    this.args.isDisabled && classNames.push('pix-button--disabled');
+
     return classNames;
   }
 }

package/addon/components/pix-button.hbs

@@ -1,44 +1,33 @@
-{{#if @route}}
-  <LinkTo
-    @route={{@route}}
-    @models={{if @model (array @model) this.defaultModel}}
-    class={{this.className}}
-    ...attributes
-  >
+<button
+  type={{this.type}}
+  class={{this.className}}
+  {{on "click" this.triggerAction}}
+  ...attributes
+  disabled={{this.isDisabled}}
+  aria-disabled="{{this.isDisabled}}"
+>
+  {{#if this.isLoading}}
+    <div class="loader loader--{{this.loadingColor}}">
+      <div class="bounce1"></div>
+      <div class="bounce2"></div>
+      <div class="bounce3"></div>
+    </div>
+    <span class="loader__not-visible-text">{{yield}}</span>
+  {{else}}
+    {{#if @iconBefore}}
+      <FaIcon
+        class="pix-button__icon pix-button__icon--before"
+        @icon={{@iconBefore}}
+        @prefix={{@prefixIconBefore}}
+      />
+    {{/if}}
     {{yield}}
-  </LinkTo>
-{{else}}
-  <button
-    type={{this.type}}
-    class={{this.className}}
-    {{on "click" this.triggerAction}}
-    ...attributes
-    disabled={{this.isDisabled}}
-    aria-disabled="{{this.isDisabled}}"
-  >
-    {{#if this.isLoading}}
-      <div class="loader loader--{{this.loadingColor}}">
-        <div class="bounce1"></div>
-        <div class="bounce2"></div>
-        <div class="bounce3"></div>
-      </div>
-      <span class="loader__not-visible-text">{{yield}}</span>
-    {{else}}
-      {{#if @iconBefore}}
-        <FaIcon
-          class="pix-button__icon pix-button__icon--before"
-          @icon={{@iconBefore}}
-          @prefix={{@prefixIconBefore}}
-        />
-      {{/if}}
-      {{yield}}
-      {{#if @iconAfter}}
-        <FaIcon
-          class="pix-button__icon pix-button__icon--after"
-          @icon={{@iconAfter}}
-          @prefix={{@prefixIconAfter}}
-        />
-      {{/if}}
+    {{#if @iconAfter}}
+      <FaIcon
+        class="pix-button__icon pix-button__icon--after"
+        @icon={{@iconAfter}}
+        @prefix={{@prefixIconAfter}}
+      />
     {{/if}}
-  </button>
-{{/if}}
+  {{/if}}
+</button>

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

@@ -1,4 +1,3 @@
-{{! template-lint-disable no-down-event-binding }}
 <div class="pix-input-code">
   <fieldset aria-describedby="pix-input-code__details-of-use">
     <p id="pix-input-code__details-of-use">{{this.explanationOfUse}}</p>

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

@@ -8,7 +8,7 @@
       {{this.label}}
 
       {{#if @information}}
-        <span class="pix-input__information">{{@information}}</span>
+        <span class="pix-input__sub-label">{{@information}}</span>
       {{/if}}
     </label>
   {{/if}}

package/addon/components/pix-input.hbs

@@ -8,7 +8,7 @@
       {{@label}}
 
       {{#if @information}}
-        <span class="pix-input__information">{{@information}}</span>
+        <span class="pix-input__sub-label">{{@information}}</span>
       {{/if}}
     </label>
   {{/if}}
@@ -16,7 +16,7 @@
   <div class="pix-input__container">
     <input
       id={{this.id}}
-      class="pix-input__input--default {{this.validationStatusClassName}}"
+      class="pix-input__input {{this.validationStatusClassName}}"
       value={{@value}}
       aria-label={{this.ariaLabel}}
       aria-required="{{if @requiredLabel true false}}"

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

@@ -38,10 +38,18 @@ export default class PixProgressGauge extends Component {
   }
 
   get colorClass() {
-    const availableColor = ['blue', 'green', 'purple'];
+    const availableColor = [
+      'primary',
+      'success',
+      'tertiary',
+      // deprecated color
+      'blue',
+      'green',
+      'purple',
+    ];
 
     const color =
-      this.args.color && availableColor.includes(this.args.color) ? this.args.color : 'blue';
+      this.args.color && availableColor.includes(this.args.color) ? this.args.color : 'primary';
 
     return `progress-gauge--content-${color}`;
   }

package/addon/components/pix-return-to.hbs

@@ -4,12 +4,10 @@
   class="pix-return-to pix-return-to--{{this.shade}}"
   ...attributes
 >
-
   {{#if (has-block)}}
     <span aria-hidden="true" class="pix-return-to__icon"><FaIcon @icon="arrow-left" /></span>
     <span class="pix-return-to__text"> {{yield}} </span>
   {{else}}
     <span title="Flèche de retour" class="pix-return-to__icon"><FaIcon @icon="arrow-left" /></span>
   {{/if}}
-
 </LinkTo>

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

@@ -5,11 +5,9 @@
 
   <div class="pix-search-input__input-container">
     <FaIcon @icon="magnifying-glass" />
-    {{! template-lint-disable require-input-label }}
     <input
       id={{this.searchInputId}}
       class="pix-search-input__input"
-      role="searchbox"
       name={{@inputName}}
       placeholder={{@placeholder}}
       aria-label={{this.ariaLabel}}

package/addon/components/pix-select.hbs

@@ -1,4 +1,3 @@
-{{! template-lint-disable no-down-event-binding require-context-role require-presentational-children }}
 <div
   class="pix-select"
   id="container-{{this.selectId}}"
@@ -89,8 +88,6 @@
                 aria-labelledby={{if this.displayCategory (concat "cat-" this.selectId "-" index)}}
               >
                 {{#if this.displayCategory}}
-                  {{! template-lint-disable no-invalid-role }}
-                  {{!https://www.w3.org/WAI/ARIA/apg/example-index/listbox/listbox-grouped.html}}
                   <li
                     class="pix-select-options-category__name"
                     role="presentation"
@@ -101,6 +98,8 @@
                 {{/if}}
 
                 {{#each element.options as |option|}}
+                  {{! template-lint-disable require-context-role }}
+                  {{!https://www.w3.org/WAI/ARIA/apg/example-index/listbox/listbox-grouped.html}}
                   <li
                     class="pix-select-options-category__option{{if
                         (eq option.value @value)
@@ -116,7 +115,7 @@
                     {{option.label}}
 
                     {{#if (eq option.value @value)}}
-                      <FaIcon @icon="check" />
+                      <FaIcon @icon="check" role="presentation" />
                     {{/if}}
                   </li>
                 {{/each}}
@@ -139,7 +138,7 @@
                 {{option.label}}
 
                 {{#if (eq option.value @value)}}
-                  <FaIcon @icon="check" />
+                  <FaIcon @icon="check" role="presentation" />
                 {{/if}}
               </li>
             {{/each}}

package/addon/components/pix-select.js

@@ -46,9 +46,7 @@ export default class PixSelect extends Component {
     if (this.args.errorMessage) {
       classes.push('pix-select-button--error');
     }
-    if (this.args.isDisabled) {
-      classes.push('pix-select-button--disabled');
-    }
+
     return classes.join(' ');
   }
 

package/addon/styles/_pix-background-header.scss

@@ -1,6 +1,6 @@
 .pix-background-header {
   position: relative;
-  padding: 68px 24px 0;
+  padding: 68px var(--pix-spacing-6x) 0;
 
   &__background {
     position: absolute;
@@ -9,7 +9,7 @@
     z-index: -1;
     width: 100%;
     min-height: 270px;
-    color: $pix-neutral-0;
+    color: var(--pix-neutral-0);
     background: $pix-primary-app-gradient;
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
   }
@@ -18,4 +18,4 @@
     max-width: 980px;
     margin: 0 auto;
   }
-}
+}

package/addon/styles/_pix-banner.scss

@@ -1,16 +1,18 @@
 .pix-banner {
   display: flex;
+  gap: var(--pix-spacing-2x);
   align-items: center;
-  padding: 16px 24px;
+  padding: var(--pix-spacing-4x) var(--pix-spacing-6x);
   font-size: 0.875rem;
-  box-shadow: 0 4px 8px rgba(7, 20, 46, 0.08);
+  border: 1px solid currentcolor;
+  border-radius: var(--pix-spacing-2x);
 
   &__action {
     color: inherit;
     text-decoration: underline;
 
     .external-link {
-      margin-left: 4px;
+      margin-left: var(--pix-spacing-1x);
       font-size: 0.875rem;
     }
   }
@@ -18,89 +20,84 @@
   &__close {
     display: flex;
     margin-left: auto;
-    padding-left: 8px;
   }
 
   &__icon {
-    margin-right: $pix-spacing-xs;
     font-size: 1.125rem;
   }
 
   &--information {
-    color: $pix-primary-70;
-    background-color: $pix-primary-5;
+    color: var(--pix-info-700);
+    background-color: var(--pix-info-50);
 
     .pix-icon-button {
-      color: $pix-primary-70;
-      background-color: $pix-primary-5;
+      color: var(--pix-neutral-800);
+      background-color: var(--pix-info-50);
 
       &:hover:enabled,
       &:focus:enabled,
       &:active:enabled {
-        color: $pix-primary-70;
-        background-color: $pix-primary-10;
+        background-color: var(--pix-info-100);
       }
 
       &:focus:enabled {
-        outline-color: $pix-primary-70;
+        outline-color: var(--pix-primary-700);
       }
     }
   }
 
   &--warning {
-    color: $pix-warning-70;
-    background-color: $pix-warning-5;
+    color: var(--pix-warning-700);
+    background-color: var(--pix-warning-50);
 
     .pix-icon-button {
-      color: $pix-warning-70;
-      background-color: $pix-warning-5;
+      color: var(--pix-neutral-800);
+      background-color: var(--pix-warning-50);
 
       &:hover:enabled,
       &:focus:enabled,
       &:active:enabled {
-        color: $pix-warning-70;
-        background-color: $pix-warning-10;
+        background-color: var(--pix-warning-100);
       }
 
       &:focus:enabled {
-        outline-color: $pix-warning-70;
+        outline-color: var(--pix-warning-700);
       }
     }
   }
 
   &--error {
-    color: $pix-error-70;
-    background-color: $pix-error-5;
+    color: var(--pix-error-700);
+    background-color: var(--pix-error-50);
 
     .pix-icon-button {
-      color: $pix-error-70;
-      background-color: $pix-error-5;
+      color: var(--pix-neutral-800);
+      background-color: var(--pix-error-50);
 
       &:hover:enabled,
       &:focus:enabled,
       &:active:enabled {
-        color: $pix-error-70;
-        background-color: $pix-error-10;
+        background-color: var(--pix-error-100);
       }
 
       &:focus:enabled {
-        outline-color: $pix-error-70;
+        outline-color: var(--pix-error-700);
       }
     }
   }
 
   &--communication {
-    color: $pix-neutral-0;
-    background-color: $pix-primary;
+    color: var(--pix-neutral-0);
+    background-color: var(--pix-primary-500);
 
     &-orga {
-      color: $pix-neutral-0;
-      background-color: $pix-secondary-orga-80;
+      color: var(--pix-neutral-0);
+      background-color: var(--pix-orga-500);
     }
 
     &-certif {
-      color: $pix-neutral-0;
-      background-color: $pix-secondary-certif-50;
+      color: var(--pix-neutral-0);
+      background-color: var(--pix-certif-500);
     }
   }
 }

package/addon/styles/_pix-block.scss

@@ -1,13 +1,13 @@
 .pix-block {
   position: relative;
-  background-color: $pix-neutral-0;
+  background-color: var(--pix-neutral-0);
   border-radius: 5px;
 
   &--shadow-light {
-    box-shadow: 0 4px 8px rgba($pix-neutral-110, 0.08);
+    @extend %pix-shadow-sm;
   }
 
   &--shadow-heavy {
-    box-shadow: 0 12px 24px rgba($pix-neutral-110, 0.08);
+    @extend %pix-shadow-xl;
   }
 }