@1024pix/pix-ui 46.7.0 → 46.8.0

package/addon/components/pix-radio-button.hbs

@@ -7,6 +7,7 @@
     @screenReaderOnly={{@screenReaderOnly}}
     @isDisabled={{this.isDisabled}}
     @inlineLabel={{true}}
+    @variant={{@variant}}
   >
     <:inputElement>
       <input

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

@@ -24,12 +24,16 @@ Pour les considérer comme un seul groupe d'inputs, **il est nécessaire qu'ils
 
 <Story of={ComponentStories.multiple} height={140} />
 
-### Dimensions du label
+### Variations graphiques du composant
 
-PixRadioButton prend tout l'espace à sa disposition.
+Le PixRadioButton prend toute la largeur à sa disposition.
 
 <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.
+
+<Story of={ComponentStories.VariantTile} height={100} />
+
 ## Disabled
 
 L'attribut `@isDisabled` permet de désactiver la radio 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.

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

@@ -114,6 +114,23 @@ 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',
@@ -130,12 +147,25 @@ 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,
@@ -143,6 +173,14 @@ 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.7.0",
+  "version": "46.8.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"