@1024pix/pix-ui 58.4.2 → 58.4.4

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

@@ -1,4 +1,5 @@
 import { warn } from '@ember/debug';
+import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 import { inject as service } from '@ember/service';
@@ -6,6 +7,8 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
 import { formatMessage } from '../translations';
+import PixButton from './pix-button';
+import PixIconButton from './pix-icon-button';
 
 export default class PixNavigation extends Component {
   @service router;
@@ -75,4 +78,50 @@ export default class PixNavigation extends Component {
   get footerId() {
     return `${this._navigationId}-footer`;
   }
+
+  <template>
+    <aside
+      ...attributes
+      class="pix-navigation
+        {{if this.navigationMenuOpened 'pix-navigation--opened'}}
+        {{if this.shrinkNavigationService.isShrunk 'pix-navigation--shrunk'}}"
+    >
+      <header class="pix-navigation__brand">{{yield to="brand"}}
+        {{#if this.shrinkNavigationService.canNavigationBeShrunk}}
+          <div class="pix-navigation__shrunk-container">
+            <PixIconButton
+              class="pix-navigation-shrunk-button"
+              @iconName={{this.shrunkNavigationIcon}}
+              @triggerAction={{this.shrinkNavigation}}
+              @ariaLabel="{{this.shrunkNavigationAriaLabel}}"
+            />
+          </div>
+        {{/if}}
+        <div class="pix-navigation__burger-menu"><PixButton
+            aria-controls="{{this.navigationId}} {{this.footerId}}"
+            aria-expanded={{this.navigationMenuOpened}}
+            @iconBefore={{if this.navigationMenuOpened "close" "menu"}}
+            @triggerAction={{this.toggleNavigationMenu}}
+          >
+            <span class="screen-reader-only">
+              {{#if this.navigationMenuOpened}}
+                {{@closeLabel}}
+              {{else}}
+                {{@openLabel}}
+              {{/if}}
+            </span>
+          </PixButton>
+        </div>
+      </header>
+      <nav
+        class="pix-navigation__nav"
+        {{on "click" this.closeNavigation}}
+        aria-label={{@navigationAriaLabel}}
+        id={{this.navigationId}}
+      >
+        {{yield to="navElements"}}
+      </nav>
+      <footer class="pix-navigation__footer" id={{this.footerId}}>{{yield to="footer"}}</footer>
+    </aside>
+  </template>
 }

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

@@ -1,5 +1,8 @@
+import { concat } from '@ember/helper';
 import Component from '@glimmer/component';
 
+import PixIcon from './pix-icon';
+
 const TYPE_INFO = 'info';
 const TYPE_SUCCESS = 'success';
 const TYPE_WARNING = 'warning';
@@ -35,4 +38,20 @@ export default class PixNotificationAlert extends Component {
     };
     return classes[this.type];
   }
+
+  <template>
+    <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>
+  </template>
 }

package/addon/components/pix-overlay.gjs

@@ -0,0 +1,31 @@
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+
+import onEscapeAction from '../modifiers/on-escape-action';
+import trapFocus from '../modifiers/trap-focus';
+
+export default class PixOverlay extends Component {
+  @action
+  onClick(event) {
+    const isClickOnOverlay = event.target.classList.contains('pix-overlay');
+
+    if (this.args.onClose && isClickOnOverlay) {
+      this.args.onClose(event);
+    }
+  }
+
+  <template>
+    <div
+      class="pix-overlay
+        {{unless @isVisible ' pix-overlay--hidden'}}
+        {{if @hasCenteredContent ' pix-overlay--with-centered-content'}}"
+      {{on "click" this.onClick}}
+      {{trapFocus @isVisible @focusOnClose}}
+      {{onEscapeAction @onClose}}
+      ...attributes
+    >
+      {{yield}}
+    </div>
+  </template>
+}

package/addon/components/{pix-pagination.js → pix-pagination.gjs}

@@ -1,8 +1,11 @@
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import Component from '@glimmer/component';
+import { eq } from 'ember-truth-helpers';
 
 import { formatMessage } from '../translations';
+import PixIconButton from './pix-icon-button';
+import PixSelect from './pix-select';
 
 const DEFAULT_PAGE_OPTIONS = [
   { label: '10', value: 10 },
@@ -129,4 +132,59 @@ export default class PixPagination extends Component {
     this.router.replaceWith({ queryParams: { pageNumber: this.previousPage } });
     this.onChange();
   }
+
+  <template>
+    <footer class={{this.isCondensed}}>
+      <section class="pix-pagination__size">
+        <span class="pagination-size__label">{{this.beforeResultsPerPage}}</span>
+        <PixSelect
+          @placeholder={{this.pageSize}}
+          @screenReaderOnly={{true}}
+          class="pagination-size__choice"
+          @value={{this.pageSize}}
+          @hideDefaultOption={{true}}
+          @onChange={{this.changePageSize}}
+          @options={{this.pageOptions}}
+        >
+          <:label>{{this.selectPageSizeLabel}}</:label>
+        </PixSelect>
+      </section>
+      <section class="pix-pagination__navigation">
+        <span>
+          {{#if (eq this.pageCount 1)}}
+            {{this.pageResults}}
+          {{else}}
+            {{this.pageInfo}}
+          {{/if}}
+        </span>
+        <div class="pix-pagination-navigation__action">
+          <PixIconButton
+            class="pix-pagination-navigation__action-button"
+            @iconName="arrowLeft"
+            @ariaLabel={{this.previousPageLabel}}
+            @triggerAction={{this.goToPreviousPage}}
+            @withBackground={{false}}
+            @size="big"
+            @color="dark-grey"
+            disabled={{this.isPreviousPageDisabled}}
+            aria-disabled="{{this.isPreviousPageDisabled}}"
+          />
+          <span>
+            {{this.pageNumber}}
+          </span>
+          <PixIconButton
+            class="pix-pagination-navigation__action-button"
+            @iconName="arrowRight"
+            @ariaLabel={{this.nextPageLabel}}
+            @triggerAction={{this.goToNextPage}}
+            @withBackground={{false}}
+            @size="big"
+            @color="dark-grey"
+            disabled={{this.isNextPageDisabled}}
+            aria-disabled="{{this.isNextPageDisabled}}"
+          />
+        </div>
+      </section>
+    </footer>
+  </template>
 }

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

@@ -55,4 +55,26 @@ export default class PixProgressBar extends Component {
 
     return `progress-bar--content-${color}`;
   }
+
+  <template>
+    <div
+      class="progress-bar {{this.themeMode}} {{this.colorClass}}"
+      aria-hidden={{if @isDecorative "true"}}
+      ...attributes
+    >
+      {{#unless @hidePercentage}}
+        <div class="progress-bar__text" role="presentation">{{this.percentageValue}}</div>
+      {{/unless}}
+      <label for={{this.id}} class="screen-reader-only">{{@label}}</label>
+      <progress
+        class="progress-bar__bar"
+        id={{this.id}}
+        max="100"
+        value={{this.value}}
+      >{{this.value}}%</progress>
+      {{#if @subtitle}}
+        <p class="progress-bar__sub-title">{{@subtitle}}</p>
+      {{/if}}
+    </div>
+  </template>
 }

package/addon/components/{pix-radio-button.js → pix-radio-button.gjs}

@@ -1,9 +1,11 @@
 import { warn } from '@ember/debug';
+import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 import Component from '@glimmer/component';
 
 import { formatMessage } from '../translations';
+import PixLabelWrapped from './pix-label-wrapped';
 
 export default class PixRadioButton extends Component {
   text = 'pix-radio-button';
@@ -68,4 +70,44 @@ export default class PixRadioButton extends Component {
       event.preventDefault();
     }
   }
+
+  <template>
+    <div class="pix-radio-button {{@class}}">
+      <PixLabelWrapped
+        @for={{this.id}}
+        @requiredLabel={{@requiredLabel}}
+        @subLabel={{@subLabel}}
+        @size={{@size}}
+        @screenReaderOnly={{@screenReaderOnly}}
+        @isDisabled={{this.isDisabled}}
+        @inlineLabel={{true}}
+        @variant={{@variant}}
+        @state={{@state}}
+      >
+        <:inputElement>
+          <input
+            type="radio"
+            id={{this.id}}
+            class={{this.inputClasses}}
+            value={{@value}}
+            aria-disabled={{this.isDisabled}}
+            aria-describedby={{this.stateId}}
+            {{on "click" this.avoidCheckedStateChangeIfIsDisabled}}
+            ...attributes
+          />
+        </:inputElement>
+        <:default>
+          {{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>
+  </template>
 }

package/addon/components/{pix-search-input.js → pix-search-input.gjs}

@@ -1,7 +1,10 @@
+import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import { debounceTask } from 'ember-lifeline';
 
+import PixIcon from './pix-icon';
 import PixInputBase from './pix-input-base';
+import PixLabel from './pix-label';
 
 export default class PixSearchInput extends PixInputBase {
   initialValue = this.args.value;
@@ -33,4 +36,32 @@ export default class PixSearchInput extends PixInputBase {
       this.debounceTimeBeforeSearch,
     );
   }
+
+  <template>
+    <div class="pix-search-input {{if @inlineLabel ' pix-search-input--inline'}}">
+      <PixLabel
+        @for={{this.id}}
+        @requiredLabel={{@requiredLabel}}
+        @subLabel={{@subLabel}}
+        @size={{@size}}
+        @screenReaderOnly={{@screenReaderOnly}}
+        @inlineLabel={{@inlineLabel}}
+      >
+        {{yield to="label"}}
+      </PixLabel>
+
+      <div class="pix-search-input__input-container">
+        <PixIcon @name="search" @ariaHidden={{true}} />
+        <input
+          id={{this.id}}
+          class="pix-search-input__input"
+          name={{@inputName}}
+          placeholder={{@placeholder}}
+          value={{this.initialValue}}
+          {{on "input" this.onSearch}}
+          ...attributes
+        />
+      </div>
+    </div>
+  </template>
 }

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

@@ -0,0 +1,166 @@
+import { concat, fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import Component from '@glimmer/component';
+import { eq } from 'ember-truth-helpers';
+
+import onEnterAction from '../modifiers/on-enter-action';
+import onSpaceAction from '../modifiers/on-space-action';
+import PixIcon from './pix-icon';
+
+export default class PixSelectList extends Component {
+  get categories() {
+    const uniqueCategories = new Set(
+      ...this.args.options.map((option) => option.category).filter(Boolean),
+    );
+    return Array.from(uniqueCategories.values());
+  }
+
+  get displayCategory() {
+    return this.categories.length > 0;
+  }
+
+  get isDefaultOptionHidden() {
+    return !this.args.isExpanded || this.args.hideDefaultOption;
+  }
+
+  get results() {
+    const 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, icon, iconTitle }) => {
+      const categoryIndex = results.findIndex((result) => result.category === category);
+      if (categoryIndex !== -1) {
+        results[categoryIndex].options.push({ value, label, icon, iconTitle });
+      } else {
+        results.push({ category, options: [{ label, value, icon, iconTitle }] });
+      }
+    });
+    return results;
+  }
+
+  <template>
+    <ul role="listbox" id={{@listId}} class="pix-select_list" ...attributes>
+      {{#if @displayDefaultOption}}
+        <li
+          class="pix-select-list-category__option{{unless
+              @value
+              ' pix-select-list-category__option--selected'
+            }}"
+          role="option"
+          tabindex={{if this.isDefaultOptionHidden "-1" "0"}}
+          aria-selected={{if @value "false" "true"}}
+          {{on "click" (fn @onChange @defaultOption)}}
+          {{onEnterAction (fn @onChange @defaultOption)}}
+          {{onSpaceAction (fn @onChange @defaultOption)}}
+        >
+          {{@defaultOptionValue}}
+        </li>
+      {{/if}}
+      {{#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)}}
+                  {{onEnterAction (fn @onChange option)}}
+                  {{onSpaceAction (fn @onChange option)}}
+                >
+
+                  {{#if option.icon}}
+                    <PixIcon
+                      role="presentation"
+                      @name={{option.icon}}
+                      @title={{option.iconTitle}}
+                      class="pix-icon--no-shrink"
+                    />
+                  {{/if}}
+
+                  {{option.label}}
+
+                  {{#if (eq option.value @value)}}
+                    <PixIcon
+                      @name="check"
+                      role="presentation"
+                      class="pix-select-list-category__option-checked"
+                    />
+                  {{/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)}}
+              {{onEnterAction (fn @onChange option)}}
+              {{onSpaceAction (fn @onChange option)}}
+            >
+              {{#if option.icon}}
+                <PixIcon
+                  role="presentation"
+                  @name={{option.icon}}
+                  @title={{option.iconTitle}}
+                  class="pix-icon--no-shrink"
+                />
+              {{/if}}
+
+              {{option.label}}
+
+              {{#if (eq option.value @value)}}
+                <PixIcon
+                  @name="check"
+                  role="presentation"
+                  class="pix-select-list-category__option-checked"
+                />
+              {{/if}}
+            </li>
+          {{/each}}
+        {{/if}}
+      {{else}}
+        <li class="pix-select-list__empty-search-message">{{@emptySearchMessage}}</li>
+      {{/if}}
+    </ul>
+  </template>
+}

package/addon/components/pix-selectable-tag.gjs

@@ -0,0 +1,23 @@
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+
+export default class PixSelectableTag extends Component {
+  @action
+  toggleIsChecked() {
+    return this.args.onChange(!this.args.checked);
+  }
+
+  <template>
+    <div class="pix-selectable-tag {{if @checked ' pix-selectable-tag--checked'}}">
+      <input
+        type="checkbox"
+        id={{@id}}
+        {{on "change" this.toggleIsChecked}}
+        checked={{@checked}}
+        ...attributes
+      />
+      <label for={{@id}}>{{@label}}</label>
+    </div>
+  </template>
+}

package/addon/components/pix-sidebar.gjs

@@ -0,0 +1,49 @@
+import { guidFor } from '@ember/object/internals';
+import Component from '@glimmer/component';
+
+import PixIconButton from './pix-icon-button';
+import PixOverlay from './pix-overlay';
+export default class PixSidebar extends Component {
+  constructor(...args) {
+    super(...args);
+
+    if (!this.args.title) {
+      throw new Error('ERROR in PixSidebar component: @title argument is required.');
+    }
+  }
+
+  get id() {
+    return guidFor(this);
+  }
+
+  <template>
+    <PixOverlay @isVisible={{@showSidebar}} @onClose={{@onClose}} @focusOnClose={{@focusOnClose}}>
+      <div
+        class="pix-sidebar {{unless @showSidebar ' pix-sidebar--hidden'}}"
+        role="dialog"
+        aria-labelledby="sidebar-title--{{this.id}}"
+        aria-describedby="sidebar-content--{{this.id}}"
+        aria-modal="true"
+        ...attributes
+      >
+        <div class="pix-sidebar__header">
+          <h1 id="sidebar-title--{{this.id}}" class="pix-sidebar__title">{{@title}}</h1>
+          <PixIconButton
+            @iconName="close"
+            @triggerAction={{@onClose}}
+            @ariaLabel="Fermer"
+            @size="small"
+            @withBackground={{true}}
+            class="pix-sidebar__close-button"
+          />
+        </div>
+        <div id="sidebar-content--{{this.id}}" class="pix-sidebar__content">
+          {{yield to="content"}}
+        </div>
+        <div class="pix-sidebar__footer">
+          {{yield to="footer"}}
+        </div>
+      </div>
+    </PixOverlay>
+  </template>
+}

package/addon/components/pix-stars.gjs

@@ -0,0 +1,34 @@
+import Component from '@glimmer/component';
+import { lt } from 'ember-truth-helpers';
+
+export default class PixStars extends Component {
+  get starsCount() {
+    if (!this.args.total && !this.args.count) return [];
+    return this.args.total ? Array(this.args.total) : Array(this.args.count);
+  }
+
+  get itemClasses() {
+    if (!this.args.color) return 'pix-stars__item';
+    return `pix-stars__item pix-stars__item--color-${this.args.color}`;
+  }
+
+  <template>
+    <div class="pix-stars" ...attributes>
+      <span class="screen-reader-only">{{@alt}}</span>
+      {{#each this.starsCount as |item index|}}
+        <svg
+          role="img"
+          class={{this.itemClasses}}
+          data-acquired={{lt index @count}}
+          aria-hidden="true"
+          viewBox="0 0 36 36"
+        >
+          <path
+            d="M19.2828 2.10285L19.2859 2.1094L19.2891 2.11591L23.2657 10.1293C23.7043 11.0131 24.5494 11.6248 25.5259 11.7652L34.3061 13.0281C34.3075 13.0283 34.3089 13.0285 34.3102 13.0287C35.2023 13.1692 35.6257 14.3013 34.8986 15.0326C34.8976 15.0336 34.8966 15.0346 34.8956 15.0356L28.5817 21.2292C27.8785 21.919 27.5588 22.9099 27.7261 23.8806L29.2294 32.5994C29.3684 33.5432 28.3298 34.2646 27.5175 33.8437C27.5166 33.8432 27.5157 33.8428 27.5148 33.8423L19.7026 29.6958C18.8261 29.2305 17.7761 29.2289 16.8981 29.6914L9.01736 33.8423C9.01683 33.8426 9.01631 33.8428 9.01578 33.8431C8.20337 34.2653 7.16367 33.5437 7.30279 32.5994L8.80604 23.8806C8.97339 22.9099 8.65362 21.919 7.95048 21.2292L1.63355 15.0326C0.90651 14.3014 1.32978 13.1695 2.22156 13.0288L11.0636 11.7656C12.0477 11.6251 12.8982 11.0062 13.3347 10.1131L17.2434 2.11512C17.6777 1.2532 18.8988 1.30004 19.2828 2.10285Z"
+            stroke-width="2"
+          ></path>
+        </svg>
+      {{/each}}
+    </div>
+  </template>
+}