@1024pix/pix-ui 48.8.1 → 49.0.0

package/addon/components/{pix-collapsible.hbs → pix-accordions.hbs}

@@ -1,18 +1,18 @@
-<div class="pix-collapsible">
+<div class="pix-accordions">
 
   <button
-    class="pix-collapsible__title"
+    class="pix-accordions__title"
     type="button"
-    {{on "click" this.toggleCollapsible}}
+    {{on "click" this.toggleAccordions}}
     aria-controls={{this.contentId}}
     aria-expanded={{if this.isUnCollapsed "true" "false"}}
     ...attributes
   >
 
-    <span class="pix-collapsible-title__container">
+    <span class="pix-accordions-title__container">
       {{#if @iconName}}
         <PixIcon
-          class="pix-collapsible-title__icon"
+          class="pix-accordions-title__icon"
           @name={{@iconName}}
           @plainIcon={{@plainIcon}}
           @ariaHidden={{true}}
@@ -22,14 +22,14 @@
       {{yield to="title"}}
     </span>
 
-    <span class="pix-collapsible-title__container">
+    <span class="pix-accordions-title__container">
       {{#if @tagContent}}
         <PixTag @color={{@tagColor}}>
           {{@tagContent}}
         </PixTag>
       {{/if}}
       <PixIcon
-        class="pix-collapsible-title-container__toggle-icon"
+        class="pix-accordions-title-container__toggle-icon"
         @ariaHidden={{true}}
         @name="{{if this.isCollapsed 'chevronBottom' 'chevronTop'}}"
       />
@@ -38,7 +38,7 @@
 
   <div
     id={{this.contentId}}
-    class="pix-collapsible__content"
+    class="pix-accordions__content"
     aria-hidden={{if this.isCollapsed "true" "false"}}
   >
     {{#if this.isContentRendered}}

package/addon/components/{pix-collapsible.js → pix-accordions.js}

@@ -3,9 +3,9 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 
-export default class PixCollapsible extends Component {
-  text = 'pix-collapsible';
-  contentId = 'pix-collapsible-' + guidFor(this);
+export default class PixAccordions extends Component {
+  text = 'pix-accordions';
+  contentId = 'pix-accordions-' + guidFor(this);
 
   @tracked isCollapsed = true;
   @tracked hasUnCollapsedOnce = false;
@@ -19,7 +19,7 @@ export default class PixCollapsible extends Component {
   }
 
   @action
-  toggleCollapsible() {
+  toggleAccordions() {
     this.isCollapsed = !this.isCollapsed;
     this.hasUnCollapsedOnce = true;
   }

package/addon/components/pix-app-layout.hbs

@@ -1,3 +1,3 @@
-<div class="pix-app-layout">
+<div class={{this.classNames}} ...attributes>
   {{yield}}
 </div>

package/addon/components/{pix-navigation.js → pix-app-layout.js}

@@ -1,20 +1,20 @@
 import Component from '@glimmer/component';
 import { warn } from '@ember/debug';
 
-export default class PixNavigation extends Component {
+export default class PixAppLayout extends Component {
   get variant() {
     const value = this.args.variant ?? 'primary';
     warn(
-      `PixNavigation: @variant "${value}" should be certif, orga or primary`,
+      `PixAppLayout: @variant "${value}" should be certif, orga or primary`,
       ['primary', 'orga', 'certif'].includes(value),
       {
-        id: 'pix-ui.pix-navigation.variant.not-valid',
+        id: 'pix-ui.pix-app-layout.variant.not-valid',
       },
     );
 
     return value;
   }
   get classNames() {
-    return ['pix-navigation', `pix-navigation--${this.variant}`].join(' ');
+    return ['pix-app-layout', `pix-app-layout--${this.variant}`].join(' ');
   }
 }

package/addon/components/{pix-banner.hbs → pix-banner-alert.hbs}

@@ -1,17 +1,17 @@
 {{#if this.displayBanner}}
-  <div class="pix-banner pix-banner--{{this.type}}" role="alert" ...attributes>
+  <div class="pix-banner-alert pix-banner-alert--{{this.type}}" role="alert" ...attributes>
     <PixIcon
       @name={{this.icon}}
       @plainIcon={{true}}
       @ariaHidden={{true}}
-      class="pix-banner__icon"
+      class="pix-banner-alert__icon"
     />
     <div>
       {{yield}}
       {{#if this.displayAction}}
         {{#if this.isExternalLink}}
           <a
-            class="pix-banner__action"
+            class="pix-banner-alert__action"
             href={{@actionUrl}}
             target="_blank"
             rel="noopener noreferrer"
@@ -20,12 +20,12 @@
             <PixIcon @name="openNew" class="external-link" />
           </a>
         {{else}}
-          <LinkTo class="pix-banner__action" @route={{@actionUrl}}>{{@actionLabel}}</LinkTo>
+          <LinkTo class="pix-banner-alert__action" @route={{@actionUrl}}>{{@actionLabel}}</LinkTo>
         {{/if}}
       {{/if}}
     </div>
     {{#if this.canCloseBanner}}
-      <div class="pix-banner__close">
+      <div class="pix-banner-alert__close">
         <PixIconButton
           @ariaLabel="Fermer"
           @iconName="close"

package/addon/components/{pix-banner.js → pix-banner-alert.js}

@@ -26,7 +26,7 @@ const icons = {
   [TYPE_COMMUNICATION_CERTIF]: 'campaign',
 };
 
-export default class PixBanner extends Component {
+export default class PixBannerAlert extends Component {
   @tracked isBannerVisible = true;
   get type() {
     return types.includes(this.args.type) ? this.args.type : TYPE_INFO;

package/addon/components/pix-navigation.hbs

@@ -1,4 +1,4 @@
-<aside ...attributes class={{this.classNames}}>
+<aside ...attributes class="pix-navigation">
   <header class="pix-navigation__brand">{{yield to="brand"}}</header>
   <nav class="pix-navigation__nav" aria-label={{@navigationAriaLabel}}>{{yield
       to="navElements"

package/addon/components/pix-notification-alert.hbs

@@ -0,0 +1,13 @@
+<p class="pix-notification-alert {{concat 'pix-notification-alert--' this.type}}" ...attributes>
+  {{#if @withIcon}}
+    <PixIcon
+      @name={{this.iconName}}
+      @ariaHidden={{true}}
+      @plainIcon={{true}}
+      class="pix-notification-alert__icon"
+    />
+  {{/if}}
+  <span class="pix-notification-alert__content">
+    {{yield}}
+  </span>
+</p>

package/addon/components/{pix-message.js → pix-notification-alert.js}

@@ -5,7 +5,7 @@ const TYPE_SUCCESS = 'success';
 const TYPE_WARNING = 'warning';
 const TYPE_ERROR = 'error';
 
-export default class PixMessage extends Component {
+export default class PixNotificationAlert extends Component {
   get type() {
     const correctTypes = [TYPE_INFO, TYPE_SUCCESS, TYPE_WARNING, TYPE_ERROR];
 

package/addon/components/{pix-progress-gauge.hbs → pix-progress-bar.hbs}

@@ -1,19 +1,19 @@
 <div
-  class="progress-gauge {{this.themeMode}} {{this.colorClass}}"
+  class="progress-bar {{this.themeMode}} {{this.colorClass}}"
   aria-hidden={{if @isDecorative "true"}}
   ...attributes
 >
   {{#unless @hidePercentage}}
-    <div class="progress-gauge__text" role="presentation">{{this.percentageValue}}</div>
+    <div class="progress-bar__text" role="presentation">{{this.percentageValue}}</div>
   {{/unless}}
   <label for={{this.id}} class="screen-reader-only">{{@label}}</label>
   <progress
-    class="progress-gauge__bar"
+    class="progress-bar__bar"
     id={{this.id}}
     max="100"
     value={{this.value}}
   >{{this.value}}%</progress>
   {{#if @subtitle}}
-    <p class="progress-gauge__sub-title">{{@subtitle}}</p>
+    <p class="progress-bar__sub-title">{{@subtitle}}</p>
   {{/if}}
 </div>

package/addon/components/{pix-progress-gauge.js → pix-progress-bar.js}

@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { guidFor } from '@ember/object/internals';
 
-export default class PixProgressGauge extends Component {
+export default class PixProgressBar extends Component {
   get id() {
     return guidFor(this);
   }
@@ -10,7 +10,7 @@ export default class PixProgressGauge extends Component {
     if (Number(this.args.value) <= 0) return 0;
     if (Number(this.args.value) > 100) return 100;
     if (!this.args.value) {
-      throw new Error('ERROR in PixProgressGauge component, @value param is not provided.');
+      throw new Error('ERROR in PixProgressBar component, @value param is not provided.');
     }
     return Number(this.args.value);
   }
@@ -23,7 +23,7 @@ export default class PixProgressGauge extends Component {
     const thereIsNoLabel = !this.args.label || !this.args.label.trim();
 
     if (thereIsNoLabel && !this.args.isDecorative) {
-      throw new Error('ERROR in PixProgressGauge component, @label param is not provided.');
+      throw new Error('ERROR in PixProgressBar component, @label param is not provided.');
     }
     return this.args.label;
   }
@@ -36,7 +36,7 @@ export default class PixProgressGauge extends Component {
         ? this.args.themeMode
         : 'light';
 
-    return `progress-gauge--theme-${themeMode}`;
+    return `progress-bar--theme-${themeMode}`;
   }
 
   get colorClass() {
@@ -53,6 +53,6 @@ export default class PixProgressGauge extends Component {
     const color =
       this.args.color && availableColor.includes(this.args.color) ? this.args.color : 'primary';
 
-    return `progress-gauge--content-${color}`;
+    return `progress-bar--content-${color}`;
   }
 }

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

@@ -0,0 +1,86 @@
+<ul role="listbox" id={{@listId}} class="pix-select_list" ...attributes>
+  <li
+    class="pix-select-list-category__option{{unless
+        @value
+        ' pix-select-list-category__option--selected'
+      }}{{unless @displayDefaultOption ' pix-select-list-category__option--hidden'}}"
+    role="option"
+    tabindex={{if this.isDefaultOptionHidden "-1" "0"}}
+    aria-selected={{if @value "false" "true"}}
+    {{on "click" (fn @onChange @defaultOption)}}
+    {{on-enter-action (fn @onChange @defaultOption)}}
+    {{on-space-action (fn @onChange @defaultOption)}}
+  >
+    {{@defaultOptionValue}}
+  </li>
+  {{#if this.results}}
+    {{#if this.displayCategory}}
+      {{#each this.results as |element index|}}
+        <ul
+          class="pix-select-list-category"
+          role="group"
+          aria-labelledby={{if this.displayCategory (concat "cat-" @selectId "-" index)}}
+        >
+          {{#if this.displayCategory}}
+            <li
+              class="pix-select-list-category__name"
+              role="presentation"
+              id={{concat "cat-" @selectId "-" index}}
+              title={{element.label}}
+            >
+              {{element.category}}
+            </li>
+          {{/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-list-category__option{{if
+                  (eq option.value @value)
+                  ' pix-select-list-category__option--selected'
+                }}"
+              role="option"
+              tabindex={{if @isExpanded "0" "-1"}}
+              title={{option.label}}
+              aria-selected={{if (eq option.value @value) "true" "false"}}
+              {{on "click" (fn @onChange option)}}
+              {{on-enter-action (fn @onChange option)}}
+              {{on-space-action (fn @onChange option)}}
+            >
+              {{option.label}}
+
+              {{#if (eq option.value @value)}}
+                <PixIcon @name="check" role="presentation" />
+              {{/if}}
+            </li>
+          {{/each}}
+        </ul>
+      {{/each}}
+    {{else}}
+      {{#each this.results as |option|}}
+        <li
+          class="pix-select-list-category__option{{if
+              (eq option.value @value)
+              ' pix-select-list-category__option--selected'
+            }}"
+          role="option"
+          tabindex={{if @isExpanded "0" "-1"}}
+          aria-selected={{if (eq option.value @value) "true" "false"}}
+          title={{option.label}}
+          {{on "click" (fn @onChange option)}}
+          {{on-enter-action (fn @onChange option)}}
+          {{on-space-action (fn @onChange option)}}
+        >
+          {{option.label}}
+
+          {{#if (eq option.value @value)}}
+            <PixIcon @name="check" role="presentation" />
+          {{/if}}
+        </li>
+      {{/each}}
+    {{/if}}
+  {{else}}
+    <li class="pix-select-list__empty-search-message">{{@emptySearchMessage}}</li>
+  {{/if}}
+</ul>

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

@@ -0,0 +1,42 @@
+import Component from '@glimmer/component';
+
+export default class PixSelectList extends Component {
+  constructor(...args) {
+    super(...args);
+
+    const categories = [];
+
+    this.args.options.forEach((element) => {
+      if (!categories.includes(element.category) && element.category !== undefined) {
+        categories.push(element.category);
+      }
+    });
+    this.displayCategory = categories.length > 0;
+  }
+
+  get isDefaultOptionHidden() {
+    return !this.args.isExpanded || this.args.hideDefaultOption;
+  }
+  get results() {
+    let results = [];
+    let options = this.args.options;
+
+    if (this.args.searchValue) {
+      options = this.args.options.filter((option) =>
+        option.label.toLowerCase().includes(this.args.searchValue.toLowerCase()),
+      );
+    }
+
+    if (!this.displayCategory) return options;
+
+    options.forEach(({ category, value, label }) => {
+      const categoryIndex = results.findIndex((result) => result.category === category);
+      if (categoryIndex !== -1) {
+        results[categoryIndex].options.push({ value, label });
+      } else {
+        results.push({ category, options: [{ label, value }] });
+      }
+    });
+    return results;
+  }
+}

package/addon/components/pix-select.hbs

@@ -51,7 +51,7 @@
       </button>
       <div
         {{popover}}
-        class="pix-select__dropdown{{unless this.isExpanded ' pix-select__dropdown--closed'}}"
+        class="pix-select__dropdown {{unless this.isExpanded ' pix-select__dropdown--closed'}}"
         {{on "transitionend" this.focus}}
       >
         {{#if @isSearchable}}
@@ -68,92 +68,20 @@
             />
           </div>
         {{/if}}
-        <ul role="listbox" id={{this.listId}} class="pix-select__options">
-          <li
-            class="pix-select-options-category__option{{unless
-                @value
-                ' pix-select-options-category__option--selected'
-              }}{{unless this.displayDefaultOption ' pix-select-options-category__option--hidden'}}"
-            role="option"
-            tabindex={{if this.isDefaultOptionHidden "-1" "0"}}
-            aria-selected={{if @value "false" "true"}}
-            {{on "click" (fn this.onChange this.defaultOption)}}
-            {{on-enter-action (fn this.onChange this.defaultOption)}}
-            {{on-space-action (fn this.onChange this.defaultOption)}}
-          >
-            {{@placeholder}}
-          </li>
-          {{#if this.results}}
-            {{#if this.displayCategory}}
-              {{#each this.results as |element index|}}
-                <ul
-                  class="pix-select-options__category"
-                  role="group"
-                  aria-labelledby={{if
-                    this.displayCategory
-                    (concat "cat-" this.selectId "-" index)
-                  }}
-                >
-                  {{#if this.displayCategory}}
-                    <li
-                      class="pix-select-options-category__name"
-                      role="presentation"
-                      id={{concat "cat-" this.selectId "-" index}}
-                    >
-                      {{element.category}}
-                    </li>
-                  {{/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)
-                          ' pix-select-options-category__option--selected'
-                        }}"
-                      role="option"
-                      tabindex={{if this.isExpanded "0" "-1"}}
-                      aria-selected={{if (eq option.value @value) "true" "false"}}
-                      {{on "click" (fn this.onChange option)}}
-                      {{on-enter-action (fn this.onChange option)}}
-                      {{on-space-action (fn this.onChange option)}}
-                    >
-                      {{option.label}}
-
-                      {{#if (eq option.value @value)}}
-                        <PixIcon @name="check" role="presentation" />
-                      {{/if}}
-                    </li>
-                  {{/each}}
-                </ul>
-              {{/each}}
-            {{else}}
-              {{#each this.results as |option|}}
-                <li
-                  class="pix-select-options-category__option{{if
-                      (eq option.value @value)
-                      ' pix-select-options-category__option--selected'
-                    }}"
-                  role="option"
-                  tabindex={{if this.isExpanded "0" "-1"}}
-                  aria-selected={{if (eq option.value @value) "true" "false"}}
-                  {{on "click" (fn this.onChange option)}}
-                  {{on-enter-action (fn this.onChange option)}}
-                  {{on-space-action (fn this.onChange this.defaultOption)}}
-                >
-                  {{option.label}}
-
-                  {{#if (eq option.value @value)}}
-                    <PixIcon @name="check" role="presentation" />
-                  {{/if}}
-                </li>
-              {{/each}}
-            {{/if}}
-          {{else}}
-            <li class="pix-select__empty-search-message">{{@emptySearchMessage}}</li>
-          {{/if}}
-        </ul>
+        <PixSelectList
+          @hideDefaultOption={{@hideDefaultOption}}
+          @listId={{this.listId}}
+          @value={{@value}}
+          @displayDefaultOption={{this.displayDefaultOption}}
+          @searchValue={{this.searchValue}}
+          @onChange={{this.onChange}}
+          @defaultOption={{this.defaultOption}}
+          @selectId={{this.selectId}}
+          @isExpanded={{this.isExpanded}}
+          @options={{@options}}
+          @defaultOptionValue={{@placeholder}}
+          @emptySearchMessage={{@emptySearchMessage}}
+        />
       </div>
     </PopperJS>
     {{#if @errorMessage}}

package/addon/components/pix-select.js

@@ -12,19 +12,10 @@ export default class PixSelect extends Component {
   constructor(...args) {
     super(...args);
 
-    const categories = [];
-
     this.searchId = 'search-input-' + guidFor(this);
     this.selectId = this.args.id ? this.args.id : 'select-' + guidFor(this);
     this.listId = `listbox-${this.selectId}`;
 
-    this.args.options.forEach((element) => {
-      if (!categories.includes(element.category) && element.category !== undefined) {
-        categories.push(element.category);
-      }
-    });
-    this.displayCategory = categories.length > 0;
-
     if (!this.args.isComputeWidthDisabled) {
       this.elementHelper.waitForElement(this.listId).then((elementList) => {
         const baseFontRemRatio = Number(
@@ -43,10 +34,6 @@ export default class PixSelect extends Component {
     return !this.searchValue && !this.args.hideDefaultOption;
   }
 
-  get isDefaultOptionHidden() {
-    return !this.isExpanded || this.args.hideDefaultOption;
-  }
-
   get className() {
     const classes = ['pix-select-button'];
     if (this.args.className) {
@@ -75,29 +62,6 @@ export default class PixSelect extends Component {
     };
   }
 
-  get results() {
-    let results = [];
-    let options = this.args.options;
-
-    if (this.searchValue) {
-      options = this.args.options.filter((option) =>
-        option.label.toLowerCase().includes(this.searchValue.toLowerCase()),
-      );
-    }
-
-    if (!this.displayCategory) return options;
-
-    options.forEach(({ category, value, label }) => {
-      const categoryIndex = results.findIndex((result) => result.category === category);
-      if (categoryIndex !== -1) {
-        results[categoryIndex].options.push({ value, label });
-      } else {
-        results.push({ category, options: [{ label, value }] });
-      }
-    });
-    return results;
-  }
-
   @action
   toggleDropdown(event) {
     if (this.isExpanded) {

package/addon/components/pix-structure-switcher.hbs

@@ -0,0 +1,40 @@
+<div
+  id="container-{{this.switcherId}}"
+  class="pix-structure-switcher"
+  {{on-click-outside this.closeMenu}}
+  {{on-arrow-down-up-action this.listId this.openMenu this.isMenuOpen}}
+  {{on-escape-action this.closeMenu this.switcherId}}
+  {{on "keydown" this.lockTab}}
+  ...attributes
+>
+  <PopperJS @placement="right-end" as |reference popover|>
+
+    <PixButton
+      {{reference}}
+      @size="small"
+      @variant="secondary"
+      aria-controls={{this.listId}}
+      id={{this.switcherId}}
+      @triggerAction={{this.toggleMenu}}
+      aria-expanded={{this.isMenuOpen}}
+    >{{@label}}</PixButton>
+    <div
+      {{popover}}
+      class="pix-select__dropdown {{unless this.isMenuOpen 'pix-select__dropdown--closed'}}"
+    >
+      <PixSelectList
+        aria-labelledby={{this.switcherId}}
+        {{on "transitionend" this.focus}}
+        @hideDefaultOption={{true}}
+        @listId={{this.listId}}
+        @selectId={{this.switcherId}}
+        @value={{@value}}
+        @onChange={{this.onSelectListChange}}
+        @defaultOption={{@defaultOption}}
+        @isExpanded={{this.isMenuOpen}}
+        @options={{@structures}}
+        @defaultOptionValue={{@label}}
+      />
+    </div>
+  </PopperJS>
+</div>

package/addon/components/pix-structure-switcher.js

@@ -0,0 +1,57 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
+import { inject as service } from '@ember/service';
+
+export default class PixStructureSwitcher extends Component {
+  @service elementHelper;
+
+  constructor(...args) {
+    super(...args);
+    this.switcherId = 'structure-switcher-' + guidFor(this);
+    this.listId = `listbox-${this.switcherId}`;
+    this.elementHelper.waitForElement(`container-${this.switcherId}`).then((element) => {
+      this.rootElement = element;
+    });
+  }
+
+  @tracked
+  isMenuOpen = false;
+
+  @action
+  toggleMenu() {
+    this.isMenuOpen = !this.isMenuOpen;
+  }
+
+  @action
+  onSelectListChange(structure, event) {
+    this.args.onChange(structure);
+    this.closeMenu(event);
+    document.getElementById(this.switcherId).focus();
+  }
+
+  @action
+  openMenu(event) {
+    event.preventDefault();
+    this.isMenuOpen = true;
+  }
+
+  @action
+  closeMenu(event) {
+    event.preventDefault();
+    this.isMenuOpen = false;
+  }
+
+  @action
+  lockTab(event) {
+    if (event.code === 'Tab' && this.isMenuOpen) {
+      event.preventDefault();
+    }
+  }
+
+  @action
+  focus() {
+    document.getElementById(this.listId).querySelector("[aria-selected='true']").focus();
+  }
+}