@1024pix/pix-ui 46.13.1 → 46.13.3

package/app/stories/pix-button-upload.stories.js

@@ -1,81 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Basics/ButtonUpload',
-  argTypes: {
-    id: {
-      name: 'id',
-      description: "identifiant du bouton d'upload",
-      type: { name: 'string', required: true },
-    },
-    onChange: {
-      name: 'onChange',
-      description:
-        "fonction à exécuter au moment de l'upload du fichier, elle prend en entrée la liste des fichiers uploadés.",
-      type: { name: 'function', required: true },
-    },
-    variant: {
-      name: 'variant',
-      description:
-        'color: `primary`, `primary-bis`, `secondary`,`tertiary`, `success`, `error`, `transparent-dark`',
-      options: [
-        'primary',
-        'primary-bis',
-        'secondary',
-        'tertiary',
-        'success',
-        'error',
-        'transparent-dark',
-      ],
-      type: { name: 'string', required: false },
-      control: { type: 'select' },
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'primary' },
-      },
-    },
-    size: {
-      name: 'size',
-      description: 'taille: `big`,`small`',
-      options: ['large', 'small'],
-      type: { name: 'string', required: false },
-      control: { type: 'select' },
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'small' },
-      },
-    },
-    isBorderVisible: {
-      name: 'isBorderVisible',
-      description:
-        'Paramètre utilisé seulement quand le `variant` est `secondary` ou `transparent-dark`',
-      type: { name: 'boolean', required: false },
-      control: { type: 'boolean' },
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-    },
-  },
-};
-
-export const buttonUpload = (args) => {
-  return {
-    template: hbs`<PixButtonUpload
-  @id={{this.id}}
-  @onChange={{this.onChange}}
-  @variant={{this.variant}}
-  @size={{this.size}}
-  @isBorderVisible={{this.isBorderVisible}}
->
-  Cliquer pour uploader un fichier
-</PixButtonUpload>`,
-    context: args,
-  };
-};
-
-buttonUpload.args = {
-  id: 'file-upload',
-  onChange: action('onChange'),
-};

package/app/stories/pix-button.mdx

@@ -1,79 +0,0 @@
-import { Meta, Story, ArgTypes } from '@storybook/blocks';
-import * as ComponentStories from './pix-button.stories';
-
-<Meta of={ComponentStories} />
-
-# Pix Button
-
-## Default
-
-Le bouton par défaut qui empêche les clics multiples.
-
-  <Story of={ComponentStories.Default} />
-
-## Variants
-
-Le bouton avec toutes ses variations
-
-  <Story of={ComponentStories.variants} height={500} />
-
-## Icons
-
-Le bouton avec des icônes `font-awesome` à afficher avant (`@iconBefore`) ou après (`@iconAfter`) le label.
-
-> ℹ️ Accessibilité : dans le cas où les icônes ont une valeur d'information (ex:&nbsp;un bouton `⬅️ Précédent`), il est important d'apporter un aria-label au bouton (ex:&nbsp;"Retour à la page précédente").
-
-  <Story of={ComponentStories.icons} height={75} />
-
-## Disabled
-
-Le bouton désactivé
-
-  <Story of={ComponentStories.disabled} height={75} />
-
-
-## Link
-
-Fonctionnalité dépréciée dans `<PixButton />`.
-
-Utiliser le composant `<PixButtonLink />` à la place.
-
-## Loader
-
-Le bouton avec loader.
-Le loader peut être affiché de deux façons :
-
-- En passant une promesse dans l'attribut `@triggerAction`
-- En passant directement l'attribut `@isLoading={{true}}`
-
- <Story of={ComponentStories.loader} height={150} />
-
-
-## Size
-
-Le bouton en large (small étant la valeur par défaut)
-
- <Story of={ComponentStories.size} height={75} />
-
-
-## Usage
-
-Un petit bouton avec les bords arrondis en fond transparent avec une bordure
-
-```html
-<PixButton
-  @triggerAction="{{action"
-  triggerAction}}
-  @loadingColor="white"
-  @variant="secondary"
-  @isDisabled="{{false}}"
-  @size="small"
-  @isBorderVisible="{{true}}"
->
-  Cliquez-moi
-</PixButton>
-```
-
-## Arguments
-
-<ArgTypes of={ComponentStories} />

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

@@ -1,270 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-
-export default {
-  title: 'Basics/Button',
-  argTypes: {
-    type: {
-      name: 'type',
-      description: 'type du bouton',
-      type: { required: false },
-      control: { disable: true },
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'button' },
-      },
-    },
-    triggerAction: {
-      name: 'triggerAction',
-      description: 'fonction à appeler en cas de clic, optionnel si le bouton est de type submit',
-      type: { required: true },
-      control: { disable: true },
-    },
-    loadingColor: {
-      name: 'loadingColor',
-      description: 'couleur de chargement: `white`, `grey`',
-      type: { name: 'string', required: false },
-      options: ['white', 'grey'],
-      control: { type: 'select' },
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'white' },
-      },
-    },
-    variant: {
-      name: 'variant',
-      description:
-        'color: `primary`, `primary-bis`, `secondary`,`tertiary`, `success`, `error`, `transparent-dark`',
-      options: [
-        'primary',
-        'primary-bis',
-        'secondary',
-        'tertiary',
-        'success',
-        'error',
-        'transparent-dark',
-      ],
-      type: { name: 'string', required: false },
-      control: { type: 'select' },
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'primary' },
-      },
-    },
-    iconBefore: {
-      name: 'iconBefore',
-      description: `Nom de l'icône font-awesome à afficher **avant** le label`,
-      type: { name: 'string', required: false },
-      control: { type: 'select' },
-      options: ['magnifying-glass', 'plus', 'xmark'],
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: null },
-      },
-    },
-    iconAfter: {
-      name: 'iconAfter',
-      description: `Nom de l'icône font-awesome à afficher **après** le label`,
-      type: { name: 'string', required: false },
-      control: { type: 'select' },
-      options: ['magnifying-glass', 'plus', 'xmark'],
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: null },
-      },
-    },
-    prefixIconBefore: {
-      name: 'prefixIconBefore',
-      description: `Permet d'ajouter un préfix à l'icone devant le label pour appliquer un style particulier`,
-      type: { name: 'string', required: false },
-      control: { type: 'select' },
-      options: ['fas', 'far'],
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: null },
-      },
-    },
-    prefixIconAfter: {
-      name: 'prefixIconAfter',
-      description: `Permet d'ajouter un préfix à l'icone derrière le label pour appliquer un style particulier`,
-      type: { name: 'string', required: false },
-      control: { type: 'select' },
-      options: ['fas', 'far'],
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: null },
-      },
-    },
-    isDisabled: {
-      name: 'isDisabled',
-      type: { name: 'boolean', required: false },
-      control: { type: 'boolean' },
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-    },
-    isLoading: {
-      name: 'isLoading',
-      description:
-        'Affiche un loader. Si `@triggerAction` retourne une promesse alors le loading est géré automatiquement.',
-      type: { name: 'boolean', required: false },
-      control: { type: 'boolean' },
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-    },
-    size: {
-      name: 'size',
-      description: 'taille: `large`,`small`',
-      options: ['large', 'small'],
-      type: { name: 'string', required: false },
-      control: { type: 'select' },
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'small' },
-      },
-    },
-    isBorderVisible: {
-      name: 'isBorderVisible',
-      description:
-        'Paramètre utilisé seulement quand le `variant` est `secondary` ou `transparent-dark`',
-      type: { name: 'boolean', required: false },
-      control: { type: 'boolean' },
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-    },
-  },
-};
-
-const Template = (args) => ({
-  template: hbs`<section style={{this.style}}>
-  <PixButton
-    @triggerAction={{this.triggerAction}}
-    @loadingColor={{this.loadingColor}}
-    @variant={{this.variant}}
-    @isDisabled={{this.isDisabled}}
-    @isLoading={{this.isLoading}}
-    @size={{this.size}}
-    @isBorderVisible={{this.isBorderVisible}}
-    @iconBefore={{this.iconBefore}}
-    @iconAfter={{this.iconAfter}}
-    @prefixIconBefore={{this.prefixIconBefore}}
-    @prefixIconAfter={{this.prefixIconAfter}}
-  >
-    {{this.label}}
-  </PixButton>
-</section>
-{{#each this.extraButtons as |button|}}
-  <section style={{button.style}}>
-    <PixButton
-      @triggerAction={{this.triggerAction}}
-      @loadingColor={{button.loadingColor}}
-      @variant={{button.variant}}
-      @isDisabled={{button.isDisabled}}
-      @isLoading={{button.isLoading}}
-      @size={{button.size}}
-      @isBorderVisible={{button.isBorderVisible}}
-      @iconBefore={{button.iconBefore}}
-      @iconAfter={{button.iconAfter}}
-      @prefixIconBefore={{this.prefixIconBefore}}
-      @prefixIconAfter={{this.prefixIconAfter}}
-    >
-      {{button.label}}
-    </PixButton>
-  </section>
-{{/each}}`,
-  context: args,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  loadingColor: 'white',
-  variant: 'primary',
-  label: 'Bouton',
-};
-
-export const variants = Template.bind({});
-variants.args = {
-  ...Default.args,
-  label: 'Bouton primary (default)',
-  extraButtons: [
-    {
-      ...Default.args,
-      label: 'Bouton primary-bis',
-      variant: 'primary-bis',
-      loadingColor: 'grey',
-    },
-    {
-      ...Default.args,
-      label: 'Bouton secondary',
-      variant: 'secondary',
-    },
-    {
-      ...Default.args,
-      label: 'Bouton tertiary',
-      variant: 'tertiary',
-    },
-    {
-      ...Default.args,
-      label: 'Bouton success',
-      variant: 'success',
-    },
-    {
-      ...Default.args,
-      label: 'Bouton error',
-      variant: 'error',
-    },
-    {
-      ...Default.args,
-      label: 'Bouton avec bordure sur fond sombre (DEPRECATED)',
-      style: 'background-color: #775555',
-      variant: 'transparent-dark',
-      isBorderVisible: true,
-    },
-  ],
-};
-
-export const icons = Template.bind({});
-icons.args = {
-  ...Default.args,
-  iconBefore: 'magnifying-glass',
-  iconAfter: 'plus',
-};
-
-export const disabled = Template.bind({});
-disabled.args = {
-  ...Default.args,
-  label: 'Bouton désactivé',
-  isDisabled: true,
-};
-
-export const loader = Template.bind({});
-loader.args = {
-  ...Default.args,
-  label: 'Bouton avec loader au clic',
-  variant: 'primary-bis',
-  loadingColor: 'grey',
-  triggerAction: () => {
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        resolve();
-      }, 2000);
-    });
-  },
-  extraButtons: [
-    {
-      ...Default.args,
-      isLoading: true,
-    },
-  ],
-};
-
-export const size = Template.bind({});
-size.args = {
-  ...Default.args,
-  label: 'Bouton large',
-  size: 'large',
-};

package/app/stories/pix-checkbox-variant-tile.mdx

@@ -1,49 +0,0 @@
-import { Meta, Story, ArgTypes } from '@storybook/blocks';
-import * as ComponentStories from './pix-checkbox-variant-tile.stories';
-
-<Meta of={ComponentStories} />
-
-# PixCheckbox `@variant="title"`
-
-La PixCheckbox permet de créer des checkbox basiques ou des checkbox mixées (checkbox servant d'indicateur lors d'une sélection multiple).
-Un cursor `pointer` est défini sur la checkbox et son label par défaut.
-
-La checkbox et son label sont visuellement regroupés dans un ensemble intégralement cliquable.
-
-<Story of={ComponentStories.VariantTile} height={120} />
-
-## États de la Checkbox
-
-### Checkbox désactivée
-
-L'attribut `@isDisabled` permet de désactiver la checkbox en conservant la possibilité de naviguer avec le clavier ou le lecteur d'écran. Il est préféré à l'attribut natif `disabled` qui empêche ces usages.
-Un cursor `not-allowed` est défini sur la checkbox et son label lorsqu'elle est dans un état `disabled`.
-
-<Story of={ComponentStories.isDisabledVariantTile} height={120} />
-<Story of={ComponentStories.checkedIsDisabledVariantTile} height={120} />
-<Story of={ComponentStories.isIndeterminateIsDisabledVariantTile} height={120} />
-
-#### Succès/Erreur
-
-Cumulée à la désactivation, une propriété de statut permet de préciser une coloration particulière en cas de "succès" ou d'"erreur".
-
-<Story of={ComponentStories.isDisabledIsSuccessVariantTile} height={120} />
-<Story of={ComponentStories.isDisabledIsErrorVariantTile} height={120} />
-
-## Usage
-
-```html
-<PixCheckbox
-  @screenReaderOnly={{false}}
-  @isIndeterminate={{false}}
-  @size="small"
-  @isDisabled={{true}}
-  @variant="tile"
->
-  <:label>Recevoir la newsletter</:label>
-</PixCheckbox>
-```
-
-## Arguments
-
-<ArgTypes of={ComponentStories} />

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

@@ -1,102 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-import pixCheckboxStories from './pix-checkbox.stories.js';
-
-export default {
-  title: 'Form/Inputs/Checkbox/Variant Tile',
-  argTypes: {
-    variant: {
-      name: 'variant',
-      description: 'Utiliser une variante graphique du composant',
-      options: ['tile'],
-      control: { type: 'select' },
-      type: { required: true },
-    },
-    state: {
-      name: 'state',
-      description: 'Si `isDisabled` permet de marquer la checkbox comme correcte ou incorrecte',
-      options: ['neutral', 'success', 'error'],
-      control: { type: 'select' },
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'neutral' },
-      },
-    },
-    ...pixCheckboxStories.argTypes,
-  },
-};
-
-const VariantTileTemplate = (args) => {
-  return {
-    template: hbs`{{! template-lint-disable no-inline-styles }}
-<div
-  style='border: 1px solid var(--pix-neutral-500); padding: var(--pix-spacing-4x); width: 500px'
-><PixCheckbox
-    @id={{this.id}}
-    @isIndeterminate={{this.isIndeterminate}}
-    @checked={{this.checked}}
-    @isDisabled={{this.isDisabled}}
-    @variant={{this.variant}}
-    @state={{this.state}}
-  >
-    <:label>{{this.label}}</:label>
-  </PixCheckbox></div>`,
-    context: args,
-  };
-};
-
-export const VariantTile = VariantTileTemplate.bind({});
-VariantTile.args = {
-  id: 'proposal',
-  label: 'Une réponse',
-  variant: 'tile',
-};
-
-export const isDisabledVariantTile = VariantTileTemplate.bind({});
-isDisabledVariantTile.args = {
-  id: 'accept-newsletter-2',
-  label: 'Recevoir la newsletter',
-  variant: 'tile',
-  state: 'neutral',
-  isDisabled: true,
-};
-
-export const checkedIsDisabledVariantTile = VariantTileTemplate.bind({});
-checkedIsDisabledVariantTile.args = {
-  id: 'accept-newsletter-2',
-  label: 'Recevoir la newsletter',
-  variant: 'tile',
-  state: 'neutral',
-  isDisabled: true,
-  checked: true,
-};
-
-export const isIndeterminateIsDisabledVariantTile = VariantTileTemplate.bind({});
-isIndeterminateIsDisabledVariantTile.args = {
-  id: 'accept-newsletter-2',
-  label: 'Recevoir la newsletter',
-  variant: 'tile',
-  state: 'neutral',
-  isDisabled: true,
-  checked: true,
-  isIndeterminate: true,
-};
-
-export const isDisabledIsSuccessVariantTile = VariantTileTemplate.bind({});
-isDisabledIsSuccessVariantTile.args = {
-  id: 'accept-newsletter-2',
-  label: 'Recevoir la newsletter',
-  variant: 'tile',
-  isDisabled: true,
-  checked: true,
-  state: 'success',
-};
-
-export const isDisabledIsErrorVariantTile = VariantTileTemplate.bind({});
-isDisabledIsErrorVariantTile.args = {
-  id: 'accept-newsletter-2',
-  label: 'Recevoir la newsletter',
-  variant: 'tile',
-  isDisabled: true,
-  checked: true,
-  state: 'error',
-};

package/app/stories/pix-checkbox.mdx

@@ -1,75 +0,0 @@
-import { Meta, Story, ArgTypes } from '@storybook/blocks';
-import * as ComponentStories from './pix-checkbox.stories';
-import * as VariantTileStories from './pix-checkbox-variant-tile.stories';
-
-<Meta of={ComponentStories} />
-
-# PixCheckbox
-
-La PixCheckbox permet de créer des checkbox basiques ou des checkbox mixées (checkbox servant d'indicateur lors d'une sélection multiple).
-Un cursor `pointer` est défini sur la checkbox et son label par défaut.
-
-<Story of={ComponentStories.Default} height={60} />
-
-<Story of={ComponentStories.DefaultChecked} height={60} />
-
-### Liste de checkboxes
-
-Il n'est pas rare d'avoir plusieurs champs checkbox qui se suivent.<br/>
-En ce sens, nous avons déjà prévu un espace vertical pour séparer 2 composants qui se suivent.
-
-<Story of={ComponentStories.multiple} height={140} />
-
-### Variations graphiques du composant
-
-La PixCheckbox prend toute la largeur à sa disposition par défaut.
-
-<Story of={ComponentStories.FullWidth} height={100} />
-
-Si le paramètre `variant` est précisé avec la valeur `tile`, la checkbox et son label sont visuellement regroupés dans un ensemble intégralement cliquable.
-
-<Story of={VariantTileStories.VariantTile} height={120} />
-
-Voir la [documentation de la variante `tile`](?path=/docs/form-inputs-checkbox-variant-tile--docs).
-
-## États de la Checkbox
-
-<br />
-
-### Checkbox interminée
-
-<Story of={ComponentStories.isIndeterminate} height={60} />
-
-### Checkbox désactivée
-
-L'attribut `@isDisabled` permet de désactiver la checkbox en conservant la possibilité de naviguer avec le clavier ou le lecteur d'écran. Il est préféré à l'attribut natif `disabled` qui empêche ces usages.
-Un cursor `not-allowed` est défini sur la checkbox et son label lorsqu'elle est dans un état `disabled`.
-
-<Story of={ComponentStories.isDisabled} height={60} />
-<Story of={ComponentStories.checkedIsDisabled} height={60} />
-<Story of={ComponentStories.isIndeterminateIsDisabled} height={60} />
-
-## Autres tailles de police du label
-
-<br />
-
-### Small
-
-<Story of={ComponentStories.withSmallLabel} height={60} />
-
-## Usage
-
-```html
-<PixCheckbox
-  @screenReaderOnly={{false}}
-  @isIndeterminate={{false}}
-  @size="small"
-  @isDisabled={{true}}
->
-  <:label>Recevoir la newsletter</:label>
-</PixCheckbox>
-```
-
-## Arguments
-
-<ArgTypes of={ComponentStories} />