@1024pix/pix-ui 27.0.0 → 27.0.2

package/.stylelintrc.json

@@ -2,25 +2,17 @@
   "extends": ["@1024pix/stylelint-config"],
   "rules": {
     "alpha-value-notation": null,
-    "block-opening-brace-space-before": null,
     "color-function-notation": null,
-    "comment-empty-line-before": null,
     "declaration-block-no-redundant-longhand-properties": null,
-    "declaration-block-single-line-max-declarations": null,
-    "declaration-empty-line-before": null,
     "font-family-name-quotes": null,
     "font-family-no-duplicate-names": null,
     "function-url-quotes": null,
     "no-descending-specificity": null,
     "no-empty-source": null,
     "property-no-vendor-prefix": null,
-    "rule-empty-line-before": null,
     "scss/at-mixin-argumentless-call-parentheses": null,
     "scss/at-mixin-pattern": null,
-    "scss/dollar-variable-empty-line-before": null,
-    "scss/double-slash-comment-empty-line-before": null,
     "scss/no-global-function-names": null,
-    "scss/operator-no-newline-before": null,
     "selector-id-pattern": null,
     "selector-pseudo-element-colon-notation": null
   }

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Pix-UI Changelog
 
+## v27.0.2 (06/03/2023)
+
+
+### :bug: Correction
+- [#353](https://github.com/1024pix/pix-ui/pull/353) [BUGFIX] Améliorer l'accessibilité de PixStar (PIX-7349)
+- [#348](https://github.com/1024pix/pix-ui/pull/348) [BUGFIX] Rendre la ligne entière d'une option du multiselect cliquable (PIX-6957)
+
+## v27.0.1 (22/02/2023)
+
+
+### :building_construction: Tech
+- [#347](https://github.com/1024pix/pix-ui/pull/347) [TECH] Active des règles de lint SCSS d'espacement
+
 ## v27.0.0 (22/02/2023)
 
 

package/addon/components/pix-checkbox.hbs

@@ -1,4 +1,4 @@
-<div class="pix-checkbox">
+<label class="pix-checkbox {{if @screenReaderOnly 'sr-only'}} {{@class}}" for={{@id}}>
   <input
     id={{@id}}
     type="checkbox"
@@ -6,15 +6,11 @@
     checked={{@checked}}
     ...attributes
   />
-  <label
-    class="pix-checkbox__label {{this.labelSizeClass}} {{if @screenReaderOnly 'sr-only'}}"
-    for={{@id}}
-  >
-    {{#if (has-block)}}
-      {{yield}}
-    {{else}}
-      yield required to give a label for PixCheckBox
-      {{@id}}.
-    {{/if}}
-  </label>
-</div>
+
+  {{#if (has-block)}}
+    <span class="pix-checkbox__label {{this.labelSizeClass}}">{{yield}}</span>
+  {{else}}
+    yield required to give a label for PixCheckBox
+    {{@id}}.
+  {{/if}}
+</label>

package/addon/components/pix-multi-select.hbs

@@ -66,6 +66,7 @@
             @id={{concat this.multiSelectId "-" option.value}}
             @checked={{option.checked}}
             @labelSize="small"
+            @class="pix-multi-select-list__item-label"
             value={{option.value}}
             {{on "change" this.onSelect}}
             {{on-enter-action this.hideDropDown this.multiSelectId}}

package/addon/components/pix-stars.hbs

@@ -1,10 +1,10 @@
-<div class={{this.pixStarsClass}} ...attributes aria-label={{@alt}}>
+<div class={{this.pixStarsClass}} ...attributes>
+  <span class="screen-reader-only">{{@alt}}</span>
   {{#each this.stars as |star|}}
     <svg
       class="pix-stars__{{star}}"
       data-test-status={{star}}
       viewBox="0 0 36 36"
-      role="img"
       aria-hidden="true"
     >
       <defs>

package/addon/styles/_pix-banner.scss

@@ -10,16 +10,19 @@
   &__action {
     text-decoration: underline;
     color: inherit;
+
     .external-link {
       margin-left: 4px;
       font-size: 0.875rem;
     }
   }
+
   &__close {
     display: flex;
     margin-left: auto;
     padding-left: 8px;
   }
+
   &__icon {
     font-size: 1.125rem;
     margin-right: $spacing-xs;
@@ -28,9 +31,11 @@
   &--information {
     background-color: $pix-primary-5;
     color: $pix-primary-70;
+
     .pix-icon-button {
       background-color: $pix-primary-5;
       color: $pix-primary-70;
+
       &:hover:enabled,
       &:focus:enabled,
       &:active:enabled {
@@ -47,9 +52,11 @@
   &--warning {
     background-color: $pix-warning-5;
     color: $pix-warning-70;
+
     .pix-icon-button {
       background-color: $pix-warning-5;
       color: $pix-warning-70;
+
       &:hover:enabled,
       &:focus:enabled,
       &:active:enabled {
@@ -66,9 +73,11 @@
   &--error {
     background-color: $pix-error-5;
     color: $pix-error-70;
+
     .pix-icon-button {
       background-color: $pix-error-5;
       color: $pix-error-70;
+
       &:hover:enabled,
       &:focus:enabled,
       &:active:enabled {

package/addon/styles/_pix-button.scss

@@ -30,9 +30,11 @@
 .loader--white > div {
   background-color: $pix-neutral-0;
 }
+
 .loader--grey > div {
   background-color: $pix-neutral-80;
 }
+
 .loader .bounce1 {
   animation-delay: -0.32s;
 }
@@ -47,6 +49,7 @@
   100% {
     transform: scale(0);
   }
+
   40% {
     transform: scale(1);
   }

package/addon/styles/_pix-checkbox.scss

@@ -1,26 +1,29 @@
 .pix-checkbox {
   align-items: center;
   display: flex;
-
-  label, input {
-    cursor: pointer;
-  }
+  color: $pix-neutral-70;
+  cursor: pointer;
 
   &__label {
-    color: $pix-neutral-70;
     @include text;
 
     &--small {
       @include text-small;
     }
+
     &--default {
       @include text;
     }
+
     &--large {
       @include text-large;
     }
   }
 
+  input {
+    cursor: pointer;
+  }
+
   &__input {
     appearance: none;
     margin: 0 10px;
@@ -30,12 +33,13 @@
     border-radius: 2px;
     position: relative;
 
-    &:hover, &:focus {
-      box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 6px $pix-neutral-15;
+    &:hover,
+    &:focus {
+      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 6px $pix-neutral-15;
     }
 
     &:active {
-      box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 6px $pix-neutral-22;
+      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 6px $pix-neutral-22;
     }
 
     &:checked {
@@ -52,7 +56,6 @@
         position: absolute;
         top: 0;
         left: 0;
-
       }
     }
 

package/addon/styles/_pix-dropdown.scss

@@ -19,6 +19,7 @@
     &--placeholder {
       @include hoverFormElement();
       @include focusFormElement();
+
       width: 100%;
       min-width: 250px;
       min-height: 34px;

package/addon/styles/_pix-filterable-and-searchable-select.scss

@@ -19,6 +19,7 @@
   &__pix-multi-select,
   &__pix-select {
     border: none;
+
     &:hover {
       border: none;
       box-shadow: none;
@@ -28,6 +29,7 @@
   &__error-message {
     @include errorMessage();
   }
+
   .pix-multi-select {
     margin-right: 2px;
 

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

@@ -4,7 +4,6 @@
   background-color: $pix-neutral-0;
   border-radius: 8px;
   min-height: 112px;
-
   box-shadow: 0 4px 8px rgba($pix-neutral-110, 0.05);
   padding: 0;
 
@@ -29,6 +28,7 @@
 
   &__title {
     @include text-large();
+
     display: flex;
     align-items: center;
     font-weight: $font-medium;
@@ -48,6 +48,7 @@
 
   &__sub {
     @include text-small();
+
     font-weight: $font-normal;
     display: flex;
     gap: 10px;

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

@@ -20,6 +20,7 @@
 
     input {
       @include input();
+
       height: 34px;
       border: none;
       outline: none;

package/addon/styles/_pix-input.scss

@@ -15,7 +15,6 @@
     font-size: 0.75rem;
     margin-top: 4px;
     color: $pix-neutral-60;
-
     display: block;
   }
 

package/addon/styles/_pix-message.scss

@@ -10,18 +10,22 @@
     color: $pix-primary-70;
     background-color: $pix-primary-5;
   }
+
   &.pix-message--alert {
     color: $pix-error-70;
     background-color: $pix-error-5;
   }
+
   &.pix-message--error {
     color: $pix-error-70;
     background-color: $pix-error-5;
   }
+
   &.pix-message--success {
     color: $pix-success-70;
     background-color: $pix-success-5;
   }
+
   &.pix-message--warning {
     color: $pix-warning-70;
     background-color: $pix-warning-5;

package/addon/styles/_pix-modal.scss

@@ -35,13 +35,13 @@ $space-between-title-and-close-button: 8px;
 $button-margin: 16px;
 
 .pix-modal {
-  
   display: inline-block;
   vertical-align: middle; // Centered vertically with the .pix-modal__overlay::after which is 100% height
   width: 512px;
   max-width: calc(
       100% - #{2 * $spacing-xs}
     ); // Horizontal margin sets here to have extra space for the .pix-modal__overlay::after on mobile
+
   text-align: initial;
   background-color: $pix-neutral-10;
   box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);

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

@@ -57,6 +57,7 @@
 
   &__dropdown-icon {
     @include text-small();
+
     color: $pix-neutral-60;
     font-weight: $font-heavy;
     right: 10px;
@@ -82,6 +83,10 @@
   transition: all 0.1s ease-in-out;
   margin-top: $spacing-xxs;
 
+  &__item-label {
+    padding: $spacing-xs $spacing-m;
+  }
+
   &--hidden {
     visibility: hidden;
     opacity: 0;
@@ -90,15 +95,18 @@
   &::-webkit-scrollbar {
     width: 11px;
   }
+
   &::-webkit-scrollbar-track {
     border-radius: 4px;
     border: 1px solid $pix-neutral-20;
     background: $pix-neutral-0;
   }
+
   &::-webkit-scrollbar-thumb {
     border-radius: 4px;
     background: $pix-neutral-30;
   }
+
   &::-webkit-scrollbar-thumb:hover {
     background: $pix-neutral-35;
   }
@@ -106,7 +114,6 @@
   li.pix-multi-select-list__item {
     position: relative;
     list-style: none;
-    padding: $spacing-xs $spacing-m;
 
 
     &:hover,

package/addon/styles/_pix-pagination.scss

@@ -46,6 +46,7 @@
   .pix-pagination {
     justify-content: space-between;
   }
+
   .pix-pagination > .pix-pagination {
     &__size {
       display: flex;

package/addon/styles/_pix-return-to.scss

@@ -71,9 +71,11 @@
   &--white {
     @include coloriseLink($pix-neutral-10, $pix-neutral-0, $pix-neutral-0);
   }
+
   &--black {
     @include coloriseLink($pix-neutral-80, $pix-neutral-110, $pix-neutral-60);
   }
+
   &--blue {
     @include coloriseLink($pix-communication-dark, $pix-primary-60, $pix-communication-dark);
   }

package/addon/styles/_pix-select.scss

@@ -28,16 +28,19 @@
     &::-webkit-scrollbar {
       width: 0.5rem;
     }
+
     &::-webkit-scrollbar-track {
       border-radius: 4px;
       border: 1px solid $pix-neutral-20;
       background: $pix-neutral-20;
     }
+
     &::-webkit-scrollbar-thumb {
       border-radius: 4px;
       width: 0.375rem;
       background: $pix-neutral-30;
     }
+
     &::-webkit-scrollbar-thumb:hover {
       background: $pix-neutral-35;
     }
@@ -50,6 +53,7 @@
 
   &__empty-search-message {
     @include text-small();
+
     color: $pix-neutral-70;
     text-align: center;
   }
@@ -117,6 +121,7 @@
 
   &__dropdown-icon {
     @include text-small();
+
     margin-left: $spacing-xs;
     color: $pix-neutral-60;
     font-weight: $font-heavy;
@@ -133,6 +138,7 @@
 .pix-select-options-category {
   &__name {
     @include text-small();
+
     padding: $spacing-s $spacing-m $spacing-xs $spacing-m;
     text-transform: uppercase;
     font-family: $font-roboto;
@@ -141,6 +147,7 @@
 
   &__option {
     @include text-small();
+
     display: flex;
     justify-content: space-between;
     padding: $spacing-xs $spacing-m;
@@ -181,10 +188,12 @@
 .pix-select-search {
   &__input {
     @include text-small();
+
     width: 100%;
     border: none;
     padding-left: $spacing-xs;
     margin: $spacing-xxs;
+
     &:focus {
       outline: none;
       background: $pix-neutral-10;

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

@@ -53,6 +53,7 @@ $checkmark-width-with-space: $checkmark-width + 0.438rem;
 
   &--checked {
     @include checkmarkColor($pix-neutral-70);
+
     border: $pix-neutral-22 solid 1px;
     background-color: $pix-neutral-20;
     color: $pix-neutral-70;
@@ -60,6 +61,7 @@ $checkmark-width-with-space: $checkmark-width + 0.438rem;
 
     &:hover {
       @include checkmarkColor($pix-neutral-70);
+
       background-color: $pix-neutral-22;
       border: $pix-neutral-25 solid 1px;
       color: $pix-neutral-70;
@@ -72,6 +74,7 @@ $checkmark-width-with-space: $checkmark-width + 0.438rem;
 
   &:focus-within {
     @include checkmarkColor($pix-neutral-0);
+
     background-color: $pix-neutral-60;
     color: $pix-neutral-0;
     box-shadow: 0 0 0 1px $pix-neutral-60;
@@ -80,6 +83,7 @@ $checkmark-width-with-space: $checkmark-width + 0.438rem;
 
     &:hover {
       @include checkmarkColor($pix-neutral-70);
+
       color: $pix-neutral-70;
       background-color: $pix-neutral-22;
       border: $pix-neutral-25 solid 1px;

package/addon/styles/_pix-sidebar.scss

@@ -22,7 +22,6 @@ $space-between-title-and-close-button: 8px;
 $button-margin: 16px;
 
 .pix-sidebar {
-  
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -60,6 +59,7 @@ $button-margin: 16px;
 
   &__title {
     @include h4;
+
     margin-bottom: 0;
     color: $pix-neutral-90;
     padding-right: $mobile-close-button-size + $space-between-title-and-close-button;

package/addon/styles/_pix-stars.scss

@@ -17,6 +17,7 @@
   &--grey > &__acquired {
     fill: $pix-neutral-40;
   }
+
   &--grey > &__unacquired {
     fill: $pix-neutral-0;
     stroke: $pix-neutral-40;

package/addon/styles/_pix-tag.scss

@@ -4,14 +4,11 @@
   vertical-align: baseline;
   white-space: nowrap;
   padding: 4px 16px;
-
   font-family: $font-roboto;
   font-size: 0.8125rem;
   font-weight: $font-normal;
-
   border: 1px solid transparent;
   border-radius: 0.75rem;
-
   color: $pix-neutral-0;
   background-color: $pix-primary;
 

package/addon/styles/normalize-reset/_reset.scss

@@ -1,20 +1,73 @@
 /****** Elad Shechter's RESET *******/
+
 /*** box sizing border-box for all elements ***/
 html {
   font-size: 16px;
-}  
+}
+
 body {
   font-family: $font-roboto;
 }
+
 *,
 *::before,
-*::after{box-sizing: border-box;}
-a{text-decoration: none; color: inherit; cursor: pointer;}
-button{background-color: transparent; color: inherit; border-width: 0; padding: 0; cursor: pointer;}
-figure{margin: 0;}
-input::-moz-focus-inner {border: 0; padding: 0; margin: 0;}
-ul, ol, dd{margin: 0; padding: 0; list-style: none;}
-h1, h2, h3, h4, h5, h6{margin: 0; font-size: inherit; font-weight: inherit;}
-p{margin: 0;}
-cite {font-style: normal;}
-fieldset{border-width: 0; padding: 0; margin: 0;}
+*::after {
+  box-sizing: border-box;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+  cursor: pointer;
+}
+
+button {
+  background-color: transparent;
+  color: inherit;
+  border-width: 0;
+  padding: 0;
+  cursor: pointer;
+}
+
+figure {
+  margin: 0;
+}
+
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+
+ul,
+ol,
+dd {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+p {
+  margin: 0;
+}
+
+cite {
+  font-style: normal;
+}
+
+fieldset {
+  border-width: 0;
+  padding: 0;
+  margin: 0;
+}

package/addon/styles/pix-design-tokens/_breakpoints.scss

@@ -11,7 +11,6 @@ $breakpoints: (
       @content;
     }
   } @else {
-    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
-      + "Available breakpoints are: #{map-keys($breakpoints)}.";
+    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. Available breakpoints are: #{map-keys($breakpoints)}.";
   }
 }

package/addon/styles/pix-design-tokens/_colors.scss

@@ -116,16 +116,12 @@ $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;
 
@@ -145,6 +141,7 @@ $pix-environment-gradient: linear-gradient(180deg, #5E2563 0%, #564DA6 100%);
 
 //// DEPRECATED
 // primary
+
 /**
  * @deprecated Please use '$pix-primary' instead!
  */
@@ -223,6 +220,7 @@ $purple: #8845FF;
 }
 
 // gradients
+
 /**
  * @deprecated Please use '$pix-primary-app-gradient' instead!
  */
@@ -304,6 +302,7 @@ $grey-22: #C1C7D0;
  * @deprecated Please use '$pix-neutral-25' instead!
  */
 $grey-25: #A5ADBA;
+
 // medium
 
 /**
@@ -337,6 +336,7 @@ $grey-50: #5E6C84;
 $grey-60: #505F79;
 
 // dark
+
 /**
  * @deprecated Please use '$pix-neutral-70' instead!
  */
@@ -368,6 +368,7 @@ $grey-150: #0C163A;
 $grey-200: #07142E;
 
 // gradients domain
+
 /**
  * @deprecated Please use '$pix-information-gradient' instead!
  */

package/addon/styles/pix-design-tokens/_fonts.scss

@@ -42,7 +42,6 @@
 
 $font-open-sans: 'Open Sans', Arial, sans-serif;
 $font-roboto: 'Roboto', Arial, sans-serif;
-
 $font-light: 300;
 $font-normal: 400;
 $font-medium: 500;

package/addon/styles/pix-design-tokens/_form.scss

@@ -79,6 +79,7 @@
 
 .pix-form__label {
   @include label();
+
   padding-bottom: 12px;
 }
 

package/addon/styles/pix-design-tokens/_typography.scss

@@ -110,23 +110,27 @@
 
 @mixin text-bold() {
   @include text;
+
   font-weight: $font-medium;
 }
 
 @mixin text-link() {
   @include text;
+
   font-weight: $font-medium;
   color: $pix-primary;
 }
 
 @mixin text-small() {
   @include text;
+
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
 
 @mixin text-large() {
   @include text;
+
   font-size: 1.125rem;
   line-height: 1.625rem;
 }
@@ -145,11 +149,13 @@
 
 @mixin caption-bold() {
   @include caption;
+
   font-weight: $font-bold;
 }
 
 @mixin caption-uppercase() {
   @include caption;
+
   text-transform: uppercase;
 }
 
@@ -168,11 +174,13 @@
 
 @mixin footer-bold() {
   @include footer;
+
   font-weight: $font-bold;
 }
 
 @mixin footer-uppercase() {
   @include footer;
+
   font-weight: $font-bold;
   letter-spacing: 0.08em;
   text-transform: uppercase;

package/app/stories/pix-checkbox.stories.js

@@ -52,6 +52,11 @@ export const argTypes = {
     name: 'label',
     description: "Le label de l'input",
   },
+  class: {
+    name: 'class',
+    description: "Permet d'ajouter une classe css à la checkbox.",
+    type: { name: 'string' },
+  },
   screenReaderOnly: {
     name: 'screenReaderOnly',
     description:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "27.0.0",
+  "version": "27.0.2",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"