@1024pix/pix-ui 38.0.0 → 38.2.0

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

@@ -1,7 +1,90 @@
 import { hbs } from 'ember-cli-htmlbars';
 
-export const htmlLinkTemplate = (args) => {
-  return {
+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 },
+    },
+    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' },
+      },
+    },
+  },
+};
+
+export const htmlLink = {
+  render: (args) => ({
     template: hbs`<PixButtonLink
   @href='https://pix.fr'
   target='NEW'
@@ -14,10 +97,10 @@ export const htmlLinkTemplate = (args) => {
   Lien HTML classique
 </PixButtonLink>`,
     context: args,
-  };
+  }),
 };
 
-export const emberLinkTemplate = (args) => {
+export const emberLink = (args) => {
   return {
     template: hbs`<PixButtonLink
   @route=''
@@ -34,86 +117,3 @@ export const emberLinkTemplate = (args) => {
     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 },
-  },
-  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 },
-  },
-  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-upload.stories.mdx → pix-button-upload.mdx}

@@ -1,8 +1,7 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+import * as ComponentStories from './pix-button-upload.stories';
 
-import * as stories from './pix-button-upload.stories.js';
-
-<Meta title="Basics/ButtonUpload" component="PixButtonUpload" argTypes={stories.argTypes} />
+<Meta of={ComponentStories} />
 
 # PixButtonUpload
 
@@ -12,9 +11,7 @@ Hérite des styles de base de `PixButton` (`shape`, `backgroundColor`, `size`, `
 
 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>
+<Story of={ComponentStories.buttonUpload} height={60} />
 
 ```html
 <PixButtonUpload @id="file-upload" @onChange="{{this.uploadFile}}" accept=".csv">
@@ -26,4 +23,4 @@ Le callback `@onChange` prend en paramètre le tableau de fichiers uploadés.
 
 ## Arguments
 
-<ArgsTable story="PixButtonUpload" />
+<ArgTypes of={ComponentStories} />

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

@@ -1,6 +1,68 @@
 import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 
+export default {
+  title: 'Basics/ButtonUpload',
+  argTypes: {
+    id: {
+      name: 'id',
+      description: "identifiant du bouton d'upload",
+      type: { name: 'string', required: true },
+    },
+    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 },
+    },
+    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' },
+      },
+    },
+  },
+};
+
 export const buttonUpload = (args) => {
   return {
     template: hbs`<PixButtonUpload
@@ -21,62 +83,3 @@ buttonUpload.args = {
   id: 'file-upload',
   onChange: action('onChange'),
 };
-
-export const argTypes = {
-  id: {
-    name: 'id',
-    description: "identifiant du bouton d'upload",
-    type: { name: 'string', required: true },
-  },
-  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 },
-  },
-  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' },
-    },
-  },
-};

package/app/stories/{pix-button.stories.mdx → pix-button.mdx}

@@ -1,7 +1,7 @@
-import { Meta, Story, Canvas, ArgsTable, SourceContainer } from '@storybook/addon-docs';
-import * as stories from './pix-button.stories.js';
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+import * as ComponentStories from './pix-button.stories';
 
-<Meta title="Basics/Button" component="PixButton" argTypes={stories.argsTypes} />
+<Meta of={ComponentStories} />
 
 # Pix Button
 
@@ -9,25 +9,19 @@ import * as stories from './pix-button.stories.js';
 
 Le bouton par défaut qui empêche les clics multiples.
 
-<Canvas>
-  <Story name="Default" story={stories.Default} height={75} />
-</Canvas>
+  <Story of={ComponentStories.Default} />
 
 ## Borders
 
 Le bouton avec bordures et fond transparent
 
-<Canvas isColumn>
-  <Story story={stories.borders} height={150} />
-</Canvas>
+  <Story of={ComponentStories.borders} height={150} />
 
 ## Colors
 
 Le bouton avec toutes ses variations de couleur
 
-<Canvas isColumn>
-  <Story story={stories.colors} height={500} />
-</Canvas>
+  <Story of={ComponentStories.colors} height={500} />
 
 ## Icons
 
@@ -35,17 +29,14 @@ Le bouton avec des icônes `font-awesome` à afficher avant (`@iconBefore`) ou a
 
 > ℹ️ Accessibilité : dans le cas où les icônes ont une valeur d'information (ex:&nbsp;un bouton `⬅️ Précédent`), il est important d'apporter un aria-label au bouton (ex:&nbsp;"Retour à la page précédente").
 
-<Canvas isColumn>
-  <Story story={stories.icons} height={75} />
-</Canvas>
+  <Story of={ComponentStories.icons} height={75} />
 
 ## Disabled
 
 Le bouton désactivé
 
-<Canvas>
-  <Story story={stories.disabled} height={75} />
-</Canvas>
+  <Story of={ComponentStories.disabled} height={75} />
+
 
 ## Link
 
@@ -61,25 +52,21 @@ 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>
+ <Story of={ComponentStories.loader} height={150} />
 
 ## Shape
 
 Le bouton rounded
 
-<Canvas>
-  <Story story={stories.shape} height={75} />
-</Canvas>
+ <Story of={ComponentStories.shape}  height={75} />
+
 
 ## Size
 
 Le bouton en small
 
-<Canvas>
-  <Story story={stories.size} height={75} />
-</Canvas>
+ <Story of={ComponentStories.size} height={75} />
+
 
 ## Usage
 
@@ -102,4 +89,4 @@ Un petit bouton avec les bords arrondis en fond transparent avec une bordure
 
 ## Arguments
 
-<ArgsTable story="Default" exclude={['buttons', 'model', 'label', 'style']} />
+<ArgTypes of={ComponentStories} />