@1024pix/pix-ui 28.1.0 → 29.0.0

package/.circleci/config.yml

@@ -27,4 +27,4 @@ jobs:
       - run: npm run lint:hbs
       - run: npm run lint:scss
       - run: npm test
-      - run: npm run test:ember-compatibility
+      - run: npx ember try:one embroider-safe

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Pix-UI Changelog
 
+## v29.0.0 (24/03/2023)
+
+
+### :rocket: Amélioration
+- [#367](https://github.com/1024pix/pix-ui/pull/367) [FEATURE] Mise à jour du Design Token "typographie" (PIX-7515)
+- [#368](https://github.com/1024pix/pix-ui/pull/368) [FEATURE] Suppression de variables SCSS de couleurs dépréciées (PIX-7518)
+
+### :building_construction: Tech
+- [#350](https://github.com/1024pix/pix-ui/pull/350) [TECH] Aligne les noms des variables SCSS d'espacement et documente des Design Token (PIX-7523)
+
+### :bug: Correction
+- [#369](https://github.com/1024pix/pix-ui/pull/369) [BUGFIX] Correction typographies composant Indicator Card
+
+### :coffee: Autre
+- [#358](https://github.com/1024pix/pix-ui/pull/358) [BUMP] Update dependency @embroider/test-setup to ^0.50.0
+- [#352](https://github.com/1024pix/pix-ui/pull/352) build(deps): bump minimist from 0.2.1 to 0.2.4
+- [#363](https://github.com/1024pix/pix-ui/pull/363) build(deps-dev): bump webpack from 5.75.0 to 5.76.0
+
+## v28.1.1 (14/03/2023)
+
+
+### :bug: Correction
+- [#361](https://github.com/1024pix/pix-ui/pull/361) [BUGFIX] Le contenu du `PixCollapsible` ne se rend plus en lazy
+
 ## v28.1.0 (14/03/2023)
 
 

package/addon/components/pix-collapsible.hbs

@@ -31,6 +31,8 @@
     class="pix-collapsible__content"
     aria-hidden={{if this.isCollapsed "true" "false"}}
   >
-    {{yield}}
+    {{#if this.isContentRendered}}
+      {{yield}}
+    {{/if}}
   </div>
 </div>

package/addon/components/pix-collapsible.js

@@ -14,6 +14,10 @@ export default class PixCollapsible extends Component {
     return !this.isCollapsed;
   }
 
+  get isContentRendered() {
+    return this.hasUnCollapsedOnce;
+  }
+
   get title() {
     if (!this.args.title || !this.args.title.trim()) {
       throw new Error('ERROR in PixCollapsible component, @title param is not provided');

package/addon/styles/_pix-banner.scss

@@ -1,6 +1,4 @@
 .pix-banner {
-  font-family: $font-roboto;
-  font-weight: $font-normal;
   padding: 16px 24px;
   display: flex;
   align-items: center;
@@ -25,7 +23,7 @@
 
   &__icon {
     font-size: 1.125rem;
-    margin-right: $spacing-xs;
+    margin-right: $pix-spacing-xs;
   }
 
   &--information {
@@ -96,7 +94,7 @@
     color: $pix-neutral-0;
 
     &-orga {
-      background-color: $dark-orga;
+      background-color: $pix-secondary-orga-80;
       color: $pix-neutral-0;
     }
 

package/addon/styles/_pix-button-base.scss

@@ -1,10 +1,8 @@
 .pix-button {
   color: $pix-neutral-0;
-  font-family: $font-roboto;
   font-size: 0.875rem;
-  font-weight: 500;
+  font-weight: $font-medium;
   white-space: nowrap;
-  letter-spacing: 0.028rem;
   cursor: pointer;
   background-color: $pix-primary;
   border: 1px solid transparent;

package/addon/styles/_pix-button.scss

@@ -2,11 +2,11 @@
   height: 1rem;
 
   &--before {
-    margin-right: $spacing-xs;
+    margin-right: $pix-spacing-xs;
   }
 
   &--after {
-    margin-left: $spacing-xs;
+    margin-left: $pix-spacing-xs;
   }
 }
 

package/addon/styles/_pix-checkbox.scss

@@ -5,18 +5,14 @@
   cursor: pointer;
 
   &__label {
-    @include text;
+    @extend %pix-body-m;
 
     &--small {
-      @include text-small;
-    }
-
-    &--default {
-      @include text;
+      @extend %pix-body-s;
     }
 
     &--large {
-      @include text-large;
+      @extend %pix-body-l;
     }
   }
 

package/addon/styles/_pix-collapsible.scss

@@ -24,7 +24,7 @@
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  padding: $spacing-s;
+  padding: $pix-spacing-s;
   border: none;
   color: $pix-neutral-90;
   font-size: 1rem;
@@ -49,7 +49,7 @@
   }
 
   &__icon {
-    margin-right: $spacing-xs;
+    margin-right: $pix-spacing-xs;
     color: $pix-neutral-50;
   }
 
@@ -57,7 +57,7 @@
     width: 1rem;
     height: 1rem;
     padding: 0.5rem;
-    margin-left: $spacing-xs;
+    margin-left: $pix-spacing-xs;
     border-radius: 50%;
   }
 }
@@ -67,7 +67,7 @@
 }
 
 .pix-collapsible__content {
-  padding: $spacing-s;
+  padding: $pix-spacing-s;
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: $pix-neutral-60;

package/addon/styles/_pix-dropdown.scss

@@ -24,7 +24,7 @@
       min-width: 250px;
       min-height: 34px;
       border: 1px solid $pix-neutral-40;
-      border-radius: $spacing-xxs;
+      border-radius: $pix-spacing-xxs;
       padding: 0;
       background: $pix-neutral-0;
 
@@ -97,7 +97,7 @@
       max-height: 300px;
       border: 1px solid $pix-neutral-40;
       border-top: none;
-      border-radius: 0 0 $spacing-xxs $spacing-xxs;
+      border-radius: 0 0 $pix-spacing-xxs $pix-spacing-xxs;
     }
 
     &--search {

package/addon/styles/_pix-filter-banner.scss

@@ -2,16 +2,15 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  gap: $spacing-xs;
+  gap: $pix-spacing-xs;
   width: 100%;
   background-color: $pix-neutral-0;
   box-shadow: 0 2px 5px 0 rgba($pix-neutral-110, 0.05);
   min-height: 64px;
-  padding: $spacing-s $spacing-m;
+  padding: $pix-spacing-s $pix-spacing-m;
 
   &__title {
     color: $pix-neutral-60;
-    font-family: $font-roboto;
     font-size: 0.875rem;
     margin: 0;
   }
@@ -19,7 +18,7 @@
   &__container-filter {
     display: flex;
     flex-direction: column;
-    gap: $spacing-s;
+    gap: $pix-spacing-s;
   }
 
   &__container-action {
@@ -29,12 +28,10 @@
     border-top: 1px solid $pix-neutral-15;
   }
 
-
   &__details {
     color: $pix-neutral-60;
-    font-family: $font-roboto;
     font-weight: $font-medium;
-    padding: $spacing-xs 0 $spacing-xs 0;
+    padding: $pix-spacing-xs 0 $pix-spacing-xs 0;
     margin: 0;
     font-size: 0.875rem;
   }
@@ -45,14 +42,14 @@
 }
 
 .pix-filter-banner-button__icon {
-  padding-right: $spacing-xxs;
+  padding-right: $pix-spacing-xxs;
 }
 
 @include device-is('tablet') {
   .pix-filter-banner {
     align-items: center;
     flex-direction: row;
-    gap: $spacing-m;
+    gap: $pix-spacing-m;
 
     &__container-title {
       display: flex;
@@ -72,14 +69,14 @@
     }
 
     &__details {
-      padding: 0 $spacing-s 0 0;
+      padding: 0 $pix-spacing-s 0 0;
       text-align: center;
       border: none;
     }
 
     &__button-container {
       border-left: 1px solid $pix-neutral-15;
-      padding-left: $spacing-s;
+      padding-left: $pix-spacing-s;
     }
   }
 }

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

@@ -22,37 +22,35 @@
     flex-direction: column;
     justify-content: center;
     color: $pix-neutral-60;
-    padding: $spacing-s $spacing-m;
+    padding: $pix-spacing-s $pix-spacing-m;
     margin: 0;
   }
 
   &__title {
-    @include text-large();
+    @extend %pix-body-l;
 
     display: flex;
     align-items: center;
     font-weight: $font-medium;
     font-size: 1rem;
     line-height: 1.375rem;
-    margin-bottom: $spacing-xxs;
+    margin-bottom: $pix-spacing-xxs;
   }
 
   &__value {
-    font-family: $font-open-sans;
-    font-weight: $font-medium;
-    font-size: 2rem;
-    line-height: 2.5rem;
+    @extend %pix-title-m;
+
     margin: 0;
-    margin-bottom: $spacing-xxs;
+    margin-bottom: $pix-spacing-xxs;
   }
 
   &__sub {
-    @include text-small();
+    @extend %pix-body-s;
 
     font-weight: $font-normal;
     display: flex;
     gap: 10px;
-    margin: 0
+    margin: 0;
   }
 
   &__tooltip {
@@ -61,6 +59,6 @@
 
   &__tooltip-icon {
     color: $pix-neutral-30;
-    margin: 0 $spacing-xs;
+    margin: 0 $pix-spacing-xs;
   }
 }

package/addon/styles/_pix-input-code.scss

@@ -32,7 +32,6 @@
     padding: 10px 12px 8px;
     background-color: $pix-neutral-10;
     border: 1.4px solid $pix-neutral-50;
-    font-family: $font-roboto;
     font-size: 1.25rem;
     color: $pix-neutral-90;
     border-radius: 4px;

package/addon/styles/_pix-input-password.scss

@@ -8,7 +8,7 @@
     display: flex;
     align-items: center;
     border: 1px solid $pix-neutral-40;
-    border-radius: $spacing-xxs;
+    border-radius: $pix-spacing-xxs;
     padding: 1px 0 1px 1px;
 
     @include hoverFormElement();
@@ -39,7 +39,7 @@
   }
 
   &__button {
-    margin-right: $spacing-xxs;
+    margin-right: $pix-spacing-xxs;
 
     &:hover,
     &:active,
@@ -50,12 +50,12 @@
   }
 
   &__error-container {
-    padding-right: $spacing-m;
+    padding-right: $pix-spacing-m;
     @include formElementInError();
   }
 
   &__success-container {
-    padding-right: $spacing-m;
+    padding-right: $pix-spacing-m;
     @include formElementInSuccess();
   }
 
@@ -67,7 +67,7 @@
     padding: 2px;
     right: 12px;
     width: 10px;
-    height: 10px
+    height: 10px;
   }
 
   &__error-icon {

package/addon/styles/_pix-input.scss

@@ -4,14 +4,12 @@
   position: relative;
 
   &__label {
-    font-family: $font-roboto;
     font-size: 0.875rem;
     color: $pix-neutral-70;
     margin-bottom: 4px;
   }
 
   &__information {
-    font-family: $font-roboto;
     font-size: 0.75rem;
     margin-top: 4px;
     color: $pix-neutral-60;
@@ -61,12 +59,12 @@
   }
 
   &__input--error {
-    padding-right: $spacing-l;
+    padding-right: $pix-spacing-l;
     @include formElementInError();
   }
 
   &__input--success {
-    padding-right: $spacing-l;
+    padding-right: $pix-spacing-l;
     @include formElementInSuccess();
   }
 }

package/addon/styles/_pix-modal.scss

@@ -7,7 +7,7 @@
   right: 0;
   overflow-y: auto;
   text-align: center; // Used to center horizontally the inline-block modal content
-  padding: $spacing-xs 0;
+  padding: $pix-spacing-xs 0;
   background-color: rgba(52, 69, 99, 0.7);
   transition: all 0.3s ease-in-out;
 
@@ -39,7 +39,7 @@ $button-margin: 16px;
   vertical-align: middle; // Centered vertically with the .pix-modal__overlay::after which is 100% height
   width: 512px;
   max-width: calc(
-      100% - #{2 * $spacing-xs}
+      100% - #{2 * $pix-spacing-xs}
     ); // Horizontal margin sets here to have extra space for the .pix-modal__overlay::after on mobile
 
   text-align: initial;
@@ -68,12 +68,10 @@ $button-margin: 16px;
   }
 
   &__title {
+    @extend %pix-title-s;
+
     margin-bottom: 0;
-    font-family: $font-open-sans;
     color: $pix-neutral-90;
-    font-size: 1.25rem;
-    line-height: 1.875rem;
-    font-weight: $font-normal;
     padding-right: $mobile-close-button-size + $space-between-title-and-close-button;
 
     @include device-is('tablet') {
@@ -82,12 +80,10 @@ $button-margin: 16px;
   }
 
   &__content {
+    @extend %pix-body-m;
+
     padding: $modal-padding;
-    font-size: 0.875rem;
     color: $pix-neutral-90;
-    line-height: 1.375rem;
-    font-family: $font-roboto;
-    font-weight: $font-normal;
 
     p:last-child {
       margin-bottom: 0;

package/addon/styles/_pix-multi-select.scss

@@ -11,8 +11,6 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  font-family: $font-roboto;
-  font-weight: $font-normal;
   position: relative;
   border: 1px $pix-neutral-40 solid;
   height: 36px;
@@ -56,10 +54,9 @@
   }
 
   &__dropdown-icon {
-    @include text-small();
+    @extend %pix-body-s;
 
     color: $pix-neutral-60;
-    font-weight: $font-heavy;
     right: 10px;
     top: calc(50% - 6px);
     position: absolute;
@@ -81,10 +78,10 @@
   padding: 0;
   box-shadow: 0 6px 12px rgba(7, 20, 46, 0.08);
   transition: all 0.1s ease-in-out;
-  margin-top: $spacing-xxs;
+  margin-top: $pix-spacing-xxs;
 
   &__item-label {
-    padding: $spacing-xs $spacing-m;
+    padding: $pix-spacing-xs $pix-spacing-m;
   }
 
   &--hidden {
@@ -115,7 +112,6 @@
     position: relative;
     list-style: none;
 
-
     &:hover,
     &:focus {
       outline: none;

package/addon/styles/_pix-progress-gauge.scss

@@ -6,7 +6,6 @@
 
   &__sub-title {
     font-size: 0.813rem;
-    font-weight: $font-light;
     color: $pix-warning-40;
     margin: 6px 0;
     letter-spacing: 0.4px;
@@ -36,10 +35,8 @@
     bottom: calc(100% + 10px);
     border-radius: 5px;
     text-align: center;
-    line-height: normal;
     padding: 4px;
     font-size: 0.8rem;
-    font-family: $font-open-sans;
     font-weight: $font-bold;
 
     &::before {
@@ -83,11 +80,11 @@
     }
 
     & .progress-gauge__marker {
-      background: $pix-yellow-gradient-right;
+      background: $pix-secondary-app-gradient;
     }
 
     & .progress-gauge__tooltip {
-      background: $pix-yellow-gradient;
+      background: $pix-secondary-app-gradient;
       color: $pix-neutral-0;
 
       &::before {

package/addon/styles/_pix-radio-button.scss

@@ -1,6 +1,5 @@
 .pix-radio-button {
   cursor: pointer;
-  font-family: $font-roboto;
   font-size: 0.875rem;
   color: $pix-neutral-70;
 

package/addon/styles/_pix-search-input.scss

@@ -5,7 +5,6 @@
 }
 
 .pix-search-input__label {
-  font-family: $font-roboto;
   font-size: 0.875rem;
   color: $pix-neutral-70;
   margin-bottom: 4px;
@@ -34,10 +33,9 @@
   width: 100%;
   height: 36px;
   border: 1px solid $pix-neutral-40;
-  padding-left: $spacing-xl;
+  padding-left: $pix-spacing-xl;
 
   &::placeholder {
     color: $pix-neutral-30;
   }
 }
-

package/addon/styles/_pix-select.scss

@@ -23,7 +23,7 @@
     box-shadow: 0 6px 12px rgba(7, 20, 46, 0.08);
     transition: all 0.1s ease-in-out;
     white-space: nowrap;
-    margin-top: $spacing-xxs;
+    margin-top: $pix-spacing-xxs;
 
     &::-webkit-scrollbar {
       width: 0.5rem;
@@ -52,7 +52,7 @@
   }
 
   &__empty-search-message {
-    @include text-small();
+    @extend %pix-body-s;
 
     color: $pix-neutral-70;
     text-align: center;
@@ -61,7 +61,7 @@
   &__search {
     display: flex;
     border-bottom: 2px solid $pix-neutral-22;
-    margin: $spacing-s $spacing-m;
+    margin: $pix-spacing-s $pix-spacing-m;
     color: $pix-neutral-30;
     border-radius: 4px 4px 0 0;
 
@@ -86,11 +86,9 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  font-family: $font-roboto;
-  font-weight: $font-normal;
   position: relative;
   border: 1px $pix-neutral-45 solid;
-  padding: 0 $spacing-s 0 $spacing-s;
+  padding: 0 $pix-spacing-s 0 $pix-spacing-s;
   width: 100%;
   background-color: $pix-neutral-0;
   border-radius: 4px;
@@ -100,7 +98,7 @@
   color: $pix-neutral-90;
   justify-content: space-between;
 
-  @include text-small();
+  @extend %pix-body-s;
   @include hoverFormElement();
   @include focusWithinFormElement();
 
@@ -120,11 +118,10 @@
   }
 
   &__dropdown-icon {
-    @include text-small();
+    @extend %pix-body-s;
 
-    margin-left: $spacing-xs;
+    margin-left: $pix-spacing-xs;
     color: $pix-neutral-60;
-    font-weight: $font-heavy;
     pointer-events: none;
   }
 }
@@ -137,20 +134,19 @@
 
 .pix-select-options-category {
   &__name {
-    @include text-small();
+    @extend %pix-body-s;
 
-    padding: $spacing-s $spacing-m $spacing-xs $spacing-m;
+    padding: $pix-spacing-s $pix-spacing-m $pix-spacing-xs $pix-spacing-m;
     text-transform: uppercase;
-    font-family: $font-roboto;
     color: $pix-neutral-45;
   }
 
   &__option {
-    @include text-small();
+    @extend %pix-body-s;
 
     display: flex;
     justify-content: space-between;
-    padding: $spacing-xs $spacing-m;
+    padding: $pix-spacing-xs $pix-spacing-m;
     color: $pix-neutral-70;
 
     &:hover,
@@ -187,12 +183,12 @@
 
 .pix-select-search {
   &__input {
-    @include text-small();
+    @extend %pix-body-s;
 
     width: 100%;
     border: none;
-    padding-left: $spacing-xs;
-    margin: $spacing-xxs;
+    padding-left: $pix-spacing-xs;
+    margin: $pix-spacing-xxs;
 
     &:focus {
       outline: none;
@@ -201,6 +197,6 @@
   }
 
   &__icon {
-    margin: auto $spacing-xxs;
+    margin: auto $pix-spacing-xxs;
   }
 }

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

@@ -26,9 +26,7 @@ $checkmark-width-with-space: $checkmark-width + 0.438rem;
   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;
   cursor: pointer;
 
   input {