add wrappedElement option on PixLabel

1024pix · May 2, 2024 · bc2d127 · bc2d127
1 parent 992cf72
commit bc2d127
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 6 deletions.
diff --git a/addon/components/pix-label.js b/addon/components/pix-label.js
@@ -5,6 +5,7 @@ export default class PixLabel extends Component {
     const classes = ['pix-label'];
 
     if (this.args.screenReaderOnly) classes.push('screen-reader-only');
+    if (this.args.wrappedElement) classes.push('pix-label--wrapped-element');
     if (this.args.inlineLabel) classes.push('pix-label--inline-label');
     if (this.args.isDisabled) classes.push('pix-label--disabled');
 

diff --git a/addon/components/pix-radio-button.hbs b/addon/components/pix-radio-button.hbs
@@ -6,6 +6,7 @@
     @screenReaderOnly={{@screenReaderOnly}}
     @isDisabled={{@isDisabled}}
     @inlineLabel={{true}}
+    @wrappedElement={{true}}
   >
     <input
       type="radio"

diff --git a/addon/styles/_pix-label.scss b/addon/styles/_pix-label.scss
@@ -3,6 +3,12 @@
   color: var(--pix-neutral-900);
   font-weight: var(--pix-font-medium);
 
+  &--wrapped-element {
+    display: flex;
+    gap: var(--pix-spacing-3x);
+    align-items: center;
+  }
+
   &--disabled {
     color: var(--pix-neutral-500);
   }

diff --git a/addon/styles/_pix-radio-button.scss b/addon/styles/_pix-radio-button.scss
@@ -3,12 +3,6 @@
     margin-top: var(--pix-spacing-4x);
   }
 
-  .pix-label {
-    display: flex;
-    gap: var(--pix-spacing-3x);
-    align-items: center;
-  }
-
   &__input {
     position: relative;
     flex-shrink: 0;

diff --git a/app/stories/pix-label.stories.js b/app/stories/pix-label.stories.js
@@ -56,6 +56,15 @@ export default {
       },
       control: { type: 'boolean' },
     },
+    wrappedElement: {
+      name: 'wrappedElement',
+      description: "Permet de définir si le label englobe l'input associé",
+      type: { name: 'boolean', required: false },
+      table: {
+        defaultValue: { summary: false },
+      },
+      control: { type: 'boolean' },
+    },
   },
 };