@1024pix/pix-ui 26.0.4 → 26.1.0

package/.circleci/config.yml

@@ -24,4 +24,5 @@ jobs:
       - run: npm ci
       - run: npm run lint:js
       - run: npm run lint:hbs
+      - run: npm run lint:scss
       - run: npm test

package/.stylelintrc.json

@@ -0,0 +1,27 @@
+{
+  "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,21 @@
 # Pix-UI Changelog
 
+## v26.1.0 (21/02/2023)
+
+
+### :rocket: Amélioration
+- [#338](https://github.com/1024pix/pix-ui/pull/338) [FEATURE] Permettre au PixButton d'avoir des icônes avant et après le label (PIX-3038)
+
+## v26.0.5 (20/02/2023)
+
+
+### :building_construction: Tech
+- [#345](https://github.com/1024pix/pix-ui/pull/345) [TECH] Active la règle de lint SCSS d'ajout d'espace après les `:`
+- [#346](https://github.com/1024pix/pix-ui/pull/346) [TECH] Active la règle de lint SCSS pour ne pas mettre d'unité derrière les `0`
+- [#344](https://github.com/1024pix/pix-ui/pull/344) [TECH] Active la règle de lint SCSS de format de couleurs
+- [#343](https://github.com/1024pix/pix-ui/pull/343) [TECH] Active la règle de lint SCSS d'indentation
+- [#336](https://github.com/1024pix/pix-ui/pull/336) [TECH] Mise en place de Stylelint
+
 ## v26.0.4 (20/02/2023)
 
 

package/addon/components/pix-button.hbs

@@ -24,7 +24,13 @@
       </div>
       <span class="loader__not-visible-text">{{yield}}</span>
     {{else}}
+      {{#if @iconBefore}}
+        <FaIcon class="pix-button__icon pix-button__icon--before" @icon={{@iconBefore}} />
+      {{/if}}
       {{yield}}
+      {{#if @iconAfter}}
+        <FaIcon class="pix-button__icon pix-button__icon--after" @icon={{@iconAfter}} />
+      {{/if}}
     {{/if}}
   </button>
 {{/if}}

package/addon/styles/_a11y.scss

@@ -1,10 +1,10 @@
 .screen-reader-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    border: 0;
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
 }

package/addon/styles/_pix-banner.scss

@@ -5,7 +5,7 @@
   display: flex;
   align-items: center;
   font-size: 0.875rem;
-  box-shadow: 0px 4px 8px rgba(7, 20, 46, 0.08);
+  box-shadow: 0 4px 8px rgba(7, 20, 46, 0.08);
 
   &__action {
     text-decoration: underline;

package/addon/styles/_pix-block.scss

@@ -4,10 +4,10 @@
   border-radius: 5px;
 
   &--shadow-light {
-    box-shadow: 0px 4px 8px rgba($pix-neutral-110, 0.08);
+    box-shadow: 0 4px 8px rgba($pix-neutral-110, 0.08);
   }
 
   &--shadow-heavy {
-    box-shadow: 0px 12px 24px rgba($pix-neutral-110, 0.08);
+    box-shadow: 0 12px 24px rgba($pix-neutral-110, 0.08);
   }
 }

package/addon/styles/_pix-button.scss

@@ -1,43 +1,53 @@
-.pix-button {
-  .loader {
-    position: absolute;
+.pix-button__icon {
+  height: 1rem;
 
-    &__not-visible-text {
-      visibility: hidden;
-    }
+  &--before {
+    margin-right: $spacing-xs;
   }
 
-  .loader > div {
-    width: 10px;
-    height: 10px;
-    background-color: $pix-neutral-0;
-    border-radius: 100%;
-    display: inline-block;
-    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  &--after {
+    margin-left: $spacing-xs;
   }
+}
 
-  .loader--white > div {
-    background-color: $pix-neutral-0;
-  }
-  .loader--grey > div {
-    background-color: $pix-neutral-80;
-  }
-  .loader .bounce1 {
-    animation-delay: -0.32s;
-  }
+.pix-button .loader {
+  position: absolute;
 
-  .loader .bounce2 {
-    animation-delay: -0.16s;
+  &__not-visible-text {
+    visibility: hidden;
   }
+}
+
+.loader > div {
+  width: 10px;
+  height: 10px;
+  background-color: $pix-neutral-0;
+  border-radius: 100%;
+  display: inline-block;
+  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+}
 
-  @keyframes sk-bouncedelay {
-    0%,
-    80%,
-    100% {
-      transform: scale(0);
-    }
-    40% {
-      transform: scale(1);
-    }
+.loader--white > div {
+  background-color: $pix-neutral-0;
+}
+.loader--grey > div {
+  background-color: $pix-neutral-80;
+}
+.loader .bounce1 {
+  animation-delay: -0.32s;
+}
+
+.loader .bounce2 {
+  animation-delay: -0.16s;
+}
+
+@keyframes sk-bouncedelay {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
   }
 }

package/addon/styles/_pix-collapsible.scss

@@ -90,6 +90,6 @@
 
 // Pour le deuxième élément d'affilé qui est refermé, on enlève la bordure-top
 .pix-collapsible:not(.pix-collapsible--uncollapsed)
-  + .pix-collapsible:not(.pix-collapsible--uncollapsed) {
++ .pix-collapsible:not(.pix-collapsible--uncollapsed) {
   border-top: none;
 }

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

@@ -37,7 +37,7 @@
   }
 
   &__pix-multi-select {
-    border-radius: 4px 0px 0px 4px;
+    border-radius: 4px 0 0 4px;
     position: relative;
 
     &:after {
@@ -52,6 +52,6 @@
   }
 
   &__pix-select {
-    border-radius: 0px 4px 4px 0px;
+    border-radius: 0 4px 4px 0;
   }
 }

package/addon/styles/_pix-modal.scss

@@ -19,7 +19,7 @@
     display: inline-block;
     vertical-align: middle;
     height: 100%;
-    width: 0px;
+    width: 0;
   }
 
   &--hidden {
@@ -40,8 +40,8 @@ $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}
-  ); // Horizontal margin sets here to have extra space for the .pix-modal__overlay::after on mobile
+      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

@@ -16,7 +16,7 @@
   position: relative;
   border: 1px $pix-neutral-40 solid;
   height: 36px;
-  padding: 0px 32px 0px 16px;
+  padding: 0 32px 0 16px;
   width: 100%;
   background-color: $pix-neutral-0;
   border-radius: 4px;
@@ -78,7 +78,7 @@
   max-height: 200px;
   list-style-type: none;
   padding: 0;
-  box-shadow: 0px 6px 12px rgba(7, 20, 46, 0.08);
+  box-shadow: 0 6px 12px rgba(7, 20, 46, 0.08);
   transition: all 0.1s ease-in-out;
   margin-top: $spacing-xxs;
 

package/addon/styles/_pix-select.scss

@@ -20,7 +20,7 @@
     list-style-type: none;
     padding: 0;
     background-color: $pix-neutral-0;
-    box-shadow: 0px 6px 12px rgba(7, 20, 46, 0.08);
+    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;
@@ -86,7 +86,7 @@
   font-weight: $font-normal;
   position: relative;
   border: 1px $pix-neutral-45 solid;
-  padding: 0px $spacing-s 0px $spacing-s;
+  padding: 0 $spacing-s 0 $spacing-s;
   width: 100%;
   background-color: $pix-neutral-0;
   border-radius: 4px;

package/addon/styles/_pix-tooltip.scss

@@ -50,10 +50,10 @@
     font-weight: $font-medium;
     background-color: $pix-neutral-0;
     color: $pix-neutral-60;
-    box-shadow: 0px 6px 24px 0px rgba($pix-neutral-70, 0.14);
+    box-shadow: 0 6px 24px 0 rgba($pix-neutral-70, 0.14);
 
     &::before {
-      border-width: 0px;
+      border-width: 0;
       height: 8px;
       width: 8px;
       background-color: $pix-neutral-0;