@1024pix/pix-ui 46.6.4 → 46.8.0

package/addon/components/pix-checkbox.hbs

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

package/addon/components/pix-label-wrapped.js

@@ -2,10 +2,11 @@ import Component from '@glimmer/component';
 
 export default class PixLabelWrapped extends Component {
   get className() {
-    const classes = ['pix-label', 'pix-label--wrapped'];
+    const classes = ['pix-label', 'pix-label-wrapped'];
 
     if (this.args.inlineLabel) classes.push('pix-label--inline-label');
-    if (this.args.isDisabled) classes.push('pix-label--disabled');
+    if (this.args.isDisabled) classes.push('pix-label-wrapped--disabled');
+    if (this.args.variant === 'tile') classes.push('pix-label-wrapped--variant-tile');
 
     const size = ['small', 'large'].includes(this.args.size) ? this.args.size : 'default';
 

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

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

package/addon/styles/_pix-label-wrapped.scss

@@ -0,0 +1,41 @@
+.pix-label-wrapped {
+  display: flex;
+  gap: var(--pix-spacing-2x);
+  align-items: center;
+  cursor: pointer;
+
+  &--variant-tile {
+    position: relative;
+    z-index: -2;
+    padding: var(--pix-spacing-3x) var(--pix-spacing-4x);
+    background: var(--pix-neutral-0);
+    border: 1px solid var(--pix-neutral-100);
+    border-radius: 4px;
+
+    &:focus-within {
+      border: 1px solid var(--pix-primary-500);
+      outline: 2px solid var(--pix-primary-300);
+    }
+
+    &:hover,
+    &:active {
+      background: var(--pix-primary-10);
+    }
+
+    &.pix-label-wrapped {
+      &--disabled {
+        background: var(--pix-neutral-20);
+        border-color: var(--pix-neutral-100);
+
+        &:hover,
+        &:active {
+          background: var(--pix-neutral-20);
+        }
+      }
+    }
+  }
+
+  &--disabled {
+    cursor: not-allowed;
+  }
+}

package/addon/styles/_pix-label.scss

@@ -3,12 +3,6 @@
   color: var(--pix-neutral-900);
   font-weight: var(--pix-font-medium);
 
-  &--wrapped {
-    display: flex;
-    gap: var(--pix-spacing-2x);
-    align-items: center;
-  }
-
   &--disabled {
     color: var(--pix-neutral-500);
   }

package/addon/styles/addon.scss

@@ -21,6 +21,7 @@
 @import 'pix-button-upload';
 @import 'pix-input';
 @import 'pix-label';
+@import 'pix-label-wrapped';
 @import 'pix-input-password';
 @import 'pix-radio-button';
 @import 'pix-modal';

package/app/stories/pix-checkbox.mdx

@@ -6,6 +6,7 @@ import * as ComponentStories from './pix-checkbox.stories';
 # PixCheckbox
 
 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.
 
 <Story of={ComponentStories.Default} height={60} />
 
@@ -18,12 +19,16 @@ En ce sens, nous avons déjà prévu un espace vertical pour séparer 2 composan
 
 <Story of={ComponentStories.multiple} height={140} />
 
-### Dimensions du label
+### Variations graphiques du composant
 
-La PixCheckbox prend tout l'espace à sa disposition.
+La PixCheckbox 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`, la checkbox et son label sont visuellement regroupés dans un ensemble intégralement cliquable.
+
+<Story of={ComponentStories.VariantTile} height={100} />
+
 ## États de la Checkbox
 
 <br />
@@ -35,11 +40,16 @@ La PixCheckbox prend tout l'espace à sa disposition.
 ### 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.isDisabled} height={60} />
 <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

@@ -120,6 +120,24 @@ 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',
@@ -139,6 +157,12 @@ 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',
@@ -185,6 +209,30 @@ 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.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.6.4",
+  "version": "46.8.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"