@1024pix/pix-ui 46.13.1 → 46.13.3

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

@@ -1,148 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-
-export default {
-  title: 'Basics/Pagination',
-  render: (args) => ({
-    template: hbs`<PixPagination
-  @pagination={{this.pagination}}
-  @locale={{this.locale}}
-  @pageOptions={{this.pageOptions}}
-  @isCondensed={{this.isCondensed}}
-/>`,
-    context: args,
-  }),
-  argTypes: {
-    pagination: {
-      name: 'pagination',
-      description:
-        "Un objet de pagination tel que l'on en trouve au retour de `knex-utils.fetchPage`",
-      type: { name: 'object', required: true },
-    },
-    pageOptions: {
-      name: 'pageOptions',
-      description: "Un tableau d'objet `options` pour configurer le select",
-      type: { name: 'array', required: false },
-      control: {
-        type: 'array',
-        value: [
-          {
-            label: '10',
-            value: 10,
-          },
-          {
-            label: '25',
-            value: 25,
-          },
-          {
-            label: '50',
-            value: 50,
-          },
-          {
-            label: '100',
-            value: 100,
-          },
-        ],
-      },
-      table: {
-        type: { summary: 'array' },
-        defaultValue: {
-          summary: JSON.stringify([
-            {
-              label: '10',
-              value: 10,
-            },
-            {
-              label: '25',
-              value: 25,
-            },
-            {
-              label: '50',
-              value: 50,
-            },
-            {
-              label: '100',
-              value: 100,
-            },
-          ]),
-        },
-      },
-    },
-    locale: {
-      name: 'locale',
-      description: "La langue de l'utilisateur",
-      type: { name: 'string', required: false },
-      control: { type: 'select' },
-      options: ['fr', 'en'],
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'fr' },
-      },
-    },
-    isCondensed: {
-      name: 'isCondensed',
-      description:
-        "En desktop, retire le contrôle du nombre d'élèments par page pour simplifier l'usage",
-      type: { name: 'boolean', required: false },
-      control: { type: 'boolean' },
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-    },
-  },
-};
-
-export const French = {
-  args: {
-    pagination: {
-      page: 1,
-      pageSize: 5,
-      rowCount: 12,
-      pageCount: 3,
-    },
-    locale: 'fr',
-  },
-};
-
-export const English = {
-  args: {
-    pagination: {
-      page: 2,
-      pageSize: 10,
-      rowCount: 12,
-      pageCount: 2,
-    },
-    pageOptions: [
-      { label: '10', value: 10 },
-      { label: '20', value: 20 },
-      { label: '50', value: 50 },
-      { label: '100', value: 100 },
-    ],
-    locale: 'en',
-  },
-};
-
-export const OnePage = {
-  args: {
-    pagination: {
-      page: 1,
-      pageSize: 10,
-      rowCount: 2,
-      pageCount: 1,
-    },
-    locale: 'fr',
-  },
-};
-
-export const Condensed = {
-  args: {
-    pagination: {
-      page: 1,
-      pageSize: 10,
-      rowCount: 2,
-      pageCount: 1,
-    },
-    locale: 'fr',
-    isCondensed: true,
-  },
-};

package/app/stories/pix-progress-gauge.mdx

@@ -1,40 +0,0 @@
-import { Meta, Story, ArgTypes } from '@storybook/blocks';
-import * as ComponentStories from './pix-progress-gauge.stories';
-
-<Meta of={ComponentStories} />
-
-# PixProgressGauge
-
-## Default
-
-Permet d'afficher un barre de progression sur un barème de 100%. Des paramètres existent pour changer le mode (dark ou light) ou la couleur du composant.
-
-> **⚠️** **Il est nécessaire d'avoir un `label` pour rendre le composant accessible !**
-
-<Story of={ComponentStories.Default} height={60} />
-
-<Story of={ComponentStories.Success} height={60} />
-
-<Story of={ComponentStories.Tertiary} height={60} />
-
-## Dark mode
-
-Démonstration d'une barre de progression blanche en dark mode avec un sous titre.
-
-<Story of={ComponentStories.darkModeProgressGauge} height={100} />
-
-## Usage
-
-```html
-<PixProgressGauge
-  @value="50"
-  @label="Chargement"
-  @color="sucess"
-  @themeMode="dark"
-  @subTitle="Un sous titre"
-/>
-```
-
-## Arguments
-
-<ArgTypes />

package/app/stories/pix-progress-gauge.stories.js

@@ -1,117 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-
-export default {
-  title: 'Others/Progress Gauge',
-  argTypes: {
-    value: {
-      name: 'value',
-      description: 'Valeur atteinte sur 100',
-      type: { name: 'number', required: true },
-      table: { defaultValue: { summary: null } },
-    },
-    label: {
-      name: 'label',
-      description:
-        "Afficher un label caché permettant d'expliciter le contexte de la jauge de progression",
-      type: { name: 'string', required: true },
-      table: { defaultValue: { summary: 'null' } },
-    },
-    themeMode: {
-      name: 'themeMode',
-      description:
-        "Permet d'indiquer si le thème de la barre de progression est en dark mode ou light mode. Modifie la couleur de fond de la barre de progression. Peut prendre les valeurs `light` ou `dark`",
-      type: { name: 'string', required: false },
-      table: { defaultValue: { summary: 'light' } },
-      control: { type: 'select' },
-      options: ['dark', 'light'],
-    },
-    color: {
-      name: 'color',
-      description:
-        'Modifie la couleur du contenu de la barre de progression. Peut prendre les valeurs `primary`, `green` ou `blue`',
-      type: { name: 'string', required: false },
-      table: { defaultValue: { summary: 'primary' } },
-      control: { type: 'select' },
-      options: ['primary', 'success', 'tertiary'],
-    },
-    subtitle: {
-      name: 'subtitle',
-      description: 'Afficher un sous-titre sous la barre de progression',
-      type: { name: 'string', required: false },
-      table: { defaultValue: { summary: 'null' } },
-    },
-  },
-};
-
-export const Default = (args) => {
-  return {
-    template: hbs`<PixProgressGauge
-  @value={{this.value}}
-  @color={{this.color}}
-  @themeMode={{this.themeMode}}
-  @subtitle={{this.subtitle}}
-  @label={{this.label}}
-/>`,
-    context: args,
-  };
-};
-Default.args = {
-  value: '50',
-};
-
-export const Success = (args) => {
-  return {
-    template: hbs`<PixProgressGauge
-  @value={{this.value}}
-  @color={{this.color}}
-  @themeMode={{this.themeMode}}
-  @subtitle={{this.subtitle}}
-  @label={{this.label}}
-/>`,
-    context: args,
-  };
-};
-Success.args = {
-  value: '50',
-  color: 'success',
-};
-
-export const Tertiary = (args) => {
-  return {
-    template: hbs`<PixProgressGauge
-  @value={{this.value}}
-  @color={{this.color}}
-  @themeMode={{this.themeMode}}
-  @subtitle={{this.subtitle}}
-  @label={{this.label}}
-/>`,
-    context: args,
-  };
-};
-Tertiary.args = {
-  value: '50',
-  color: 'tertiary',
-};
-
-export const darkModeProgressGauge = (args) => {
-  return {
-    template: hbs`{{! template-lint-disable no-inline-styles }}
-<section style='width: 100%; padding: 35px 35px 5px;background-color: #253858'>
-  <PixProgressGauge
-    @value={{this.value}}
-    @color={{this.color}}
-    @label={{this.label}}
-    @themeMode={{this.themeMode}}
-    @subtitle={{this.subtitle}}
-  />
-</section>`,
-    context: args,
-  };
-};
-darkModeProgressGauge.args = {
-  value: '50',
-  label: 'Chargement',
-  color: 'primary',
-  themeMode: 'dark',
-  subtitle: 'Avancement',
-};

package/app/stories/pix-radio-button-variant-tile.mdx

@@ -1,46 +0,0 @@
-import { Meta, Story, ArgTypes } from '@storybook/blocks';
-import * as ComponentStories from './pix-radio-button-variant-tile.stories.js';
-
-<Meta of={ComponentStories} />
-
-# PixRadioButton `@variant="title"`
-
-Un bouton radio permettant de sélectionner une seule option dans une liste.
-
-⚠️ Le bouton radio ne peut pas être utilisé seul : il faut au minimum **2 options**.<br/>
-Il est préférable de ne pas sélectionner d’option par défaut pour que le choix de l’utilisateur soit conscient (en particulier si le choix est obligatoire).
-
-Un cursor `pointer` est défini sur le RadioButton et son label par défaut.
-
-Le RadioButton et son label sont visuellement regroupés dans un ensemble intégralement cliquable.
-
-<Story of={ComponentStories.VariantTile} height={120} />
-
-## États du RadioButton
-
-### RadioButton désactivé
-
-L'attribut `@isDisabled` permet de désactiver le RadioButton 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 le RadioButton et son label lorsqu'il est dans un état `disabled`.
-
-<Story of={ComponentStories.isDisabledVariantTile} height={120} />
-<Story of={ComponentStories.checkedIsDisabledVariantTile} 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
-<PixRadioButton name="input-name" @value="{{value}}" @variant="tile">
-  <:label>Exemple de label</:label>
-</PixRadioButton>
-```
-
-## Arguments
-
-<ArgTypes of={ComponentStories} />

package/app/stories/pix-radio-button-variant-tile.stories.js

@@ -1,92 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-import pixRadioButtonStories from './pix-radio-button.stories.js';
-
-export default {
-  title: 'Form/Inputs/Radio Button/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 le radiobutton comme correcte ou incorrecte',
-      options: ['neutral', 'success', 'error'],
-      control: { type: 'select' },
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'neutral' },
-      },
-    },
-    ...pixRadioButtonStories.argTypes,
-  },
-};
-
-const VariantTileTemplate = (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'
-><PixRadioButton
-    @id={{this.id}}
-    @isDisabled={{this.isDisabled}}
-    checked={{this.checked}}
-    @variant={{this.variant}}
-    @state={{this.state}}
-    @size={{this.size}}
-  >
-    <:label>{{this.label}}</:label>
-  </PixRadioButton></div>`,
-    context: args,
-  };
-};
-
-export const VariantTile = VariantTileTemplate.bind({});
-VariantTile.args = {
-  id: 'proposal',
-  label: 'Une réponse',
-  variant: 'tile',
-  state: 'neutral',
-};
-
-export const isDisabledVariantTile = VariantTileTemplate.bind({});
-isDisabledVariantTile.args = {
-  id: 'accept-newsletter-2',
-  label: 'Recevoir la newsletter',
-  variant: 'tile',
-  isDisabled: true,
-  state: 'neutral',
-};
-
-export const checkedIsDisabledVariantTile = VariantTileTemplate.bind({});
-checkedIsDisabledVariantTile.args = {
-  id: 'accept-newsletter-2',
-  label: 'Recevoir la newsletter',
-  variant: 'tile',
-  isDisabled: true,
-  checked: true,
-  state: 'neutral',
-};
-
-export const isDisabledIsSuccessVariantTile = VariantTileTemplate.bind({});
-isDisabledIsSuccessVariantTile.args = {
-  id: 'accept-newsletter-2',
-  label: 'La réponse est correcte',
-  variant: 'tile',
-  isDisabled: true,
-  checked: true,
-  state: 'success',
-};
-
-export const isDisabledIsErrorVariantTile = VariantTileTemplate.bind({});
-isDisabledIsErrorVariantTile.args = {
-  id: 'accept-newsletter-2',
-  label: 'La réponse est fausse',
-  variant: 'tile',
-  isDisabled: true,
-  checked: true,
-  state: 'error',
-};

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

@@ -1,59 +0,0 @@
-import { Meta, Story, ArgTypes } from '@storybook/blocks';
-
-import * as ComponentStories from './pix-radio-button.stories.js';
-import * as VariantTileStories from './pix-radio-button-variant-tile.stories.js';
-
-<Meta of={ComponentStories} />
-
-# Pix Radio Button
-
-Un bouton radio permettant de sélectionner une seule option dans une liste.
-
-⚠️ Le bouton radio ne peut pas être utilisé seul : il faut au minimum **2 options**.<br/>
-Il est préférable de ne pas sélectionner d’option par défaut pour que le choix de l’utilisateur soit conscient (en particulier si le choix est obligatoire).
-
-## Default
-
-<Story of={ComponentStories.Default} height={60} />
-
-<Story of={ComponentStories.defaultChecked} height={60} />
-
-### Liste de radios
-
-Puisqu'on ne souhaite en aucune avoir un input radio unique, il est déjà prévu l'espacement vertical avec un input radio suivant.<br/>
-Pour les considérer comme un seul groupe d'inputs, **il est nécessaire qu'ils aient chacun un attribut `name` avec une valeur commune**.
-
-<Story of={ComponentStories.multiple} height={140} />
-
-### Variations graphiques du composant
-
-Le PixRadioButton 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`, le RadioButton et son label sont visuellement regroupés dans un ensemble intégralement cliquable.
-
-<Story of={VariantTileStories.VariantTile} height={100} />
-
-Voir la [documentation de la variante tile](http://localhost:9001/iframe.html?path=/docs/form-inputs-radiobutton-variant-tile--docs).
-
-## Disabled
-
-L'attribut `@isDisabled` permet de désactiver la radio 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.
-
-<Story of={ComponentStories.isDisabled} height={60} />
-
-<Story of={ComponentStories.checkedIsDisabled} height={60} />
-
-## Usage
-
-```html
-<PixRadioButton name="input-name" @value="{{value}}">
-  <:label>Exemple de label</:label>
-</PixRadioButton>
-```
-
-## Arguments
-
-<ArgTypes of={ComponentStories} />
-./pix-radio-button-variant-tile.stories.js

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

@@ -1,165 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-
-export default {
-  title: 'Form/Inputs/Radio Button',
-  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 CSS au parent du composant.",
-      type: { name: 'string' },
-    },
-    value: {
-      name: 'value',
-      description: "Valeur permettant d'identifier l'option sélectionnée",
-      type: { name: 'string', required: false },
-    },
-    checked: {
-      name: 'checked',
-      description: 'Permet de cocher la radio',
-      type: { name: 'boolean', required: false },
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-    },
-    isDisabled: {
-      name: 'isDisabled',
-      description: 'Pour désactiver/activer le bouton radio',
-      type: { name: 'boolean', required: false },
-      table: {
-        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'],
-    },
-  },
-};
-
-/* Default stories */
-const Template = (args) => {
-  return {
-    template: hbs`<PixRadioButton
-  @value={{this.value}}
-  @id={{this.id}}
-  @class={{this.class}}
-  checked={{this.checked}}
-  disabled={{this.disabled}}
-  @isDisabled={{this.isDisabled}}
-  @size={{this.size}}
-  @screenReaderOnly={{this.screenReaderOnly}}
-  @requiredLabel={{this.requiredLabel}}
-  @subLabel={{this.subLabel}}
->
-  <:label>{{this.label}}</:label>
-</PixRadioButton>`,
-    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'
-><PixRadioButton @id={{this.id}}>
-    <:label>{{this.label}}</:label>
-  </PixRadioButton></div>`,
-    context: args,
-  };
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  label: 'Poivron',
-};
-
-export const defaultChecked = Template.bind({});
-defaultChecked.args = {
-  ...Default.args,
-  checked: true,
-};
-
-export const FullWidth = FullWidthTemplate.bind({});
-FullWidth.args = {
-  label: 'Une réponse',
-};
-
-export const isDisabled = Template.bind({});
-isDisabled.args = {
-  ...Default.args,
-  isDisabled: true,
-};
-
-export const checkedIsDisabled = Template.bind({});
-checkedIsDisabled.args = {
-  ...Default.args,
-  isDisabled: true,
-  checked: true,
-};
-
-/* Multiple components story */
-const multipleTemplate = (args) => {
-  return {
-    template: hbs`<PixRadioButton disabled={{this.disabled}} @isDisabled={{this.isDisabled}} name='radio'>
-  <:label>{{this.label}}</:label>
-</PixRadioButton>
-<PixRadioButton disabled={{this.disabled}} @isDisabled={{this.isDisabled}} name='radio'>
-  <:label>{{this.label}}</:label>
-</PixRadioButton>
-<PixRadioButton disabled={{this.disabled}} @isDisabled={{this.isDisabled}} name='radio'>
-  <:label>{{this.label}}</:label>
-</PixRadioButton>`,
-    context: args,
-  };
-};
-
-export const multiple = multipleTemplate.bind({});
-multiple.args = {
-  ...Default.args,
-};

package/app/stories/pix-return-to.mdx

@@ -1,34 +0,0 @@
-import { Meta, Story, ArgTypes } from '@storybook/blocks';
-import * as ComponentStories from './pix-return-to.stories';
-
-<Meta of={ComponentStories} />
-
-# Pix Return To
-
-Le `ReturnTo` est un lien de retour vers uneOpixRe page précédente.
-
-> Il est nécessaire de passer une @route au composant.
-
-> Il est possible d'afficher uniquement l'icone flèche en omettant de mettre du contenu enfant dans la balise.
-
-Lien sans texte
-
-<Story of={ComponentStories.returnTo} height={60} />
-
-Lien avec texte
-
-<Story of={ComponentStories.returnToWithText} height={60} />
-
-## Usage
-
-```html
-Liens avec texte
-<PixReturnTo @route="profile"> Un lien de retour </PixReturnTo>
-
-Liens sans texte
-<PixReturnTo @route="profile" />
-```
-
-## Arguments
-
-<ArgTypes />