@1024pix/pix-ui 11.1.0

package/app/stories/pix-tooltip-deprecated.stories.js

@@ -0,0 +1,136 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+const Template = (args) => {
+  return {
+    template: hbs`
+      <PixTooltipDeprecated
+        @id="tooltip-1"
+        @text={{this.text}}
+        @position={{this.position}}
+        @isLight={{this.isLight}}
+        @isInline={{this.isInline}}
+        @isWide={{this.isWide}}
+        @unescapeHtml={{this.unescapeHtml}}
+      >
+        <PixButton aria-describedby="tooltip-1">
+          {{this.label}}
+        </PixButton>
+      </PixTooltipDeprecated>
+    `,
+    context: args,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  text: 'Hello World',
+  label: 'À survoler pour voir la tooltip',
+};
+
+export const isLight = Template.bind({});
+isLight.args = {
+  ...Default.args,
+  isLight: true,
+};
+
+export const isWide = Template.bind({});
+isWide.args = {
+  ...Default.args,
+  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas molestie mauris vel viverra.',
+  isWide: true,
+};
+
+export const isInline = Template.bind({});
+isInline.args = {
+  ...Default.args,
+  text: 'Je suis une trèèèèèèèès longue information',
+  isInline: true,
+};
+
+export const left = Template.bind({});
+left.args = {
+  ...Default.args,
+  label: 'Mon infobulle apparaît à gauche',
+  position: 'left',
+  isInline: true,
+};
+
+export const right = Template.bind({});
+right.args = {
+  ...Default.args,
+  label: 'Mon infobulle apparaît à droite',
+  position: 'right',
+  isInline: true,
+};
+
+export const bottom = Template.bind({});
+bottom.args = {
+  ...Default.args,
+  label: 'Mon infobulle apparaît en bas',
+  position: 'bottom',
+};
+
+export const unescapeHtml = Template.bind({});
+unescapeHtml.args = {
+  ...Default.args,
+  text: 'Hello <b style="color: red;">W</b>orld',
+  label: "J'affiche du html",
+  unescapeHtml: true,
+};
+
+export const argTypes = {
+  id: {
+    name: 'id',
+    description: 'Identifiant permettant de référencer le déclencheur via aria-describedby',
+    type: { name: 'string', required: true },
+  },
+  text: {
+    name: 'text',
+    defaultValue: 'Tooltiptop',
+    description: 'Texte à afficher',
+    type: { name: 'string', required: false },
+  },
+  position: {
+    name: 'position',
+    description: 'Position de la tooltip',
+    type: { name: 'string', required: false },
+    table: { defaultValue: { summary: 'top' } },
+    control: {
+      type: 'select',
+      options: [
+        'top',
+        'top-left',
+        'top-right',
+        'right',
+        'bottom',
+        'bottom-left',
+        'bottom-right',
+        'left',
+      ],
+    },
+  },
+  isLight: {
+    name: 'isLight',
+    description: 'Affichage en mode clair',
+    type: { name: 'boolean', required: false },
+    table: { defaultValue: { summary: false } },
+  },
+  isInline: {
+    name: 'isInline',
+    description: 'Affichage en une seule ligne',
+    type: { name: 'boolean', required: false },
+    table: { defaultValue: { summary: false } },
+  },
+  isWide: {
+    name: 'isWide',
+    description: 'Affichage large',
+    type: { name: 'boolean', required: false },
+    table: { defaultValue: { summary: false } },
+  },
+  unescapeHtml: {
+    name: 'unescapeHtml',
+    description: "Évite d'échapper les caractères HTML",
+    type: { name: 'boolean', required: false },
+    table: { defaultValue: { summary: false } },
+  },
+};

package/app/stories/pix-tooltip-deprecated.stories.mdx

@@ -0,0 +1,143 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+import * as stories from './pix-tooltip-deprecated.stories.js';
+
+<Meta
+  title='Basics/TooltipDeprecated (3.24 Compliant)'
+  component='PixTooltipDeprecated'
+  decorators={[centered]}
+  argTypes={stories.argTypes}
+/>
+
+# 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.
+
+> ⚠️ A noter que le wrapper PixTooltipDeprecated 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 PixTooltipDeprecated, 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
+<PixTooltipDeprecated @text="My tooltip">
+  <span tabindex="0">Mon span</span>
+</PixTooltipDeprecated>
+```
+
+Les tooltips doivent prendre un `@id` et être référencées par leur élément déclencheur via `aria-describedby`:
+
+```html
+<PixTooltipDeprecated @id="tooltip-1" @text="My tooltip">
+  <PixButton aria-describedby="tooltip-1">Mon bouton</PixButton>
+</PixTooltipDeprecated>
+```
+
+## Default
+
+Infobulle en position `top`, fond sombre (par défaut).
+
+<Canvas>
+  <Story name="Default" story={stories.Default} height={200} />
+</Canvas>
+
+## Is Light
+
+Infobulle en mode clair.
+
+> ⚠️ le tooltip "light" est à utiliser de préférence sur fond coloré ! Mais ce n'est pas obligatoire.
+
+<Canvas>
+  <Story name="Is Light" story={stories.isLight} height={200} />
+</Canvas>
+
+## Position
+
+Différentes positions de l'infobulle.
+Existe aussi `top-left`, `top-right`, `bottom-left` et `bottom-right`.
+
+<Canvas isColumn>
+  <Story name="Left" story={stories.left} height={100} />
+  <Story name="Right" story={stories.right} height={100} />
+  <Story name="Bottom" story={stories.bottom} height={150} />
+</Canvas>
+
+## Is Wide
+
+Infobulle en plus large.
+
+<Canvas>
+  <Story name="Is Wide" story={stories.isWide} height={200} />
+</Canvas>
+
+## Is Inline
+
+Infobulle dont le contenu reste sur une ligne.
+
+<Canvas>
+  <Story name="Is Inline" story={stories.isInline} height={200} />
+</Canvas>
+
+## unescape HTML
+
+N'échappe pas l'HTML (Affiche du HTML formaté)
+
+<Canvas>
+    <Story name="unescape HTML" story={stories.unescapeHtml} height={200} />
+</Canvas>
+
+## Usage
+
+```html
+<PixTooltipDeprecated
+  @text='Hey'
+>
+  <button>Tooltip par défaut</button>
+</PixTooltipDeprecated>
+
+<PixTooltipDeprecated
+  @text='Hey'
+  @isLight={{true}}
+>
+  <button>Tooltip en mode clair</button>
+</PixTooltipDeprecated>
+
+<PixTooltipDeprecated
+  @text='Hey'
+  @isLight={{true}}
+>
+  <button>Tooltip sur une ligne</button>
+</PixTooltipDeprecated>
+
+<PixTooltipDeprecated
+  @text='Hey'
+  @position='bottom'
+  @isLight={{true}}
+  >
+  <button>Tooltip apparaissant en bas</button>
+</PixTooltipDeprecated>
+
+<PixTooltipDeprecated
+  @text='Hey'
+  @isWide={{true}}
+  >
+  <button>Tooltip en mode large</button>
+</PixTooltipDeprecated>
+
+<PixTooltipDeprecated
+  @text='Super <b style="color: green">i</b>n<b style="color: green">f</b>o'
+  @unescapeHtml={{true}}
+  >
+  <button>Html tooltip</button>
+</PixTooltipDeprecated>
+```
+
+## Arguments
+
+<ArgsTable story="Default" />

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

@@ -0,0 +1,157 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+const Template = (args) => {
+  return {
+    template: hbs`
+      <PixTooltip
+        @id={{this.id}}
+        @position={{this.position}}
+        @isLight={{this.isLight}}
+        @isInline={{this.isInline}}
+        @isWide={{this.isWide}}>
+        <:triggerElement>
+          <PixButton aria-describedby={{this.id}}>
+            {{this.label}}
+          </PixButton>
+        </:triggerElement>
+
+        <:tooltip>
+          {{this.text}}
+        </:tooltip>
+      </PixTooltip>
+    `,
+    context: args,
+  };
+};
+
+const TemplateWithHTMLElement = (args) => {
+  return {
+    template: hbs`
+      <PixTooltip
+        @id={{this.id}}
+        @isInline=true>
+        <:triggerElement>
+          <PixButton aria-describedby={{this.id}}>
+            {{this.label}}
+          </PixButton>
+        </:triggerElement>
+
+        <:tooltip>
+          <FaIcon @icon="external-link-alt" /> <strong>HTML/Ember</strong>
+        </:tooltip>
+      </PixTooltip>
+    `,
+    context: args,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  text: 'Hello World',
+  label: 'À survoler pour voir la tooltip',
+};
+
+export const isLight = Template.bind({});
+isLight.args = {
+  ...Default.args,
+  id: 'tooltip-light',
+  isLight: true,
+};
+
+export const isWide = Template.bind({});
+isWide.args = {
+  ...Default.args,
+  id: 'tooltip-wide',
+  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas molestie mauris vel viverra.',
+  isWide: true,
+};
+
+export const isInline = Template.bind({});
+isInline.args = {
+  ...Default.args,
+  id: 'tooltip-large',
+  text: 'Je suis une trèèèèèèèès longue information',
+  isInline: true,
+};
+
+export const left = Template.bind({});
+left.args = {
+  ...Default.args,
+  id: 'tooltip-left',
+  label: 'Mon infobulle apparaît à gauche',
+  position: 'left',
+  isInline: true,
+};
+
+export const right = Template.bind({});
+right.args = {
+  ...Default.args,
+  id: 'tooltip-right',
+  label: 'Mon infobulle apparaît à droite',
+  position: 'right',
+  isInline: true,
+};
+
+export const bottom = Template.bind({});
+bottom.args = {
+  ...Default.args,
+  id: 'tooltip-bottom',
+  label: 'Mon infobulle apparaît en bas',
+  position: 'bottom',
+};
+
+export const WithHTML = TemplateWithHTMLElement.bind({});
+WithHTML.args = {
+  label: 'À survoler pour voir la tooltip',
+};
+
+export const argTypes = {
+  id: {
+    name: 'id',
+    description: 'Identifiant permettant de référencer le déclencheur via aria-describedby',
+    type: { name: 'string', required: true },
+  },
+  text: {
+    name: 'text',
+    defaultValue: 'Tooltiptop',
+    description: 'Texte à afficher',
+    type: { name: 'string', required: false },
+  },
+  position: {
+    name: 'position',
+    description: 'Position de la tooltip',
+    type: { name: 'string', required: false },
+    table: { defaultValue: { summary: 'top' } },
+    control: {
+      type: 'select',
+      options: [
+        'top',
+        'top-left',
+        'top-right',
+        'right',
+        'bottom',
+        'bottom-left',
+        'bottom-right',
+        'left',
+      ],
+    },
+  },
+  isLight: {
+    name: 'isLight',
+    description: 'Affichage en mode clair',
+    type: { name: 'boolean', required: false },
+    table: { defaultValue: { summary: false } },
+  },
+  isInline: {
+    name: 'isInline',
+    description: 'Affichage en une seule ligne',
+    type: { name: 'boolean', required: false },
+    table: { defaultValue: { summary: false } },
+  },
+  isWide: {
+    name: 'isWide',
+    description: 'Affichage large',
+    type: { name: 'boolean', required: false },
+    table: { defaultValue: { summary: false } },
+  },
+};

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

@@ -0,0 +1,183 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+import * as stories from './pix-tooltip.stories.js';
+
+<Meta
+  title='Basics/Tooltip'
+  component='PixTooltip'
+  decorators={[centered]}
+  argTypes={stories.argTypes}
+/>
+
+# 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).
+
+<Canvas>
+  <Story name="Default" story={stories.Default} height={200} />
+</Canvas>
+
+## Is Light
+
+Infobulle en mode clair.
+
+> ⚠️ le tooltip "light" est à utiliser de préférence sur fond coloré ! Mais ce n'est pas obligatoire.
+
+<Canvas>
+  <Story name="Is Light" story={stories.isLight} height={200} />
+</Canvas>
+
+## Position
+
+Différentes positions de l'infobulle.
+Existe aussi `top-left`, `top-right`, `bottom-left` et `bottom-right`.
+
+<Canvas isColumn>
+  <Story name="Left" story={stories.left} height={100} />
+  <Story name="Right" story={stories.right} height={100} />
+  <Story name="Bottom" story={stories.bottom} height={150} />
+</Canvas>
+
+## Is Wide
+
+Infobulle en plus large.
+
+<Canvas>
+  <Story name="Is Wide" story={stories.isWide} height={200} />
+</Canvas>
+
+## Is Inline
+
+Infobulle dont le contenu reste sur une ligne.
+
+<Canvas>
+  <Story name="Is Inline" story={stories.isInline} height={200} />
+</Canvas>
+
+
+## With HTML
+
+Infobulle contenant des éléments HTML
+
+<Canvas>
+  <Story name="WithHTML" story={stories.WithHTML} height={200} />
+</Canvas>
+
+## Usage
+
+```html
+<PixTooltip>
+  <:triggerElement>
+    <button>Tooltip par défaut</button>
+  </:triggerElement>
+  <:tooltip>
+    <FaIcon @icon="external-link-alt" /> 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
+  @isWide={{true}}
+  >
+  <:triggerElement>
+    <button>Tooltip en mode large</button>
+  </:triggerElement>
+
+  <:tooltip>
+    Hey
+  </:tooltip>
+</PixTooltip>
+```
+
+## Arguments
+
+<ArgsTable story="Default" />

package/config/environment.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = function (/* environment, appConfig */) {
+  return {};
+};