@1024pix/pix-ui 46.9.1 → 46.9.3

package/app/stories/pix-checkbox-variant-tile.mdx

@@ -0,0 +1,42 @@
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+import * as ComponentStories from './pix-checkbox-variant-tile.stories';
+
+<Meta of={ComponentStories} />
+
+# PixCheckbox `@variant="title"`
+
+La PixCheckbox permet de créer des checkbox basiques ou des checkbox mixées (checkbox servant d'indicateur lors d'une sélection multiple).
+Un cursor `pointer` est défini sur la checkbox et son label par défaut.
+
+La checkbox et son label sont visuellement regroupés dans un ensemble intégralement cliquable.
+
+<Story of={ComponentStories.VariantTile} height={120} />
+
+## États de la Checkbox
+
+### Checkbox désactivée
+
+L'attribut `@isDisabled` permet de désactiver la checkbox en conservant la possibilité de naviguer avec le clavier ou le lecteur d'écran. Il est préféré à l'attribut natif `disabled` qui empêche ces usages.
+Un cursor `not-allowed` est défini sur la checkbox et son label lorsqu'elle est dans un état `disabled`.
+
+<Story of={ComponentStories.isDisabledVariantTile} height={120} />
+<Story of={ComponentStories.checkedIsDisabledVariantTile} height={120} />
+<Story of={ComponentStories.isIndeterminateIsDisabledVariantTile} height={120} />
+
+## Usage
+
+```html
+<PixCheckbox
+  @screenReaderOnly={{false}}
+  @isIndeterminate={{false}}
+  @size="small"
+  @isDisabled={{true}}
+  @variant="tile"
+>
+  <:label>Recevoir la newsletter</:label>
+</PixCheckbox>
+```
+
+## Arguments
+
+<ArgTypes of={ComponentStories} />

package/app/stories/pix-checkbox-variant-tile.stories.js

@@ -0,0 +1,68 @@
+import { hbs } from 'ember-cli-htmlbars';
+import pixCheckboxStories from './pix-checkbox.stories.js';
+
+export default {
+  title: 'Form/Inputs/Checkbox/Variant Tile',
+  argTypes: {
+    variant: {
+      name: 'variant',
+      description: 'Utiliser une variante graphique du composant',
+      options: ['tile'],
+      control: { type: 'select' },
+      type: { required: true },
+    },
+    ...pixCheckboxStories.argTypes,
+  },
+};
+
+const VariantTileTemplate = (args) => {
+  return {
+    template: hbs`{{! template-lint-disable no-inline-styles }}
+<div
+  style='border: 1px solid var(--pix-neutral-500); padding: var(--pix-spacing-4x); width: 500px'
+><PixCheckbox
+    @id={{this.id}}
+    @isIndeterminate={{this.isIndeterminate}}
+    @checked={{this.checked}}
+    @isDisabled={{this.isDisabled}}
+    @variant={{this.variant}}
+  >
+    <:label>{{this.label}}</:label>
+  </PixCheckbox></div>`,
+    context: args,
+  };
+};
+
+export const VariantTile = VariantTileTemplate.bind({});
+VariantTile.args = {
+  id: 'proposal',
+  label: 'Une réponse',
+  variant: 'tile',
+};
+
+export const isDisabledVariantTile = VariantTileTemplate.bind({});
+isDisabledVariantTile.args = {
+  id: 'accept-newsletter-2',
+  label: 'Recevoir la newsletter',
+  variant: 'tile',
+  isDisabled: true,
+};
+
+export const checkedIsDisabledVariantTile = VariantTileTemplate.bind({});
+checkedIsDisabledVariantTile.args = {
+  id: 'accept-newsletter-2',
+  label: 'Recevoir la newsletter',
+  variant: 'tile',
+  isDisabled: true,
+  checked: true,
+};
+
+export const isIndeterminateIsDisabledVariantTile = VariantTileTemplate.bind({});
+isIndeterminateIsDisabledVariantTile.args = {
+  id: 'accept-newsletter-2',
+  label: 'Recevoir la newsletter',
+  variant: 'tile',
+  isDisabled: true,
+  checked: true,
+  isIndeterminate: true,
+};

package/app/stories/pix-checkbox.mdx

@@ -1,5 +1,6 @@
 import { Meta, Story, ArgTypes } from '@storybook/blocks';
 import * as ComponentStories from './pix-checkbox.stories';
+import * as VariantTileStories from './pix-checkbox-variant-tile.stories';
 
 <Meta of={ComponentStories} />
 
@@ -27,7 +28,9 @@ La PixCheckbox prend toute la largeur à sa disposition par défaut.
 
 Si le paramètre `variant` est précisé avec la valeur `tile`, la checkbox et son label sont visuellement regroupés dans un ensemble intégralement cliquable.
 
-<Story of={ComponentStories.VariantTile} height={100} />
+<Story of={VariantTileStories.VariantTile} height={120} />
+
+Voir la [documentation de la variante `tile`](?path=/docs/form-inputs-checkbox-variant-tile--docs).
 
 ## États de la Checkbox
 
@@ -46,10 +49,6 @@ Un cursor `not-allowed` est défini sur la checkbox et son label lorsqu'elle est
 <Story of={ComponentStories.checkedIsDisabled} height={60} />
 <Story of={ComponentStories.isIndeterminateIsDisabled} height={60} />
 
-<Story of={ComponentStories.isDisabledVariantTile} height={100} />
-<Story of={ComponentStories.checkedIsDisabledVariantTile} height={100} />
-<Story of={ComponentStories.isIndeterminateIsDisabledVariantTile} height={100} />
-
 ## Autres tailles de police du label
 
 <br />

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

@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
-  title: 'Form/Checkbox',
+  title: 'Form/Inputs/Checkbox',
   argTypes: {
     id: {
       name: 'id',
@@ -120,24 +120,6 @@ const FullWidthTemplate = (args) => {
   };
 };
 
-const VariantTileTemplate = (args) => {
-  return {
-    template: hbs`{{! template-lint-disable no-inline-styles }}
-<div
-  style='border: 1px solid var(--pix-neutral-500); padding: var(--pix-spacing-4x); width: 500px'
-><PixCheckbox
-    @id={{this.id}}
-    @isIndeterminate={{this.isIndeterminate}}
-    @checked={{this.checked}}
-    @isDisabled={{this.isDisabled}}
-    @variant='tile'
-  >
-    <:label>{{this.label}}</:label>
-  </PixCheckbox></div>`,
-    context: args,
-  };
-};
-
 export const Default = Template.bind({});
 Default.args = {
   id: 'accept-newsletter',
@@ -157,12 +139,6 @@ FullWidth.args = {
   label: 'Une réponse',
 };
 
-export const VariantTile = VariantTileTemplate.bind({});
-VariantTile.args = {
-  id: 'proposal',
-  label: 'Une réponse',
-};
-
 export const isIndeterminate = Template.bind({});
 isIndeterminate.args = {
   id: 'accept-newsletter-2',
@@ -209,30 +185,6 @@ isIndeterminateIsDisabled.args = {
   isIndeterminate: true,
 };
 
-export const isDisabledVariantTile = VariantTileTemplate.bind({});
-isDisabledVariantTile.args = {
-  id: 'accept-newsletter-2',
-  label: 'Recevoir la newsletter',
-  isDisabled: true,
-};
-
-export const checkedIsDisabledVariantTile = VariantTileTemplate.bind({});
-checkedIsDisabledVariantTile.args = {
-  id: 'accept-newsletter-2',
-  label: 'Recevoir la newsletter',
-  isDisabled: true,
-  checked: true,
-};
-
-export const isIndeterminateIsDisabledVariantTile = VariantTileTemplate.bind({});
-isIndeterminateIsDisabledVariantTile.args = {
-  id: 'accept-newsletter-2',
-  label: 'Recevoir la newsletter',
-  isDisabled: true,
-  checked: true,
-  isIndeterminate: true,
-};
-
 const MultipleTemplate = (args) => {
   return {
     template: hbs`<PixCheckbox

package/app/stories/pix-radio-button-variant-tile.mdx

@@ -0,0 +1,39 @@
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+import * as ComponentStories from './pix-radio-button-variant-tile.stories.js';
+
+<Meta of={ComponentStories} />
+
+# PixRadioButton `@variant="title"`
+
+Un bouton radio permettant de sélectionner une seule option dans une liste.
+
+⚠️ Le bouton radio ne peut pas être utilisé seul : il faut au minimum **2 options**.<br/>
+Il est préférable de ne pas sélectionner d’option par défaut pour que le choix de l’utilisateur soit conscient (en particulier si le choix est obligatoire).
+
+Un cursor `pointer` est défini sur le RadioButton et son label par défaut.
+
+Le RadioButton et son label sont visuellement regroupés dans un ensemble intégralement cliquable.
+
+<Story of={ComponentStories.VariantTile} height={120} />
+
+## États du RadioButton
+
+### RadioButton désactivé
+
+L'attribut `@isDisabled` permet de désactiver le RadioButton en conservant la possibilité de naviguer avec le clavier ou le lecteur d'écran. Il est préféré à l'attribut natif `disabled` qui empêche ces usages.
+Un cursor `not-allowed` est défini sur le RadioButton et son label lorsqu'il est dans un état `disabled`.
+
+<Story of={ComponentStories.isDisabledVariantTile} height={120} />
+<Story of={ComponentStories.checkedIsDisabledVariantTile} height={120} />
+
+## Usage
+
+```html
+<PixRadioButton name="input-name" @value="{{value}}" @variant="tile">
+  <:label>Exemple de label</:label>
+</PixRadioButton>
+```
+
+## Arguments
+
+<ArgTypes of={ComponentStories} />

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

@@ -0,0 +1,57 @@
+import { hbs } from 'ember-cli-htmlbars';
+import pixRadioButtonStories from './pix-radio-button.stories.js';
+
+export default {
+  title: 'Form/Inputs/Radio Button/Variant Tile',
+  argTypes: {
+    variant: {
+      name: 'variant',
+      description: 'Utiliser une variante graphique du composant',
+      options: ['tile'],
+      control: { type: 'select' },
+      type: { required: true },
+    },
+    ...pixRadioButtonStories.argTypes,
+  },
+};
+
+const VariantTileTemplate = (args) => {
+  return {
+    template: hbs`{{! template-lint-disable no-inline-styles }}
+<div
+  style='border: 1px solid var(--pix-neutral-500); background: var(--pix-neutral-20); padding: var(--pix-spacing-4x); width: 500px'
+><PixRadioButton
+    @id={{this.id}}
+    @isDisabled={{this.isDisabled}}
+    checked={{this.checked}}
+    @variant={{this.variant}}
+  >
+    <:label>{{this.label}}</:label>
+  </PixRadioButton></div>`,
+    context: args,
+  };
+};
+
+export const VariantTile = VariantTileTemplate.bind({});
+VariantTile.args = {
+  id: 'proposal',
+  label: 'Une réponse',
+  variant: 'tile',
+};
+
+export const isDisabledVariantTile = VariantTileTemplate.bind({});
+isDisabledVariantTile.args = {
+  id: 'accept-newsletter-2',
+  label: 'Recevoir la newsletter',
+  variant: 'tile',
+  isDisabled: true,
+};
+
+export const checkedIsDisabledVariantTile = VariantTileTemplate.bind({});
+checkedIsDisabledVariantTile.args = {
+  id: 'accept-newsletter-2',
+  label: 'Recevoir la newsletter',
+  variant: 'tile',
+  isDisabled: true,
+  checked: true,
+};

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

@@ -1,6 +1,7 @@
 import { Meta, Story, ArgTypes } from '@storybook/blocks';
 
 import * as ComponentStories from './pix-radio-button.stories.js';
+import * as VariantTileStories from './pix-radio-button-variant-tile.stories.js';
 
 <Meta of={ComponentStories} />
 
@@ -26,13 +27,15 @@ Pour les considérer comme un seul groupe d'inputs, **il est nécessaire qu'ils
 
 ### Variations graphiques du composant
 
-Le PixRadioButton prend toute la largeur à sa disposition.
+Le PixRadioButton prend toute la largeur à sa disposition par défaut.
 
 <Story of={ComponentStories.FullWidth} height={100} />
 
-Si le paramètre `variant` est précisé avec la valeur `tile`, le radiobutton et son label sont visuellement regroupés dans un ensemble intégralement cliquable.
+Si le paramètre `variant` est précisé avec la valeur `tile`, le RadioButton et son label sont visuellement regroupés dans un ensemble intégralement cliquable.
 
-<Story of={ComponentStories.VariantTile} height={100} />
+<Story of={VariantTileStories.VariantTile} height={100} />
+
+Voir la [documentation de la variante tile](http://localhost:9001/iframe.html?path=/docs/form-inputs-radiobutton-variant-tile--docs).
 
 ## Disabled
 
@@ -53,3 +56,4 @@ L'attribut `@isDisabled` permet de désactiver la radio en conservant la possibi
 ## Arguments
 
 <ArgTypes of={ComponentStories} />
+./pix-radio-button-variant-tile.stories.js

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

@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
-  title: 'Form/Radio Button',
+  title: 'Form/Inputs/Radio Button',
   argTypes: {
     id: {
       name: 'id',
@@ -114,23 +114,6 @@ const FullWidthTemplate = (args) => {
   };
 };
 
-const VariantTileTemplate = (args) => {
-  return {
-    template: hbs`{{! template-lint-disable no-inline-styles }}
-<div
-  style='border: 1px solid var(--pix-neutral-500); background: var(--pix-neutral-20); padding: var(--pix-spacing-4x); width: 500px'
-><PixRadioButton
-    @id={{this.id}}
-    @isDisabled={{this.isDisabled}}
-    checked={{this.checked}}
-    @variant='tile'
-  >
-    <:label>{{this.label}}</:label>
-  </PixRadioButton></div>`,
-    context: args,
-  };
-};
-
 export const Default = Template.bind({});
 Default.args = {
   label: 'Poivron',
@@ -147,25 +130,12 @@ FullWidth.args = {
   label: 'Une réponse',
 };
 
-export const VariantTile = VariantTileTemplate.bind({});
-VariantTile.args = {
-  id: 'proposal',
-  label: 'Une réponse',
-};
-
 export const isDisabled = Template.bind({});
 isDisabled.args = {
   ...Default.args,
   isDisabled: true,
 };
 
-export const isDisabledVariantTile = VariantTileTemplate.bind({});
-isDisabledVariantTile.args = {
-  id: 'accept-newsletter-2',
-  label: 'Recevoir la newsletter',
-  isDisabled: true,
-};
-
 export const checkedIsDisabled = Template.bind({});
 checkedIsDisabled.args = {
   ...Default.args,
@@ -173,14 +143,6 @@ checkedIsDisabled.args = {
   checked: true,
 };
 
-export const checkedIsDisabledVariantTile = VariantTileTemplate.bind({});
-checkedIsDisabledVariantTile.args = {
-  id: 'accept-newsletter-2',
-  label: 'Recevoir la newsletter',
-  isDisabled: true,
-  checked: true,
-};
-
 /* Multiple components story */
 const multipleTemplate = (args) => {
   return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "46.9.1",
+  "version": "46.9.3",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -59,7 +59,7 @@
   },
   "devDependencies": {
     "@1024pix/ember-testing-library": "^1.1.0",
-    "@1024pix/eslint-config": "^1.3.2",
+    "@1024pix/eslint-config": "^1.3.3",
     "@1024pix/stylelint-config": "^5.1.12",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-decorators": "^7.20.5",