@1024pix/pix-ui 42.0.4 → 43.0.1

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

@@ -14,6 +14,16 @@ export default {
       description: 'Le label du bouton radio',
       type: { name: 'string', required: true },
     },
+    labelSize: {
+      name: 'labelSize',
+      description: 'Correspond à la taille de la police du label.',
+      type: { name: 'string', required: false },
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+      control: { type: 'select' },
+      options: ['small', 'large', 'default'],
+    },
     class: {
       name: 'class',
       description: "Permet d'ajouter une classe CSS au parent du composant.",
@@ -24,14 +34,24 @@ export default {
       description: "Valeur permettant d'identifier l'option sélectionnée",
       type: { name: 'string', required: false },
     },
-    disabled: {
-      name: 'disabled',
+    isDisabled: {
+      name: 'isDisabled',
       description: 'Pour désactiver/activer le bouton radio',
       type: { name: 'boolean', required: false },
       table: {
         defaultValue: { summary: 'false' },
       },
     },
+    screenReaderOnly: {
+      name: 'screenReaderOnly',
+      description:
+        "Permet de ne pas afficher le label à l'écran. Sert à garder un label qui sera lisible par les lecteurs d'écran.",
+      type: { name: 'boolean', required: true },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
   },
 };
 
@@ -42,7 +62,9 @@ const Template = (args) => {
   @value={{this.value}}
   @id={{this.id}}
   @class={{this.class}}
-  disabled={{this.disabled}}
+  disabled={{this.isDisabled}}
+  @isDisabled={{this.isDisabled}}
+  @labelSize={{this.labelSize}}
 >
   {{this.label}}
 </PixRadioButton>`,
@@ -85,9 +107,21 @@ defaultChecked.args = Default.args;
 /* Multiple components story */
 const multipleTemplate = (args) => {
   return {
-    template: hbs`<PixRadioButton disabled={{this.disabled}} name='radio'>{{this.label}}</PixRadioButton>
-<PixRadioButton disabled={{this.disabled}} name='radio'>{{this.label}}</PixRadioButton>
-<PixRadioButton disabled={{this.disabled}} name='radio'>{{this.label}}</PixRadioButton>`,
+    template: hbs`<PixRadioButton
+  disabled={{this.isDisabled}}
+  @isDisabled={{this.isDisabled}}
+  name='radio'
+>{{this.label}}</PixRadioButton>
+<PixRadioButton
+  disabled={{this.isDisabled}}
+  @isDisabled={{this.isDisabled}}
+  name='radio'
+>{{this.label}}</PixRadioButton>
+<PixRadioButton
+  disabled={{this.isDisabled}}
+  @isDisabled={{this.isDisabled}}
+  name='radio'
+>{{this.label}}</PixRadioButton>`,
     context: args,
   };
 };

package/app/stories/pix-search-input.mdx

@@ -6,12 +6,20 @@ import * as ComponentStories from './pix-search-input.stories.js';
 
 # PixSearchInput
 
-Le PixSearchInput est un champ qui permet de filter des résultats. Un cas d'utilisation courant de ce genre de composant est un champ de filtre d'une colonne d'un tableau.
+Le `PixSearchInput` est un champ qui permet de filter des résultats. Un cas d'utilisation courant de ce genre de composant est un champ de filtre d'une colonne d'un tableau.
 
 A la différence d'un [PixSelect](?path=/docs/form-select--default#withsearch) searchable, la liste des résultats s'affiche en dehors du composant.
 
 Ce composant permet d'appeler la fonction triggerFiltering passée en paramètre selon un debounce (temps d'attente avant le prochain appel) fournis.
 
+## Accessibilité
+
+Si vous utilisez le `PixSearchInput` sans vouloir afficher le label, il faudra renseigner `screenReaderOnly` à `true`.
+
+```html
+<PixSearchInput @label="{{label}}" @screenReaderOnly={{true}} @id="{{id}}" />
+```
+
 <Story of={ComponentStories.Default} height={80} />
 
 ## Usage
@@ -20,7 +28,6 @@ Ce composant permet d'appeler la fonction triggerFiltering passée en paramètre
 <PixSearchInput
   @id="{{this.id}}"
   @label="{{this.label}}"
-  @ariaLabel="{{this.ariaLabel}}"
   @placeholder="{{this.placeholder}}"
   @debounceTimeInMs="{{this.debounceTimeInMs}}"
   @triggerFiltering="{{this.triggerFiltering}}"

package/app/stories/pix-search-input.stories.js

@@ -22,14 +22,15 @@ export default {
         type: { summary: 'string' },
       },
     },
-    ariaLabel: {
-      name: 'ariaLabel',
-      description:
-        "Label du champ. ** ⚠️ L'`ariaLabel` est obligatoire si le `label` n'est pas donné. ⚠️ **",
+    labelSize: {
+      name: 'labelSize',
+      description: 'Correspond à la taille de la police du label.',
       type: { name: 'string', required: false },
       table: {
-        type: { summary: 'string' },
+        defaultValue: { summary: 'default' },
       },
+      control: { type: 'select' },
+      options: ['small', 'large', 'default'],
     },
     placeholder: {
       name: 'placeholder',
@@ -62,7 +63,7 @@ export const Template = (args) => {
     template: hbs`<PixSearchInput
   @id={{this.id}}
   @label={{this.label}}
-  @ariaLabel={{this.ariaLabel}}
+  @labelSize={{this.labelSize}}
   @placeholder={{this.placeholder}}
   @debounceTimeInMs={{this.debounceTimeInMs}}
   @triggerFiltering={{this.triggerFiltering}}
@@ -75,7 +76,6 @@ export const Default = Template.bind({});
 Default.args = {
   id: null,
   label: 'Filtrer un fruit',
-  ariaLabel: null,
   placeholder: 'un placeholder',
   debounceTimeInMs: 500,
   triggerFiltering: action('triggerFiltering'),

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

@@ -46,6 +46,16 @@ export default {
         defaultValue: { summary: false },
       },
     },
+    labelSize: {
+      name: 'labelSize',
+      description: 'Correspond à la taille de la police du label.',
+      type: { name: 'string', required: false },
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+      control: { type: 'select' },
+      options: ['small', 'large', 'default'],
+    },
     id: {
       name: 'id',
       description:
@@ -193,6 +203,7 @@ export const Template = (args) => {
   @className={{this.className}}
   @options={{this.options}}
   @isSearchable={{this.isSearchable}}
+  @labelSize={{this.labelSize}}
   @onChange={{this.onChange}}
   @label={{this.label}}
   @placeholder={{this.placeholder}}

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

@@ -23,6 +23,21 @@ export default {
       description: 'Donne un label au champ.',
       type: { name: 'string', required: false },
     },
+    subLabel: {
+      name: 'subLabel',
+      description: 'Donne un sous label au champ.',
+      type: { name: 'string', required: false },
+    },
+    labelSize: {
+      name: 'labelSize',
+      description: 'Correspond à la taille de la police du label.',
+      type: { name: 'string', required: false },
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+      control: { type: 'select' },
+      options: ['small', 'large', 'default'],
+    },
     requiredLabel: {
       name: 'requiredLabel',
       description:
@@ -44,6 +59,8 @@ const Template = (args) => {
   @value={{this.value}}
   @maxlength={{this.maxlength}}
   @label={{this.label}}
+  @labelSize={{this.labelSize}}
+  @subLabel={{this.subLabel}}
   @requiredLabel={{this.requiredLabel}}
   @errorMessage={{this.errorMessage}}
 />`,

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

@@ -9,6 +9,21 @@ export default {
       description: 'Le label du PixToggle',
       type: { name: 'string', required: true },
     },
+    subLabel: {
+      name: 'subLabel',
+      description: 'Le sous label du PixToggle',
+      type: { name: 'string', required: true },
+    },
+    labelSize: {
+      name: 'labelSize',
+      description: 'Correspond à la taille de la police du label.',
+      type: { name: 'string', required: false },
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+      control: { type: 'select' },
+      options: ['small', 'large', 'default'],
+    },
     onLabel: {
       name: 'onLabel',
       description: "Le label de l'état actif du PixToggle",
@@ -57,6 +72,8 @@ 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}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "42.0.4",
+  "version": "43.0.1",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -8,7 +8,7 @@
   "license": "MIT",
   "author": "GIP Pix",
   "engines": {
-    "node": "^20.10.0"
+    "node": "^20.11.0"
   },
   "ember": {
     "edition": "octane"
@@ -74,7 +74,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@glimmer/component": "^1.1.2",
-    "@glimmer/syntax": "^0.87.0",
+    "@glimmer/syntax": "^0.88.0",
     "@glimmer/tracking": "^1.1.2",
     "@storybook/addon-a11y": "7.1.0",
     "@storybook/addon-controls": "7.1.0",
@@ -109,7 +109,7 @@
     "ember-try": "^3.0.0-beta",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-ember": "^11.2.0",
+    "eslint-plugin-ember": "^12.0.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-qunit": "^8.0.0",
@@ -117,7 +117,7 @@
     "html-webpack-plugin": "^5.5.0",
     "loader.js": "^4.7.0",
     "lodash": "^4.17.21",
-    "npm-run-all": "^4.1.5",
+    "npm-run-all2": "^6.0.0",
     "prettier": "^3.0.0",
     "qunit": "^2.19.3",
     "qunit-dom": "^3.0.0",
@@ -125,7 +125,7 @@
     "storybook": "^7.1.0",
     "stylelint": "^16.0.2",
     "stylelint-config-rational-order": "^0.1.2",
-    "stylelint-config-standard-scss": "^12.0.0",
+    "stylelint-config-standard-scss": "^13.0.0",
     "webpack": "^5.75.0"
   },
   "bugs": {