@1024pix/pix-ui 14.3.1 → 14.6.0

package/addon/styles/_pix-selectable-tag.scss

@@ -1,8 +1,7 @@
 $checkmark-width: 0.625rem;
 $checkmark-width-with-space: $checkmark-width + 0.438rem;
 @mixin checkmarkColor($borderColor) {
-  
-  input[type="checkbox"]:checked + label::before {
+  input[type='checkbox']:checked + label::before {
     position: absolute;
     top: 6px;
     left: 8px;
@@ -13,7 +12,7 @@ $checkmark-width-with-space: $checkmark-width + 0.438rem;
     border-top: none;
     border-right: none;
     transform: rotate(-45deg);
-    content: "";
+    content: '';
   }
 }
 
@@ -25,9 +24,9 @@ $checkmark-width-with-space: $checkmark-width + 0.438rem;
   padding: 3px calc(8px + #{$checkmark-width-with-space} / 2);
   letter-spacing: 0.009rem;
   border-radius: 0.75rem;
-  border: $grey-30 solid 1px;
-  color: $grey-60;
-  background-color: $white;
+  border: $pix-neutral-30 solid 1px;
+  color: $pix-neutral-60;
+  background-color: $pix-neutral-0;
   font-family: $font-roboto;
   font-size: 0.8125rem;
   font-weight: $font-normal;
@@ -48,23 +47,23 @@ $checkmark-width-with-space: $checkmark-width + 0.438rem;
   }
 
   &:hover {
-    background-color: $grey-22;
-    border: $grey-25 solid 1px;
-    color: $grey-70;
+    background-color: $pix-neutral-22;
+    border: $pix-neutral-25 solid 1px;
+    color: $pix-neutral-70;
   }
-  
+
   &--checked {
-    @include checkmarkColor($grey-70);
-    border: $grey-22 solid 1px;
-    background-color: $grey-20;
-    color: $grey-70;
+    @include checkmarkColor($pix-neutral-70);
+    border: $pix-neutral-22 solid 1px;
+    background-color: $pix-neutral-20;
+    color: $pix-neutral-70;
     padding: 3px 8px;
 
     &:hover {
-      @include checkmarkColor($grey-70);
-      background-color: $grey-22;
-      border: $grey-25 solid 1px;
-      color: $grey-70;
+      @include checkmarkColor($pix-neutral-70);
+      background-color: $pix-neutral-22;
+      border: $pix-neutral-25 solid 1px;
+      color: $pix-neutral-70;
     }
 
     & label {
@@ -73,18 +72,18 @@ $checkmark-width-with-space: $checkmark-width + 0.438rem;
   }
 
   &:focus-within {
-    @include checkmarkColor($white);
-    background-color: $blue-zodiac;
-    color: $white;
-    box-shadow: 0 0 0 1px $blue-zodiac;
-    border-color: $white;
+    @include checkmarkColor($pix-neutral-0);
+    background-color: $pix-neutral-60;
+    color: $pix-neutral-0;
+    box-shadow: 0 0 0 1px $pix-neutral-60;
+    border-color: $pix-neutral-0;
     outline: none;
 
     &:hover {
-      @include checkmarkColor($grey-70);
-      color: $grey-70;
-      background-color: $grey-22;
-      border: $grey-25 solid 1px;
+      @include checkmarkColor($pix-neutral-70);
+      color: $pix-neutral-70;
+      background-color: $pix-neutral-22;
+      border: $pix-neutral-25 solid 1px;
     }
   }
 }

package/addon/styles/_pix-stars.scss

@@ -7,19 +7,19 @@
   }
 
   &--blue > &__acquired {
-    fill: $blue;
+    fill: $pix-primary;
   }
 
   &--blue > &__unacquired {
-    fill: #e9eafc;
+    fill: $pix-neutral-15;
   }
 
   &--grey > &__acquired {
-    fill: $grey-40;
+    fill: $pix-neutral-40;
   }
   &--grey > &__unacquired {
-    fill: white;
-    stroke: $grey-40;
+    fill: $pix-neutral-0;
+    stroke: $pix-neutral-40;
   }
 
   &__acquired {
@@ -27,7 +27,7 @@
   }
 
   &__unacquired {
-    fill: #e9eafc;
+    fill: $pix-neutral-15;
   }
 }
 
@@ -38,6 +38,6 @@
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0,0,0,0);
+  clip: rect(0, 0, 0, 0);
   border: 0;
 }

package/addon/styles/_pix-tag.scss

@@ -14,12 +14,12 @@
   border: 1px solid transparent;
   border-radius: 0.75rem;
 
-  color: $white;
-  background-color: $blue;
+  color: $pix-neutral-0;
+  background-color: $pix-primary;
 
   &--blue-light {
-    color: darken($blue, 10%);
-    background-color: lighten($blue, 30%);
+    color: darken($pix-primary, 10%);
+    background-color: lighten($pix-primary, 30%);
   }
 
   &--green {
@@ -41,13 +41,13 @@
   }
 
   &--yellow {
-    color: $grey-90;
-    background-color: $yellow;
+    color: $pix-neutral-90;
+    background-color: $pix-warning-40;
   }
 
   &--yellow-light {
-    color: darken($yellow, 25%);
-    background-color: lighten($yellow, 35%);
+    color: darken($pix-warning-40, 25%);
+    background-color: lighten($pix-warning-40, 35%);
   }
 
   &--orange {
@@ -60,13 +60,13 @@
   }
 
   &--grey {
-    color: $grey-15;
-    background-color: $grey-60;
+    color: $pix-neutral-15;
+    background-color: $pix-neutral-60;
   }
 
   &--grey-light {
-    color: $grey-60;
-    background-color: $grey-15;
+    color: $pix-neutral-60;
+    background-color: $pix-neutral-15;
   }
 
   &--compact {

package/addon/styles/_pix-textarea.scss

@@ -3,12 +3,12 @@
 
   textarea {
     width: 100%;
-    border: 1px solid $grey-40;
+    border: 1px solid $pix-neutral-40;
     border-style: solid;
     border-radius: 4px;
     padding: 10px 16px;
     font-family: $font-roboto;
-    color: $grey-90;
+    color: $pix-neutral-90;
     font-size: 0.875rem;
     resize: vertical;
 
@@ -21,7 +21,7 @@
   }
 
   p {
-    color: $grey-45;
+    color: $pix-neutral-45;
     margin-top: 6px;
     font-size: 12px;
     display: flex;
@@ -29,7 +29,7 @@
     margin-bottom: 0;
   }
 
-  &__label{
+  &__label {
     @include label();
   }
 

package/addon/styles/_pix-tooltip.scss

@@ -7,7 +7,7 @@
   align-items: center;
 
   & > *:first-child:hover + .pix-tooltip__content,
-  & > *:first-child:focus + .pix-tooltip__content{
+  & > *:first-child:focus + .pix-tooltip__content {
     display: block;
     opacity: 1;
   }
@@ -17,12 +17,12 @@
   display: none;
   opacity: 0;
   pointer-events: none;
-  background-color: $grey-100;
+  background-color: $pix-neutral-100;
   position: absolute;
   z-index: 100;
   padding: 8px 16px;
   left: auto;
-  color: $white;
+  color: $pix-neutral-0;
   font-family: $font-roboto;
   font-size: 0.875rem;
   border-radius: 6px;
@@ -34,7 +34,7 @@
   }
 
   &::before {
-    content: "";
+    content: '';
     position: absolute;
     border-width: 5px;
     border-style: solid;
@@ -46,15 +46,15 @@
 
   &--light {
     font-weight: $font-medium;
-    background-color: $white;
-    color: $grey-60;
-    box-shadow: 0px 6px 24px 0px rgba($grey-70, 0.14);
+    background-color: $pix-neutral-0;
+    color: $pix-neutral-60;
+    box-shadow: 0px 6px 24px 0px rgba($pix-neutral-70, 0.14);
 
     &::before {
       border-width: 0px;
       height: 8px;
       width: 8px;
-      background-color: $white;
+      background-color: $pix-neutral-0;
     }
   }
 }
@@ -65,13 +65,13 @@
   &::before {
     top: calc(50% - 5px); // 50% is the height of the parent and 5px the height of the triangle
     left: -10px; // 10px is width of the ::before elmt
-    border-color: transparent $grey-100 transparent transparent;
+    border-color: transparent $pix-neutral-100 transparent transparent;
   }
 
   &.pix-tooltip__content--light::before {
     left: -5px;
     transform: rotate(315deg);
-    border-color: $grey-40 transparent transparent $grey-40;
+    border-color: $pix-neutral-40 transparent transparent $pix-neutral-40;
   }
 }
 
@@ -83,13 +83,13 @@
   &::before {
     top: 100%;
     left: calc(50% - 5px);
-    border-color: $grey-100 transparent transparent transparent;
+    border-color: $pix-neutral-100 transparent transparent transparent;
   }
 
   &.pix-tooltip__content--light::before {
     top: calc(100% - 5px);
     transform: rotate(225deg);
-    border-color: $grey-40 transparent transparent $grey-40;
+    border-color: $pix-neutral-40 transparent transparent $pix-neutral-40;
   }
 }
 
@@ -100,14 +100,14 @@
   &::before {
     top: 100%;
     left: calc(100% - 27px);
-    border-color: $grey-100 transparent transparent transparent;
+    border-color: $pix-neutral-100 transparent transparent transparent;
   }
 
   &.pix-tooltip__content--light::before {
     top: calc(100% - 5px);
     left: calc(100% - 26px);
     transform: rotate(225deg);
-    border-color: $grey-40 transparent transparent $grey-40;
+    border-color: $pix-neutral-40 transparent transparent $pix-neutral-40;
   }
 }
 
@@ -117,13 +117,13 @@
 
   &::before {
     top: 100%;
-    border-color: $grey-100 transparent transparent transparent;
+    border-color: $pix-neutral-100 transparent transparent transparent;
   }
 
   &.pix-tooltip__content--light::before {
     top: calc(100% - 5px);
     transform: rotate(225deg);
-    border-color: $grey-40 transparent transparent $grey-40;
+    border-color: $pix-neutral-40 transparent transparent $pix-neutral-40;
   }
 }
 
@@ -135,13 +135,13 @@
   &::before {
     top: -10px;
     left: calc(50% - 5px);
-    border-color: transparent transparent $grey-100 transparent;
+    border-color: transparent transparent $pix-neutral-100 transparent;
   }
 
   &.pix-tooltip__content--light::before {
     top: -5px;
     transform: rotate(45deg);
-    border-color: $grey-40 transparent transparent $grey-40;
+    border-color: $pix-neutral-40 transparent transparent $pix-neutral-40;
   }
 }
 
@@ -152,14 +152,14 @@
   &::before {
     top: -10px;
     left: calc(100% - 27px);
-    border-color: transparent transparent $grey-100 transparent;
+    border-color: transparent transparent $pix-neutral-100 transparent;
   }
 
   &.pix-tooltip__content--light::before {
     top: -5px;
     left: calc(100% - 26px);
     transform: rotate(45deg);
-    border-color: $grey-40 transparent transparent $grey-40;
+    border-color: $pix-neutral-40 transparent transparent $pix-neutral-40;
   }
 }
 
@@ -169,13 +169,13 @@
 
   &::before {
     top: -10px;
-    border-color: transparent transparent $grey-100 transparent;
+    border-color: transparent transparent $pix-neutral-100 transparent;
   }
 
   &.pix-tooltip__content--light::before {
     top: -5px;
     transform: rotate(45deg);
-    border-color: $grey-40 transparent transparent $grey-40;
+    border-color: $pix-neutral-40 transparent transparent $pix-neutral-40;
   }
 }
 
@@ -185,12 +185,12 @@
   &::before {
     top: calc(50% - 5px);
     right: -10px;
-    border-color: transparent transparent transparent $grey-100;
+    border-color: transparent transparent transparent $pix-neutral-100;
   }
 
   &.pix-tooltip__content--light::before {
     right: -5px;
     transform: rotate(135deg);
-    border-color: $grey-40 transparent transparent $grey-40;
+    border-color: $pix-neutral-40 transparent transparent $pix-neutral-40;
   }
 }

package/addon/styles/_typography.scss

@@ -104,7 +104,7 @@
 
   a {
     font-weight: $font-medium;
-    color: $blue;
+    color: $pix-primary;
   }
 }
 
@@ -116,7 +116,7 @@
 @mixin text-link() {
   @include text;
   font-weight: $font-medium;
-  color: $blue;
+  color: $pix-primary;
 }
 
 @mixin text-small() {

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

@@ -20,6 +20,33 @@ Si vous utilisez le `PixInput` sans label alors il faut renseigner le paramètre
 
 > Si vous renseignez les paramètres label et ariaLabel ensemble, ariaLabel sera nullifié.
 
+Pour acceder à l'élément via son label/aria-label avec testing-library:
+
+```html
+<PixInput
+  @id='firstName'
+  @label='Prénom'
+/>
+```
+
+```javascript
+screen.getByLabelText('Prénom')
+````
+
+Si le paramètre @information est utilisé, il faudra concatener les valeurs de `@label`/`@ariaLabel` et `@information`
+
+```html
+<PixInput
+  @id='firstName'
+  @label='Prénom'
+  @information='exemple: Barry'
+/>
+```
+
+```javascript
+screen.getByLabelText('Prénom exemple: Barry')
+````
+
 
 ## Default
 

package/docs/colors-palette.stories.mdx

@@ -0,0 +1,239 @@
+<!-- Colors.stories.mdx -->
+
+import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
+
+<Meta title="Utiliser Pix UI/Design Tokens/Palette de couleurs" />
+
+# Palette de couleurs
+
+ > Pour infos :
+ >
+ > Cette page permet de connaitre les couleurs qui sont disponibles dans `Pix-UI`. [Figma](https://www.figma.com/file/8RJ3aCSfdeQ8AZZVBBYKS8/Design-System-Pix?node-id=16%3A2) reste la source de vérité des couleurs du design system de `Pix`.
+ >
+ > Les variables SCSS présentes dans le fichier `_colors.scss` reprennent les noms des symboles utilisés sur les maquettes dans Figma,
+ > on préconise d'utiliser ses noms de variables plutôt que le code hexa.
+
+#### SOLID
+
+<ColorPalette>
+  <ColorItem
+    title="Pix Primary"
+    subtitle="$pix-primary-"
+    colors={{ 5: '#f2f9ff',
+              10: '#dcf1ff',
+              20: '#c4e6ff',
+              30: '#88beff',
+              40: '#5b94ff',
+              Primary: '#3d68ff',
+              60: '#2044dc',
+              70: '#0d25b3',
+              80: '#000e87'}}
+  />
+  <ColorItem
+    title="Pix Secondary"
+    subtitle="$pix-secondary-"
+    colors={{ 5: '#fff9e6',
+             10: '#ffeeb3',
+             20: '#ffe381',
+             Secondary: '#ffd235',
+             40: '#ffbe00',
+             50: '#eaa600',
+             60: '#ce8900',
+             70: '#a95800',
+             80: '#874d00'}}
+  />
+  <ColorItem
+    title="Pix Secondary Certif"
+    subtitle="$pix-secondary-certif-"
+    colors={{ 5: '#ccf6f5',
+             10: '#9aedeb',
+             20: '#67e4e0',
+             30: '#34dbd6',
+             SecondaryCertif: '#20b4af',
+             50: '#17817e',
+             60:' #126765',
+             70: '#0e4d4c',
+             80: '#093432'}}
+  />
+  <ColorItem
+    title="Pix Secondary Orga"
+    subtitle="$pix-secondary-orga-"
+    colors={{ 5: '#d5f9ff',
+             10: '#aaf4ff',
+             20: '#80eeff',
+             30: '#55e8ff',
+             SecondaryOrga: '#00ddff',
+             50: '#00c1df',
+             60: '#00a6bf',
+             70: '#008a9f',
+             80: '#006e80'}}
+  />
+  <ColorItem
+    title="Pix Tertiary"
+    subtitle="$pix-tertiary-"
+    colors={{ 5: '#ebe1ff',
+             10: '#d8c2ff',
+             20: '#c4a4ff',
+             30: '#b186ff',
+             Tertiary: '#9d67ff',
+             50: '#8a49ff',
+             60: '#6712ff',
+             70: '#4e00db',
+             80: '#3b00a4'}}
+  />
+  <ColorItem
+    title="Pix Success"
+    subtitle="$pix-success-"
+    colors={{5: '#ecfdf5',
+            10: '#d1fae5',
+            20: '#a7f3d0',
+            30: '#6ee7b7',
+            40: '#34d399',
+            50: '#27b481',
+            60: '#14865d',
+            70: '#176c4d',
+            80: '#104834'}}
+  />
+  <ColorItem
+    title="Pix Warning"
+    subtitle="$pix-warning-"
+    colors={{5: '#fff9e6',
+            10: '#fff1c5',
+            20: '#ffe381',
+            30: '#ffd235',
+            40: '#ffbe00',
+            50: '#eaa600',
+            60: '#ce8900',
+            70: '#ac6a00',
+            80: '#874d00'}}
+  />
+  <ColorItem
+    title="Pix Error"
+    subtitle="$pix-error-"
+    colors={{5: '#fef2f2',
+            10: '#fee2e2',
+            20: '#fecaca',
+            30: '#fca5a5',
+            40: '#f87171',
+            50: '#ef4444',
+            60: '#dc2626',
+            70: '#b91c1c',
+            80: '#991b1b'}}
+  />
+  <ColorItem
+    title="Pix Neutral ( 0 - 40 )"
+    subtitle="$pix-neutral-"
+    colors={{0: '#ffffff',
+             5: '#fafbfc',
+            10: '#f4f5f7',
+            15: '#eaecf0',
+            20: '#dfe1e6',
+            22: '#c1c7d0',
+            25: '#a5adba',
+            30: '#97a0af',
+            35: '#8993a4',
+            40: '#7a869a'}}
+  />
+  <ColorItem
+    title="Pix Neutral  ( 45 - 110 )"
+    subtitle="$pix-neutral-"
+    colors={{45: '#6b778c',
+             50: '#5e6c84',
+             60: '#505f79',
+             70: '#344563',
+             80: '#253858',
+             90: '#172b4d',
+            100: '#091e42',
+            110: '#07142e'}}
+  />
+  <ColorItem
+    title="Pix Shades"
+    subtitle="$pix-shades-"
+    colors={{100: '#000000'}}
+  />
+  <ColorItem
+    title="Pix Domain Information"
+    subtitle="$pix-information-"
+    colors={{Dark: '#f24645',
+            Light: '#f1a141'}}
+  />
+  <ColorItem
+    title="Pix Domain Content"
+    subtitle="$pix-content-"
+    colors={{Dark: '#1a8c89',
+            Light: '#52d987'}}
+  />
+  <ColorItem
+    title="Pix Domain Communication"
+    subtitle="$pix-communication-"
+    colors={{Dark: '#3d68ff',
+            Light: '#12a3ff'}}
+  />
+  <ColorItem
+    title="Pix Domain Security"
+    subtitle="$pix-security-"
+    colors={{Dark: '#ac008d',
+            Light: '#ff3f94'}}
+  />
+  <ColorItem
+    title="Pix Domain Environment"
+    subtitle="$pix-environment-"
+    colors={{Dark: '#5e2563',
+            Light: '#564da6'}}
+  />
+</ColorPalette>
+
+#### GRADIENT
+
+<ColorPalette>
+  <ColorItem
+    title="Primary Pix App"
+    subtitle="$pix-primary-app-gradient"
+    colors={{ PrimaryPixApp: 'linear-gradient(91.59deg, #3d68ff 0%, #8845ff 100%)'}}
+  />
+  <ColorItem
+    title="Secondary Pix App"
+    subtitle="$pix-secondary-app-gradient"
+    colors={{ SecondaryPixAppGradient: 'linear-gradient(91.59deg, #fedc41 0%, #ff9f00 100%)'}}
+  />
+  <ColorItem
+    title="Primary Certif"
+    subtitle="$pix-primary-certif-gradient"
+    colors={{ PrimaryCertif: 'linear-gradient(91.59deg, #52d987 0%, #1a8c89 100%)'}}
+  />
+  <ColorItem
+    title="Primary Orga"
+    subtitle="$pix-primary-orga-gradient"
+    colors={{ PrimaryOrga: 'linear-gradient(91.59deg, #00ddff 0%, #0095c0 100%)'}}
+   />
+   <ColorItem
+     title="Secondary Orga"
+     subtitle="$pix-primary-secondary-gradient"
+     colors={{SecondaryOrga: 'linear-gradient(91.59deg, #0d7dc4 0%, #213371 100%)'}}
+   />
+   <ColorItem
+     title="Domain Information"
+     subtitle="$pix-information-gradient"
+     colors={{DomainInformation: 'linear-gradient(180deg, #f24645 0%, #f1a141 100%)'}}
+   />
+   <ColorItem
+     title="Domain Content"
+     subtitle="$pix-content-gradient"
+     colors={{DomainContent: 'linear-gradient(180deg, #1a8c89 0%, #52d987 100%)'}}
+   />
+   <ColorItem
+     title="Domain Communication"
+     subtitle="$pix-communication-gradient"
+     colors={{DomainCommunication: 'linear-gradient(180deg, #3d68ff 0%, #12a3ff 100%)'}}
+   />
+   <ColorItem
+     title="Domain Security"
+     subtitle="$pix-security-gradient"
+     colors={{DomainSecurity: 'linear-gradient(180deg, #ac008d 0%, #ff3f94 100%)'}}
+   />
+   <ColorItem
+     title="Domain Environment"
+     subtitle="$pix-environment-gradient"
+     colors={{DomainEnvironment: 'linear-gradient(180deg, #5e2563 0%, #564da6 100%)'}}
+   />
+</ColorPalette>