@1024pix/pix-ui 46.13.1 → 46.13.3

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

@@ -1,76 +0,0 @@
-import { Meta, Story, ArgTypes } from '@storybook/blocks';
-import * as ComponentStories from './pix-input-password.stories';
-
-<Meta of={ComponentStories} />
-
-# Pix Input Password
-
-Champ pour le mot de passe, avec un `PixIconButton` pour l'afficher ou le masquer.
-
-> Pensez à renseigner l'`autocomplete` selon l'utilisation du composant.
-
-## Accessibilité
-
-Si vous utilisez le `PixInputPassword` sans vouloir afficher le label, il faudra renseigner `screenReaderOnly` à `true`.
-
-```html
-<PixInputPassword @screenReaderOnly={{true}} @id="{{id}}">
-  <:label>{{label}}</:label>
-</PixInputPassword>
-```
-
-## Default
-
-
-<Story of={ComponentStories.Default} height={100} />
-
-
-## With label and subLabel
-
-
-<Story of={ComponentStories.withLabelAndInformation} height={110} />
-
-
-## Error state (with error message)
-
-
-<Story of={ComponentStories.errorState} height={110} />
-
-
-## Success state
-
-
-<Story of={ComponentStories.successState} height={100} />
-
-
-## With prefix
-
-
-<Story of={ComponentStories.withPrefix} height={100} />
-
-
-## With required label
-
-
-<Story of={ComponentStories.withRequiredLabel} height={100} />
-
-
-## Usage
-
-```html
-<PixInputPassword
-  @id="password"
-  @subLabel="8 caractères dont une majuscule..."
-  @value="pix123"
-  @errorMessage="Le mot de passe est erroné"
-  @validationStatus="default"
-  @prefix="C-"
-  @requiredLabel="Champ obligatoire"
->
-  <:label>Mot de passe</:label>
-</PixInputPassword>
-```
-
-## Arguments
-
-<ArgTypes of={ComponentStories} />

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

@@ -1,145 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-
-export default {
-  title: 'Form/Inputs/Password',
-  argTypes: {
-    id: {
-      name: 'id',
-      description: 'Identifiant du champ permettant de lui attacher un label',
-      type: { name: 'string', required: true },
-    },
-    value: {
-      name: 'value',
-      description: "Valeur de l'input",
-      type: { name: 'string', required: false },
-    },
-    validationStatus: {
-      name: 'validationStatus',
-      description:
-        "Définit l'état du champ, neutre par défaut, en succès ou erreur selon l'action de l'utilisateur",
-      type: { name: 'string', required: false },
-      options: ['default', 'success', 'error'],
-      control: { type: 'select' },
-    },
-    errorMessage: {
-      name: 'errorMessage',
-      description:
-        "Affiche le message d'erreur donné. Doit s'accompagner du paramètre validationStatus en 'error'",
-      type: { name: 'string', required: false },
-    },
-    prefix: {
-      name: 'prefix',
-      description: 'Affiche un préfixe avant la zone de saisie du champ',
-      type: { name: 'string', required: false },
-    },
-
-    label: {
-      name: 'label',
-      description: 'Le label du champ',
-      type: { name: 'string', required: true },
-    },
-    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`<PixInputPassword
-  @id={{this.id}}
-  @errorMessage={{this.errorMessage}}
-  @prefix={{this.prefix}}
-  @validationStatus={{this.validationStatus}}
-  @size={{this.size}}
-  @subLabel={{this.subLabel}}
-  @inlineLabel={{this.inlineLabel}}
-  @requiredLabel={{this.requiredLabel}}
-  @screenReaderOnly={{this.screenReaderOnly}}
->
-  <:label>{{this.label}}</:label>
-</PixInputPassword>`,
-    context: args,
-  };
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  id: 'first-name',
-  ariaLabel: 'Mot de passe',
-};
-
-export const withLabelAndInformation = Template.bind({});
-withLabelAndInformation.args = {
-  id: 'password',
-  label: 'Mot de passe',
-  subLabel: 'Une brève information',
-};
-
-export const errorState = Template.bind({});
-errorState.args = {
-  id: 'password',
-  label: 'Mot de passe',
-  errorMessage: "un message d'erreur",
-  validationStatus: 'error',
-};
-
-export const successState = Template.bind({});
-successState.args = {
-  id: 'password',
-  label: 'Mot de passe',
-  validationStatus: 'success',
-};
-
-export const withPrefix = Template.bind({});
-withPrefix.args = {
-  id: 'password',
-  label: 'Mot de passe',
-  prefix: 'C -',
-};
-
-export const withRequiredLabel = Template.bind({});
-withRequiredLabel.args = {
-  id: 'password',
-  label: 'Mot de passe',
-  requiredLabel: 'Champ obligatoire',
-};

package/app/stories/pix-input.mdx

@@ -1,104 +0,0 @@
-import { Meta, Story, ArgTypes } from '@storybook/blocks';
-import * as ComponentStories from './pix-input.stories';
-
-<Meta of={ComponentStories} />
-
-# Pix Input
-
-Le PixInput permet de créer un champ de texte.
-
-## Accessibilité
-
-La propriété label est optionnelle pour le composant.
-
-Mais au niveau de l'accessibilité, il est quand même nécessaire que le champ soit rattaché à un label.
-
-Il y a alors plusieurs possibilités :
-
-- Vous pouvez cacher le label visuellement mais le rendre disponible pour les lecteurs d'écran via la propriété `screenReaderOnly` à `true`.
-- Les attributs `aria-label` et `aria-labelledby` sont utilisables.
-- Un attribut `@for` pointant vers l'id de l'input peut être ajouté à un composant `<PixLabel />` extérieur.
-
-## Tests
-
-Pour acceder à l'élément via son label avec testing-library:
-
-```html
-<PixInput @id="firstName" />
-  <:label>Prénom</:label>
-</PixInput>
-```
-
-```javascript
-screen.getByLabelText('Prénom');
-```
-
-Si le paramètre @subLabel est utilisé, il faudra concatener les valeurs de `label` et `@subLabel`
-
-```html
-<PixInput @id="firstName" @subLabel="exemple: Barry">
-  <:label>Prénom</:label>
-</PixInput>
-```
-
-```javascript
-screen.getByLabelText('Prénom exemple: Barry');
-```
-
-## Default
-
-<Story of={ComponentStories.Default} height={100} />
-
-## With label and subLabel
-
-<Story of={ComponentStories.withLabel} height={110} />
-
-## Error state (with error message)
-
-<Story of={ComponentStories.errorState} height={110} />
-
-## Success state
-
-<Story of={ComponentStories.successState} height={100} />
-
-## Disabled & readonly states
-
-[📖 Lire la différence entre les 2 états.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly#attribute_interactions)
-
-#### Disabled
-
-Un input désactivé n'est pas focusable et n'est pas censé être envoyé à la soumission de formulaire.
-
-<Story of={ComponentStories.disabledState} height={100} />
-
-#### Readonly
-
-En readonly, l'input n'est pas modifiable, mais il est toujours focusable et est soumis normalement.
-
-<Story of={ComponentStories.readonlyState} height={100} />
-
-## With required label
-
-<Story of={ComponentStories.withRequiredLabel} height={100} />
-
-## Without label
-
-<Story of={ComponentStories.withoutLabel} height={100} />
-
-## Usage
-
-```html
-<PixInput
-  @id="firstName"
-  @subLabel="Complément du label"
-  @errorMessage="Un message d`erreur"
-  @validationStatus="default"
-  @requiredLabel="Champ obligatoire"
->
-  <:label>Prénom</:label>
-</PixInput>
-```
-
-## Arguments
-
-<ArgTypes of={ComponentStories} />

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

@@ -1,175 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-
-export default {
-  title: 'Form/Inputs/Input',
-  argTypes: {
-    id: {
-      name: 'id',
-      description: 'Identifiant du champ permettant de lui attacher un label',
-      type: { name: 'string', required: true },
-    },
-    value: {
-      name: 'value',
-      description: "Valeur de l'input",
-      type: { name: 'string', required: false },
-    },
-    validationStatus: {
-      name: 'validationStatus',
-      description:
-        "Définit l'état du champ, neutre par défaut, en succès ou erreur selon l'action de l'utilisateur",
-      type: { name: 'string', required: false },
-      options: ['default', 'success', 'error'],
-      control: { type: 'select' },
-    },
-    errorMessage: {
-      name: 'errorMessage',
-      description:
-        "Affiche le message d'erreur donné. Doit s'accompagner du paramètre validationStatus en 'error'",
-      type: { name: 'string', required: false },
-    },
-
-    label: {
-      name: 'label',
-      description: 'Le label du champ',
-      type: { name: 'string', required: false },
-      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`<PixInput
-  @id={{this.id}}
-  @errorMessage={{this.errorMessage}}
-  placeholder='Jeanne, Pierre ...'
-  @validationStatus={{this.validationStatus}}
-  @size={{this.size}}
-  disabled={{this.disabled}}
-  readonly={{this.readonly}}
-  @subLabel={{this.subLabel}}
-  @inlineLabel={{this.inlineLabel}}
-  @requiredLabel={{this.requiredLabel}}
-  @screenReaderOnly={{this.screenReaderOnly}}
->
-  <:label>{{this.label}}</:label>
-</PixInput>`,
-    context: args,
-  };
-};
-
-const TemplateWithoutLabel = (args) => {
-  return {
-    template: hbs`<PixInput
-  @id={{this.id}}
-  @errorMessage={{this.errorMessage}}
-  placeholder='Jeanne, Pierre ...'
-  @validationStatus={{this.validationStatus}}
-  @size={{this.size}}
-  disabled={{this.disabled}}
-  readonly={{this.readonly}}
-  @subLabel={{this.subLabel}}
-  @inlineLabel={{this.inlineLabel}}
-  @requiredLabel={{this.requiredLabel}}
-/>`,
-    context: args,
-  };
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  id: 'first-name',
-  label: 'Prénom',
-};
-
-export const withLabel = Template.bind({});
-withLabel.args = {
-  id: 'first-name',
-  label: 'Prénom',
-  subLabel: 'a small information',
-};
-
-export const errorState = Template.bind({});
-errorState.args = {
-  id: 'first-name',
-  label: 'Prénom',
-  errorMessage: "un message d'erreur",
-  validationStatus: 'error',
-};
-
-export const successState = Template.bind({});
-successState.args = {
-  id: 'first-name',
-  label: 'Prénom',
-  validationStatus: 'success',
-};
-
-export const disabledState = Template.bind({});
-disabledState.args = {
-  id: 'first-name',
-  label: 'Prénom',
-  disabled: true,
-};
-
-export const readonlyState = Template.bind({});
-readonlyState.args = {
-  id: 'first-name',
-  label: 'Prénom',
-  readonly: true,
-};
-
-export const withRequiredLabel = Template.bind({});
-withRequiredLabel.args = {
-  id: 'first-name',
-  label: 'Prénom',
-  requiredLabel: 'Champ obligatoire',
-};
-
-export const withoutLabel = TemplateWithoutLabel.bind({});
-withoutLabel.args = {
-  id: 'first-name',
-};

package/app/stories/pix-label.mdx

@@ -1,47 +0,0 @@
-import { Meta, Story, ArgTypes } from '@storybook/blocks';
-import * as ComponentStories from './pix-label.stories';
-
-<Meta of={ComponentStories} />
-
-# Pix Label
-
-Le `PixLabel` permet de créer label pour un input donnée.
-Il existe une version `PixLabelWrapped` pour les `PixCheckox` / `PixRadioButton` qui permet d'inclure l'`input` à l'intérieur du son `label`
-
-## Accessibilité
-
-Cet élément ne s'utilise pas seul, il doit être accompagné d'un élément à identifier
-
-
-## Default
-
-<Story of={ComponentStories.Default} height={100} />
-
-## With label and information
-
-<Story of={ComponentStories.withSubLabel} height={110} />
-
-## With required label
-
-<Story of={ComponentStories.withRequiredLabel} height={100} />
-
-## Screen reader context
-
-<Story of={ComponentStories.screenReaderOnlyLabel} height={100} />
-
-## Usage
-
-```html
-<PixLabel
-  @id="firstName"
-  @subLabel="Complément du label"
-  @requiredLabel="Champ obligatoire"
-  @screenReaderOnly=true
-  @inlineLabel=true>
-  Prénom
-</PixLabel>
-```
-
-## Arguments
-
-<ArgTypes of={ComponentStories} />

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

@@ -1,112 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-
-export default {
-  title: 'Form/Label',
-  argTypes: {
-    for: {
-      name: 'for',
-      description: 'Identifiant du champ à rattacher au label',
-      type: { name: 'string', required: true },
-    },
-    label: {
-      name: 'label',
-      description: 'Le label du champ',
-      type: { name: 'string', required: true },
-    },
-    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 ( checkbox / radio )',
-      type: { name: 'boolean', required: false },
-      table: {
-        defaultValue: { summary: false },
-      },
-      control: { type: 'boolean' },
-    },
-    wrappedElement: {
-      name: 'wrappedElement',
-      description: "Permet de définir si le label englobe l'input associé",
-      type: { name: 'boolean', required: false },
-      table: {
-        defaultValue: { summary: false },
-      },
-      control: { type: 'boolean' },
-    },
-  },
-};
-
-const Template = (args) => {
-  return {
-    template: hbs`<PixLabel
-  @id={{this.id}}
-  @subLabel={{this.subLabel}}
-  @size={{this.size}}
-  @requiredLabel={{this.requiredLabel}}
-  @screenReaderOnly={{this.screenReaderOnly}}
-  @inlineLabel={{this.inlineLabel}}
->
-  {{this.label}}
-</PixLabel>`,
-    context: args,
-  };
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  id: 'first-name',
-  label: 'Prénom',
-};
-
-export const withSubLabel = Template.bind({});
-withSubLabel.args = {
-  id: 'first-name',
-  label: 'Prénom',
-  subLabel: 'a small information',
-};
-
-export const withRequiredLabel = Template.bind({});
-withRequiredLabel.args = {
-  id: 'first-name',
-  label: 'Prénom',
-  requiredLabel: 'Champ obligatoire',
-};
-
-export const screenReaderOnlyLabel = Template.bind({});
-screenReaderOnlyLabel.args = {
-  id: 'first-name',
-  label: 'Prénom',
-  screenReaderOnlyLabel: true,
-};

package/app/stories/pix-message.mdx

@@ -1,54 +0,0 @@
-import { Meta, Story, ArgTypes } from '@storybook/blocks';
-import * as ComponentStories from './pix-message.stories';
-
-<Meta of={ComponentStories} />
-
-# Pix Message
-
-Un bandeau d'information avec une icône facultative.
-
-## Default / Info
-
-Le bandeau est de type informatif sans icône (par défaut).
-
-<Story of={ComponentStories.Default} height={110} />
-
-## With icon
-
-Le bandeau avec une icône.
-
-<Story of={ComponentStories.withIcon} height={110} />
-
-## Warning
-
-Le bandeau en cas d'alerte.
-
-<Story of={ComponentStories.warning} height={110} />
-
-## Success
-
-Le bandeau en cas de validation.
-
-<Story of={ComponentStories.success} height={110} />
-
-## Error
-
-Le bandeau en cas de d'erreur.
-
-<Story of={ComponentStories.error} height={110} />
-
-## Alert
-
-⚠️ Ce type est déprécié, utilisez le type `error` à la place.
-
-## Usage
-
-Par défaut
-
-```html
-<PixMessage> Ceci est un message à caractère informatif. </PixMessage>
-```
-
-## Arguments
-
-<ArgTypes />