@1024pix/pix-ui 46.13.0 → 46.13.2

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

@@ -1,61 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-
-export default {
-  title: 'Notification/Message',
-  render: (args) => ({
-    template: hbs`<PixMessage @type={{this.type}} @withIcon={{this.withIcon}}>
-  Ceci est un message
-  {{this.type}}
-  avec un texte tellement long qu'il est nécessaire
-  <br />
-  de l'afficher sur deux lignes.
-</PixMessage>`,
-    context: args,
-  }),
-  argTypes: {
-    type: {
-      name: 'type',
-      description: 'Type du message',
-      type: { name: 'string', required: false },
-      table: { defaultValue: { summary: 'info' } },
-      control: { type: 'select' },
-      options: ['info', 'success', 'warning', 'alert', 'error'],
-    },
-    withIcon: {
-      name: 'withIcon',
-      description: 'Icône du message',
-      table: { defaultValue: { summary: false } },
-      type: { name: 'boolean', required: false },
-      control: { type: 'boolean' },
-    },
-  },
-};
-
-export const Default = {};
-
-export const error = {
-  args: {
-    type: 'error',
-    withIcon: true,
-  },
-};
-
-export const warning = {
-  args: {
-    type: 'warning',
-    withIcon: true,
-  },
-};
-
-export const success = {
-  args: {
-    type: 'success',
-    withIcon: true,
-  },
-};
-
-export const withIcon = {
-  args: {
-    withIcon: true,
-  },
-};

package/app/stories/pix-modal.mdx

@@ -1,53 +0,0 @@
-import { Meta, Story, ArgTypes } from '@storybook/blocks';
-
-import * as ComponentStories from './pix-modal.stories.js';
-
-<Meta of={ComponentStories} />
-
-# PixModal
-
-Une fenêtre modale responsive et scrollable avec un overlay.
-
-Ce composant possède deux `yield` :
-
-- `:content` est destiné à accueillir le contenu principal de la fenêtre modale. Il peut accueillir tout type de
-  contenu HTML (simple texte, image, formulaire, etc.)
-- `:footer` peut également accueillir tout type de contenu HTML, mais est destiné aux boutons permettant d'interagir
-  avec la modale, ce qui permettra de les positionner correctement dans tous les cas de figure.
-
-<Story of={ComponentStories.Default} height={500} />
-
-## Usage
-
-```html
-<PixModal
-  @title="Qu'est-ce qu'une modale ?"
-  @showModal={{this.showModal}}
-  @onCloseButtonClick={{this.closeModal}}
->
- <:content>
-  <p>
-    Une fenêtre modale est, dans une interface graphique, une fenêtre qui prend le contrôle total du clavier et
-    de l'écran. Elle est en général associée à une question à laquelle il est impératif que l'utilisateur
-    réponde avant de poursuivre, ou de modifier quoi que ce soit. La fenêtre modale a pour propos : d'obtenir
-    des informations de l'utilisateur (ces informations sont nécessaires pour réaliser une opération) ; de
-    fournir une information à l'utilisateur (ce dernier doit en prendre connaissance avant de pouvoir continuer
-    à utiliser l'application).
-  </p>
- </:content>
- <:footer>
-  <PixButton
-    @variant="secondary"
-    @isBorderVisible={{true}}
-    @triggerAction={{this.closeModal}}
-  >
-    Annuler
-  </PixButton>
-  <PixButton>Valider</PixButton>
- </:footer>
-</PixModal>
-```
-
-## Arguments
-
-<ArgTypes />

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

@@ -1,73 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-
-export default {
-  title: 'Basics/Modal',
-  render: (args) => ({
-    template: hbs`<PixModal
-  @showModal={{this.showModal}}
-  @title={{this.title}}
-  @onCloseButtonClick={{fn (mut this.showModal) (not this.showModal)}}
->
-  <:content>
-    <p>
-      Une fenêtre modale est, dans une interface graphique, une fenêtre qui prend le contrôle total
-      du clavier et de l'écran. Elle est en général associée à une question à laquelle il est
-      impératif que l'utilisateur réponde avant de poursuivre, ou de modifier quoi que ce soit. La
-      fenêtre modale a pour propos : d'obtenir des informations de l'utilisateur (ces informations
-      sont nécessaires pour réaliser une opération) ; de fournir une information à l'utilisateur (ce
-      dernier doit en prendre connaissance avant de pouvoir continuer à utiliser l'application).
-    </p>
-  </:content>
-  <:footer>
-    {{! template-lint-disable no-inline-styles }}
-
-    <div
-      style='display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 16px'
-    >
-      <PixButton
-        @variant='secondary'
-        @isBorderVisible='true'
-        @triggerAction={{fn (mut this.showModal) (not this.showModal)}}
-      >Annuler</PixButton>
-      <PixButton @triggerAction={{fn (mut this.showModal) (not this.showModal)}}>Valider</PixButton>
-    </div>
-  </:footer>
-</PixModal>
-{{! template-lint-disable no-inline-styles }}
-
-<div style='display:flex; justify-content:center; align-items:center; height:105vh;'>
-  <PixButton @triggerAction={{fn (mut this.showModal) (not this.showModal)}}>Ouvrir la modale</PixButton>
-</div>`,
-    context: args,
-  }),
-  argTypes: {
-    title: {
-      name: 'title',
-      description: 'Titre de la modale',
-      type: { name: 'string', required: true },
-    },
-    onCloseButtonClick: {
-      name: 'onCloseButtonClick',
-      description: 'Fonction à exécuter à la fermeture de la modale',
-      type: { name: 'function', required: true },
-    },
-    showModal: {
-      name: 'showModal',
-      description: "Gérer l'ouverture de la modale",
-      type: { name: 'boolean', required: true },
-      control: { type: 'boolean' },
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-    },
-  },
-};
-
-export const Default = {
-  args: {
-    showModal: true,
-    title: "Qu'est-ce qu'une modale ?",
-    onCloseButtonClick: () => {},
-  },
-};

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

@@ -1,55 +0,0 @@
-import { Meta, Story, ArgTypes } from '@storybook/blocks';
-import * as ComponentStories from './pix-multi-select.stories';
-
-<Meta of={ComponentStories} />
-
-# Pix Multi Select
-
-Un select custom permettant une gestion de la multiselection. Permet de passer soit du texte brut soit des composants à sa liste. (PixStars etc...)
-L'ajout de `class` et d'autres attributs sont possibles.
-
-## Accessibilité
-
-Si vous utilisez le `PixMultiSelect` sans vouloir afficher le label, il faudra renseigner `screenReaderOnly` à `true`.
-
-> ⚠️ La démonstration de PixMultiSelect NE fonctionne PAS comme prévu dans storybook (mais fonctionne très bien sur les app fronts). Pour plus d'informations, voir [https://github.com/1024pix/pix-ui/pull/76](https://github.com/1024pix/pix-ui/pull/76).
-
-## With child component
-
-<Story of={ComponentStories.multiSelectWithChildComponent} height={310} />
-
-## Searchable
-
-<Story of={ComponentStories.multiSelectSearchable} height={330} />
-
-## withCustomClass
-
-<Story of={ComponentStories.multiSelectWithCustomClass} height={330} />
-
-## withId
-
-<Story of={ComponentStories.multiSelectWithId} height={330} />
-
-<Story of={ComponentStories.multiSelectWithYield} height={330} />
-
-## Usage
-
-```html
-<PixMultiSelect
-  @id="{{id}}"
-  @screenReaderOnly="{{screenReaderOnly}}"
-  @placeholder="{{placeholder}}"
-  @onChange="{{doSomething}}"
-  @values="{{values}}"
-  @emptyMessage="{{emptyMessage}}"
-  @className="{{className}}"
-  @options="{{options}}"
->
-  <:label>{{label}}</:label>
-  <:default as |option|>{{option.label}}</:default>
-</PixMultiSelect>
-```
-
-## Arguments
-
-<ArgTypes />

package/app/stories/pix-multi-select.stories.js

@@ -1,290 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Form/Multi Select',
-  render: (args) => ({
-    template: hbs`{{! template-lint-disable no-forbidden-elements }}
-<style>
-  .custom { border : none; }
-</style>
-<h4><strong>⚠️ La sélection des éléments ne fonctionne pas dans Storybook.</strong></h4>
-{{#if this.id}}
-  <div>
-    <label for={{this.id}}>Un label en dehors du composant</label>
-  </div>
-{{/if}}
-<PixMultiSelect
-  @id={{this.id}}
-  @placeholder={{this.placeholder}}
-  @screenReaderOnly={{this.screenReaderOnly}}
-  @size={{this.size}}
-  @onChange={{this.onChange}}
-  @emptyMessage={{this.emptyMessage}}
-  @className={{this.className}}
-  @isSearchable={{this.isSearchable}}
-  @strictSearch={{this.strictSearch}}
-  @values={{this.values}}
-  @options={{this.options}}
->
-  <:label>{{this.label}}</:label>
-  <:default as |option|>{{option.label}}</:default>
-</PixMultiSelect>`,
-    context: args,
-  }),
-  argTypes: {
-    id: {
-      name: 'id',
-      description:
-        "Permet l'accessibilité du composant attribuant des ``for`` pour chaque entité. **⚠️ L'`id` est obligatoire que si le `label` n'est pas donné. ⚠️**",
-      type: { name: 'string' },
-    },
-    placeholder: {
-      name: 'placeholder',
-      description:
-        'Rempli le contenu interne du composant, `placeholder` pour `isSearchable` `true`, sinon rawContent du `button`',
-      type: { name: 'string', required: true },
-    },
-    emptyMessage: {
-      name: 'emptyMessage',
-      description:
-        'Un intitulé de choix indisponible (dans le cas ou certains filtres seraient excluant)',
-      type: { name: 'string', required: true },
-    },
-    options: {
-      name: 'options',
-      description:
-        'Les options sont représentées par un tableau d‘objet contenant les propriétés ``value`` et ``label``. ``value`` doit être de type ``String`` pour être conforme au traitement des input value.',
-      type: { name: 'array', required: false },
-    },
-    onChange: {
-      name: 'onChange',
-      description: "Une fonction permettant d'effectuer une action à chaque sélection",
-      type: { required: true },
-    },
-    values: {
-      name: 'values',
-      description: 'Une pré-sélection peut être donnée au composant',
-      type: { name: 'array', required: false },
-    },
-    isSearchable: {
-      name: 'isSearchable',
-      description: 'Permet de rajouter une saisie utilisateur pour faciliter la recherche',
-      type: { name: 'boolean', required: false },
-      table: { defaultValue: { summary: false } },
-    },
-    strictSearch: {
-      name: 'strictSearch',
-      description:
-        'Permet de rendre sensible à la casse et au diacritiques lorsque ``isSearchable`` à ``true``',
-      type: { name: 'boolean', required: false },
-      table: { defaultValue: { summary: false } },
-    },
-    headerClassName: {
-      name: 'headerClassName',
-      description: 'Cette classe css permet de surcharger le css par défaut du composant.',
-      type: { name: 'string', required: false },
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    placement: {
-      name: 'placement',
-      description:
-        "Permet de placer la dropdown du select par rapport à son bouton. Par défaut, cela s'adapte tout seul.",
-      type: { name: 'string', required: false },
-      options: [
-        'auto',
-        'auto-start',
-        'auto-end',
-        'top',
-        'top-start',
-        'top-end',
-        'bottom',
-        'bottom-start',
-        'bottom-end',
-        'right',
-        'right-start',
-        'right-end',
-        'left',
-        'left-start',
-        'left-end',
-      ],
-      control: { type: 'select' },
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'bottom-start' },
-      },
-    },
-    label: {
-      name: 'label',
-      description: 'Le label du champ',
-      type: { name: 'string', required: true },
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    subLabel: {
-      name: 'subLabel',
-      description: 'Un descriptif complétant le label',
-      type: { name: 'string', required: false },
-    },
-    requiredLabel: {
-      name: 'requiredLabel',
-      description: 'Label indiquant que le champ est requis.',
-      type: { name: 'string', required: false },
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    screenReaderOnly: {
-      name: 'screenReaderOnly',
-      description: "Permet de rendre le label lisible uniquement par les lecteurs d'écran",
-      control: { type: 'boolean' },
-      type: { name: 'boolean', required: false },
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-    },
-    size: {
-      name: 'size',
-      description: 'Correspond à la taille de la police du label.',
-      type: { name: 'string', required: false },
-      table: {
-        defaultValue: { summary: 'default' },
-      },
-      control: { type: 'select' },
-      options: ['small', 'large', 'default'],
-    },
-    inlineLabel: {
-      name: 'inlineLabel',
-      description: 'Permet de ne pas afficher la marge pour les éléments de formulaire inline',
-      type: { name: 'boolean', required: false },
-      table: {
-        defaultValue: { summary: false },
-      },
-      control: { type: 'boolean' },
-    },
-  },
-};
-
-const DEFAULT_OPTIONS = [
-  { label: 'ANETH HERBE AROMATIQUE', value: '1' },
-  { label: 'ANIS VERT HERBE AROMATIQUE', value: '2' },
-  { label: 'BADIANE AROMATE', value: '3' },
-  { label: 'BAIES ROSES EPICES', value: '4' },
-  { label: 'BASILIC HERBE AROMATIQUE', value: '5' },
-  { label: 'BOURRACHE OFFICINALE HERBE AROMATIQUE', value: '6' },
-  { label: 'CANNELLE AROMATE', value: '7' },
-  { label: 'CAPRE CONDIMENT', value: '8' },
-  { label: 'CARDAMOME AROMATE', value: '9' },
-  { label: 'CARVI HERBE AROMATIQUE', value: '10' },
-  { label: 'CERFEUIL HERBE AROMATIQUE', value: '11' },
-];
-
-export const Default = {
-  args: {
-    label: 'Label du champ',
-    options: DEFAULT_OPTIONS,
-    onChange: action('onChange'),
-    emptyMessage: 'pas de résultat',
-    values: ['1', '3'],
-    placeholder: 'placeholder',
-  },
-};
-
-export const multiSelectWithChildComponent = (args) => {
-  return {
-    template: hbs`<h4><strong>⚠️ La sélection des éléments ne fonctionne pas dans Storybook.</strong></h4>
-<PixMultiSelect
-  @placeholder={{this.placeholder}}
-  @onChange={{this.onChange}}
-  @emptyMessage={{this.emptyMessage}}
-  @className={{this.className}}
-  @options={{this.options}}
-  @size={{this.size}}
-  @subLabel={{this.subLabel}}
-  @inlineLabel={{this.inlineLabel}}
-  @screenReaderOnly={{this.screenReaderOnly}}
->
-  <:label>{{this.label}}</:label>
-  <:default as |option|>
-    <PixStars
-      @alt={{concat 'Étoiles ' option.value ' sur ' option.total}}
-      @count={{option.value}}
-      @total={{option.total}}
-    />
-  </:default>
-</PixMultiSelect>`,
-    context: args,
-  };
-};
-
-multiSelectWithChildComponent.args = {
-  ...Default.args,
-  placeholder: 'Sélectionner le niveau souhaité',
-  label: 'Résultat évaluation',
-  options: [
-    { value: '0', total: 3 },
-    { value: '1', total: 3 },
-    { value: '2', total: 3 },
-    { value: '3', total: 3 },
-  ],
-};
-
-export const multiSelectSearchable = {
-  args: {
-    ...Default.args,
-    isSearchable: true,
-    strictSearch: true,
-    emptyMessage: 'Aucune option trouvée',
-  },
-};
-
-export const multiSelectWithCustomClass = {
-  args: {
-    ...Default.args,
-    className: 'custom',
-    isSearchable: false,
-  },
-};
-
-export const multiSelectWithId = {
-  args: {
-    ...Default.args,
-    label: undefined,
-    id: 'custom',
-    isSearchable: false,
-  },
-};
-
-const TemplateWithYield = (args) => ({
-  template: hbs`<PixMultiSelect
-  @id={{this.id}}
-  @onChange={{this.onChange}}
-  @emptyMessage={{this.emptyMessage}}
-  @className={{this.className}}
-  @isSearchable={{this.isSearchable}}
-  @strictSearch={{this.strictSearch}}
-  @values={{this.values}}
-  @options={{this.options}}
-  @size={{this.size}}
-  @subLabel={{this.subLabel}}
-  @inlineLabel={{this.inlineLabel}}
-  @requiredLabel={{this.requiredLabel}}
-  @screenReaderOnly={{this.screenReaderOnly}}
->
-  <:label>{{this.label}}</:label>
-  <:placeholder>filtres (2)</:placeholder>
-  <:default as |option|>{{option.label}}</:default>
-</PixMultiSelect>`,
-  context: args,
-});
-
-export const multiSelectWithYield = TemplateWithYield.bind({});
-multiSelectWithYield.args = {
-  ...Default.args,
-  placeholder: undefined,
-  isSearchable: false,
-};

package/app/stories/pix-pagination.mdx

@@ -1,56 +0,0 @@
-import { Meta, Story, ArgTypes } from '@storybook/blocks';
-
-import * as ComponentStories from './pix-pagination.stories';
-
-<Meta of={ComponentStories} />
-
-# PixPagination
-
-PixPagination est un élément permettant de trigger le changement de page dans l'élément parent.
-
-> ** ⚠️ Pour utiliser ce composant, il est recommandé d'ajouter cette config dans les routes où tu l'utiliseras.**
->
-> ** Cela permettra de reload le `model` si les queryParams `pageNumber` & `pageSize` ont été modifiés.**
->
-> ```javascript
-> queryParams = { pageNumber: { refreshModel: true }, pageSize: { refreshModel: true } };
-> ```
->
-
-Le paramètre `pageOptions` n'est pas requis et possède une valeur par défaut.
-
-** ⚠ Si vous voulez utiliser des options différentes, il ne faut pas oublier que l'API fait le premier call avec un pageSize
-à 10 par défaut.**
-
-Sur mobile, le select qui permet de choisir le nombre d'élément à afficher sur la page est retiré.
-
-## En français avec paramètres par défaut
-
-<Story of={ComponentStories.French} height={110} />
-
-## En anglais avec le paramètre `pageOptions` custom
-
-<Story of={ComponentStories.English} height={110} />
-
-## Avec une seule page
-
-<Story of={ComponentStories.OnePage} height={110} />
-
-## Version condensée
-
-<Story of={ComponentStories.Condensed} height={110} />
-
-## Usage
-
-```html
-<PixPagination
-  @pagination="{{pagination}}"
-  @locale="{{locale}}"
-  @pageOptions="{{pageOptions}}"
-  @isCondensed="{{isCondensed}}"
-/>
-```
-
-## Arguments
-
-<ArgTypes />