@1024pix/pix-ui 13.1.0 → 13.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Pix-UI Changelog
 
+## v13.2.0 (17/02/2022)
+
+
+### :rocket: Enhancement
+- [#193](https://github.com/1024pix/pix-ui/pull/193) [FEATURE] Ajouter le composant dropdown (PIX-4295).
+
 ## v13.1.0 (16/02/2022)
 
 

package/addon/components/pix-dropdown.hbs

@@ -0,0 +1,85 @@
+<div class="pix-dropdown">
+  {{#if this.label}}
+    <label id={{@id}} class="pix-dropdown__label">{{this.label}}</label>
+  {{/if}}
+  <div class="pix-dropdown__controller">
+    <button
+      type="button"
+      class="pix-dropdown__controller--placeholder{{if this.isExpanded ' expanded'}}"
+      aria-label={{if this.isExpanded @collapseLabel @expandLabel}}
+      {{on "click" this.toggleDropdown}}
+      {{on "keyup" this.navigateThroughOptions}}
+    >
+      <p
+        title={{this.placeholder}}
+        class="pix-dropdown__controller--placeholder-text{{unless
+            this.hasSelectedOption
+            ' default'
+          }}"
+      >{{this.placeholder}}</p>
+    </button>
+    {{#if this.hasSelectedOption}}
+      <button
+        type="button"
+        class="pix-dropdown__controller--clear"
+        {{on "click" this.clearSelection}}
+        aria-label={{@clearLabel}}
+      >
+        <FaIcon @icon="times" />
+      </button>
+    {{/if}}
+    <FaIcon
+      class="pix-dropdown__controller--chevron"
+      @icon={{if this.isExpanded "chevron-up" "chevron-down"}}
+    />
+  </div>
+  <div
+    role="listbox"
+    id={{this.menuId}}
+    tabindex="-1"
+    class="pix-dropdown__menu{{if this.isExpanded ' expanded'}}"
+    aria-labelledby={{if this.label @id}}
+    aria-label={{unless this.label @placeholder}}
+    aria-hidden={{if this.isExpanded "false" "true"}}
+    aria-activedescendant={{if this.selectedOption this.selectedOption.value}}
+    {{on "keyup" this.navigateThroughOptions}}
+    {{on "scroll" this.incrementPage}}
+  >
+    {{#if @isSearchable}}
+      <div class="pix-dropdown__menu--search">
+        <FaIcon class="pix-dropdown__menu--search-icon" @icon="search" />
+        <label
+          class="pix-dropdown__menu--search-input-label"
+          for={{this.searchInputId}}
+        >{{@searchPlaceholder}}</label>
+        <input
+          class="pix-dropdown__menu--search-input"
+          id={{this.searchInputId}}
+          autocomplete="off"
+          tabindex={{unless this.isExpanded "-1"}}
+          placeholder={{@searchPlaceholder}}
+          {{on "input" this.filterOptions}}
+        />
+      </div>
+    {{/if}}
+    {{#each this.options as |opt index|}}
+      {{#if (lt index this.showLimit)}}
+        <div
+          role="option"
+          id={{opt.value}}
+          tabindex="-1"
+          class="pix-dropdown__menu--option{{if
+              (eq this.selectedOption.value opt.value)
+              ' selected'
+            }}"
+          aria-selected={{if (eq this.selectedOption.value opt.value) "true"}}
+          {{on "click" (fn this.selectOption opt)}}
+          {{on "mouseover" this.resetPreviouslyFocused}}
+          {{on "keypress" (fn this.onOptionKeyPress opt)}}
+        >
+          {{opt.label}}
+        </div>
+      {{/if}}
+    {{/each}}
+  </div>
+</div>

package/addon/components/pix-dropdown.js

@@ -0,0 +1,181 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class PixDropdown extends Component {
+  defaultId = Math.floor(Math.random() * 100);
+  focusedOption = null;
+  focusedIndex = null;
+  @tracked page = 1;
+  @tracked selectedOption = null;
+  @tracked isExpanded = false;
+  @tracked options = this.args.options;
+  @tracked menuId = `menu-${this.defaultId}`;
+  @tracked searchInputId = `search-input-${this.defaultId}`;
+
+  constructor() {
+    super(...arguments);
+
+    if (!this.args.label && !this.args.placeholder) {
+      throw new Error(
+        'ERROR in PixDropdown component, you need to provide a label and/or a placeholder'
+      );
+    }
+
+    if (this.args.selectedOption) {
+      this.selectedOption = this.args.options.find(
+        ({ value }) => value === this.args.selectedOption
+      );
+    }
+  }
+
+  get hasSelectedOption() {
+    return !!this.selectedOption;
+  }
+
+  get placeholder() {
+    return this.selectedOption?.label || this.args.placeholder;
+  }
+
+  get label() {
+    const labelIsDefined = this.args.label?.trim();
+    const idIsNotDefined = !this.args.id?.trim();
+
+    if (labelIsDefined && idIsNotDefined) {
+      throw new Error('ERROR in PixDropdown component, @id param is necessary when giving @label');
+    }
+    return this.args.label || null;
+  }
+
+  get showLimit() {
+    if (!this.args.pageSize) return this.options.length;
+
+    const numberOfOptionsAccordingToPage = this.args.pageSize * this.page;
+    return Math.min(this.options.length, numberOfOptionsAccordingToPage);
+  }
+
+  @action
+  resetPreviouslyFocused() {
+    if (!this.focusedOption) return;
+
+    const previouslyFocusedElement = document.getElementById(this.focusedOption.value);
+    previouslyFocusedElement?.blur();
+    this.focusedOption = undefined;
+    this.focusedIndex = undefined;
+  }
+
+  _navigateToOption(option, index) {
+    if (!option) return;
+
+    this.resetPreviouslyFocused();
+    this.focusedOption = option;
+    this.focusedIndex = index;
+    const focusedElement = document.getElementById(option.value);
+    focusedElement?.scrollIntoView({ block: 'nearest' });
+    focusedElement?.focus();
+  }
+
+  _computeNextIndex(isArrowDown, index) {
+    const length = this.showLimit;
+    let nextIndex;
+    if (index === undefined || index === null) {
+      nextIndex = isArrowDown ? 0 : length - 1;
+    } else {
+      const delta = isArrowDown ? 1 : -1;
+      nextIndex = index + delta;
+    }
+    // navigate through array in a circle
+    // (i.e. go back to first after last or last after first)
+    return ((nextIndex % length) + length) % length;
+  }
+
+  @action
+  navigateThroughOptions(event) {
+    const isArrowDown = event.code === 'ArrowDown';
+    if (event.code !== 'ArrowUp' && !isArrowDown) return;
+    const nextIndex = this._computeNextIndex(isArrowDown, this.focusedIndex);
+    this._navigateToOption(this.options[nextIndex], nextIndex);
+  }
+
+  @action
+  toggleDropdown() {
+    this.isExpanded = !this.isExpanded;
+
+    if (this.isExpanded) {
+      this.resetPreviouslyFocused();
+      const searchInput = document.getElementById(this.searchInputId);
+      if (searchInput) {
+        searchInput.focus();
+      } else {
+        this._navigateToOption(this.options[0], 0);
+      }
+    }
+
+    const menu = document.getElementById(this.menuId);
+    menu.scrollTop = 0;
+    this.page = 1;
+  }
+
+  @action
+  selectOption(option) {
+    if (this.selectedOption?.value !== option.value) {
+      this.args.onSelect?.(option.value);
+      this.selectedOption = option;
+    }
+    this.isExpanded = false;
+
+    const searchInput = document.getElementById(this.searchInputId);
+    if (searchInput) {
+      searchInput.value = '';
+      this.options = this.args.options;
+    }
+  }
+
+  @action
+  onOptionKeyPress(option, event) {
+    if (event.code === 'Enter' || event.code === 'Space') this.selectOption(option);
+  }
+
+  @action
+  clearSelection(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    this.selectedOption = null;
+    this._navigateToOption(this.options[0], 0);
+    this.args.onSelect?.();
+  }
+
+  @action
+  onClearKeyPress(event) {
+    if (event.code === 'Enter' || event.code === 'Space') this.clearSelection(event);
+  }
+
+  @action
+  filterOptions(event) {
+    this.resetPreviouslyFocused();
+    const filterValue = event.target?.value.toLowerCase();
+    this.page = 1;
+    this.options = filterValue
+      ? this.args.options.filter(({ label }) => label.toLowerCase().includes(filterValue))
+      : this.args.options;
+  }
+
+  _isLastOptionVisible(option) {
+    const lastVisibleOption = document.getElementById(option.value);
+    const menu = document.getElementById(this.menuId);
+
+    const { bottom, height, top } = lastVisibleOption.getBoundingClientRect();
+    const menuRect = menu.getBoundingClientRect();
+
+    return top <= menuRect.top ? menuRect.top - top <= height : bottom - menuRect.bottom <= height;
+  }
+
+  @action
+  incrementPage() {
+    if (!this.args.pageSize) return;
+
+    if (this._isLastOptionVisible(this.options[this.showLimit - 1])) {
+      this.page += 1;
+    }
+  }
+}

package/addon/styles/_pix-dropdown.scss

@@ -0,0 +1,149 @@
+.pix-dropdown {
+  @import 'reset-css';
+  width: 100%;
+  position: relative;
+
+  button {
+    background: transparent;
+    margin: 0;
+    text-align: left;
+    cursor: pointer;
+  }
+
+  &__label {
+    @include label();
+  }
+
+  &__controller {
+    width: 100%;
+    position: relative;
+
+    &--placeholder {
+      @include hoverFormElement();
+      @include focusFormElement();
+      width: 100%;
+      min-width: 250px;
+      min-height: 34px;
+      border: 1px solid $grey-40;
+      border-radius: $spacing-xxs;
+      padding: 0;
+      background: white;
+
+      &.expanded {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+
+    &--placeholder-text {
+      margin: 0;
+      font-size: 0.875rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      padding: 8px 68px 8px 16px;
+
+      &.default {
+        color: $grey-60;
+        padding-right: 36px;
+      }
+    }
+
+    &--clear {
+      font-size: 1rem;
+      color: $grey-50;
+      position: absolute;
+      padding: 8px 8px 6px;
+      border: none;
+      border-right: 2px solid $grey-40;
+      right: 38px;
+      top: 1px;
+      width: fit-content;
+
+      &:hover {
+        color: $grey-70;
+      }
+    }
+
+    &--chevron {
+      position: absolute;
+      z-index: -1;
+      top: 9px;
+      right: 12px;
+      color: $grey-50;
+    }
+  }
+
+  &__menu {
+    background: white;
+    position: absolute;
+    top: 100%;
+    width: 100%;
+    max-height: 0;
+    transition: max-height ease-in 0.5s;
+    overflow: hidden;
+    overflow-y: auto;
+    z-index: 1;
+
+    &.expanded {
+      max-height: 300px;
+      border: 1px solid $grey-40;
+      border-top: none;
+      border-radius: 0 0 $spacing-xxs $spacing-xxs;
+    }
+
+    &--search {
+      display: flex;
+      position: relative;
+
+      &-icon {
+        color: $grey-30;
+        margin: 4px;
+        position: absolute;
+        left: 16px;
+        top: 12px;
+      }
+
+      &-input {
+        border: none;
+        border-bottom: 1px solid $grey-40;
+        font-size: 0.875rem;
+        flex-grow: 1;
+        margin: 12px 12px 8px;
+        padding: 4px 4px 4px 32px;
+        outline: none;
+
+        &:hover {
+          box-shadow: inset 0 -0.7px 0 0 $grey-40;
+        }
+
+        &:focus {
+          box-shadow: inset 0 -0.7px 0 0 $blue;
+          border-color: $blue;
+        }
+
+        &-label {
+          height: 0;
+          width: 0;
+          overflow: hidden;
+        }
+      }
+    }
+
+    &--option {
+      padding: 8px 12px;
+      font-size: 0.875rem;
+      cursor: pointer;
+
+      &.selected {
+        color: $grey-70;
+      }
+
+      &:focus,
+      &:hover {
+        outline: none;
+        background: $grey-15;
+      }
+    }
+  }
+}

package/addon/styles/addon.scss

@@ -28,6 +28,7 @@
 @import 'pix-modal';
 @import 'pix-input-code';
 @import 'pix-selectable-tag';
+@import 'pix-dropdown';
 
 html {
   font-size: 16px;

package/app/components/pix-dropdown.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-dropdown';

package/app/stories/form.stories.js

@@ -33,6 +33,19 @@ export const form = (args) => {
       />
       <br>
 
+      <PixDropdown
+        @id="form__searchable-pix-dropdown"
+        @options={{selectOptions}}
+        @placeholder="Choisir votre fruit"
+        @isSearchable={{true}}
+        @searchPlaceholder="Rechercher"
+        @label="Votre fruit préféré est : "
+        @clearLabel="Supprimer la sélection"
+        @expandLabel="Ouvrir la liste"
+        @collapseLabel="Réduire la liste"
+      />
+      <br>
+
       <PixTextarea
         @id="form__pix-textarea"
         @value=""

package/app/stories/pix-dropdown.stories.js

@@ -0,0 +1,180 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+export const Template = (args) => {
+  return {
+    template: hbs`
+      <div style="width: 300px;">
+        <PixDropdown
+          @id={{id}}
+          @options={{options}}
+          @onSelect={{onSelect}}
+          @placeholder={{placeholder}}
+          @selectedOption={{selectedOption}}
+          @isSearchable={{isSearchable}}
+          @searchPlaceholder={{searchPlaceholder}}
+          @label={{label}}
+          @clearLabel={{clearLabel}}
+          @expandLabel={{expandLabel}}
+          @collapseLabel={{collapseLabel}}
+          @pageSize={{pageSize}}
+        />
+      </div>
+    `,
+    context: args,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  options: [
+    { value: '1', label: 'Figues' },
+    { value: '2', label: 'Bananes' },
+    { value: '3', label: 'Noix' },
+    { value: '4', label: 'Papayes' },
+    { value: '5', label: 'Fèves de chocolat' },
+    { value: '6', label: 'Dattes' },
+    { value: '7', label: 'Mangues' },
+    { value: '8', label: 'Jujube' },
+    { value: '9', label: 'Avocat' },
+    { value: '10', label: 'Fraises' },
+    { value: '11', label: 'Kaki' },
+    { value: '12', label: 'Asiminier trilobé oblong vert (à ne pas confondre avec la papaye)' },
+  ],
+  placeholder: 'Choisissez une option',
+  onSelect: action('onSelect'),
+  id: 'default-dropdown',
+  clearLabel: 'Supprimer la sélection',
+  expandLabel: 'Ouvrir la liste',
+  collapseLabel: 'Réduire la liste',
+};
+
+export const withLabel = Template.bind({});
+withLabel.args = {
+  ...Default.args,
+  id: 'dropdown-with-label',
+  label: 'Ton fruit préféré: ',
+};
+
+export const searchableDropdown = Template.bind({});
+searchableDropdown.args = {
+  ...Default.args,
+  isSearchable: true,
+  id: 'searchable-dropdown',
+  placeholder: 'Fraises, Mangues...',
+  searchPlaceholder: 'Rechercher',
+};
+
+export const paginatedDropdown = Template.bind({});
+paginatedDropdown.args = {
+  ...Default.args,
+  id: 'paginated-dropdown',
+  placeholder: 'Quel est ton fruit préféré ?',
+  pageSize: 10,
+  isSearchable: true,
+  searchPlaceholder: 'Rechercher',
+  options: Array.from({ length: 100 }, (_, index) => ({
+    value: `${index}`,
+    label: `${index}abc`,
+  })),
+};
+
+export const argTypes = {
+  options: {
+    name: 'options',
+    description:
+      'Les options sont représentées par un tableau d‘objet contenant les propriétés ``value`` et ``label``.',
+    type: { name: 'array', required: true },
+  },
+  selectedOption: {
+    name: 'selectedOption',
+    description: 'Option sélectionnée',
+    options: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
+    control: { type: 'select' },
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  onSelect: {
+    name: 'onSelect',
+    description: 'Fonction à appeler quand une option est sélectionnée.',
+    type: { required: true },
+    control: { disable: true },
+  },
+  isSearchable: {
+    name: 'isSearchable',
+    description:
+      "Rend le champ cherchable, le paramètre @searchPlaceholder devient requis pour l'accessibilité.",
+    control: { type: 'boolean' },
+    type: { name: 'boolean', required: false },
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  searchPlaceholder: {
+    name: 'searchPlaceholder',
+    description: 'Placeholder du champ de recherche. Requis si le menu est cherchable.',
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  placeholder: {
+    name: 'placeholder',
+    description: "Un texte donnant une indication a l'utilisateur sur le choix des options.",
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  label: {
+    name: 'label',
+    description: 'Label du menu déroulant, le paramètre @id devient obligatoire avec ce paramètre.',
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  id: {
+    name: 'id',
+    description: "L'id du label",
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  pageSize: {
+    name: 'pageSize',
+    description: "Le nombre d'élément à afficher dans la liste.",
+    type: { name: 'number', required: false },
+    table: {
+      type: { summary: 'number' },
+    },
+  },
+  clearLabel: {
+    name: 'clearLabel',
+    description: "Label de l'icône pour éliminer la sélection. Requis pour l'accessibilité.",
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  expandLabel: {
+    name: 'expandLabel',
+    description: "Label de l'icône pour ouvrir le menu déroulant. Requis pour l'accessibilité.",
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  collapseLabel: {
+    name: 'collapseLabel',
+    description: "Label de l'icône pour réduire le menu déroulant. Requis pour l'accessibilité.",
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+};

package/app/stories/pix-dropdown.stories.mdx

@@ -0,0 +1,69 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+
+import * as stories from './pix-dropdown.stories.js';
+
+<Meta
+  title='Form/Dropdown'
+  component='PixDropdown'
+  argTypes={stories.argTypes}
+/>
+
+# Pix Dropdown
+
+Affiche un menu déroulant avec la liste des options fournies.
+
+Les options sont représentées par un tableau d'objet contenant les propriétés value et label.
+
+> **⚠️** __Il est nécessaire d'avoir au moins un label ou un placeholder !__
+
+> **⚠️** __N'oubliez pas de rajouter un searchLabel dans le cas ou le menu déroulant est cherchable pour le rendre accessible !__
+
+> Pour aider l'utilisateur, rajoutez un placeholder cohérent !
+
+## Default
+
+<Canvas>
+  <Story name='Dropdown' story={stories.Default} height={200} />
+</Canvas>
+
+## With label
+
+<Canvas>
+  <Story story={stories.withLabel} height={200} />
+</Canvas>
+
+## Searchable
+
+<Canvas>
+  <Story name="Searchable" story={stories.searchableDropdown} height={200} />
+</Canvas>
+
+## Infinite scroll
+
+<Canvas>
+  <Story name="Paginated" story={stories.paginatedDropdown} height={200} />
+</Canvas>
+
+## Usage
+
+```html
+<PixDropdown
+  @id={{id}}
+  @options={{options}}
+  @onSelect={{onSelect}}
+  @selectedOption="1"
+  @isSearchable={{false}}
+  @placeholder="Choisissez une option"
+  @searchPlaceholder="Rechercher"
+  @label="Mon menu déroulant"
+  @clearLabel="Supprimer la sélection"
+  @expandLabel="Ouvrir le menu déroulant"
+  @collapseLabel="Réduire le menu déroulant"
+  @pageSize={{10}}
+/>
+```
+
+## Arguments
+
+<ArgsTable story="Dropdown" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "13.1.0",
+  "version": "13.2.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -50,8 +50,9 @@
     "ember-truth-helpers": "^3.0.0"
   },
   "devDependencies": {
+    "@1024pix/ember-testing-library": "^0.5.0",
     "@ember/optional-features": "^2.0.0",
-    "@ember/test-helpers": "^2.4.0",
+    "@ember/test-helpers": "^2.6.0",
     "@fortawesome/ember-fontawesome": "^0.2.3",
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",