@1024pix/pix-ui 58.4.2 → 58.4.4

package/addon/components/pix-gauge.gjs

@@ -0,0 +1,199 @@
+import { warn } from '@ember/debug';
+import Component from '@glimmer/component';
+import { eq } from 'ember-truth-helpers';
+
+export default class PixGauge extends Component {
+  get label() {
+    warn('PixGauge: @label must be defined', !this.args.label, {
+      id: 'pix-ui.gauge.label.not-defined',
+    });
+    return this.args.label;
+  }
+
+  get reachedLevel() {
+    warn(
+      'PixGauge: @reachedLevel must be between 0 and 8',
+      this.args.reachedLevel <= 8 || this.args.reachedLevel >= 0,
+      {
+        id: 'pix-ui.gauge.reachedLevel.not-defined',
+      },
+    );
+    return this.args.reachedLevel;
+  }
+
+  get maxLevel() {
+    warn(
+      'PixGauge: @maxLevel must be between 1 and 8',
+      this.args.maxLevel <= 8 || this.args.maxLevel >= 1,
+      {
+        id: 'pix-ui.gauge.maxLevel.not-defined',
+      },
+    );
+    return this.args.maxLevel;
+  }
+
+  get hideValues() {
+    return this.args.hideValues ?? false;
+  }
+
+  get maxLevelPourcentage() {
+    return this.maxLevel / 8;
+  }
+  get viewBox() {
+    if (this.args.isSmall) {
+      return '0 22 200 32';
+    }
+    return '0 0 100% 70';
+  }
+
+  get reachedLevelPercentage() {
+    return this.reachedLevel / 8;
+  }
+
+  get whiteAndPurpleGaugeRx() {
+    return this.args.isSmall ? 12 : 20;
+  }
+
+  get whiteAndPurpleGaugesHeight() {
+    return this.args.isSmall ? 24 : 40;
+  }
+
+  // background
+  get greyGaugeRx() {
+    return this.args.isSmall ? 16 : 24;
+  }
+
+  get backgroundHeight() {
+    return this.args.isSmall ? 32 : 48;
+  }
+
+  get statsFontHeight() {
+    return this.args.isSmall ? 18 : 26;
+  }
+
+  isLevelActive = (index) => {
+    if (this.reachedLevel === 0 && index === 0) return true;
+    const step = 8 / this.args.stepLabels.length;
+    return index * step < this.reachedLevel && this.reachedLevel <= (index + 1) * step;
+  };
+
+  stepLabelX = (index) => {
+    const stepStart = 1 / this.args.stepLabels.length;
+    return `${stepStart * index + (1 / 2) * stepStart}`;
+  };
+
+  stepLineX = (index) => {
+    const stepStart = 1 / this.args.stepLabels.length;
+    return `${stepStart * index}`;
+  };
+
+  formatNumber = (str) => {
+    const num = Number(str);
+    const oneDigitNum = num.toFixed(1);
+    if (oneDigitNum.toString().endsWith('0')) {
+      return Math.ceil(oneDigitNum);
+    }
+    return oneDigitNum;
+  };
+
+  <template>
+    <svg
+      xmlns:svg="http://www.w3.org/2000/svg"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox={{this.viewBox}}
+      version="1.1"
+      preserveAspectRatio="none"
+      class="result-level-gauge {{if @isSmall 'result-level-gauge__small'}}"
+      role="progressbar"
+      aria-valuenow={{this.formatNumber this.reachedLevel}}
+      aria-valuemin={{0}}
+      aria-valuemax={{this.formatNumber this.maxLevel}}
+      aria-valuetext={{this.label}}
+      aria-label={{this.label}}
+    >
+      <title {{this.label}}></title>
+
+      {{! gauge grey background}}
+      <rect
+        y={{22}}
+        width="100%"
+        height={{this.backgroundHeight}}
+        rx={{this.greyGaugeRx}}
+        class="result-level-gauge__background"
+      />
+
+      <g transform="translate(4, 0)">
+        {{! template-lint-disable no-inline-styles style-concatenation }}
+        {{! gauge white max level}}
+        <rect
+          y={{26}}
+          width="calc(calc(100% - 8px) * {{this.maxLevelPourcentage}})"
+          height={{this.whiteAndPurpleGaugesHeight}}
+          rx={{this.whiteAndPurpleGaugeRx}}
+          class="result-level-gauge__max-bar"
+        />
+        {{#unless this.hideValues}}
+          <g style="transform: translate(calc(calc(100% - 8px) * {{this.maxLevelPourcentage}}))">
+            <text
+              y={{this.statsFontHeight}}
+              x="0"
+              dx={{-10}}
+              dy={{26}}
+              class="result-level-gauge__max-value"
+              aria-hidden={{this.hideValues}}
+            >{{this.formatNumber @maxLevel}}</text>
+          </g>
+        {{/unless}}
+        {{! mean purple level }}
+        <rect
+          y={{26}}
+          width="max(calc(calc(100% - 8px) * {{this.reachedLevelPercentage}}), 44px)"
+          height={{this.whiteAndPurpleGaugesHeight}}
+          rx={{this.whiteAndPurpleGaugeRx}}
+          class="result-level-gauge__mean-bar"
+        />
+        {{#unless this.hideValues}}
+          <g
+            style="transform: translate(max(calc(calc(100% - 8px) * {{this.reachedLevelPercentage}}), 44px))"
+          >
+            <text
+              y={{this.statsFontHeight}}
+              x="0"
+              dx={{-10}}
+              dy={{26}}
+              class="result-level-gauge__mean-value"
+              aria-hidden={{this.hideValues}}
+            >{{this.formatNumber @reachedLevel}}</text>
+          </g>
+        {{/unless}}
+        {{! level labels }}
+        {{#unless @isSmall}}
+          {{#each @stepLabels as |stepLabel index|}}
+            <g style="transform: translate(calc(calc(100% - 8px) * {{this.stepLabelX index}}))">
+              <text
+                y={{15}}
+                class="result-level-gauge__rank
+                  {{if (this.isLevelActive index) 'result-level-gauge__rank--active'}}"
+              >{{stepLabel}}</text>
+            </g>
+            {{#unless (eq index 0)}}
+              <g style="transform: translate(calc(100% * {{this.stepLineX index}}))">
+                <line
+                  x1="0"
+                  y1={{7}}
+                  x2="0"
+                  y2="74.6641"
+                  stroke-width={{2}}
+                  stroke-linecap="round"
+                  stroke-dasharray="2 8"
+                  class="result-level-gauge__separator"
+                  role="separator"
+                />
+              </g>
+            {{/unless}}
+          {{/each}}
+        {{/unless}}
+      </g>
+    </svg>
+  </template>
+}

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

@@ -1,7 +1,10 @@
 import { warn } from '@ember/debug';
+import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
 
+import PixIcon from './pix-icon';
+
 export default class PixIconButton extends Component {
   text = 'pix-icon-button';
 
@@ -45,4 +48,22 @@ export default class PixIconButton extends Component {
       this.args.triggerAction(params);
     }
   }
+
+  <template>
+    <button
+      type="button"
+      class="pix-icon-button pix-icon-button--{{this.size}}"
+      {{on "click" this.triggerAction}}
+      aria-disabled="{{this.isDisabled}}"
+      ...attributes
+    >
+      <span class="screen-reader-only">{{this.ariaLabel}}</span>
+      <PixIcon
+        class="pix-icon-button__icon pix-icon-button__icon--{{this.size}}"
+        @ariaHidden={{true}}
+        @name={{@iconName}}
+        @plainIcon={{@plainIcon}}
+      />
+    </button>
+  </template>
 }

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

@@ -1,5 +1,6 @@
 import { ICONS } from '@1024pix/pix-ui/helpers/icons';
 import { warn } from '@ember/debug';
+import { uniqueId } from '@ember/helper';
 import Component from '@glimmer/component';
 
 export default class PixIcon extends Component {
@@ -45,4 +46,22 @@ export default class PixIcon extends Component {
 
     return this.args.plainIcon && Boolean(icon.plainIcon) ? icon.plainIcon : icon.default;
   }
+
+  <template>
+    {{#let (uniqueId) as |titleId|}}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden={{this.ariaHidden}}
+        role="img"
+        class="pix-icon"
+        aria-describedby={{if this.title titleId}}
+        ...attributes
+      >
+        {{#if this.title}}
+          <title id={{titleId}}>{{this.title}}</title>
+        {{/if}}
+        <use href="/@1024pix/pix-ui/svg/pix-sprite.svg#{{this.iconName}}" />
+      </svg>
+    {{/let}}
+  </template>
 }

package/addon/components/pix-indicator-card.gjs

@@ -0,0 +1,68 @@
+import { guidFor } from '@ember/object/internals';
+import Component from '@glimmer/component';
+
+import PixBlock from './pix-block';
+import PixIcon from './pix-icon';
+import PixTooltip from './pix-tooltip';
+
+export default class PixIndicatorCard extends Component {
+  id = guidFor(this);
+  iconId = 'icon-' + this.id;
+  tooltipId = 'tooltip-' + this.id;
+
+  get color() {
+    const { color } = this.args;
+    if (!color) return `indicator-card__icon-wrapper--grey`;
+    return `indicator-card__icon-wrapper--${color}`;
+  }
+
+  <template>
+    <PixBlock @variant="orga" class="indicator-card" role="region" ...attributes>
+      {{#if @isLoading}}
+        <p class="screen-reader-only">{{@loadingMessage}}</p>
+        <div class="indicator-card__icon" aria-hidden="true"></div>
+        <div class="indicator-card__content" aria-hidden="true"></div>
+      {{else}}
+        <div id={{this.iconId}} class="indicator-card__icon-wrapper {{this.color}}">
+          <PixIcon
+            @name={{@iconName}}
+            @plainIcon={{@plainIcon}}
+            @ariaHidden={{true}}
+            class="indicator-card__icon"
+          />
+        </div>
+        <dl class="indicator-card__content">
+          <div class="indicator-card__title">
+            <dt>{{@title}}</dt>
+            {{#if @info}}
+              <PixTooltip
+                @id={{this.tooltipId}}
+                @position="top"
+                @isWide={{true}}
+                class="indicator-card__tooltip hide-on-mobile"
+              >
+                <:triggerElement>
+                  <PixIcon
+                    @name="info"
+                    @plainIcon={{true}}
+                    class="indicator-card__tooltip-icon"
+                    tabindex="0"
+                    aria-label={{@infoLabel}}
+                    aria-describedby={{this.tooltipId}}
+                  />
+                </:triggerElement>
+                <:tooltip>
+                  {{@info}}
+                </:tooltip>
+              </PixTooltip>
+            {{/if}}
+          </div>
+          <dd class="indicator-card__value">{{yield}}</dd>
+          <p class="indicator-card__sub">
+            {{yield to="sub"}}
+          </p>
+        </dl>
+      {{/if}}
+    </PixBlock>
+  </template>
+}

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

@@ -1,3 +1,5 @@
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
 
@@ -131,6 +133,33 @@ export default class PixInputCode extends Component {
     const element = document.getElementById(`code-input-${index}`);
     element && element.select();
   }
+
+  <template>
+    <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>
+        <legend>{{this.legend}}</legend>
+        {{#each this.numberOfIterations as |i|}}
+          <input
+            id="code-input-{{i}}"
+            type="{{this.inputType}}"
+            aria-label="{{this.ariaLabel}} {{i}}"
+            class="pix-input-code__input"
+            min="1"
+            max="9"
+            autocomplete="off"
+            placeholder="{{this.placeholder}}"
+            {{on "keydown" this.handleArrowUpOrDown}}
+            {{on "keyup" (fn this.handleKeyUp i)}}
+            {{on "input" (fn this.handleCodeInput i)}}
+            {{on "paste" (fn this.handlePaste i)}}
+            {{on "focus" (fn this.handleFocus i)}}
+            ...attributes
+          />
+        {{/each}}
+      </fieldset>
+    </div>
+  </template>
 }
 
 function _extractValidCharacters(pastedText) {

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

@@ -0,0 +1,102 @@
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+import PixIcon from './pix-icon';
+import PixIconButton from './pix-icon-button';
+import PixInputBase from './pix-input-base';
+import PixLabel from './pix-label';
+
+export default class PixInputPassword extends PixInputBase {
+  constructor() {
+    super(...arguments);
+
+    this.prefix = 'pix-input-password';
+    this.inputValidationError = {
+      default: '',
+      error: 'pix-input-password__container--error',
+      success: 'pix-input-password__container--success',
+    };
+  }
+
+  @tracked isPasswordVisible = false;
+
+  @action
+  togglePasswordVisibility() {
+    this.isPasswordVisible = !this.isPasswordVisible;
+    const InputElement = document.getElementById(this.args.id);
+    if (InputElement) {
+      InputElement.focus();
+    }
+  }
+
+  <template>
+    <div class="pix-input-password {{if @inlineLabel ' pix-input-password--inline'}}">
+      <PixLabel
+        @for={{this.id}}
+        @requiredLabel={{@requiredLabel}}
+        @size={{@size}}
+        @subLabel={{@subLabel}}
+        @screenReaderOnly={{@screenReaderOnly}}
+        @inlineLabel={{@inlineLabel}}
+      >
+        {{yield to="label"}}
+      </PixLabel>
+      <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}}
+
+          <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"
+            @iconName={{if this.isPasswordVisible "eye" "eyeOff"}}
+            @plainIcon={{true}}
+            @ariaLabel={{if
+              this.isPasswordVisible
+              "Masquer le mot de passe"
+              "Afficher le mot de passe"
+            }}
+            @triggerAction={{this.togglePasswordVisibility}}
+            @size="small"
+          />
+
+          {{#if this.hasError}}
+            <PixIcon
+              @name="close"
+              @ariaHidden={{true}}
+              class="pix-input-password__icon pix-input-password__error-icon"
+            />
+          {{/if}}
+          {{#if this.hasSuccess}}
+            <PixIcon
+              @name="check"
+              @ariaHidden={{true}}
+              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>
+    </div>
+  </template>
+}

package/addon/components/pix-input.gjs

@@ -0,0 +1,57 @@
+import PixIcon from './pix-icon';
+import PixInputBase from './pix-input-base';
+import PixLabel from './pix-label';
+
+export default class PixInput extends PixInputBase {
+  constructor() {
+    super(...arguments);
+
+    this.prefix = 'pix-input';
+    this.inputValidationError = {
+      default: '',
+      error: 'pix-input__input--error',
+      success: 'pix-input__input--success',
+    };
+  }
+
+  <template>
+    <div class={{this.rootClassNames}}>
+      {{#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-input__field-container">
+        <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
+          />
+
+          {{#if this.hasError}}
+            <PixIcon @name="close" class="pix-input__error-icon" @ariaHidden={{true}} />
+          {{/if}}
+          {{#if this.hasSuccess}}
+            <PixIcon @name="check" class="pix-input__success-icon" @ariaHidden={{true}} />
+          {{/if}}
+        </div>
+
+        {{#if this.hasErrorMessage}}
+          <p id={{this.ariaDescribedBy}} class="pix-input__error-message">{{@errorMessage}}</p>
+        {{/if}}
+      </div>
+    </div>
+  </template>
+}

package/addon/components/pix-label-wrapped.gjs

@@ -0,0 +1,64 @@
+import Component from '@glimmer/component';
+
+import PixIcon from './pix-icon';
+
+export default class PixLabelWrapped extends Component {
+  get className() {
+    const classes = ['pix-label', 'pix-label-wrapped'];
+
+    if (this.args.inlineLabel) classes.push('pix-label--inline-label');
+    if (this.args.isDisabled) classes.push('pix-label-wrapped--disabled');
+    if (this.args.variant === 'tile') classes.push('pix-label-wrapped--variant-tile');
+    if (this.args.state === 'success') classes.push('pix-label-wrapped--state-success');
+    if (this.args.state === 'error') classes.push('pix-label-wrapped--state-error');
+
+    const size = ['small', 'large'].includes(this.args.size) ? this.args.size : 'default';
+
+    classes.push(`pix-label--${size}`);
+
+    return classes.join(' ');
+  }
+
+  get hasError() {
+    return this.args.state === 'error';
+  }
+
+  get hasSuccess() {
+    return this.args.state === 'success';
+  }
+
+  <template>
+    <label for={{@for}} class={{this.className}} ...attributes>
+      {{#if this.hasError}}
+        <PixIcon
+          @name="cancel"
+          @plainIcon={{true}}
+          @ariaHidden={{true}}
+          class="pix-label-wrapped__state-icon"
+        />
+      {{/if}}
+      {{#if this.hasSuccess}}
+        <PixIcon
+          @name="checkCircle"
+          @plainIcon={{true}}
+          @ariaHidden={{true}}
+          class="pix-label-wrapped__state-icon"
+        />
+      {{/if}}
+
+      {{yield to="inputElement"}}
+
+      <span class="{{if @screenReaderOnly 'screen-reader-only'}}">
+        {{yield}}
+
+        {{#if @requiredLabel}}
+          <abbr title={{@requiredLabel}} class="mandatory-mark">*</abbr>
+        {{/if}}
+
+        {{#if @subLabel}}
+          <span class="pix-label__sub-label">{{@subLabel}}</span>
+        {{/if}}
+      </span>
+    </label>
+  </template>
+}

package/addon/components/pix-modal.gjs

@@ -0,0 +1,55 @@
+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 PixModal extends Component {
+  constructor(...args) {
+    super(...args);
+
+    if (!this.args.title) {
+      throw new Error('ERROR in PixModal component: @title argument is required.');
+    }
+  }
+
+  get id() {
+    return guidFor(this);
+  }
+
+  <template>
+    <PixOverlay
+      @isVisible={{@showModal}}
+      @onClose={{@onCloseButtonClick}}
+      @focusOnClose={{@focusOnClose}}
+      @hasCenteredContent={{true}}
+    >
+      <div
+        class="pix-modal"
+        role="dialog"
+        aria-labelledby="modal-title--{{this.id}}"
+        aria-describedby="modal-content--{{this.id}}"
+        aria-modal="true"
+        ...attributes
+      >
+        <div class="pix-modal__header">
+          <h1 id="modal-title--{{this.id}}" class="pix-modal__title">{{@title}}</h1>
+          <PixIconButton
+            @iconName="close"
+            @triggerAction={{@onCloseButtonClick}}
+            @ariaLabel="Fermer"
+            @size="small"
+            @withBackground={{true}}
+            class="pix-modal__close-button"
+          />
+        </div>
+        <div id="modal-content--{{this.id}}" class="pix-modal__content">
+          {{yield to="content"}}
+        </div>
+        <div class="pix-modal__footer">
+          {{yield to="footer"}}
+        </div>
+      </div>
+    </PixOverlay>
+  </template>
+}

package/addon/components/pix-navigation-separator.gjs

@@ -0,0 +1 @@
+<template><hr class="pix-navigation-separator" /></template>