@1024pix/pix-ui 46.13.0 → 46.13.2

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

@@ -1,445 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Form/Select',
-  argTypes: {
-    options: {
-      name: 'options',
-      description:
-        'Les options sont représentées par un tableau d‘objet contenant les propriétés ``value``, ``label`` et ``category``. Ce dernier étant optionnel.',
-      type: { name: 'array', required: true },
-    },
-    value: {
-      name: 'value',
-      description: 'Option sélectionnée',
-      options: ['1', '2', '3', '4', '5', '6'],
-      control: { type: 'select' },
-      type: { name: 'string', required: false },
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    onChange: {
-      name: 'onChange',
-      description: 'Fonction à appeler quand une option est sélectionnée.',
-      type: { required: true },
-      control: { disable: true },
-    },
-    isSearchable: {
-      name: 'isSearchable',
-      description: 'Rend le champ cherchable',
-      control: { type: 'boolean' },
-      type: { name: 'boolean', required: false },
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-    },
-    id: {
-      name: 'id',
-      description: 'id généré automatiquement, peut être définit manuellement si besoin',
-      type: { name: 'string', required: false },
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    placeholder: {
-      name: 'placeholder',
-      description: "Placeholder du menu déroulant. Il sert aussi de label pour l'option par défaut",
-      type: { name: 'string', required: true },
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    hideDefaultOption: {
-      name: 'hideDefaultOption',
-      description: "Cache l'option par défaut",
-      type: { name: 'boolean', required: false },
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-    },
-    className: {
-      name: 'className',
-      description: 'Cette classe css permet de surcharger le css par défaut du composant.',
-      type: { name: 'string', required: false },
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    searchLabel: {
-      name: 'searchLabel',
-      description:
-        'Label de la recherche dans le menu déroulant. **⚠️ Le `searchLabel` est obligatoire que si le `isSearchable` à `true`. ⚠️**',
-      type: { name: 'string', required: false },
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    searchPlaceholder: {
-      name: 'searchPlaceholder',
-      description:
-        'Placeholder de la recherche dans le menu déroulant. **⚠️ Le `searchPlaceholder` est obligatoire que si le `isSearchable` à `true`. ⚠️**',
-      type: { name: 'string', required: false },
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    emptySearchMessage: {
-      name: 'emptySearchMessage',
-      description:
-        "Message affiché si la recherche ne retourne pas d'options. **⚠️ Le `emptySearchMessage` est obligatoire que si le `isSearchable` à `true`. ⚠️**",
-      type: { name: 'string', required: false },
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    errorMessage: {
-      name: 'errorMessage',
-      description: 'Message affiché si une erreur survient',
-      type: { name: 'string', required: false },
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    isDisabled: {
-      name: 'isDisabled',
-      description: "Permet de désactiver l'affichage des options possible",
-      type: { name: 'boolean', required: false },
-      table: {
-        type: { summary: false },
-      },
-    },
-    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' },
-      },
-    },
-    icon: {
-      name: 'icon',
-      description:
-        "Permet l'affichage d'une icône FontAwesome avant le placeholder ou le label de l'option sélectionnée.",
-      type: { name: 'string', required: false },
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: null },
-      },
-    },
-    isComputeWidthDisabled: {
-      name: 'isComputeWidthDisabled',
-      description:
-        'Permet de ne pas calculer la width du select par rapport à la taille maximum de la dropdown',
-      type: { name: 'boolean', required: false },
-      table: {
-        type: { summary: false },
-      },
-    },
-
-    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 Template = (args) => {
-  return {
-    template: hbs`{{#if this.id}}
-  <div>
-    <label for={{this.id}}>Un label en dehors du composant</label>
-  </div>
-{{/if}}
-<PixSelect
-  @id={{this.id}}
-  @className={{this.className}}
-  @options={{this.options}}
-  @isSearchable={{this.isSearchable}}
-  @placeholder={{this.placeholder}}
-  @hideDefaultOption={{this.hideDefaultOption}}
-  @searchLabel={{this.searchLabel}}
-  @value={{this.value}}
-  @searchPlaceholder={{this.searchPlaceholder}}
-  @emptySearchMessage={{this.emptySearchMessage}}
-  @errorMessage={{this.errorMessage}}
-  @isDisabled={{this.isDisabled}}
-  @placement={{this.placement}}
-  @icon={{this.icon}}
-  @size={{this.size}}
-  @subLabel={{this.subLabel}}
-  @inlineLabel={{this.inlineLabel}}
-  @requiredLabel={{this.requiredLabel}}
-  @screenReaderOnly={{this.screenReaderOnly}}
->
-  <:label>{{this.label}}</:label>
-</PixSelect>`,
-    context: args,
-  };
-};
-
-const TemplatePopover = (args) => {
-  return {
-    template: hbs`{{! template-lint-disable no-inline-styles }}
-<div style='display:flex;height:330px'>
-  <div style='align-self:flex-end'>
-    {{#if this.id}}
-      <div>
-        <label for={{this.id}}>Un label en dehors du composant</label>
-      </div>
-    {{/if}}
-    <PixSelect
-      @id={{this.id}}
-      @className={{this.className}}
-      @options={{this.options}}
-      @isSearchable={{this.isSearchable}}
-      @onChange={{this.onChange}}
-      @placeholder={{this.placeholder}}
-      @hideDefaultOption={{this.hideDefaultOption}}
-      @subLabel={{this.subLabel}}
-      @searchLabel={{this.searchLabel}}
-      @value={{this.value}}
-      @searchPlaceholder={{this.searchPlaceholder}}
-      @screenReaderOnly={{this.screenReaderOnly}}
-      @emptySearchMessage={{this.emptySearchMessage}}
-      @requiredLabel={{this.requiredLabel}}
-      @errorMessage={{this.errorMessage}}
-      @isDisabled={{this.isDisabled}}
-      @placement={{this.placement}}
-    >
-      <:label>{{this.label}}</:label>
-    </PixSelect>
-  </div>
-</div>`,
-    context: args,
-  };
-};
-
-export const WithId = Template.bind({});
-WithId.args = {
-  id: 'custom',
-  options: [
-    { value: '1', label: 'Figues' },
-    { value: '3', label: 'Fraises' },
-    { value: '2', label: 'Bananes' },
-    { value: '4', label: 'Mangues' },
-    { value: '5', label: 'Kaki' },
-    {
-      value: '6',
-      label: 'Asiminier trilobé oblong vert (à ne pas confondre avec la papaye)',
-    },
-  ],
-  placeholder: 'Mon innerText',
-  isSearchable: false,
-  onChange: action('onChange'),
-};
-
-export const WithCustomClass = Template.bind({});
-WithCustomClass.args = {
-  className: 'custom',
-  options: [
-    { value: '1', label: 'Figues' },
-    { value: '3', label: 'Fraises' },
-    { value: '2', label: 'Bananes' },
-    { value: '4', label: 'Mangues' },
-    { value: '5', label: 'Kaki' },
-    {
-      value: '6',
-      label: 'Asiminier trilobé oblong vert (à ne pas confondre avec la papaye)',
-    },
-  ],
-  label: 'Mon label',
-  placeholder: 'Mon innerText',
-  subLabel: 'Mon sous label',
-  isSearchable: false,
-  onChange: action('onChange'),
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  options: [
-    { value: '1', label: 'Figues' },
-    { value: '3', label: 'Fraises' },
-    { value: '2', label: 'Bananes' },
-    { value: '4', label: 'Mangues' },
-    { value: '5', label: 'Kaki' },
-    {
-      value: '6',
-      label: 'Asiminier trilobé oblong vert (à ne pas confondre avec la papaye)',
-    },
-  ],
-  label: 'Mon label',
-  placeholder: 'Mon innerText',
-  subLabel: 'Mon sous label',
-  isSearchable: false,
-  onChange: action('onChange'),
-};
-
-export const WithCategories = Template.bind({});
-WithCategories.args = {
-  options: [
-    { value: '1', label: 'Figues', category: 'Fruit Rouge' },
-    { value: '3', label: 'Fraises', category: 'Fruit Rouge' },
-    { value: '3', label: 'Noix', category: 'Autres' },
-    { value: '4', label: 'Papayes', category: 'Autres' },
-    {
-      value: '6',
-      label: 'Asiminier trilobé oblong vert (à ne pas confondre avec la papaye)',
-      category: 'Autres',
-    },
-  ],
-  label: 'Mon label',
-  placeholder: 'Mon innerText',
-  subLabel: 'Mon sous label',
-  isSearchable: false,
-  onChange: action('onChange'),
-};
-
-export const WithSearch = Template.bind({});
-WithSearch.args = {
-  options: [
-    { value: '1', label: 'Figues' },
-    { value: '3', label: 'Fraises' },
-    { value: '2', label: 'Bananes' },
-    { value: '4', label: 'Mangues' },
-    { value: '5', label: 'Kaki' },
-    {
-      value: '6',
-      label: 'Asiminier trilobé oblong vert (à ne pas confondre avec la papaye)',
-    },
-  ],
-  label: 'Mon label',
-  placeholder: 'Mon innerText',
-  subLabel: 'Mon sous label',
-  searchLabel: 'Mon label',
-  searchPlaceholder: 'Mon innerText',
-  isSearchable: true,
-  emptySearchMessage: 'Aucune option',
-  onChange: action('onChange'),
-};
-
-export const WithCategoriesAndSearch = Template.bind({});
-WithCategoriesAndSearch.args = {
-  options: [
-    { value: '1', label: 'Figues', category: 'Fruit Rouge' },
-    { value: '2', label: 'Fraises', category: 'Fruit Rouge' },
-    { value: '3', label: 'Fèves de chocolat', category: 'Autres' },
-    { value: '5', label: 'Dattes', category: 'Autres' },
-    {
-      value: '4',
-      label: 'Asiminier trilobé oblong vert (à ne pas confondre avec la papaye)',
-      category: 'Autres',
-    },
-  ],
-  label: 'Mon label',
-  placeholder: 'Mon innerText',
-  subLabel: 'Mon sous label',
-  searchLabel: 'Mon label',
-  searchPlaceholder: 'Mon innerText',
-  isSearchable: true,
-  emptySearchMessage: 'Aucune option',
-  onChange: action('onChange'),
-};
-
-export const WithDropDownAtTheTop = TemplatePopover.bind({});
-WithDropDownAtTheTop.args = {
-  options: [
-    { value: '1', label: 'Figues' },
-    { value: '3', label: 'Fraises' },
-    { value: '2', label: 'Bananes' },
-    { value: '4', label: 'Mangues' },
-    { value: '5', label: 'Kaki' },
-    {
-      value: '6',
-      label: 'Asiminier trilobé oblong vert (à ne pas confondre avec la papaye)',
-    },
-  ],
-  label: 'JambonFromage',
-  placeholder: 'Mon innerText',
-  subLabel: 'Mon sous label',
-  isSearchable: false,
-  onChange: action('onChange'),
-  placement: 'top',
-};
-
-export const WithIcon = Template.bind({});
-WithIcon.args = {
-  icon: 'earth-europe',
-  isSearchable: false,
-  label: 'With icon',
-  onChange: action('onChange'),
-  options: [
-    { value: 'en', label: 'English' },
-    { value: 'fr', label: 'Français' },
-  ],
-  value: 'fr',
-};

package/app/stories/pix-selectable-tag.mdx

@@ -1,37 +0,0 @@
-import { Meta, Story, ArgTypes } from '@storybook/blocks';
-
-import * as ComponentStories from './pix-selectable-tag.stories.js';
-
-<Meta of={ComponentStories} />
-
-# Pix Selectable Tag
-
-Un tag permettant de sélectionner ou non la valeur.
-
-## Default
-
-<Story of={ComponentStories.selectableTagDefault} height={60} />
-
-## Selected
-
-<Story of={ComponentStories.selectableTagSelected} height={60} />
-
-## Multiple tags
-
-<Story of={ComponentStories.selectableTagMultiple} height={60} />
-
-## Usage
-
-```html
-Par défaut :
-<PixSelectableTag> @label={{label}} @id={{id}} @onChange={{onChange}} </PixSelectableTag>
-
-Tag Sélectionné :
-<PixSelectableTag>
-  @label={{label}} @id={{id}} @onChange={{onChange}} @checked={{true}}
-</PixSelectableTag>
-```
-
-## Arguments
-
-<ArgTypes of={ComponentStories} />

package/app/stories/pix-selectable-tag.stories.js

@@ -1,69 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-
-export default {
-  title: 'basics/Tag/Selectable Tag',
-  argTypes: {
-    label: {
-      name: 'label',
-      description: 'Le label du tag sélectionnable',
-      type: { name: 'string', required: true },
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    id: {
-      name: 'id',
-      description: "L'id du tag sélectionnable",
-      type: { name: 'string', required: true },
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    onChange: {
-      name: 'onChange',
-      description: 'Fonction à appeler si le tag est sélectionné',
-      type: { required: true },
-      control: { disable: true },
-    },
-    checked: {
-      name: 'checked',
-      description: 'Indiquez si le tag doit être coché',
-      type: { name: 'boolean', required: true },
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-    },
-  },
-};
-
-export const selectableTagDefault = (args) => {
-  return {
-    template: hbs`<PixSelectableTag
-  @label='non sélectionné'
-  @id='123'
-  @onChange={{this.onChange}}
-  @checked={{false}}
-/>`,
-    context: args,
-  };
-};
-
-export const selectableTagSelected = (args) => {
-  return {
-    template: hbs`<PixSelectableTag @label='Sélectionné' @id='456' @onChange={{this.onChange}} @checked={{true}} />`,
-    context: args,
-  };
-};
-
-export const selectableTagMultiple = (args) => {
-  return {
-    template: hbs`{{! template-lint-disable no-inline-styles }}
-<div style='display:flex;justify-content:space-around;width:400px;height:100%;padding:10px'>
-  <PixSelectableTag @label='Lorem ipsum' @id='1' @onChange={{this.onChange}} @checked={{false}} />
-  <PixSelectableTag @label='Lorem ipsum' @id='2' @onChange={{this.onChange}} @checked={{false}} />
-  <PixSelectableTag @label='Lorem ipsum' @id='3' @onChange={{this.onChange}} @checked={{false}} />
-</div>`,
-    context: args,
-  };
-};

package/app/stories/pix-sidebar.mdx

@@ -1,49 +0,0 @@
-import { Meta, Story, ArgTypes } from '@storybook/blocks';
-
-import * as ComponentStories from './pix-sidebar.stories.js';
-
-<Meta of={ComponentStories} />
-
-# PixSidebar
-
-Une sidebar responsive et scrollable avec un overlay.
-
-Ce composant possède deux `yield` :
-
-- `:content` est destiné à accueillir le contenu principal de la fenêtre sidebar. 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 sidebar, ce qui permettra de les positionner correctement dans tous les cas de figure.
-
-  <Story of={ComponentStories.Default} height={500} />
-
-## Usage
-
-```html
-<PixSidebar
-  @showSidebar={{true}}
-  @title="Filtrer"
-  @onClose={{this.closeSidebar}}
->
- <:content>
-  <p>
-    Une sidebar 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 à du paramétrage d'écran.
-  </p>
- </:content>
- <:footer>
-  <PixButton
-    @variant="secondary"
-    @isBorderVisible={{true}}
-    @triggerAction={{this.closeSidebar}}
-  >
-    Annuler
-  </PixButton>
-  <PixButton>Valider</PixButton>
- </:footer>
-</PixSidebar>
-```
-
-## Arguments
-
-<ArgTypes of={ComponentStories} />

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

@@ -1,74 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-
-export default {
-  title: 'Basics/Sidebar',
-  argTypes: {
-    showSidebar: {
-      name: 'showSidebar',
-      description: 'Visibilité de la sidebar',
-      type: { name: 'boolean', required: false },
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-    },
-    title: {
-      name: 'title',
-      description: 'Titre de la sidebar',
-      type: { name: 'string', required: true },
-    },
-    onClose: {
-      name: 'onClose',
-      description: 'Fonction à exécuter à la fermeture de la sidebar',
-      type: { name: 'function', required: true },
-      table: {
-        type: { summary: 'function' },
-      },
-    },
-  },
-};
-
-const Template = (args) => {
-  return {
-    template: hbs`<PixSidebar
-  @showSidebar={{this.showSidebar}}
-  @title={{this.title}}
-  @onClose={{fn (mut this.showSidebar) (not this.showSidebar)}}
->
-  <:content>
-    <p>
-      Une sidebar 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 à du paramétrage d'écran.
-    </p>
-  </:content>
-  <:footer>
-    {{! template-lint-disable no-inline-styles }}
-    <div style='display: flex; gap: 8px'>
-      <PixButton
-        @variant='secondary'
-        @isBorderVisible='true'
-        @triggerAction={{fn (mut this.showSidebar) (not this.showSidebar)}}
-      >Annuler</PixButton>
-      <PixButton
-        @triggerAction={{fn (mut this.showSidebar) (not this.showSidebar)}}
-      >Valider</PixButton>
-    </div>
-  </:footer>
-</PixSidebar>
-{{! template-lint-disable no-inline-styles }}
-<div style='display:flex; justify-content:center; align-items:center; height:105vh;'>
-  <PixButton
-    @triggerAction={{fn (mut this.showSidebar) (not this.showSidebar)}}
-    style='height:45px'
-  >Ouvrir la sidebar</PixButton>
-</div>`,
-    context: args,
-  };
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  showSidebar: true,
-  title: 'Filtrer',
-  onClose: () => {},
-};

package/app/stories/pix-stars.mdx

@@ -1,22 +0,0 @@
-import { Meta, Story, ArgTypes } from '@storybook/addon-docs';
-import * as ComponentStories from './pix-stars.stories.js';
-
-<Meta of={ComponentStories} />
-
-# Pix Stars
-
-Affiche une série d'étoiles en fonction des paramètres donnés.
-Un texte alternatif peut être renseigné et différents styles sont pré-définis.
-Pour ne pas afficher les étoiles vides, il suffit de ne pas donner le total d'étoiles.
-
-<Story of={ComponentStories.stars} height={70} />
-
-## Usage
-
-```html
-<PixStars @count="{{2}}" @total="{{5}}" @alt="message alternatif" @color="blue" />
-```
-
-## Arguments
-
-<ArgTypes of={ComponentStories} />