From 43d40068808c1181f25cb7679dab45d029c7c28d Mon Sep 17 00:00:00 2001 From: KiriHoy Date: Wed, 2 Oct 2019 10:42:16 +1000 Subject: [PATCH 01/35] wip pagination work --- README.md | 14 +++ auds.json | 2 +- packages/control-input/tests/react/index.js | 1 + packages/pagination/CHANGELOG.md | 34 ++++++ packages/pagination/LICENSE | 21 ++++ packages/pagination/README.md | 82 +++++++++++++ packages/pagination/package.json | 114 ++++++++++++++++++ packages/pagination/src/js/jquery.js | 16 +++ packages/pagination/src/js/module.js | 49 ++++++++ packages/pagination/src/js/react.js | 65 ++++++++++ .../pagination/src/sass/_dependencies.scss | 5 + packages/pagination/src/sass/_globals.scss | 25 ++++ packages/pagination/src/sass/_module.scss | 12 ++ packages/pagination/src/sass/_print.scss | 11 ++ packages/pagination/tests/index.html | 54 +++++++++ packages/pagination/tests/jquery/index.html | 53 ++++++++ packages/pagination/tests/jquery/test.scss | 1 + packages/pagination/tests/react/.babelrc | 3 + packages/pagination/tests/react/index.html | 41 +++++++ packages/pagination/tests/react/index.js | 14 +++ .../pagination/tests/react/webpack.config.js | 19 +++ packages/pagination/tests/site/index.html | 51 ++++++++ packages/pagination/tests/site/test.scss | 8 ++ 23 files changed, 694 insertions(+), 1 deletion(-) create mode 100644 packages/pagination/CHANGELOG.md create mode 100644 packages/pagination/LICENSE create mode 100644 packages/pagination/README.md create mode 100644 packages/pagination/package.json create mode 100644 packages/pagination/src/js/jquery.js create mode 100644 packages/pagination/src/js/module.js create mode 100644 packages/pagination/src/js/react.js create mode 100644 packages/pagination/src/sass/_dependencies.scss create mode 100644 packages/pagination/src/sass/_globals.scss create mode 100644 packages/pagination/src/sass/_module.scss create mode 100644 packages/pagination/src/sass/_print.scss create mode 100644 packages/pagination/tests/index.html create mode 100644 packages/pagination/tests/jquery/index.html create mode 100644 packages/pagination/tests/jquery/test.scss create mode 100644 packages/pagination/tests/react/.babelrc create mode 100644 packages/pagination/tests/react/index.html create mode 100644 packages/pagination/tests/react/index.js create mode 100644 packages/pagination/tests/react/webpack.config.js create mode 100644 packages/pagination/tests/site/index.html create mode 100644 packages/pagination/tests/site/test.scss diff --git a/README.md b/README.md index 9fe4a6641..2cc308a77 100644 --- a/README.md +++ b/README.md @@ -456,6 +456,20 @@ All components have to work on the below browsers: ---------- +
+ @gov.au/pagination +
npm install @gov.au/pagination
+
See the visual test file for pagination +
See the readme file for pagination

+ Dependencies: +
+ +```shell +└─ core +``` +---------- +
+
@gov.au/progress-indicator
npm install @gov.au/progress-indicator
diff --git a/auds.json b/auds.json index 415c4cde1..229c80ec8 100644 --- a/auds.json +++ b/auds.json @@ -1 +1 @@ -{"@gov.au/core":{"name":"@gov.au/core","version":"3.4.2","peerDependencies":{},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/accordion":{"name":"@gov.au/accordion","version":"7.0.8","peerDependencies":{"@gov.au/animate":"^1.0.0","@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-js","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"js":{"path":"lib/js/module.js"},"react":{"path":"lib/js/react.js"}}},"@gov.au/animate":{"name":"@gov.au/animate","version":"1.0.13","peerDependencies":{},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-js","@gov.au/pancake-json"],"js":{"path":"lib/js/module.js"},"sass":{"path":false,"sass-versioning":true}}},"@gov.au/body":{"name":"@gov.au/body","version":"2.2.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/breadcrumbs":{"name":"@gov.au/breadcrumbs","version":"3.0.5","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/buttons":{"name":"@gov.au/buttons","version":"3.0.7","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/callout":{"name":"@gov.au/callout","version":"3.0.2","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/card":{"name":"@gov.au/card","version":"0.3.2","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/control-input":{"name":"@gov.au/control-input","version":"3.0.1","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/cta-link":{"name":"@gov.au/cta-link","version":"2.2.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/direction-links":{"name":"@gov.au/direction-links","version":"3.0.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/footer":{"name":"@gov.au/footer","version":"3.0.5","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/form":{"name":"@gov.au/form","version":"0.1.5","peerDependencies":{"@gov.au/core":"^3.4.1"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/grid-12":{"name":"@gov.au/grid-12","version":"2.1.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/header":{"name":"@gov.au/header","version":"4.1.12","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/headings":{"name":"@gov.au/headings","version":"2.0.11","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/inpage-nav":{"name":"@gov.au/inpage-nav","version":"3.0.6","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/keyword-list":{"name":"@gov.au/keyword-list","version":"3.0.5","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/link-list":{"name":"@gov.au/link-list","version":"3.0.8","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/main-nav":{"name":"@gov.au/main-nav","version":"1.0.8","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/animate":"^1.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-js","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"js":{"path":"lib/js/module.js"},"react":{"path":"lib/js/react.js"}}},"@gov.au/page-alerts":{"name":"@gov.au/page-alerts","version":"2.1.3","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/progress-indicator":{"name":"@gov.au/progress-indicator","version":"3.1.7","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/responsive-media":{"name":"@gov.au/responsive-media","version":"2.0.14","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/searchbox":{"name":"@gov.au/searchbox","version":"0.2.1","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/text-inputs":"^2.0.0","@gov.au/buttons":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/select":{"name":"@gov.au/select","version":"2.0.11","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/side-nav":{"name":"@gov.au/side-nav","version":"5.0.8","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/animate":"^1.0.0","@gov.au/accordion":"^7.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-js","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"js":{"path":"lib/js/module.js"},"react":{"path":"lib/js/react.js"}}},"@gov.au/skip-link":{"name":"@gov.au/skip-link","version":"2.0.16","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/table":{"name":"@gov.au/table","version":"0.2.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/tags":{"name":"@gov.au/tags","version":"4.0.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/text-inputs":{"name":"@gov.au/text-inputs","version":"2.1.2","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}}} \ No newline at end of file +{"@gov.au/core":{"name":"@gov.au/core","version":"3.4.2","peerDependencies":{},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/accordion":{"name":"@gov.au/accordion","version":"7.0.8","peerDependencies":{"@gov.au/animate":"^1.0.0","@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-js","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"js":{"path":"lib/js/module.js"},"react":{"path":"lib/js/react.js"}}},"@gov.au/animate":{"name":"@gov.au/animate","version":"1.0.13","peerDependencies":{},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-js","@gov.au/pancake-json"],"js":{"path":"lib/js/module.js"},"sass":{"path":false,"sass-versioning":true}}},"@gov.au/body":{"name":"@gov.au/body","version":"2.2.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/breadcrumbs":{"name":"@gov.au/breadcrumbs","version":"3.0.5","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/buttons":{"name":"@gov.au/buttons","version":"3.0.7","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/callout":{"name":"@gov.au/callout","version":"3.0.2","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/card":{"name":"@gov.au/card","version":"0.3.2","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/control-input":{"name":"@gov.au/control-input","version":"3.0.1","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/cta-link":{"name":"@gov.au/cta-link","version":"2.2.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/direction-links":{"name":"@gov.au/direction-links","version":"3.0.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/footer":{"name":"@gov.au/footer","version":"3.0.5","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/form":{"name":"@gov.au/form","version":"0.1.5","peerDependencies":{"@gov.au/core":"^3.4.1"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/grid-12":{"name":"@gov.au/grid-12","version":"2.1.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/header":{"name":"@gov.au/header","version":"4.1.12","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/headings":{"name":"@gov.au/headings","version":"2.0.11","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/inpage-nav":{"name":"@gov.au/inpage-nav","version":"3.0.6","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/keyword-list":{"name":"@gov.au/keyword-list","version":"3.0.5","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/link-list":{"name":"@gov.au/link-list","version":"3.0.8","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/main-nav":{"name":"@gov.au/main-nav","version":"1.0.8","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/animate":"^1.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-js","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"js":{"path":"lib/js/module.js"},"react":{"path":"lib/js/react.js"}}},"@gov.au/page-alerts":{"name":"@gov.au/page-alerts","version":"2.1.3","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/pagination":{"name":"@gov.au/pagination","version":"0.1.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-js","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"js":{"path":"lib/js/module.js"},"react":{"path":"lib/js/react.js"}}},"@gov.au/progress-indicator":{"name":"@gov.au/progress-indicator","version":"3.1.7","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/responsive-media":{"name":"@gov.au/responsive-media","version":"2.0.14","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/searchbox":{"name":"@gov.au/searchbox","version":"0.2.2","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/text-inputs":"^2.0.0","@gov.au/buttons":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/select":{"name":"@gov.au/select","version":"2.0.11","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/side-nav":{"name":"@gov.au/side-nav","version":"5.0.8","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/animate":"^1.0.0","@gov.au/accordion":"^7.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-js","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"js":{"path":"lib/js/module.js"},"react":{"path":"lib/js/react.js"}}},"@gov.au/skip-link":{"name":"@gov.au/skip-link","version":"2.0.16","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/table":{"name":"@gov.au/table","version":"0.2.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/tags":{"name":"@gov.au/tags","version":"4.0.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/text-inputs":{"name":"@gov.au/text-inputs","version":"2.1.2","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}}} \ No newline at end of file diff --git a/packages/control-input/tests/react/index.js b/packages/control-input/tests/react/index.js index 73b1dc04e..43342c2d5 100644 --- a/packages/control-input/tests/react/index.js +++ b/packages/control-input/tests/react/index.js @@ -105,6 +105,7 @@ ReactDOM.render( { label: 'Phone', value: 'phone', + name: 'names', id: 'cb-phone', }, { diff --git a/packages/pagination/CHANGELOG.md b/packages/pagination/CHANGELOG.md new file mode 100644 index 000000000..dd4e34238 --- /dev/null +++ b/packages/pagination/CHANGELOG.md @@ -0,0 +1,34 @@ +@gov.au/pagination CHANGELOG +====================== + +> Part of the [gov.au components](https://github.com/govau/design-system-components/) ecosystem. + + +## Contents + +* [Versions](#install) +* [Release History](#release-history) + + +---------------------------------------------------------------------------------------------------------------------------------------------------------------- + + +## Versions + +* [v0.1.0 - 💥 Initial version](#v010) + + +---------------------------------------------------------------------------------------------------------------------------------------------------------------- + + +## Release History + +### v0.1.0 + +- 💥 Initial version + + +**[⬆ back to top](#contents)** + + +# }; diff --git a/packages/pagination/LICENSE b/packages/pagination/LICENSE new file mode 100644 index 000000000..c7dff0c0c --- /dev/null +++ b/packages/pagination/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2018 Commonwealth of Australia + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/pagination/README.md b/packages/pagination/README.md new file mode 100644 index 000000000..48206e9dc --- /dev/null +++ b/packages/pagination/README.md @@ -0,0 +1,82 @@ +@gov.au/pagination +============ + +> Pagination allows large amounts of content to be seperated into multiple pages + + +## Contents + +* [Install](#install) +* [Dependency graph](#dependency-graph) +* [Tests](#tests) +* [Release History](#release-history) +* [License](#license) + + +---------------------------------------------------------------------------------------------------------------------------------------------------------------- + + +## Install + + +```shell +yarn add @gov.au/pagination +``` + +```shell +npm install @gov.au/pagination +``` + + +**[⬆ back to top](#contents)** + + +---------------------------------------------------------------------------------------------------------------------------------------------------------------- + + +## Dependency graph + +```shell +pagination +└─ core +``` + + +**[⬆ back to top](#contents)** + + +---------------------------------------------------------------------------------------------------------------------------------------------------------------- + + +## Tests + +The visual test: https://auds.service.gov.au/packages/pagination/tests/site/ + + +**[⬆ back to top](#contents)** + + +---------------------------------------------------------------------------------------------------------------------------------------------------------------- + + +## Release History + +* v0.1.0 - 💥 Initial version + + +**[⬆ back to top](#contents)** + + +---------------------------------------------------------------------------------------------------------------------------------------------------------------- + + +## License + +Copyright (c) Commonwealth of Australia. +Licensed under [MIT](https://raw.githubusercontent.com/govau/design-system-components/packages/core/master/LICENSE). + + +**[⬆ back to top](#contents)** + +# }; + diff --git a/packages/pagination/package.json b/packages/pagination/package.json new file mode 100644 index 000000000..4ae0aa8f3 --- /dev/null +++ b/packages/pagination/package.json @@ -0,0 +1,114 @@ +{ + "name": "@gov.au/pagination", + "version": "0.1.0", + "description": "Pagination allows large amounts of content to be seperated into multiple pages", + "keywords": [ + "auds", + "pancake", + "pancake-module", + "sass", + "scss", + "css", + "gov.au", + "Commonwealth of Australia", + "design guide", + "design system" + ], + "scripts": { + "postinstall": "pancake", + + "test:a11y": "node ../../scripts/a11y.js", + "test:helper": "node ../../scripts/helper.js test", + "test": "npm-run-all --parallel test:*", + + "prepublish": "npm run test:helper && npm run build:pre", + + "build:pre": "node ../../scripts/helper.js precompile publish", + "build:js": "node ../../scripts/helper.js compile", + "build:react": "cd tests/react/ && webpack", + "build": "npm run build:pre && npm run build:js && npm run build:react", + + "serve": "browser-sync tests --files \"tests/**/*.html, tests/**/*.css, tests/**/*.js\"", + + "watch:js": "onchange \"src/js/*.js\" -- npm run build:js", + "watch:jsx": "onchange \"src/js/react.js\" \"tests/react/index.js\" -- npm run build", + "watch:sass": "onchange \"src/sass/*.scss\" \"tests/site/test.scss\" -- npm run build", + "watch": "npm run build && npm-run-all --parallel serve watch:*" + }, + "pancake": { + "pancake-module": { + "version": "1.0.0", + "plugins": [ + "@gov.au/pancake-sass", + "@gov.au/pancake-js", + "@gov.au/pancake-react", + "@gov.au/pancake-json" + ], + "sass": { + "path": "lib/sass/_module.scss", + "sass-versioning": true + }, + "js": { + "path": "lib/js/module.js" + }, + "react": { + "path": "lib/js/react.js" + } + } + }, + "main": "lib/js/react.es5.js", + "dependencies": { + "@gov.au/pancake": "~1", + "@gov.au/pancake-js": "~1", + "@gov.au/pancake-sass": "~2", + "@gov.au/pancake-react": "~1", + "@gov.au/pancake-json": "~1", + + "@gov.au/core": "^3.0.0" + }, + "peerDependencies": { + "@gov.au/core": "^3.0.0" + }, + "devDependencies": { + "@babel/core": "^7.3.4", + "babel-loader": "^8.0.5", + "@babel/preset-react": "^7.0.0", + "@babel/preset-env": "^7.3.4", + "browser-sync": "^2.26.7", + "npm-run-all": "^4.1.5", + "onchange": "^5.2.0", + "react": "^16.8.4", + "react-dom": "^16.8.4", + "webpack": "^4.29.6", + "webpack-cli": "^3.2.3" + }, + "files": [ + "lib/*" + ], + "engines": { + "node": ">=0.12.0", + "npm": "^3.0.0" + }, + "repository": { + "type": "git", + "url": "https://github.com/govau/design-system-components.git" + }, + "homepage": "https://designsystem.gov.au/components/pagination", + "bugs": { + "url": "https://github.com/govau/design-system-components/issues", + "email": "designsystem@digital.gov.au" + }, + "author": { + "name": "Commonwealth of Australia, DTA", + "email": "designsystem@digital.gov.au", + "url": "https://www.dta.gov.au/" + }, + "contributors": [ + { + "name": "Kiri Hoy", + "email": "kiri.hoy@dta.gov.au", + "url": "https://github.com/KiriHoy" + } + ], + "license": "MIT" +} diff --git a/packages/pagination/src/js/jquery.js b/packages/pagination/src/js/jquery.js new file mode 100644 index 000000000..4be495bde --- /dev/null +++ b/packages/pagination/src/js/jquery.js @@ -0,0 +1,16 @@ +/*! [replace-name] v[replace-version] */ +/*************************************************************************************************************************************************************** + * + * pagination function + * + * Pagination allows large amounts of content to be seperated into multiple pages + * + **************************************************************************************************************************************************************/ + + +$.fn.AUPagination = function() { + var $elements = this; + + return { + }; +}; diff --git a/packages/pagination/src/js/module.js b/packages/pagination/src/js/module.js new file mode 100644 index 000000000..ee5260197 --- /dev/null +++ b/packages/pagination/src/js/module.js @@ -0,0 +1,49 @@ +/*! [replace-name] v[replace-version] */ +/*************************************************************************************************************************************************************** + * + * pagination function + * + * Pagination allows large amounts of content to be seperated into multiple pages + * + **************************************************************************************************************************************************************/ + +var AU = AU || {}; + +( function( AU ) { + +//-------------------------------------------------------------------------------------------------------------------------------------------------------------- +// NAMESPACE MODULE +//-------------------------------------------------------------------------------------------------------------------------------------------------------------- + var pagination = {} + + +//-------------------------------------------------------------------------------------------------------------------------------------------------------------- +// PRIVATE FUNCTIONS +//-------------------------------------------------------------------------------------------------------------------------------------------------------------- + /** + * PRIVATE + */ + function private() { + return null; + } + + +//-------------------------------------------------------------------------------------------------------------------------------------------------------------- +// PUBLIC FUNCTIONS +//-------------------------------------------------------------------------------------------------------------------------------------------------------------- + /** + * PUBLIC + */ + pagination.public = function() { + return null; + } + + + AU.pagination = pagination; + +}( AU )); + + +if( typeof module !== 'undefined' ) { + module.exports = AU; +} diff --git a/packages/pagination/src/js/react.js b/packages/pagination/src/js/react.js new file mode 100644 index 000000000..04e50b87e --- /dev/null +++ b/packages/pagination/src/js/react.js @@ -0,0 +1,65 @@ +/*! [replace-name] v[replace-version] */ +/*************************************************************************************************************************************************************** + * + * pagination function + * + * Pagination allows large amounts of content to be seperated into multiple pages + * + **************************************************************************************************************************************************************/ + +/** + * AUpagination + * @param {object[]} items - + * @param {string} alignPagination - Alignment of pagination on page - can be one of 'Left', 'Right', 'Center' + * @param {bool} displayPreviousBtn - Display previous button or not + * @param {object} pageLimit - Number of records to be shown per page + * @param {bool} dark - Dark variation of pagination + * @param {object} attributeOptions - Default HTML attributes + * @param {bool} responsive - Responsive variation, less pagination items show on smaller devices + */ + +const AUPagination = ({ items, alignPagination, pageLimit,responsive , dark, className }) => { + return ( + + ) +}; + + + + +AUPagination.propTypes = { + dark: PropTypes.bool +}; + +AUPagination.defaultProps = {}; + +/** + * The pagination item component + * @param {string} className - An additional class, optional + * @param {object} attributeOptions - Default HTML attributes + */ +export const AUPaginationItem = ( { children, className,...attributeOptions } ) => { + return
  • + {children} +
    • +}; + +AUtableRow.defaultProps = { + className: '' +}; + +AUtableRow.propTypes = { + children: PropTypes.node, + className: PropTypes.string, +} + + + + +export default AUPagination; diff --git a/packages/pagination/src/sass/_dependencies.scss b/packages/pagination/src/sass/_dependencies.scss new file mode 100644 index 000000000..e8babb6af --- /dev/null +++ b/packages/pagination/src/sass/_dependencies.scss @@ -0,0 +1,5 @@ +//dependencies +@import '../../../core/src/sass/_module.scss'; + +//this module +@import '_module.scss'; diff --git a/packages/pagination/src/sass/_globals.scss b/packages/pagination/src/sass/_globals.scss new file mode 100644 index 000000000..7394f0cdd --- /dev/null +++ b/packages/pagination/src/sass/_globals.scss @@ -0,0 +1,25 @@ +/*! [replace-name] v[replace-version] */ + +//-------------------------------------------------------------------------------------------------------------------------------------------------------------- +// pagination module globals +// Pagination allows large amounts of content to be seperated into multiple pages +// +// Content: +// - Sass versioning +// - Global variables: none so far +//-------------------------------------------------------------------------------------------------------------------------------------------------------------- + +//-------------------------------------------------------------------------------------------------------------------------------------------------------------- +// SASS VERSIONING +//-------------------------------------------------------------------------------------------------------------------------------------------------------------- +$name: "[replace-name]"; +$version: "[replace-version]"; +$dependencies: ( + [replace-dependencies] +); + +//-------------------------------------------------------------------------------------------------------------------------------------------------------------- +// GLOBAL VARIABLES +//-------------------------------------------------------------------------------------------------------------------------------------------------------------- + +// Boy it sure is quiet here. diff --git a/packages/pagination/src/sass/_module.scss b/packages/pagination/src/sass/_module.scss new file mode 100644 index 000000000..a1a928f6c --- /dev/null +++ b/packages/pagination/src/sass/_module.scss @@ -0,0 +1,12 @@ +//-------------------------------------------------------------------------------------------------------------------------------------------------------------- +// pagination module +// Pagination allows large amounts of content to be seperated into multiple pages +// +// Content: +// - sass-versioning +// - globals +//-------------------------------------------------------------------------------------------------------------------------------------------------------------- + + +@import '_globals.scss'; +@import '_print.scss'; diff --git a/packages/pagination/src/sass/_print.scss b/packages/pagination/src/sass/_print.scss new file mode 100644 index 000000000..f15bd735e --- /dev/null +++ b/packages/pagination/src/sass/_print.scss @@ -0,0 +1,11 @@ +//-------------------------------------------------------------------------------------------------------------------------------------------------------------- +// pagination module +// Pagination allows large amounts of content to be seperated into multiple pages +// +// Content: +// - print styles +//-------------------------------------------------------------------------------------------------------------------------------------------------------------- + + +@media print { +} diff --git a/packages/pagination/tests/index.html b/packages/pagination/tests/index.html new file mode 100644 index 000000000..9ec78bd67 --- /dev/null +++ b/packages/pagination/tests/index.html @@ -0,0 +1,54 @@ + + + + + + + + + + + + + Test: pagination + + + + + + + + + + + ← back to all modules + +

    Test: pagination

    + + + + + diff --git a/packages/pagination/tests/jquery/index.html b/packages/pagination/tests/jquery/index.html new file mode 100644 index 000000000..c3a69fb08 --- /dev/null +++ b/packages/pagination/tests/jquery/index.html @@ -0,0 +1,53 @@ + + + + + + + + + + + + + Test: pagination + + + + + + + + + + + ← back to the module index + +

    JQuery test: pagination

    + + code here + + + + + + diff --git a/packages/pagination/tests/jquery/test.scss b/packages/pagination/tests/jquery/test.scss new file mode 100644 index 000000000..8fb9efdea --- /dev/null +++ b/packages/pagination/tests/jquery/test.scss @@ -0,0 +1 @@ +@import '../site/test.scss'; diff --git a/packages/pagination/tests/react/.babelrc b/packages/pagination/tests/react/.babelrc new file mode 100644 index 000000000..c3a044b15 --- /dev/null +++ b/packages/pagination/tests/react/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["@babel/preset-react", "@babel/preset-env"] +} \ No newline at end of file diff --git a/packages/pagination/tests/react/index.html b/packages/pagination/tests/react/index.html new file mode 100644 index 000000000..4da44e0b3 --- /dev/null +++ b/packages/pagination/tests/react/index.html @@ -0,0 +1,41 @@ + + + + + + + + + + + + + Test: pagination + + + + + + + + + + ← back to the module index + +

    React test: pagination

    + +
    + + + + diff --git a/packages/pagination/tests/react/index.js b/packages/pagination/tests/react/index.js new file mode 100644 index 000000000..b373f1901 --- /dev/null +++ b/packages/pagination/tests/react/index.js @@ -0,0 +1,14 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +import AUPagination from './AUpagination.js'; + + +ReactDOM.render( +
    + + +
    , + + document.getElementById('root'), +); diff --git a/packages/pagination/tests/react/webpack.config.js b/packages/pagination/tests/react/webpack.config.js new file mode 100644 index 000000000..404e6d8e4 --- /dev/null +++ b/packages/pagination/tests/react/webpack.config.js @@ -0,0 +1,19 @@ +const path = require( 'path' ); + +module.exports = { + entry: './index.js', + mode: 'development', + output: { + filename: './bundle.js', + path: path.resolve( __dirname ) + }, + module: { + rules: [ + { + test: /\.js$/, + exclude: /node_modules/, + use: 'babel-loader', + }, + ], + }, +}; diff --git a/packages/pagination/tests/site/index.html b/packages/pagination/tests/site/index.html new file mode 100644 index 000000000..9f59bc4a1 --- /dev/null +++ b/packages/pagination/tests/site/index.html @@ -0,0 +1,51 @@ + + + + + + + + + + + + + Test: pagination + + + + + + + + + + + ← back to the module index + +

    Test: pagination

    + + code here + + + + diff --git a/packages/pagination/tests/site/test.scss b/packages/pagination/tests/site/test.scss new file mode 100644 index 000000000..0eb728a87 --- /dev/null +++ b/packages/pagination/tests/site/test.scss @@ -0,0 +1,8 @@ +//dependencies +@import '../../src/sass/_dependencies.scss'; + +//testing includes +// @import '../../../body/src/sass/_module.scss'; + +//styling all test files +@import '../../../../.templates/test-assets/_style.scss'; From 6fd8f6d4d4b4c91f5fffe9a08e173a375b08aa0e Mon Sep 17 00:00:00 2001 From: KiriHoy Date: Tue, 22 Oct 2019 14:54:15 +1100 Subject: [PATCH 02/35] changes --- packages/pagination/src/js/module.js | 49 ---------------------------- packages/pagination/src/js/react.js | 21 ++++++------ 2 files changed, 11 insertions(+), 59 deletions(-) delete mode 100644 packages/pagination/src/js/module.js diff --git a/packages/pagination/src/js/module.js b/packages/pagination/src/js/module.js deleted file mode 100644 index ee5260197..000000000 --- a/packages/pagination/src/js/module.js +++ /dev/null @@ -1,49 +0,0 @@ -/*! [replace-name] v[replace-version] */ -/*************************************************************************************************************************************************************** - * - * pagination function - * - * Pagination allows large amounts of content to be seperated into multiple pages - * - **************************************************************************************************************************************************************/ - -var AU = AU || {}; - -( function( AU ) { - -//-------------------------------------------------------------------------------------------------------------------------------------------------------------- -// NAMESPACE MODULE -//-------------------------------------------------------------------------------------------------------------------------------------------------------------- - var pagination = {} - - -//-------------------------------------------------------------------------------------------------------------------------------------------------------------- -// PRIVATE FUNCTIONS -//-------------------------------------------------------------------------------------------------------------------------------------------------------------- - /** - * PRIVATE - */ - function private() { - return null; - } - - -//-------------------------------------------------------------------------------------------------------------------------------------------------------------- -// PUBLIC FUNCTIONS -//-------------------------------------------------------------------------------------------------------------------------------------------------------------- - /** - * PUBLIC - */ - pagination.public = function() { - return null; - } - - - AU.pagination = pagination; - -}( AU )); - - -if( typeof module !== 'undefined' ) { - module.exports = AU; -} diff --git a/packages/pagination/src/js/react.js b/packages/pagination/src/js/react.js index 04e50b87e..cd85ae00a 100644 --- a/packages/pagination/src/js/react.js +++ b/packages/pagination/src/js/react.js @@ -9,23 +9,22 @@ /** * AUpagination - * @param {object[]} items - - * @param {string} alignPagination - Alignment of pagination on page - can be one of 'Left', 'Right', 'Center' - * @param {bool} displayPreviousBtn - Display previous button or not - * @param {object} pageLimit - Number of records to be shown per page - * @param {bool} dark - Dark variation of pagination - * @param {object} attributeOptions - Default HTML attributes - * @param {bool} responsive - Responsive variation, less pagination items show on smaller devices + * @param {object[]} items - items in pagination list + * @param {object} pageLimit - Number of records to be shown per page + * @param {object} currentPage - + * @param {object} attributeOptions - Default HTML attributes */ -const AUPagination = ({ items, alignPagination, pageLimit,responsive , dark, className }) => { +const AUPagination = ({ items, className }) => { return (
      + Previous { items.map( ( item, i ) => { item } ) } + Next
    ) }; @@ -46,8 +45,10 @@ AUPagination.defaultProps = {}; */ export const AUPaginationItem = ( { children, className,...attributeOptions } ) => { return
  • - {children} -
    • + + {children} + + }; AUtableRow.defaultProps = { From a844a716c287b041228be43c7a431fd58091cca7 Mon Sep 17 00:00:00 2001 From: KiriHoy Date: Tue, 22 Oct 2019 14:55:28 +1100 Subject: [PATCH 03/35] adding pagination test data --- packages/pagination/tests/react/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/pagination/tests/react/index.js b/packages/pagination/tests/react/index.js index b373f1901..fa777d7ee 100644 --- a/packages/pagination/tests/react/index.js +++ b/packages/pagination/tests/react/index.js @@ -3,7 +3,7 @@ import ReactDOM from 'react-dom'; import AUPagination from './AUpagination.js'; - +const paginationNumbers = ["1", "2", "3"]; ReactDOM.render(
    From 4bd0e8efb9e5dba16f88d96b944dcd4477105e44 Mon Sep 17 00:00:00 2001 From: KiriHoy Date: Mon, 28 Oct 2019 07:53:52 +1100 Subject: [PATCH 04/35] add pagination --- packages/pagination/README.md | 8 +++- packages/pagination/package.json | 8 ++-- packages/pagination/src/js/jquery.js | 2 +- packages/pagination/src/js/module.js | 49 +++++++++++++++++++ packages/pagination/src/js/react.js | 56 ++++------------------ packages/pagination/src/sass/_globals.scss | 2 +- packages/pagination/src/sass/_module.scss | 2 +- packages/pagination/src/sass/_print.scss | 2 +- packages/pagination/tests/react/index.js | 2 +- 9 files changed, 73 insertions(+), 58 deletions(-) create mode 100644 packages/pagination/src/js/module.js diff --git a/packages/pagination/README.md b/packages/pagination/README.md index 48206e9dc..a40b7f9c5 100644 --- a/packages/pagination/README.md +++ b/packages/pagination/README.md @@ -1,7 +1,7 @@ @gov.au/pagination ============ -> Pagination allows large amounts of content to be seperated into multiple pages +> Pagination allows large amounts of content to be separated into multiple pages. ## Contents @@ -38,7 +38,11 @@ npm install @gov.au/pagination ```shell pagination -└─ core +├─ core +└─ link-list + ├─ core + └─ body + └─ core ``` diff --git a/packages/pagination/package.json b/packages/pagination/package.json index 4ae0aa8f3..b65c9f7e5 100644 --- a/packages/pagination/package.json +++ b/packages/pagination/package.json @@ -1,7 +1,7 @@ { "name": "@gov.au/pagination", "version": "0.1.0", - "description": "Pagination allows large amounts of content to be seperated into multiple pages", + "description": "Pagination allows large amounts of content to be separated into multiple pages.", "keywords": [ "auds", "pancake", @@ -64,10 +64,12 @@ "@gov.au/pancake-react": "~1", "@gov.au/pancake-json": "~1", - "@gov.au/core": "^3.0.0" + "@gov.au/core": "^3.0.0", + "@gov.au/link-list": "^3.0.0" }, "peerDependencies": { - "@gov.au/core": "^3.0.0" + "@gov.au/core": "^3.0.0", + "@gov.au/link-list": "^3.0.0" }, "devDependencies": { "@babel/core": "^7.3.4", diff --git a/packages/pagination/src/js/jquery.js b/packages/pagination/src/js/jquery.js index 4be495bde..054cf9f01 100644 --- a/packages/pagination/src/js/jquery.js +++ b/packages/pagination/src/js/jquery.js @@ -3,7 +3,7 @@ * * pagination function * - * Pagination allows large amounts of content to be seperated into multiple pages + * Pagination allows large amounts of content to be separated into multiple pages. * **************************************************************************************************************************************************************/ diff --git a/packages/pagination/src/js/module.js b/packages/pagination/src/js/module.js new file mode 100644 index 000000000..34f7d415e --- /dev/null +++ b/packages/pagination/src/js/module.js @@ -0,0 +1,49 @@ +/*! [replace-name] v[replace-version] */ +/*************************************************************************************************************************************************************** + * + * pagination function + * + * Pagination allows large amounts of content to be separated into multiple pages. + * + **************************************************************************************************************************************************************/ + +var AU = AU || {}; + +( function( AU ) { + +//-------------------------------------------------------------------------------------------------------------------------------------------------------------- +// NAMESPACE MODULE +//-------------------------------------------------------------------------------------------------------------------------------------------------------------- + var pagination = {} + + +//-------------------------------------------------------------------------------------------------------------------------------------------------------------- +// PRIVATE FUNCTIONS +//-------------------------------------------------------------------------------------------------------------------------------------------------------------- + /** + * PRIVATE + */ + function private() { + return null; + } + + +//-------------------------------------------------------------------------------------------------------------------------------------------------------------- +// PUBLIC FUNCTIONS +//-------------------------------------------------------------------------------------------------------------------------------------------------------------- + /** + * PUBLIC + */ + pagination.public = function() { + return null; + } + + + AU.pagination = pagination; + +}( AU )); + + +if( typeof module !== 'undefined' ) { + module.exports = AU; +} diff --git a/packages/pagination/src/js/react.js b/packages/pagination/src/js/react.js index cd85ae00a..4001c4819 100644 --- a/packages/pagination/src/js/react.js +++ b/packages/pagination/src/js/react.js @@ -3,34 +3,19 @@ * * pagination function * - * Pagination allows large amounts of content to be seperated into multiple pages + * Pagination allows large amounts of content to be separated into multiple pages. * **************************************************************************************************************************************************************/ -/** - * AUpagination - * @param {object[]} items - items in pagination list - * @param {object} pageLimit - Number of records to be shown per page - * @param {object} currentPage - - * @param {object} attributeOptions - Default HTML attributes - */ - -const AUPagination = ({ items, className }) => { - return ( -
      - Previous - { - items.map( - ( item, i ) => { item } - ) - } - Next -
    - ) -}; - +import React from 'react'; +import PropTypes from 'prop-types'; +const AUPagination = () => ( +
    + Yay! +
    +); AUPagination.propTypes = { dark: PropTypes.bool @@ -38,29 +23,4 @@ AUPagination.propTypes = { AUPagination.defaultProps = {}; -/** - * The pagination item component - * @param {string} className - An additional class, optional - * @param {object} attributeOptions - Default HTML attributes - */ -export const AUPaginationItem = ( { children, className,...attributeOptions } ) => { - return
  • - - {children} - -
    • -}; - -AUtableRow.defaultProps = { - className: '' -}; - -AUtableRow.propTypes = { - children: PropTypes.node, - className: PropTypes.string, -} - - - - export default AUPagination; diff --git a/packages/pagination/src/sass/_globals.scss b/packages/pagination/src/sass/_globals.scss index 7394f0cdd..f3c9e730e 100644 --- a/packages/pagination/src/sass/_globals.scss +++ b/packages/pagination/src/sass/_globals.scss @@ -2,7 +2,7 @@ //-------------------------------------------------------------------------------------------------------------------------------------------------------------- // pagination module globals -// Pagination allows large amounts of content to be seperated into multiple pages +// Pagination allows large amounts of content to be separated into multiple pages. // // Content: // - Sass versioning diff --git a/packages/pagination/src/sass/_module.scss b/packages/pagination/src/sass/_module.scss index a1a928f6c..9f42bd9f5 100644 --- a/packages/pagination/src/sass/_module.scss +++ b/packages/pagination/src/sass/_module.scss @@ -1,6 +1,6 @@ //-------------------------------------------------------------------------------------------------------------------------------------------------------------- // pagination module -// Pagination allows large amounts of content to be seperated into multiple pages +// Pagination allows large amounts of content to be separated into multiple pages. // // Content: // - sass-versioning diff --git a/packages/pagination/src/sass/_print.scss b/packages/pagination/src/sass/_print.scss index f15bd735e..8f89e4ff1 100644 --- a/packages/pagination/src/sass/_print.scss +++ b/packages/pagination/src/sass/_print.scss @@ -1,6 +1,6 @@ //-------------------------------------------------------------------------------------------------------------------------------------------------------------- // pagination module -// Pagination allows large amounts of content to be seperated into multiple pages +// Pagination allows large amounts of content to be separated into multiple pages. // // Content: // - print styles diff --git a/packages/pagination/tests/react/index.js b/packages/pagination/tests/react/index.js index fa777d7ee..b373f1901 100644 --- a/packages/pagination/tests/react/index.js +++ b/packages/pagination/tests/react/index.js @@ -3,7 +3,7 @@ import ReactDOM from 'react-dom'; import AUPagination from './AUpagination.js'; -const paginationNumbers = ["1", "2", "3"]; + ReactDOM.render(
    From 7926fc2236e4e6ef6a765d9e8fd3a401170c1089 Mon Sep 17 00:00:00 2001 From: KiriHoy Date: Mon, 28 Oct 2019 08:34:27 +1100 Subject: [PATCH 05/35] add link-list dependencies --- packages/pagination/src/js/react.js | 39 ++++++++++++++++--- .../pagination/src/sass/_dependencies.scss | 1 + packages/pagination/tests/react/index.js | 5 ++- 3 files changed, 38 insertions(+), 7 deletions(-) diff --git a/packages/pagination/src/js/react.js b/packages/pagination/src/js/react.js index 4001c4819..270622554 100644 --- a/packages/pagination/src/js/react.js +++ b/packages/pagination/src/js/react.js @@ -11,11 +11,27 @@ import React from 'react'; import PropTypes from 'prop-types'; -const AUPagination = () => ( -
    - Yay! -
    -); +/** + * AUpagination + * @param {object[]} items - items in pagination list + * @param {object} pageLimit - Number of records to be shown per page + * @param {object} currentPage - + * @param {object} attributeOptions - Default HTML attributes + */ + +const AUPagination = ({ items, className, ...attributeOptions}) => { + return ( +
      + Previous + { + items.map( + ( item, i ) => { item } + ) + } + Next +
    + ) +}; AUPagination.propTypes = { dark: PropTypes.bool @@ -23,4 +39,17 @@ AUPagination.propTypes = { AUPagination.defaultProps = {}; +/** + * The pagination item component + * @param {string} className - An additional class, optional + * @param {object} attributeOptions - Default HTML attributes + */ +export const AUPaginationItem = ( { children, className,...attributeOptions } ) => { + return
  • + + {children} + +
    • +}; + export default AUPagination; diff --git a/packages/pagination/src/sass/_dependencies.scss b/packages/pagination/src/sass/_dependencies.scss index e8babb6af..def222aff 100644 --- a/packages/pagination/src/sass/_dependencies.scss +++ b/packages/pagination/src/sass/_dependencies.scss @@ -1,5 +1,6 @@ //dependencies @import '../../../core/src/sass/_module.scss'; +@import '../../../link-list/src/sass/module.scss'; //this module @import '_module.scss'; diff --git a/packages/pagination/tests/react/index.js b/packages/pagination/tests/react/index.js index b373f1901..e4268e3a2 100644 --- a/packages/pagination/tests/react/index.js +++ b/packages/pagination/tests/react/index.js @@ -1,12 +1,13 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import AUPagination from './AUpagination.js'; +import AUPagination from './pagination.js'; +const paginationNumbers = ["1", "2", "3"]; ReactDOM.render(
    - +
    , From cb546312bee1ed2be3d51a77b464e8e0f3343b3b Mon Sep 17 00:00:00 2001 From: KiriHoy Date: Mon, 28 Oct 2019 11:00:10 +1100 Subject: [PATCH 06/35] set aria label attribute --- packages/pagination/src/js/react.js | 63 +++++++++++++++++------ packages/pagination/src/sass/_module.scss | 40 ++++++++++++++ 2 files changed, 87 insertions(+), 16 deletions(-) diff --git a/packages/pagination/src/js/react.js b/packages/pagination/src/js/react.js index 270622554..1ff721b24 100644 --- a/packages/pagination/src/js/react.js +++ b/packages/pagination/src/js/react.js @@ -14,42 +14,73 @@ import PropTypes from 'prop-types'; /** * AUpagination * @param {object[]} items - items in pagination list - * @param {object} pageLimit - Number of records to be shown per page - * @param {object} currentPage - + * @param {object} currentPage - * @param {object} attributeOptions - Default HTML attributes */ const AUPagination = ({ items, className, ...attributeOptions}) => { + return ( -
      - Previous - { - items.map( - ( item, i ) => { item } - ) - } - Next -
    + ) }; AUPagination.propTypes = { - dark: PropTypes.bool + dark: PropTypes.bool, + className: PropTypes.string }; -AUPagination.defaultProps = {}; +AUPagination.defaultProps = { + className: '' + +}; /** * The pagination item component * @param {string} className - An additional class, optional * @param {object} attributeOptions - Default HTML attributes + * @param {string} label - aria-label for pagination items */ -export const AUPaginationItem = ( { children, className,...attributeOptions } ) => { - return
  • - +export const AUPaginationItem = ( { children, className, label, ...attributeOptions } ) => { + + if ( children === 'Previous' ) { + label = "go to previous page"; + + } + else if (children === 'Next') { + + label = "go to next page"; + + } + else { + label = "Page " + children; + } + + + return
  • + {children}
    • }; +AUPaginationItem.propTypes = { + children: PropTypes.node, + className: PropTypes.string +} + +AUPaginationItem.defaultProps = { + className: '' +}; + export default AUPagination; diff --git a/packages/pagination/src/sass/_module.scss b/packages/pagination/src/sass/_module.scss index 9f42bd9f5..e47a5067b 100644 --- a/packages/pagination/src/sass/_module.scss +++ b/packages/pagination/src/sass/_module.scss @@ -10,3 +10,43 @@ @import '_globals.scss'; @import '_print.scss'; + +.au-pagination{ +.au-pagination__item{ + display: inline-block; + padding: 1rem 0.3rem 0.6rem 0.3rem; + margin-right: 0.3rem; + text-decoration: none; + + &:focus { + outline: 0; + } +} + +.au-pagination__controls{ + +} + +.au-pagination__link{ + color: $AU-color-foreground-action; + display: inline-block; + padding: 0.9rem 1rem 0.9rem 1rem; + margin-right: 0.2rem; + text-decoration: none; + + &:hover, &:focus { + text-decoration: none; + color: $AU-color-foreground-text; + outline: 3px solid #d3d3d3; + padding: 0.5rem 1rem 0.5rem 1rem; + } + + &.current { + color: #0B0C0C; + font-weight: 700; + border: none; + pointer-events: none; + cursor: default; + } +} +} \ No newline at end of file From 22d3b6b072403ca394835620ccb67bd7f0abf9ae Mon Sep 17 00:00:00 2001 From: KiriHoy Date: Mon, 28 Oct 2019 11:49:25 +1100 Subject: [PATCH 07/35] add disabled option --- packages/pagination/src/js/react.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/pagination/src/js/react.js b/packages/pagination/src/js/react.js index 1ff721b24..622e85e26 100644 --- a/packages/pagination/src/js/react.js +++ b/packages/pagination/src/js/react.js @@ -23,6 +23,7 @@ const AUPagination = ({ items, className, ...attributeOptions}) => { return (
    diff --git a/auds.json b/auds.json index 229c80ec8..fdafec149 100644 --- a/auds.json +++ b/auds.json @@ -1 +1 @@ -{"@gov.au/core":{"name":"@gov.au/core","version":"3.4.2","peerDependencies":{},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/accordion":{"name":"@gov.au/accordion","version":"7.0.8","peerDependencies":{"@gov.au/animate":"^1.0.0","@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-js","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"js":{"path":"lib/js/module.js"},"react":{"path":"lib/js/react.js"}}},"@gov.au/animate":{"name":"@gov.au/animate","version":"1.0.13","peerDependencies":{},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-js","@gov.au/pancake-json"],"js":{"path":"lib/js/module.js"},"sass":{"path":false,"sass-versioning":true}}},"@gov.au/body":{"name":"@gov.au/body","version":"2.2.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/breadcrumbs":{"name":"@gov.au/breadcrumbs","version":"3.0.5","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/buttons":{"name":"@gov.au/buttons","version":"3.0.7","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/callout":{"name":"@gov.au/callout","version":"3.0.2","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/card":{"name":"@gov.au/card","version":"0.3.2","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/control-input":{"name":"@gov.au/control-input","version":"3.0.1","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/cta-link":{"name":"@gov.au/cta-link","version":"2.2.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/direction-links":{"name":"@gov.au/direction-links","version":"3.0.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/footer":{"name":"@gov.au/footer","version":"3.0.5","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/form":{"name":"@gov.au/form","version":"0.1.5","peerDependencies":{"@gov.au/core":"^3.4.1"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/grid-12":{"name":"@gov.au/grid-12","version":"2.1.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/header":{"name":"@gov.au/header","version":"4.1.12","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/headings":{"name":"@gov.au/headings","version":"2.0.11","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/inpage-nav":{"name":"@gov.au/inpage-nav","version":"3.0.6","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/keyword-list":{"name":"@gov.au/keyword-list","version":"3.0.5","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/link-list":{"name":"@gov.au/link-list","version":"3.0.8","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/main-nav":{"name":"@gov.au/main-nav","version":"1.0.8","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/animate":"^1.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-js","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"js":{"path":"lib/js/module.js"},"react":{"path":"lib/js/react.js"}}},"@gov.au/page-alerts":{"name":"@gov.au/page-alerts","version":"2.1.3","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/pagination":{"name":"@gov.au/pagination","version":"0.1.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-js","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"js":{"path":"lib/js/module.js"},"react":{"path":"lib/js/react.js"}}},"@gov.au/progress-indicator":{"name":"@gov.au/progress-indicator","version":"3.1.7","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/responsive-media":{"name":"@gov.au/responsive-media","version":"2.0.14","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/searchbox":{"name":"@gov.au/searchbox","version":"0.2.2","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/text-inputs":"^2.0.0","@gov.au/buttons":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/select":{"name":"@gov.au/select","version":"2.0.11","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/side-nav":{"name":"@gov.au/side-nav","version":"5.0.8","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/animate":"^1.0.0","@gov.au/accordion":"^7.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-js","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"js":{"path":"lib/js/module.js"},"react":{"path":"lib/js/react.js"}}},"@gov.au/skip-link":{"name":"@gov.au/skip-link","version":"2.0.16","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/table":{"name":"@gov.au/table","version":"0.2.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/tags":{"name":"@gov.au/tags","version":"4.0.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/text-inputs":{"name":"@gov.au/text-inputs","version":"2.1.2","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}}} \ No newline at end of file +{"@gov.au/core":{"name":"@gov.au/core","version":"3.4.2","peerDependencies":{},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/accordion":{"name":"@gov.au/accordion","version":"7.0.8","peerDependencies":{"@gov.au/animate":"^1.0.0","@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-js","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"js":{"path":"lib/js/module.js"},"react":{"path":"lib/js/react.js"}}},"@gov.au/animate":{"name":"@gov.au/animate","version":"1.0.13","peerDependencies":{},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-js","@gov.au/pancake-json"],"js":{"path":"lib/js/module.js"},"sass":{"path":false,"sass-versioning":true}}},"@gov.au/body":{"name":"@gov.au/body","version":"2.2.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/breadcrumbs":{"name":"@gov.au/breadcrumbs","version":"3.0.5","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/buttons":{"name":"@gov.au/buttons","version":"3.0.7","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/callout":{"name":"@gov.au/callout","version":"3.0.2","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/card":{"name":"@gov.au/card","version":"0.3.2","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/control-input":{"name":"@gov.au/control-input","version":"3.0.1","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/cta-link":{"name":"@gov.au/cta-link","version":"2.2.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/direction-links":{"name":"@gov.au/direction-links","version":"3.0.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/footer":{"name":"@gov.au/footer","version":"3.0.5","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/form":{"name":"@gov.au/form","version":"0.1.5","peerDependencies":{"@gov.au/core":"^3.4.1"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/grid-12":{"name":"@gov.au/grid-12","version":"2.1.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/header":{"name":"@gov.au/header","version":"4.1.12","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/headings":{"name":"@gov.au/headings","version":"2.0.11","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/inpage-nav":{"name":"@gov.au/inpage-nav","version":"3.0.6","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/keyword-list":{"name":"@gov.au/keyword-list","version":"3.0.5","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/link-list":{"name":"@gov.au/link-list","version":"3.0.8","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/main-nav":{"name":"@gov.au/main-nav","version":"1.0.8","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/animate":"^1.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-js","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"js":{"path":"lib/js/module.js"},"react":{"path":"lib/js/react.js"}}},"@gov.au/page-alerts":{"name":"@gov.au/page-alerts","version":"2.1.3","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/pagination":{"name":"@gov.au/pagination","version":"0.1.0","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-js","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"js":{"path":"lib/js/module.js"},"react":{"path":"lib/js/react.js"}}},"@gov.au/progress-indicator":{"name":"@gov.au/progress-indicator","version":"3.1.7","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/responsive-media":{"name":"@gov.au/responsive-media","version":"2.0.14","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/searchbox":{"name":"@gov.au/searchbox","version":"0.2.2","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/text-inputs":"^2.0.0","@gov.au/buttons":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/select":{"name":"@gov.au/select","version":"2.0.11","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/side-nav":{"name":"@gov.au/side-nav","version":"5.0.8","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/animate":"^1.0.0","@gov.au/accordion":"^7.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-js","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"js":{"path":"lib/js/module.js"},"react":{"path":"lib/js/react.js"}}},"@gov.au/skip-link":{"name":"@gov.au/skip-link","version":"2.0.16","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/table":{"name":"@gov.au/table","version":"0.2.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/tags":{"name":"@gov.au/tags","version":"4.0.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/text-inputs":{"name":"@gov.au/text-inputs","version":"2.1.2","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}}} \ No newline at end of file diff --git a/packages/pagination/src/js/react.js b/packages/pagination/src/js/react.js index 622e85e26..9cde00a8f 100644 --- a/packages/pagination/src/js/react.js +++ b/packages/pagination/src/js/react.js @@ -52,8 +52,9 @@ AUPagination.defaultProps = { * @param { object } attributeOptions - Default HTML attributes * @param { string } label - aria-label for pagination items * @param { bool } disabled - aria-label for pagination items + * @param {object} onChange - The onChange event handler */ -export const AUPaginationItem = ( { children, className, label, ...attributeOptions } ) => { +export const AUPaginationItem = ( { children, className, label, onClick, ...attributeOptions } ) => { // set aria label attribute if ( children === 'Previous' ) { diff --git a/packages/pagination/src/sass/_module.scss b/packages/pagination/src/sass/_module.scss index e47a5067b..22fcb150f 100644 --- a/packages/pagination/src/sass/_module.scss +++ b/packages/pagination/src/sass/_module.scss @@ -12,41 +12,42 @@ @import '_print.scss'; .au-pagination{ -.au-pagination__item{ - display: inline-block; - padding: 1rem 0.3rem 0.6rem 0.3rem; - margin-right: 0.3rem; - text-decoration: none; - - &:focus { - outline: 0; - } -} - -.au-pagination__controls{ - -} - -.au-pagination__link{ - color: $AU-color-foreground-action; - display: inline-block; - padding: 0.9rem 1rem 0.9rem 1rem; - margin-right: 0.2rem; - text-decoration: none; - - &:hover, &:focus { - text-decoration: none; - color: $AU-color-foreground-text; - outline: 3px solid #d3d3d3; - padding: 0.5rem 1rem 0.5rem 1rem; - } - - &.current { - color: #0B0C0C; - font-weight: 700; - border: none; - pointer-events: none; - cursor: default; - } -} + + .au-pagination__item{ + display: inline-block; + padding: 1rem 0.3rem 0.6rem 0.3rem; + margin-right: 0.3rem; + text-decoration: none; + + &:focus { + outline: 0; + } + } + + .au-pagination__controls{ + + } + + .au-pagination__link{ + color: $AU-color-foreground-action; + display: inline-block; + padding: 0.9rem 1rem 0.9rem 1rem; + margin-right: 0.2rem; + text-decoration: none; + + &:hover, &:focus { + text-decoration: none; + color: $AU-color-foreground-text; + outline: 3px solid #d3d3d3; + padding: 0.7rem 1.1rem 0.7rem 1.1rem; + } + + &.current { + color: #0B0C0C; + font-weight: 700; + border: none; + pointer-events: none; + cursor: default; + } + } } \ No newline at end of file diff --git a/packages/pagination/tests/react/index.js b/packages/pagination/tests/react/index.js index e4268e3a2..3358cf647 100644 --- a/packages/pagination/tests/react/index.js +++ b/packages/pagination/tests/react/index.js @@ -3,7 +3,11 @@ import ReactDOM from 'react-dom'; import AUPagination from './pagination.js'; -const paginationNumbers = ["1", "2", "3"]; +const paginationNumbers = []; +for (var i = 1; i <= 10; i++) { + paginationNumbers.push(i); +} + ReactDOM.render(
    From 8448b8a250ef0f8e93b53d2021b7c422ef1ff570 Mon Sep 17 00:00:00 2001 From: KiriHoy Date: Tue, 29 Oct 2019 08:46:02 +1100 Subject: [PATCH 09/35] changing pagination to be stateful --- packages/pagination/src/js/react.js | 101 ++++++---------------- packages/pagination/src/sass/_module.scss | 7 +- 2 files changed, 29 insertions(+), 79 deletions(-) diff --git a/packages/pagination/src/js/react.js b/packages/pagination/src/js/react.js index 9cde00a8f..37b9ff9c9 100644 --- a/packages/pagination/src/js/react.js +++ b/packages/pagination/src/js/react.js @@ -10,81 +10,32 @@ import React from 'react'; import PropTypes from 'prop-types'; - -/** - * AUpagination - * @param {object[]} items - items in pagination list - * @param {object} currentPage - - * @param {object} attributeOptions - Default HTML attributes - */ - -const AUPagination = ({ items, className, ...attributeOptions}) => { - - return ( - - ) -}; - -AUPagination.propTypes = { - dark: PropTypes.bool, - className: PropTypes.string -}; - -AUPagination.defaultProps = { - className: '' - -}; - -/** - * The pagination item component - * @param { string } className - An additional class, optional - * @param { object } attributeOptions - Default HTML attributes - * @param { string } label - aria-label for pagination items - * @param { bool } disabled - aria-label for pagination items - * @param {object} onChange - The onChange event handler - */ -export const AUPaginationItem = ( { children, className, label, onClick, ...attributeOptions } ) => { - - // set aria label attribute - if ( children === 'Previous' ) { - label = "go to previous page"; - +class AUPagination extends Component { + + constructor(props) { + super(props); + const { totalRecords, recordsPerPage, pageNeighbours, totalPaginationItems, className = '', children, ...attributeOptions } = props; + + this.recordsPerPage = typeof recordsPerPage === 'number' ? recordsPerPage : 10; + this.totalRecords = typeof totalRecords === 'number' ? totalRecords : 0; + + // pageNeighbours can be: 0, 1 or 2 + this.pageNeighbours = typeof pageNeighbours === 'number' + ? Math.max(0, Math.min(pageNeighbours, 2)) + : 0; + + this.totalPaginationItems = Math.ceil( this.totalRecords / this.pageLimit ); + + this.state = { currentPage: 1 }; } - else if (children === 'Next') { - - label = "go to next page"; - - } - else { - label = "Page " + children; - } - - - return
  • - - {children} - -
    • -}; - -AUPaginationItem.propTypes = { - children: PropTypes.node, - className: PropTypes.string -} - -AUPaginationItem.defaultProps = { - className: '' -}; + + } + + AUPagination.propTypes = { + totalRecords: PropTypes.number.isRequired, + pageLimit: PropTypes.number, + pageNeighbours: PropTypes.number, + onPageChanged: PropTypes.func + }; export default AUPagination; diff --git a/packages/pagination/src/sass/_module.scss b/packages/pagination/src/sass/_module.scss index 22fcb150f..1dba0d9e3 100644 --- a/packages/pagination/src/sass/_module.scss +++ b/packages/pagination/src/sass/_module.scss @@ -12,11 +12,10 @@ @import '_print.scss'; .au-pagination{ - + .au-pagination__item{ + @include AU-fontgrid( sm ); display: inline-block; - padding: 1rem 0.3rem 0.6rem 0.3rem; - margin-right: 0.3rem; text-decoration: none; &:focus { @@ -31,7 +30,7 @@ .au-pagination__link{ color: $AU-color-foreground-action; display: inline-block; - padding: 0.9rem 1rem 0.9rem 1rem; + padding: 0.7rem 1.1rem 0.7rem 1.1rem; margin-right: 0.2rem; text-decoration: none; From cb4f3923dfe507255acec7cc368327c1973de6eb Mon Sep 17 00:00:00 2001 From: KiriHoy Date: Tue, 29 Oct 2019 08:58:37 +1100 Subject: [PATCH 10/35] updating pagination constructor --- packages/pagination/src/js/react.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/pagination/src/js/react.js b/packages/pagination/src/js/react.js index 37b9ff9c9..4cfc467c5 100644 --- a/packages/pagination/src/js/react.js +++ b/packages/pagination/src/js/react.js @@ -10,10 +10,15 @@ import React from 'react'; import PropTypes from 'prop-types'; -class AUPagination extends Component { +class AUPagination extends React.Component { - constructor(props) { - super(props); + /** + * Constructor + * @param {object} props - The props object + */ + + constructor( props ) { + super( props ); const { totalRecords, recordsPerPage, pageNeighbours, totalPaginationItems, className = '', children, ...attributeOptions } = props; this.recordsPerPage = typeof recordsPerPage === 'number' ? recordsPerPage : 10; @@ -38,4 +43,8 @@ class AUPagination extends Component { onPageChanged: PropTypes.func }; + AUPagination.defaultProps = { + +}; + export default AUPagination; From 2e194f1b0f730ec38a5ad0f40196a0702cb66c47 Mon Sep 17 00:00:00 2001 From: KiriHoy Date: Wed, 30 Oct 2019 13:44:34 +1100 Subject: [PATCH 11/35] add disabled states to pagination --- packages/pagination/src/js/react.js | 131 ++++++++++++++++++++--- packages/pagination/tests/react/index.js | 7 +- 2 files changed, 118 insertions(+), 20 deletions(-) diff --git a/packages/pagination/src/js/react.js b/packages/pagination/src/js/react.js index 4cfc467c5..380b0e800 100644 --- a/packages/pagination/src/js/react.js +++ b/packages/pagination/src/js/react.js @@ -10,6 +10,26 @@ import React from 'react'; import PropTypes from 'prop-types'; +const LEFT_PAGE = '...'; +const RIGHT_PAGE = '...'; +const NEXT = 'Next'; +const PREVIOUS = 'Previous'; + +//Helper method for creating array of numbers for pagination +const createPaginationarray = (from, to) => { + let i = from; + const PaginationItems = []; + + while (i <= to) { + PaginationItems.push(i); + i += 1; + } + + return PaginationItems; +} + + + class AUPagination extends React.Component { /** @@ -19,32 +39,115 @@ class AUPagination extends React.Component { constructor( props ) { super( props ); - const { totalRecords, recordsPerPage, pageNeighbours, totalPaginationItems, className = '', children, ...attributeOptions } = props; + const { totalResults, recordsPerPage, totalPaginationItems, className = ''} = props; + this.fetchPaginationItems = this. fetchPaginationItems.bind(this); + this.recordsPerPage = typeof recordsPerPage === 'number' ? recordsPerPage : 10; - this.totalRecords = typeof totalRecords === 'number' ? totalRecords : 0; - - // pageNeighbours can be: 0, 1 or 2 - this.pageNeighbours = typeof pageNeighbours === 'number' - ? Math.max(0, Math.min(pageNeighbours, 2)) - : 0; - - this.totalPaginationItems = Math.ceil( this.totalRecords / this.pageLimit ); - + this.totalResults = typeof totalResults === 'number' ? totalResults : 0; + + //calculate number of pagination items + this.totalPaginationItems = Math.ceil( this.totalResults / this.recordsPerPage ); this.state = { currentPage: 1 }; } + + fetchPaginationItems() { + + const totalPaginationItems = this.totalPaginationItems; + const currentPage = this.state.currentPage; + + const startPage = Math.max(2, currentPage); + const endPage = Math.min(totalPaginationItems - 1, currentPage); + let pages = (startPage, endPage); + + return createPaginationarray(1, totalPaginationItems) ; + + } + + render() { + + if (!this.totalResults || this.totalPaginationItems === 1) return null; + + const { currentPage } = this.state; + const items = this.fetchPaginationItems(); + + return ( + + + + ); + + } + + } AUPagination.propTypes = { - totalRecords: PropTypes.number.isRequired, - pageLimit: PropTypes.number, - pageNeighbours: PropTypes.number, - onPageChanged: PropTypes.func + totalResults: PropTypes.number.isRequired, + recordsPerPage: PropTypes.number, + onChanged: PropTypes.func }; AUPagination.defaultProps = { + recordsPerPage: 10, + totalResults: 0, + className: '' + +}; + +/** + * The pagination item component + * @param { string } className - An additional class, optional + * @param { object } attributeOptions - Default HTML attributes + * @param { string } label - aria-label for pagination items + * @param { bool } disabled - aria-label for pagination items + * @param {object} onClick - The onChange event handler + */ +export const AUPaginationItem = ( { children, className, label, onClick, ...attributeOptions } ) => { + // set aria label attribute + if ( children === 'Previous' ) { + label = "go to previous page"; + + } + else if (children === 'Next') { + + label = "go to next page"; + + } + else { + label = "Page " + children; + } + + + return
  • + + {children} + +
    • +}; + +AUPaginationItem.propTypes = { + children: PropTypes.node, + className: PropTypes.string +} + +AUPaginationItem.defaultProps = { + className: '' }; export default AUPagination; diff --git a/packages/pagination/tests/react/index.js b/packages/pagination/tests/react/index.js index 3358cf647..0bc8ddd07 100644 --- a/packages/pagination/tests/react/index.js +++ b/packages/pagination/tests/react/index.js @@ -3,16 +3,11 @@ import ReactDOM from 'react-dom'; import AUPagination from './pagination.js'; -const paginationNumbers = []; -for (var i = 1; i <= 10; i++) { - paginationNumbers.push(i); -} ReactDOM.render(
    - - +
    , document.getElementById('root'), From b4dd1d9d4ceba84d41b5e223507288f65c2e8180 Mon Sep 17 00:00:00 2001 From: KiriHoy Date: Mon, 4 Nov 2019 15:37:53 +1100 Subject: [PATCH 12/35] adding disabled and onClick events to pagination --- packages/pagination/src/js/react.js | 102 ++++++++++++++++------ packages/pagination/src/sass/_module.scss | 16 +++- 2 files changed, 92 insertions(+), 26 deletions(-) diff --git a/packages/pagination/src/js/react.js b/packages/pagination/src/js/react.js index 380b0e800..c7af4ac2d 100644 --- a/packages/pagination/src/js/react.js +++ b/packages/pagination/src/js/react.js @@ -7,7 +7,7 @@ * **************************************************************************************************************************************************************/ -import React from 'react'; +import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; const LEFT_PAGE = '...'; @@ -16,11 +16,12 @@ const NEXT = 'Next'; const PREVIOUS = 'Previous'; //Helper method for creating array of numbers for pagination -const createPaginationarray = (from, to) => { - let i = from; +const createPaginationarray = (first, last) => { + let i = first; const PaginationItems = []; - while (i <= to) { + while (i <= last) { + PaginationItems.push(i); i += 1; } @@ -28,8 +29,6 @@ const createPaginationarray = (from, to) => { return PaginationItems; } - - class AUPagination extends React.Component { /** @@ -39,10 +38,12 @@ class AUPagination extends React.Component { constructor( props ) { super( props ); - const { totalResults, recordsPerPage, totalPaginationItems, className = ''} = props; + const { totalResults, recordsPerPage, totalPaginationItems, className = '' , isDisabled} = props; - this.fetchPaginationItems = this. fetchPaginationItems.bind(this); - + this.fetchPaginationItems = this.fetchPaginationItems.bind(this); + this.handleClick = this.handleClick.bind(this); + this.handleNextClick = this.handleClick.bind(this); + this.recordsPerPage = typeof recordsPerPage === 'number' ? recordsPerPage : 10; this.totalResults = typeof totalResults === 'number' ? totalResults : 0; @@ -51,20 +52,71 @@ class AUPagination extends React.Component { this.state = { currentPage: 1 }; } - fetchPaginationItems() { + + fetchPaginationItems() { const totalPaginationItems = this.totalPaginationItems; const currentPage = this.state.currentPage; + const totalNumbers = 5; + const totalBlocks = 7; + + if (totalPaginationItems > totalBlocks) { + + const startPage = Math.max(2, currentPage - 2); + const endPage = Math.min(totalPaginationItems - 1, currentPage + 2); + let pages = createPaginationarray(startPage, endPage); + const extraResultsLeft = startPage > 2; + const extraResultsRight = (totalPaginationItems - endPage) > 1; + const spillOffset = totalNumbers - (pages.length + 1); + + switch (true) { + + case (extraResultsLeft && !extraResultsRight): { + const extraPages = createPaginationarray(startPage - spillOffset, startPage - 1); + pages = [LEFT_PAGE, ...extraPages, ...pages]; + break; + } + + + case (!extraResultsLeft && extraResultsRight): { + const extraPages = createPaginationarray(endPage + 1, endPage + spillOffset); + pages = [...pages, ...extraPages, RIGHT_PAGE]; + break; + } + + + case (extraResultsLeft && extraResultsRight): + default: { + pages = [LEFT_PAGE, ...pages, RIGHT_PAGE]; + break; + } + } + + return [1, ...pages, totalPaginationItems]; + + } - const startPage = Math.max(2, currentPage); - const endPage = Math.min(totalPaginationItems - 1, currentPage); - - let pages = (startPage, endPage); - return createPaginationarray(1, totalPaginationItems) ; - } + handleClick() { + let listid = Number(event.target.id); + const currentPage = listid; + this.setState({ + currentPage + }); + + } + + handleNextClick() { + let listid = Number(event.target.id); + const currentPage = listid + 1; + this.setState({ + currentPage + }); + + } + render() { if (!this.totalResults || this.totalPaginationItems === 1) return null; @@ -73,19 +125,19 @@ class AUPagination extends React.Component { const items = this.fetchPaginationItems(); return ( - + @@ -99,7 +151,8 @@ class AUPagination extends React.Component { AUPagination.propTypes = { totalResults: PropTypes.number.isRequired, recordsPerPage: PropTypes.number, - onChanged: PropTypes.func + onClick: PropTypes.func, + onPageChanged: PropTypes.func }; AUPagination.defaultProps = { @@ -114,10 +167,9 @@ class AUPagination extends React.Component { * @param { string } className - An additional class, optional * @param { object } attributeOptions - Default HTML attributes * @param { string } label - aria-label for pagination items - * @param { bool } disabled - aria-label for pagination items * @param {object} onClick - The onChange event handler */ -export const AUPaginationItem = ( { children, className, label, onClick, ...attributeOptions } ) => { +export const AUPaginationItem = ( { children, className, label, ...attributeOptions } ) => { // set aria label attribute if ( children === 'Previous' ) { @@ -135,7 +187,7 @@ export const AUPaginationItem = ( { children, className, label, onClick, ...attr return
  • - + {children}
    • diff --git a/packages/pagination/src/sass/_module.scss b/packages/pagination/src/sass/_module.scss index 1dba0d9e3..4cd93d133 100644 --- a/packages/pagination/src/sass/_module.scss +++ b/packages/pagination/src/sass/_module.scss @@ -24,6 +24,7 @@ } .au-pagination__controls{ + } @@ -34,7 +35,7 @@ margin-right: 0.2rem; text-decoration: none; - &:hover, &:focus { + &:hover { text-decoration: none; color: $AU-color-foreground-text; outline: 3px solid #d3d3d3; @@ -48,5 +49,18 @@ pointer-events: none; cursor: default; } + } + + + .disabled { + cursor: not-allowed; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; + opacity: 0.5; + } + .active a { + color: $AU-color-foreground-text; + outline: 3px solid #d3d3d3; + + } } \ No newline at end of file From f08a8fea49bcb3a15873122aa79c3bae93574a9f Mon Sep 17 00:00:00 2001 From: KiriHoy Date: Mon, 11 Nov 2019 12:01:02 +1100 Subject: [PATCH 13/35] add pagination styling --- packages/pagination/src/js/react.js | 148 +++++++++++++++------- packages/pagination/src/sass/_module.scss | 8 +- 2 files changed, 110 insertions(+), 46 deletions(-) diff --git a/packages/pagination/src/js/react.js b/packages/pagination/src/js/react.js index c7af4ac2d..e26f41906 100644 --- a/packages/pagination/src/js/react.js +++ b/packages/pagination/src/js/react.js @@ -6,14 +6,12 @@ * Pagination allows large amounts of content to be separated into multiple pages. * **************************************************************************************************************************************************************/ +import React from 'react'; + import PropTypes from 'prop-types'; -import React, { Fragment } from 'react'; -import PropTypes from 'prop-types'; +const LEFT_ELLIPSIS = 'Left'; +const RIGHT_ELLIPSIS = 'Right'; -const LEFT_PAGE = '...'; -const RIGHT_PAGE = '...'; -const NEXT = 'Next'; -const PREVIOUS = 'Previous'; //Helper method for creating array of numbers for pagination const createPaginationarray = (first, last) => { @@ -42,7 +40,11 @@ class AUPagination extends React.Component { this.fetchPaginationItems = this.fetchPaginationItems.bind(this); this.handleClick = this.handleClick.bind(this); - this.handleNextClick = this.handleClick.bind(this); + this.handlePreviousClick = this.handlePreviousClick.bind(this); + this.handleNextClick = this.handleNextClick.bind(this); + this.handleLeftElipses = this.handleLeftElipses.bind(this); + this.handleRightElipses = this.handleRightElipses.bind(this); + this.recordsPerPage = typeof recordsPerPage === 'number' ? recordsPerPage : 10; this.totalResults = typeof totalResults === 'number' ? totalResults : 0; @@ -52,8 +54,6 @@ class AUPagination extends React.Component { this.state = { currentPage: 1 }; } - - fetchPaginationItems() { const totalPaginationItems = this.totalPaginationItems; const currentPage = this.state.currentPage; @@ -64,35 +64,35 @@ class AUPagination extends React.Component { const startPage = Math.max(2, currentPage - 2); const endPage = Math.min(totalPaginationItems - 1, currentPage + 2); - let pages = createPaginationarray(startPage, endPage); - const extraResultsLeft = startPage > 2; - const extraResultsRight = (totalPaginationItems - endPage) > 1; - const spillOffset = totalNumbers - (pages.length + 1); + let results = createPaginationarray(startPage, endPage); + const extraItemsLeft = startPage > 2; + const extraItemsRight = (totalPaginationItems - endPage) > 1; + const spillOffset = totalNumbers - (results.length + 1); switch (true) { - case (extraResultsLeft && !extraResultsRight): { - const extraPages = createPaginationarray(startPage - spillOffset, startPage - 1); - pages = [LEFT_PAGE, ...extraPages, ...pages]; + case (extraItemsLeft && !extraItemsRight): { + const extraItemsRight = createPaginationarray(startPage - spillOffset, startPage - 1); + results = [LEFT_ELLIPSIS, ...extraItemsRight, ...results]; break; } - case (!extraResultsLeft && extraResultsRight): { - const extraPages = createPaginationarray(endPage + 1, endPage + spillOffset); - pages = [...pages, ...extraPages, RIGHT_PAGE]; + case (!extraItemsLeft && extraItemsRight): { + const extraItemsRight = createPaginationarray(endPage + 1, endPage + spillOffset); + results = [...results, ...extraItemsRight, RIGHT_ELLIPSIS]; break; } - case (extraResultsLeft && extraResultsRight): + case (extraItemsLeft && extraItemsRight): default: { - pages = [LEFT_PAGE, ...pages, RIGHT_PAGE]; + results = [LEFT_ELLIPSIS, ...results, RIGHT_ELLIPSIS]; break; } } - return [1, ...pages, totalPaginationItems]; + return [1, ...results, totalPaginationItems]; } @@ -100,18 +100,46 @@ class AUPagination extends React.Component { } handleClick() { - let listid = Number(event.target.id); - const currentPage = listid; + + let itemId = Number(event.target.id); + const currentPage = itemId; + this.setState({ + currentPage + }); + + } + + handleNextClick() { + + const currentPage = this.state.currentPage + 1; + this.setState({ + currentPage + }); + } + + handlePreviousClick() { + + const currentPage = this.state.currentPage - 1; + this.setState({ + currentPage + }); + } + + handleLeftElipses() { + + const currentPage = this.state.currentPage - 4; this.setState({ currentPage }); } - handleNextClick() { - let listid = Number(event.target.id); - const currentPage = listid + 1; + handleRightElipses() { + + const currentPage = this.state.currentPage + 4; + console.log(currentPage + "CURRENT"); this.setState({ + currentPage }); @@ -123,21 +151,46 @@ class AUPagination extends React.Component { const { currentPage } = this.state; const items = this.fetchPaginationItems(); - + const lastItem = this.totalPaginationItems; return ( @@ -152,7 +205,6 @@ class AUPagination extends React.Component { totalResults: PropTypes.number.isRequired, recordsPerPage: PropTypes.number, onClick: PropTypes.func, - onPageChanged: PropTypes.func }; AUPagination.defaultProps = { @@ -172,19 +224,25 @@ class AUPagination extends React.Component { export const AUPaginationItem = ( { children, className, label, ...attributeOptions } ) => { // set aria label attribute - if ( children === 'Previous' ) { - label = "go to previous page"; - + switch(true){ + case ( children === 'Previous' ): + { + label = "go to previous page"; + break; + } + case (children === 'Next'): + { + label = "go to next page"; + break; + } + default: label = "Page " + children; + break; + } - else if (children === 'Next') { - - label = "go to next page"; + if(className.includes('active')){ + label = "Page " + children + ",curent page"; } - else { - label = "Page " + children; - } - return
  • diff --git a/packages/pagination/src/sass/_module.scss b/packages/pagination/src/sass/_module.scss index 4cd93d133..15f81826e 100644 --- a/packages/pagination/src/sass/_module.scss +++ b/packages/pagination/src/sass/_module.scss @@ -51,13 +51,19 @@ } } - + + .au-pagination__link__ellipsis { + font-size: 2rem; + line-height: 0.5rem; + } .disabled { + pointer-events:none; cursor: not-allowed; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; opacity: 0.5; } + .active a { color: $AU-color-foreground-text; outline: 3px solid #d3d3d3; From 58c4f3af59bd8ba3e65af52898dca4c6fdb536f4 Mon Sep 17 00:00:00 2001 From: KiriHoy Date: Mon, 11 Nov 2019 13:05:59 +1100 Subject: [PATCH 14/35] add html example of pagination --- packages/pagination/tests/index.html | 1 - packages/pagination/tests/site/index.html | 93 ++++++++++++++++++++++- 2 files changed, 89 insertions(+), 5 deletions(-) diff --git a/packages/pagination/tests/index.html b/packages/pagination/tests/index.html index 9ec78bd67..ca9a60bcb 100644 --- a/packages/pagination/tests/index.html +++ b/packages/pagination/tests/index.html @@ -46,7 +46,6 @@

    Test: pagination

     diff --git a/packages/pagination/tests/site/index.html b/packages/pagination/tests/site/index.html index 9f59bc4a1..c17c5dc31 100644 --- a/packages/pagination/tests/site/index.html +++ b/packages/pagination/tests/site/index.html @@ -9,7 +9,7 @@ - + @@ -19,7 +19,7 @@ Test: pagination @@ -35,6 +35,7 @@ +