@1024pix/pix-ui 35.0.1 → 36.0.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Pix-UI Changelog
 
+## v36.0.1 (26/06/2023)
+
+
+### :bug: Correction
+- [#425](https://github.com/1024pix/pix-ui/pull/425) [BUGFIX] Réduire la largeur minimum de PixProgressGauge (PIX-8457).
+- [#424](https://github.com/1024pix/pix-ui/pull/424) [BUGFIX] définir une largeur fixe pour le texte de pourcentage de PixProgressGauge (PIX-8439).
+
+## v36.0.0 (13/06/2023)
+
+
+### :boom: BREAKING CHANGE
+- [#417](https://github.com/1024pix/pix-ui/pull/417) [BREAKING] Met à jour la PixProgressBar avec le nouveau design (PIX-8172).
+
 ## v35.0.1 (13/06/2023)
 
 

package/addon/components/pix-progress-gauge.hbs

@@ -1,19 +1,13 @@
-<div
-  class="progress-gauge
-    {{this.progressGaugeClass}}
-    {{if @isArrowLeft 'progress-gauge--tooltip-left'}}"
-  ...attributes
->
-  <div class="progress-gauge__referrer"></div>
-  <div class="progress-gauge__marker" aria-hidden="true" style={{this.valueGaugeStyle}}></div>
-
-  {{#if @tooltipText}}
-    <div class="progress-gauge__tooltip-wrapper" style={{this.valueGaugeStyle}}>
-      <span class="progress-gauge__tooltip">{{@tooltipText}}</span>
-    </div>
-  {{/if}}
-
-  {{#if this.hasSubtitle}}
+<div class="progress-gauge {{this.themeMode}} {{this.colorClass}}" ...attributes>
+  <div class="progress-gauge__text" role="presentation">{{this.percentageValue}}</div>
+  <label for={{this.id}} class="screen-reader-only">{{@label}}</label>
+  <progress
+    class="progress-gauge__bar"
+    id={{this.id}}
+    max="100"
+    value={{this.value}}
+  >{{this.value}}%</progress>
+  {{#if @subtitle}}
     <p class="progress-gauge__sub-title">{{@subtitle}}</p>
   {{/if}}
 </div>

package/addon/components/pix-progress-gauge.js

@@ -1,29 +1,48 @@
 import Component from '@glimmer/component';
-import { htmlSafe } from '@ember/template';
+import { guidFor } from '@ember/object/internals';
 
 export default class PixProgressGauge extends Component {
-  get progressValue() {
-    if (!this.args.value || this.args.value < 0) {
-      return 0;
+  get id() {
+    return guidFor(this);
+  }
+
+  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 PixProgressGauge component, @value param is not provided.');
     }
+    return Number(this.args.value);
+  }
 
-    return this.args.value > 100 ? 100 : this.args.value;
+  get percentageValue() {
+    return Number(this.value / 100).toLocaleString(navigator.language, { style: 'percent' });
   }
 
-  get valueGaugeStyle() {
-    return htmlSafe(`width: ${this.progressValue}%`);
+  get label() {
+    if (!this.args.label || !this.args.label.trim()) {
+      throw new Error('ERROR in PixProgressGauge component, @label param is not provided.');
+    }
+    return this.args.label;
   }
 
-  get hasSubtitle() {
-    return !!this.args.subtitle;
+  get themeMode() {
+    const availableMode = ['dark', 'light'];
+
+    const themeMode =
+      this.args.themeMode && availableMode.includes(this.args.themeMode)
+        ? this.args.themeMode
+        : 'light';
+
+    return `progress-gauge--theme-${themeMode}`;
   }
 
-  get progressGaugeClass() {
-    const availableColor = ['blue', 'white'];
+  get colorClass() {
+    const availableColor = ['blue', 'green', 'purple'];
 
     const color =
-      this.args.color && availableColor.includes(this.args.color) ? this.args.color : `blue`;
+      this.args.color && availableColor.includes(this.args.color) ? this.args.color : 'blue';
 
-    return `progress-gauge--${color}`;
+    return `progress-gauge--content-${color}`;
   }
 }

package/addon/styles/_pix-progress-gauge.scss

@@ -1,116 +1,128 @@
 .progress-gauge {
   position: relative;
-  min-width: 200px;
+  display: grid;
+  grid-template-areas:
+    'text progressbar'
+    'subtitle subtitle';
+  grid-template-columns: auto 1fr;
+  align-items: center;
   width: 100%;
+  min-width: 6rem;
   border-radius: 5px;
 
+  &__bar {
+    grid-area: progressbar;
+    inline-size: unset;
+    flex-grow: 1;
+    height: 0.875rem;
+    border: 2px solid $pix-neutral-20;
+    border-radius: 1.625rem;
+    overflow: hidden;
+
+    &::-webkit-progress-value {
+      background-color: $pix-primary;
+      border-radius: 1.625rem;
+    }
+
+    &::-moz-progress-bar {
+      background-color: $pix-primary;
+      border-radius: 1.625rem;
+    }
+
+    &::-webkit-progress-bar {
+      background-color: $pix-neutral-20;
+    }
+  }
+
+  &__text {
+    @extend %pix-body-s;
+
+    grid-area: text;
+    min-width: 5ch;
+    margin-right: $pix-spacing-xxs;
+    white-space: nowrap;
+    font-weight: 500;
+    line-height: 1;
+  }
+
   &__sub-title {
-    font-size: 0.813rem;
-    color: $pix-primary-60;
+    @extend %pix-body-s;
+
+    grid-area: subtitle;
+    width: 100%;
     margin: 6px 0;
+    color: $pix-primary-60;
     letter-spacing: 0.4px;
     text-transform: uppercase;
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
+}
 
-  &__marker,
-  &__referrer {
-    height: 4px;
-    border-radius: 5px;
-    text-align: right;
+// THEME DARK
+.progress-gauge--theme-dark {
+  .progress-gauge__bar {
+    border: 2px solid $pix-neutral-0;
   }
 
-  &__marker {
-    margin-top: -4px;
+  .progress-gauge__bar::-webkit-progress-bar {
+    background-color: $pix-neutral-0;
   }
 
-  &__tooltip-wrapper {
-    position: relative;
+  .progress-gauge__text,
+  .progress-gauge__sub-title {
+    color: $pix-neutral-0;
   }
+}
 
-  &__tooltip {
-    position: absolute;
-    min-width: 40px;
-    left: 100%;
-    transform: translate(-50%);
-    bottom: calc(100% + 10px);
-    border-radius: 5px;
-    text-align: center;
-    padding: 4px;
-    font-size: 0.8rem;
-    font-weight: $font-bold;
-
-    &::before {
-      content: '';
-      position: absolute;
-      left: calc(50% - 4px);
-      border-top: 4px solid;
-      border-right: 4px solid transparent;
-      border-left: 4px solid transparent;
-      bottom: -4px;
-    }
+// SPECIFIC BAR COLORS
+.progress-gauge--content-blue {
+  .progress-gauge__bar::-webkit-progress-value {
+    background-color: $pix-primary;
   }
 
-  &--white {
-    & .progress-gauge__referrer {
-      background-color: lighten($pix-primary, 15%);
-    }
-
-    & .progress-gauge__marker {
-      background: $pix-neutral-0;
-    }
+  .progress-gauge__bar::-moz-progress-bar {
+    background-color: $pix-primary;
+  }
 
-    & .progress-gauge__tooltip {
-      background: $pix-neutral-0;
+  &:not(.progress-gauge--theme-dark) {
+    .progress-gauge__text,
+    .progress-gauge__sub-title {
       color: $pix-primary;
-
-      &::before {
-        color: $pix-neutral-0;
-        border-top-color: $pix-neutral-0;
-      }
     }
+  }
+}
 
-    & .progress-gauge__sub-title {
-      color: $pix-neutral-0;
-    }
+.progress-gauge--content-green {
+  .progress-gauge__bar::-webkit-progress-value {
+    background-color: $pix-success-60;
   }
 
-  &--blue {
-    & .progress-gauge__referrer {
-      background-color: $pix-neutral-20;
-    }
+  .progress-gauge__bar::-moz-progress-bar {
+    background-color: $pix-success-60;
+  }
 
-    & .progress-gauge__marker {
-      background-color: $pix-primary-60;
+  &:not(.progress-gauge--theme-dark) {
+    .progress-gauge__text,
+    .progress-gauge__sub-title {
+      color: $pix-success-60;
     }
+  }
+}
 
-    & .progress-gauge__tooltip {
-      background-color: $pix-primary-60;
-      color: $pix-neutral-0;
-
-      &::before {
-        border-top-color: $pix-primary-60;
-      }
-    }
+.progress-gauge--content-purple {
+  .progress-gauge__bar::-webkit-progress-value {
+    background-color: $pix-tertiary-60;
+  }
 
-    & .progress-gauge__sub-title {
-      color: $pix-primary-60;
-    }
+  .progress-gauge__bar::-moz-progress-bar {
+    background-color: $pix-tertiary-60;
   }
 
-  &--tooltip-left {
-    & .progress-gauge__tooltip {
-      border-bottom-left-radius: 0;
-      bottom: calc(100% + 14px);
-      transform: none;
-      left: 100%;
-
-      &::before {
-        border-top: 8px solid;
-        border-right: 8px solid transparent;
-        border-left: none;
-        left: 0;
-        bottom: -8px;
-      }
+  &:not(.progress-gauge--theme-dark) {
+    .progress-gauge__text,
+    .progress-gauge__sub-title {
+      color: $pix-tertiary-60;
     }
   }
 }

package/app/stories/pix-progress-gauge.stories.js

@@ -5,36 +5,36 @@ export const Default = (args) => {
     template: hbs`<PixProgressGauge
   @value={{this.value}}
   @color={{this.color}}
-  @isArrowLeft={{this.isArrowLeft}}
+  @themeMode={{this.themeMode}}
   @subtitle={{this.subtitle}}
-  @tooltipText={{this.tooltipText}}
+  @label={{this.label}}
 />`,
     context: args,
   };
 };
 Default.args = {
-  tooltipText: '%',
+  value: '50',
 };
 
-export const whiteProgressGauge = (args) => {
+export const darkModeProgressGauge = (args) => {
   return {
-    template: hbs`<section style='width: 100%; padding: 35px 35px 5px;background-color: lightgray'>
+    template: hbs`<section style='width: 100%; padding: 35px 35px 5px;background-color: #253858'>
   <PixProgressGauge
     @value={{this.value}}
     @color={{this.color}}
-    @isArrowLeft={{this.isArrowLeft}}
+    @label={{this.label}}
+    @themeMode={{this.themeMode}}
     @subtitle={{this.subtitle}}
-    @tooltipText={{this.tooltipText}}
   />
 </section>`,
     context: args,
   };
 };
-whiteProgressGauge.args = {
+darkModeProgressGauge.args = {
   value: '50',
-  tooltipText: '50%',
-  color: 'white',
-  isArrowLeft: true,
+  label: 'Chargement',
+  color: 'purple',
+  themeMode: 'dark',
   subtitle: 'Avancement',
 };
 
@@ -42,23 +42,33 @@ export const argTypes = {
   value: {
     name: 'value',
     description: 'Valeur atteinte sur 100',
-    type: { name: 'number', required: false },
+    type: { name: 'number', required: true },
     table: { defaultValue: { summary: null } },
   },
+  label: {
+    name: 'label',
+    description:
+      "Afficher un label caché permettant d'expliciter le contexte de la jauge de progression",
+    type: { name: 'string', required: true },
+    table: { defaultValue: { summary: 'null' } },
+  },
+  themeMode: {
+    name: 'themeMode',
+    description:
+      "Permet d'indiquer si le thème de la barre de progression est en dark mode ou light mode. Modifie la couleur de fond de la barre de progression. Peut prendre les valeurs `light` ou `dark`",
+    type: { name: 'string', required: false },
+    table: { defaultValue: { summary: 'light' } },
+    control: { type: 'select' },
+    options: ['dark', 'light'],
+  },
   color: {
     name: 'color',
     description:
-      'Modifie la couleur de la barre de progression. Peut prendre les valeurs `blue` ou `white`',
+      "Modifie la couleur du contenu de la barre de progression. Peut prendre les valeurs `blue`, 'green' ou `purple`",
     type: { name: 'string', required: false },
     table: { defaultValue: { summary: 'blue' } },
     control: { type: 'select' },
-    options: ['blue', 'white'],
-  },
-  isArrowLeft: {
-    name: 'isArrowLeft',
-    description: "Modifie la position de l'info bulle sur la gauche",
-    type: { name: 'boolean', required: false },
-    table: { defaultValue: { summary: false } },
+    options: ['blue', 'green', 'purple'],
   },
   subtitle: {
     name: 'subtitle',
@@ -66,10 +76,4 @@ export const argTypes = {
     type: { name: 'string', required: false },
     table: { defaultValue: { summary: 'null' } },
   },
-  tooltipText: {
-    name: 'tooltipText',
-    description: "Afficher un label dans l'info bulle au dessus de la barre de progression",
-    type: { name: 'string', required: false },
-    table: { defaultValue: { summary: 'null' } },
-  },
 };

package/app/stories/pix-progress-gauge.stories.mdx

@@ -3,22 +3,24 @@ import * as stories from './pix-progress-gauge.stories.js';
 
 <Meta title="Others/Progress Gauge" component="PixProgressGauge" argTypes={stories.argTypes} />
 
-# Progress Gauge
+# PixProgressGauge
 
 ## Default
 
-Permet d'afficher un barre de progression sur un barème de 100%. Des paramètres existent pour changer la position de la tooltip ou la couleur du composant
+Permet d'afficher un barre de progression sur un barème de 100%. Des paramètres existent pour changer le mode (dark ou light) ou la couleur du composant.
+
+> **⚠️** **Il est nécessaire d'avoir un `label` pour rendre le composant accessible !**
 
 <Canvas>
   <Story name="Default" story={stories.Default} height={60} />
 </Canvas>
 
-## White
+## Dark mode
 
-Démonstration d'une barre de progression blanche avec l'info bulle à gauche avec un sous titre
+Démonstration d'une barre de progression blanche en dark mode avec un sous titre.
 
 <Canvas>
-  <Story name="White" story={stories.whiteProgressGauge} height={100} />
+  <Story name="Dark" story={stories.darkModeProgressGauge} height={100} />
 </Canvas>
 
 ## Usage
@@ -26,9 +28,9 @@ Démonstration d'une barre de progression blanche avec l'info bulle à gauche av
 ```html
 <PixProgressGauge
   @value="50"
-  @color="white"
-  @tooltipText="50%"
-  @isArrowLeft="true"
+  @label="Chargement"
+  @color="green"
+  @themeMode="dark"
   @subTitle="Un sous titre"
 />
 ```

package/package.json

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