@1024pix/pix-ui 14.8.0 → 15.0.1

package/.circleci/config.yml

@@ -1,5 +1,8 @@
 version: 2.1
 
+orbs:
+  browser-tools: circleci/browser-tools@1.3.0
+
 workflows:
   version: 2
   build-and-test:
@@ -13,8 +16,11 @@ workflows:
 jobs:
   build-and-test:
     docker:
-      - image: circleci/node:12.14.0-browsers
+      - image: cimg/node:16.14.0-browsers
     steps:
+      - run: sudo npm i -g npm@8.13.2
+      - browser-tools/install-chrome
+      - browser-tools/install-chromedriver
       - checkout
       - run: npm ci
       - run: npm run lint:js

package/.nvmrc

@@ -1 +1 @@
-16.13.0
+16.14.0

package/.storybook/preview.js

@@ -1,5 +1,3 @@
-import './fonts.css';
-
 export const parameters = {
   a11y: {
     element: '#root',

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Pix-UI Changelog
 
+## v15.0.1 (08/07/2022)
+
+
+### :bug: Correction
+- [#234](https://github.com/1024pix/pix-ui/pull/234) [BUGFIX] Laisser les filtres à côté du label dans le FilterBanner (PIX-5301)
+- [#231](https://github.com/1024pix/pix-ui/pull/231) [BUGFIX] PixButton de type submit affiche un loader si @isLoading=true
+
+## v15.0.0 (05/07/2022)
+
+
+### :building_construction: Tech
+- [#229](https://github.com/1024pix/pix-ui/pull/229) [TECH] Retirer la taille par defaut du composant PixMultiSelect
+- [#224](https://github.com/1024pix/pix-ui/pull/224) [TECH] Fixer la version NodeJS à 16.14.0
+
+## v14.8.1 (30/06/2022)
+
+
+### :building_construction: Tech
+- [#228](https://github.com/1024pix/pix-ui/pull/228) [TECH] Import et utilisation des polices Google Fonts dans le projet
+
 ## v14.7.1 (28/06/2022)
 
 

package/addon/components/pix-button.hbs

@@ -8,36 +8,23 @@
     {{yield}}
   </LinkTo>
 {{else}}
-  {{#if this.enableTriggerAction}}
-    <button
-      type={{this.type}}
-      class={{this.className}}
-      {{on "click" this.triggerAction}}
-      ...attributes
-      disabled={{this.isButtonLoadingOrDisabled}}
-      aria-disabled="{{this.ariaDisabled}}"
-    >
-      {{#if this.isLoading}}
-        <div class="loader loader--{{this.loadingColor}}">
-          <div class="bounce1"></div>
-          <div class="bounce2"></div>
-          <div class="bounce3"></div>
-        </div>
-        <span class="loader__not-visible-text">{{yield}}</span>
-      {{else}}
-        {{yield}}
-      {{/if}}
-    </button>
-  {{else}}
-    <button
-      type={{this.type}}
-      class={{this.className}}
-      ...attributes
-      disabled={{this.isButtonLoadingOrDisabled}}
-      aria-disabled="{{this.ariaDisabled}}"
-    >
+  <button
+    type={{this.type}}
+    class={{this.className}}
+    {{on "click" this.triggerAction}}
+    ...attributes
+    disabled={{this.isButtonLoadingOrDisabled}}
+    aria-disabled="{{this.ariaDisabled}}"
+  >
+    {{#if this.isLoading}}
+      <div class="loader loader--{{this.loadingColor}}">
+        <div class="bounce1"></div>
+        <div class="bounce2"></div>
+        <div class="bounce3"></div>
+      </div>
+      <span class="loader__not-visible-text">{{yield}}</span>
+    {{else}}
       {{yield}}
-    </button>
-  {{/if}}
-
+    {{/if}}
+  </button>
 {{/if}}

package/addon/components/pix-button.js

@@ -33,22 +33,17 @@ export default class PixButton extends PixButtonBase {
     return super.baseClassNames.join(' ');
   }
 
-  get enableTriggerAction() {
-    return !(this.type === 'submit' && !this.args.triggerAction);
-  }
-
   @action
   async triggerAction(params) {
+    if (this.type === 'submit' && !this.args.triggerAction) return;
+    if (!this.args.triggerAction) {
+      throw new Error('@triggerAction params is required for PixButton !');
+    }
     try {
       this.isTriggering = true;
       await this.args.triggerAction(params);
+    } finally {
       this.isTriggering = false;
-    } catch (e) {
-      this.isTriggering = false;
-      if (!this.args.triggerAction) {
-        throw new Error('@triggerAction params is required for PixButton !');
-      }
-      throw new Error(e);
     }
   }
 }

package/addon/styles/_fonts.scss

@@ -1,3 +1,45 @@
+@font-face {
+  font-family: "Open Sans";
+  src: url("../@1024pix/pix-ui/fonts/OpenSans/OpenSans-Regular.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Open Sans";
+  src: url("../@1024pix/pix-ui/fonts/OpenSans/OpenSans-SemiBold.ttf");
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Open Sans";
+  src: url("../@1024pix/pix-ui/fonts/OpenSans/OpenSans-Light.ttf");
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("../@1024pix/pix-ui/fonts/Roboto/Roboto-Regular.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("../@1024pix/pix-ui/fonts/Roboto/Roboto-Medium.ttf");
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("../@1024pix/pix-ui/fonts/Roboto/Roboto-Light.ttf");
+  font-weight: 300;
+  font-style: normal;
+}
+
 $font-open-sans: 'Open Sans', Arial, sans-serif;
 $font-roboto: 'Roboto', Arial, sans-serif;
 

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

@@ -23,6 +23,14 @@
     gap: $spacing-s;
   }
 
+  &__container-action {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-top: 1px solid $pix-neutral-15;
+  }
+
+
   &__details {
     color: $pix-neutral-60;
     font-family: $font-roboto;
@@ -30,7 +38,6 @@
     padding: $spacing-xs 0 $spacing-xs 0;
     margin: 0;
     font-size: 0.875rem;
-    border-top: 1px solid $pix-neutral-15;
   }
 
   &__button {
@@ -44,7 +51,6 @@
 
 @include device-is('tablet') {
   .pix-filter-banner {
-    justify-content: space-between;
     align-items: center;
     flex-direction: row;
     gap: $spacing-m;
@@ -57,12 +63,13 @@
     &__container-filter {
       flex-direction: row;
       flex-wrap: wrap;
+      align-items: center;
+      flex-grow: 2;
     }
 
     &__container-action {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
+      flex-direction: row;
+      border: none;
     }
 
     &__details {

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

@@ -1,8 +1,6 @@
 .pix-multi-select {
   display: inline-block;
   position: relative;
-  min-width: 250px;
-  width: 100%;
 
   &__label {
     @include label();
@@ -62,7 +60,6 @@
     color: $pix-neutral-30;
     right: 10px;
     top: calc(50% - 6px);
-    padding: 0 0 2px;
     position: absolute;
     pointer-events: none;
 

package/addon/styles/_pix-select.scss

@@ -55,8 +55,7 @@
     font-size: 11px;
     color: $pix-neutral-30;
     right: 10px;
-    top: calc(50% - 4px);
-    padding: 0 0 2px;
+    top: calc(50% - 6px);
     position: absolute;
     pointer-events: none;
   }

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

@@ -42,13 +42,6 @@ Default.args = {
   size: 'big',
   backgroundColor: 'blue',
   label: 'Bouton',
-  triggerAction: () => {
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        resolve();
-      }, 2000);
-    });
-  },
 };
 
 export const borders = Template.bind({});
@@ -124,10 +117,16 @@ loader.args = {
   label: 'Bouton avec loader au clic',
   backgroundColor: 'yellow',
   loadingColor: 'grey',
+  triggerAction: () => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve();
+      }, 2000);
+    });
+  },
   extraButtons: [
     {
       ...Default.args,
-      triggerAction: () => {},
       isLoading: true,
     },
   ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "14.8.0",
+  "version": "15.0.1",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -8,7 +8,8 @@
   "license": "MIT",
   "author": "GIP Pix",
   "engines": {
-    "node": "^16.13.0"
+    "node": "16.14.0",
+    "npm": "8.13.2"
   },
   "ember": {
     "edition": "octane"
@@ -33,6 +34,7 @@
     "lint:hbs:fix": "npm run lint:hbs -- --fix",
     "lint:js": "eslint .",
     "lint:js:fix": "npm run lint:js -- --fix",
+    "preinstall": "npx check-engine",
     "start": "ember serve",
     "storybook": "ember build && ember serve & start-storybook -p 9001 -s dist",
     "test": "ember test",

package/.storybook/fonts.css

@@ -1 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&family=Roboto:wght@300;400;500;700;900&display=swap');