@1024pix/pix-ui 11.1.0

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

@@ -0,0 +1,39 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+
+import * as stories from './pix-button-upload.stories.js';
+
+<Meta
+  title='Basics/ButtonUpload'
+  component='PixButtonUpload'
+  decorators={[centered]}
+  argTypes={stories.argTypes}
+/>
+
+# PixButtonUpload
+
+Affiche un bouton d'upload de fichiers.
+
+Hérite des styles de base de `PixButton` (`shape`, `backgroundColor`, `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.
+
+<Canvas>
+  <Story name='PixButtonUpload' story={stories.buttonUpload} height={60} />
+</Canvas>
+
+```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
+
+<ArgsTable story="PixButtonUpload" />

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

@@ -0,0 +1,253 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+const Template = (args) => ({
+  template: hbs`
+    <section style={{this.style}}>
+      <PixButton
+        @triggerAction={{action triggerAction}}
+        @loadingColor={{loadingColor}}
+        @shape={{shape}}
+        @backgroundColor={{backgroundColor}}
+        @isDisabled={{isDisabled}}
+        @isLoading={{isLoading}}
+        @size={{size}}
+        @isBorderVisible={{isBorderVisible}}
+      >
+        {{this.label}}
+      </PixButton>
+    </section>
+    {{#each extraButtons as |button|}}
+      <section style={{button.style}}>
+        <PixButton
+          @triggerAction={{action triggerAction}}
+          @loadingColor={{button.loadingColor}}
+          @shape={{button.shape}}
+          @backgroundColor={{button.backgroundColor}}
+          @isDisabled={{button.isDisabled}}
+          @isLoading={{button.isLoading}}
+          @size={{button.size}}
+          @isBorderVisible={{button.isBorderVisible}}
+        >
+          {{button.label}}
+        </PixButton>
+      </section>
+    {{/each}}`,
+  context: args,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  loadingColor: 'white',
+  shape: 'squircle',
+  size: 'big',
+  backgroundColor: 'blue',
+  label: 'Bouton',
+  triggerAction: () => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve();
+      }, 2000);
+    });
+  },
+};
+
+export const borders = Template.bind({});
+borders.args = {
+  ...Default.args,
+  label: 'Bouton avec bordure sur fond clair',
+  backgroundColor: 'transparent-light',
+  loadingColor: 'grey',
+  isBorderVisible: true,
+  extraButtons: [
+    {
+      ...Default.args,
+      label: 'Bouton avec bordure sur fond sombre',
+      style: 'background-color: #775555',
+      backgroundColor: 'transparent-dark',
+      isBorderVisible: true,
+    },
+  ],
+};
+
+export const colors = Template.bind({});
+colors.args = {
+  ...Default.args,
+  label: 'Bouton avec background blue (default)',
+  extraButtons: [
+    {
+      ...Default.args,
+      label: 'Bouton avec background green',
+      backgroundColor: 'green',
+    },
+    {
+      ...Default.args,
+      label: 'Bouton avec background yellow',
+      backgroundColor: 'yellow',
+    },
+    {
+      ...Default.args,
+      label: 'Bouton avec background red',
+      backgroundColor: 'red',
+    },
+    {
+      ...Default.args,
+      label: 'Bouton avec background grey',
+      backgroundColor: 'grey',
+    },
+    {
+      ...Default.args,
+      label: 'Bouton avec bordure sur fond clair',
+      backgroundColor: 'transparent-light',
+      loadingColor: 'grey',
+      isBorderVisible: true,
+    },
+    {
+      ...Default.args,
+      label: 'Bouton avec bordure sur fond sombre',
+      style: 'background-color: #775555',
+      backgroundColor: 'transparent-dark',
+      isBorderVisible: true,
+    },
+  ],
+};
+
+export const disabled = Template.bind({});
+disabled.args = {
+  ...Default.args,
+  label: 'Bouton désactivé',
+  isDisabled: true,
+};
+
+export const loader = Template.bind({});
+loader.args = {
+  ...Default.args,
+  label: 'Bouton avec loader au clic',
+  backgroundColor: 'yellow',
+  loadingColor: 'grey',
+  extraButtons: [
+    {
+      ...Default.args,
+      triggerAction: () => {},
+      isLoading: true,
+    },
+  ],
+};
+
+export const shape = Template.bind({});
+shape.args = {
+  ...Default.args,
+  label: 'Bouton rounded',
+  shape: 'rounded',
+};
+
+export const size = Template.bind({});
+size.args = {
+  ...Default.args,
+  label: 'Bouton small',
+  size: 'small',
+};
+
+export const argsTypes = {
+  type: {
+    name: 'type',
+    description: 'type du bouton',
+    type: { required: false },
+    control: { disable: true },
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: 'button' },
+    },
+  },
+  triggerAction: {
+    name: 'triggerAction',
+    description: 'fonction à appeler en cas de clic, optionnel si le bouton est de type submit',
+    type: { required: true },
+    control: { disable: true },
+  },
+  loadingColor: {
+    name: 'loadingColor',
+    description: 'couleur de chargement: `white`, `grey`',
+    type: { name: 'string', required: false },
+    options: ['white', 'grey'],
+    control: { type: 'select' },
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: 'white' },
+    },
+  },
+  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' },
+    },
+  },
+  isDisabled: {
+    name: 'isDisabled',
+    type: { name: 'boolean', required: false },
+    control: { type: 'boolean' },
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: 'false' },
+    },
+  },
+  isLoading: {
+    name: 'isLoading',
+    description:
+      'Affiche un loader. Si `@triggerAction` retourne une promesse alors le loading est géré automatiquement.',
+    type: { name: 'boolean', required: false },
+    control: { type: 'boolean' },
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: 'false' },
+    },
+  },
+  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' },
+    },
+  },
+  route: {
+    name: 'route',
+    description: 'Déprécié et remplacé par le composant PixButtonLink',
+    type: { name: 'string', required: false },
+  },
+  model: {
+    name: 'model',
+    description: 'Déprécié et remplacé par le composant PixButtonLink',
+    type: { required: false },
+  },
+};

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

@@ -0,0 +1,99 @@
+import { Meta, Story, Canvas, ArgsTable, SourceContainer } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+import * as stories from './pix-button.stories.js';
+
+<Meta
+  title='Basics/Button'
+  component='PixButton'
+  decorators={[centered]}
+  argTypes={stories.argsTypes}
+/>
+
+# Pix Button
+
+## Default
+
+Le bouton par défaut qui empêche les clics multiples.
+
+<Canvas>
+  <Story name="Default" story={stories.Default} height={75} />
+</Canvas>
+
+## Borders
+
+Le bouton avec bordures et fond transparent
+
+<Canvas isColumn>
+  <Story story={stories.borders} height={150} />
+</Canvas>
+
+## Colors
+
+Le bouton avec toutes ses variations de couleur
+
+<Canvas isColumn>
+  <Story story={stories.colors} height={500} />
+</Canvas>
+
+## Disabled
+
+Le bouton désactivé
+
+<Canvas>
+  <Story story={stories.disabled} height={75} />
+</Canvas>
+
+## Link
+
+Fonctionnalité dépréciée dans `<PixButton />`.
+
+Utiliser le composant `<PixButtonLink />` à la place.
+
+## Loader
+
+Le bouton avec loader.
+Le loader peut être affiché de deux façons :
+- En passant une promesse dans l'attribut `@triggerAction`
+- En passant directement l'attribut `@isLoading={{true}}`
+
+<Canvas>
+  <Story story={stories.loader} height={150} />
+</Canvas>
+
+## Shape
+
+Le bouton rounded
+
+<Canvas>
+  <Story story={stories.shape} height={75} />
+</Canvas>
+
+## Size
+
+Le bouton en small
+
+<Canvas>
+  <Story story={stories.size} height={75} />
+</Canvas>
+
+## Usage
+
+Un petit bouton avec les bords arrondis en fond transparent avec une bordure
+
+```html
+<PixButton
+  @triggerAction={{action triggerAction}}
+  @loadingColor="white"
+  @shape="squircle"
+  @backgroundColor="transparent-light"
+  @isDisabled={{false}}
+  @size="small"
+  @isBorderVisible={{true}}
+>
+  Cliquez-moi
+</PixButton>
+```
+
+## Arguments
+
+<ArgsTable story="Default" exclude={['buttons', 'model', 'label', 'style']} />

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

@@ -0,0 +1,56 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export const collapsible = (args) => {
+  return {
+    template: hbs`
+    <PixCollapsible
+      @title={{title}}
+      @titleIcon={{titleIcon}}>
+      <div>Contenu du PixCollapsible</div>
+    </PixCollapsible>
+    `,
+    context: args,
+  };
+};
+
+export const multipleCollapsible = (args) => {
+  return {
+    template: hbs`
+    <div>
+      <PixCollapsible
+        @title="Titre A"
+        @titleIcon={{titleIcon}}>
+          <div>Contenu A</div>
+      </PixCollapsible>
+
+      <PixCollapsible
+        @title="Titre B"
+        @titleIcon={{titleIcon}}>
+          <div>Contenu B</div>
+      </PixCollapsible>
+
+      <PixCollapsible
+        @title="Titre C"
+        @titleIcon={{titleIcon}}>
+          <div>Contenu C</div>
+      </PixCollapsible>
+    </div>
+    `,
+    context: args,
+  };
+};
+
+export const argTypes = {
+  title: {
+    name: 'title',
+    description: 'Intitulé du contenu du PixCollapsible',
+    type: { name: 'string', required: true },
+    defaultValue: 'Titre du contenu à dérouler en cliquant',
+  },
+  titleIcon: {
+    name: 'titleIcon',
+    description: "Ajoute l'icône donnée en paramètre avant le titre du PixCollapsible",
+    type: { name: 'string', required: false },
+    defaultValue: 'user',
+  },
+};

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

@@ -0,0 +1,39 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+
+import * as stories from './pix-collapsible.stories.js';
+
+<Meta
+  title='Others/Collapsible'
+  component='PixCollapsible'
+  argTypes={stories.argTypes}
+/>
+
+# PixCollapsible
+
+Un `PixCollapsible` est un élément comprenant un libellé et un contenu.
+Par défaut le contenu est masqué et cliquer sur le libellé permet de montrer le contenu du `PixCollapsible`.
+
+> Il est possible de cumuler les `PixCollapsible` de sorte à former un accordéon, il suffit de les mettre dans une même div parente.
+
+<Canvas>
+  <Story name='PixCollapsible' story={stories.collapsible} height={150} />
+</Canvas>
+
+<Canvas>
+  <Story name='MultiplePixCollapsible' story={stories.multipleCollapsible} height={260} />
+</Canvas>
+
+## Usage
+
+```html
+<PixCollapsible
+  @title="Titre du contenu à dérouler en cliquant"
+  @iconTitle="user">
+  <p>Contenu du PixCollapsible</p>
+</PixCollapsible>
+```
+
+## Arguments
+
+<ArgsTable story="PixCollapsible" />

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

@@ -0,0 +1,51 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+export const filterBanner = (args) => {
+  return {
+    template: hbs`
+      <PixFilterBanner @title={{title}} @details={{details}} @clearFiltersLabel={{clearFiltersLabel}} @onClearFilters={{onClearFilters}}>
+        <PixSelect @options={{this.options}} @onChange={{this.onChange}} />
+        <PixSelect @options={{this.options}} @onChange={{this.onChange}} />
+      </PixFilterBanner>
+    `,
+    context: args,
+  };
+};
+filterBanner.args = {
+  title: 'Filtres',
+  details: 'Des détails sur le filtre',
+  clearFiltersLabel: 'Effacer les filtres',
+  options: [
+    { value: '1', label: 'Tomate' },
+    { value: '2', label: 'Mozza' },
+  ],
+  onChange: action('select-onchange'),
+};
+
+export const argTypes = {
+  title: {
+    name: 'title',
+    description: 'Titre du filtre',
+    type: { name: 'string', required: false },
+    defaultValue: null,
+  },
+  details: {
+    name: 'details',
+    description: 'Détails du filtre',
+    type: { name: 'string', required: false },
+    defaultValue: null,
+  },
+  clearFiltersLabel: {
+    name: 'clearFiltersLabel',
+    description: 'libellé du bouton',
+    type: { name: 'string', required: false },
+    defaultValue: null,
+  },
+  onClearFilters: {
+    name: 'onClearFilters',
+    description: 'fonction à appeler pour déclencher l’action de suppression des filtres',
+    type: { required: false },
+    defaultValue: action('onClearFilters'),
+  },
+};

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

@@ -0,0 +1,33 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+import * as stories from './pix-filter-banner.stories.js';
+
+<Meta
+  title='Form/Filter banner'
+  component='PixFilterBanner'
+  decorators={[centered]}
+  argTypes={stories.argTypes}
+/>
+
+# Pix Filter Banner
+
+Une `FilterBanner` permet de wrapper les éléments de filtres (`Select`, `Multi-Select`, ...).
+
+> Il est possible de surcharger le style d'une `<PixFilterBanner>` via l'attribut `class` ainsi que de passer n'importe quel attribut sur sa `div` wrapper (par exemple, un `aria-label`)
+
+<Canvas>
+  <Story name="Filter banner" story={stories.filterBanner} height={80} />
+</Canvas>
+
+## Usage
+
+```html
+<PixFilterBanner aria-label="Filtres sur les campagnes">
+  <PixSelect @options={{options}} @onChange={{onChange}} />
+  <PixSelect @options={{options}} @onChange={{onChange}} />
+</PixFilterBanner>
+```
+
+## Arguments
+
+<ArgsTable story="Filter banner" />

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

@@ -0,0 +1,95 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+const Template = (args) => {
+  return {
+    template: hbs`
+      <PixIconButton
+        @ariaLabel={{ariaLabel}}
+        @icon={{icon}}
+        @iconPrefix={{iconPrefix}}
+        @triggerAction={{triggerAction}}
+        @withBackground={{withBackground}}
+        @size={{size}}
+        />
+    `,
+    context: args,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  ariaLabel: 'Action du bouton',
+  icon: 'times',
+  triggerAction: () => {
+    return new Promise().resolves();
+  },
+};
+
+export const small = Template.bind({});
+small.args = {
+  ...Default.args,
+  size: 'small',
+};
+
+export const withBackground = Template.bind({});
+withBackground.args = {
+  ...Default.args,
+  withBackground: true,
+};
+
+export const argTypes = {
+  ariaLabel: {
+    name: 'ariaLabel',
+    description: "l'action du bouton, pour l'accessibilité",
+    type: { name: 'string', required: true },
+    table: { defaultValue: { summary: 'times' } },
+  },
+  icon: {
+    name: 'icon',
+    description: 'Icône font-awesome',
+    type: { name: 'string', required: true },
+    table: { defaultValue: { summary: 'times' } },
+  },
+  iconPrefix: {
+    name: 'iconPrefix',
+    description: "Prefix de l'icône font-awesome",
+    type: { name: 'string', required: false },
+    control: { type: 'select', options: ['far', 'fas'] },
+  },
+  triggerAction: {
+    name: 'triggerAction',
+    description: 'Fonction à appeler au clic du bouton',
+    type: { required: true },
+    defaultValue: action('triggerAction'),
+  },
+  withBackground: {
+    name: 'withBackground',
+    description: 'Affichage du fond grisé',
+    type: { name: 'boolean', required: false },
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: 'false' },
+    },
+  },
+  size: {
+    name: 'size',
+    description: 'Size: `small`, `big`',
+    type: { name: 'string', required: false },
+    control: { type: 'select', options: ['big', 'small'] },
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: 'big' },
+    },
+  },
+  color: {
+    name: 'color',
+    description: ' ⚠️ **Propriété dépréciée** ⚠️ Color: `light-grey`, `dark-grey`',
+    type: { name: 'string', required: false },
+    control: { type: 'select', options: ['light-grey', 'dark-grey'] },
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: 'light-grey' },
+    },
+  },
+};