From cc770e4c035f0c35cebdea6243a71eca5a5b3f65 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Fri, 12 Jan 2018 20:41:48 +0100 Subject: [PATCH 01/25] Create base ClayPagination --- packages/clay-pagination/LICENSE.md | 29 +++++++++++ packages/clay-pagination/README.md | 26 ++++++++++ packages/clay-pagination/demos/a11y.html | 35 +++++++++++++ packages/clay-pagination/demos/index.html | 35 +++++++++++++ packages/clay-pagination/package.json | 51 +++++++++++++++++++ .../clay-pagination/src/ClayPagination.js | 43 ++++++++++++++++ .../clay-pagination/src/ClayPagination.soy | 23 +++++++++ .../src/__tests__/ClayPagination.js | 33 ++++++++++++ .../__snapshots__/ClayPagination.js.snap | 1 + packages/clay-pagination/webpack.config.js | 32 ++++++++++++ yarn.lock | 2 +- 11 files changed, 309 insertions(+), 1 deletion(-) create mode 100644 packages/clay-pagination/LICENSE.md create mode 100644 packages/clay-pagination/README.md create mode 100644 packages/clay-pagination/demos/a11y.html create mode 100644 packages/clay-pagination/demos/index.html create mode 100644 packages/clay-pagination/package.json create mode 100644 packages/clay-pagination/src/ClayPagination.js create mode 100644 packages/clay-pagination/src/ClayPagination.soy create mode 100644 packages/clay-pagination/src/__tests__/ClayPagination.js create mode 100644 packages/clay-pagination/src/__tests__/__snapshots__/ClayPagination.js.snap create mode 100644 packages/clay-pagination/webpack.config.js diff --git a/packages/clay-pagination/LICENSE.md b/packages/clay-pagination/LICENSE.md new file mode 100644 index 000000000..70f93e946 --- /dev/null +++ b/packages/clay-pagination/LICENSE.md @@ -0,0 +1,29 @@ +# Software License Agreement (BSD License) + +Copyright (c) 2014, Liferay Inc. +All rights reserved. + +Redistribution and use of this software in source and binary forms, with or without modification, are +permitted provided that the following conditions are met: + +* Redistributions of source code must retain the above + copyright notice, this list of conditions and the + following disclaimer. + +* Redistributions in binary form must reproduce the above + copyright notice, this list of conditions and the + following disclaimer in the documentation and/or other + materials provided with the distribution. + +* The name of Liferay Inc. may not be used to endorse or promote products + derived from this software without specific prior + written permission of Liferay Inc. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED +WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A +PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR +ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS +INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR +TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF +ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. diff --git a/packages/clay-pagination/README.md b/packages/clay-pagination/README.md new file mode 100644 index 000000000..69b565c3f --- /dev/null +++ b/packages/clay-pagination/README.md @@ -0,0 +1,26 @@ +# clay-pagination + +Clay Pagination Component + +## Setup + +1. Install NodeJS >= v0.12.0 and NPM >= v3.0.0, if you don't have it yet. You +can find it [here](https://nodejs.org). + +2. Install local dependencies: + + ``` + npm install + ``` + +3. Build the code: + + ``` + npm run build + ``` + +4. Open the demo at demos/index.html on your browser. + +## Contribute + +We'd love to get contributions from you! Please, check our [Contributing Guidelines](CONTRIBUTING.md) to see how you can help us improve. diff --git a/packages/clay-pagination/demos/a11y.html b/packages/clay-pagination/demos/a11y.html new file mode 100644 index 000000000..b44ce6dae --- /dev/null +++ b/packages/clay-pagination/demos/a11y.html @@ -0,0 +1,35 @@ + + + + + + Demo: ClayPagination + + + + + + + + +

+ ClayPagination +

+ +
+ + + + diff --git a/packages/clay-pagination/demos/index.html b/packages/clay-pagination/demos/index.html new file mode 100644 index 000000000..b44ce6dae --- /dev/null +++ b/packages/clay-pagination/demos/index.html @@ -0,0 +1,35 @@ + + + + + + Demo: ClayPagination + + + + + + + + +

+ ClayPagination +

+ +
+ + + + diff --git a/packages/clay-pagination/package.json b/packages/clay-pagination/package.json new file mode 100644 index 000000000..d7a27c28a --- /dev/null +++ b/packages/clay-pagination/package.json @@ -0,0 +1,51 @@ +{ + "name": "clay-pagination", + "version": "1.0.0-alpha.14", + "description": "Metal ClayPagination component", + "license": "BSD", + "repository": "https://github.com/metal/metal-clay-components/tree/master/packages/clay-pagination", + "engines": { + "node": ">=0.12.0", + "npm": ">=3.0.0" + }, + "main": "lib/ClayPagination.js", + "esnext:main": "src/ClayPagination.js", + "jsnext:main": "src/ClayPagination.js", + "files": [ + "lib", + "src", + "test" + ], + "scripts": { + "build": "npm run soy && webpack", + "compile": "babel -d lib/ src/ -s --ignore src/__tests__", + "prepublish": "npm run soy && npm run compile", + "soy": "metalsoy" + }, + "keywords": [ + "clay", + "metal" + ], + "dependencies": { + "metal": "^2.14.0", + "metal-component": "^2.14.0", + "metal-soy": "^2.14.0", + "metal-state": "^2.15.0", + "metal-web-component": "^2.14.0" + }, + "devDependencies": { + "babel-cli": "^6.24.1", + "babel-core": "^6.25.0", + "babel-loader": "^7.0.0", + "babel-plugin-transform-node-env-inline": "^0.1.1", + "babel-preset-env": "^1.6.0", + "browserslist-config-clay-components": "^1.0.0-alpha.2", + "clay": "^2.0.0-beta.4", + "metal-dom": "^2.13.2", + "metal-tools-soy": "^4.2.1", + "webpack": "^3.0.0" + }, + "browserslist": [ + "extends browserslist-config-clay-components" + ] +} diff --git a/packages/clay-pagination/src/ClayPagination.js b/packages/clay-pagination/src/ClayPagination.js new file mode 100644 index 000000000..28d3a97dd --- /dev/null +++ b/packages/clay-pagination/src/ClayPagination.js @@ -0,0 +1,43 @@ +import Component from 'metal-component'; +import defineWebComponent from 'metal-web-component'; +import Soy from 'metal-soy'; +import {Config} from 'metal-state'; + +import templates from './ClayPagination.soy.js'; + +/** + * Metal ClayPagination component. + */ +class ClayPagination extends Component {} + +/** + * State definition. + * @static + * @type {!Object} + */ +ClayPagination.STATE = { + /** + * CSS classes to be applied to the element. + * @instance + * @memberof ClayPagination + * @type {?string|undefined} + * @default undefined + */ + elementClasses: Config.string(), + + /** + * Id to be applied to the element. + * @instance + * @memberof ClayPagination + * @type {?string|undefined} + * @default undefined + */ + id: Config.string(), +}; + +defineWebComponent('clay-pagination', ClayPagination); + +Soy.register(ClayPagination, templates); + +export {ClayPagination}; +export default ClayPagination; diff --git a/packages/clay-pagination/src/ClayPagination.soy b/packages/clay-pagination/src/ClayPagination.soy new file mode 100644 index 000000000..c28645e3d --- /dev/null +++ b/packages/clay-pagination/src/ClayPagination.soy @@ -0,0 +1,23 @@ +{namespace ClayPagination} + +/** + * This renders the component's whole content. + */ +{template .render} + {@param? elementClasses: string} + {@param? id: string} + + {let $attributes kind="attributes"} + class="clay-pagination + {if $elementClasses} + {sp}{$elementClasses} + {/if} + " + + {if $id} + id="{$id}" + {/if} + {/let} + +
Hello World
+{/template} \ No newline at end of file diff --git a/packages/clay-pagination/src/__tests__/ClayPagination.js b/packages/clay-pagination/src/__tests__/ClayPagination.js new file mode 100644 index 000000000..42c5f045a --- /dev/null +++ b/packages/clay-pagination/src/__tests__/ClayPagination.js @@ -0,0 +1,33 @@ +import ClayPagination from '../ClayPagination'; + +let component; + +describe('ClayPagination', function() { + afterEach(() => { + if (component) { + component.dispose(); + } + }); + + it('should render the default markup', () => { + component = new ClayPagination(); + + expect(component).toMatchSnapshot(); + }); + + it('should render a ClayPagination with classes', () => { + component = new ClayPagination({ + elementClasses: 'my-custom-class', + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render a ClayPagination with id', () => { + component = new ClayPagination({ + id: 'myId', + }); + + expect(component).toMatchSnapshot(); + }); +}); diff --git a/packages/clay-pagination/src/__tests__/__snapshots__/ClayPagination.js.snap b/packages/clay-pagination/src/__tests__/__snapshots__/ClayPagination.js.snap new file mode 100644 index 000000000..d1e5c85a7 --- /dev/null +++ b/packages/clay-pagination/src/__tests__/__snapshots__/ClayPagination.js.snap @@ -0,0 +1 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP diff --git a/packages/clay-pagination/webpack.config.js b/packages/clay-pagination/webpack.config.js new file mode 100644 index 000000000..3d1b420a4 --- /dev/null +++ b/packages/clay-pagination/webpack.config.js @@ -0,0 +1,32 @@ +const path = require('path'); +const webpack = require('webpack'); + +module.exports = { + entry: './src/ClayPagination.js', + module: { + rules: [ + { + test: /\.js$/, + exclude: /(node_modules|bower_components)/, + use: { + loader: 'babel-loader', + options: { + compact: false, + presets: ['babel-preset-env'], + plugins: ['babel-plugin-transform-node-env-inline'], + }, + }, + }, + ], + }, + devtool: 'cheap-module-source-map', + output: { + library: 'metal', + libraryTarget: 'this', + filename: './build/globals/clay-pagination.js', + }, + plugins: [new webpack.optimize.ModuleConcatenationPlugin()], + resolve: { + mainFields: ['esnext:main', 'main'], + }, +}; diff --git a/yarn.lock b/yarn.lock index 92bf1aa87..4c45aac99 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1460,7 +1460,7 @@ class-utils@^0.3.5: lazy-cache "^2.0.2" static-extend "^0.1.1" -clay@^2.0.0-beta.5: +clay@^2.0.0-beta.4, clay@^2.0.0-beta.5: version "2.0.0-beta.5" resolved "https://registry.yarnpkg.com/clay/-/clay-2.0.0-beta.5.tgz#0a615ea7753d20ecea8236c3e05e7a8f72462639" From b54392bdd06b1e01b3043c703cf7211bceb34c82 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Fri, 12 Jan 2018 21:20:50 +0100 Subject: [PATCH 02/25] Render pages in ClayPagination --- packages/clay-pagination/package.json | 3 +- .../clay-pagination/src/ClayPagination.js | 19 ++++++++++ .../clay-pagination/src/ClayPagination.soy | 35 +++++++++++++++++-- 3 files changed, 54 insertions(+), 3 deletions(-) diff --git a/packages/clay-pagination/package.json b/packages/clay-pagination/package.json index d7a27c28a..c1e1a91ae 100644 --- a/packages/clay-pagination/package.json +++ b/packages/clay-pagination/package.json @@ -20,13 +20,14 @@ "build": "npm run soy && webpack", "compile": "babel -d lib/ src/ -s --ignore src/__tests__", "prepublish": "npm run soy && npm run compile", - "soy": "metalsoy" + "soy": "metalsoy --soyDeps '../../node_modules/clay-+(icon|link)/src/**/*.soy'" }, "keywords": [ "clay", "metal" ], "dependencies": { + "clay-link": "^1.0.0-alpha.12", "metal": "^2.14.0", "metal-component": "^2.14.0", "metal-soy": "^2.14.0", diff --git a/packages/clay-pagination/src/ClayPagination.js b/packages/clay-pagination/src/ClayPagination.js index 28d3a97dd..5f253c298 100644 --- a/packages/clay-pagination/src/ClayPagination.js +++ b/packages/clay-pagination/src/ClayPagination.js @@ -1,3 +1,4 @@ +import 'clay-link'; import Component from 'metal-component'; import defineWebComponent from 'metal-web-component'; import Soy from 'metal-soy'; @@ -33,6 +34,24 @@ ClayPagination.STATE = { * @default undefined */ id: Config.string(), + + /** + * The path to the SVG spritemap file containing the icons. + * @instance + * @memberof ClayPagination + * @type {!string} + * @default undefined + */ + spritemap: Config.string().required(), + + /** + * Total number of pages to show. + * @instance + * @memberof ClayPagination + * @type {!number} + * @default undefined + */ + totalPages: Config.number().required(), }; defineWebComponent('clay-pagination', ClayPagination); diff --git a/packages/clay-pagination/src/ClayPagination.soy b/packages/clay-pagination/src/ClayPagination.soy index c28645e3d..dd2190874 100644 --- a/packages/clay-pagination/src/ClayPagination.soy +++ b/packages/clay-pagination/src/ClayPagination.soy @@ -4,11 +4,13 @@ * This renders the component's whole content. */ {template .render} + {@param spritemap: string} + {@param totalPages: number} {@param? elementClasses: string} {@param? id: string} {let $attributes kind="attributes"} - class="clay-pagination + class="clay-pagination pagination {if $elementClasses} {sp}{$elementClasses} {/if} @@ -19,5 +21,34 @@ {/if} {/let} -
Hello World
+ {/template} \ No newline at end of file From cb8d25970348297072849c5effd208097c6d5ec3 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Fri, 12 Jan 2018 21:32:19 +0100 Subject: [PATCH 03/25] Extract ClayPagination items to template --- .../clay-pagination/src/ClayPagination.soy | 62 ++++++++++++------- 1 file changed, 38 insertions(+), 24 deletions(-) diff --git a/packages/clay-pagination/src/ClayPagination.soy b/packages/clay-pagination/src/ClayPagination.soy index dd2190874..54a60789c 100644 --- a/packages/clay-pagination/src/ClayPagination.soy +++ b/packages/clay-pagination/src/ClayPagination.soy @@ -22,33 +22,47 @@ {/let}
    -
  • - {call ClayLink.render} - {param elementClasses: 'page-link' /} - {param href: '#1' /} - {param icon: 'angle-left' /} - {param spritemap: $spritemap /} - {/call} -
    • + {call .item} + {param ariaLabel: 'Previous Page' /} + {param href: '#1' /} + {param icon: 'angle-left' /} + {param spritemap: $spritemap /} + {/call} {for $index in range($totalPages)} -
  • - {call ClayLink.render} - {param elementClasses: 'page-link' /} - {param href: '#' + $index /} - {param label: '' + $index /} - {param spritemap: $spritemap /} - {/call} -
    • + {call .item} + {param href: '#' + $index /} + {param label: '' + $index /} + {/call} {/for} -
  • - {call ClayLink.render} - {param elementClasses: 'page-link' /} - {param href: '#' + $totalPages /} - {param icon: 'angle-right' /} - {param spritemap: $spritemap /} - {/call} -
    • + {call .item} + {param ariaLabel: 'Next Page' /} + {param href: '#' + $totalPages /} + {param icon: 'angle-right' /} + {param spritemap: $spritemap /} + {/call}
+{/template} + +/** + * Renders a page item + */ +{template .item} + {@param href: string} + {@param? ariaLabel: string} + {@param? icon: string} + {@param? label: string} + {@param? spritemap: string} + +
  • + {call ClayLink.render} + {param ariaLabel: $ariaLabel /} + {param elementClasses: 'page-link' /} + {param href: $href /} + {param icon: $icon /} + {param label: $label /} + {param spritemap: $spritemap /} + {/call} +
    • {/template} \ No newline at end of file From 82f36d5057c18dd735933d8dbaf38dbec72696b8 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Fri, 12 Jan 2018 21:44:02 +0100 Subject: [PATCH 04/25] Add currentPage to ClayPagination --- .../clay-pagination/src/ClayPagination.js | 9 ++++++ .../clay-pagination/src/ClayPagination.soy | 28 +++++++++++++++---- 2 files changed, 31 insertions(+), 6 deletions(-) diff --git a/packages/clay-pagination/src/ClayPagination.js b/packages/clay-pagination/src/ClayPagination.js index 5f253c298..f165ba2c2 100644 --- a/packages/clay-pagination/src/ClayPagination.js +++ b/packages/clay-pagination/src/ClayPagination.js @@ -17,6 +17,15 @@ class ClayPagination extends Component {} * @type {!Object} */ ClayPagination.STATE = { + /** + * Current page number. + * @instance + * @memberof ClayPagination + * @type {!number} + * @default undefined + */ + currentPage: Config.number().required(), + /** * CSS classes to be applied to the element. * @instance diff --git a/packages/clay-pagination/src/ClayPagination.soy b/packages/clay-pagination/src/ClayPagination.soy index 54a60789c..bf267f797 100644 --- a/packages/clay-pagination/src/ClayPagination.soy +++ b/packages/clay-pagination/src/ClayPagination.soy @@ -4,6 +4,7 @@ * This renders the component's whole content. */ {template .render} + {@param currentPage: number} {@param spritemap: string} {@param totalPages: number} {@param? elementClasses: string} @@ -24,21 +25,24 @@
      {call .item} {param ariaLabel: 'Previous Page' /} - {param href: '#1' /} + {param href: $currentPage > 1 ? '#' + ($currentPage - 1) : null /} {param icon: 'angle-left' /} {param spritemap: $spritemap /} {/call} {for $index in range($totalPages)} + {let $page: $index + 1 /} + {call .item} - {param href: '#' + $index /} - {param label: '' + $index /} + {param active: $page == $currentPage /} + {param href: '#' + $page /} + {param label: '' + $page /} {/call} {/for} {call .item} {param ariaLabel: 'Next Page' /} - {param href: '#' + $totalPages /} + {param href: $currentPage < $totalPages ? '#' + ($currentPage + 1) : null /} {param icon: 'angle-right' /} {param spritemap: $spritemap /} {/call} @@ -49,13 +53,25 @@ * Renders a page item */ {template .item} - {@param href: string} + {@param? active: bool} {@param? ariaLabel: string} + {@param? href: string} {@param? icon: string} {@param? label: string} {@param? spritemap: string} -
    • + {let $classes kind="text"} + page-item + {if $active} + {sp}active + {/if} + + {if not $href} + {sp}disabled + {/if} + {/let} + +
    • {call ClayLink.render} {param ariaLabel: $ariaLabel /} {param elementClasses: 'page-link' /} From 15beee898b85d99244caed6e71fec28884c0bf40 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Sat, 13 Jan 2018 02:13:13 +0100 Subject: [PATCH 05/25] Render al pages in ClayPagination --- .../clay-pagination/src/ClayPagination.soy | 62 +++++++++++++++++-- 1 file changed, 56 insertions(+), 6 deletions(-) diff --git a/packages/clay-pagination/src/ClayPagination.soy b/packages/clay-pagination/src/ClayPagination.soy index bf267f797..3cb826637 100644 --- a/packages/clay-pagination/src/ClayPagination.soy +++ b/packages/clay-pagination/src/ClayPagination.soy @@ -30,15 +30,65 @@ {param spritemap: $spritemap /} {/call} - {for $index in range($totalPages)} - {let $page: $index + 1 /} + {if $totalPages <= 5} + {for $page in range(1, $totalPages+1)} + {call .item} + {param active: $page == $currentPage /} + {param href: '#' + $page/} + {param label: '' + $page/} + {/call} + {/for} + {else} + {let $fromOneToCurrent: $currentPage - 1 /} + {let $fromCurrentToLast: $totalPages - $currentPage /} {call .item} - {param active: $page == $currentPage /} - {param href: '#' + $page /} - {param label: '' + $page /} + {param active: $currentPage == 1 /} + {param href: '#1' /} + {param label: '1' /} {/call} - {/for} + + {if $fromOneToCurrent < 4} + {for $page in range(2, $currentPage)} + {call .item} + {param href: '#' + $page/} + {param label: '' + $page/} + {/call} + {/for} + {else} + ... + {/if} + + {if $currentPage != 1 and $currentPage != $totalPages} + {let $currentRangeInit: $fromOneToCurrent >= 4 ? $currentPage - 1 : $currentPage /} + {let $currentRangeEnd: $fromCurrentToLast > 3 ? $currentPage + 2 : $currentPage + 1 /} + + {for $page in range($currentRangeInit, $currentRangeEnd)} + {call .item} + {param active: $page == $currentPage /} + {param href: '#' + $page /} + {param label: '' + $page /} + {/call} + {/for} + {/if} + + {if $fromCurrentToLast <= 3} + {for $page in range($currentPage + 1, $totalPages)} + {call .item} + {param href: '#' + $page/} + {param label: '' + $page/} + {/call} + {/for} + {else} + ... + {/if} + + {call .item} + {param active: $currentPage == $totalPages /} + {param href: '#' + $totalPages /} + {param label: '' + $totalPages /} + {/call} + {/if} {call .item} {param ariaLabel: 'Next Page' /} From b8932b6d51f542af837542332f57b6de0ddfff39 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Sat, 13 Jan 2018 05:46:44 +0100 Subject: [PATCH 06/25] Create items deltemplate for ClayDropdownBase --- .../clay-dropdown/src/ClayDropdownBase.js | 9 +++ .../clay-dropdown/src/ClayDropdownBase.soy | 71 ++++++++++--------- 2 files changed, 46 insertions(+), 34 deletions(-) diff --git a/packages/clay-dropdown/src/ClayDropdownBase.js b/packages/clay-dropdown/src/ClayDropdownBase.js index f11fc01d1..37ab42304 100644 --- a/packages/clay-dropdown/src/ClayDropdownBase.js +++ b/packages/clay-dropdown/src/ClayDropdownBase.js @@ -208,6 +208,15 @@ ClayDropdownBase.STATE = { */ caption: Config.string(), + /** + * Content Renderer name of items. + * @instance + * @memberof ClayDropdownBase + * @type {?string|undefined} + * @default undefined + */ + contentRenderer: Config.string(), + /** * CSS classes to be applied to the element. * @instance diff --git a/packages/clay-dropdown/src/ClayDropdownBase.soy b/packages/clay-dropdown/src/ClayDropdownBase.soy index dcc548a6f..dbc3b91f7 100644 --- a/packages/clay-dropdown/src/ClayDropdownBase.soy +++ b/packages/clay-dropdown/src/ClayDropdownBase.soy @@ -8,6 +8,7 @@ {@param label: html|string} {@param? button: ?} {@param? caption: string} + {@param? contentRenderer: string} {@param? elementClasses: string} {@param? expanded: bool} {@param? handleButtonClick_: any} @@ -48,6 +49,7 @@ {call .sections} {param button: $button /} {param caption: $caption /} + {param contentRenderer: $contentRenderer /} {param expanded: $expanded /} {param handleButtonClick_: $handleButtonClick_ /} {param handleItemClick_: $handleItemClick_ /} @@ -61,36 +63,6 @@ {/template} -/** - * Renders a list of items - */ -{template .items} - {@param items: list} - {@param? handleItemClick_: any} - {@param? isInList: bool} - {@param? itemsIconAlignment: string} - {@param? spritemap: string} - - {foreach $item in $items} - {delcall ClayDropdownBase.Item variant="$item.type ?: 'item'"} - {param active: $item.active /} - {param checked: $item.checked /} - {param disabled: $item.disabled /} - {param handleItemClick_: $handleItemClick_ /} - {param href: $item.href /} - {param icon: $item.icon /} - {param inputName: $item.inputName /} - {param inputValue: $item.inputValue /} - {param isInList: $isInList /} - {param items: $item.items /} - {param itemsIconAlignment: $itemsIconAlignment /} - {param label: $item.label ?: '' /} - {param separator: $item.separator /} - {param spritemap: $spritemap /} - {/delcall} - {/foreach} -{/template} - /** * Renders a search input */ @@ -121,6 +93,7 @@ {@param items: list} {@param? button: ?} {@param? caption: string} + {@param? contentRenderer: string} {@param? expanded: bool} {@param? handleButtonClick_: any} {@param? handleItemClick_: any} @@ -159,13 +132,13 @@ {/if} {let $itemList kind="html"} - {call .items} + {delcall ClayDropdownBase.Items variant="$contentRenderer"} {param handleItemClick_: $handleItemClick_ /} {param isInList: $type == 'list' /} {param items: $items /} {param itemsIconAlignment: $itemsIconAlignment /} {param spritemap: $spritemap /} - {/call} + {/delcall} {/let} {if $type == 'list'} @@ -422,13 +395,13 @@ {/if} {if $items} - {call ClayDropdownBase.items} + {delcall ClayDropdownBase.Items} {param handleItemClick_: $handleItemClick_ /} {param isInList: $isInList /} {param items: $items /} {param itemsIconAlignment: $itemsIconAlignment /} {param spritemap: $spritemap /} - {/call} + {/delcall} {/if} {if $separator} @@ -495,3 +468,33 @@
      {/if} {/deltemplate} + +/** + * Renders a list of items + */ +{deltemplate ClayDropdownBase.Items} + {@param items: list} + {@param? handleItemClick_: any} + {@param? isInList: bool} + {@param? itemsIconAlignment: string} + {@param? spritemap: string} + + {foreach $item in $items} + {delcall ClayDropdownBase.Item variant="$item.type ?: 'item'"} + {param active: $item.active /} + {param checked: $item.checked /} + {param disabled: $item.disabled /} + {param handleItemClick_: $handleItemClick_ /} + {param href: $item.href /} + {param icon: $item.icon /} + {param inputName: $item.inputName /} + {param inputValue: $item.inputValue /} + {param isInList: $isInList /} + {param items: $item.items /} + {param itemsIconAlignment: $itemsIconAlignment /} + {param label: $item.label ?: '' /} + {param separator: $item.separator /} + {param spritemap: $spritemap /} + {/delcall} + {/foreach} +{/deltemplate} \ No newline at end of file From 27b68665cb9a503f7d0ff8bc8dfb3d42c2f5b284 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Sat, 13 Jan 2018 05:57:54 +0100 Subject: [PATCH 07/25] Add range dropdown to ClayPagination --- packages/clay-pagination/package.json | 3 +- .../clay-pagination/src/ClayPagination.js | 3 +- .../clay-pagination/src/ClayPagination.soy | 48 +++++++++++++++++-- 3 files changed, 49 insertions(+), 5 deletions(-) diff --git a/packages/clay-pagination/package.json b/packages/clay-pagination/package.json index c1e1a91ae..0e288b32e 100644 --- a/packages/clay-pagination/package.json +++ b/packages/clay-pagination/package.json @@ -20,13 +20,14 @@ "build": "npm run soy && webpack", "compile": "babel -d lib/ src/ -s --ignore src/__tests__", "prepublish": "npm run soy && npm run compile", - "soy": "metalsoy --soyDeps '../../node_modules/clay-+(icon|link)/src/**/*.soy'" + "soy": "metalsoy --soyDeps '../../node_modules/clay-+(button|checkbox|dropdown|icon|link|radio)/src/**/*.soy'" }, "keywords": [ "clay", "metal" ], "dependencies": { + "clay-dropdown": "^1.0.0-alpha.12", "clay-link": "^1.0.0-alpha.12", "metal": "^2.14.0", "metal-component": "^2.14.0", diff --git a/packages/clay-pagination/src/ClayPagination.js b/packages/clay-pagination/src/ClayPagination.js index f165ba2c2..1bf601c0c 100644 --- a/packages/clay-pagination/src/ClayPagination.js +++ b/packages/clay-pagination/src/ClayPagination.js @@ -1,8 +1,9 @@ import 'clay-link'; +import {ClayDropdownBase} from 'clay-dropdown'; +import {Config} from 'metal-state'; import Component from 'metal-component'; import defineWebComponent from 'metal-web-component'; import Soy from 'metal-soy'; -import {Config} from 'metal-state'; import templates from './ClayPagination.soy.js'; diff --git a/packages/clay-pagination/src/ClayPagination.soy b/packages/clay-pagination/src/ClayPagination.soy index 3cb826637..06a8c91aa 100644 --- a/packages/clay-pagination/src/ClayPagination.soy +++ b/packages/clay-pagination/src/ClayPagination.soy @@ -56,7 +56,17 @@ {/call} {/for} {else} - ... +
    • + {call ClayDropdownBase.render} + {param contentRenderer: 'paginationdropdownitems' /} + {param elementClasses: 'page-item' /} + {param items: [['label':'2'], ['label': '' + ($currentPage == $totalPages ? $currentPage : $currentPage - 1)]] /} + {param label kind="html" } + ... + {/param} + {param triggerClasses: 'page-link' /} + {/call} +
      • {/if} {if $currentPage != 1 and $currentPage != $totalPages} @@ -80,7 +90,17 @@ {/call} {/for} {else} - ... +
    • + {call ClayDropdownBase.render} + {param contentRenderer: 'paginationdropdownitems' /} + {param elementClasses: 'page-item' /} + {param items: [['label':'' + ($currentPage + 2)], ['label': '' + $totalPages]] /} + {param label kind="html" } + ... + {/param} + {param triggerClasses: 'page-link' /} + {/call} +
      • {/if} {call .item} @@ -131,4 +151,26 @@ {param spritemap: $spritemap /} {/call} -{/template} \ No newline at end of file +{/template} + +/** + * Renders a dropdown list of items + */ +{deltemplate ClayDropdownBase.Items variant="'paginationdropdownitems'"} + {@param items: list} + {@param? handleItemClick_: any} + {@param? isInList: bool} + {@param? itemsIconAlignment: string} + {@param? spritemap: string} + + {let $endPage: $items[1].label /} + {let $initPage: $items[0].label /} + + {for $page in range($initPage * 1, $endPage * 1)} + {delcall ClayDropdownBase.Item variant="'item'"} + {param href: '' + $page /} + {param isInList: $isInList /} + {param label: '' + $page /} + {/delcall} + {/for} +{/deltemplate} \ No newline at end of file From 3688ab20c9fdc130fca60f3526e5c3e5038ac892 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Sat, 13 Jan 2018 06:12:35 +0100 Subject: [PATCH 08/25] Add base href to ClayPagination --- .../clay-pagination/src/ClayPagination.js | 9 ++++ .../clay-pagination/src/ClayPagination.soy | 49 ++++++++++++++----- 2 files changed, 45 insertions(+), 13 deletions(-) diff --git a/packages/clay-pagination/src/ClayPagination.js b/packages/clay-pagination/src/ClayPagination.js index 1bf601c0c..076e8ab42 100644 --- a/packages/clay-pagination/src/ClayPagination.js +++ b/packages/clay-pagination/src/ClayPagination.js @@ -18,6 +18,15 @@ class ClayPagination extends Component {} * @type {!Object} */ ClayPagination.STATE = { + /** + * Href to create each page complete href. + * @instance + * @memberof ClayPagination + * @type {?string|undefined} + * @default undefined + */ + baseHref: Config.string(), + /** * Current page number. * @instance diff --git a/packages/clay-pagination/src/ClayPagination.soy b/packages/clay-pagination/src/ClayPagination.soy index 06a8c91aa..6689dc341 100644 --- a/packages/clay-pagination/src/ClayPagination.soy +++ b/packages/clay-pagination/src/ClayPagination.soy @@ -7,6 +7,7 @@ {@param currentPage: number} {@param spritemap: string} {@param totalPages: number} + {@param? baseHref: string} {@param? elementClasses: string} {@param? id: string} @@ -25,8 +26,9 @@
        {call .item} {param ariaLabel: 'Previous Page' /} - {param href: $currentPage > 1 ? '#' + ($currentPage - 1) : null /} + {param baseHref: $baseHref /} {param icon: 'angle-left' /} + {param page: $currentPage > 1 ? ($currentPage - 1) : null /} {param spritemap: $spritemap /} {/call} @@ -34,8 +36,9 @@ {for $page in range(1, $totalPages+1)} {call .item} {param active: $page == $currentPage /} - {param href: '#' + $page/} + {param baseHref: $baseHref /} {param label: '' + $page/} + {param page: $page/} {/call} {/for} {else} @@ -44,15 +47,17 @@ {call .item} {param active: $currentPage == 1 /} - {param href: '#1' /} + {param baseHref: $baseHref /} {param label: '1' /} + {param page: 1 /} {/call} {if $fromOneToCurrent < 4} {for $page in range(2, $currentPage)} {call .item} - {param href: '#' + $page/} + {param baseHref: $baseHref /} {param label: '' + $page/} + {param page: $page/} {/call} {/for} {else} @@ -60,7 +65,7 @@ {call ClayDropdownBase.render} {param contentRenderer: 'paginationdropdownitems' /} {param elementClasses: 'page-item' /} - {param items: [['label':'2'], ['label': '' + ($currentPage == $totalPages ? $currentPage : $currentPage - 1)]] /} + {param items: [['label':'2'], ['label': '' + ($currentPage == $totalPages ? $currentPage : $currentPage - 1)], ['label': $baseHref]] /} {param label kind="html" } ... {/param} @@ -76,8 +81,9 @@ {for $page in range($currentRangeInit, $currentRangeEnd)} {call .item} {param active: $page == $currentPage /} - {param href: '#' + $page /} + {param baseHref: $baseHref /} {param label: '' + $page /} + {param page: $page /} {/call} {/for} {/if} @@ -85,8 +91,9 @@ {if $fromCurrentToLast <= 3} {for $page in range($currentPage + 1, $totalPages)} {call .item} - {param href: '#' + $page/} + {param baseHref: $baseHref /} {param label: '' + $page/} + {param page: $page/} {/call} {/for} {else} @@ -94,7 +101,7 @@ {call ClayDropdownBase.render} {param contentRenderer: 'paginationdropdownitems' /} {param elementClasses: 'page-item' /} - {param items: [['label':'' + ($currentPage + 2)], ['label': '' + $totalPages]] /} + {param items: [['label':'' + ($currentPage + 2)], ['label': '' + $totalPages], ['label': $baseHref]] /} {param label kind="html" } ... {/param} @@ -105,15 +112,17 @@ {call .item} {param active: $currentPage == $totalPages /} - {param href: '#' + $totalPages /} + {param baseHref: $baseHref /} {param label: '' + $totalPages /} + {param page: $totalPages /} {/call} {/if} {call .item} {param ariaLabel: 'Next Page' /} - {param href: $currentPage < $totalPages ? '#' + ($currentPage + 1) : null /} + {param baseHref: $baseHref /} {param icon: 'angle-right' /} + {param page: $currentPage < $totalPages ? ($currentPage + 1) : null /} {param spritemap: $spritemap /} {/call}
      @@ -125,9 +134,10 @@ {template .item} {@param? active: bool} {@param? ariaLabel: string} - {@param? href: string} + {@param? baseHref: string} {@param? icon: string} {@param? label: string} + {@param? page: number} {@param? spritemap: string} {let $classes kind="text"} @@ -136,11 +146,23 @@ {sp}active {/if} - {if not $href} + {if not $page} {sp}disabled {/if} {/let} + {let $href kind="text"} + {if $baseHref} + {$baseHref} + {else} + # + {/if} + + {if $page} + {$page} + {/if} + {/let} +
    • {call ClayLink.render} {param ariaLabel: $ariaLabel /} @@ -163,12 +185,13 @@ {@param? itemsIconAlignment: string} {@param? spritemap: string} + {let $baseHref: $items[2].label ?: '#' /} {let $endPage: $items[1].label /} {let $initPage: $items[0].label /} {for $page in range($initPage * 1, $endPage * 1)} {delcall ClayDropdownBase.Item variant="'item'"} - {param href: '' + $page /} + {param href: $baseHref + $page /} {param isInList: $isInList /} {param label: '' + $page /} {/delcall} From f7a5cb381e2b822c90267009994fd6e66b1d5faa Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Sat, 13 Jan 2018 15:18:41 +0100 Subject: [PATCH 09/25] Improve how to pass page data to dropdown in ClayPagination --- .../clay-pagination/src/ClayPagination.soy | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/packages/clay-pagination/src/ClayPagination.soy b/packages/clay-pagination/src/ClayPagination.soy index 6689dc341..815905b29 100644 --- a/packages/clay-pagination/src/ClayPagination.soy +++ b/packages/clay-pagination/src/ClayPagination.soy @@ -65,7 +65,12 @@ {call ClayDropdownBase.render} {param contentRenderer: 'paginationdropdownitems' /} {param elementClasses: 'page-item' /} - {param items: [['label':'2'], ['label': '' + ($currentPage == $totalPages ? $currentPage : $currentPage - 1)], ['label': $baseHref]] /} + {param items: [[ + 'initPage': 2, + 'endPage': $currentPage == $totalPages ? $currentPage : $currentPage - 1, + 'baseHref': $baseHref + ]] /} + {param label kind="html" } ... {/param} @@ -101,7 +106,12 @@ {call ClayDropdownBase.render} {param contentRenderer: 'paginationdropdownitems' /} {param elementClasses: 'page-item' /} - {param items: [['label':'' + ($currentPage + 2)], ['label': '' + $totalPages], ['label': $baseHref]] /} + {param items: [[ + 'initPage': ($currentPage + 2), + 'endPage': $totalPages, + 'baseHref': $baseHref + ]] /} + {param label kind="html" } ... {/param} @@ -185,9 +195,9 @@ {@param? itemsIconAlignment: string} {@param? spritemap: string} - {let $baseHref: $items[2].label ?: '#' /} - {let $endPage: $items[1].label /} - {let $initPage: $items[0].label /} + {let $baseHref: $items[0].baseHref ?: '#' /} + {let $endPage: $items[0].endPage /} + {let $initPage: $items[0].initPage /} {for $page in range($initPage * 1, $endPage * 1)} {delcall ClayDropdownBase.Item variant="'item'"} From e0d2e77921d37de433482bd1f29ffed931c532f5 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Sat, 13 Jan 2018 15:28:19 +0100 Subject: [PATCH 10/25] Show correct pages when current page is the first or the last one in ClayPagination --- packages/clay-pagination/src/ClayPagination.soy | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/clay-pagination/src/ClayPagination.soy b/packages/clay-pagination/src/ClayPagination.soy index 815905b29..6b10d0ec9 100644 --- a/packages/clay-pagination/src/ClayPagination.soy +++ b/packages/clay-pagination/src/ClayPagination.soy @@ -53,7 +53,7 @@ {/call} {if $fromOneToCurrent < 4} - {for $page in range(2, $currentPage)} + {for $page in range(2, $currentPage == 1 ? 4 : $currentPage)} {call .item} {param baseHref: $baseHref /} {param label: '' + $page/} @@ -120,12 +120,14 @@
      • {/if} - {call .item} - {param active: $currentPage == $totalPages /} - {param baseHref: $baseHref /} - {param label: '' + $totalPages /} - {param page: $totalPages /} - {/call} + {for $page in range($currentPage == $totalPages ? $totalPages -3 : $totalPages, $totalPages + 1)} + {call .item} + {param active: $page == $currentPage /} + {param baseHref: $baseHref /} + {param label: '' + $page/} + {param page: $page/} + {/call} + {/for} {/if} {call .item} From fcaa822583e666795a48f81ff162b46b5f34c324 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Sat, 13 Jan 2018 15:28:44 +0100 Subject: [PATCH 11/25] Update ClayPagination demo --- packages/clay-pagination/demos/a11y.html | 90 +++++++++++++++++++++-- packages/clay-pagination/demos/index.html | 90 +++++++++++++++++++++-- 2 files changed, 168 insertions(+), 12 deletions(-) diff --git a/packages/clay-pagination/demos/a11y.html b/packages/clay-pagination/demos/a11y.html index b44ce6dae..3e236808c 100644 --- a/packages/clay-pagination/demos/a11y.html +++ b/packages/clay-pagination/demos/a11y.html @@ -20,16 +20,94 @@ -

      - ClayPagination -

      +
      +

      ClayPagination

      +
      -
      +
      +
      +

      1 page

      +
      +
      +
      - diff --git a/packages/clay-pagination/demos/index.html b/packages/clay-pagination/demos/index.html index b44ce6dae..3e236808c 100644 --- a/packages/clay-pagination/demos/index.html +++ b/packages/clay-pagination/demos/index.html @@ -20,16 +20,94 @@ -

      - ClayPagination -

      +
      +

      ClayPagination

      +
      -
      +
      +
      +

      1 page

      +
      +
      +
      - From 678fcf4184065c27fa9006935ce573cd01bbcc93 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Sat, 13 Jan 2018 15:48:44 +0100 Subject: [PATCH 12/25] Create ClayPagination tests --- .../src/__tests__/ClayPagination.js | 45 +- .../__snapshots__/ClayPagination.js.snap | 5649 +++++++++++++++++ 2 files changed, 5693 insertions(+), 1 deletion(-) diff --git a/packages/clay-pagination/src/__tests__/ClayPagination.js b/packages/clay-pagination/src/__tests__/ClayPagination.js index 42c5f045a..127f77bf1 100644 --- a/packages/clay-pagination/src/__tests__/ClayPagination.js +++ b/packages/clay-pagination/src/__tests__/ClayPagination.js @@ -1,5 +1,7 @@ import ClayPagination from '../ClayPagination'; +const spritemap = '../node_modules/lexicon-ux/build/images/icons/icons.svg'; + let component; describe('ClayPagination', function() { @@ -10,14 +12,21 @@ describe('ClayPagination', function() { }); it('should render the default markup', () => { - component = new ClayPagination(); + component = new ClayPagination({ + currentPage: 1, + spritemap: spritemap, + totalPages: 10, + }); expect(component).toMatchSnapshot(); }); it('should render a ClayPagination with classes', () => { component = new ClayPagination({ + currentPage: 1, elementClasses: 'my-custom-class', + spritemap: spritemap, + totalPages: 10, }); expect(component).toMatchSnapshot(); @@ -25,9 +34,43 @@ describe('ClayPagination', function() { it('should render a ClayPagination with id', () => { component = new ClayPagination({ + currentPage: 1, id: 'myId', + spritemap: spritemap, + totalPages: 10, }); expect(component).toMatchSnapshot(); }); + + for (let totalPages = 1; totalPages <= 10; totalPages++) { + for (let currentPage = 1; currentPage <= totalPages; currentPage++) { + it(`should render a ClayPagination with ${ + totalPages + } total pages and page ${currentPage} as current page`, () => { + component = new ClayPagination({ + currentPage: currentPage, + spritemap: spritemap, + totalPages: totalPages, + }); + expect(component).toMatchSnapshot(); + }); + } + } + + for (let totalPages = 1; totalPages <= 10; totalPages++) { + for (let currentPage = 1; currentPage <= totalPages; currentPage++) { + it(`should render a ClayPagination with baseHref, ${ + totalPages + } total pages and page ${currentPage} as current page`, () => { + component = new ClayPagination({ + baseHref: '#mySite?curPage=', + currentPage: currentPage, + spritemap: spritemap, + totalPages: totalPages, + }); + expect(component).toMatchSnapshot(); + }); + } + } }); diff --git a/packages/clay-pagination/src/__tests__/__snapshots__/ClayPagination.js.snap b/packages/clay-pagination/src/__tests__/__snapshots__/ClayPagination.js.snap index d1e5c85a7..25442df7d 100644 --- a/packages/clay-pagination/src/__tests__/__snapshots__/ClayPagination.js.snap +++ b/packages/clay-pagination/src/__tests__/__snapshots__/ClayPagination.js.snap @@ -1 +1,5650 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ClayPagination should render a ClayPagination with 1 total pages and page 1 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 2 total pages and page 1 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 2 total pages and page 2 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 3 total pages and page 1 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 3 total pages and page 2 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 3 total pages and page 3 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 4 total pages and page 1 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 4 total pages and page 2 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 4 total pages and page 3 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 4 total pages and page 4 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 5 total pages and page 1 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 5 total pages and page 2 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 5 total pages and page 3 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 5 total pages and page 4 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 5 total pages and page 5 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 6 total pages and page 1 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 6 total pages and page 2 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 6 total pages and page 3 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 6 total pages and page 4 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 6 total pages and page 5 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 6 total pages and page 6 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 7 total pages and page 1 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 7 total pages and page 2 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 7 total pages and page 3 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 7 total pages and page 4 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 7 total pages and page 5 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 7 total pages and page 6 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 7 total pages and page 7 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 8 total pages and page 1 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 8 total pages and page 2 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 8 total pages and page 3 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 8 total pages and page 4 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 8 total pages and page 5 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 8 total pages and page 6 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 8 total pages and page 7 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 8 total pages and page 8 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 9 total pages and page 1 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 9 total pages and page 2 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 9 total pages and page 3 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 9 total pages and page 4 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 9 total pages and page 5 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 9 total pages and page 6 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 9 total pages and page 7 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 9 total pages and page 8 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 9 total pages and page 9 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 10 total pages and page 1 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 10 total pages and page 2 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 10 total pages and page 3 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 10 total pages and page 4 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 10 total pages and page 5 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 10 total pages and page 6 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 10 total pages and page 7 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 10 total pages and page 8 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 10 total pages and page 9 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with 10 total pages and page 10 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 1 total pages and page 1 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 2 total pages and page 1 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 2 total pages and page 2 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 3 total pages and page 1 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 3 total pages and page 2 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 3 total pages and page 3 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 4 total pages and page 1 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 4 total pages and page 2 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 4 total pages and page 3 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 4 total pages and page 4 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 5 total pages and page 1 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 5 total pages and page 2 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 5 total pages and page 3 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 5 total pages and page 4 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 5 total pages and page 5 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 6 total pages and page 1 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 6 total pages and page 2 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 6 total pages and page 3 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 6 total pages and page 4 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 6 total pages and page 5 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 6 total pages and page 6 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 7 total pages and page 1 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 7 total pages and page 2 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 7 total pages and page 3 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 7 total pages and page 4 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 7 total pages and page 5 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 7 total pages and page 6 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 7 total pages and page 7 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 8 total pages and page 1 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 8 total pages and page 2 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 8 total pages and page 3 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 8 total pages and page 4 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 8 total pages and page 5 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 8 total pages and page 6 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 8 total pages and page 7 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 8 total pages and page 8 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 9 total pages and page 1 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 9 total pages and page 2 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 9 total pages and page 3 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 9 total pages and page 4 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 9 total pages and page 5 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 9 total pages and page 6 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 9 total pages and page 7 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 9 total pages and page 8 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 9 total pages and page 9 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 10 total pages and page 1 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 10 total pages and page 2 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 10 total pages and page 3 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 10 total pages and page 4 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 10 total pages and page 5 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 10 total pages and page 6 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 10 total pages and page 7 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 10 total pages and page 8 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 10 total pages and page 9 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with baseHref, 10 total pages and page 10 as current page 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with classes 1`] = ` + +`; + +exports[`ClayPagination should render a ClayPagination with id 1`] = ` + +`; + +exports[`ClayPagination should render the default markup 1`] = ` + +`; From 687ad947fa208aa6c9ada261c9f2cdd32a957123 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Sat, 13 Jan 2018 15:50:10 +0100 Subject: [PATCH 13/25] SF --- packages/clay-pagination/src/ClayPagination.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/clay-pagination/src/ClayPagination.js b/packages/clay-pagination/src/ClayPagination.js index 076e8ab42..124a94700 100644 --- a/packages/clay-pagination/src/ClayPagination.js +++ b/packages/clay-pagination/src/ClayPagination.js @@ -1,5 +1,6 @@ import 'clay-link'; -import {ClayDropdownBase} from 'clay-dropdown'; +// eslint-disable-next-line +import { ClayDropdownBase } from 'clay-dropdown'; import {Config} from 'metal-state'; import Component from 'metal-component'; import defineWebComponent from 'metal-web-component'; From 90128cf5bcb3ae4b79120bfd29706bb48808cb89 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Sat, 13 Jan 2018 15:55:13 +0100 Subject: [PATCH 14/25] Extract range dropdon to another template in ClayPagination --- .../clay-pagination/src/ClayPagination.soy | 70 ++++++++++--------- 1 file changed, 37 insertions(+), 33 deletions(-) diff --git a/packages/clay-pagination/src/ClayPagination.soy b/packages/clay-pagination/src/ClayPagination.soy index 6b10d0ec9..1bb6c0d74 100644 --- a/packages/clay-pagination/src/ClayPagination.soy +++ b/packages/clay-pagination/src/ClayPagination.soy @@ -61,22 +61,11 @@ {/call} {/for} {else} -
    • - {call ClayDropdownBase.render} - {param contentRenderer: 'paginationdropdownitems' /} - {param elementClasses: 'page-item' /} - {param items: [[ - 'initPage': 2, - 'endPage': $currentPage == $totalPages ? $currentPage : $currentPage - 1, - 'baseHref': $baseHref - ]] /} - - {param label kind="html" } - ... - {/param} - {param triggerClasses: 'page-link' /} - {/call} -
      • + {call .range} + {param baseHref: $baseHref /} + {param endPage: $currentPage == $totalPages ? $currentPage : $currentPage - 1 /} + {param initPage: 2 /} + {/call} {/if} {if $currentPage != 1 and $currentPage != $totalPages} @@ -102,22 +91,11 @@ {/call} {/for} {else} -
    • - {call ClayDropdownBase.render} - {param contentRenderer: 'paginationdropdownitems' /} - {param elementClasses: 'page-item' /} - {param items: [[ - 'initPage': ($currentPage + 2), - 'endPage': $totalPages, - 'baseHref': $baseHref - ]] /} - - {param label kind="html" } - ... - {/param} - {param triggerClasses: 'page-link' /} - {/call} -
      • + {call .range} + {param baseHref: $baseHref /} + {param endPage: $totalPages /} + {param initPage: $currentPage + 2 /} + {/call} {/if} {for $page in range($currentPage == $totalPages ? $totalPages -3 : $totalPages, $totalPages + 1)} @@ -187,6 +165,32 @@ {/template} +/** + * Renders a page range dropdown + */ +{template .range} + {@param endPage: number} + {@param initPage: number} + {@param? baseHref: string} + +
    • + {call ClayDropdownBase.render} + {param contentRenderer: 'paginationdropdownitems' /} + {param elementClasses: 'page-item' /} + {param items: [[ + 'initPage': $initPage, + 'endPage': $endPage, + 'baseHref': $baseHref ?: '#' + ]] /} + + {param label kind="html" } + ... + {/param} + {param triggerClasses: 'page-link' /} + {/call} +
      • +{/template} + /** * Renders a dropdown list of items */ @@ -197,7 +201,7 @@ {@param? itemsIconAlignment: string} {@param? spritemap: string} - {let $baseHref: $items[0].baseHref ?: '#' /} + {let $baseHref: $items[0].baseHref /} {let $endPage: $items[0].endPage /} {let $initPage: $items[0].initPage /} From 5e69d4c677c3d6bea490e6b5f064e4b638cc6c6d Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Sat, 13 Jan 2018 15:59:56 +0100 Subject: [PATCH 15/25] Create base of ClayPaginationBar --- packages/clay-pagination-bar/LICENSE.md | 29 +++++++++++ packages/clay-pagination-bar/README.md | 26 ++++++++++ packages/clay-pagination-bar/demos/a11y.html | 35 +++++++++++++ packages/clay-pagination-bar/demos/index.html | 35 +++++++++++++ packages/clay-pagination-bar/package.json | 51 +++++++++++++++++++ .../src/ClayPaginationBar.js | 43 ++++++++++++++++ .../src/ClayPaginationBar.soy | 23 +++++++++ .../src/__tests__/ClayPaginationBar.js | 33 ++++++++++++ .../__snapshots__/ClayPaginationBar.js.snap | 1 + .../clay-pagination-bar/webpack.config.js | 32 ++++++++++++ 10 files changed, 308 insertions(+) create mode 100644 packages/clay-pagination-bar/LICENSE.md create mode 100644 packages/clay-pagination-bar/README.md create mode 100644 packages/clay-pagination-bar/demos/a11y.html create mode 100644 packages/clay-pagination-bar/demos/index.html create mode 100644 packages/clay-pagination-bar/package.json create mode 100644 packages/clay-pagination-bar/src/ClayPaginationBar.js create mode 100644 packages/clay-pagination-bar/src/ClayPaginationBar.soy create mode 100644 packages/clay-pagination-bar/src/__tests__/ClayPaginationBar.js create mode 100644 packages/clay-pagination-bar/src/__tests__/__snapshots__/ClayPaginationBar.js.snap create mode 100644 packages/clay-pagination-bar/webpack.config.js diff --git a/packages/clay-pagination-bar/LICENSE.md b/packages/clay-pagination-bar/LICENSE.md new file mode 100644 index 000000000..70f93e946 --- /dev/null +++ b/packages/clay-pagination-bar/LICENSE.md @@ -0,0 +1,29 @@ +# Software License Agreement (BSD License) + +Copyright (c) 2014, Liferay Inc. +All rights reserved. + +Redistribution and use of this software in source and binary forms, with or without modification, are +permitted provided that the following conditions are met: + +* Redistributions of source code must retain the above + copyright notice, this list of conditions and the + following disclaimer. + +* Redistributions in binary form must reproduce the above + copyright notice, this list of conditions and the + following disclaimer in the documentation and/or other + materials provided with the distribution. + +* The name of Liferay Inc. may not be used to endorse or promote products + derived from this software without specific prior + written permission of Liferay Inc. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED +WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A +PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR +ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS +INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR +TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF +ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. diff --git a/packages/clay-pagination-bar/README.md b/packages/clay-pagination-bar/README.md new file mode 100644 index 000000000..39f329686 --- /dev/null +++ b/packages/clay-pagination-bar/README.md @@ -0,0 +1,26 @@ +# clay-pagination-bar + +Clay PaginationBar Component + +## Setup + +1. Install NodeJS >= v0.12.0 and NPM >= v3.0.0, if you don't have it yet. You +can find it [here](https://nodejs.org). + +2. Install local dependencies: + + ``` + npm install + ``` + +3. Build the code: + + ``` + npm run build + ``` + +4. Open the demo at demos/index.html on your browser. + +## Contribute + +We'd love to get contributions from you! Please, check our [Contributing Guidelines](CONTRIBUTING.md) to see how you can help us improve. diff --git a/packages/clay-pagination-bar/demos/a11y.html b/packages/clay-pagination-bar/demos/a11y.html new file mode 100644 index 000000000..be2e8a76a --- /dev/null +++ b/packages/clay-pagination-bar/demos/a11y.html @@ -0,0 +1,35 @@ + + + + + + Demo: ClayPaginationBar + + + + + + + + +

      + ClayPaginationBar +

      + +
      + + + + diff --git a/packages/clay-pagination-bar/demos/index.html b/packages/clay-pagination-bar/demos/index.html new file mode 100644 index 000000000..be2e8a76a --- /dev/null +++ b/packages/clay-pagination-bar/demos/index.html @@ -0,0 +1,35 @@ + + + + + + Demo: ClayPaginationBar + + + + + + + + +

      + ClayPaginationBar +

      + +
      + + + + diff --git a/packages/clay-pagination-bar/package.json b/packages/clay-pagination-bar/package.json new file mode 100644 index 000000000..ecf700af3 --- /dev/null +++ b/packages/clay-pagination-bar/package.json @@ -0,0 +1,51 @@ +{ + "name": "clay-pagination-bar", + "version": "1.0.0-alpha.8", + "description": "Metal ClayPaginationBar component", + "license": "BSD", + "repository": "https://github.com/metal/metal-clay-components/tree/master/packages/clay-pagination-bar", + "engines": { + "node": ">=0.12.0", + "npm": ">=3.0.0" + }, + "main": "lib/ClayPaginationBar.js", + "esnext:main": "src/ClayPaginationBar.js", + "jsnext:main": "src/ClayPaginationBar.js", + "files": [ + "lib", + "src", + "test" + ], + "scripts": { + "build": "npm run soy && webpack", + "compile": "babel -d lib/ src/ -s --ignore src/__tests__", + "prepublish": "npm run soy && npm run compile", + "soy": "metalsoy" + }, + "keywords": [ + "clay", + "metal" + ], + "dependencies": { + "metal": "^2.14.0", + "metal-component": "^2.14.0", + "metal-soy": "^2.14.0", + "metal-state": "^2.15.0", + "metal-web-component": "^2.14.0" + }, + "devDependencies": { + "babel-cli": "^6.24.1", + "babel-core": "^6.25.0", + "babel-loader": "^7.0.0", + "babel-plugin-transform-node-env-inline": "^0.1.1", + "babel-preset-env": "^1.6.0", + "browserslist-config-clay-components": "^1.0.0-alpha.2", + "clay": "^2.0.0-beta.4", + "metal-dom": "^2.13.2", + "metal-tools-soy": "^4.2.1", + "webpack": "^3.0.0" + }, + "browserslist": [ + "extends browserslist-config-clay-components" + ] +} diff --git a/packages/clay-pagination-bar/src/ClayPaginationBar.js b/packages/clay-pagination-bar/src/ClayPaginationBar.js new file mode 100644 index 000000000..b179e539d --- /dev/null +++ b/packages/clay-pagination-bar/src/ClayPaginationBar.js @@ -0,0 +1,43 @@ +import Component from 'metal-component'; +import defineWebComponent from 'metal-web-component'; +import Soy from 'metal-soy'; +import {Config} from 'metal-state'; + +import templates from './ClayPaginationBar.soy.js'; + +/** + * Metal ClayPaginationBar component. + */ +class ClayPaginationBar extends Component {} + +/** + * State definition. + * @static + * @type {!Object} + */ +ClayPaginationBar.STATE = { + /** + * CSS classes to be applied to the element. + * @instance + * @memberof ClayPaginationBar + * @type {?string|undefined} + * @default undefined + */ + elementClasses: Config.string(), + + /** + * Id to be applied to the element. + * @instance + * @memberof ClayPaginationBar + * @type {?string|undefined} + * @default undefined + */ + id: Config.string(), +}; + +defineWebComponent('clay-pagination-bar', ClayPaginationBar); + +Soy.register(ClayPaginationBar, templates); + +export {ClayPaginationBar}; +export default ClayPaginationBar; diff --git a/packages/clay-pagination-bar/src/ClayPaginationBar.soy b/packages/clay-pagination-bar/src/ClayPaginationBar.soy new file mode 100644 index 000000000..c73f1486a --- /dev/null +++ b/packages/clay-pagination-bar/src/ClayPaginationBar.soy @@ -0,0 +1,23 @@ +{namespace ClayPaginationBar} + +/** + * This renders the component's whole content. + */ +{template .render} + {@param? elementClasses: string} + {@param? id: string} + + {let $attributes kind="attributes"} + class="clay-pagination-bar + {if $elementClasses} + {sp}{$elementClasses} + {/if} + " + + {if $id} + id="{$id}" + {/if} + {/let} + +
      Hello World
      +{/template} \ No newline at end of file diff --git a/packages/clay-pagination-bar/src/__tests__/ClayPaginationBar.js b/packages/clay-pagination-bar/src/__tests__/ClayPaginationBar.js new file mode 100644 index 000000000..e5810af0e --- /dev/null +++ b/packages/clay-pagination-bar/src/__tests__/ClayPaginationBar.js @@ -0,0 +1,33 @@ +import ClayPaginationBar from '../ClayPaginationBar'; + +let component; + +describe('ClayPaginationBar', function() { + afterEach(() => { + if (component) { + component.dispose(); + } + }); + + it('should render the default markup', () => { + component = new ClayPaginationBar(); + + expect(component).toMatchSnapshot(); + }); + + it('should render a ClayPaginationBar with classes', () => { + component = new ClayPaginationBar({ + elementClasses: 'my-custom-class', + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render a ClayPaginationBar with id', () => { + component = new ClayPaginationBar({ + id: 'myId', + }); + + expect(component).toMatchSnapshot(); + }); +}); diff --git a/packages/clay-pagination-bar/src/__tests__/__snapshots__/ClayPaginationBar.js.snap b/packages/clay-pagination-bar/src/__tests__/__snapshots__/ClayPaginationBar.js.snap new file mode 100644 index 000000000..d1e5c85a7 --- /dev/null +++ b/packages/clay-pagination-bar/src/__tests__/__snapshots__/ClayPaginationBar.js.snap @@ -0,0 +1 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP diff --git a/packages/clay-pagination-bar/webpack.config.js b/packages/clay-pagination-bar/webpack.config.js new file mode 100644 index 000000000..07832457a --- /dev/null +++ b/packages/clay-pagination-bar/webpack.config.js @@ -0,0 +1,32 @@ +const path = require('path'); +const webpack = require('webpack'); + +module.exports = { + entry: './src/ClayPaginationBar.js', + module: { + rules: [ + { + test: /\.js$/, + exclude: /(node_modules|bower_components)/, + use: { + loader: 'babel-loader', + options: { + compact: false, + presets: ['babel-preset-env'], + plugins: ['babel-plugin-transform-node-env-inline'], + }, + }, + }, + ], + }, + devtool: 'cheap-module-source-map', + output: { + library: 'metal', + libraryTarget: 'this', + filename: './build/globals/clay-pagination-bar.js', + }, + plugins: [new webpack.optimize.ModuleConcatenationPlugin()], + resolve: { + mainFields: ['esnext:main', 'main'], + }, +}; From c80fc7d57d1031b457fb9aea867f34be1c26434a Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Sat, 13 Jan 2018 16:19:59 +0100 Subject: [PATCH 16/25] Render ClayPagination in ClayPaginationBar --- packages/clay-pagination-bar/package.json | 3 +- .../src/ClayPaginationBar.js | 37 +++++++++++++++++++ .../src/ClayPaginationBar.soy | 15 +++++++- 3 files changed, 52 insertions(+), 3 deletions(-) diff --git a/packages/clay-pagination-bar/package.json b/packages/clay-pagination-bar/package.json index ecf700af3..414fc978b 100644 --- a/packages/clay-pagination-bar/package.json +++ b/packages/clay-pagination-bar/package.json @@ -20,13 +20,14 @@ "build": "npm run soy && webpack", "compile": "babel -d lib/ src/ -s --ignore src/__tests__", "prepublish": "npm run soy && npm run compile", - "soy": "metalsoy" + "soy": "metalsoy --soyDeps '../../node_modules/clay-+(button|checkbox|dropdown|icon|link|pagination|radio)/src/**/*.soy'" }, "keywords": [ "clay", "metal" ], "dependencies": { + "clay-pagination": "^1.0.0-alpha.14", "metal": "^2.14.0", "metal-component": "^2.14.0", "metal-soy": "^2.14.0", diff --git a/packages/clay-pagination-bar/src/ClayPaginationBar.js b/packages/clay-pagination-bar/src/ClayPaginationBar.js index b179e539d..89fad6e22 100644 --- a/packages/clay-pagination-bar/src/ClayPaginationBar.js +++ b/packages/clay-pagination-bar/src/ClayPaginationBar.js @@ -1,3 +1,4 @@ +import 'clay-pagination'; import Component from 'metal-component'; import defineWebComponent from 'metal-web-component'; import Soy from 'metal-soy'; @@ -16,6 +17,24 @@ class ClayPaginationBar extends Component {} * @type {!Object} */ ClayPaginationBar.STATE = { + /** + * Href to create each pagination page complete href. + * @instance + * @memberof ClayPaginationBar + * @type {?string|undefined} + * @default undefined + */ + baseHref: Config.string(), + + /** + * Current pagination page number. + * @instance + * @memberof ClayPaginationBar + * @type {!number} + * @default undefined + */ + currentPage: Config.number().required(), + /** * CSS classes to be applied to the element. * @instance @@ -33,6 +52,24 @@ ClayPaginationBar.STATE = { * @default undefined */ id: Config.string(), + + /** + * The path to the SVG spritemap file containing the icons. + * @instance + * @memberof ClayPaginationBar + * @type {!string} + * @default undefined + */ + spritemap: Config.string().required(), + + /** + * Total number of pages to show in the pagination. + * @instance + * @memberof ClayPaginationBar + * @type {!number} + * @default undefined + */ + totalPages: Config.number().required(), }; defineWebComponent('clay-pagination-bar', ClayPaginationBar); diff --git a/packages/clay-pagination-bar/src/ClayPaginationBar.soy b/packages/clay-pagination-bar/src/ClayPaginationBar.soy index c73f1486a..7e94fe3f6 100644 --- a/packages/clay-pagination-bar/src/ClayPaginationBar.soy +++ b/packages/clay-pagination-bar/src/ClayPaginationBar.soy @@ -4,11 +4,15 @@ * This renders the component's whole content. */ {template .render} + {@param currentPage: number} + {@param spritemap: string} + {@param totalPages: number} + {@param? baseHref: string} {@param? elementClasses: string} {@param? id: string} {let $attributes kind="attributes"} - class="clay-pagination-bar + class="clay-pagination-bar pagination-bar {if $elementClasses} {sp}{$elementClasses} {/if} @@ -19,5 +23,12 @@ {/if} {/let} -
      Hello World
      +
      + {call ClayPagination.render} + {param baseHref: $baseHref /} + {param currentPage: $currentPage /} + {param spritemap: $spritemap /} + {param totalPages: $totalPages /} + {/call} +
      {/template} \ No newline at end of file From 6292e96c692e3204df6a9f2cc449bcdbc2b33de8 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Sat, 13 Jan 2018 16:47:33 +0100 Subject: [PATCH 17/25] Render number entries selector dropdown in ClayPaginationBar --- packages/clay-pagination-bar/package.json | 1 + .../src/ClayPaginationBar.js | 27 ++++++++++++++++++- .../src/ClayPaginationBar.soy | 16 +++++++++++ 3 files changed, 43 insertions(+), 1 deletion(-) diff --git a/packages/clay-pagination-bar/package.json b/packages/clay-pagination-bar/package.json index 414fc978b..8d766005c 100644 --- a/packages/clay-pagination-bar/package.json +++ b/packages/clay-pagination-bar/package.json @@ -27,6 +27,7 @@ "metal" ], "dependencies": { + "clay-dropdown": "^1.0.0-alpha.12", "clay-pagination": "^1.0.0-alpha.14", "metal": "^2.14.0", "metal-component": "^2.14.0", diff --git a/packages/clay-pagination-bar/src/ClayPaginationBar.js b/packages/clay-pagination-bar/src/ClayPaginationBar.js index 89fad6e22..f2f21f789 100644 --- a/packages/clay-pagination-bar/src/ClayPaginationBar.js +++ b/packages/clay-pagination-bar/src/ClayPaginationBar.js @@ -1,8 +1,9 @@ import 'clay-pagination'; +import {ClayDropdown} from 'clay-dropdown'; +import {Config} from 'metal-state'; import Component from 'metal-component'; import defineWebComponent from 'metal-web-component'; import Soy from 'metal-soy'; -import {Config} from 'metal-state'; import templates from './ClayPaginationBar.soy.js'; @@ -44,6 +45,21 @@ ClayPaginationBar.STATE = { */ elementClasses: Config.string(), + /** + * List of available number of entries. + * @instance + * @memberof ClayPaginationBar + * @type {!array} + * @default undefined + */ + entries: Config.arrayOf( + Config.shapeOf({ + active: Config.bool(), + href: Config.string().required(), + label: Config.string().required(), + }) + ).required(), + /** * Id to be applied to the element. * @instance @@ -53,6 +69,15 @@ ClayPaginationBar.STATE = { */ id: Config.string(), + /** + * Entries index that points to selected entry. + * @instance + * @memberof ClayPaginationBar + * @type {?int} + * @default 0 + */ + selectedEntry: Config.number().value(0), + /** * The path to the SVG spritemap file containing the icons. * @instance diff --git a/packages/clay-pagination-bar/src/ClayPaginationBar.soy b/packages/clay-pagination-bar/src/ClayPaginationBar.soy index 7e94fe3f6..8cce63a36 100644 --- a/packages/clay-pagination-bar/src/ClayPaginationBar.soy +++ b/packages/clay-pagination-bar/src/ClayPaginationBar.soy @@ -5,11 +5,16 @@ */ {template .render} {@param currentPage: number} + {@param entries: list<[ + href: string, + label: string + ]>} {@param spritemap: string} {@param totalPages: number} {@param? baseHref: string} {@param? elementClasses: string} {@param? id: string} + {@param? selectedEntry: int} {let $attributes kind="attributes"} class="clay-pagination-bar pagination-bar @@ -24,6 +29,17 @@ {/let}
      + {if length($entries) > 0} + {let $selectedEntryItem: $selectedEntry ? $entries[$selectedEntry] : $entries[0] /} + + {call ClayDropdown.render} + {param elementClasses: 'pagination-items-per-page' /} + {param items: $entries /} + {param label: $selectedEntryItem.label + ' Items' /} + {param spritemap: $spritemap /} + {/call} + {/if} + {call ClayPagination.render} {param baseHref: $baseHref /} {param currentPage: $currentPage /} From 4ad722d931703a59012e78b582868100b85d1290 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Sat, 13 Jan 2018 16:55:12 +0100 Subject: [PATCH 18/25] Render showing entries information in ClayPaginationBar --- packages/clay-pagination-bar/src/ClayPaginationBar.js | 9 +++++++++ packages/clay-pagination-bar/src/ClayPaginationBar.soy | 5 +++++ 2 files changed, 14 insertions(+) diff --git a/packages/clay-pagination-bar/src/ClayPaginationBar.js b/packages/clay-pagination-bar/src/ClayPaginationBar.js index f2f21f789..2368b8840 100644 --- a/packages/clay-pagination-bar/src/ClayPaginationBar.js +++ b/packages/clay-pagination-bar/src/ClayPaginationBar.js @@ -87,6 +87,15 @@ ClayPaginationBar.STATE = { */ spritemap: Config.string().required(), + /** + * Total number of entries. + * @instance + * @memberof ClayPaginationBar + * @type {!number} + * @default undefined + */ + totalEntries: Config.number().required(), + /** * Total number of pages to show in the pagination. * @instance diff --git a/packages/clay-pagination-bar/src/ClayPaginationBar.soy b/packages/clay-pagination-bar/src/ClayPaginationBar.soy index 8cce63a36..374696b31 100644 --- a/packages/clay-pagination-bar/src/ClayPaginationBar.soy +++ b/packages/clay-pagination-bar/src/ClayPaginationBar.soy @@ -10,6 +10,7 @@ label: string ]>} {@param spritemap: string} + {@param totalEntries: number} {@param totalPages: number} {@param? baseHref: string} {@param? elementClasses: string} @@ -38,6 +39,10 @@ {param label: $selectedEntryItem.label + ' Items' /} {param spritemap: $spritemap /} {/call} + +
      + Showing {($currentPage - 1) * ($selectedEntryItem.label * 1) + 1} to {$currentPage * $selectedEntryItem.label} of {$totalEntries} entries. +
      {/if} {call ClayPagination.render} From 50d79a65560ba0acb90fb7ac3f348e3c23fd221c Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Sat, 13 Jan 2018 17:23:33 +0100 Subject: [PATCH 19/25] Calculate totalPages instead recieving it in ClayPaginationBar --- .../src/ClayPaginationBar.js | 9 ------ .../src/ClayPaginationBar.soy | 29 ++++++++++--------- 2 files changed, 16 insertions(+), 22 deletions(-) diff --git a/packages/clay-pagination-bar/src/ClayPaginationBar.js b/packages/clay-pagination-bar/src/ClayPaginationBar.js index 2368b8840..d19740081 100644 --- a/packages/clay-pagination-bar/src/ClayPaginationBar.js +++ b/packages/clay-pagination-bar/src/ClayPaginationBar.js @@ -95,15 +95,6 @@ ClayPaginationBar.STATE = { * @default undefined */ totalEntries: Config.number().required(), - - /** - * Total number of pages to show in the pagination. - * @instance - * @memberof ClayPaginationBar - * @type {!number} - * @default undefined - */ - totalPages: Config.number().required(), }; defineWebComponent('clay-pagination-bar', ClayPaginationBar); diff --git a/packages/clay-pagination-bar/src/ClayPaginationBar.soy b/packages/clay-pagination-bar/src/ClayPaginationBar.soy index 374696b31..23f53fa5d 100644 --- a/packages/clay-pagination-bar/src/ClayPaginationBar.soy +++ b/packages/clay-pagination-bar/src/ClayPaginationBar.soy @@ -11,7 +11,6 @@ ]>} {@param spritemap: string} {@param totalEntries: number} - {@param totalPages: number} {@param? baseHref: string} {@param? elementClasses: string} {@param? id: string} @@ -30,20 +29,24 @@ {/let}
      - {if length($entries) > 0} - {let $selectedEntryItem: $selectedEntry ? $entries[$selectedEntry] : $entries[0] /} + {let $selectedEntryItem: $selectedEntry ? $entries[$selectedEntry] : $entries[0] /} - {call ClayDropdown.render} - {param elementClasses: 'pagination-items-per-page' /} - {param items: $entries /} - {param label: $selectedEntryItem.label + ' Items' /} - {param spritemap: $spritemap /} - {/call} + {call ClayDropdown.render} + {param elementClasses: 'pagination-items-per-page' /} + {param items: $entries /} + {param label: $selectedEntryItem.label + ' Items' /} + {param spritemap: $spritemap /} + {/call} -
      - Showing {($currentPage - 1) * ($selectedEntryItem.label * 1) + 1} to {$currentPage * $selectedEntryItem.label} of {$totalEntries} entries. -
      - {/if} +
      + Showing + {sp}{($currentPage - 1) * ($selectedEntryItem.label * 1) + 1} + {sp}to + {sp}{$currentPage * $selectedEntryItem.label < $totalEntries ? $currentPage * $selectedEntryItem.label : $totalEntries} + {sp}of {$totalEntries} entries. +
      + + {let $totalPages: $totalEntries / ($selectedEntryItem.label * 1) /} {call ClayPagination.render} {param baseHref: $baseHref /} From bac3f31f1a0498764ecbe5843c224abdf853b049 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Sat, 13 Jan 2018 17:07:06 +0100 Subject: [PATCH 20/25] Update ClayPaginationBar demo --- packages/clay-pagination-bar/demos/a11y.html | 41 ++++++++++++++++--- packages/clay-pagination-bar/demos/index.html | 41 ++++++++++++++++--- 2 files changed, 72 insertions(+), 10 deletions(-) diff --git a/packages/clay-pagination-bar/demos/a11y.html b/packages/clay-pagination-bar/demos/a11y.html index be2e8a76a..1b4a23573 100644 --- a/packages/clay-pagination-bar/demos/a11y.html +++ b/packages/clay-pagination-bar/demos/a11y.html @@ -20,15 +20,46 @@ -

      - ClayPaginationBar -

      +
      +

      ClayPaginationBar

      +
      -
      +
      +
      +
      +
      +
      +
      diff --git a/packages/clay-pagination-bar/demos/index.html b/packages/clay-pagination-bar/demos/index.html index be2e8a76a..1b4a23573 100644 --- a/packages/clay-pagination-bar/demos/index.html +++ b/packages/clay-pagination-bar/demos/index.html @@ -20,15 +20,46 @@ -

      - ClayPaginationBar -

      +
      +

      ClayPaginationBar

      +
      -
      +
      +
      +
      +
      +
      +
      From fa43dc26e3b605c30ef7d86b2f0538c90e04a70e Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Sat, 13 Jan 2018 17:42:03 +0100 Subject: [PATCH 21/25] selectedEntry param is required in ClayPaginationBar --- packages/clay-pagination-bar/src/ClayPaginationBar.js | 6 +++--- packages/clay-pagination-bar/src/ClayPaginationBar.soy | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/clay-pagination-bar/src/ClayPaginationBar.js b/packages/clay-pagination-bar/src/ClayPaginationBar.js index d19740081..63f979d2f 100644 --- a/packages/clay-pagination-bar/src/ClayPaginationBar.js +++ b/packages/clay-pagination-bar/src/ClayPaginationBar.js @@ -73,10 +73,10 @@ ClayPaginationBar.STATE = { * Entries index that points to selected entry. * @instance * @memberof ClayPaginationBar - * @type {?int} - * @default 0 + * @type {?int|undefined} + * @default undefined */ - selectedEntry: Config.number().value(0), + selectedEntry: Config.number().required(), /** * The path to the SVG spritemap file containing the icons. diff --git a/packages/clay-pagination-bar/src/ClayPaginationBar.soy b/packages/clay-pagination-bar/src/ClayPaginationBar.soy index 23f53fa5d..72fb8b895 100644 --- a/packages/clay-pagination-bar/src/ClayPaginationBar.soy +++ b/packages/clay-pagination-bar/src/ClayPaginationBar.soy @@ -9,12 +9,12 @@ href: string, label: string ]>} + {@param selectedEntry: int} {@param spritemap: string} {@param totalEntries: number} {@param? baseHref: string} {@param? elementClasses: string} {@param? id: string} - {@param? selectedEntry: int} {let $attributes kind="attributes"} class="clay-pagination-bar pagination-bar @@ -29,7 +29,7 @@ {/let}
      - {let $selectedEntryItem: $selectedEntry ? $entries[$selectedEntry] : $entries[0] /} + {let $selectedEntryItem: $entries[$selectedEntry] /} {call ClayDropdown.render} {param elementClasses: 'pagination-items-per-page' /} From 22fc829d9f7ee9f8a54eb5202db55fdb50f3f194 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Sat, 13 Jan 2018 17:42:13 +0100 Subject: [PATCH 22/25] Create ClayPaginationBar tests --- .../src/__tests__/ClayPaginationBar.js | 139 ++++++- .../__snapshots__/ClayPaginationBar.js.snap | 384 ++++++++++++++++++ 2 files changed, 522 insertions(+), 1 deletion(-) diff --git a/packages/clay-pagination-bar/src/__tests__/ClayPaginationBar.js b/packages/clay-pagination-bar/src/__tests__/ClayPaginationBar.js index e5810af0e..6e169c76f 100644 --- a/packages/clay-pagination-bar/src/__tests__/ClayPaginationBar.js +++ b/packages/clay-pagination-bar/src/__tests__/ClayPaginationBar.js @@ -1,5 +1,27 @@ import ClayPaginationBar from '../ClayPaginationBar'; +const spritemap = '../node_modules/lexicon-ux/build/images/icons/icons.svg'; + +const entries = [ + { + href: '#mySite?entries=5', + label: '5', + }, + { + active: true, + href: '#mySite?entries=10', + label: '10', + }, + { + href: '#mySite?entries=15', + label: '15', + }, + { + href: '#mySite?entries=20', + label: '20', + }, +]; + let component; describe('ClayPaginationBar', function() { @@ -10,14 +32,26 @@ describe('ClayPaginationBar', function() { }); it('should render the default markup', () => { - component = new ClayPaginationBar(); + component = new ClayPaginationBar({ + baseHref: '#mySite?curPage=', + currentPage: 1, + entries: entries, + selectedEntry: 1, + spritemap: spritemap, + totalEntries: 20, + }); expect(component).toMatchSnapshot(); }); it('should render a ClayPaginationBar with classes', () => { component = new ClayPaginationBar({ + currentPage: 1, elementClasses: 'my-custom-class', + entries: entries, + selectedEntry: 1, + spritemap: spritemap, + totalEntries: 20, }); expect(component).toMatchSnapshot(); @@ -25,9 +59,112 @@ describe('ClayPaginationBar', function() { it('should render a ClayPaginationBar with id', () => { component = new ClayPaginationBar({ + currentPage: 1, + entries: entries, id: 'myId', + selectedEntry: 1, + spritemap: spritemap, + totalEntries: 20, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render a ClayPaginationBar with baseHref', () => { + component = new ClayPaginationBar({ + currentPage: 1, + baseHref: '#mySite?curPage=', + entries: entries, + selectedEntry: 1, + spritemap: spritemap, + totalEntries: 20, }); expect(component).toMatchSnapshot(); }); + + it('should render a ClayPaginationBar with one item more than selected entry multiple', () => { + component = new ClayPaginationBar({ + currentPage: 2, + baseHref: '#mySite?curPage=', + entries: entries, + selectedEntry: 1, + spritemap: spritemap, + totalEntries: 21, + }); + + expect(component).toMatchSnapshot(); + + component = new ClayPaginationBar({ + currentPage: 3, + baseHref: '#mySite?curPage=', + entries: entries, + selectedEntry: 1, + spritemap: spritemap, + totalEntries: 21, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render a ClayPaginationBar with one item less than selected entry multiple', () => { + component = new ClayPaginationBar({ + currentPage: 2, + baseHref: '#mySite?curPage=', + entries: entries, + selectedEntry: 1, + spritemap: spritemap, + totalEntries: 19, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should fail when no currentPage is passed', function() { + expect(() => { + component = new ClayPaginationBar({ + baseHref: '#mySite?curPage=', + entries: entries, + selectedEntry: 1, + spritemap: spritemap, + totalEntries: 20, + }); + }).toThrow(); + }); + + it('should fail when no entries are passed', function() { + expect(() => { + component = new ClayPaginationBar({ + currentPage: 1, + baseHref: '#mySite?curPage=', + selectedEntry: 1, + spritemap: spritemap, + totalEntries: 20, + }); + }).toThrow(); + }); + + it('should fail when no spritemap is passed', function() { + expect(() => { + component = new ClayPaginationBar({ + currentPage: 1, + baseHref: '#mySite?curPage=', + entries: entries, + selectedEntry: 1, + totalEntries: 20, + }); + }).toThrow(); + }); + + it('should fail when no totalEntries is passed', function() { + expect(() => { + component = new ClayPaginationBar({ + currentPage: 1, + baseHref: '#mySite?curPage=', + entries: entries, + selectedEntry: 1, + spritemap: spritemap, + }); + }).toThrow(); + }); }); diff --git a/packages/clay-pagination-bar/src/__tests__/__snapshots__/ClayPaginationBar.js.snap b/packages/clay-pagination-bar/src/__tests__/__snapshots__/ClayPaginationBar.js.snap index d1e5c85a7..5ac7fe66a 100644 --- a/packages/clay-pagination-bar/src/__tests__/__snapshots__/ClayPaginationBar.js.snap +++ b/packages/clay-pagination-bar/src/__tests__/__snapshots__/ClayPaginationBar.js.snap @@ -1 +1,385 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ClayPaginationBar should render a ClayPaginationBar with baseHref 1`] = ` +
      +
      + +
      +
        +
      • + 5 +
        • +
      • + 10 +
        • +
      • + 15 +
        • +
      • + 20 +
        • +
      +
      +
      +
      Showing 1 to 10 of 20 entries.
      + +
      +`; + +exports[`ClayPaginationBar should render a ClayPaginationBar with classes 1`] = ` +
      +
      + +
      +
        +
      • + 5 +
        • +
      • + 10 +
        • +
      • + 15 +
        • +
      • + 20 +
        • +
      +
      +
      +
      Showing 1 to 10 of 20 entries.
      + +
      +`; + +exports[`ClayPaginationBar should render a ClayPaginationBar with id 1`] = ` +
      +
      + +
      +
        +
      • + 5 +
        • +
      • + 10 +
        • +
      • + 15 +
        • +
      • + 20 +
        • +
      +
      +
      +
      Showing 1 to 10 of 20 entries.
      + +
      +`; + +exports[`ClayPaginationBar should render a ClayPaginationBar with one item less than selected entry multiple 1`] = ` +
      +
      + +
      +
        +
      • + 5 +
        • +
      • + 10 +
        • +
      • + 15 +
        • +
      • + 20 +
        • +
      +
      +
      +
      Showing 11 to 19 of 19 entries.
      + +
      +`; + +exports[`ClayPaginationBar should render a ClayPaginationBar with one item more than selected entry multiple 1`] = ` +
      +
      + +
      +
        +
      • + 5 +
        • +
      • + 10 +
        • +
      • + 15 +
        • +
      • + 20 +
        • +
      +
      +
      +
      Showing 11 to 20 of 21 entries.
      + +
      +`; + +exports[`ClayPaginationBar should render a ClayPaginationBar with one item more than selected entry multiple 2`] = ` +
      +
      + +
      +
        +
      • + 5 +
        • +
      • + 10 +
        • +
      • + 15 +
        • +
      • + 20 +
        • +
      +
      +
      +
      Showing 21 to 21 of 21 entries.
      + +
      +`; + +exports[`ClayPaginationBar should render the default markup 1`] = ` +
      +
      + +
      +
        +
      • + 5 +
        • +
      • + 10 +
        • +
      • + 15 +
        • +
      • + 20 +
        • +
      +
      +
      +
      Showing 1 to 10 of 20 entries.
      + +
      +`; From 3b52e8458f15c2a08eb85b4578a1297b1a4258da Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Sat, 13 Jan 2018 17:45:11 +0100 Subject: [PATCH 23/25] Update ClayPagination tests --- .../src/__tests__/ClayPagination.js | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/packages/clay-pagination/src/__tests__/ClayPagination.js b/packages/clay-pagination/src/__tests__/ClayPagination.js index 127f77bf1..380c717fe 100644 --- a/packages/clay-pagination/src/__tests__/ClayPagination.js +++ b/packages/clay-pagination/src/__tests__/ClayPagination.js @@ -73,4 +73,34 @@ describe('ClayPagination', function() { }); } } + + it('should fail when no currentPage is passed', function() { + expect(() => { + component = new ClayPagination({ + baseHref: '#mySite?curPage=', + spritemap: spritemap, + totalPages: 10, + }); + }).toThrow(); + }); + + it('should fail when no spritemap is passed', function() { + expect(() => { + component = new ClayPagination({ + baseHref: '#mySite?curPage=', + currentPage: 1, + totalPages: 10, + }); + }).toThrow(); + }); + + it('should fail when no totalPages is passed', function() { + expect(() => { + component = new ClayPagination({ + baseHref: '#mySite?curPage=', + currentPage: 1, + spritemap: spritemap, + }); + }).toThrow(); + }); }); From 1a6d3906b408589f00f4fee5516fe9aafa89c17a Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Sat, 13 Jan 2018 17:46:59 +0100 Subject: [PATCH 24/25] SF --- packages/clay-pagination-bar/src/ClayPaginationBar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clay-pagination-bar/src/ClayPaginationBar.js b/packages/clay-pagination-bar/src/ClayPaginationBar.js index 63f979d2f..94d4cfe3a 100644 --- a/packages/clay-pagination-bar/src/ClayPaginationBar.js +++ b/packages/clay-pagination-bar/src/ClayPaginationBar.js @@ -1,5 +1,5 @@ +import 'clay-dropdown'; import 'clay-pagination'; -import {ClayDropdown} from 'clay-dropdown'; import {Config} from 'metal-state'; import Component from 'metal-component'; import defineWebComponent from 'metal-web-component'; From fa6eb4d68608d6362c26cda2d6a4de939e255b64 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Mon, 15 Jan 2018 10:38:20 +0100 Subject: [PATCH 25/25] Casting to number not needed anymore in ClayPagination --- packages/clay-pagination/src/ClayPagination.soy | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clay-pagination/src/ClayPagination.soy b/packages/clay-pagination/src/ClayPagination.soy index 1bb6c0d74..5b148c34e 100644 --- a/packages/clay-pagination/src/ClayPagination.soy +++ b/packages/clay-pagination/src/ClayPagination.soy @@ -205,7 +205,7 @@ {let $endPage: $items[0].endPage /} {let $initPage: $items[0].initPage /} - {for $page in range($initPage * 1, $endPage * 1)} + {for $page in range($initPage, $endPage)} {delcall ClayDropdownBase.Item variant="'item'"} {param href: $baseHref + $page /} {param isInList: $isInList /}