@1024pix/pix-ui 31.1.0 → 32.0.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Pix-UI Changelog
 
+## v32.0.0 (24/04/2023)
+
+
+### :rocket: Amélioration
+- [#387](https://github.com/1024pix/pix-ui/pull/387) [FEATURE] Ne plus calculer le couleur de fond d'icône du PixIndicatorCard (PIX-7746)
+
 ## v31.1.0 (18/04/2023)
 
 

package/addon/components/pix-indicator-card.hbs

@@ -4,12 +4,7 @@
     <div class="indicator-card__icon" aria-hidden="true"></div>
     <div class="indicator-card__content" aria-hidden="true"></div>
   {{else}}
-    <div
-      id={{this.iconId}}
-      class="indicator-card__icon"
-      aria-hidden="true"
-      {{did-insert this.setIconColor}}
-    >
+    <div id={{this.iconId}} class="indicator-card__icon {{this.color}}" aria-hidden="true">
       <FaIcon @icon={{@icon}} @prefix={{@iconPrefix}} />
     </div>
     <dl class="indicator-card__content">

package/addon/components/pix-indicator-card.js

@@ -1,21 +1,14 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
-import accessibleContrastedColorGenerator from '@1024pix/pix-ui/utils/accessible-contrasted-color-generator';
 
 export default class PixIndicatorCard extends Component {
   id = guidFor(this);
   iconId = 'icon-' + this.id;
   tooltipId = 'tooltip-' + this.id;
 
-  @action
-  setIconColor() {
-    const element = document.getElementById(this.iconId);
-    try {
-      element.style.color = this.args.color;
-      element.style.backgroundColor = accessibleContrastedColorGenerator(this.args.color);
-    } catch (error) {
-      console.error(error.message);
-    }
+  get color() {
+    const { color } = this.args;
+    if (!color) return `indicator-card__icon--grey`;
+    return `indicator-card__icon--${color}`;
   }
 }

package/addon/styles/_pix-indicator-card.scss

@@ -12,9 +12,28 @@
     justify-content: center;
     align-items: center;
     border-radius: 8px 0 0 8px;
-    background-color: $pix-neutral-20;
     min-width: 96px;
     font-size: 2.5rem;
+
+    &--grey {
+      color: $pix-neutral-60;
+      background-color: $pix-neutral-5;  
+    }
+
+    &--blue {
+      color: $pix-primary-60;
+      background-color: $pix-primary-5;  
+    }
+
+    &--green {
+      color: $pix-success-60;
+      background-color: $pix-success-5;  
+    }
+
+    &--purple {
+      color: $pix-tertiary-60;
+      background-color: $pix-tertiary-5;  
+    }
   }
 
   &__content {

package/app/stories/pix-indicator-card.stories.js

@@ -48,6 +48,9 @@ export const argTypes = {
   color: {
     name: 'Color',
     description: "Couleur de l'icone",
+    table: { defaultValue: { summary: 'grey' } },
+    control: { type: 'select' },
+    options: ['grey', 'blue', 'green', 'purple'],
   },
   icon: {
     name: 'Icon',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "31.1.0",
+  "version": "32.0.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -48,7 +48,6 @@
   },
   "dependencies": {
     "@formatjs/intl": "^2.5.1",
-    "color": "^4.2.3",
     "ember-auto-import": "^2.5.0",
     "ember-cli-babel": "^7.26.8",
     "ember-cli-htmlbars": "^6.1.1",

package/addon/utils/accessible-contrasted-color-generator.js

@@ -1,29 +0,0 @@
-import Color from 'color';
-
-// See this link that explains why we had to implement lightenBy and darkenBy  https://github.com/Qix-/color/issues/53#issuecomment-487822576
-function lightenBy(color, ratio) {
-  const lightness = color.lightness();
-  return color.lightness(lightness + (100 - lightness) * ratio);
-}
-
-function darkenBy(color, ratio) {
-  const lightness = color.lightness();
-  return color.lightness(lightness - lightness * ratio);
-}
-
-export default function (hex) {
-  const color = Color(hex);
-  let newColor = color;
-  let contrast;
-  do {
-    if (color.luminosity() < 0.5) {
-      newColor = lightenBy(newColor, 0.05);
-    } else {
-      newColor = darkenBy(newColor, 0.05);
-    }
-    contrast = color.contrast(newColor);
-
-    // newColor.luminosity() can return 0.9999..99 when newColor is white but reinstanciating Color with the hexacode #FFFFFF returns 1
-  } while (contrast < 3 && Color(newColor.hex()).luminosity() < 1);
-  return newColor.hex();
-}