@1024pix/pix-ui 46.13.1 → 46.13.2

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

@@ -1,45 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-
-export default {
-  title: 'Others/PixStars',
-  argTypes: {
-    count: {
-      name: 'count',
-      description: 'Nombre total d’étoiles actives',
-      type: { name: 'number', required: false },
-    },
-    total: {
-      name: 'total',
-      description: 'Nombre total d’étoiles',
-      type: { name: 'number', required: false },
-    },
-    alt: {
-      name: 'alt',
-      description: 'Message alternatif pour les étoiles',
-      type: { name: 'string', required: true },
-    },
-    color: {
-      name: 'color',
-      description: 'Couleur des étoiles',
-      type: { name: 'string', required: false },
-      table: { defaultValue: { summary: undefined } },
-      control: { type: 'radio' },
-      options: [undefined, 'primary'],
-    },
-  },
-};
-
-const Template = (args) => {
-  return {
-    template: hbs`<PixStars @count={{this.count}} @total={{this.total}} @alt={{this.alt}} @color={{this.color}} />`,
-    context: args,
-  };
-};
-
-export const stars = Template.bind({});
-stars.args = {
-  count: 2,
-  total: 5,
-  alt: 'message alternatif',
-  color: undefined,
-};

package/app/stories/pix-tag.mdx

@@ -1,26 +0,0 @@
-import { Meta, Story, ArgTypes } from '@storybook/blocks';
-import * as ComponentStories from './pix-tag.stories';
-
-<Meta of={ComponentStories} />
-
-# Pix Tag
-
-Un `Tag` est un type de `Chips` qui permet de mettre en avant une information ou bien de la catégoriser.
-
-> Il est possible de surcharger le style d'un `<PixTag>` via l'attribut `class` ainsi que de passer n'importe quel attribut sur sa `div` wrapper (par exemple, un `aria-label`)
-
-<Story of={ComponentStories.tag} height={60} />
-
-## Usage
-
-```html
-Par défaut:
-<PixTag> This is a blue tag </PixTag>
-
-Customiser la couleur du tag:
-<PixTag @color="purple"> This is a purple tag </PixTag>
-```
-
-## Arguments
-
-<ArgTypes />

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

@@ -1,25 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-
-export default {
-  title: 'Basics/Tag',
-  render: (args) => ({
-    template: hbs`<PixTag @color={{this.color}}>
-  Contenu du tag
-</PixTag>`,
-    context: args,
-  }),
-  argTypes: {
-    color: {
-      name: 'color',
-      description: 'Couleur du tag',
-      type: { name: 'number', required: false },
-      table: { defaultValue: { summary: 'primary' } },
-      control: {
-        type: 'select',
-      },
-      options: ['neutral', 'secondary', 'tertiary', 'success', 'error', 'orga'],
-    },
-  },
-};
-
-export const tag = {};

package/app/stories/pix-textarea.mdx

@@ -1,50 +0,0 @@
-import { Meta, Story, ArgTypes } from '@storybook/blocks';
-import * as ComponentStories from './pix-textarea.stories.js';
-
-<Meta of={ComponentStories} />
-
-# PixTextarea
-
-Un textarea permettant d'avoir un champ de saisie libre.
-
-Optionellement, il peut afficher le nombre de caractères tapés ainsi que le nombre de caractères maximum.
-
-<Story of={ComponentStories.textarea} height={150} />
-
-## Dimensions
-
-Le PixTextarea prend tout l'espace à sa disposition.
-
-<Story of={ComponentStories.FullWidth} height={290} />
-
-## 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 du textarea peut être ajouté à un composant `<PixLabel />` extérieur.
-
-<Story of={ComponentStories.textareaWithoutLabel} height={100} />
-
-## Usage
-
-```html
-<PixTextarea
-  @id="{{id}}"
-  @value="{{value}}"
-  @maxlength="{{maxlength}}"
-  @errorMessage="{{errorMessage}}"
-  @requiredLabel="{{requiredLabel}}"
->
-  <:label>{{label}}</:label>
-</PixTextarea>
-```
-
-## Arguments
-
-<ArgTypes of={ComponentStories} />

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

@@ -1,146 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-
-export default {
-  title: 'Form/Textarea',
-  argTypes: {
-    id: {
-      name: 'id',
-      description: 'id généré automatiquement, peut être définit manuellement si besoin',
-      type: { name: 'string', required: false },
-    },
-    value: {
-      name: 'value',
-      description: 'Valeur du champ',
-      type: { name: 'string', required: false },
-    },
-    maxlength: {
-      name: 'maxlength',
-      description: 'Nombre de caractères maximal à taper dans le champ',
-      type: { name: 'number', required: false },
-    },
-    errorMessage: {
-      name: 'errorMessage',
-      description: 'Affiche une erreur en dessous du champ.',
-      type: { name: 'string', required: false },
-    },
-    label: {
-      name: 'label',
-      description: 'Donne un label au champ.',
-      type: { name: 'string', required: false },
-    },
-    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`<PixTextarea
-  @id={{this.id}}
-  @value={{this.value}}
-  @maxlength={{this.maxlength}}
-  @errorMessage={{this.errorMessage}}
-  @size={{this.size}}
-  @subLabel={{this.subLabel}}
-  @requiredLabel={{this.requiredLabel}}
-  @inlineLabel={{this.inlineLabel}}
-><:label>{{this.label}}</:label></PixTextarea>`,
-    context: args,
-  };
-};
-
-const TemplateWithoutlabel = (args) => {
-  return {
-    template: hbs`<PixTextarea
-  @id={{this.id}}
-  @value={{this.value}}
-  @maxlength={{this.maxlength}}
-  @errorMessage={{this.errorMessage}}
-  @size={{this.size}}
-  @subLabel={{this.subLabel}}
-  @requiredLabel={{this.requiredLabel}}
-  @inlineLabel={{this.inlineLabel}}
-/>`,
-    context: args,
-  };
-};
-
-export const textarea = Template.bind({});
-textarea.args = {
-  id: 'textarea',
-  label: 'Label du textarea',
-  subLabel: 'Sous-label',
-  value: 'Contenu du textarea',
-};
-
-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; height: 250px;'
->
-  <PixTextarea
-    @id={{this.id}}
-    @value={{this.value}}
-    @subLabel={{this.subLabel}}
-    @maxlength={{this.maxlength}}
-  ><:label>{{this.label}}</:label></PixTextarea>
-</div>`,
-    context: args,
-  };
-};
-
-export const FullWidth = FullWidthTemplate.bind({});
-FullWidth.args = {
-  id: 'textarea',
-  label: 'Label du textarea',
-  subLabel: 'Sous-label',
-  value: 'Contenu du textarea',
-  maxlength: 120,
-};
-
-export const textareaWithoutLabel = TemplateWithoutlabel.bind({});
-textareaWithoutLabel.args = {
-  id: 'textarea-without-label',
-  value: 'Contenu du textarea sans label affiché',
-};

package/app/stories/pix-toggle.mdx

@@ -1,28 +0,0 @@
-import { Meta, Story, ArgTypes } from '@storybook/blocks';
-import * as ComponentStories from './pix-toggle.stories.js';
-
-<Meta of={ComponentStories}/>
-
-# Pix Toggle
-
-Affiche un bouton à deux états.
-
-## Default
-
-<Story of={ComponentStories.Default} height={200} />
-
-## Inline
-
-<Story of={ComponentStories.Inline} height={200} />
-
-## ScreenReaderOnly
-
-<Story of={ComponentStories.ScreenReaderOnly} height={200} />
-
-## WithYields
-
-<Story of={ComponentStories.WithYields} height={200} />
-
-## Arguments
-
-<ArgTypes of={ComponentStories} />

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

@@ -1,134 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Basics/Toggle',
-  argTypes: {
-    label: {
-      name: 'label',
-      description: 'Le label du PixToggle',
-      type: { name: 'string', required: true },
-    },
-    subLabel: {
-      name: 'subLabel',
-      description: 'Le sous label du PixToggle',
-      type: { name: 'string', required: true },
-    },
-    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'],
-    },
-    onLabel: {
-      name: 'onLabel',
-      description: "Le label de l'état actif du PixToggle",
-      type: { name: 'string', required: false },
-    },
-    offLabel: {
-      name: 'offLabel',
-      description: "Le label de l'état non actif du PixToggle",
-      type: { name: 'string', required: false },
-    },
-    toggled: {
-      name: 'toggled',
-      description: 'Détermine si le PixToggle est activé',
-      type: { name: 'boolean', required: true },
-    },
-    onChange: {
-      name: 'onChange',
-      description: "Fonction à appeler quand le PixToggle change d'état.",
-      type: { required: true },
-      control: { disable: true },
-    },
-    inlineLabel: {
-      name: 'inlineLabel',
-      description: "Permet d'afficher le PixToggle sur une seule ligne",
-      control: { type: 'boolean' },
-      type: { name: 'boolean', required: false },
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-    },
-    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 },
-      },
-    },
-  },
-};
-
-const Template = (args) => {
-  return {
-    template: hbs`<PixToggle
-  @onLabel={{this.onLabel}}
-  @offLabel={{this.offLabel}}
-  @toggled={{this.toggled}}
-  @onChange={{this.onChange}}
-  @size={{this.size}}
-  @subLabel={{this.subLabel}}
-  @inlineLabel={{this.inlineLabel}}
-  @screenReaderOnly={{this.screenReaderOnly}}
->
-  <:label>{{this.label}}</:label>
-</PixToggle>`,
-    context: args,
-  };
-};
-
-const TemplateWithYields = (args) => {
-  return {
-    template: hbs`<PixToggle @toggled={{this.toggled}} @onChange={{this.onChange}}>
-  <:label>{{this.label}}</:label>
-  <:on><FaIcon @icon='eye' /></:on>
-  <:off><FaIcon @icon='eye-slash' /></:off>
-</PixToggle>`,
-    context: args,
-  };
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  label: 'Mon toggle',
-  onLabel: 'Option A',
-  offLabel: 'Option B',
-  toggled: false,
-  onChange: action('onChange'),
-};
-
-export const Inline = Template.bind({});
-Inline.args = {
-  inline: true,
-  label: 'Mon toggle',
-  onLabel: 'Option A',
-  offLabel: 'Option B',
-  toggled: false,
-  onChange: action('onChange'),
-};
-
-export const ScreenReaderOnly = Template.bind({});
-ScreenReaderOnly.args = {
-  screenReaderOnly: true,
-  label: 'Mon toggle',
-  onLabel: 'Option A',
-  offLabel: 'Option B',
-  toggled: false,
-  onChange: action('onChange'),
-};
-
-export const WithYields = TemplateWithYields.bind({});
-WithYields.args = {
-  label: 'Mon toggle',
-  toggled: false,
-  onChange: action('onChange'),
-};

package/app/stories/pix-tooltip.mdx

@@ -1,183 +0,0 @@
-import { Meta, Story, ArgTypes } from '@storybook/blocks';
-import * as ComponentStories from './pix-tooltip.stories';
-
-<Meta of={ComponentStories} />
-
-# Pix Tooltip
-
-Une infobulle qui s'affiche au survol d'un élément.
-
-Ce composant est utilisé comme wrapper, c'est à dire qu'il encadre l'élément sur lequel on souhaite ajouter une infobulle. L'utilisation de `Named Block` permet d'utiliser des composants HTML facilement dans la tooltip.
-
-> ⚠️ A noter que le wrapper PixTooltip est en `display: flex;`, il s'adaptera donc à la taille de ses enfants. Ainsi si votre élément ne s'affiche plus comme avant après l'ajout de la PixTooltip, veillez à rajouter les dimensions voulues à l'enfant.
-
-> ⚠️ L'infobulle ne s'affichera pas si le texte est vide.
-
-## Accessibilité
-
-Les tooltips doivent être appliquées de préférences sur des éléments nativement focusable comme `<button>` ou `<input>`.
-
-Si vous utilisez un élément `<div>` ou `<span>`, il faut ajouter `tabindex="0"` pour qu'il prenne le focus.
-
-```html
-<PixTooltip>
-  <:triggerElement>
-    <span tabindex="0">Mon span</span>
-  </:triggerElement>
-
-  <:tooltip>
-    My tooltip
-  </:tooltip>
-</PixTooltip>
-```
-
-Les tooltips doivent prendre un `@id` et être référencées par leur élément déclencheur
-
-- soit via `aria-describedby` si l'élément possèdent déjà un label, car le tooltip agit alors comme une description supplémentaire.
-
-```html
-<PixTooltip @id="tooltip-1">
-  <:triggerElement>
-    <PixButton aria-describedby="tooltip-1">Mon bouton</PixButton>
-  </:triggerElement>
-
-  <:tooltip>
-    My tooltip
-  </:tooltip>
-</PixTooltip>
-```
-
-- soit via `aria-labelledby` si l'élément ne possède pas de label et que le tooltip fait office de libellé.
-
-```html
-<PixTooltip @id="tooltip-2" @text="Cette information apparaît uniquement au survol de l'icone">
-  <span class="icon icon-info" aria-labelledby="tooltip-2"></span>
-</PixTooltip>
-```
-
-## Default
-
-Infobulle en position `top`, fond sombre (par défaut).
-
-<Story of={ComponentStories.Default} height={200} />
-<Story of={ComponentStories.WithIcon} height={200} />
-<Story of={ComponentStories.WithInput} height={200} />
-
-## Is Light
-
-Infobulle en mode clair.
-
-> ⚠️ le tooltip "light" est à utiliser de préférence sur fond coloré ! Mais ce n'est pas obligatoire.
-
-<Story of={ComponentStories.isLight} height={200} />
-
-## Position
-
-Différentes positions de l'infobulle.
-Existe aussi `top-left`, `top-right`, `bottom-left` et `bottom-right`.
-
-<Story of={ComponentStories.left} height={100} />
-<Story of={ComponentStories.right} height={100} />
-<Story of={ComponentStories.bottom} height={150} />
-
-## Is Wide
-
-Infobulle en plus large.
-
-<Story of={ComponentStories.isWide} height={200} />
-
-## Is Inline
-
-Infobulle dont le contenu reste sur une ligne.
-
-<Story of={ComponentStories.isInline} height={200} />
-
-## With HTML
-
-Infobulle contenant des éléments HTML
-
-<Story of={ComponentStories.WithHTML} height={200} />
-
-## Hide
-
-Cache la tooltip (par exemple si le contenu est vide).
-
-<Story of={ComponentStories.hide} height={200} />
-
-## Usage
-
-```html
-<PixTooltip>
-  <:triggerElement>
-    <button>Tooltip par défaut</button>
-  </:triggerElement>
-  <:tooltip>
-    <FaIcon @icon="up-right-from-square" /> Avec des <strong>éléments</strong> HTML/Ember
-  </:tooltip>
-</PixTooltip>
-
-<PixTooltip
-  @isLight={{true}}
->
-  <:triggerElement>
-    <button>Tooltip en mode clair</button>
-  </:triggerElement>
-
-  <:tooltip>
-    Hey
-  </:tooltip>
-</PixTooltip>
-
-<PixTooltip
-  @isLight={{true}}
->
-  <:triggerElement>
-    <button>Tooltip sur une ligne</button>
-  </:triggerElement>
-
-  <:tooltip>
-    Hey
-  </:tooltip>
-</PixTooltip>
-
-<PixTooltip
-  @position='bottom'
-  @isLight={{true}}
-  >
-  <:triggerElement>
-    <button>Tooltip apparaissant en bas</button>
-  </:triggerElement>
-
-  <:tooltip>
-    Hey
-  </:tooltip>
-</PixTooltip>
-
-<PixTooltip
-  @hide={{true}}
-  >
-  <:triggerElement>
-    <button>Tooltip n'apparaissant pas</button>
-  </:triggerElement>
-
-  <:tooltip>
-    Hey
-  </:tooltip>
-</PixTooltip>
-
-<PixTooltip
-  @isWide={{true}}
-  >
-  <:triggerElement>
-    <button>Tooltip en mode large</button>
-  </:triggerElement>
-
-  <:tooltip>
-    Hey
-  </:tooltip>
-</PixTooltip>
-```
-
-## Arguments
-
-<ArgTypes of={ComponentStories} />