@1024pix/pix-ui 46.13.1 → 46.13.3

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

@@ -1,220 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-
-export default {
-  title: 'Form/Inputs/Checkbox',
-  argTypes: {
-    id: {
-      name: 'id',
-      description:
-        'Identifiant du champ permettant de lui attacher un label. Généré automatiquement si non renseigné.',
-      type: { name: 'string' },
-    },
-    class: {
-      name: 'class',
-      description: "Permet d'ajouter une classe au parent du composant.",
-      type: { name: 'string' },
-    },
-    isIndeterminate: {
-      name: 'isIndeterminate',
-      description:
-        "Rendre la checkbox indéterminée, état indiquant que la/les case(s) n'est/ne sont ni cochée(s) ni décochée(s) (exemple: une checkbox parente indiquant la sélection partielle de plusieurs checkbox enfants)",
-      type: { name: 'boolean', required: true },
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-    },
-    checked: {
-      name: 'checked',
-      description: 'Permet de cocher la checkbox',
-      type: { name: 'boolean', required: false },
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-    },
-    isDisabled: {
-      name: 'isDisabled',
-      description: 'Permet de désactiver la checkbox',
-      type: { name: 'boolean', required: false },
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { 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'],
-    },
-  },
-};
-
-const Template = (args) => {
-  return {
-    template: hbs`<PixCheckbox
-  @id={{this.id}}
-  @class={{this.class}}
-  @isIndeterminate={{this.isIndeterminate}}
-  @checked={{this.checked}}
-  @isDisabled={{this.isDisabled}}
-  disabled={{this.disabled}}
-  @size={{this.size}}
-  @subLabel={{this.subLabel}}
-  @requiredLabel={{this.requiredLabel}}
-  @inlineLabel={{this.inlineLabel}}
-  @screenReaderOnly={{this.screenReaderOnly}}
->
-  <:label>{{this.label}}</:label>
-</PixCheckbox>`,
-    context: args,
-  };
-};
-
-const FullWidthTemplate = (args) => {
-  return {
-    template: hbs`{{! template-lint-disable no-inline-styles }}
-<div
-  style='border: 1px solid var(--pix-neutral-500); background: var(--pix-neutral-20); padding: var(--pix-spacing-4x); width: 500px'
-><PixCheckbox @id={{this.id}} @isIndeterminate={{false}}>
-    <:label>{{this.label}}</:label>
-  </PixCheckbox></div>`,
-    context: args,
-  };
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  id: 'accept-newsletter',
-  label: 'Recevoir la newsletter',
-};
-
-export const DefaultChecked = Template.bind({});
-DefaultChecked.args = {
-  id: 'accept-newsletter',
-  label: 'Recevoir la newsletter',
-  checked: true,
-};
-
-export const FullWidth = FullWidthTemplate.bind({});
-FullWidth.args = {
-  id: 'proposal',
-  label: 'Une réponse',
-};
-
-export const isIndeterminate = Template.bind({});
-isIndeterminate.args = {
-  id: 'accept-newsletter-2',
-  label: 'Recevoir la newsletter',
-  isIndeterminate: true,
-  checked: true,
-};
-
-export const withSmallLabel = Template.bind({});
-withSmallLabel.args = {
-  id: 'accept-newsletter-2',
-  label: 'Recevoir la newsletter',
-  size: 'small',
-};
-
-export const withLargeLabel = Template.bind({});
-withLargeLabel.args = {
-  id: 'accept-newsletter-2',
-  label: 'Recevoir la newsletter',
-  size: 'large',
-};
-
-export const isDisabled = Template.bind({});
-isDisabled.args = {
-  id: 'accept-newsletter-2',
-  label: 'Recevoir la newsletter',
-  isDisabled: true,
-};
-
-export const checkedIsDisabled = Template.bind({});
-checkedIsDisabled.args = {
-  id: 'accept-newsletter-2',
-  label: 'Recevoir la newsletter',
-  isDisabled: true,
-  checked: true,
-};
-
-export const isIndeterminateIsDisabled = Template.bind({});
-isIndeterminateIsDisabled.args = {
-  id: 'accept-newsletter-2',
-  label: 'Recevoir la newsletter',
-  isDisabled: true,
-  checked: true,
-  isIndeterminate: true,
-};
-
-const MultipleTemplate = (args) => {
-  return {
-    template: hbs`<PixCheckbox
-  @id='one'
-  @class={{this.class}}
-  @screenReaderOnly={{this.screenReaderOnly}}
-  @isIndeterminate={{this.isIndeterminate}}
-  @size={{this.size}}
-  @checked={{this.checked}}
-  disabled={{this.disabled}}
-  @isDisabled={{this.isDisabled}}
->
-  <:label>{{this.label}}</:label>
-</PixCheckbox>
-<PixCheckbox
-  @id='two'
-  @class={{this.class}}
-  @screenReaderOnly={{this.screenReaderOnly}}
-  @isIndeterminate={{this.isIndeterminate}}
-  @size={{this.size}}
-  @checked={{this.checked}}
-  disabled={{this.disabled}}
-  @isDisabled={{this.isDisabled}}
->
-  <:label>{{this.label}}</:label>
-</PixCheckbox>`,
-    context: args,
-  };
-};
-
-export const multiple = MultipleTemplate.bind({});
-multiple.args = {
-  label: 'Recevoir la newsletter',
-};

package/app/stories/pix-collapsible.mdx

@@ -1,37 +0,0 @@
-import { Meta, Story, ArgTypes } from '@storybook/blocks';
-import * as ComponentStories from './pix-collapsible.stories';
-
-<Meta of={ComponentStories} />
-
-# PixCollapsible
-
-Un `PixCollapsible` est un élément comprenant un libellé et un contenu.
-Par défaut le contenu est masqué et cliquer sur le libellé permet de montrer le contenu du `PixCollapsible`.
-
-> Il est possible de cumuler les `PixCollapsible` de sorte à former un accordéon, il suffit de les mettre dans une même div parente.
-
-
-<Story of={ComponentStories.collapsible} height={150} />
-
-<Story of={ComponentStories.collapsibleWithBlockTitle} height={150} />
-
-<Story of={ComponentStories.multipleCollapsible} height={260} />
-
-### Collapsible avec tag
-Les paramètres `tagContent` et `tagColor` permettent d'afficher un `Pix Tag` près du chevron.
-
-
-<Story of={ComponentStories.collapsibleWithTag} height={260} />
-
-
-## Usage
-
-```html
-<PixCollapsible @title="Titre du contenu à dérouler en cliquant" @iconTitle="user">
-  <p>Contenu du PixCollapsible</p>
-</PixCollapsible>
-```
-
-## Arguments
-
-<ArgTypes of={ComponentStories} />

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

@@ -1,104 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-
-export default {
-  title: 'Others/Collapsible',
-  argTypes: {
-    title: {
-      name: 'title',
-      description: 'Intitulé du contenu du PixCollapsible',
-      type: { name: 'string', required: true },
-    },
-    titleIcon: {
-      name: 'titleIcon',
-      description: "Ajoute l'icône donnée en paramètre avant le titre du PixCollapsible",
-      type: { name: 'string', required: false },
-    },
-    tagContent: {
-      name: 'tagContent',
-      description: "Contenu du tag qui s'affiche près du chevron",
-      type: { name: 'string', required: false },
-    },
-    tagColor: {
-      name: 'tagColor',
-      description:
-        "Couleur du tag qui s'affiche près du chevron. Doit s'ajouter avec le paramètre tagContent. Voir le composant Pix Tag pour les couleurs disponibles",
-      type: { name: 'string', required: false },
-      table: { defaultValue: { summary: 'primary' } },
-    },
-  },
-};
-
-const Template = (args) => {
-  return {
-    template: hbs`<PixCollapsible @title={{this.title}} @titleIcon={{this.titleIcon}}>
-  <div>Contenu du PixCollapsible</div>
-</PixCollapsible>`,
-    context: args,
-  };
-};
-
-export const collapsible = Template.bind({});
-collapsible.args = {
-  title: 'Titre du contenu à dérouler en cliquant',
-  titleIcon: 'user',
-};
-
-export const collapsibleWithBlockTitle = (args) => {
-  return {
-    template: hbs`<PixCollapsible @titleIcon={{this.titleIcon}}>
-  <:title>
-    <span>Titre avec <em>contenu de type block</em></span>
-  </:title>
-  <:default>
-    <div>Contenu du PixCollapsible</div>
-  </:default>
-</PixCollapsible>`,
-    context: args,
-  };
-};
-
-export const multipleCollapsible = (args) => {
-  return {
-    template: hbs`<div>
-  <PixCollapsible @title='Titre A' @titleIcon={{this.titleIcon}}>
-    <div>Contenu A</div>
-  </PixCollapsible>
-
-  <PixCollapsible @title='Titre B' @titleIcon={{this.titleIcon}}>
-    <div>Contenu B</div>
-  </PixCollapsible>
-
-  <PixCollapsible @title='Titre C' @titleIcon={{this.titleIcon}}>
-    <div>Contenu C</div>
-  </PixCollapsible>
-</div>`,
-    context: args,
-  };
-};
-
-export const collapsibleWithTag = (args) => {
-  return {
-    template: hbs`{{! template-lint-disable no-inline-styles }}
-<div style='width:800px'>
-  {{! template-lint-disable no-inline-styles }}
-  <PixCollapsible
-    @title='Titre A'
-    @titleIcon={{this.titleIcon}}
-    @tagColor='success'
-    @tagContent='tag 1'
-  >
-    <div>Contenu A</div>
-  </PixCollapsible>
-
-  <PixCollapsible
-    @title='Titre B'
-    @titleIcon={{this.titleIcon}}
-    @tagColor='error'
-    @tagContent='tag 2'
-  >
-    <div>Contenu B</div>
-  </PixCollapsible>
-</div>`,
-    context: args,
-  };
-};

package/app/stories/pix-filter-banner.mdx

@@ -1,26 +0,0 @@
-import { Meta, Story, ArgTypes } from '@storybook/blocks';
-import * as ComponentStories from './pix-filter-banner.stories.js';
-
-<Meta of={ComponentStories} />
-
-# Pix Filter Banner
-
-Une `FilterBanner` permet de wrapper les éléments de filtres (`Select`, `Multi-Select`, ...).
-
-> Il est possible de surcharger le style d'une `<PixFilterBanner>` via l'attribut `class` ainsi que de passer n'importe quel attribut sur sa `div` wrapper (par exemple, un `aria-label`)
-
-<Story of={ComponentStories.filterBanner} height={80} />
-
-## Usage
-
-```html
-<PixFilterBanner aria-label="Filtres sur les campagnes">
-  <PixSelect @options="{{options}}" @onChange="{{onChange}}" />
-  <PixSelect @options="{{options}}" @onChange="{{onChange}}" />
-  <PixSelect @options="{{options}}" @onChange="{{onChange}}" />
-</PixFilterBanner>
-```
-
-## Arguments
-
-<ArgTypes of={ComponentStories} />

package/app/stories/pix-filter-banner.stories.js

@@ -1,87 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Form/Filter banner',
-  argTypes: {
-    title: {
-      name: 'title',
-      description: 'Titre du filtre',
-      type: { name: 'string', required: false },
-    },
-    details: {
-      name: 'details',
-      description: 'Détails du filtre',
-      type: { name: 'string', required: false },
-    },
-    clearFiltersLabel: {
-      name: 'clearFiltersLabel',
-      description: 'libellé du bouton',
-      type: { name: 'string', required: false },
-    },
-    onClearFilters: {
-      name: 'onClearFilters',
-      description: 'fonction à appeler pour déclencher l’action de suppression des filtres',
-      type: { required: false },
-    },
-    isClearFilterButtonDisabled: {
-      name: 'isClearFilterButtonDisabled',
-      description: 'Désactiver le button de la suppresion des filtres',
-      type: { name: 'boolean', required: true },
-      control: { type: 'boolean' },
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-    },
-  },
-};
-
-export const filterBanner = (args) => {
-  return {
-    template: hbs`<PixFilterBanner
-  @title={{this.title}}
-  @details={{this.details}}
-  @clearFiltersLabel={{this.clearFiltersLabel}}
-  @onClearFilters={{this.onClearFilters}}
-  @isClearFilterButtonDisabled={{this.isClearFilterButtonDisabled}}
->
-  <PixSelect
-    @options={{this.options}}
-    @onChange={{this.onChange}}
-    @screenReaderOnly={{true}}
-    @placeholder='placeholer'
-  >
-    <:label>mon label</:label>
-  </PixSelect>
-  <PixSelect
-    @options={{this.options}}
-    @onChange={{this.onChange}}
-    @screenReaderOnly={{true}}
-    @placeholder='placeholer'
-  >
-    <:label>mon label</:label>
-  </PixSelect>
-  <PixSelect
-    @options={{this.options}}
-    @onChange={{this.onChange}}
-    @screenReaderOnly={{true}}
-    @placeholder='placeholer'
-  >
-    <:label>mon label</:label>
-  </PixSelect>
-</PixFilterBanner>`,
-    context: args,
-  };
-};
-filterBanner.args = {
-  title: 'Filtres',
-  details: 'Des détails sur le filtre',
-  clearFiltersLabel: 'Effacer les filtres',
-  options: [
-    { value: '1', label: 'Tomate' },
-    { value: '2', label: 'Mozza' },
-  ],
-  onChange: action('select-onchange'),
-  onClearFilters: action('onClearFilters'),
-};

package/app/stories/pix-filterable-and-searchable-select.mdx

@@ -1,62 +0,0 @@
-import { Meta, Story, ArgTypes } from '@storybook/blocks';
-import * as ComponentStories from './pix-filterable-and-searchable-select.stories.js';
-
-<Meta of={ComponentStories} />
-
-# Pix Filterable and searchable select
-
-Ce composant est la fusion de deux autres composants: PixMultiSelect et PixSelect.
-
-Il permet de sélectionner une option, de filter sur la liste des options en fonction de leur catégorie afin de simplifier la sélection.
-
-Les options sont représentées par un tableau d'objet contenant les propriétés value, label et category.
-
-> **⚠️** **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={400}/>
-
-## Searchable
-
-<Story of={ComponentStories.Searchable} height={400}/>
-
-## With labels only for screenReaders
-
-<Story of={ComponentStories.WithLabelsOnlyForScreenReaders} height={400}/>
-
-## Usage
-
-```html
-<PixFilterableAndSearchableSelect
-  @selectLabel="{{selectLabel}}"
-  @placeholder="{{placeholder}}"
-  @options="{{options}}"
-  @value="{{value}}"
-  @isSearchable="{{isSearchable}}"
-  @hideDefaultOption="{{hideDefaultOption}}"
-  @searchPlaceholder="{{searchPlaceholder}}"
-  @emptySearchMessage="{{emptySearchMessage}}"
-  @errorMessage="{{errorMessage}}"
-  @onChange="{{onChange}}"
-  @categoriesPlaceholder="{{categoriesPlaceholder}}"
-  @categoriesEmptyMessage="{{categoriesEmptyMessage}}"
-  @errorMessage="{{errorMessage}}"
-
-  @sublabel="{{sublabel}}"
-  @screenReaderOnly="{{screenReaderOnly}}"
-  @inlineLabel="{{inlineLabel}}"
-  @searchLabel="{{searchLabel}}"
-  @requiredLabel="{{requiredLabel}}">
-  <:label>{{label}}</:label>
-  <:categoriesLabel>{{categoriesLabel}}</:categoriesLabel>
-</PixFilterableAndSearchableSelect>
-```
-
-## Arguments
-
-<ArgTypes of={ComponentStories} />