@1024pix/pix-ui 11.1.0

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

@@ -0,0 +1,140 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+const Template = (args) => ({
+  template: hbs`
+      <PixSelect
+        @id={{id}}
+        @options={{options}}
+        @onChange={{onChange}}
+        @selectedOption={{selectedOption}}
+        @emptyOptionLabel={{emptyOptionLabel}}
+        @emptyOptionNotSelectable={{emptyOptionNotSelectable}}
+        @isSearchable={{isSearchable}}
+        @isValidationActive={{isValidationActive}}
+        @label={{label}}
+      />
+    `,
+  context: args,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  options: [
+    { value: '1', label: 'Figues' },
+    { value: '2', label: 'Bananes' },
+    { value: '3', label: 'Noix' },
+    { value: '4', label: 'Papayes' },
+    { value: '5', label: 'Fèves de chocolat' },
+    { value: '6', label: 'Dattes' },
+    { value: '7', label: 'Mangues' },
+    { value: '8', label: 'Jujube' },
+    { value: '9', label: 'Avocat' },
+    { value: '10', label: 'Fraises' },
+    { value: '11', label: 'Kaki' },
+    { value: '12', label: 'Asiminier trilobé oblong vert (à ne pas confondre avec la papaye)' },
+  ],
+  onChange: action('onChange'),
+};
+
+export const withLabel = Template.bind({});
+withLabel.args = {
+  ...Default.args,
+  id: 'pix-select-with-label',
+  label: 'Ton fruit préféré: ',
+};
+
+export const searchableSelect = Template.bind({});
+searchableSelect.args = {
+  ...Default.args,
+  emptyOptionNotSelectable: false,
+  isSearchable: true,
+  isValidationActive: true,
+  placeholder: 'Fraises, Mangues...',
+};
+
+export const argTypes = {
+  options: {
+    name: 'options',
+    description:
+      'Les options sont représentées par un tableau d‘objet contenant les propriétés ``value`` et ``label``. ``value`` doit être de type ``String`` pour être que le champ puisse être cherchable',
+    type: { name: 'object', required: true },
+  },
+  onChange: {
+    name: 'onChange',
+    description: 'Fonction à appeler si une option est sélectionnée',
+    type: { required: true },
+    control: { disable: true },
+  },
+  selectedOption: {
+    name: 'selectedOption',
+    description: 'Option sélectionnée',
+    options: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
+    control: { type: 'select' },
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: null },
+    },
+  },
+  emptyOptionLabel: {
+    name: 'emptyOptionLabel',
+    description: 'Texte à afficher si aucune option n‘est sélectionnée',
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: null },
+    },
+  },
+  isSearchable: {
+    name: 'isSearchable',
+    description: 'Rend le champ cherchable',
+    control: { type: 'boolean' },
+    type: { name: 'boolean', required: false },
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  isValidationActive: {
+    name: 'isValidationActive',
+    description:
+      "Rend la bordure du champ vert au focus si la valeur de recherche match une option (c'est à dire si l'utilisateur a selectionné une option valable",
+    control: { type: 'boolean' },
+    type: { name: 'boolean', required: false },
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  emptyOptionNotSelectable: {
+    name: 'emptyOptionNotSelectable',
+    description: 'Rend le premier champ qui est vide non visible une fois sélectionné',
+    control: { type: 'boolean' },
+    type: { name: 'boolean', required: false },
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  size: {
+    name: 'size',
+    description:
+      '⚠️ **Propriété dépréciée** ⚠️ , désormais tous les éléments de formulaires feront 36px de hauteur.',
+    options: ['big', 'small'],
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: 'small' },
+    },
+  },
+  label: {
+    name: 'label',
+    description: 'Donne un label au champ, le paramètre @id devient obligatoire avec ce paramètre.',
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: null },
+    },
+  },
+};

package/app/stories/pix-select.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-select.stories.js';
+
+<Meta
+  title='Form/Select'
+  component='PixSelect'
+  decorators={[centered]}
+  argTypes={stories.argTypes}
+/>
+
+# Pix Select
+
+Affiche un champ Select avec la liste des options fournie.
+
+Les options sont représentées par un tableau d'objet contenant les propriétés value et label.
+
+> **⚠️** __N'oubliez pas de rajouter un id et un label rattaché à l'input pour le rendre accessible !
+A défaut d'avoir un label, vous pouvez rajouter l'attribut `aria-label` à l'input.__
+
+> Pour aider l'utilisateur avec le PixSelect cherchable, rajoutez un placeholder cohérent !
+
+## Default
+
+<Canvas>
+  <Story name="Select" story={stories.Default} height={100} />
+</Canvas>
+
+## With label
+
+<Canvas>
+  <Story story={stories.withLabel} height={100} />
+</Canvas>
+
+## Searchable
+
+<Canvas>
+  <Story name="SearchableSelect" story={stories.searchableSelect} height={110} />
+</Canvas>
+
+## Usage
+
+```html
+<PixSelect
+  @options={{options}}
+  @onChange={{onChange}}
+  @selectedOption="1"
+  @emptyOptionLabel="Empty option"
+  @isSearchable={{false}}
+  @isValidationActive={{false}}
+  @emptyOptionNotSelectable={{false}}
+/>
+```
+
+## Arguments
+
+<ArgsTable story="Select" />

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

@@ -0,0 +1,91 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export const selectableTagDefault = (args) => {
+  return {
+    template: hbs`
+      <PixSelectableTag  
+        @label="non sélectionné"
+        @id="123"
+        @onChange={{onChange}}
+        @checked={{false}}
+      />
+    `,
+    context: args,
+  };
+};
+
+export const selectableTagSelected = (args) => {
+  return {
+    template: hbs`
+      <PixSelectableTag  
+        @label="Sélectionné"
+        @id="456"
+        @onChange={{onChange}}
+        @checked={{true}}
+      />
+    `,
+    context: args,
+  };
+};
+
+export const selectableTagMultiple = (args) => {
+  return {
+    template: hbs`
+      <div style="display:flex;justify-content:space-around;width:400px;height:100%;padding:10px">
+        <PixSelectableTag
+          @label="Lorem ipsum"
+          @id="1"
+          @onChange={{onChange}}
+          @checked={{false}}
+        />
+        <PixSelectableTag
+          @label="Lorem ipsum"
+          @id="2"
+          @onChange={{onChange}}
+          @checked={{false}}
+        />
+        <PixSelectableTag
+          @label="Lorem ipsum"
+          @id="3"
+          @onChange={{onChange}}
+          @checked={{false}}
+        />
+      </div>
+    `,
+    context: args,
+  };
+};
+
+export const argTypes = {
+  label: {
+    name: 'label',
+    description: 'Le label du tag sélectionnable',
+    type: { name: 'string', required: true },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  id: {
+    name: 'id',
+    description: "L'id du tag sélectionnable",
+    type: { name: 'string', required: true },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  onChange: {
+    name: 'onChange',
+    description: 'Fonction à appeler si le tag est sélectionné',
+    type: { required: true },
+    control: { disable: true },
+  },
+  checked: {
+    name: 'checked',
+    description: 'Indiquez si le tag doit être coché',
+    type: { name: 'boolean', required: true },
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+};

package/app/stories/pix-selectable-tag.stories.mdx

@@ -0,0 +1,55 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+
+import * as stories from './pix-selectable-tag.stories.js';
+
+<Meta
+  title='basics/Tag/Selectable Tag'
+  component='PixSelectableTag'
+  decorators={[centered]}
+  argTypes={stories.argTypes}
+/>
+
+# Pix Selectable Tag
+
+Un tag permettant de sélectionner ou non la valeur.
+
+##  Default
+
+<Canvas>
+  <Story name='Selectable Tag default' story={stories.selectableTagDefault} height={60} />
+</Canvas>
+
+##  Selected
+
+<Canvas>
+  <Story name='Selectable Tag checked' story={stories.selectableTagSelected} height={60} />
+</Canvas>
+
+## Multiple tags
+<Canvas>
+  <Story name='Selectable Tag multiple' story={stories.selectableTagMultiple} height={60} />
+</Canvas>
+
+## Usage
+
+```html
+Par défaut :
+<PixSelectableTag>
+  @label={{label}}
+  @id={{id}}
+  @onChange={{onChange}}
+</PixSelectableTag>
+
+Tag Sélectionné :
+<PixSelectableTag>
+  @label={{label}}
+  @id={{id}}
+  @onChange={{onChange}}
+  @checked={{true}}
+</PixSelectableTag>
+```
+
+## Arguments
+
+<ArgsTable story="Selectable Tag default" />

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

@@ -0,0 +1,43 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export const stars = (args) => {
+  return {
+    template: hbs`
+      <PixStars
+        @count={{count}}
+        @total={{total}}
+        @alt={{alt}}
+        @color={{color}}
+      />
+    `,
+    context: args,
+  };
+};
+
+export const argTypes = {
+  count: {
+    name: 'count',
+    description: 'Nombre total d’étoiles actives',
+    type: { name: 'number', required: false },
+    defaultValue: 2,
+  },
+  total: {
+    name: 'total',
+    description: 'Nombre total d’étoiles',
+    type: { name: 'number', required: false },
+    defaultValue: 5,
+  },
+  alt: {
+    name: 'alt',
+    description: 'Message alternatif pour les étoiles',
+    type: { name: 'string', required: true },
+    defaultValue: 'Message',
+  },
+  color: {
+    name: 'color',
+    description: 'Couleur des étoiles',
+    type: { name: 'string', required: false },
+    defaultValue: 'yellow',
+    control: { type: 'select', options: ['yellow', 'blue', 'grey'] },
+  },
+};

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

@@ -0,0 +1,35 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+import * as stories from './pix-stars.stories.js';
+
+<Meta
+  title='Others/PixStars'
+  component='PixStars'
+  decorators={[centered]}
+  argTypes={stories.argTypes}
+/>
+
+# Pix Stars
+
+Affiche une série d'étoiles en fonction des paramètres donnés.
+Un texte alternatif peut être renseigné et différents styles sont pré-définis.
+Pour ne pas afficher les étoiles vides, il suffit de ne pas donner le total d'étoiles.
+
+<Canvas>
+  <Story name="PixStars" story={stories.stars} height={60} />
+</Canvas>
+
+## Usage
+
+```html
+<PixStars
+  @count={{2}}
+  @total={{5}}
+  @alt="message alternatif"
+  @color="blue"
+/>
+```
+
+## Arguments
+
+<ArgsTable story="PixStars" />

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

@@ -0,0 +1,56 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export const tag = (args) => {
+  return {
+    template: hbs`
+      <PixTag @color={{color}} @compact={{compact}}>
+        Contenu du tag
+      </PixTag>
+    `,
+    context: args,
+  };
+};
+
+export const compactTag = (args) => {
+  return {
+    template: hbs`
+      <PixTag @color={{color}} @compact={{compact}}>
+        Contenu du tag
+      </PixTag>
+    `,
+    context: args,
+  };
+};
+compactTag.args = {
+  compact: true,
+};
+
+export const argTypes = {
+  color: {
+    name: 'color',
+    description: 'Couleur du tag',
+    type: { name: 'number', required: false },
+    defaultValue: 'blue',
+    control: {
+      type: 'select',
+      options: [
+        'blue',
+        'blue-light',
+        'purple',
+        'purple-light',
+        'green',
+        'green-light',
+        'yellow',
+        'yellow-light',
+        'grey',
+        'grey-light',
+      ],
+    },
+  },
+  compact: {
+    name: 'compact',
+    description: 'Tag compact ou non',
+    type: { name: 'boolean', required: false },
+    defaultValue: false,
+  },
+};

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

@@ -0,0 +1,46 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+import * as stories from './pix-tag.stories.js';
+
+<Meta
+  title='Basics/Tag'
+  component='PixTag'
+  decorators={[centered]}
+  argTypes={stories.argTypes}
+/>
+
+# 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`)
+
+<Canvas isColumn>
+  Tag
+  <Story name="Tag" story={stories.tag} height={60} />
+  Tag compact
+  <Story name="Compact Tag" story={stories.compactTag} height={60} />
+</Canvas>
+
+## 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>
+
+Tag Compact
+<PixTag @compact={{true}} @color='blue'>
+  This is a compactg tag
+</PixTag>
+```
+
+## Arguments
+
+<ArgsTable story="Tag" />

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

@@ -0,0 +1,59 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export const textarea = (args) => {
+  return {
+    template: hbs`
+      <PixTextarea 
+        @id={{id}}
+        @value={{value}}
+        @maxlength={{maxlength}}
+        @label={{label}}
+        @errorMessage={{errorMessage}}
+      />
+    `,
+    context: args,
+  };
+};
+
+export const argTypes = {
+  id: {
+    name: 'id',
+    description: 'Identifiant du champ permettant de lui attacher un label',
+    type: { name: 'string', required: true },
+    defaultValue: '',
+  },
+
+  value: {
+    name: 'value',
+    description: 'Valeur du champ',
+    type: { name: 'string', required: true },
+    defaultValue: '',
+  },
+
+  maxlength: {
+    name: 'maxlength',
+    description: 'Nombre de caractères maximal à taper dans le champ',
+    type: { name: 'number', required: false },
+    defaultValue: 500,
+  },
+
+  label: {
+    name: 'label',
+    description: 'Donne un label au champ.',
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: null },
+    },
+  },
+
+  errorMessage: {
+    name: 'errorMessage',
+    description: 'Affiche une erreur en dessous du champ.',
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: null },
+    },
+  },
+};

package/app/stories/pix-textarea.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-textarea.stories.js';
+
+<Meta
+  title='Form/Textarea'
+  component='PixTextarea'
+  decorators={[centered]}
+  argTypes={stories.argTypes}
+/>
+
+# 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.
+
+> A noter qu'un `id` est nécessaire pour attribuer au textarea un label. Par ailleurs, l'attribut `value` permet de traiter son contenu.
+
+<Canvas>
+  <Story name='PixTextarea' story={stories.textarea} height={100} />
+</Canvas>
+
+## Usage
+
+```html
+<PixTextarea
+  @id={{id}}
+  @value={{value}}
+  @maxlength={{maxlength}}
+  @errorMessage={{errorMessage}} />
+```
+
+## Arguments
+
+<ArgsTable story="PixTextarea" />