@1024pix/pix-ui 14.3.1 → 14.4.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Pix-UI Changelog
 
+## v14.4.0 (17/06/2022)
+
+
+### :building_construction: Tech
+- [#219](https://github.com/1024pix/pix-ui/pull/219) [TECH] Ajouter les variables du design system dans Pix-UI.(PIX-2307)
+
+### :coffee: Autre
+- [#221](https://github.com/1024pix/pix-ui/pull/221) [A11Y] Ajouter un aria hidden aux étoiles des paliers (PIX-5076)
+- [#220](https://github.com/1024pix/pix-ui/pull/220) Mise à jour de la doc pour tester pixInput via testing-library
+
 ## v14.3.1 (11/05/2022)
 
 

package/addon/components/pix-stars.hbs

@@ -1,6 +1,12 @@
 <div class={{this.pixStarsClass}} ...attributes role="img" aria-label={{@alt}}>
   {{#each this.stars as |star|}}
-    <svg class="pix-stars__{{star}}" data-test-status={{star}} viewBox="0 0 36 36" role="img">
+    <svg
+      class="pix-stars__{{star}}"
+      data-test-status={{star}}
+      viewBox="0 0 36 36"
+      role="img"
+      aria-hidden="true"
+    >
       <defs>
         <linearGradient id="pix-stars-default" x1="68.643%" y1="0%" x2="68.643%" y2="100%">
           <stop stop-color="#FEDC41" offset="0%"></stop>

package/addon/styles/_colors.scss

@@ -1,88 +1,508 @@
-// See https://zeroheight.com/8dd127da7/p/839645-couleurs/b/21317a
+// See https://www.figma.com/file/8RJ3aCSfdeQ8AZZVBBYKS8/Design-System-Pix?node-id=16%3A2
 
+//// SOLID
+// Primary
+$pix-primary-5: #f2f9ff;
+$pix-primary-10: #dcf1ff;
+$pix-primary-20: #c4e6ff;
+$pix-primary-30: #88beff;
+$pix-primary-40: #5b94ff;
+$pix-primary: #3d68ff;
+$pix-primary-60: #2044dc;
+$pix-primary-70: #0d25b3;
+$pix-primary-80: #000e87;
+
+// Secondary
+$pix-secondary-5: #fff9e6;
+$pix-secondary-10: #ffeeb3;
+$pix-secondary-20: #ffe381;
+$pix-secondary: #ffd235;
+$pix-secondary-40: #eaa600;
+$pix-secondary-50: #eaa600;
+$pix-secondary-60: #ce8900;
+$pix-secondary-70: #a95800;
+$pix-secondary-80: #874d00;
+
+// Secondary Pix Certif
+$pix-secondary-certif-5: #ccf6f5;
+$pix-secondary-certif-10: #9aedeb;
+$pix-secondary-certif-20: #67e4e0;
+$pix-secondary-certif-30: #34dbd6;
+$pix-secondary-certif: #20b4af;
+$pix-secondary-certif-50: #17817e;
+$pix-secondary-certif-60: #126765;
+$pix-secondary-certif-70: #0e4d4c;
+$pix-secondary-certif-80: #093432;
+
+// Secondary Pix Orga
+$pix-secondary-orga-5: #d5f9ff;
+$pix-secondary-orga-10: #aaf4ff;
+$pix-secondary-orga-20: #80eeff;
+$pix-secondary-orga-30: #55e8ff;
+$pix-secondary-orga: #00ddff;
+$pix-secondary-orga-50: #00c1df;
+$pix-secondary-orga-60: #00a6bf;
+$pix-secondary-orga-70: #008a9f;
+$pix-secondary-orga-80: #006e80;
+
+// Tertiary
+$pix-tertiary-5: #ebe1ff;
+$pix-tertiary-10: #d8c2ff;
+$pix-tertiary-20: #c4a4ff;
+$pix-tertiary-30: #b186ff;
+$pix-tertiary: #9d67ff;
+$pix-tertiary-50: #8a49ff;
+$pix-tertiary-60: #6712ff;
+$pix-tertiary-70: #4e00db;
+$pix-tertiary-80: #3b00a4;
+
+// Success
+$pix-success-5: #ecfdf5;
+$pix-success-10: #d1fae5;
+$pix-success-20: #a7f3d0;
+$pix-success-30: #6ee7b7;
+$pix-success: #34d399;
+$pix-success-50: #27b481;
+$pix-success-60: #14865d;
+$pix-success-70: #176c4d;
+$pix-success-80: #104834;
+
+// Warning
+$pix-warning-5: #fff9e6;
+$pix-warning-10: #fff1c5;
+$pix-warning-20: #ffe381;
+$pix-warning-30: #ffd235;
+$pix-warning-40: #ffbe00;
+$pix-warning-50: #eaa600;
+$pix-warning-60: #ce8900;
+$pix-warning-70: #ac6a00;
+$pix-warning-80: #874d00;
+
+// Error
+$pix-error-5: #fef2f2;
+$pix-error-10: #fee2e2;
+$pix-error-20: #fecaca;
+$pix-error-30: #fca5a5;
+$pix-error-40: #f87171;
+$pix-error-50: #ef4444;
+$pix-error-60: #dc2626;
+$pix-error-70: #b91c1c;
+$pix-error-80: #991b1b;
+
+// Neutral
+$pix-neutral-0: #ffffff;
+$pix-neutral-5: #fafbfc;
+$pix-neutral-10: #f4f5f7;
+$pix-neutral-15: #eaecf0;
+$pix-neutral-20: #dfe1e6;
+$pix-neutral-22: #c1c7d0;
+$pix-neutral-25: #a5adba;
+$pix-neutral-30: #97a0af;
+$pix-neutral-35: #8993a4;
+$pix-neutral-40: #7a869a;
+$pix-neutral-45: #6b778c;
+$pix-neutral-50: #5e6c84;
+$pix-neutral-60: #505f79;
+$pix-neutral-70: #344563;
+$pix-neutral-80: #253858;
+$pix-neutral-90: #172b4d;
+$pix-neutral-100: #091e42;
+$pix-neutral-110: #07142e;
+
+// Shades
+$pix-shades-100: #000000;
+
+// Domain
+$pix-information-dark: #f24645;
+$pix-information-light: #f1a141;
+
+$pix-content-dark: #1a8c89;
+$pix-content-light: #52d987;
+
+$pix-communication-dark: #3d68ff;
+$pix-communication-light: #12a3ff;
+
+$pix-security-dark: #ac008d;
+$pix-security-light: #ff3f94;
+
+$pix-environment-dark: #5e2563;
+$pix-environment-light: #564da6;
+
+//// GRADIENT
+$pix-primary-app-gradient: linear-gradient(91.59deg, #3d68ff 0%, #8845ff 100%);
+$pix-secondary-app-gradient: linear-gradient(91.59deg, #fedc41 0%, #ff9f00 100%);
+$pix-primary-certif-gradient: linear-gradient(91.59deg, #52d987 0%, #1a8c89 100%);
+$pix-primary-orga-gradient: linear-gradient(91.59deg, #00ddff 0%, #0095c0 100%);
+$pix-secondary-orga-gradient: linear-gradient(91.59deg, #0d7dc4 0%, #213371 100%);
+
+// Domain
+$pix-information-gradient: linear-gradient(180deg, #f24645 0%, #f1a141 100%);
+$pix-content-gradient: linear-gradient(180deg, #1a8c89 0%, #52d987 100%);
+$pix-communication-gradient: linear-gradient(180deg, #3d68ff 0%, #12a3ff 100%);
+$pix-security-gradient: linear-gradient(180deg, #ac008d 0%, #ff3f94 100%);
+$pix-environment-gradient: linear-gradient(180deg, #5e2563 0%, #564da6 100%);
+
+//// DEPRECATED
 // primary
-$blue: #3D68FF;
-$yellow: #FFBE00;
-$orange: #DA7601;
-$red: #D63F00;
-$blue-zodiac: #505F79;
-$black: #07142E;
+/**
+ * @deprecated Please use '$pix-primary' instead!
+ */
+$blue: #3d68ff;
+
+/**
+ * @deprecated Please use '$pix-warning-40' instead!
+ */
+$yellow: #ffbe00;
+
+/**
+ * @deprecated
+ */
+$orange: #da7601;
+
+/**
+ * @deprecated
+ */
+$red: #d63f00;
+
+/**
+ * @deprecated Please use '$pix-neutral-60' instead!
+ */
+$blue-zodiac: #505f79;
+
+/**
+ * @deprecated Please use '$pix-neutral-110' instead!
+ */
+$black: #07142e;
+
+/**
+ * @deprecated Please use '$pix-neutral-0' instead!
+ */
 $white: #ffffff;
+
 // secondary
-$blue-hover: #3257D9;
-$dark-blue-pro: #1A38A0;
-$dark-green-certif: #17817E;
-$dark-orga: #006C87;
+
+/**
+ * @deprecated
+ */
+$blue-hover: #3257d9;
+
+/**
+ * @deprecated
+ */
+$dark-blue-pro: #1a38a0;
+
+/**
+ * @deprecated Please use '$pix-secondary-certif-50' instead!
+ */
+$dark-green-certif: #17817e;
+
+/**
+ * @deprecated
+ */
+$dark-orga: #006c87;
+
+/**
+ * @deprecated
+ */
 $green: #038125;
-$orga: #00DDFF;
-$purple: #8845FF;
 
-@mixin colorize($color, $percentageDarkenForColor, $percentageLightenForBackground){
+/**
+ * @deprecated Please use '$pix-secondary-orga' instead!
+ */
+$orga: #00ddff;
+
+/**
+ * @deprecated
+ */
+$purple: #8845ff;
+
+@mixin colorize($color, $percentageDarkenForColor, $percentageLightenForBackground) {
   color: darken($color, $percentageDarkenForColor);
   background-color: lighten($color, $percentageLightenForBackground);
 }
 
 // gradients
-$pix-gradient: linear-gradient(135deg, $blue 0%, $purple 100%);
-$pix-blue-gradient: linear-gradient(135deg, #12A3FF 0%, #3D68FF 100%);
-$pix-certif-gradient: linear-gradient(0deg, #52D987 0%, #1A8C89 100%);
-$pix-certif-old-gradient: linear-gradient(135deg, #FF3F93 0%, #AC008D 100%);
-$pix-orange-gradient: linear-gradient(180deg, #F24645 0%, #F1A141 100%);
-$pix-orga-gradient: linear-gradient(134deg, #00DDFF 0%, #0095C0 100%);
-$pix-orga-old-gradient: linear-gradient(0deg, #0D7DC4 0%, #213371 100%);
-$pix-pink-gradient: linear-gradient(0deg, #FF3F93 0%, #AC008D 100%);
-$pix-purple-gradient: linear-gradient(180deg, #5E2563 0%, #564DA6 100%);
-$pix-yellow-gradient: linear-gradient(135deg, #FFBE00 0%, #FF9F00 100%);
-$pix-yellow-gradient-right: linear-gradient(to right, #FFBE00, #FF9F00);
+/**
+ * @deprecated Please use '$pix-primary-app-gradient' instead!
+ */
+$pix-blue-gradient: linear-gradient(135deg, #12a3ff 0%, #3d68ff 100%);
+
+/**
+ * @deprecated Please use '$pix-primary-certif-gradient' instead!
+ */
+$pix-certif-gradient: linear-gradient(0deg, #52d987 0%, #1a8c89 100%);
+
+/**
+ * @deprecated Please use '$pix-security-gradient' instead!
+ */
+$pix-certif-old-gradient: linear-gradient(135deg, #ff3f93 0%, #ac008d 100%);
+
+/**
+ * @deprecated Please use '$pix-information-gradient' instead!
+ */
+$pix-orange-gradient: linear-gradient(180deg, #f24645 0%, #f1a141 100%);
+
+/**
+ * @deprecated Please use '$pix-primary-orga-gradient' instead!
+ */
+$pix-orga-gradient: linear-gradient(134deg, #00ddff 0%, #0095c0 100%);
+
+/**
+ * @deprecated Please use '$pix-primary-orga-gradient' instead!
+ */
+$pix-orga-old-gradient: linear-gradient(0deg, #0d7dc4 0%, #213371 100%);
+
+/**
+ * @deprecated Please use '$pix-security-gradient' instead!
+ */
+$pix-pink-gradient: linear-gradient(0deg, #ff3f93 0%, #ac008d 100%);
+
+/**
+ * @deprecated Please use '$pix-environment-gradient' instead!
+ */
+$pix-purple-gradient: linear-gradient(180deg, #5e2563 0%, #564da6 100%);
+
+/**
+ * Still in use for PixProgressGauge, may be removed in the future.
+ */
+$pix-yellow-gradient: linear-gradient(135deg, #ffbe00 0%, #ff9f00 100%);
+
+/**
+ * Still in use for PixProgressGauge, may be removed in the future.
+ */
+$pix-yellow-gradient-right: linear-gradient(to right, #ffbe00, #ff9f00);
+
 // light
-$grey-5: #FAFBFC;
-$grey-10: #F4F5F7;
-$grey-15: #EAECF0;
-$grey-20: #DFE1E6;
-$grey-22: #C1C7D0;
-$grey-25: #A5ADBA;
+
+/**
+ * @deprecated Please use '$pix-neutral-5' instead!
+ */
+$grey-5: #fafbfc;
+
+/**
+ * @deprecated Please use '$pix-neutral-10' instead!
+ */
+$grey-10: #f4f5f7;
+
+/**
+ * @deprecated Please use '$pix-neutral-15' instead!
+ */
+$grey-15: #eaecf0;
+
+/**
+ * @deprecated Please use '$pix-neutral-20' instead!
+ */
+$grey-20: #dfe1e6;
+
+/**
+ * @deprecated Please use '$pix-neutral-22' instead!
+ */
+$grey-22: #c1c7d0;
+
+/**
+ * @deprecated Please use '$pix-neutral-25' instead!
+ */
+$grey-25: #a5adba;
 // medium
-$grey-30: #97A0AF;
-$grey-35: #8993A4;
-$grey-40: #7A869A;
-$grey-45: #6B778C;
-$grey-50: #5E6C84;
-$grey-60: #505F79;
+
+/**
+ * @deprecated Please use '$pix-neutral-30' instead!
+ */
+$grey-30: #97a0af;
+
+/**
+ * @deprecated Please use '$pix-neutral-35' instead!
+ */
+$grey-35: #8993a4;
+
+/**
+ * @deprecated Please use '$pix-neutral-40' instead!
+ */
+$grey-40: #7a869a;
+
+/**
+ * @deprecated Please use '$pix-neutral-45' instead!
+ */
+$grey-45: #6b778c;
+
+/**
+ * @deprecated Please use '$pix-neutral-5O' instead!
+ */
+$grey-50: #5e6c84;
+
+/**
+ * @deprecated Please use '$pix-neutral-60' instead!
+ */
+$grey-60: #505f79;
+
 // dark
+/**
+ * @deprecated Please use '$pix-neutral-70' instead!
+ */
 $grey-70: #344563;
+
+/**
+ * @deprecated Please use '$pix-neutral-80' instead!
+ */
 $grey-80: #253858;
-$grey-90: #172B4D;
-$grey-100: #091E42;
-$grey-150: #0C163A;
-$grey-200: #07142E;
+
+/**
+ * @deprecated Please use '$pix-neutral-90' instead!
+ */
+$grey-90: #172b4d;
+
+/**
+ * @deprecated Please use '$pix-neutral-100' instead!
+ */
+$grey-100: #091e42;
+
+/**
+ * @deprecated Please use '$pix-neutral-150' instead!
+ */
+$grey-150: #0c163a;
+
+/**
+ * @deprecated Please use '$pix-neutral-200' instead!
+ */
+$grey-200: #07142e;
+
 // gradients domain
-$information-gradient: linear-gradient(180deg, #F24645 0%, #F1A141 100%);
-$content-gradient: linear-gradient(0deg, #52D987 0%, #1A8C89 100%);
-$communication-gradient: linear-gradient(0deg, #12A3FF 0%, #3D68FF 100%);
-$security-gradient: linear-gradient(0deg, #FF3F93 0%, #AC008D 100%);
-$environment-gradient: linear-gradient(180deg, #5E2563 0%, #564DA6 100%);
+/**
+ * @deprecated Please use '$pix-information-gradient' instead!
+ */
+$information-gradient: linear-gradient(180deg, #f24645 0%, #f1a141 100%);
+
+/**
+ * @deprecated Please use '$pix-content-gradient' instead!
+ */
+$content-gradient: linear-gradient(0deg, #52d987 0%, #1a8c89 100%);
+
+/**
+ * @deprecated Please use '$pix-communication-gradient' instead!
+ */
+$communication-gradient: linear-gradient(0deg, #12a3ff 0%, #3d68ff 100%);
+
+/**
+ * @deprecated Please use '$pix-security-gradient' instead!
+ */
+$security-gradient: linear-gradient(0deg, #ff3f93 0%, #ac008d 100%);
+
+/**
+ * @deprecated Please use '$pix-environment-gradient' instead!
+ */
+$environment-gradient: linear-gradient(180deg, #5e2563 0%, #564da6 100%);
+
 // solids
-$environment-dark: #5E2563;
-$environment-light: #564DA6;
-$communication-dark: #3D68FF;
-$communication-light: #12A3FF;
-$content-dark: #1A8C89;
-$content-light: #52D987;
-$information-dark: #F24645;
-$information-light: #F1A141;
-$security-dark: #AC008D;
-$security-light: #FF3F94;
-$pink-alert-light: #FFE1E1;
-$pink-alert-dark: #A71E1A;
-$blue-alert-light: #DCF1FF;
-$blue-alert-dark: #0D25B3;
-$green-alert-light: #EFFFD8;
+
+/**
+ * @deprecated Please use '$pix-environment-dark' instead!
+ */
+$environment-dark: #5e2563;
+
+/**
+ * @deprecated Please use '$pix-environment-light' instead!
+ */
+$environment-light: #564da6;
+
+/**
+ * @deprecated Please use '$pix-communication-dark' instead!
+ */
+$communication-dark: #3d68ff;
+
+/**
+ * @deprecated Please use '$pix-communication-light' instead!
+ */
+$communication-light: #12a3ff;
+
+/**
+ * @deprecated Please use '$pix-content-dark' instead!
+ */
+$content-dark: #1a8c89;
+
+/**
+ * @deprecated Please use '$pix-content-light' instead!
+ */
+$content-light: #52d987;
+
+/**
+ * @deprecated Please use '$pix-information-dark' instead!
+ */
+$information-dark: #f24645;
+
+/**
+ * @deprecated Please use '$pix-information-light' instead!
+ */
+$information-light: #f1a141;
+
+/**
+ * @deprecated Please use '$pix-security-dark' instead!
+ */
+$security-dark: #ac008d;
+
+/**
+ * @deprecated Please use '$pix-security-light' instead!
+ */
+$security-light: #ff3f94;
+
+/**
+ * @deprecated Please use '$pix-error-10' instead!
+ */
+$pink-alert-light: #ffe1e1;
+
+/**
+ * @deprecated Please use '$pix-error-70' instead!
+ */
+$pink-alert-dark: #a71e1a;
+
+/**
+ * @deprecated Please use '$pix-primary-10' instead!
+ */
+$blue-alert-light: #dcf1ff;
+
+/**
+ * @deprecated Please use '$pix-primary-70' instead!
+ */
+$blue-alert-dark: #0d25b3;
+
+/**
+ * @deprecated Please use '$pix-success-10' instead!
+ */
+$green-alert-light: #efffd8;
+
+/**
+ * @deprecated Please use '$pix-success-70' instead!
+ */
 $green-alert-dark: #006134;
-$yellow-alert-light: #FFF1C5;
-$yellow-alert-dark: #A95800;
 
+/**
+ * @deprecated Please use '$pix-warning-10' instead!
+ */
+$yellow-alert-light: #fff1c5;
+
+/**
+ * @deprecated Please use '$pix-secondary-60' instead!
+ */
+$yellow-alert-dark: #a95800;
 
 // status
-$error: #FF4B00;
-$success: #57C884;
-$warning: #FFBE00;
+
+/**
+ * @deprecated
+ *-To style text or border : $pix-error-70
+ *-To style background : $pix-error-10
+ */
+$error: #ff4b00;
+
+/**
+ * @deprecated
+ *-To style text or border : $pix-success-70
+ *-To style background : $pix-success-10
+ */
+$success: #57c884;
+
+/**
+ * @deprecated
+ *-To style text or border : $pix-warning-60
+ *-To style background : $pix-warning-10
+ */
+$warning: #ffbe00;

package/addon/styles/_form.scss

@@ -1,21 +1,21 @@
-@mixin hoverFormElement(){
+@mixin hoverFormElement() {
   &:hover {
-    box-shadow: inset 0px 0px 0px 0.6px $grey-40;
+    box-shadow: inset 0px 0px 0px 0.6px $pix-neutral-40;
   }
 }
 
-@mixin focusFormElement(){
+@mixin focusFormElement() {
   &:focus {
-    border-color: $blue;
-    box-shadow: inset 0px 0px 0px 0.6px $blue;
+    border-color: $pix-primary;
+    box-shadow: inset 0px 0px 0px 0.6px $pix-primary;
     outline: none;
   }
 }
 
-@mixin focusWithinFormElement(){
+@mixin focusWithinFormElement() {
   &:focus {
-    border-color: $blue;
-    box-shadow: inset 0px 0px 0px 0.6px $blue;
+    border-color: $pix-primary;
+    box-shadow: inset 0px 0px 0px 0.6px $pix-primary;
     outline: none;
   }
 }
@@ -24,26 +24,26 @@
   display: block;
   font-family: $font-roboto;
   font-size: 0.875rem;
-  color: $grey-70;
+  color: $pix-neutral-70;
   margin-bottom: 4px;
 }
 
 @mixin errorMessage() {
   font-family: $font-roboto;
   font-size: 0.75rem;
-  color: $red;
+  color: $pix-error-70;
 }
 
 @mixin formElementInError() {
-  border-color: $red;
-  box-shadow: inset 0px 0px 0px 0.6px $red;
+  border-color: $pix-error-70;
+  box-shadow: inset 0px 0px 0px 0.6px $pix-error-70;
 }
 
 @mixin input() {
   font-family: $font-roboto;
   font-size: 0.875rem;
   font-weight: 400;
-  color: $grey-90;
+  color: $pix-neutral-90;
   border-radius: $spacing-xxs;
   padding: 0 $spacing-s 0 $spacing-s;
 }
@@ -57,7 +57,6 @@
   padding: $spacing-xs 0 $spacing-xs 0;
 }
 
-
 .pix-form__actions {
   display: flex;
   justify-content: center;
@@ -69,7 +68,7 @@
 
 abbr.mandatory-mark {
   cursor: help;
-  color: $pink-alert-dark;
+  color: $pix-error-70;
   text-decoration: none;
   border: none;
-}
+}

package/addon/styles/_pix-background-header.scss

@@ -9,12 +9,13 @@
 
   &__background {
     position: absolute;
-    top: 0; left: 0;
+    top: 0;
+    left: 0;
     z-index: -1;
     width: 100%;
     min-height: 270px;
-    background: $pix-gradient;
+    background: $pix-primary-app-gradient;
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
-    color: $white;
+    color: $pix-neutral-0;
   }
 }