@1024pix/pix-ui 46.7.0 → 46.9.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/config/icons.js

@@ -0,0 +1,21 @@
+module.exports = () => ({
+  'free-solid-svg-icons': [
+    'arrow-right',
+    'bullhorn',
+    'check',
+    'chevron-up',
+    'chevron-down',
+    'circle-check',
+    'circle-exclamation',
+    'circle-info',
+    'circle-question',
+    'earth-europe',
+    'eye',
+    'eye-slash',
+    'plus',
+    'triangle-exclamation',
+    'up-right-from-square',
+    'user',
+    'xmark',
+  ],
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "46.7.0",
+  "version": "46.9.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -69,7 +69,6 @@
     "@embroider/macros": "^1.11.0",
     "@embroider/test-setup": "^4.0.0",
     "@fortawesome/ember-fontawesome": "^2.0.0",
-    "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@glimmer/component": "^1.1.2",
     "@glimmer/syntax": "^0.92.0",
@@ -136,6 +135,7 @@
   "files": [
     "addon/",
     "app/",
+    "config/icons.js",
     "public/",
     "scripts/migrate-colors-scss-vars-to-css-vars.sh",
     "scripts/migrate-spacing-scss-vars-to-css-vars.sh"