@1024pix/pix-ui 37.0.0 → 38.1.0

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

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

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

@@ -1,7 +1,7 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import * as stories from './pix-textarea.stories.js';
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+import * as ComponentStories from './pix-textarea.stories.js';
 
-<Meta title="Form/Textarea" component="PixTextarea" argTypes={stories.argTypes} />
+<Meta of={ComponentStories} />
 
 # PixTextarea
 
@@ -11,9 +11,8 @@ Optionellement, il peut afficher le nombre de caractères tapés ainsi que le no
 
 > 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>
+<Story of={ComponentStories.textarea} height={100} />
+
 
 ## Usage
 
@@ -29,4 +28,4 @@ Optionellement, il peut afficher le nombre de caractères tapés ainsi que le no
 
 ## Arguments
 
-<ArgsTable story="PixTextarea" />
+<ArgTypes of={ComponentStories} />

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

@@ -1,5 +1,42 @@
 import { hbs } from 'ember-cli-htmlbars';
 
+export default {
+  title: 'Form/Textarea',
+  argTypes: {
+    id: {
+      name: 'id',
+      description: 'Identifiant du champ permettant de lui attacher un label',
+      type: { name: 'string', required: true },
+    },
+    value: {
+      name: 'value',
+      description: 'Valeur du champ',
+      type: { name: 'string', required: true },
+    },
+    maxlength: {
+      name: 'maxlength',
+      description: 'Nombre de caractères maximal à taper dans le champ',
+      type: { name: 'number', required: false },
+    },
+    label: {
+      name: 'label',
+      description: 'Donne un label au champ.',
+      type: { name: 'string', required: false },
+    },
+    requiredLabel: {
+      name: 'requiredLabel',
+      description:
+        'Label indiquant que le champ est requis, le paramètre @label devient obligatoire avec ce paramètre.',
+      type: { name: 'string', required: false },
+    },
+    errorMessage: {
+      name: 'errorMessage',
+      description: 'Affiche une erreur en dessous du champ.',
+      type: { name: 'string', required: false },
+    },
+  },
+};
+
 const Template = (args) => {
   return {
     template: hbs`<PixTextarea
@@ -19,42 +56,3 @@ textarea.args = {
   id: 'textarea',
   value: 'Contenu du textarea',
 };
-
-export const argTypes = {
-  id: {
-    name: 'id',
-    description: 'Identifiant du champ permettant de lui attacher un label',
-    type: { name: 'string', required: true },
-  },
-
-  value: {
-    name: 'value',
-    description: 'Valeur du champ',
-    type: { name: 'string', required: true },
-  },
-
-  maxlength: {
-    name: 'maxlength',
-    description: 'Nombre de caractères maximal à taper dans le champ',
-    type: { name: 'number', required: false },
-  },
-
-  label: {
-    name: 'label',
-    description: 'Donne un label au champ.',
-    type: { name: 'string', required: false },
-  },
-
-  requiredLabel: {
-    name: 'requiredLabel',
-    description:
-      'Label indiquant que le champ est requis, le paramètre @label devient obligatoire avec ce paramètre.',
-    type: { name: 'string', required: false },
-  },
-
-  errorMessage: {
-    name: 'errorMessage',
-    description: 'Affiche une erreur en dessous du champ.',
-    type: { name: 'string', required: false },
-  },
-};

package/app/stories/pix-toggle.mdx

@@ -0,0 +1,28 @@
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+import * as ComponentStories from './pix-toggle.stories.js';
+
+<Meta of={ComponentStories}/>
+
+# Pix Toggle
+
+Affiche un bouton à deux états.
+
+## Default
+
+<Story of={ComponentStories.Default} height={200} />
+
+## Inline
+
+<Story of={ComponentStories.Inline} height={200} />
+
+## ScreenReaderOnly
+
+<Story of={ComponentStories.ScreenReaderOnly} height={200} />
+
+## WithYields
+
+<Story of={ComponentStories.WithYields} height={200} />
+
+## Arguments
+
+<ArgTypes of={ComponentStories} />

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

@@ -1,6 +1,58 @@
 import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 
+export default {
+  title: 'Form/Toggle',
+  argTypes: {
+    label: {
+      name: 'label',
+      description: 'Le label du PixToggle',
+      type: { name: 'string', required: true },
+    },
+    onLabel: {
+      name: 'onLabel',
+      description: "Le label de l'état actif du PixToggle",
+      type: { name: 'string', required: false },
+    },
+    offLabel: {
+      name: 'offLabel',
+      description: "Le label de l'état non actif du PixToggle",
+      type: { name: 'string', required: false },
+    },
+    toggled: {
+      name: 'toggled',
+      description: 'Détermine si le PixToggle est activé',
+      type: { name: 'boolean', required: true },
+    },
+    onChange: {
+      name: 'onChange',
+      description: "Fonction à appeler quand le PixToggle change d'état.",
+      type: { required: true },
+      control: { disable: true },
+    },
+    inline: {
+      name: 'inline',
+      description: "Permet d'afficher le PixToggle sur une seule ligne",
+      control: { type: 'boolean' },
+      type: { name: 'boolean', required: false },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    screenReaderOnly: {
+      name: 'screenReaderOnly',
+      description: "Permet de rendre le label lisible uniquement par les lecteurs d'écran",
+      control: { type: 'boolean' },
+      type: { name: 'boolean', required: false },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+  },
+};
+
 export const Template = (args) => {
   return {
     template: hbs`
@@ -69,52 +121,3 @@ WithYields.args = {
   toggled: false,
   onChange: action('onChange'),
 };
-
-export const argTypes = {
-  label: {
-    name: 'label',
-    description: 'Le label du PixToggle',
-    type: { name: 'string', required: true },
-  },
-  onLabel: {
-    name: 'onLabel',
-    description: "Le label de l'état actif du PixToggle",
-    type: { name: 'string', required: false },
-  },
-  offLabel: {
-    name: 'offLabel',
-    description: "Le label de l'état non actif du PixToggle",
-    type: { name: 'string', required: false },
-  },
-  toggled: {
-    name: 'toggled',
-    description: 'Détermine si le PixToggle est activé',
-    type: { name: 'boolean', required: true },
-  },
-  onChange: {
-    name: 'onChange',
-    description: "Fonction à appeler quand le PixToggle change d'état.",
-    type: { required: true },
-    control: { disable: true },
-  },
-  inline: {
-    name: 'inline',
-    description: "Permet d'afficher le PixToggle sur une seule ligne",
-    control: { type: 'boolean' },
-    type: { name: 'boolean', required: false },
-    table: {
-      type: { summary: 'boolean' },
-      defaultValue: { summary: false },
-    },
-  },
-  screenReaderOnly: {
-    name: 'screenReaderOnly',
-    description: "Permet de rendre le label lisible uniquement par les lecteurs d'écran",
-    control: { type: 'boolean' },
-    type: { name: 'boolean', required: false },
-    table: {
-      type: { summary: 'boolean' },
-      defaultValue: { summary: false },
-    },
-  },
-};

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

@@ -1,7 +1,7 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import * as stories from './pix-tooltip.stories.js';
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+import * as ComponentStories from './pix-tooltip.stories';
 
-<Meta title="Basics/Tooltip" component="PixTooltip" argTypes={stories.argTypes} />
+<Meta of={ComponentStories} />
 
 # Pix Tooltip
 
@@ -59,10 +59,8 @@ Les tooltips doivent prendre un `@id` et être référencées par leur élément
 
 Infobulle en position `top`, fond sombre (par défaut).
 
-<Canvas>
-  <Story name="Default" story={stories.Default} height={200} />
-  <Story name="WithIcon" story={stories.WithIcon} height={200} />
-</Canvas>
+<Story of={ComponentStories.Default} height={200} />
+<Story of={ComponentStories.WithIcon} height={200} />
 
 ## Is Light
 
@@ -70,52 +68,40 @@ 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>
+<Story of={ComponentStories.isLight} height={200} />
 
 ## 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>
+<Story of={ComponentStories.left} height={100} />
+<Story of={ComponentStories.right} height={100} />
+<Story of={ComponentStories.bottom} height={150} />
 
 ## Is Wide
 
 Infobulle en plus large.
 
-<Canvas>
-  <Story name="Is Wide" story={stories.isWide} height={200} />
-</Canvas>
+<Story of={ComponentStories.isWide} height={200} />
 
 ## Is Inline
 
 Infobulle dont le contenu reste sur une ligne.
 
-<Canvas>
-  <Story name="Is Inline" story={stories.isInline} height={200} />
-</Canvas>
+<Story of={ComponentStories.isInline} height={200} />
 
 ## With HTML
 
 Infobulle contenant des éléments HTML
 
-<Canvas>
-  <Story name="WithHTML" story={stories.WithHTML} height={200} />
-</Canvas>
+<Story of={ComponentStories.WithHTML} height={200} />
 
 ## Hide
 
 Cache la tooltip (par exemple si le contenu est vide).
 
-<Canvas>
-  <Story name="Hide" story={stories.hide} height={200} />
-</Canvas>
+<Story of={ComponentStories.hide} height={200} />
 
 ## Usage
 
@@ -193,4 +179,4 @@ Cache la tooltip (par exemple si le contenu est vide).
 
 ## Arguments
 
-<ArgsTable story="Default" />
+<ArgTypes of={ComponentStories} />

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

@@ -1,5 +1,62 @@
 import { hbs } from 'ember-cli-htmlbars';
 
+export default {
+  title: 'Basics/Tooltip',
+  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',
+      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 } },
+    },
+    hide: {
+      name: 'hide',
+      description: 'Masquer la tooltip',
+      type: { name: 'boolean', required: false },
+      table: { defaultValue: { summary: false } },
+    },
+  },
+};
+
 const Template = (args) => {
   return {
     template: hbs`<PixTooltip
@@ -131,57 +188,3 @@ hide.args = {
   text: "Ne devrait pas s'afficher",
   hide: 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',
-    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 } },
-  },
-  hide: {
-    name: 'hide',
-    description: 'Masquer la tooltip',
-    type: { name: 'boolean', required: false },
-    table: { defaultValue: { summary: false } },
-  },
-};

package/docs/{architecture.stories.mdx → architecture.mdx}

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Développement/Architecture" />
 

package/docs/{breaking-changes.stories.mdx → breaking-changes.mdx}

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Développement/Breaking changes" />
 

package/docs/changelog.mdx

@@ -0,0 +1,6 @@
+import Changelog from '../CHANGELOG.md';
+import { Meta, Markdown } from '@storybook/blocks';
+
+<Meta title="CHANGELOG" />
+
+<Markdown>{Changelog}</Markdown>

package/docs/{colors-palette.stories.mdx → colors-palette.mdx}

@@ -1,6 +1,4 @@
-<!-- Colors.stories.mdx -->
-
-import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
+import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
 
 <Meta title="Utiliser Pix UI/Design Tokens/Palette de couleurs" />