@1024pix/pix-ui 58.4.2 → 58.4.4

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

@@ -0,0 +1,107 @@
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import onClickOutside from 'ember-click-outside/modifiers/on-click-outside';
+import { PopperJS } from 'ember-popperjs';
+
+import onArrowDownUpAction from '../modifiers/on-arrow-down-up-action';
+import onEscapeAction from '../modifiers/on-escape-action';
+import PixButton from './pix-button';
+import PixSelectList from './pix-select-list';
+
+export default class PixStructureSwitcher extends Component {
+  constructor(...args) {
+    super(...args);
+    this.switcherId = 'structure-switcher-' + guidFor(this);
+    this.listId = `listbox-${this.switcherId}`;
+  }
+
+  @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) {
+    if (this.isMenuOpen) return;
+
+    event.preventDefault();
+    this.isMenuOpen = true;
+  }
+
+  @action
+  closeMenu(event) {
+    if (!this.isMenuOpen) return;
+
+    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();
+  }
+
+  <template>
+    <div
+      id="container-{{this.switcherId}}"
+      class="pix-structure-switcher"
+      {{onClickOutside this.closeMenu}}
+      {{onArrowDownUpAction this.listId this.openMenu this.isMenuOpen}}
+      {{onEscapeAction 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>
+        {{#if this.isMenuOpen}}
+          <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>
+        {{/if}}
+      </PopperJS>
+    </div>
+  </template>
+}

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

@@ -1,6 +1,8 @@
 import { warn } from '@ember/debug';
 import Component from '@glimmer/component';
 
+import PixIconButton from './pix-icon-button';
+
 export default class PixTableColumn extends Component {
   get displayHeader() {
     return this.args.context === 'header';
@@ -96,4 +98,35 @@ export default class PixTableColumn extends Component {
     }
     return '';
   }
+
+  <template>
+    {{#if this.displayHeader}}
+      <th scope="col" ...attributes aria-sort={{this.ariaSort}}>
+        <div class="pix-table-header-container">
+          {{yield to="header"}}
+          {{#if this.sortable}}
+            <PixIconButton
+              @ariaLabel={{this.iconLabel}}
+              @iconName={{this.iconName}}
+              @triggerAction={{@onSort}}
+              @size="small"
+            />
+          {{/if}}
+        </div>
+      </th>
+    {{else}}
+      {{#if @isMainRow}}
+        <th scope="row" class={{this.typeClass}} ...attributes>
+          {{yield to="cell"}}
+        </th>
+      {{else}}
+        <td class={{this.typeClass}} ...attributes>
+          {{yield to="cell"}}
+          {{#if (has-block "subCell")}}
+            <p>{{yield to="subCell"}}</p>
+          {{/if}}
+        </td>
+      {{/if}}
+    {{/if}}
+  </template>
 }

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

@@ -27,4 +27,10 @@ export default class PixTabs extends Component {
   get classNames() {
     return ['pix-tabs', `pix-tabs--${this.variant}`].join(' ');
   }
+
+  <template>
+    <nav class={{this.classNames}} aria-label={{this.ariaLabel}} ...attributes>
+      {{yield}}
+    </nav>
+  </template>
 }

package/addon/components/pix-textarea.gjs

@@ -0,0 +1,68 @@
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import PixLabel from './pix-label';
+
+export default class PixTextarea extends Component {
+  // eslint-disable-next-line ember/no-tracked-properties-from-args
+  @tracked value = this.args.value;
+
+  get id() {
+    if (this.args.id) return this.args.id;
+    return 'textarea-' + guidFor(this);
+  }
+
+  get textLengthIndicator() {
+    return this.value ? this.value.length : 0;
+  }
+
+  @action
+  updateValue(event) {
+    this.value = event.target.value;
+  }
+
+  <template>
+    <div class="pix-textarea {{if @inlineLabel ' pix-textarea--inline'}}">
+      {{#if (has-block "label")}}
+        <PixLabel
+          @for={{this.id}}
+          @requiredLabel={{@requiredLabel}}
+          @subLabel={{@subLabel}}
+          @size={{@size}}
+          @screenReaderOnly={{@screenReaderOnly}}
+          @inlineLabel={{@inlineLabel}}
+        >
+          {{yield to="label"}}
+        </PixLabel>
+      {{/if}}
+
+      <div class="pix-textarea__container">
+        <textarea
+          id={{this.id}}
+          maxlength={{if @maxlength @maxlength}}
+          aria-required="{{if @requiredLabel true false}}"
+          required={{if @requiredLabel true false}}
+          class="pix-textarea-container__input {{if @errorMessage 'pix-textarea--error'}}"
+          {{on "keyup" this.updateValue}}
+          ...attributes
+        >{{@value}}</textarea>
+
+        {{#if @maxlength}}
+          {{! prettier-ignore }}
+          <p class="pix-textarea-container__text-length-indicator">{{this.textLengthIndicator}} / {{@maxlength}}</p>
+        {{/if}}
+
+        {{#if @errorMessage}}
+          <label
+            for={{this.id}}
+            class="pix-textarea-container__error-message"
+          >{{@errorMessage}}</label>
+        {{/if}}
+      </div>
+
+    </div>
+  </template>
+}

package/addon/components/pix-toast-container.gjs

@@ -0,0 +1,16 @@
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+
+import PixToast from './pix-toast';
+
+export default class PixToastContainer extends Component {
+  @service pixToast;
+
+  <template>
+    <div class="pix-toast-container">
+      {{#each this.pixToast.content as |toast|}}
+        <PixToast @toast={{toast}} @closeButtonAriaLabel={{@closeButtonAriaLabel}} />
+      {{/each}}
+    </div>
+  </template>
+}

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

@@ -1,12 +1,17 @@
 import { warn } from '@ember/debug';
+import { concat } from '@ember/helper';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
+
 const TYPE_SUCCESS = 'success';
 const TYPE_ERROR = 'error';
 const TYPE_INFORMATION = 'information';
 const TYPE_WARNING = 'warning';
 
+import PixIcon from './pix-icon';
+import PixIconButton from './pix-icon-button';
+
 export default class PixToast extends Component {
   @service pixToast;
 
@@ -34,4 +39,24 @@ export default class PixToast extends Component {
     event.stopPropagation();
     this.pixToast.removeNotification(this.args.toast);
   }
+
+  <template>
+    <div class="pix-toast {{concat 'pix-toast--' this.type}}" role="alert" ...attributes>
+      <div class="pix-toast__icon {{concat 'pix-toast__icon--' this.type}}">
+        <PixIcon @name={{this.iconClass}} @ariaHidden={{true}} @plainIcon={{true}} />
+      </div>
+      <p class="pix-toast__content">
+        {{@toast.message}}
+      </p>
+      <div class="pix-toast__close-button-container">
+        <PixIconButton
+          @ariaLabel={{@closeButtonAriaLabel}}
+          @iconName="close"
+          @size="small"
+          @triggerAction={{this.removeNotification}}
+          class="{{concat 'pix-toast__close-button--' this.type}}"
+        />
+      </div>
+    </div>
+  </template>
 }

package/addon/components/pix-tooltip.gjs

@@ -0,0 +1,82 @@
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import onEscapeAction from '../modifiers/on-escape-action';
+
+export default class PixTooltip extends Component {
+  @tracked isTooltipVisible = false;
+
+  get position() {
+    const correctsPosition = [
+      'top',
+      'right',
+      'bottom',
+      'bottom-left',
+      'bottom-right',
+      'left',
+      'top-left',
+      'top-right',
+    ];
+    return correctsPosition.includes(this.args.position) ? this.args.position : 'top';
+  }
+
+  get display() {
+    return typeof this.args.hide === 'undefined' || !this.args.hide;
+  }
+
+  @action
+  showTooltip() {
+    this.isTooltipVisible = true;
+  }
+
+  @action
+  hideTooltip() {
+    setTimeout(() => (this.isTooltipVisible = false));
+  }
+
+  @action
+  hideTooltipOnMouseOut(event) {
+    const isFocused = event.target.contains(document.activeElement);
+
+    if (isFocused) {
+      return;
+    }
+
+    this.hideTooltip(event);
+  }
+
+  <template>
+    <div
+      class="pix-tooltip {{if this.isTooltipVisible 'pix-tooltip--visible' ''}}"
+      {{onEscapeAction this.hideTooltip}}
+      {{on "mouseover" this.showTooltip}}
+      {{on "mouseleave" this.hideTooltipOnMouseOut}}
+      {{on "focusin" this.showTooltip}}
+      {{on "focusout" this.hideTooltip}}
+      ...attributes
+    >
+      {{#if (has-block "triggerElement")}}
+        <span class="pix-tooltip__trigger-element" tabindex="0">
+          {{yield to="triggerElement"}}
+        </span>
+      {{/if}}
+
+      {{#if (has-block "tooltip")}}
+        {{#if this.display}}
+          <span
+            id={{@id}}
+            role="tooltip"
+            class="pix-tooltip__content pix-tooltip__content--{{this.position}}
+              {{if @isInline 'pix-tooltip__content--inline'}}
+              {{if @isLight 'pix-tooltip__content--light'}}
+              {{if @isWide 'pix-tooltip__content--wide'}}"
+          >
+            {{yield to="tooltip"}}
+          </span>
+        {{/if}}
+      {{/if}}
+    </div>
+  </template>
+}

package/addon/components/{toast-example.js → toast-example.gjs}

@@ -2,6 +2,9 @@ import { action } from '@ember/object';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
 
+import PixButton from './pix-button';
+import PixToastContainer from './pix-toast-container';
+
 export default class ToastExample extends Component {
   @service pixToast;
 
@@ -21,4 +24,14 @@ export default class ToastExample extends Component {
       type: types[randomNumber],
     });
   }
+
+  <template>
+    <div class="toast-example">
+      <PixButton @size="small" @triggerAction={{this.displayNotification}}>
+        Afficher une notification
+      </PixButton>
+
+      <PixToastContainer @closeButtonAriaLabel="Fermer la notification" />
+    </div>
+  </template>
 }

package/package.json

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

package/addon/components/pix-accordions.hbs

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

package/addon/components/pix-accordions.js

@@ -1,26 +0,0 @@
-import { action } from '@ember/object';
-import { guidFor } from '@ember/object/internals';
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-
-export default class PixAccordions extends Component {
-  text = 'pix-accordions';
-  contentId = 'pix-accordions-' + guidFor(this);
-
-  @tracked isCollapsed = true;
-  @tracked hasUnCollapsedOnce = false;
-
-  get isUnCollapsed() {
-    return !this.isCollapsed;
-  }
-
-  get isContentRendered() {
-    return this.hasUnCollapsedOnce;
-  }
-
-  @action
-  toggleAccordions() {
-    this.isCollapsed = !this.isCollapsed;
-    this.hasUnCollapsedOnce = true;
-  }
-}

package/addon/components/pix-background-header.hbs

@@ -1,7 +0,0 @@
-<div class="pix-background-header" ...attributes>
-  <div class="pix-background-header__background"></div>
-
-  <div class="pix-background-header__content">
-    {{yield}}
-  </div>
-</div>

package/addon/components/pix-background-header.js

@@ -1,5 +0,0 @@
-import Component from '@glimmer/component';
-
-export default class PixBackgroundHeaderComponent extends Component {
-  text = 'pix-background-header';
-}

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

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

package/addon/components/pix-block.hbs

@@ -1,8 +0,0 @@
-<div
-  class="pix-block {{concat 'pix-block--' this.variant}}{{if @condensed ' pix-block--condensed'}}"
-  ...attributes
->
-
-  {{yield}}
-
-</div>

package/addon/components/pix-breadcrumb.hbs

@@ -1,21 +0,0 @@
-<nav class="pix-breadcrumb" ...attributes>
-  <ol>
-    {{#each this.links as |link|}}
-      {{#if link.route}}
-        <li>
-          <LinkTo
-            @route={{link.route}}
-            @models={{if link.model (array link.model) this.defaultModel}}
-          >
-            {{link.label}}
-          </LinkTo>
-          <PixIcon @name="chevronRight" @ariaHidden={{true}} />
-        </li>
-      {{else}}
-        <li aria-current="page">
-          <p>{{link.label}}</p>
-        </li>
-      {{/if}}
-    {{/each}}
-  </ol>
-</nav>

package/addon/components/pix-breadcrumb.js

@@ -1,12 +0,0 @@
-import Component from '@glimmer/component';
-
-export default class PixBreadcrumb extends Component {
-  defaultModel = [];
-
-  get links() {
-    return this.args.links.map((link) => ({
-      ...link,
-      label: link.label.trim(),
-    }));
-  }
-}

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

@@ -1,17 +0,0 @@
-{{#if @iconBefore}}
-  <PixIcon
-    class="pix-button__icon pix-button__icon--before"
-    @ariaHidden={{true}}
-    @name={{@iconBefore}}
-    @plainIcon={{@plainIconBefore}}
-  />
-{{/if}}
-{{yield}}
-{{#if @iconAfter}}
-  <PixIcon
-    class="pix-button__icon pix-button__icon--after"
-    @name={{@iconAfter}}
-    @ariaHidden={{true}}
-    @plainIcon={{@plainIconAfter}}
-  />
-{{/if}}

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

@@ -1,32 +0,0 @@
-{{#if @route}}
-  <LinkTo
-    @route={{@route}}
-    @models={{if @model (array @model) this.defaultModel}}
-    @disabled={{@isDisabled}}
-    @query={{if @query @query this.defaultParams}}
-    class={{this.className}}
-    aria-disabled="{{@isDisabled}}"
-    ...attributes
-  >
-    <PixButtonContent
-      @iconBefore={{@iconBefore}}
-      @iconAfter={{@iconAfter}}
-      @plainIconAfter={{@plainIconAfter}}
-      @plainIconBefore={{@plainIconBefore}}
-    >
-      {{yield}}
-    </PixButtonContent>
-  </LinkTo>
-{{else}}
-  {{! template-lint-disable no-unsupported-role-attributes }}
-  <a href={{@href}} class={{this.className}} aria-disabled="{{@isDisabled}}" ...attributes>
-    <PixButtonContent
-      @iconBefore={{@iconBefore}}
-      @iconAfter={{@iconAfter}}
-      @plainIconAfter={{@plainIconAfter}}
-      @plainIconBefore={{@plainIconBefore}}
-    >
-      {{yield}}
-    </PixButtonContent>
-  </a>
-{{/if}}

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

@@ -1,10 +0,0 @@
-import PixButtonBase from './pix-button-base';
-
-export default class PixButtonLink extends PixButtonBase {
-  defaultModel = [];
-  defaultParams = {};
-
-  get className() {
-    return super.baseClassNames.join(' ');
-  }
-}

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

@@ -1,11 +0,0 @@
-<label for={{@id}} class={{this.className}} role="button">
-  {{yield}}
-</label>
-<input
-  id={{@id}}
-  type="file"
-  class="screen-reader-only"
-  value={{this.files}}
-  {{on "change" this.handleChange}}
-  ...attributes
-/>