@1024pix/pix-ui 11.1.0

package/app/stories/form.stories.js

@@ -0,0 +1,91 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+export const form = (args) => {
+  return {
+    template: hbs`
+    <form>
+      <PixInput @id='firstName' @label='Prénom' @errorMessage={{genericErrorMessage}} />
+      <br>
+      <PixInputPassword @id='password' @label='Mot de passe' @errorMessage={{genericErrorMessage}} />
+      <br>
+
+      <PixMultiSelect
+        @title="Votre notation en étoiles..."
+        @id="form__pix-mutli-select"
+        @label="A quel point aimez vous Pix-UI ?"
+        @onSelect={{onSelect}}
+        @selected={{selected}}
+        @options={{options}} as |star|
+      >
+        <PixStars @count={{star.value}} @total={{star.total}} />
+      </PixMultiSelect>
+      <br><br>
+
+      <PixSelect
+        @id="form__searchable-pix-select"
+        @label="Votre fruit préféré est : "
+        @options={{selectOptions}}
+        @isSearchable={{true}}
+        @isValidationActive={{true}}
+        placeholder='Fraises, Mangues...'
+        style='width:100%'
+      />
+      <br>
+
+      <PixTextarea
+        @id="form__pix-textarea"
+        @value=""
+        @maxlength={{200}}
+        @label="Un commentaire ?"
+        @errorMessage={{genericErrorMessage}} />
+      <br>
+
+      <label class="pix-form__label"> Votre légume préféré est : </label>
+      <PixRadioButton
+        @label="Chou"
+        @value="chou"
+        name="légume"
+      />
+      <PixRadioButton
+        @label="Carotte"
+        @value="carotte"
+        name="légume"
+      />
+      <br>
+
+      <div class="pix-form__actions">
+        <PixButton @triggerAction={{cancel}} @backgroundColor="transparent-light" @isBorderVisible={{true}}>
+          Annuler
+        </PixButton>
+        <PixButton @type="submit">Envoyer mes réponses</PixButton>
+      </div>
+    </form>
+    `,
+    context: args,
+  };
+};
+form.args = {
+  genericErrorMessage: '',
+  selected: ['1', '4'],
+  options: [
+    { value: '1', total: 3 },
+    { value: '2', total: 3 },
+    { value: '3', total: 3 },
+  ],
+  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/form.stories.mdx

@@ -0,0 +1,16 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+import * as stories from './form.stories.js';
+
+<Meta
+  title='Form/Example'
+  decorators={[centered]}
+/>
+
+# Formulaire avec les composants Pix UI
+
+Un formulaire complet avec les composants Pix UI :
+
+<Canvas>
+  <Story name="Form" story={stories.form} height={600} />
+</Canvas>

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

@@ -0,0 +1,19 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export const backgroundHeader = (args) => {
+  return {
+    template: hbs`
+      <PixBackgroundHeader>
+
+        <PixBlock>Un panel avec du text</PixBlock>
+
+        <PixBlock>
+          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-background-header.stories.mdx

@@ -0,0 +1,36 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+import * as stories from './pix-background-header.stories.js';
+
+<Meta
+  title='Layout/Background Header'
+  component='PixBackgroundHeader'
+  decorators={[centered]}
+/>
+
+# 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`.
+
+<Canvas>
+  <Story name="Background Header" story={stories.backgroundHeader} height={500} />
+</Canvas>
+
+## Usage
+
+```html
+<PixBackgroundHeader>
+  <PixBlock>
+    Lorem ipsum
+  </PixBlock>
+</PixBackgroundHeader>
+```
+
+## Arguments
+
+Le composant ne prend pas d'arguments

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

@@ -0,0 +1,89 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+const Template = (args) => {
+  return {
+    template: hbs`
+      <PixBanner
+        @type={{type}}
+        @actionLabel={{actionLabel}}
+        @actionUrl={{actionUrl}}
+      >
+        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: 'info',
+  actionLabel: 'Voir le nouveau site',
+  actionUrl: 'www.test.fr/',
+};
+
+export const withInternalLink = Template.bind({});
+withInternalLink.args = {
+  type: 'info',
+  actionLabel: 'Voir la liste des participants',
+  actionUrl: 'campaign.list',
+};
+
+export const argsTypes = {
+  actionLabel: {
+    name: 'actionLabel',
+    description: 'Nom de l‘action',
+    type: { name: 'string', required: false },
+    defaultValue: '',
+  },
+  actionUrl: {
+    name: 'actionUrl',
+    description: 'Lien de l‘action',
+    type: { name: 'string', required: false },
+    defaultValue: '',
+  },
+  type: {
+    name: 'type',
+    description: 'Définit le type de bannière',
+    type: { name: 'string', required: false },
+    defaultValue: { summary: 'information' },
+    control: {
+      type: 'select',
+      options: [
+        'information',
+        'warning',
+        'error',
+        'communication',
+        'communication-orga',
+        'communication-certif',
+      ],
+    },
+  },
+};

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

@@ -0,0 +1,107 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+import * as stories from './pix-banner.stories.js';
+
+<Meta
+  title='Notification/Banner'
+  component='PixBanner'
+  decorators={[centered]}
+  argTypes={stories.argsTypes}
+/>
+
+# 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).
+
+<Canvas>
+  <Story name="Default" story={stories.Default} height={75} />
+</Canvas>
+
+## Warning
+
+Bannière pour les alertes.
+
+<Canvas>
+  <Story name="Warning" story={stories.warning} height={75} />
+</Canvas>
+
+## Error
+
+Bannière pour les erreurs.
+
+<Canvas>
+  <Story name="Error" story={stories.error} height={75} />
+</Canvas>
+
+## Communication
+
+<Canvas isColumn>
+  Bannière pour Pix App
+  <Story name="Communication Pix App" story={stories.communicationPixApp} height={75} />
+  Bannière pour Pix Orga
+  <Story name="Pix Orga" story={stories.communicationPixOrga} height={75} />
+  Bannière pour Pix Certif
+  <Story name="Pix Certif" story={stories.communicationPixCertif} height={75} />
+</Canvas>
+
+## With Internal Link
+
+Bannière contenant un lien interne.
+
+<Canvas>
+  <Story name="With internal link" story={stories.withInternalLink} height={100} />
+</Canvas>
+
+## With External Link
+
+Bannière contenant un lien externe.
+
+<Canvas>
+  <Story name="With external link" story={stories.withExternalLink} height={100} />
+</Canvas>
+
+## 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>
+
+```
+
+## Arguments
+
+<ArgsTable story="Default" />

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

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

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

@@ -0,0 +1,44 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+import * as stories from './pix-block.stories.js';
+
+<Meta
+  title='Layout/Block'
+  component='PixBlock'
+  decorators={[centered]}
+  argTypes={stories.argTypes}
+/>
+
+# Pix Block
+
+Un \`Block\` est un bloc de fond blanc dont les bords sont arrondis et ayant une ombre projetée.
+
+> Les marges intérieures du bloc sont de 14px (haut et bas) et 24px (droite et gauche), sauf pour la version mobile où c'est 16px (partout).
+
+> 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.
+
+<Canvas>
+  <Story name="Block" story={stories.block} height={60} />
+</Canvas>
+
+
+## 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
+
+<ArgsTable story="Block" />

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

@@ -0,0 +1,125 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export const htmlLinkTemplate = (args) => {
+  return {
+    template: hbs`
+      <PixButtonLink 
+        @href="https://pix.fr"
+        target="NEW"
+        @shape={{shape}}
+        @backgroundColor={{backgroundColor}}
+        @size={{size}}
+        @isBorderVisible={{isBorderVisible}}
+        @isDisabled={{isDisabled}}
+      >
+        Lien HTML classique
+      </PixButtonLink>
+    `,
+    context: args,
+  };
+};
+
+export const emberLinkTemplate = (args) => {
+  return {
+    template: hbs`
+      <PixButtonLink 
+        @route=""
+        @model=""
+        @query={{query}}
+        @shape={{shape}}
+        @backgroundColor={{backgroundColor}}
+        @size={{size}}
+        @isBorderVisible={{isBorderVisible}}
+        @isDisabled={{isDisabled}}
+      >
+        Lien route Ember (LinkTo)
+      </PixButtonLink>
+    `,
+    context: args,
+  };
+};
+
+export const htmlLink = htmlLinkTemplate.bind({});
+
+export const emberLink = emberLinkTemplate.bind({});
+
+export const argTypes = {
+  href: {
+    name: 'href',
+    description: 'Paramètre à renseigner pour utiliser lien HTML.',
+    type: { name: 'string', required: false },
+    defaultValue: null,
+  },
+  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 },
+    defaultValue: null,
+  },
+  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 },
+  },
+  shape: {
+    name: 'shape',
+    description: 'forme: `rounded`,`squircle`',
+    type: { name: 'string', required: false },
+    options: ['rounded', 'squircle'],
+    control: { type: 'select' },
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: 'squircle' },
+    },
+  },
+  backgroundColor: {
+    name: 'backgroundColor',
+    description:
+      'color: `blue`, `green`, `yellow`, `red`, `grey`, `transparent-light`, `transparent-dark`',
+    options: ['blue', 'green', 'yellow', 'red', 'grey', 'transparent-light', 'transparent-dark'],
+    type: { name: 'string', required: false },
+    control: { type: 'select' },
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: 'blue' },
+    },
+  },
+  size: {
+    name: 'size',
+    description: 'taille: `big`,`small`',
+    options: ['big', 'small'],
+    type: { name: 'string', required: false },
+    control: { type: 'select' },
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: 'big' },
+    },
+  },
+  isBorderVisible: {
+    name: 'isBorderVisible',
+    description:
+      'Paramètre utilisé seulement quand le `backgroundColor` est `transparent-light` 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' },
+    },
+  },
+};

package/app/stories/pix-button-link.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-button-link.stories.js';
+
+<Meta
+  title='Basics/ButtonLink'
+  component='PixButtonLink'
+  decorators={[centered]}
+  argTypes={stories.argTypes}
+/>
+
+# 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` (`shape`, `backgroundColor`, `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`...).
+
+<Canvas>
+  <Story name='Lien HTML' story={stories.htmlLink} height={60} />
+</Canvas>
+
+```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`. 
+
+<Canvas>
+  <Story name='Route EmberJS' story={stories.emberLink} height={60} />
+</Canvas>
+
+```html
+<PixButtonLink @route="ma.route.ember" @model="mon-model">
+  Libellé du lien
+</PixButtonLink>
+```
+
+## Arguments
+
+<ArgsTable story="Lien HTML" />

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

@@ -0,0 +1,85 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+export const buttonUpload = (args) => {
+  return {
+    template: hbs`
+      <PixButtonUpload
+        @id="id"
+        @onChange={{onChange}}
+        @shape={{shape}}
+        @backgroundColor={{backgroundColor}}
+        @size={{size}}
+        @isBorderVisible={{isBorderVisible}}
+      >
+        Cliquer pour uploader un fichier
+      </PixButtonUpload>
+    `,
+    context: args,
+  };
+};
+
+buttonUpload.args = {
+  onChange: action('onChange'),
+};
+
+export const argTypes = {
+  id: {
+    name: 'id',
+    description: "identifiant du bouton d'upload",
+    type: { name: 'string', required: true },
+    defaultValue: 'file-upload',
+  },
+  onChange: {
+    name: 'onChange',
+    description:
+      "fonction à exécuter au moment de l'upload du fichier, elle prend en entrée la liste des fichiers uploadés.",
+    type: { name: 'function', required: true },
+    defaultValue: null,
+  },
+  shape: {
+    name: 'shape',
+    description: 'forme: `rounded`,`squircle`',
+    type: { name: 'string', required: false },
+    options: ['rounded', 'squircle'],
+    control: { type: 'select' },
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: 'squircle' },
+    },
+  },
+  backgroundColor: {
+    name: 'backgroundColor',
+    description:
+      'color: `blue`, `green`, `yellow`, `red`, `grey`, `transparent-light`, `transparent-dark`',
+    options: ['blue', 'green', 'yellow', 'red', 'grey', 'transparent-light', 'transparent-dark'],
+    type: { name: 'string', required: false },
+    control: { type: 'select' },
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: 'blue' },
+    },
+  },
+  size: {
+    name: 'size',
+    description: 'taille: `big`,`small`',
+    options: ['big', 'small'],
+    type: { name: 'string', required: false },
+    control: { type: 'select' },
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: 'big' },
+    },
+  },
+  isBorderVisible: {
+    name: 'isBorderVisible',
+    description:
+      'Paramètre utilisé seulement quand le `backgroundColor` est `transparent-light` ou `transparent-dark`',
+    type: { name: 'boolean', required: false },
+    control: { type: 'boolean' },
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: 'false' },
+    },
+  },
+};