@1024pix/pix-ui 13.3.4 → 13.4.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Pix-UI Changelog
 
+## v13.4.2 (07/04/2022)
+
+
+### :building_construction: Tech
+- [#208](https://github.com/1024pix/pix-ui/pull/208) [TECH] Suppression de la margin dans Pix-Pagination (PIX-4733)
+
+## v13.4.1 (05/04/2022)
+
+
+### :rocket: Amélioration
+- [#207](https://github.com/1024pix/pix-ui/pull/207) [FEATURE] Permettre à pix-pagination d'avoir une version condensée (PIX-4715)
+
+## v13.4.0 (25/03/2022)
+
+
+### :rocket: Amélioration
+- [#206](https://github.com/1024pix/pix-ui/pull/206) [FEATURE] Composant de pagination (PIX-4511)
+
 ## v13.3.4 (21/03/2022)
 
 

package/addon/components/pix-pagination.hbs

@@ -0,0 +1,48 @@
+<footer class={{this.isCondensed}}>
+  <section class="pix-pagination__size">
+    <span class="pagination-size__label">{{this.beforeResultsPerPage}}</span>
+    <PixSelect
+      aria-label={{this.selectPageSizeLabel}}
+      class="pagination-size__choice"
+      @selectedOption={{this.pageSize}}
+      @onChange={{this.changePageSize}}
+      @options={{this.pageOptions}}
+    />
+  </section>
+  <section class="pix-pagination__navigation">
+    <span>
+      {{#if (eq this.pageCount 1)}}
+        {{this.pageResults}}
+      {{else}}
+        {{this.pageInfo}}
+      {{/if}}
+    </span>
+    <div class="pix-pagination-navigation__action">
+      <PixIconButton
+        class="pix-pagination-navigation__action-button"
+        @icon="arrow-left"
+        aria-label={{this.previousPageLabel}}
+        @triggerAction={{this.goToPreviousPage}}
+        @withBackground={{false}}
+        @size="big"
+        @color="dark-grey"
+        disabled={{this.isPreviousPageDisabled}}
+        aria-disabled="{{this.isPreviousPageDisabled}}"
+      />
+      <span>
+        {{this.pageNumber}}
+      </span>
+      <PixIconButton
+        class="pix-pagination-navigation__action-button"
+        @icon="arrow-right"
+        aria-label={{this.nextPageLabel}}
+        @triggerAction={{this.goToNextPage}}
+        @withBackground={{false}}
+        @size="big"
+        @color="dark-grey"
+        disabled={{this.isNextPageDisabled}}
+        aria-disabled="{{this.isNextPageDisabled}}"
+      />
+    </div>
+  </section>
+</footer>

package/addon/components/pix-pagination.js

@@ -0,0 +1,121 @@
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import Component from '@glimmer/component';
+import { formatMessage } from '../translations';
+
+const DEFAULT_PAGE_OPTIONS = [
+  { label: '10', value: 10 },
+  { label: '25', value: 25 },
+  { label: '50', value: 50 },
+  { label: '100', value: 100 },
+];
+
+export default class PixPagination extends Component {
+  @service router;
+
+  get isCondensed() {
+    return this.args.isCondensed ? 'pix-pagination-condensed' : 'pix-pagination';
+  }
+
+  get beforeResultsPerPage() {
+    return this.formatMessage('beforeResultsPerPage');
+  }
+
+  get previousPageLabel() {
+    return this.formatMessage('previousPageLabel');
+  }
+
+  get nextPageLabel() {
+    return this.formatMessage('nextPageLabel');
+  }
+
+  get pageNumber() {
+    return this.formatMessage('pageNumber', {
+      total: this.pageCount,
+      current: this.currentPage,
+    });
+  }
+  get pageInfo() {
+    return this.formatMessage('pageInfo', {
+      total: this.resultsCount,
+      start: this.firstItemPosition,
+      end: this.lastItemPosition,
+    });
+  }
+
+  get pageOptions() {
+    return this.args.pageOptions ? this.args.pageOptions : DEFAULT_PAGE_OPTIONS;
+  }
+
+  get selectPageSizeLabel() {
+    return this.formatMessage('selectPageSizeLabel');
+  }
+
+  get pageResults() {
+    return this.formatMessage('pageResults', { total: this.args.pagination.rowCount });
+  }
+
+  formatMessage(message, values) {
+    return formatMessage(this.args.locale ?? 'fr', `pagination.${message}`, values);
+  }
+
+  get currentPage() {
+    return this.args.pagination ? this.args.pagination.page : 1;
+  }
+
+  get pageCount() {
+    if (!this.args.pagination) return 0;
+    if (this.args.pagination.pageCount === 0) return 1;
+    return this.args.pagination.pageCount;
+  }
+
+  get pageSize() {
+    return this.args.pagination ? this.args.pagination.pageSize : this.args.pageOptions[0];
+  }
+
+  get isNextPageDisabled() {
+    return this.currentPage === this.pageCount || this.pageCount === 0;
+  }
+
+  get nextPage() {
+    return Math.min(this.currentPage + 1, this.pageCount);
+  }
+
+  get isPreviousPageDisabled() {
+    return this.currentPage === 1 || this.pageCount === 0;
+  }
+
+  get previousPage() {
+    return Math.max(this.currentPage - 1, 1);
+  }
+
+  get resultsCount() {
+    return this.args.pagination ? this.args.pagination.rowCount : 0;
+  }
+
+  get firstItemPosition() {
+    if (!this.args.pagination) return 0;
+    return (this.currentPage - 1) * this.pageSize + 1;
+  }
+
+  get lastItemPosition() {
+    if (!this.args.pagination) return 0;
+    const { rowCount } = this.args.pagination;
+    return Math.min(rowCount, this.firstItemPosition + this.pageSize - 1);
+  }
+
+  @action
+  changePageSize(event) {
+    this.router.replaceWith({ queryParams: { pageSize: event.target.value, pageNumber: 1 } });
+  }
+
+  @action
+  goToNextPage() {
+    this.router.replaceWith({ queryParams: { pageNumber: this.nextPage } });
+  }
+
+  @action
+  goToPreviousPage() {
+    this.router.replaceWith({ queryParams: { pageNumber: this.previousPage } });
+  }
+}

package/addon/styles/_pix-pagination.scss

@@ -0,0 +1,58 @@
+.pix-pagination, .pix-pagination-condensed {
+  display: flex;
+  justify-content: center;
+  color: $grey-60;
+  font-size: 0.875rem;
+
+  &__size {
+    display: none;
+    align-items: center;
+    padding: 0;
+
+    .pagination-size__label {
+      margin-right: 16px;
+    }
+
+    select.pagination__choice {
+      height: 36px;
+      font-size: 0.8rem;
+      padding-left: 8px;
+      padding-right: 24px;
+    }
+  }
+
+  &__navigation {
+    display: flex;
+    align-items: center;
+    padding: 0;
+    gap: 12px;
+    flex-direction: column-reverse;
+  }
+}
+
+.pix-pagination-navigation {
+  &__action {
+    display: flex;
+    align-items: center;
+
+    &-button {
+      margin: 0 8px;
+    }
+  }
+}
+
+@include device-is('tablet') {
+  .pix-pagination {
+    justify-content: space-between;
+  }
+  .pix-pagination > .pix-pagination {
+    &__size {
+      display: flex;
+    }
+
+    &__navigation {
+      gap: initial;
+      flex-direction: initial;
+    }
+  }
+}

package/addon/styles/addon.scss

@@ -29,6 +29,7 @@
 @import 'pix-input-code';
 @import 'pix-selectable-tag';
 @import 'pix-dropdown';
+@import 'pix-pagination';
 
 html {
   font-size: 16px;

package/addon/translations/en.js

@@ -0,0 +1,12 @@
+export default {
+  pagination: {
+    beforeResultsPerPage: 'See',
+    selectPageSizeLabel: 'Select the number of items by page',
+    pageResults: '{total, plural, =0 {0 items} =1 {1 item} other {{total, number} items}}',
+    pageInfo:
+      '{start, number}-{end, number} of {total, plural, =0 {0 items} =1 {1 item} other {{total, number} items}}',
+    previousPageLabel: 'Go to previous page',
+    pageNumber: 'Page {current, number} / {total, number}',
+    nextPageLabel: 'Go to next page',
+  },
+};

package/addon/translations/fr.js

@@ -0,0 +1,12 @@
+export default {
+  pagination: {
+    beforeResultsPerPage: 'Voir',
+    selectPageSizeLabel: "Nombre d'élément à afficher par page",
+    pageResults: '{total, plural, =0 {0 élément} =1 {1 élément} other {{total, number} éléments}}',
+    pageInfo:
+      '{start, number}-{end, number} sur {total, plural, =0 {0 élément} =1 {1 élément} other {{total, number} éléments}}',
+    previousPageLabel: 'Aller à la page précédente',
+    pageNumber: 'Page {current, number} / {total, number}',
+    nextPageLabel: 'Aller à la page suivante',
+  },
+};

package/addon/translations/index.js

@@ -0,0 +1,32 @@
+import { createIntl } from '@formatjs/intl';
+import en from './en';
+import fr from './fr';
+
+export function formatMessage(locale, message, values) {
+  return locales[locale].formatMessage({ id: message }, values);
+}
+
+const locales = {
+  fr: createIntl({
+    locale: 'fr',
+    messages: flattenObject(fr),
+  }),
+  en: createIntl({
+    locale: 'en',
+    messages: flattenObject(en),
+  }),
+};
+
+export function flattenObject(object) {
+  const entries = Object.entries(object);
+
+  const flatEntries = entries.flatMap(([key, value]) => {
+    if (typeof value !== 'object') return [[key, value]];
+
+    const childEntries = Object.entries(flattenObject(value));
+
+    return childEntries.map(([childKey, childValue]) => [`${key}.${childKey}`, childValue]);
+  });
+
+  return Object.fromEntries(flatEntries);
+}

package/app/components/pix-pagination.js

@@ -0,0 +1,4 @@
+// WORKAROUND: necessary for storybook to resolve the import
+import '@formatjs/intl';
+
+export { default } from '@1024pix/pix-ui/components/pix-pagination';

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

@@ -0,0 +1,146 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export const Template = (args) => {
+  return {
+    template: hbs`
+      <PixPagination
+        @pagination={{pagination}}
+        @locale = {{locale}}
+        @pageOptions= {{pageOptions}}
+        @isCondensed= {{isCondensed}}
+            />
+    `,
+    context: args,
+  };
+};
+
+export const French = Template.bind({});
+French.args = {
+  pagination: {
+    page: 1,
+    pageSize: 5,
+    rowCount: 12,
+    pageCount: 3,
+  },
+  locale: 'fr',
+};
+
+export const English = Template.bind({});
+English.args = {
+  pagination: {
+    page: 2,
+    pageSize: 10,
+    rowCount: 12,
+    pageCount: 2,
+  },
+  pageOptions: [
+    { label: '10', value: 10 },
+    { label: '20', value: 20 },
+    { label: '50', value: 50 },
+    { label: '100', value: 100 },
+  ],
+  locale: 'en',
+};
+
+export const OnePage = Template.bind({});
+OnePage.args = {
+  pagination: {
+    page: 1,
+    pageSize: 10,
+    rowCount: 2,
+    pageCount: 1,
+  },
+  locale: 'fr',
+};
+
+export const Condensed = Template.bind({});
+Condensed.args = {
+  pagination: {
+    page: 1,
+    pageSize: 10,
+    rowCount: 2,
+    pageCount: 1,
+  },
+  locale: 'fr',
+  isCondensed: true,
+};
+
+// select attribute data type from https://storybook.js.org/docs/react/essentials/controls
+export const argTypes = {
+  pagination: {
+    name: 'pagination',
+    description:
+      "Un objet de pagination tel que l'on en trouve au retour de `knex-utils.fetchPage`",
+    type: { name: 'object', required: true },
+  },
+  pageOptions: {
+    name: 'pageOptions',
+    description: "Un tableau d'objet `options` pour configurer le select",
+    type: { name: 'array', required: false },
+    control: {
+      type: 'array',
+      value: [
+        {
+          label: '10',
+          value: 10,
+        },
+        {
+          label: '25',
+          value: 25,
+        },
+        {
+          label: '50',
+          value: 50,
+        },
+        {
+          label: '100',
+          value: 100,
+        },
+      ],
+    },
+    table: {
+      type: { summary: 'array' },
+      defaultValue: {
+        summary: JSON.stringify([
+          {
+            label: '10',
+            value: 10,
+          },
+          {
+            label: '25',
+            value: 25,
+          },
+          {
+            label: '50',
+            value: 50,
+          },
+          {
+            label: '100',
+            value: 100,
+          },
+        ]),
+      },
+    },
+  },
+  locale: {
+    name: 'locale',
+    description: "La langue de l'utilisateur",
+    type: { name: 'string', required: false },
+    control: { type: 'select', options: ['fr', 'en'] },
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: 'fr' },
+    },
+  },
+  isCondensed: {
+    name: 'isCondensed',
+    description:
+      "En desktop, retire le contrôle du nombre d'élèments par page pour simplifier l'usage",
+    type: { name: 'boolean', required: false },
+    control: { type: 'boolean' },
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: 'false' },
+    },
+  },
+};

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

@@ -0,0 +1,65 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+
+import * as stories from './pix-pagination.stories.js';
+
+<Meta
+  title='Basics/Pagination'
+  component='PixPagination'
+  argTypes={stories.argTypes}
+/>
+
+# PixPagination
+
+PixPagination est un élément permettant de trigger le changement de page dans l'élément parent.
+
+> ** ⚠️ Pour utiliser ce composant, il est recommandé d'ajouter cette config dans les routes où tu l'utiliseras.**
+>
+> ** Cela permettra de reload le `model` si les queryParams `pageNumber` & `pageSize` ont été modifiés.**
+> ```javascript
+>  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.
+
+** ⚠ Si vous voulez utiliser des options différentes, il ne faut pas oublier que l'API fait le premier call avec un pageSize
+ à 10 par défaut.**
+
+Sur mobile, le select qui permet de choisir le nombre d'élément à afficher sur la page est retiré.
+
+## En français avec paramètres par défaut
+<Canvas>
+  <Story name='French' story={stories.French} height={110}/>
+</Canvas>
+
+## En anglais avec le paramètre `pageOptions` custom
+<Canvas>
+  <Story name='English' story={stories.English} height={110} />
+</Canvas>
+
+## Avec une seule page
+<Canvas>
+  <Story name='OnePage' story={stories.OnePage} height={110} />
+</Canvas>
+
+## Version condensée
+<Canvas>
+  <Story name='Condensed' story={stories.Condensed} height={140} />
+</Canvas>
+
+## Usage
+
+```html
+<PixPagination
+   @pagination={{pagination}}
+   @locale = {{locale}}
+   @pageOptions = {{pageOptions}
+   @isCondensed = {{isCondensed}
+/>
+```
+
+## Arguments
+
+<ArgsTable story="French" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "13.3.4",
+  "version": "13.4.2",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -53,6 +53,7 @@
     "@1024pix/ember-testing-library": "^0.5.0",
     "@ember/optional-features": "^2.0.0",
     "@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",