@1024pix/pix-ui 28.0.2 → 28.1.1

package/.circleci/config.yml

@@ -17,6 +17,7 @@ jobs:
   build-and-test:
     docker:
       - image: cimg/node:16.19.0-browsers
+    resource_class: medium+
     steps:
       - checkout
       - browser-tools/install-chrome
@@ -26,3 +27,4 @@ jobs:
       - run: npm run lint:hbs
       - run: npm run lint:scss
       - run: npm test
+      - run: npm run test:ember-compatibility

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Pix-UI Changelog
 
+## 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)
+
+
+### :rocket: Amélioration
+- [#360](https://github.com/1024pix/pix-ui/pull/360) [FEATURE] Vérifie la compatibilité avec embroider sur la ci
+
+### :coffee: Autre
+- [#357](https://github.com/1024pix/pix-ui/pull/357) [CHORE] Utiliser la propriété iconBefore dans le bouton du filterBanner (PIX-7415)
+
 ## v28.0.2 (09/03/2023)
 
 

package/addon/components/pix-button.hbs

@@ -25,11 +25,19 @@
       <span class="loader__not-visible-text">{{yield}}</span>
     {{else}}
       {{#if @iconBefore}}
-        <FaIcon class="pix-button__icon pix-button__icon--before" @icon={{@iconBefore}} />
+        <FaIcon
+          class="pix-button__icon pix-button__icon--before"
+          @icon={{@iconBefore}}
+          @prefix={{@prefixIconBefore}}
+        />
       {{/if}}
       {{yield}}
       {{#if @iconAfter}}
-        <FaIcon class="pix-button__icon pix-button__icon--after" @icon={{@iconAfter}} />
+        <FaIcon
+          class="pix-button__icon pix-button__icon--after"
+          @icon={{@iconAfter}}
+          @prefix={{@prefixIconAfter}}
+        />
       {{/if}}
     {{/if}}
   </button>

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

@@ -22,8 +22,9 @@
             @shape="squircle"
             @size="small"
             @triggerAction={{@onClearFilters}}
+            @iconBefore="trash-can"
+            @prefixIconBefore="far"
           >
-            <FaIcon class="pix-filter-banner-button__icon" @icon="trash-can" @prefix="far" />
             {{@clearFiltersLabel}}
           </PixButton>
         </div>

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

@@ -13,6 +13,8 @@ const Template = (args) => ({
     @isBorderVisible={{this.isBorderVisible}}
     @iconBefore={{this.iconBefore}}
     @iconAfter={{this.iconAfter}}
+    @prefixIconBefore={{this.prefixIconBefore}}
+    @prefixIconAfter={{this.prefixIconAfter}}
   >
     {{this.label}}
   </PixButton>
@@ -30,6 +32,8 @@ const Template = (args) => ({
       @isBorderVisible={{button.isBorderVisible}}
       @iconBefore={{button.iconBefore}}
       @iconAfter={{button.iconAfter}}
+      @prefixIconBefore={{this.prefixIconBefore}}
+      @prefixIconAfter={{this.prefixIconAfter}}
     >
       {{button.label}}
     </PixButton>
@@ -212,7 +216,7 @@ export const argsTypes = {
     description: `Nom de l'icône font-awesome à afficher **avant** le label`,
     type: { name: 'string', required: false },
     control: { type: 'select' },
-    options: ['heart', 'magnifying-glass', 'plus', 'xmark'],
+    options: ['trash-can', 'heart', 'magnifying-glass', 'plus', 'xmark'],
     table: {
       type: { summary: 'string' },
       defaultValue: { summary: null },
@@ -223,7 +227,29 @@ export const argsTypes = {
     description: `Nom de l'icône font-awesome à afficher **après** le label`,
     type: { name: 'string', required: false },
     control: { type: 'select' },
-    options: ['heart', 'magnifying-glass', 'plus', 'xmark'],
+    options: ['trash-can', 'heart', 'magnifying-glass', 'plus', 'xmark'],
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: null },
+    },
+  },
+  prefixIconBefore: {
+    name: 'prefixIconBefore',
+    description: `Permet d'ajouter un préfix à l'icone devant le label pour appliquer un style particulier`,
+    type: { name: 'string', required: false },
+    control: { type: 'select' },
+    options: ['fas', 'far'],
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: null },
+    },
+  },
+  prefixIconAfter: {
+    name: 'prefixIconAfter',
+    description: `Permet d'ajouter un préfix à l'icone derrière le label pour appliquer un style particulier`,
+    type: { name: 'string', required: false },
+    control: { type: 'select' },
+    options: ['fas', 'far'],
     table: {
       type: { summary: 'string' },
       defaultValue: { summary: null },

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

@@ -16,7 +16,6 @@ PixPagination est un élément permettant de trigger le changement de page dans
 > queryParams = { pageNumber: { refreshModel: true }, pageSize: { refreshModel: true } };
 > ```
 >
-> ** Installer la dépendance `@formatjs/intl` sur votre projet.**
 
 Le paramètre `pageOptions` n'est pas requis et possède une valeur par défaut.
 

package/app/stories/pix-search-input.stories.mdx

@@ -12,18 +12,6 @@ A la différence d'un [PixSelect](?path=/docs/form-select--default#withsearch) s
 
 Ce composant permet d'appeler la fonction triggerFiltering passée en paramètre selon un debounce (temps d'attente avant le prochain appel) fournis.
 
-⚠️ ⚠️ ⚠️ Pour utiliser ce composant des changements sont nécessaires dans l'application où est installé Pix UI :
-
-1- Rajoutez ceci dans le `ember-cli-build.js` de votre application (mon-pix/pix-orga/pix-certif/pix-admin) :
-
-```js
-app.import('node_modules/lodash.debounce/index.js', {
-  using: [{ transformation: 'cjs', as: 'lodash.debounce' }],
-});
-```
-
-2- Installez la dépendance "ember-cli-cjs-transform" : `npm install ember-cli-cjs-transform`
-
 <Canvas>
   <Story name="Default" story={stories.Default} height={80} />
 </Canvas>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "28.0.2",
+  "version": "28.1.1",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -47,14 +47,14 @@
     "test:ember-compatibility": "ember try:each"
   },
   "dependencies": {
+    "@formatjs/intl": "^2.5.1",
     "color": "^4.2.3",
+    "ember-auto-import": "^2.5.0",
     "ember-cli-babel": "^7.26.8",
-    "ember-cli-cjs-transform": "^2.0.0",
     "ember-cli-htmlbars": "^6.1.1",
     "ember-cli-sass": "^11.0.1",
     "ember-cli-string-utils": "^1.1.0",
     "ember-click-outside": "^4.0.0",
-    "ember-prop-modifier": "^1.0.1",
     "ember-truth-helpers": "^3.1.1",
     "lodash.debounce": "^4.0.8"
   },
@@ -64,10 +64,10 @@
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-decorators": "^7.20.5",
     "@ember/optional-features": "^2.0.0",
-    "@ember/render-modifiers": "^2.0.4",
+    "@ember/render-modifiers": "^2.0.5",
+    "@ember/string": "^3.0.1",
     "@ember/test-helpers": "^2.8.1",
     "@embroider/test-setup": "^0.48.1",
-    "@formatjs/intl": "^2.5.1",
     "@fortawesome/ember-fontawesome": "^0.4.1",
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
@@ -84,13 +84,12 @@
     "@storybook/manager-webpack5": "^6.5.13",
     "@storybook/storybook-deployer": "^2.8.16",
     "@storybook/theming": "^6.5.13",
+    "@testing-library/dom": "^8.20.0",
     "@testing-library/user-event": "^14.4.3",
     "axios": "^1.2.0",
     "broccoli-asset-rev": "^3.0.0",
     "core-js": "^3.26.1",
-    "ember-auto-import": "^2.5.0",
     "ember-cli": "^4.8.0",
-    "ember-cli-cjs-transform": "^2.0.0",
     "ember-cli-dependency-checker": "^3.3.1",
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-sri": "^2.1.1",
@@ -106,7 +105,7 @@
     "ember-source-channel-url": "^3.0.0",
     "ember-template-lint": "^4.18.2",
     "ember-template-lint-plugin-prettier": "^4.1.0",
-    "ember-try": "^2.0.0",
+    "ember-try": "^3.0.0-beta",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-ember": "^11.2.0",