@1024pix/pix-ui 31.0.0 → 32.0.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # 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)
+
+
+### :rocket: Amélioration
+- [#384](https://github.com/1024pix/pix-ui/pull/384) [FEATURE] Ajouter une icône avant le label du composant Pix-Select (PIX-7634)
+
 ## v31.0.0 (14/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/components/pix-select.hbs

@@ -34,6 +34,10 @@
       aria-controls={{this.listId}}
       aria-disabled={{@isDisabled}}
     >
+      {{#if @icon}}
+        <FaIcon @icon={{@icon}} />
+      {{/if}}
+
       <span class="pix-select-button__text">{{this.placeholder}}</span>
 
       <FaIcon

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/app/stories/pix-select.stories.js

@@ -28,6 +28,7 @@ export const Template = (args) => {
           @errorMessage={{this.errorMessage}}
           @isDisabled={{this.isDisabled}}
           @placement={{this.placement}}
+          @icon={{this.icon}}
         />
     `,
     context: args,
@@ -218,6 +219,19 @@ WithDropDownAtTheTop.args = {
   placement: 'top',
 };
 
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+  icon: 'earth-europe',
+  isSearchable: false,
+  label: 'With icon',
+  onChange: action('onChange'),
+  options: [
+    { value: 'en', label: 'English' },
+    { value: 'fr', label: 'Français' },
+  ],
+  value: 'fr',
+};
+
 export const argTypes = {
   options: {
     name: 'options',
@@ -374,4 +388,14 @@ export const argTypes = {
       defaultValue: { summary: null },
     },
   },
+  icon: {
+    name: 'icon',
+    description:
+      "Permet l'affichage d'une icône FontAwesome avant le placeholder ou le label de l'option sélectionnée.",
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: null },
+    },
+  },
 };

package/app/stories/pix-select.stories.mdx

@@ -61,6 +61,12 @@ Ici nous avons forcé le placement de la dropdown en haut du select mais sachez
   <Story name="WithDropDownAtTheTop" story={stories.WithDropDownAtTheTop} />
 </Canvas>
 
+## WithIcon
+
+<Canvas>
+  <Story name="WithIcon" story={stories.WithIcon} />
+</Canvas>
+
 ## Usage
 
 ```html
@@ -80,6 +86,7 @@ Ici nous avons forcé le placement de la dropdown en haut du select mais sachez
   @requiredText="{{requiredText}}"
   @errorMessage="{{errorMessage}}"
   @placement="{{placement}}"
+  @icon="{{icon}}"
 />
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "31.0.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();
-}