@1024pix/pix-ui 11.1.0

package/app/stories/pix-icon-button.stories.mdx

@@ -0,0 +1,90 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+import * as stories from './pix-icon-button.stories.js';
+
+<Meta
+  title='Basics/Icon button'
+  component='PixIconButton'
+  decorators={[centered]}
+  argTypes={stories.argTypes}
+/>
+
+# Pix Icon Button
+
+Le PixIconButton permet de créer un bouton contenant une icône font-awesome.
+
+## Default
+
+Le bouton en version big et sans fond grisé.
+
+<Canvas>
+  <Story name="Default" story={stories.Default} height={60} />
+</Canvas>
+
+## Small
+
+Le bouton en version small.
+
+<Canvas>
+  <Story name="Small" story={stories.small} height={60} />
+</Canvas>
+
+## With Background
+
+Le bouton avec le fond grisé.
+
+<Canvas>
+  <Story name="With Background" story={stories.withBackground} height={60} />
+</Canvas>
+
+## Accessibilité / aria-label
+
+L'attribut `aria-label` étant indispensable pour l'accessibilité de ce composant, la propriété `ariaLabel` a été ajouté.
+
+## Color
+
+⚠️ Cette propriété est **dépréciée**. L'icône du bouton ne peut avoir qu'une seule couleur.
+
+## Usage
+
+Par défaut
+```html
+<PixIconButton
+    @ariaLabel="L'action du bouton"
+    @icon="icon"
+    @triggerAction={{triggerAction}}
+/>
+```
+
+Bouton de fermeture
+```html
+<PixIconButton
+    @ariaLabel="L'action du bouton"
+    @icon="times"
+    @triggerAction={{triggerAction}}
+    @withBackground={{true}}
+/>
+```
+
+Bouton d'action
+```html
+<PixIconButton
+    @ariaLabel="L'action du bouton"
+    @icon="arrow-left"
+    @triggerAction={{triggerAction}}
+    @size="small"
+    @withBackground={{true}}
+/>
+```
+
+État disabled
+```html
+<PixIconButton
+    @ariaLabel="L'action du bouton"
+    @icon="times"
+    disabled={{true}}
+    aria-disabled={{true}}
+/>
+```
+
+<ArgsTable story="Default" />

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

@@ -0,0 +1,74 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export const Template = (args) => {
+  return {
+    template: hbs`
+      <PixInputCode
+        @ariaLabel={{ariaLabel}}
+        @legend={{legend}}
+        @inputType={{inputType}}
+        @numInputs={{numInputs}}
+        @explanationOfUse={{explanationOfUse}}
+      />
+    `,
+    context: args,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  ariaLabel: 'Champ',
+  legend: "Code de validation d'adresse e-mail",
+};
+
+export const argTypes = {
+  ariaLabel: {
+    name: 'ariaLabel',
+    description:
+      "L'aria-label de chaque champ. L'aria-label est automatiquement complété à la fin par ` <numero>`, où `<numero>` correspond à la position du champ dans le PixInputCode.",
+    type: { name: 'string', required: true },
+  },
+  legend: {
+    name: 'legend',
+    description:
+      "La description du composant. Ce champ n'est pas visible. Indiquer ce à quoi correspond votre PixInputCode.",
+    type: { name: 'string', required: true },
+  },
+  explanationOfUse: {
+    name: 'explanationOfUse',
+    description:
+      "Explication du fonctionnement des champs du PixInputCode. Ce champ n'est pas visible. Le texte par défaut est uniquement en Français. Veillez à donc le surchager avec vos traductions. Par ailleurs, le texte par défaut change selon le type du champ du PixInputCode",
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+      defaultValue: {
+        summary:
+          'Pour se déplacer de champ en champ vous pouvez utiliser la tabulation ou bien les flèches gauche et droite de votre clavier. Pour remplir un champ vous pouvez utiliser des chiffres de 1 à 9 ou bien les flèches haut et bas de votre clavier pour incrémenter de 1 la valeur du champ.',
+      },
+    },
+  },
+  inputType: {
+    name: 'inputType',
+    description: 'Le type de chaque champ : `number` ou `text`',
+    type: { name: 'string', required: false },
+    options: ['number', 'text'],
+    control: { type: 'select' },
+    table: {
+      defaultValue: { summary: 'number' },
+    },
+  },
+  numInputs: {
+    name: 'numInputs',
+    description: 'Le nombre de champ',
+    type: { name: 'number', required: false },
+    table: {
+      defaultValue: { summary: 6 },
+    },
+  },
+  onAllInputsFilled: {
+    name: 'onAllInputsFilled',
+    description: 'Fonction appelée (avec le code en paramètre) une fois tous les champs remplis',
+    type: { required: false },
+    control: { disable: true },
+  },
+};

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

@@ -0,0 +1,46 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+
+import * as stories from './pix-input-code.stories.js';
+
+<Meta
+  title='Form/Inputs/Code'
+  component='PixInputCode'
+  decorators={[centered]}
+  argTypes={stories.argTypes}
+/>
+
+# Pix Input Code
+
+Le `PixInputCode` permet d'associer plusieurs champs pour entrer un code reçu.
+
+Un aria-label est requis pour l'accessibilité.
+
+Par défaut il y a 6 champs mais le nombre est modifiable avec `numInputs`.
+
+Le composant peut être numérique ou alphanumérique précisé avec la propriété `inputType`, par défaut il est numérique.
+
+> ⚠️ N'oubliez pas de renseigner vous même la variable `@explanationOfUse` afin de garantir la gestion de traduction sur le composant PixInputCode.
+
+## Default
+
+<Canvas>
+  <Story name='Default' story={stories.Default} height={70}/>
+</Canvas>
+
+## Usage
+
+```html
+<PixInputCode
+    @ariaLabel="Champ"
+    @legend="Code correspondant au code de vérification envoyé par email"
+    @explanationOfUse="Détails d'utilisation du PixInputCode"
+    @numInputs={{6}}
+    @inputType="number"
+    @onAllInputsFilled={{(code) => {}}}
+/>
+```
+
+## Arguments
+
+<ArgsTable story="Default"/>

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

@@ -0,0 +1,89 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export const Template = (args) => {
+  return {
+    template: hbs`
+      <PixInputPassword
+        @ariaLabel={{ariaLabel}}
+        @id={{id}}
+        @label={{label}}
+        @information={{information}}
+        @errorMessage={{errorMessage}}
+        @prefix={{prefix}}
+      />
+    `,
+    context: args,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  id: 'firstName',
+  ariaLabel: 'Mot de passe',
+};
+
+export const withLabelAndInformation = Template.bind({});
+withLabelAndInformation.args = {
+  id: 'password',
+  label: 'Mot de passe',
+  information: 'Une brève information',
+};
+
+export const withErrorMessage = Template.bind({});
+withErrorMessage.args = {
+  id: 'password',
+  label: 'Mot de passe',
+  errorMessage: "Un message d'erreur.",
+};
+
+export const withPrefix = Template.bind({});
+withPrefix.args = {
+  id: 'password',
+  label: 'Mot de passe',
+  prefix: 'C -',
+};
+
+export const argTypes = {
+  id: {
+    name: 'id',
+    description: 'Identifiant du champ permettant de lui attacher un label',
+    type: { name: 'string', required: true },
+    defaultValue: null,
+  },
+  value: {
+    name: 'value',
+    description: "Valeur de l'input",
+    type: { name: 'string', required: false },
+    defaultValue: null,
+  },
+  label: {
+    name: 'label',
+    description: "Label de l'input. Requis si ariaLabel n'est pas définit.",
+    type: { name: 'string', required: true },
+    defaultValue: null,
+  },
+  ariaLabel: {
+    name: 'ariaLabel',
+    description: "L'action du bouton, pour l'accessibilité. Requis si label n'est pas définit.",
+    type: { name: 'string', required: true },
+    defaultValue: null,
+  },
+  information: {
+    name: 'information',
+    description: 'Un descriptif complétant le label',
+    type: { name: 'string', required: false },
+    defaultValue: null,
+  },
+  errorMessage: {
+    name: 'errorMessage',
+    description: "Affiche le message d'erreur donné et encadre en rouge le champ",
+    type: { name: 'string', required: false },
+    defaultValue: null,
+  },
+  prefix: {
+    name: 'prefix',
+    description: 'Affiche un préfixe avant la zone de saisie du champ',
+    type: { name: 'string', required: false },
+    defaultValue: null,
+  },
+};

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

@@ -0,0 +1,69 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+
+import * as stories from './pix-input-password.stories.js';
+
+<Meta
+  title='Form/Inputs/Password'
+  component='PixInputPassword'
+  decorators={[centered]}
+  argTypes={stories.argTypes}
+/>
+
+# 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 label alors il faut renseigner le paramètre `ariaLabel`, sinon le composant renvoie une erreur.
+
+> Si vous renseignez les paramètres label et ariaLabel ensemble, ariaLabel sera nullifié.
+
+```html
+<PixInputPassword @ariaLabel='{{ariaLabel}}' @id='{{id}}' />
+```
+
+## Default
+
+<Canvas>
+  <Story name='Default' story={stories.Default} height={100} />
+</Canvas>
+
+## With label and information
+
+<Canvas>
+  <Story story={stories.withLabelAndInformation} height={100} />
+</Canvas>
+
+## With error message
+
+<Canvas>
+  <Story story={stories.withErrorMessage} height={130} />
+</Canvas>
+
+## With prefix
+
+<Canvas>
+  <Story story={stories.withPrefix} height={100} />
+</Canvas>
+
+## Usage
+
+```html
+<PixInputPassword
+  @id='{{id}}'
+  @label='{{label}}'
+  @information='{{information}}'
+  @value='{{value}}'
+  @errorMessage='{{errorMessage}}'
+  @prefix='{{prefix}}'
+  @onChange='{{onChange}}'
+/>
+```
+
+## Arguments
+
+<ArgsTable story='Default' />

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

@@ -0,0 +1,94 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export const Template = (args) => {
+  return {
+    template: hbs`
+      <PixInput
+        @id={{id}}
+        @label={{label}}
+        @information={{information}}
+        @errorMessage={{errorMessage}}
+        @icon={{icon}}
+        @isIconLeft={{isIconLeft}}
+        placeholder='Jeanne, Pierre ...' />
+    `,
+    context: args,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  id: 'firstName',
+};
+
+export const withLabel = Template.bind({});
+withLabel.args = {
+  id: 'firstName',
+  label: 'Prénom',
+  information: 'a small information',
+};
+
+export const withErrorMessage = Template.bind({});
+withErrorMessage.args = {
+  id: 'firstName',
+  label: 'Prénom',
+  information: 'a small information',
+  errorMessage: "un message d'erreur",
+};
+
+export const withIcon = Template.bind({});
+withIcon.args = {
+  id: 'firstName',
+  label: 'Prénom',
+  icon: 'eye',
+};
+
+export const argTypes = {
+  id: {
+    name: 'id',
+    description: 'Identifiant du champ permettant de lui attacher un label',
+    type: { name: 'string', required: true },
+    defaultValue: null,
+  },
+  value: {
+    name: 'value',
+    description: "Valeur de l'input",
+    type: { name: 'string', required: false },
+    defaultValue: null,
+  },
+  label: {
+    name: 'label',
+    description: "Le label de l'input",
+    type: { name: 'string', required: false },
+    defaultValue: null,
+  },
+  information: {
+    name: 'information',
+    description: 'Un descriptif complétant le label',
+    type: { name: 'string', required: false },
+    defaultValue: null,
+  },
+  errorMessage: {
+    name: 'errorMessage',
+    description: "Affiche le message d'erreur donné et encadre en rouge le champ",
+    type: { name: 'string', required: false },
+    defaultValue: null,
+  },
+  icon: {
+    name: 'icon',
+    description: "Affiche l'icône choisie à la fin de l'input",
+    type: { name: 'string', required: false },
+    defaultValue: null,
+  },
+  isIconLeft: {
+    name: 'isIconLeft',
+    description: "Permet d'afficher l'icône choisie sur la gauche",
+    type: { name: 'boolean', required: false },
+    control: { type: 'boolean' },
+    defaultValue: false,
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: 'false' },
+    },
+  },
+};

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

@@ -0,0 +1,57 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+
+import * as stories from './pix-input.stories.js';
+
+<Meta
+  title='Form/Inputs/Input'
+  component='PixInput'
+  decorators={[centered]}
+  argTypes={stories.argTypes}
+/>
+
+# Pix Input
+
+Le PixInput permet de créer un champ de texte.
+
+
+## Default
+
+<Canvas>
+  <Story name='Default' story={stories.Default} height={100} />
+</Canvas>
+
+## With label and information
+
+<Canvas>
+  <Story story={stories.withLabel} height={100} />
+</Canvas>
+
+## With error message
+
+<Canvas>
+  <Story story={stories.withErrorMessage} height={130} />
+</Canvas>
+
+## With icon
+
+<Canvas>
+  <Story story={stories.withIcon} height={130} />
+</Canvas>
+
+## Usage
+
+```html
+<PixInput
+  @id='firstName'
+  @label='Prénom'
+  @information='Complément du label'
+  @errorMessage="Un message d'erreur"
+  @icon="eye"
+  @isIconLeft={{false}}
+  @onChange={{onChange}} />
+```
+
+## Arguments
+
+<ArgsTable story="Default" />

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

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

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

@@ -0,0 +1,71 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+import * as stories from './pix-message.stories.js';
+
+<Meta
+  title='Notification/Message'
+  component='PixMessage'
+  decorators={[centered]}
+  argTypes={stories.argTypes}
+/>
+
+# 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).
+
+<Canvas>
+  <Story name="Default" story={stories.Default} height={110} />
+</Canvas>
+
+## With icon
+
+Le bandeau avec une icône.
+
+<Canvas>
+  <Story name="With icon" story={stories.withIcon} height={110} />
+</Canvas>
+
+## Warning
+
+Le bandeau en cas d'alerte.
+
+<Canvas>
+  <Story name="Warning" story={stories.warning} height={110} />
+</Canvas>
+
+## Success
+
+Le bandeau en cas de validation.
+
+<Canvas>
+  <Story name="Success" story={stories.success} height={110} />
+</Canvas>
+
+## Error
+
+Le bandeau en cas de d'erreur.
+
+<Canvas>
+  <Story name="Error" story={stories.error} height={110} />
+</Canvas>
+
+## 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
+
+<ArgsTable story="Default" />