@1024pix/pix-ui 46.1.0 → 46.2.1

package/addon/components/pix-checkbox.hbs

@@ -1,4 +1,14 @@
 <div class="pix-checkbox {{@class}}">
+  <input
+    type="checkbox"
+    id={{this.id}}
+    class={{this.inputClasses}}
+    checked={{@checked}}
+    aria-disabled={{this.isDisabled}}
+    {{on "click" this.avoidCheckedStateChangeIfIsDisabled}}
+    ...attributes
+  />
+
   <PixLabel
     @for={{this.id}}
     @requiredLabel={{@requiredLabel}}
@@ -7,19 +17,7 @@
     @inlineLabel={{true}}
     @screenReaderOnly={{@screenReaderOnly}}
     @isDisabled={{this.isDisabled}}
-    @wrappedElement={{true}}
   >
-    <:inputElement>
-      <input
-        type="checkbox"
-        id={{this.id}}
-        class={{this.inputClasses}}
-        checked={{@checked}}
-        aria-disabled={{this.isDisabled}}
-        {{on "click" this.avoidCheckedStateChangeIfIsDisabled}}
-        ...attributes
-      />
-    </:inputElement>
-    <:default>{{yield to="label"}}</:default>
+    {{yield to="label"}}
   </PixLabel>
 </div>

package/addon/components/pix-label.hbs

@@ -1,17 +1,11 @@
 <label for={{@for}} class={{this.className}} ...attributes>
-  {{#if (has-block "inputElement")}}
-    {{yield to="inputElement"}}
+  {{#if @requiredLabel}}
+    <abbr title={{@requiredLabel}} class="mandatory-mark">*</abbr>
   {{/if}}
 
-  <span class={{if @screenReaderOnly "screen-reader-only"}}>
-    {{#if @requiredLabel}}
-      <abbr title={{@requiredLabel}} class="mandatory-mark">*</abbr>
-    {{/if}}
+  {{yield}}
 
-    {{yield}}
-
-    {{#if @subLabel}}
-      <span class="pix-label__sub-label">{{@subLabel}}</span>
-    {{/if}}
-  </span>
+  {{#if @subLabel}}
+    <span class="pix-label__sub-label">{{@subLabel}}</span>
+  {{/if}}
 </label>

package/addon/components/pix-label.js

@@ -4,9 +4,8 @@ export default class PixLabel extends Component {
   get className() {
     const classes = ['pix-label'];
 
-    if (this.args.wrappedElement) classes.push('pix-label--wrapped-element');
-    if (this.args.inlineLabel && !this.args.screenReaderOnly)
-      classes.push('pix-label--inline-label');
+    if (this.args.screenReaderOnly) classes.push('screen-reader-only');
+    if (this.args.inlineLabel) classes.push('pix-label--inline-label');
     if (this.args.isDisabled) classes.push('pix-label--disabled');
 
     const size = ['small', 'large'].includes(this.args.size) ? this.args.size : 'default';

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

@@ -1,4 +1,14 @@
 <div class="pix-radio-button {{@class}}">
+  <input
+    type="radio"
+    id={{this.id}}
+    class="pix-radio-button__input"
+    value={{@value}}
+    aria-disabled={{this.isDisabled}}
+    {{on "click" this.avoidCheckedStateChangeIfIsDisabled}}
+    ...attributes
+  />
+
   <PixLabel
     @for={{this.id}}
     @requiredLabel={{@requiredLabel}}
@@ -7,19 +17,7 @@
     @screenReaderOnly={{@screenReaderOnly}}
     @isDisabled={{this.isDisabled}}
     @inlineLabel={{true}}
-    @wrappedElement={{true}}
   >
-    <:inputElement>
-      <input
-        type="radio"
-        id={{this.id}}
-        class="pix-radio-button__input"
-        value={{@value}}
-        aria-disabled={{this.isDisabled}}
-        {{on "click" this.avoidCheckedStateChangeIfIsDisabled}}
-        ...attributes
-      />
-    </:inputElement>
-    <:default>{{yield to="label"}}</:default>
+    {{yield to="label"}}
   </PixLabel>
 </div>

package/addon/styles/_pix-button-base.scss

@@ -2,14 +2,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--pix-neutral-0);
-  font-weight: var(--pix-font-bold);
-  font-size: 0.875rem;
   white-space: nowrap;
   text-decoration: none;
-  background-color: var(--pix-primary-500);
   border: 2px solid transparent;
-  border-radius: 25px;
   outline: none;
   cursor: pointer;
 
@@ -37,14 +32,21 @@
   }
 
   &--size-large {
+    @extend %pix-cta-l;
+
     padding: var(--pix-spacing-3x) var(--pix-spacing-6x);
+    border-radius: 50px;
   }
 
   &--size-small {
+    @extend %pix-cta-s;
+
     padding: var(--pix-spacing-2x) var(--pix-spacing-6x);
+    border-radius: 25px;
   }
 
   &--primary {
+    color: var(--pix-neutral-0);
     background-color: var(--pix-primary-500);
 
     &:not([aria-disabled="true"]) {
@@ -145,6 +147,7 @@
   }
 
   &--success {
+    color: var(--pix-neutral-0);
     background-color: var(--pix-success-500);
 
     &:not([aria-disabled="true"]) {

package/addon/styles/_pix-checkbox.scss

@@ -1,6 +1,8 @@
 .pix-checkbox {
   position: relative;
   z-index: 0;
+  display: flex;
+  align-items: center;
 
   & + .pix-checkbox {
     margin-top: var(--pix-spacing-4x);

package/addon/styles/_pix-label.scss

@@ -3,12 +3,6 @@
   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);
   }
@@ -27,6 +21,7 @@
 
   &--inline-label {
     margin: 0;
+    padding: 0 var(--pix-spacing-2x);
     font-weight: var(--pix-font-normal);
   }
 

package/addon/styles/_pix-radio-button.scss

@@ -1,6 +1,8 @@
 .pix-radio-button {
   position: relative;
   z-index: 0;
+  display: flex;
+  align-items: center;
 
   & + .pix-radio-button {
     margin-top: var(--pix-spacing-4x);

package/addon/styles/pix-design-tokens/_typography.scss

@@ -2,7 +2,7 @@
 
 // Placeholder pour permettre l'utilisation dans une classe css si jamais le tag html a trop de classe
 %-pix-title {
-  font-weight: 700;
+  font-weight: var(--pix-font-bold);
 
   // stylelint-disable-next-line custom-property-pattern
   font-family: var(--_pix-font-family-title);
@@ -79,12 +79,28 @@
 }
 
 %-pix-body {
-  font-weight: 400;
+  font-weight: var(--pix-font-normal);
 
   // stylelint-disable-next-line custom-property-pattern
   font-family: var(--_pix-font-family-body);
 }
 
+%pix-cta-s {
+  @extend %-pix-body;
+
+  font-weight: var(--pix-font-bold);
+  font-size: 0.875rem;
+  line-height: 1.429;
+}
+
+%pix-cta-l {
+  @extend %-pix-body;
+
+  font-weight: var(--pix-font-bold);
+  font-size: 1.125rem;
+  line-height: 1.556;
+}
+
 %pix-body-xs,
 .pix-body-xs {
   @extend %-pix-body;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "46.1.0",
+  "version": "46.2.1",
   "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.2.12",
+    "@1024pix/eslint-config": "^1.2.13",
     "@1024pix/stylelint-config": "^5.1.12",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-decorators": "^7.20.5",