@1024pix/pix-ui 44.3.8 → 45.0.1

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

@@ -5,8 +5,8 @@ export default {
   argTypes: {
     id: {
       name: 'id',
-      description: 'Identifiant du champ permettant de lui attacher un label',
-      type: { name: 'string', required: true },
+      description: 'id généré automatiquement, peut être définit manuellement si besoin',
+      type: { name: 'string', required: false },
     },
     value: {
       name: 'value',
@@ -18,18 +18,42 @@ export default {
       description: 'Nombre de caractères maximal à taper dans le champ',
       type: { name: 'number', required: false },
     },
+    errorMessage: {
+      name: 'errorMessage',
+      description: 'Affiche une erreur en dessous du champ.',
+      type: { name: 'string', required: false },
+    },
+
     label: {
       name: 'label',
       description: 'Donne un label au champ.',
-      type: { name: 'string', required: false },
+      type: { name: 'string', required: true },
     },
     subLabel: {
       name: 'subLabel',
-      description: 'Donne un sous label au champ.',
+      description: 'Un descriptif complétant le label',
+      type: { name: 'string', required: false },
+    },
+    requiredLabel: {
+      name: 'requiredLabel',
+      description: 'Label indiquant que le champ est requis.',
       type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'string' },
+      },
     },
-    labelSize: {
-      name: 'labelSize',
+    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 },
+      },
+    },
+    size: {
+      name: 'size',
       description: 'Correspond à la taille de la police du label.',
       type: { name: 'string', required: false },
       table: {
@@ -38,16 +62,14 @@ export default {
       control: { type: 'select' },
       options: ['small', 'large', 'default'],
     },
-    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 },
+    inlineLabel: {
+      name: 'inlineLabel',
+      description: 'Permet de ne pas afficher la marge pour les éléments de formulaire inline',
+      type: { name: 'boolean', required: false },
+      table: {
+        defaultValue: { summary: false },
+      },
+      control: { type: 'boolean' },
     },
   },
 };
@@ -58,12 +80,12 @@ const Template = (args) => {
   @id={{this.id}}
   @value={{this.value}}
   @maxlength={{this.maxlength}}
-  @label={{this.label}}
-  @labelSize={{this.labelSize}}
+  @errorMessage={{this.errorMessage}}
+  @size={{this.size}}
   @subLabel={{this.subLabel}}
   @requiredLabel={{this.requiredLabel}}
-  @errorMessage={{this.errorMessage}}
-/>`,
+  @inlineLabel={{this.inlineLabel}}
+><:label>{{this.label}}</:label></PixTextarea>`,
     context: args,
   };
 };

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

@@ -14,8 +14,8 @@ export default {
       description: 'Le sous label du PixToggle',
       type: { name: 'string', required: true },
     },
-    labelSize: {
-      name: 'labelSize',
+    size: {
+      name: 'size',
       description: 'Correspond à la taille de la police du label.',
       type: { name: 'string', required: false },
       table: {
@@ -45,8 +45,8 @@ export default {
       type: { required: true },
       control: { disable: true },
     },
-    inline: {
-      name: 'inline',
+    inlineLabel: {
+      name: 'inlineLabel',
       description: "Permet d'afficher le PixToggle sur une seule ligne",
       control: { type: 'boolean' },
       type: { name: 'boolean', required: false },
@@ -71,23 +71,25 @@ export default {
 export const Template = (args) => {
   return {
     template: hbs`<PixToggle
-  @label={{this.label}}
-  @labelSize={{this.labelSize}}
-  @subLabel={{this.subLabel}}
   @onLabel={{this.onLabel}}
   @offLabel={{this.offLabel}}
   @toggled={{this.toggled}}
   @onChange={{this.onChange}}
-  @inline={{this.inline}}
+  @size={{this.size}}
+  @subLabel={{this.subLabel}}
+  @inlineLabel={{this.inlineLabel}}
   @screenReaderOnly={{this.screenReaderOnly}}
-/>`,
+>
+  <:label>{{this.label}}</:label>
+</PixToggle>`,
     context: args,
   };
 };
 
 export const TemplateWithYields = (args) => {
   return {
-    template: hbs`<PixToggle @label={{this.label}} @toggled={{this.toggled}} @onChange={{this.onChange}}>
+    template: hbs`<PixToggle @toggled={{this.toggled}} @onChange={{this.onChange}}>
+  <:label>{{this.label}}</:label>
   <:on><FaIcon @icon='sun' /></:on>
   <:off><FaIcon @icon='moon' /></:off>
 </PixToggle>`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "44.3.8",
+  "version": "45.0.1",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"