@gov.au/progress-indicator
npm install @gov.au/progress-indicator
+
+
+ this.handleClick( item ) } key={ i } id={ item } >{ item }
+ );
+
+
+ }) }
+
+
+
+
+
+ { children }
+
+
+};
+
+AUPaginationItem.propTypes = {
+ children: PropTypes.node,
+ className: PropTypes.string,
+ label: PropTypes.string,
+ current: PropTypes.bool
+}
+
+AUPaginationItem.defaultProps = {
+ className: '',
+ label: '',
+ current: false,
+ LinkComponent: 'a'
+};
+
+
+export const AUPaginationQuickJumper = ( { children, className, label, ...attributeOptions } ) => {
+
+ // set aria-label attribute
+ if ( children === 'Left' ){
+ label = "go to previous page";
+ }
+
+ else if(children === 'Right'){
+ label = "go to next page";
+ }
+
+ return
+
+ ...
+
+
+};
+
+AUPaginationQuickJumper.propTypes = {
+ children: PropTypes.node,
+ className: PropTypes.string,
+ label: PropTypes.string
+}
+
+AUPaginationQuickJumper.defaultProps = {
+ className: '',
+ label: ''
+};
+
+export const AUPaginationControls = ( { text, className, label, disabled, ...attributeOptions } ) => {
+
+ // set aria-label attribute
+ if ( text === 'Previous' ){
+ label = "Go to previous page";
+ }
+
+ else if( text === 'Next' ){
+ label = "Go to next page";
+ }
+
+ // set aria-disabled attribute
+ if( className.includes('disabled') ){
+ disabled = true;
+ }
+
+ return
+
+ { text }
+
+
+};
+
+AUPaginationControls.propTypes = {
+ children: PropTypes.node,
+ className: PropTypes.string,
+ label: PropTypes.string,
+ disabled: PropTypes.bool
+
+}
+
+AUPaginationControls.defaultProps = {
+ className: '',
+ label: '',
+ disabled: false
+};
+
+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..def222aff
--- /dev/null
+++ b/packages/pagination/src/sass/_dependencies.scss
@@ -0,0 +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/src/sass/_globals.scss b/packages/pagination/src/sass/_globals.scss
new file mode 100644
index 000000000..f3c9e730e
--- /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 separated 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..b386fee8a
--- /dev/null
+++ b/packages/pagination/src/sass/_module.scss
@@ -0,0 +1,88 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// pagination module
+// Pagination allows large amounts of content to be separated into multiple pages.
+//
+// Content:
+// - sass-versioning
+// - globals
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+
+@import '_globals.scss';
+@import '_print.scss';
+
+.au-pagination{
+ @include AU-fontgrid( xs );
+ font-family: $AU-font;
+ text-align: center;
+
+ &.au-pagination-left{
+ text-align: left;
+ }
+
+ &.au-pagination-right{
+ text-align: right;
+
+ }
+
+ &.au-pagination-center{
+ text-align: center;
+ }
+ .au-pagination-item {
+ display: inline-block;
+ text-decoration: none;
+
+ &:focus {
+ outline: 0;
+ }
+
+ }
+
+ .au-pagination-link {
+ color: $AU-color-foreground-action;
+ padding: 0;
+ text-decoration: none;
+ @include AU-space( padding, 0.77unit 1.2unit 0.77unit 1.2unit );
+ @include AU-space( margin, 0.1unit );
+
+ &:hover {
+ text-decoration: none;
+ color: $AU-color-foreground-text;
+ outline: 3px solid #d3d3d3;
+ }
+
+ & .current {
+ color: #0B0C0C;
+ font-weight: 700;
+ border: none;
+ pointer-events: none;
+ cursor: default;
+ }
+
+ }
+
+ .au-pagination-link--quick-jumper {
+ font-size: 2rem;
+ line-height: 0.5rem;
+ }
+
+ .au-pagination-controls-link{
+ @include AU-space( padding-left, 0.5unit );
+ @include AU-space( padding-right, 0.5unit );
+
+ }
+
+ .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;
+
+ }
+
+}
\ No newline at end of file
diff --git a/packages/pagination/src/sass/_print.scss b/packages/pagination/src/sass/_print.scss
new file mode 100644
index 000000000..8f89e4ff1
--- /dev/null
+++ b/packages/pagination/src/sass/_print.scss
@@ -0,0 +1,11 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// pagination module
+// Pagination allows large amounts of content to be separated 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..ca9a60bcb
--- /dev/null
+++ b/packages/pagination/tests/index.html
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+
+
+
+ Test: pagination
+
+
+
+
+ This website needs JavaScript to work properly.
+
+
+ ← back to all modules
+
+ Test: pagination
+
+
+
+
+
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
+
+
+
+
+ This website needs JavaScript to work properly.
+
+
+ ← 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..fb945b0bb
--- /dev/null
+++ b/packages/pagination/tests/react/index.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { BrowserRouter, Route, Link } from 'react-router-dom';
+
+import AUPagination from './pagination.js';
+
+// Render some pagination
+class App extends React.Component {
+ constructor( props ) {
+ super( props );
+ }
+
+ onChanged(data){
+
+ }
+
+ render() {
+
+ return (
+
+ );
+ }
+};
+
+// render to page
+ReactDOM.render(
+ Test: pagination
+
+
+
+
+ This website needs JavaScript to work properly.
+
+
+ ← back to the module index
+
+ Test: pagination
+
+ Pagination default behaviour
+
+
+
+
+
+ Right-hand side ellipsis clicked
+
+
+
+
+
+ Last pagination item selected
+
+
+
+
+
+
+
+
\ No newline at end of file
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';