@1024pix/pix-ui 58.4.10 → 59.0.0

package/addon/components/pix-gauge.gjs

@@ -36,7 +36,7 @@ export default class PixGauge extends Component {
     return this.args.hideValues ?? false;
   }
 
-  get maxLevelPourcentage() {
+  get maxLevelPercentage() {
     return this.maxLevel / 8;
   }
   get viewBox() {
@@ -71,6 +71,41 @@ export default class PixGauge extends Component {
     return this.args.isSmall ? 18 : 26;
   }
 
+  get gaugeWidths() {
+    let reachedLevelWidth = this.gaugeWidthCSS(this.reachedLevelPercentage);
+    let maxLevelWidth = this.gaugeWidthCSS(this.maxLevelPercentage);
+
+    const levelDifference = Math.round((this.maxLevel - this.reachedLevel) * 10) / 10;
+
+    const isMaxLevelInteger = this.maxLevel % 1 === 0;
+    const spacingRem = isMaxLevelInteger ? 1.75 : 2.625;
+
+    const isSpaceBetweenLevelsNarrow = this.args.isSmall
+      ? levelDifference < 1.5
+      : levelDifference < 0.5;
+
+    if (!this.hideValues && levelDifference !== 0 && isSpaceBetweenLevelsNarrow) {
+      if (this.maxLevel >= 7.5) {
+        reachedLevelWidth = this.gaugeWidthCSS(this.maxLevelPercentage, `- ${spacingRem}rem`);
+      } else {
+        maxLevelWidth = this.gaugeWidthCSS(this.reachedLevelPercentage, `+ ${spacingRem}rem`);
+      }
+    }
+
+    const reachedLevelMinWidth = `3rem`;
+    const maxLevelMinWidth = `${reachedLevelMinWidth} + ${spacingRem}rem`;
+
+    return {
+      reachedLevel: this.gaugeAdaptativeWidthCSS(reachedLevelMinWidth, reachedLevelWidth),
+      maxLevel: this.gaugeAdaptativeWidthCSS(maxLevelMinWidth, maxLevelWidth),
+    };
+  }
+
+  gaugeWidthCSS = (levelPercentage, spacing = '') =>
+    `calc(calc(100% - 8px) * ${levelPercentage} ${spacing})`;
+
+  gaugeAdaptativeWidthCSS = (width, minWidth) => `max(${minWidth}, ${width})`;
+
   isLevelActive = (index) => {
     if (this.reachedLevel === 0 && index === 0) return true;
     const step = 8 / this.args.stepLabels.length;
@@ -127,13 +162,13 @@ export default class PixGauge extends Component {
         {{! gauge white max level}}
         <rect
           y={{26}}
-          width="calc(calc(100% - 8px) * {{this.maxLevelPourcentage}})"
+          width={{this.gaugeWidths.maxLevel}}
           height={{this.whiteAndPurpleGaugesHeight}}
           rx={{this.whiteAndPurpleGaugeRx}}
           class="result-level-gauge__max-bar"
         />
         {{#unless this.hideValues}}
-          <g style="transform: translate(calc(calc(100% - 8px) * {{this.maxLevelPourcentage}}))">
+          <g style="transform: translate({{this.gaugeWidths.maxLevel}})">
             <text
               y={{this.statsFontHeight}}
               x="0"
@@ -147,15 +182,13 @@ export default class PixGauge extends Component {
         {{! mean purple level }}
         <rect
           y={{26}}
-          width="max(calc(calc(100% - 8px) * {{this.reachedLevelPercentage}}), 44px)"
+          width={{this.gaugeWidths.reachedLevel}}
           height={{this.whiteAndPurpleGaugesHeight}}
           rx={{this.whiteAndPurpleGaugeRx}}
           class="result-level-gauge__mean-bar"
         />
         {{#unless this.hideValues}}
-          <g
-            style="transform: translate(max(calc(calc(100% - 8px) * {{this.reachedLevelPercentage}}), 44px))"
-          >
+          <g style="transform: translate({{this.gaugeWidths.reachedLevel}})">
             <text
               y={{this.statsFontHeight}}
               x="0"

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/package.json

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