@1024pix/pix-ui 58.4.11 → 60.0.0

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

@@ -8,9 +8,15 @@ export default class PixLabelWrapped extends Component {
 
     if (this.args.inlineLabel) classes.push('pix-label--inline-label');
     if (this.args.isDisabled) classes.push('pix-label-wrapped--disabled');
-    if (this.args.variant === 'tile') classes.push('pix-label-wrapped--variant-tile');
-    if (this.args.state === 'success') classes.push('pix-label-wrapped--state-success');
-    if (this.args.state === 'error') classes.push('pix-label-wrapped--state-error');
+    if (this.args.variant === 'modulix') {
+      classes.push('pix-label-wrapped--variant-modulix');
+      if (this.args.state === 'success') classes.push('pix-label-wrapped--state-modulix-success');
+      if (this.args.state === 'error') classes.push('pix-label-wrapped--state-modulix-error');
+      if (this.args.state === 'neutral') classes.push('pix-label-wrapped--state-modulix-neutral');
+    } else {
+      if (this.args.state === 'success') classes.push('pix-label-wrapped--state-success');
+      if (this.args.state === 'error') classes.push('pix-label-wrapped--state-error');
+    }
 
     const size = ['small', 'large'].includes(this.args.size) ? this.args.size : 'default';
 

package/addon/components/pix-progress-bar.gjs

@@ -1,30 +1,36 @@
+import { warn } from '@ember/debug';
 import { guidFor } from '@ember/object/internals';
 import Component from '@glimmer/component';
 
 export default class PixProgressBar extends Component {
-  get id() {
-    return guidFor(this);
-  }
+  constructor(...args) {
+    super(...args);
+    warn('PixProgressBar: you need to provide a locale', this.args.locale, {
+      id: 'pix-progress-bar.locale.required',
+    });
+
+    warn(
+      'PixProgressBar: you need to provide a number value between 0 and 1',
+      this.args.value >= 0 && this.args.value <= 1,
+      {
+        id: 'pix-progress-bar.value.type.incorrect',
+      },
+    );
 
-  get value() {
-    if (Number(this.args.value) <= 0) return 0;
-    if (Number(this.args.value) > 100) return 100;
-    if (!this.args.value) {
-      throw new Error('ERROR in PixProgressBar component, @value param is not provided.');
-    }
-    return Number(this.args.value);
+    this.id = guidFor(this);
   }
 
   get percentageValue() {
-    return Number(this.value / 100).toLocaleString(navigator.language, { style: 'percent' });
+    return Number(this.clampValue).toLocaleString(this.args.locale, { style: 'percent' });
   }
 
   get label() {
-    const thereIsNoLabel = !this.args.label || !this.args.label.trim();
+    const hasLabel = this.args.label && this.args.label.trim().length > 0;
+
+    warn('PixProgressBar: you need to provide a valid label', hasLabel || this.args.isDecorative, {
+      id: 'pix-progress-bar.label.required',
+    });
 
-    if (thereIsNoLabel && !this.args.isDecorative) {
-      throw new Error('ERROR in PixProgressBar component, @label param is not provided.');
-    }
     return this.args.label;
   }
 
@@ -56,6 +62,10 @@ export default class PixProgressBar extends Component {
     return `progress-bar--content-${color}`;
   }
 
+  get clampValue() {
+    return Math.max(Math.min(this.args.value, 1), 0);
+  }
+
   <template>
     <div
       class="progress-bar {{this.themeMode}} {{this.colorClass}}"
@@ -69,9 +79,10 @@ export default class PixProgressBar extends Component {
       <progress
         class="progress-bar__bar"
         id={{this.id}}
-        max="100"
-        value={{this.value}}
-      >{{this.value}}%</progress>
+        max="1"
+        min="0"
+        value={{this.clampValue}}
+      >{{this.percentageValue}}</progress>
       {{#if @subtitle}}
         <p class="progress-bar__sub-title">{{@subtitle}}</p>
       {{/if}}

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

@@ -10,10 +10,6 @@ import PixLabelWrapped from './pix-label-wrapped';
 export default class PixRadioButton extends Component {
   text = 'pix-radio-button';
 
-  get stateWarning() {
-    return Boolean(this.isDisabled) && (!this.hasErrorState || !this.hasSuccessState);
-  }
-
   get id() {
     return this.args.id || guidFor(this);
   }
@@ -49,6 +45,10 @@ export default class PixRadioButton extends Component {
       classes.push(`${classes[0]}--state`);
     }
 
+    if (this.args.variant === 'modulix') {
+      classes.push('pix-radio-button__input--variant-modulix');
+    }
+
     return classes.join(' ');
   }
 

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

@@ -4,7 +4,7 @@
   align-items: center;
   cursor: pointer;
 
-  &--variant-tile {
+  &--variant-modulix {
     position: relative;
     z-index: -2;
     padding: var(--pix-spacing-3x) var(--pix-spacing-4x);
@@ -41,6 +41,20 @@
           color: var(--pix-error-700);
         }
 
+        &.pix-label-wrapped--state-modulix-error {
+          --state-border-color: var(--pix-warning-700);
+          --state-background-color: var(--pix-warning-50);
+
+          color: var(--pix-warning-700);
+        }
+
+        &.pix-label-wrapped--state-modulix-success {
+          --state-border-color: var(--pix-success-700);
+          --state-background-color: var(--pix-success-50);
+
+          color: var(--pix-success-700);
+        }
+
         & .pix-label-wrapped__state-icon {
           z-index: 1;
           width: 1rem;

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

@@ -92,4 +92,14 @@
       }
     }
   }
+
+  &__input--variant-modulix, svg:has(+ .pix-radio-button__input--variant-modulix) {
+    position: absolute;
+    clip-path: polygon(0 0);
+  }
+
+  .pix-label-wrapped--state-modulix-neutral:has(input:checked):not(.pix-label-wrapped--disabled) {
+    border: 1px solid var(--pix-primary-500);
+    outline: 2px solid var(--pix-primary-300);
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "58.4.11",
+  "version": "60.0.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"