feat(pagination): add arrows mode

Signed-off-by: Yann Lojewski <[email protected]>

Author: Yann Lojewski

packages/apps/workshop/stories/design-system/components/pagination/pagination-webcomponent.stories.js

@@ -17,6 +17,7 @@ const mode = {
     Button: 'button',
     Select: 'select',
     Input: 'input',
+    Arrows: 'arrows',
   },
   default: '',
 };

packages/components/pagination/README.md

@@ -34,6 +34,7 @@ angular.module('myModule', ['oui.pagination'])
 
 | Attribute         | Type      | Binding   | One-time Binding  | Values    | Default   | Description
 | ----              | ----      | ----      | ----              | ----      | ----      | ----
+| `mode`            | string    | @?        | no                | n/a       | n/a       | Set the pagination mode. It can be one these values : `button`, `select`, `input` or `arrows` 
 | `current-offset`  | number    | <         | no                | n/a       | n/a       | offset of the current page first item
 | `page-size`       | number    | <?        | no                | n/a       | `25`      | number of items per page
 | `page-size-max`   | number    | <?        | no                | n/a       | n/a       | max page size of the page sizes list

packages/components/pagination/src/index.js

@@ -3,6 +3,7 @@ import Dropdown from '@ovh-ux/ui-kit.dropdown';
 import Pagination from './js/pagination.component';
 import PaginationConfigurationProvider from './js/pagination.provider';
 
+
 const moduleName = 'oui.pagination';
 
 angular
@@ -12,4 +13,5 @@ angular
   .component('ouiPagination', Pagination)
   .provider('ouiPaginationConfiguration', PaginationConfigurationProvider);
 
+export { MODES } from './js/pagination.controller';
 export default moduleName;

packages/components/pagination/src/js/pagination.controller.js

@@ -2,10 +2,11 @@ import { addDefaultParameter } from '@ovh-ux/ui-kit.core/src/js/component-utils'
 import clamp from 'lodash/clamp';
 import range from 'lodash/range';
 
-const MODES = [
+export const MODES = [
   'button',
   'select',
   'input',
+  'arrows',
 ];
 
 const MAX_THRESHOLD_MODE = {
@@ -23,6 +24,10 @@ export default class {
     this.config = ouiPaginationConfiguration;
   }
 
+  get isArrowsMode() {
+    return this.mode === 'arrows';
+  }
+
   getCurrentPage() {
     return Math.floor((this.currentOffset - 1) / this.currentPageSize) + 1;
   }

packages/components/pagination/src/js/pagination.html

@@ -1,4 +1,5 @@
-<div class="oui-pagination-result">
+<div class="oui-pagination-result"
+    ng-if="!$ctrl.isArrowsMode">
     <label class="oui-select oui-select_inline">
         <select class="oui-pagination-result__selector oui-select__input"
             ng-change="$ctrl.onPageSizeChange($ctrl.currentPageSize)"
@@ -60,6 +61,7 @@
 
     <!-- Input -->
     <form class="oui-pagination-items oui-pagination-items_input"
+        ng-if="!$ctrl.isArrowsMode"
         ng-switch-default
         novalidate>
         <span aria-hidden="true"

packages/components/pagination/src/js/pagination.spec.js

@@ -283,6 +283,21 @@ describe('ouiPagination', () => {
         expect(items.hasClass('oui-pagination-items_input')).toBe(true);
       });
 
+      it('should display items in arrows mode', () => {
+        const element = TestUtils.compileTemplate(`
+          <oui-pagination
+            mode="arrows"
+            current-offset="1"
+            total-items="100">
+          </oui-pagination>
+        `);
+
+        expect(getPaginationNavPrevious(element)).toBeDefined();
+        expect(getPaginationNavNext(element)).toBeDefined();
+        expect(getPaginationResult(element)).toBeFalsy();
+        expect(getPaginationItems(element)).toBeFalsy();
+      });
+
       it('should change the mode automatically based on the pageCount', () => {
         let items;
         const element = TestUtils.compileTemplate(`