@1024pix/pix-ui 24.0.3 → 24.1.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Pix-UI Changelog
 
+## v24.1.0 (24/01/2023)
+
+
+### :rocket: Amélioration
+- [#316](https://github.com/1024pix/pix-ui/pull/316) [FEATURE] Création d'un input permettant de chercher/filtrer (PIX-6780)
+- [#320](https://github.com/1024pix/pix-ui/pull/320) [FEATURE] Déplacer le focus sur le champ lorsque le bouton pour masquer/afficher le mot de passe est cliqué sur PixInputPassword (PIX-6855)
+
 ## v24.0.3 (18/01/2023)
 
 

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

@@ -25,5 +25,9 @@ export default class PixInputPassword extends PixInput {
   @action
   togglePasswordVisibility() {
     this.isPasswordVisible = !this.isPasswordVisible;
+    const InputElement = document.getElementById(this.args.id);
+    if (InputElement) {
+      InputElement.focus();
+    }
   }
 }

package/addon/components/pix-search-input.hbs

@@ -0,0 +1,21 @@
+<div class="pix-search-input">
+  {{#if this.label}}
+    <label for={{this.searchInputId}} class="pix-search-input__label">{{this.label}}</label>
+  {{/if}}
+
+  <div class="pix-search-input__input-container">
+    <FaIcon @icon="magnifying-glass" />
+    {{! template-lint-disable require-input-label }}
+    <input
+      id={{this.searchInputId}}
+      class="pix-search-input__input"
+      role="searchbox"
+      name={{@inputName}}
+      placeholder={{@placeholder}}
+      aria-label={{this.ariaLabel}}
+      value={{@value}}
+      oninput={{this.onSearch}}
+      ...attributes
+    />
+  </div>
+</div>

package/addon/components/pix-search-input.js

@@ -0,0 +1,42 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
+import debounce from 'lodash.debounce';
+
+export default class PixSearchInput extends Component {
+  constructor() {
+    super(...arguments);
+
+    this.debounceTimeBeforeSearch = parseInt(this.args.debounceTimeInMs);
+    if (isNaN(this.debounceTimeBeforeSearch)) {
+      throw new Error('ERROR in PixSearchInput component, @debounceTimeInMs param is not provided');
+    }
+    if (!this.args.triggerFiltering) {
+      throw new Error('ERROR in PixSearchInput component, @triggerFiltering param is not provided');
+    }
+    if (!this.args.label && !this.args.ariaLabel) {
+      throw new Error(
+        'ERROR in PixSearchInput component, you must provide @label or @ariaLabel params'
+      );
+    }
+
+    this.searchInputId = this.args.id || guidFor(this);
+    this.debouncedTriggerFiltering = debounce(
+      this.args.triggerFiltering,
+      this.debounceTimeBeforeSearch
+    );
+  }
+
+  get label() {
+    return this.args.label;
+  }
+
+  get ariaLabel() {
+    return this.args.label ? null : this.args.ariaLabel;
+  }
+
+  @action
+  async onSearch(event) {
+    await this.debouncedTriggerFiltering(this.searchInputId, event.target.value);
+  }
+}

package/addon/styles/_pix-input-password.scss

@@ -38,6 +38,8 @@
   }
 
   &__button {
+    margin-right: $spacing-xxs;
+
     &:hover,
     &:active,
     &:focus {
@@ -53,7 +55,6 @@
 
   svg.pix-input-password__error-icon {
     position: absolute;
-    bottom: 10px;
     right: 6px;
     color: $pix-neutral-0;
     background: $pix-error-70;

package/addon/styles/_pix-input.scss

@@ -25,7 +25,7 @@
 
   svg.pix-input__error-icon {
     position: absolute;
-    bottom: 10px;
+    bottom: 7px;
     right: 6px;
     color: $pix-neutral-0;
     background: $pix-error-70;

package/addon/styles/_pix-search-input.scss

@@ -0,0 +1,43 @@
+.pix-search-input {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.pix-search-input__label {
+  font-family: $font-roboto;
+  font-size: 0.875rem;
+  color: $pix-neutral-70;
+  margin-bottom: 4px;
+}
+
+.pix-search-input__input-container {
+  position: relative;
+
+  svg {
+    position: absolute;
+    bottom: calc(50% - 9px);
+    left: 6px;
+    color: $pix-neutral-60;
+    font-size: 0.6rem;
+    padding-left: 2px;
+    width: 18px;
+    height: 18px;
+  }
+}
+
+.pix-search-input__input {
+  @include input();
+  @include hoverFormElement();
+  @include focusFormElement();
+
+  width: 100%;
+  height: 36px;
+  border: 1px solid $pix-neutral-40;
+  padding-left: $spacing-xl;
+
+  &::placeholder {
+    color: $pix-neutral-30;
+  }
+}
+

package/addon/styles/addon.scss

@@ -32,6 +32,7 @@
 @import 'pix-toggle';
 @import 'pix-indicator-card';
 @import 'trap-focus';
+@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/components/pix-search-input.js

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

package/app/stories/pix-search-input.stories.js

@@ -0,0 +1,80 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+export const Template = (args) => {
+  return {
+    template: hbs`
+      <PixSearchInput
+        @id={{this.id}}
+        @label={{this.label}}
+        @ariaLabel={{this.ariaLabel}}
+        @placeholder={{this.placeholder}}
+        @debounceTimeInMs={{this.debounceTimeInMs}}
+        @triggerFiltering={{this.triggerFiltering}}
+      />
+    `,
+    context: args,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  id: null,
+  label: 'Filtrer un fruit',
+  ariaLabel: null,
+  placeholder: 'un placeholder',
+  debounceTimeInMs: 500,
+  triggerFiltering: action('triggerFiltering'),
+};
+
+export const argTypes = {
+  id: {
+    name: 'id',
+    description:
+      "Un identifiant unique placé sur le composant. Si l'id n'est pas fourni un id par défaut sera mis.",
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  label: {
+    name: 'label',
+    description:
+      "Label du champ. ** ⚠️ Le `label` est obligatoire si l'`ariaLabel` n'est pas donné. ⚠️ **",
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  ariaLabel: {
+    name: 'ariaLabel',
+    description:
+      "Label du champ. ** ⚠️ L'`ariaLabel` est obligatoire si le `label` n'est pas donné. ⚠️ **",
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  placeholder: {
+    name: 'placeholder',
+    description: 'Placeholder du champ.',
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  debounceTimeInMs: {
+    name: 'debounceTimeInMs',
+    description: "Temps d'attente en millisecondes entre 2 appels à la fonction triggerFiltering.",
+    type: { name: 'string', required: true },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  triggerFiltering: {
+    name: 'triggerFiltering',
+    description: 'Fonction appelée quand le champ est modifié.',
+    type: { required: true },
+    control: { disable: true },
+  },
+};

package/app/stories/pix-search-input.stories.mdx

@@ -0,0 +1,54 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+
+import * as stories from './pix-search-input.stories.js';
+
+<Meta
+  title='Others/SearchInput'
+  component='PixSearchInput'
+  argTypes={stories.argTypes}
+/>
+
+# PixSearchInput
+
+Le PixSearchInput est un champ qui permet de filter des résultats. Un cas d'utilisation courant de ce genre de composant est un champ de filtre d'une colonne d'un tableau.
+
+
+A la différence d'un [PixSelect](?path=/docs/form-select--default#withsearch) searchable, la liste des résultats s'affiche en dehors du composant.
+
+
+Ce composant permet d'appeler la fonction triggerFiltering passée en paramètre selon un debounce (temps d'attente avant le prochain appel) fournis.
+
+
+
+⚠️ ⚠️ ⚠️ Pour utiliser ce composant des changements sont nécessaires dans l'application où est installé Pix UI : 
+
+1- Rajoutez ceci dans le `ember-cli-build.js` de votre application (mon-pix/pix-orga/pix-certif/pix-admin) : 
+```js
+  app.import('node_modules/lodash.debounce/index.js', {
+    using: [{ transformation: 'cjs', as: 'lodash.debounce' }],
+  });
+```
+
+2- Installez la dépendance "ember-cli-cjs-transform" : `npm install ember-cli-cjs-transform`
+
+
+<Canvas>
+  <Story name='Default' story={stories.Default} height={80} />
+</Canvas>
+
+## Usage
+
+```html
+<PixSearchInput
+  @id={{this.id}}
+  @label={{this.label}}
+  @ariaLabel={{this.ariaLabel}}
+  @placeholder={{this.placeholder}}
+  @debounceTimeInMs={{this.debounceTimeInMs}}
+  @triggerFiltering={{this.triggerFiltering}}
+/>
+```
+
+## Arguments
+
+<ArgsTable story="Default" />

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

@@ -19,6 +19,8 @@ Les options sont représentées par un tableau d'objet contenant les propriété
 
 > Pour aider l'utilisateur, rajoutez un placeholder cohérent !
 
+> **⚠️** Pour un champ de filtre sur des résultats qui ne s'affichent pas dans une liste déroulante, utilisez plutôt le [PixSearchInput](?path=/story/others-searchinput--default).
+
 ## Default
 
 <Canvas>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "24.0.3",
+  "version": "24.1.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -52,7 +52,9 @@
     "ember-cli-string-utils": "^1.1.0",
     "ember-click-outside": "^4.0.0",
     "ember-prop-modifier": "^1.0.1",
-    "ember-truth-helpers": "^3.1.1"
+    "ember-truth-helpers": "^3.1.1",
+    "ember-cli-cjs-transform": "^2.0.0",
+    "lodash.debounce": "^4.0.8"
   },
   "devDependencies": {
     "@1024pix/ember-testing-library": "^0.6.0",