@1024pix/pix-ui 40.0.0 → 41.0.0

package/addon/styles/addon.scss

@@ -26,7 +26,6 @@
 @import 'pix-sidebar';
 @import 'pix-input-code';
 @import 'pix-selectable-tag';
-@import 'pix-dropdown';
 @import 'pix-pagination';
 @import 'pix-checkbox';
 @import 'pix-toggle';
@@ -35,4 +34,4 @@
 @import 'pix-search-input';
 
 // at the end so it can override it's children scss
-@import 'pix-filterable-and-searchable-select';
+@import 'pix-filterable-and-searchable-select';

package/app/stories/form.stories.js

@@ -57,19 +57,6 @@ export const form = (args) => {
   />
   <br />
 
-  <PixDropdown
-    @id='form__searchable-pix-dropdown'
-    @options={{this.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "40.0.0",
+  "version": "41.0.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -8,7 +8,7 @@
   "license": "MIT",
   "author": "GIP Pix",
   "engines": {
-    "node": "^16.17 || ^18"
+    "node": "^20"
   },
   "ember": {
     "edition": "octane"
@@ -44,7 +44,7 @@
     "test": "ember test",
     "test:ember": "ember test",
     "test:ember-compatibility": "ember try:each",
-    "chromatic": "npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN"
+    "chromatic": "npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --only-changed"
   },
   "dependencies": {
     "@formatjs/intl": "^2.5.1",
@@ -99,7 +99,7 @@
     "ember-export-application-global": "^2.0.1",
     "ember-load-initializers": "^2.1.2",
     "ember-page-title": "^8.0.0",
-    "ember-qunit": "^7.0.0",
+    "ember-qunit": "^8.0.0",
     "ember-resolver": "^11.0.0",
     "ember-sinon": "^5.0.0",
     "ember-source": "^4.0.1",
@@ -125,7 +125,7 @@
     "storybook": "^7.1.0",
     "stylelint": "^15.0.0",
     "stylelint-config-rational-order": "^0.1.2",
-    "stylelint-config-standard-scss": "^10.0.0",
+    "stylelint-config-standard-scss": "^11.0.0",
     "webpack": "^5.75.0"
   },
   "bugs": {

package/addon/components/pix-dropdown.hbs

@@ -1,101 +0,0 @@
-<div class="pix-dropdown">
-
-  {{#if this.label}}
-    <label id={{@id}} class="pix-dropdown__label">
-      {{#if @requiredLabel}}
-        <abbr title={{@requiredLabel}} class="mandatory-mark" aria-hidden="true">*</abbr>
-      {{/if}}
-      {{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}}
-      ...attributes
-    >
-      <p
-        title={{this.placeholder}}
-        class="pix-dropdown__controller--placeholder-text
-          {{unless this.hasSelectedOption ' default'}}"
-        aria-required={{if this.requiredLabel true false}}
-      >{{this.placeholder}}</p>
-    </button>
-
-    {{#if this.hasSelectedOption}}
-      <button
-        type="button"
-        class="pix-dropdown__controller--clear"
-        aria-label={{@clearLabel}}
-        {{on "click" this.clearSelection}}
-      >
-        <FaIcon @icon="xmark" />
-      </button>
-    {{/if}}
-
-    <button
-      type="button"
-      tabindex="-1"
-      class="pix-dropdown__controller--chevron"
-      {{on "click" this.toggleDropdown}}
-    >
-      <FaIcon @icon={{if this.isExpanded "chevron-up" "chevron-down"}} />
-    </button>
-  </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"}}
-    {{on "keyup" this.navigateThroughOptions}}
-    {{on "scroll" this.incrementPage}}
-  >
-
-    {{#if @isSearchable}}
-      <div class="pix-dropdown__menu--search">
-        <FaIcon class="pix-dropdown__menu--search-icon" @icon="magnifying-glass" />
-        <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

@@ -1,181 +0,0 @@
-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

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

package/app/components/pix-dropdown.js

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

package/app/stories/pix-dropdown.mdx

@@ -1,57 +0,0 @@
-import { Meta, Story, ArgTypes } from '@storybook/blocks';
-import * as ComponentStories from './pix-dropdown.stories';
-
-<Meta of={ComponentStories} />
-
-# 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
-
-<Story of={ComponentStories.Default} height={200} />
-
-## With label
-
-<Story of={ComponentStories.withLabel} height={200} />
-
-## Searchable
-
-<Story of={ComponentStories.searchableDropdown} height={200} />
-
-
-## Infinite scroll
-
-<Story of={ComponentStories.paginatedDropdown} height={200} />
-
-## Usage
-
-```html
-<PixDropdown
-  @id="{{id}}"
-  @options="{{options}}"
-  @onSelect="{{onSelect}}"
-  @selectedOption="1"
-  @isSearchable="{{false}}"
-  @placeholder="Choisissez une option"
-  @searchPlaceholder="Rechercher"
-  @label="Mon menu déroulant"
-  @requiredLabel="Requis"
-  @clearLabel="Supprimer la sélection"
-  @expandLabel="Ouvrir le menu déroulant"
-  @collapseLabel="Réduire le menu déroulant"
-  @pageSize="{{10}}"
-/>
-```
-
-## Arguments
-
-<ArgTypes of={ComponentStories} />

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

@@ -1,193 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Form/Dropdown',
-  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' },
-      },
-    },
-    requiredLabel: {
-      name: 'requiredLabel',
-      description:
-        'Label indiquant que le champ est requis, le paramètre @label 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' },
-      },
-    },
-  },
-};
-
-const Template = (args) => {
-  return {
-    template: hbs`<div style='width: 300px;'>
-  <PixDropdown
-    @id={{this.id}}
-    @options={{this.options}}
-    @onSelect={{this.onSelect}}
-    @placeholder={{this.placeholder}}
-    @selectedOption={{this.selectedOption}}
-    @isSearchable={{this.isSearchable}}
-    @searchPlaceholder={{this.searchPlaceholder}}
-    @label={{this.label}}
-    @clearLabel={{this.clearLabel}}
-    @expandLabel={{this.expandLabel}}
-    @collapseLabel={{this.collapseLabel}}
-    @pageSize={{this.pageSize}}
-    @requiredLabel={{this.requiredLabel}}
-  />
-</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é: ',
-  requiredLabel: 'Champ requis',
-};
-
-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`,
-  })),
-};