@1024pix/pix-ui 46.13.0 → 46.13.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "46.13.0",
+  "version": "46.13.2",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -103,7 +103,7 @@
     "ember-load-initializers": "^2.1.2",
     "ember-page-title": "^8.0.0",
     "ember-qunit": "^8.0.0",
-    "ember-resolver": "^12.0.0",
+    "ember-resolver": "^13.0.0",
     "ember-sinon": "^5.0.0",
     "ember-source": "^4.0.1",
     "ember-source-channel-url": "^3.0.0",
@@ -141,11 +141,11 @@
   },
   "files": [
     "addon/",
-    "app/",
+    "app/components",
+    "app/modifiers",
+    "app/services",
     "config/icons.js",
-    "public/",
-    "scripts/migrate-colors-scss-vars-to-css-vars.sh",
-    "scripts/migrate-spacing-scss-vars-to-css-vars.sh"
+    "public/"
   ],
   "storybook-deployer": {
     "commitMessage": "Deploy Storybook [skip ci]"

package/app/stories/form.mdx

@@ -1,11 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import * as stories from './form.stories';
-
-<Meta of={stories} />
-
-# Formulaire avec les composants Pix UI
-
-Un formulaire complet avec les composants Pix UI :
-
-<Story of={stories.form} height={700} />
-

package/app/stories/form.stories.js

@@ -1,142 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Form/Exemple de formulaire',
-};
-
-export const form = (args) => {
-  return {
-    template: hbs`<form>
-  <PixInput
-    @id='firstName'
-    @errorMessage={{this.genericErrorMessage}}
-    @requiredLabel='champ obligatoire'
-    @validationStatus={{this.validationStatus}}
-  >
-    <:label>Prénom</:label>
-  </PixInput>
-  <br />
-  <PixInputPassword @id='password' @errorMessage={{this.genericErrorMessage}}>
-    <:label>Mot de passe</:label>
-  </PixInputPassword>
-  <br />
-
-  <PixMultiSelect
-    @id='form__pix-multi-select'
-    @onSelect={{this.onSelect}}
-    @selected={{this.selected}}
-    @options={{this.options}}
-  >
-    <:label>A quel point aimez-vous Pix UI ?</:label>
-    <:placeholder>Votre notation en étoiles...</:placeholder>
-    <:default as |star|>
-      <PixStars @count={{star.value}} @total={{star.total}} />
-    </:default>
-  </PixMultiSelect>
-  <br /><br />
-
-  <PixMultiSelect
-    @id='form__pix-multi-select-searchable'
-    @onSelect={{this.onSelect}}
-    @selected={{this.selected}}
-    @isSearchable={{true}}
-    @options={{this.optionsSearch}}
-  >
-    <:label>Choississez vos condiments</:label>
-    <:placeholder>Mes condiments</:placeholder>
-    <:default as |condiment|>
-      {{condiment.label}}
-    </:default>
-  </PixMultiSelect>
-  <br /><br />
-  {{! template-lint-disable no-inline-styles }}
-
-  <PixSelect
-    @id='form__searchable-pix-select'
-    @options={{this.selectOptions}}
-    @isSearchable={{true}}
-    @isValidationActive={{true}}
-    placeholder='Fraises, Mangues...'
-    style='width:100%'
-  >
-    <:label>Votre fruit préféré est :</:label>
-  </PixSelect>
-  <br />
-
-  <PixTextarea
-    @id='form__pix-textarea'
-    @maxlength={{200}}
-    @requiredLabel='Champ obligatoire'
-    @errorMessage={{this.genericErrorMessage}}
-  >
-    <:label>Un commentaire ?</:label>
-  </PixTextarea>
-  <br />
-
-  <label class='pix-form__label'> Votre légume préféré est : </label>
-  <PixRadioButton @value='chou' name='légume'>
-    <:label>Chou</:label>
-  </PixRadioButton>
-  <PixRadioButton @value='carotte' name='légume'>
-    <:label>Carotte</:label>
-  </PixRadioButton>
-
-  <br />
-
-  <PixCheckbox @id='spam-pub' @size='small'>
-    <:label>Acceptez-vous de vous faire spammer de PUB ?</:label>
-  </PixCheckbox>
-
-  <br /><br />
-
-  <ul class='pix-form__actions'>
-    <li>
-      <PixButtonLink @route='' @model='' @variant='secondary' @isBorderVisible={{true}}>
-        Annuler
-      </PixButtonLink>
-    </li>
-    <li>
-      <PixButton @type='submit'>Envoyer mes réponses</PixButton>
-    </li>
-    <li>
-      <PixButtonUpload @id='file-upload' accept='.csv'>
-        Importer un fichier
-      </PixButtonUpload>
-    </li>
-  </ul>
-</form>`,
-    context: args,
-  };
-};
-form.args = {
-  genericErrorMessage: '',
-  selected: ['1', '4'],
-  options: [
-    { value: '1', total: 3 },
-    { value: '2', total: 3 },
-    { value: '3', total: 3 },
-  ],
-  optionsSearch: [
-    { value: 'Cornichon', label: 'Cornichon' },
-    { value: 'Ail', label: 'Ail' },
-    { value: 'Oignon', label: 'Oignon' },
-    { value: 'Aigre-Doux', label: 'Aigre-douc' },
-    { value: 'Soja sucré', label: 'Soja sucré' },
-  ],
-  cancel: action('cancel'),
-  onSelect: action('onSelect'),
-  selectOptions: [
-    { value: 'Figues', label: 'Figues' },
-    { value: 'Bananes', label: 'Bananes' },
-    { value: 'Noix', label: 'Noix' },
-    { value: 'Papayes', label: 'Papayes' },
-    { value: 'Fèves de chocolat', label: 'Fèves de chocolat' },
-    { value: 'Dattes', label: 'Dattes' },
-    { value: 'Mangues', label: 'Mangues' },
-    { value: 'Jujube', label: 'Jujube' },
-    { value: 'Avocat', label: 'Avocat' },
-    { value: 'Fraises', label: 'Fraises' },
-    { value: 'Kaki', label: 'Kaki' },
-  ],
-};

package/app/stories/pix-background-header.mdx

@@ -1,29 +0,0 @@
-import { Meta, Story, ArgTypes } from '@storybook/blocks';
-import * as ComponentStories from './pix-background-header.stories';
-
-<Meta of={ComponentStories} />
-
-# Pix Background Header
-
-Un `BackgroundHeader` est une bannière donnant un fond de couleur bleu en haut d'une page.
-Les enfants de la bannière se mettrons en colonne.
-
-> Pour le moment ce composant n'est pas paramétrable car nous n'avons pas d'autres types de bannières.
-
-> Le `BackgroundHeader` se couple bien avec un ou plusieurs `PixBlock`.
-
-
-<Story of={ComponentStories.backgroundHeader} height={500} />
-
-
-## Usage
-
-```html
-<PixBackgroundHeader>
-  <PixBlock> Lorem ipsum </PixBlock>
-</PixBackgroundHeader>
-```
-
-## Arguments
-
-Le composant ne prend pas d'arguments

package/app/stories/pix-background-header.stories.js

@@ -1,33 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-
-export default {
-  title: 'Layout/Background Header',
-};
-
-export const backgroundHeader = (args) => {
-  return {
-    template: hbs`<PixBackgroundHeader>
-  {{! template-lint-disable no-inline-styles }}
-
-  <PixBlock style='margin: 0 0 32px; padding: 14px 24px;'>Un panel avec du text</PixBlock>
-  {{! template-lint-disable no-inline-styles }}
-
-  <PixBlock style='padding: 14px 24px;'>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a interdum mauris. Morbi ac diam
-    varius, maximus massa id, venenatis lectus. Fusce interdum tincidunt mattis. Nullam porta
-    sollicitudin lorem, sodales cursus arcu finibus in. Nam pretium congue diam sollicitudin
-    faucibus. Aliquam nec augue massa. Pellentesque eleifend nec arcu eu tincidunt. Pellentesque at
-    quam dignissim, lacinia sem et, pharetra magna. Etiam venenatis felis augue, id sollicitudin
-    sapien interdum at. Cras bibendum fermentum eros, rutrum varius turpis venenatis vitae.
-    Suspendisse aliquet iaculis sem in blandit. Mauris vitae erat lobortis est volutpat bibendum non
-    molestie purus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
-    ridiculus mus. Sed consequat porttitor metus a imperdiet. Duis quis enim fermentum, sodales
-    massa sit amet, blandit elit. Aliquam felis purus, dictum sed pretium vel, aliquam sit amet
-    felis. Nunc convallis pellentesque convallis. Suspendisse potenti. Aenean iaculis, nunc placerat
-    aliquam posuere, tellus enim facilisis metus, non egestas sapien arcu et leo.
-  </PixBlock>
-
-</PixBackgroundHeader>`,
-    context: args,
-  };
-};

package/app/stories/pix-banner.mdx

@@ -1,86 +0,0 @@
-import { Meta, Story, ArgTypes } from '@storybook/blocks';
-import * as ComponentStories from './pix-banner.stories';
-
-<Meta of={ComponentStories} />
-
-# Pix Banner
-
-Une `Banner` permet de mettre en avant une information importante.
-
-> Il est possible de surcharger le style d'une `<PixBanner>` via l'attribut `class` ainsi que de passer n'importe quel attribut sur sa `div` wrapper (par exemple, un `aria-label`)
-
-## Default
-
-Bannière Information (par défaut).
-
-<Story of={ComponentStories.Default} height={75}/>
-
-## Warning
-
-Bannière pour les alertes.
-
-<Story of={ComponentStories.warning} height={75} />
-
-## Error
-
-Bannière pour les erreurs.
-
-<Story of={ComponentStories.error} height={75} />
-
-## Communication
-
-Bannière pour Pix App
-<Story of={ComponentStories.communicationPixApp} height={75} />
-Bannière pour Pix Orga
-<Story of={ComponentStories.communicationPixOrga} height={75} />
-Bannière pour Pix Certif
-<Story of={ComponentStories.communicationPixCertif} height={75} />
-
-## With Internal Link
-
-Bannière contenant un lien interne.
-
-<Story of={ComponentStories.withInternalLink} height={100} />
-
-
-## With External Link
-
-Bannière contenant un lien externe.
-
-<Story of={ComponentStories.withExternalLink} height={100} />
-
-
-## With Close Icon
-
-Bannière contenant un bouton qui permet de fermer la bannière.
-
-<Story of={ComponentStories.withCloseIcon} height={100} />
-
-
-## Usage
-
-```html
-<PixBanner> Bannière Info par défaut </PixBanner>
-
-<PixBanner @type="communication"> Bannière Communication pour Pix App </PixBanner>
-
-<PixBanner @type="warning"> Bannière Warning </PixBanner>
-
-<PixBanner @type="error"> Bannière Error </PixBanner>
-
-<PixBanner @actionLabel="Liste des campagnes" @actionUrl="authenticated.campaigns">
-  Bannière avec une route pour lien
-</PixBanner>
-
-<PixBanner @actionLabel="Ajouter des élèves" @actionUrl="https://orga.pix.fr/eleves">
-  Bannière avec une route externe
-</PixBanner>
-
-<PixBanner @type="warning" @canCloseBanner="true">
-  Bannière possédant un bouton de fermeture
-</PixBanner>
-```
-
-## Arguments
-
-<ArgTypes of={ComponentStories} />

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

@@ -1,112 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-
-export default {
-  title: 'Notification/Banner',
-  argTypes: {
-    actionLabel: {
-      name: 'actionLabel',
-      description: 'Nom de l‘action',
-      type: { name: 'string', required: false },
-    },
-    actionUrl: {
-      name: 'actionUrl',
-      description: 'Lien de l‘action',
-      type: { name: 'string', required: false },
-    },
-    type: {
-      name: 'type',
-      description: 'Définit le type de bannière',
-      type: { name: 'string', required: false },
-      table: { defaultValue: { summary: 'information' } },
-      control: {
-        type: 'select',
-      },
-      options: [
-        'information',
-        'warning',
-        'error',
-        'communication',
-        'communication-orga',
-        'communication-certif',
-      ],
-    },
-    canCloseBanner: {
-      name: 'canCloseBanner',
-      description: 'Afficher la croix pour fermer la bannière',
-      type: { name: 'boolean', required: false },
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-    },
-    onCloseBannerTriggerAction: {
-      name: 'onCloseBannerTriggerAction',
-      description:
-        'Fonction à appeler lors de la fermeture de la bannière. Doit être utilisé avec le paramètre canCloseBanner',
-      type: { required: false },
-      control: { disable: true },
-    },
-  },
-};
-
-const Template = (args) => {
-  return {
-    template: hbs`<PixBanner
-  @type={{this.type}}
-  @actionLabel={{this.actionLabel}}
-  @actionUrl={{this.actionUrl}}
-  @canCloseBanner={{this.canCloseBanner}}
->
-  Parcours de rentrée 2020 : les codes sont disponibles dans l'onglet campagne. N’oubliez pas de les
-  diffuser aux élèves avant la Toussaint.
-</PixBanner>`,
-    context: args,
-  };
-};
-
-export const Default = Template.bind({});
-
-export const warning = Template.bind({});
-warning.args = {
-  type: 'warning',
-};
-
-export const error = Template.bind({});
-error.args = {
-  type: 'error',
-};
-
-export const communicationPixApp = Template.bind({});
-communicationPixApp.args = {
-  type: 'communication',
-};
-
-export const communicationPixOrga = Template.bind({});
-communicationPixOrga.args = {
-  type: 'communication-orga',
-};
-
-export const communicationPixCertif = Template.bind({});
-communicationPixCertif.args = {
-  type: 'communication-certif',
-};
-
-export const withExternalLink = Template.bind({});
-withExternalLink.args = {
-  type: 'information',
-  actionLabel: 'Voir le nouveau site',
-  actionUrl: 'www.test.fr/',
-};
-
-export const withInternalLink = Template.bind({});
-withInternalLink.args = {
-  type: 'information',
-  actionLabel: 'Voir la liste des participants',
-  actionUrl: 'campaign.list',
-};
-
-export const withCloseIcon = Template.bind({});
-withCloseIcon.args = {
-  type: 'information',
-  canCloseBanner: true,
-};

package/app/stories/pix-block.mdx

@@ -1,32 +0,0 @@
-import { Meta, Story, ArgTypes } from '@storybook/blocks';
-import * as ComponentStories from './pix-block.stories';
-
-<Meta of={ComponentStories} />
-
-# Pix Block
-
-Un \`Block\` est un bloc de fond blanc dont les bords sont arrondis et ayant une ombre projetée.
-
-> Un \`Block\` prendra toute la largeur de son parent, dans la limite maximale de 980px.
-
-> Donnez donc un parent de la taille que vous souhaitez, votre bloc prendra la même taille.
-
-> Il est souvent utilisé dans le PixBackgroundHeader.
-
-  <Story of={ComponentStories.block} height={60} />
-
-## Usage
-
-```html
-<PixBlock @shadow="light">
-  <div>Un bloc avec une ombre faible</div>
-</PixBlock>
-
-<PixBlock @shadow="heavy">
-  <div>Un bloc avec une ombre forte</div>
-</PixBlock>
-```
-
-## Arguments
-
-<ArgTypes of={ComponentStories} />

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

@@ -1,22 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-
-export default {
-  title: 'Layout/Block',
-  argTypes: {
-    shadow: {
-      name: 'shadow',
-      description: 'Ombre sur le bloc',
-      type: { name: 'string', required: false },
-      table: { defaultValue: { summary: 'light' } },
-      control: { type: 'select' },
-      options: ['light', 'heavy'],
-    },
-  },
-};
-
-export const block = (args) => ({
-  template: hbs`<PixBlock @shadow={{this.shadow}}>
-  Lorem ipsum
-</PixBlock>`,
-  context: args,
-});

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

@@ -1,39 +0,0 @@
-import { Meta, Story, ArgTypes } from '@storybook/blocks';
-
-import * as ComponentStories from './pix-button-link.stories';
-
-<Meta of={ComponentStories} />
-
-# ButtonLink
-
-Affiche un lien avec le style d'un bouton Pix. Il peut être de type HTML ou Route EmberJS.
-
-Hérite des styles de base de `PixButton` (`variant`, `size`, `isBorderVisible`, `isDisabled`)
-
-## Lien HTML
-
-Affiche un bouton avec les propriétés de lien HTML définies.
-
-Prend en entrée la propriété `@href`.
-Redirige directement les attributs de la balise HTML `<a>` (eg. `target`...).
-
-<Story of={ComponentStories.htmlLink} />
-
-```html
-<PixButtonLink @href="https://pix.fr" target="_blank"> Libellé du lien </PixButtonLink>
-```
-
-## Route EmberJS
-
-Affiche un bouton vers la route EmberJS définie en paramètre.
-Equivalent au `<LinkTo />` de EmberJS avec le style d'un bouton Pix.
-
-Prend en entrée la propriété `@route` et `@model`.
-
-Un bouton de route EmberJS peut être désactivé via la propriété `@isDisabled`.
-
-<Story of={ComponentStories.emberLink} />
-
-## Arguments
-
-<ArgTypes of={ComponentStories} />

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

@@ -1,114 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-
-export default {
-  title: 'Basics/ButtonLink',
-
-  argTypes: {
-    href: {
-      name: 'href',
-      description: 'Paramètre à renseigner pour utiliser lien HTML.',
-      type: { name: 'string', required: false },
-    },
-    route: {
-      name: 'route',
-      description:
-        "Paramètre à renseigner pour utiliser un composant LinkTo à la place d'un lien classique. Il prend comme valeur la route de redirection",
-      type: { name: 'string', required: false },
-    },
-    model: {
-      name: 'model',
-      description: 'Model Ember lié à la route utilisée',
-      type: { required: false },
-    },
-    query: {
-      name: 'query',
-      description:
-        "Paramètre facultatif du <LinkTo> Ember permettant d'ajouter des paires de clé/valeur dans les paramètres d'une URL",
-      type: { required: false },
-    },
-    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: `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' },
-      },
-    },
-    isDisabled: {
-      name: 'isDisabled',
-      type: { name: 'boolean', required: false },
-      control: { type: 'boolean' },
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-    },
-  },
-};
-
-export const htmlLink = {
-  render: (args) => ({
-    template: hbs`<PixButtonLink
-  @href='https://pix.fr'
-  target='NEW'
-  @variant={{this.variant}}
-  @size={{this.size}}
-  @isBorderVisible={{this.isBorderVisible}}
-  @isDisabled={{this.isDisabled}}
->
-  Lien HTML classique
-</PixButtonLink>`,
-    context: args,
-  }),
-};
-
-export const emberLink = (args) => {
-  return {
-    template: hbs`<PixButtonLink
-  @route=''
-  @model=''
-  @query={{this.query}}
-  @variant={{this.variant}}
-  @size={{this.size}}
-  @isBorderVisible={{this.isBorderVisible}}
-  @isDisabled={{this.isDisabled}}
->
-  Lien route Ember (LinkTo)
-</PixButtonLink>`,
-    context: args,
-  };
-};

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

@@ -1,26 +0,0 @@
-import { Meta, Story, ArgTypes } from '@storybook/blocks';
-import * as ComponentStories from './pix-button-upload.stories';
-
-<Meta of={ComponentStories} />
-
-# PixButtonUpload
-
-Affiche un bouton d'upload de fichiers.
-
-Hérite des styles de base de `PixButton` (`variant`, `size`, `isBorderVisible`)
-
-Toutes les [propriétés HTML d'un input de type file](https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/file) sont supportées.
-
-<Story of={ComponentStories.buttonUpload} height={60} />
-
-```html
-<PixButtonUpload @id="file-upload" @onChange="{{this.uploadFile}}" accept=".csv">
-  Libellé du bouton
-</PixButtonUpload>
-```
-
-Le callback `@onChange` prend en paramètre le tableau de fichiers uploadés.
-
-## Arguments
-
-<ArgTypes of={ComponentStories} />