@1024pix/pix-ui 15.0.0 → 16.0.0

package/.github/workflows/deploy-storybook.yml

@@ -1,7 +1,7 @@
 name: Deploy Pix UI Storybook
 
-on: 
-  workflow_dispatch: 
+on:
+  workflow_dispatch:
   push:
     tags:
       - '*'
@@ -10,12 +10,13 @@ jobs:
   deploy:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 16.14.0
+      - run: npm i -g npm@8.13.2
       - run: npm ci
       - name: Deploy storybook to Github Pages
         run: npm run deploy-storybook -- --ci
         env:
-          GH_TOKEN: 1024pix:${{ secrets.GITHUB_TOKEN }}
+          GH_TOKEN: 1024pix:${{ secrets.GITHUB_TOKEN }}

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Pix-UI Changelog
 
+## v16.0.0 (13/07/2022)
+
+
+### :building_construction: Tech
+- [#238](https://github.com/1024pix/pix-ui/pull/238) [TECH] Monter de version fontawesome (PIX-5325)
+
+## v15.0.2 (11/07/2022)
+
+
+### :building_construction: Tech
+- [#237](https://github.com/1024pix/pix-ui/pull/237) [TECH] Changer les pré-requis engine du package.json (PIX-5319)
+
+### :bug: Correction
+- [#236](https://github.com/1024pix/pix-ui/pull/236) [BUGFIX] Correction du déploiement de Storybook
+
+## 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)
 
 

package/addon/components/pix-banner.hbs

@@ -6,7 +6,7 @@
       {{#if this.isExternalLink}}
         <a class="pix-banner__action" href={{@actionUrl}} target="_blank" rel="noopener noreferrer">
           {{@actionLabel}}
-          <FaIcon class="external-link" @icon="external-link-alt" />
+          <FaIcon class="external-link" @icon="up-right-from-square" />
         </a>
       {{else}}
         <LinkTo class="pix-banner__action" @route={{@actionUrl}}>{{@actionLabel}}</LinkTo>

package/addon/components/pix-banner.js

@@ -16,9 +16,9 @@ const types = [
 ];
 
 const icons = {
-  [TYPE_INFO]: 'info-circle',
-  [TYPE_ERROR]: 'exclamation-triangle',
-  [TYPE_WARNING]: 'exclamation-circle',
+  [TYPE_INFO]: 'circle-info',
+  [TYPE_ERROR]: 'triangle-exclamation',
+  [TYPE_WARNING]: 'circle-exclamation',
   [TYPE_COMMUNICATION]: 'bullhorn',
   [TYPE_COMMUNICATION_ORGA]: 'bullhorn',
   [TYPE_COMMUNICATION_CERTIF]: 'bullhorn',

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/components/pix-dropdown.hbs

@@ -33,7 +33,7 @@
         aria-label={{@clearLabel}}
         {{on "click" this.clearSelection}}
       >
-        <FaIcon @icon="times" />
+        <FaIcon @icon="xmark" />
       </button>
     {{/if}}
 
@@ -62,7 +62,7 @@
 
     {{#if @isSearchable}}
       <div class="pix-dropdown__menu--search">
-        <FaIcon class="pix-dropdown__menu--search-icon" @icon="search" />
+        <FaIcon class="pix-dropdown__menu--search-icon" @icon="magnifying-glass" />
         <label
           class="pix-dropdown__menu--search-input-label"
           for={{this.searchInputId}}

package/addon/components/pix-filter-banner.hbs

@@ -23,7 +23,7 @@
             @size="small"
             @triggerAction={{@onClearFilters}}
           >
-            <FaIcon class="pix-filter-banner-button__icon" @icon="trash-alt" @prefix="far" />
+            <FaIcon class="pix-filter-banner-button__icon" @icon="trash-can" @prefix="far" />
             {{@clearFiltersLabel}}
           </PixButton>
         </div>

package/addon/components/pix-input-password.hbs

@@ -42,7 +42,7 @@
     />
 
     {{#if @errorMessage}}
-      <FaIcon @icon="times" class="pix-input-password__error-icon" />
+      <FaIcon @icon="xmark" class="pix-input-password__error-icon" />
     {{/if}}
   </div>
 

package/addon/components/pix-input.hbs

@@ -26,7 +26,7 @@
     />
 
     {{#if @errorMessage}}
-      <FaIcon @icon="times" class="pix-input__error-icon" />
+      <FaIcon @icon="xmark" class="pix-input__error-icon" />
     {{/if}}
   </div>
 

package/addon/components/pix-message.js

@@ -19,11 +19,11 @@ export default class PixMessage extends Component {
 
   get iconClass() {
     const classes = {
-      [TYPE_INFO]: 'info-circle',
-      [TYPE_SUCCESS]: 'check-circle',
-      [TYPE_WARNING]: 'exclamation-circle',
-      [TYPE_ALERT]: 'exclamation-triangle',
-      [TYPE_ERROR]: 'exclamation-triangle',
+      [TYPE_INFO]: 'circle-info',
+      [TYPE_SUCCESS]: 'circle-check',
+      [TYPE_WARNING]: 'circle-exclamation',
+      [TYPE_ALERT]: 'triangle-exclamation',
+      [TYPE_ERROR]: 'triangle-exclamation',
     };
     return classes[this.type];
   }

package/addon/components/pix-modal.hbs

@@ -10,7 +10,7 @@
     <header class="pix-modal__header">
       <h1 id="modal-title" class="pix-modal__title">{{@title}}</h1>
       <PixIconButton
-        @icon="times"
+        @icon="xmark"
         @triggerAction={{@onCloseButtonClick}}
         @ariaLabel="Fermer"
         @size="small"

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

@@ -8,7 +8,7 @@
     <label class="pix-multi-select-header {{if this.isBig 'pix-multi-select-header--big'}}">
 
       <span class="pix-multi-select-header__title">{{@title}}</span>
-      <FaIcon @icon="search" class="pix-multi-select-header__search-icon" />
+      <FaIcon @icon="magnifying-glass" class="pix-multi-select-header__search-icon" />
 
       <input
         id={{@id}}

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/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/app/stories/pix-icon-button.stories.js

@@ -20,7 +20,7 @@ const Template = (args) => {
 export const Default = Template.bind({});
 Default.args = {
   ariaLabel: 'Action du bouton',
-  icon: 'times',
+  icon: 'xmark',
   triggerAction: () => {
     return new Promise().resolves();
   },
@@ -43,13 +43,12 @@ export const argTypes = {
     name: 'ariaLabel',
     description: "l'action du bouton, pour l'accessibilité",
     type: { name: 'string', required: true },
-    table: { defaultValue: { summary: 'times' } },
   },
   icon: {
     name: 'icon',
     description: 'Icône font-awesome',
     type: { name: 'string', required: true },
-    table: { defaultValue: { summary: 'times' } },
+    table: { defaultValue: { summary: 'plus' } },
   },
   iconPrefix: {
     name: 'iconPrefix',

package/app/stories/pix-icon-button.stories.mdx

@@ -81,7 +81,7 @@ Bouton d'action
 ```html
 <PixIconButton
     @ariaLabel="L'action du bouton"
-    @icon="times"
+    @icon="xmark"
     disabled={{true}}
     aria-disabled={{true}}
 />

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

@@ -38,7 +38,7 @@ const TemplateWithHTMLElement = (args) => {
         </:triggerElement>
 
         <:tooltip>
-          <FaIcon @icon="external-link-alt" /> <strong>HTML/Ember</strong>
+          <FaIcon @icon="up-right-from-square" /> <strong>HTML/Ember</strong>
         </:tooltip>
       </PixTooltip>
     `,

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

@@ -37,7 +37,7 @@ Si vous utilisez un élément `<div>` ou `<span>`, il faut ajouter `tabindex="0"
 </PixTooltip>
 ```
 
-Les tooltips doivent prendre un `@id` et être référencées par leur élément déclencheur 
+Les tooltips doivent prendre un `@id` et être référencées par leur élément déclencheur
 
 - soit via `aria-describedby` si l'élément possèdent déjà un label, car le tooltip agit alors comme une description supplémentaire.
 
@@ -131,7 +131,7 @@ Infobulle contenant des éléments HTML
     <button>Tooltip par défaut</button>
   </:triggerElement>
   <:tooltip>
-    <FaIcon @icon="external-link-alt" /> Avec des <strong>éléments</strong> HTML/Ember
+    <FaIcon @icon="up-right-from-square" /> Avec des <strong>éléments</strong> HTML/Ember
   </:tooltip>
 </PixTooltip>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "15.0.0",
+  "version": "16.0.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -9,7 +9,7 @@
   "author": "GIP Pix",
   "engines": {
     "node": "16.14.0",
-    "npm": "8.13.2"
+    "npm": ">=8.3.1 <=8.13.2"
   },
   "ember": {
     "edition": "octane"
@@ -58,8 +58,8 @@
     "@ember/test-helpers": "^2.6.0",
     "@formatjs/intl": "^2.1.0",
     "@fortawesome/ember-fontawesome": "^0.2.3",
-    "@fortawesome/free-regular-svg-icons": "^5.15.4",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/free-regular-svg-icons": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
     "@storybook/addon-a11y": "^6.3.7",