@1024pix/pix-ui 35.0.0 → 36.0.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Pix-UI Changelog
 
+## 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)
+
+
+### :building_construction: Tech
+- [#420](https://github.com/1024pix/pix-ui/pull/420) [TECH] Précise comment documenter un Breaking Change.
+- [#419](https://github.com/1024pix/pix-ui/pull/419) [TECH] Ajoute un moyen d'identifier qu'on génère un Breaking Change.
+
 ## v35.0.0 (31/05/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,117 @@
 .progress-gauge {
   position: relative;
-  min-width: 200px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
   width: 100%;
+  min-width: 200px;
   border-radius: 5px;
 
+  &__bar {
+    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;
+
+    font-weight: 500;
+    margin-right: $pix-spacing-s;
+    white-space: nowrap;
+  }
+
   &__sub-title {
-    font-size: 0.813rem;
-    color: $pix-primary-60;
+    @extend %pix-body-s;
+
+    width: 100%;
     margin: 6px 0;
+    color: $pix-primary-60;
     letter-spacing: 0.4px;
     text-transform: uppercase;
   }
+}
 
-  &__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/docs/breaking-changes.stories.mdx

@@ -53,20 +53,30 @@ Exemples :
 - Un nouveau composant est ajouté
 - Un argument facultatif est ajouté
 
-Astuce : pour repérer les potentiels breaking changes, le mieux est d'installer
+Pour repérer les potentiels breaking changes, il est possible d'[installer
 la version en cours de développement de Pix UI dans une app Ember à partir de
-sa branche sur Github. Si, sans faire aucune autre modification que cette mise
+sa branche sur Github](https://ui.pix.fr/?path=/docs/d%C3%A9veloppement-tester-un-composant-en-developpement-dans-une-app--page). Si, sans faire aucune autre modification que cette mise
 à jour, on observe des changements, alors il s'agit probablement de _breaking
 changes_.
 
+Pour aller plus loin, il est possible d'utiliser l'outil SourceGraph pour rechercher les usages de nos composants ou styles dans nos repos publics. Ainsi, on peut savoir exactement le nombre d'usages de nos composants ou bien les attributs utilisés. Voici quelques exemples de requêtes :
+
+- [Trouver les usages du composant `PixButton`](https://sourcegraph.com/search?q=context:global+repo:1024pix+file:.hbs+PixButton%5Cs&patternType=regexp&sm=0&groupBy=repo)
+- [Trouver les usages du composant `PixModal`](https://sourcegraph.com/search?q=context:global+repo:1024pix+file:.hbs+PixModal%5Cs&patternType=regexp&sm=0&groupBy=repo)
+- [Trouver les usages du placeholder SCSS `%pix-body-m`](https://sourcegraph.com/search?q=context:global+repo:1024pix+file:.scss+%25pix-body-m&patternType=standard&sm=0&groupBy=repo)
+
 ## Comment communiquer en cas de _breaking change_ ?
 
 C'est au développeur qui ouvre la _pull request_ qu'incombe la responsabilité
 d'identifier les éventuels _breaking changes_ dans ses modifications et, le cas
-échéant, de les signaler dans le titre de la PR. Il lui faudra donner aussi un
-maximum d'informations dans une section breaking changes de la PR sur ce qu'il
-convient de faire pour vérifier que rien de casse lors de la montée de version
-de Pix UI.
+échéant, de les signaler en préfixe dans le titre de la PR :
+
+```
+[BREAKING] Changement de couleur de fond par défaut du PixButton (PIX-1234)
+```
+
+Enumérer précisément les fonctionnalités impactées par le breaking change, et la modification à apporter (solution de contournement ou définitive).
+Le développeur pourra ainsi déterminer s'il les utilise, et si c'est le cas, apporter les modifications.
 
 Ainsi :
 

package/package.json

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