From f9fd5a974ef6f21caae85da1ed74552c3e9cde8f Mon Sep 17 00:00:00 2001 From: "Adam A. Zerella" Date: Tue, 2 Apr 2019 12:03:59 +1100 Subject: [PATCH 1/8] Seperated single react files into respective react/ dir --- .templates/new-module/package.json | 4 +-- packages/accordion/package.json | 4 +-- packages/accordion/src/{js => react}/react.js | 34 +++++++++++++++++++ packages/breadcrumbs/package.json | 4 +-- .../breadcrumbs/src/{js => react}/react.js | 15 ++++++++ packages/buttons/package.json | 4 +-- packages/buttons/src/{js => react}/react.js | 0 packages/callout/package.json | 4 +-- packages/callout/src/{js => react}/react.js | 0 packages/control-input/package.json | 4 +-- .../control-input/src/{js => react}/react.js | 0 packages/cta-link/package.json | 4 +-- packages/cta-link/src/{js => react}/react.js | 0 packages/direction-links/package.json | 4 +-- .../src/{js => react}/react.js | 0 packages/footer/package.json | 4 +-- packages/footer/src/{js => react}/react.js | 0 packages/header/package.json | 4 +-- packages/header/src/{js => react}/react.js | 0 packages/headings/package.json | 4 +-- packages/headings/src/{js => react}/react.js | 0 packages/inpage-nav/package.json | 4 +-- .../inpage-nav/src/{js => react}/react.js | 0 packages/keyword-list/package.json | 4 +-- .../keyword-list/src/{js => react}/react.js | 0 packages/link-list/package.json | 4 +-- packages/link-list/src/{js => react}/react.js | 0 packages/main-nav/package.json | 4 +-- packages/main-nav/src/{js => react}/react.js | 0 packages/page-alerts/package.json | 4 +-- .../page-alerts/src/{js => react}/react.js | 0 packages/progress-indicator/package.json | 4 +-- .../src/{js => react}/react.js | 0 packages/select/package.json | 4 +-- packages/select/src/{js => react}/react.js | 0 packages/side-nav/package.json | 4 +-- packages/side-nav/src/{js => react}/react.js | 0 packages/skip-link/package.json | 4 +-- packages/skip-link/src/{js => react}/react.js | 0 packages/tags/package.json | 4 +-- packages/tags/src/{js => react}/react.js | 0 packages/text-inputs/package.json | 4 +-- .../text-inputs/src/{js => react}/react.js | 2 +- scripts/helper.js | 33 +++++++++--------- 44 files changed, 111 insertions(+), 61 deletions(-) rename packages/accordion/src/{js => react}/react.js (98%) rename packages/breadcrumbs/src/{js => react}/react.js (96%) rename packages/buttons/src/{js => react}/react.js (100%) rename packages/callout/src/{js => react}/react.js (100%) rename packages/control-input/src/{js => react}/react.js (100%) rename packages/cta-link/src/{js => react}/react.js (100%) rename packages/direction-links/src/{js => react}/react.js (100%) rename packages/footer/src/{js => react}/react.js (100%) rename packages/header/src/{js => react}/react.js (100%) rename packages/headings/src/{js => react}/react.js (100%) rename packages/inpage-nav/src/{js => react}/react.js (100%) rename packages/keyword-list/src/{js => react}/react.js (100%) rename packages/link-list/src/{js => react}/react.js (100%) rename packages/main-nav/src/{js => react}/react.js (100%) rename packages/page-alerts/src/{js => react}/react.js (100%) rename packages/progress-indicator/src/{js => react}/react.js (100%) rename packages/select/src/{js => react}/react.js (100%) rename packages/side-nav/src/{js => react}/react.js (100%) rename packages/skip-link/src/{js => react}/react.js (100%) rename packages/tags/src/{js => react}/react.js (100%) rename packages/text-inputs/src/{js => react}/react.js (95%) diff --git a/.templates/new-module/package.json b/.templates/new-module/package.json index c5c87997c..f261f0228 100644 --- a/.templates/new-module/package.json +++ b/.templates/new-module/package.json @@ -52,11 +52,11 @@ "path": "lib/js/module.js" }, "react": { - "path": "lib/js/react.js" + "path": "lib/react/react.js" } } }, - "main": "lib/js/react.es5.js", + "main": "lib/react/react.es5.js", "dependencies": { "@gov.au/pancake": "~1", "@gov.au/pancake-js": "~1", diff --git a/packages/accordion/package.json b/packages/accordion/package.json index cfa11d0a5..c92678a8e 100644 --- a/packages/accordion/package.json +++ b/packages/accordion/package.json @@ -52,11 +52,11 @@ "path": "lib/js/module.js" }, "react": { - "path": "lib/js/react.js" + "path": "lib/react/react.js" } } }, - "main": "lib/js/react.es5.js", + "main": "lib/react/react.es5.js", "dependencies": { "@gov.au/pancake": "~1", "@gov.au/pancake-js": "~1", diff --git a/packages/accordion/src/js/react.js b/packages/accordion/src/react/react.js similarity index 98% rename from packages/accordion/src/js/react.js rename to packages/accordion/src/react/react.js index e002c7633..d714ebf98 100644 --- a/packages/accordion/src/js/react.js +++ b/packages/accordion/src/react/react.js @@ -390,20 +390,54 @@ class AUaccordion extends React.PureComponent { } }; + AUaccordion.propTypes = { + /** + * + */ children: PropTypes.node.isRequired, + /** + * + */ header: PropTypes.string.isRequired, + /** + * + */ closed: PropTypes.bool, + /** + * + */ speed: PropTypes.number, + /** + * + */ dark: PropTypes.bool, + /** + * + */ onOpen: PropTypes.func, + /** + * + */ afterOpen: PropTypes.func, + /** + * + */ onClose: PropTypes.func, + /** + * + */ afterClose: PropTypes.func, + /** + * + */ className: PropTypes.string, }; AUaccordion.defaultProps = { + /** + * + */ closed: false, }; diff --git a/packages/breadcrumbs/package.json b/packages/breadcrumbs/package.json index 162cf6dd5..648fc8b9d 100644 --- a/packages/breadcrumbs/package.json +++ b/packages/breadcrumbs/package.json @@ -50,11 +50,11 @@ "sass-versioning": true }, "react": { - "path": "lib/js/react.js" + "path": "lib/react/react.js" } } }, - "main": "lib/js/react.es5.js", + "main": "lib/react/react.es5.js", "dependencies": { "@gov.au/pancake": "~1", "@gov.au/pancake-sass": "~2", diff --git a/packages/breadcrumbs/src/js/react.js b/packages/breadcrumbs/src/react/react.js similarity index 96% rename from packages/breadcrumbs/src/js/react.js rename to packages/breadcrumbs/src/react/react.js index 9bf5e9ef6..0aa856bb7 100644 --- a/packages/breadcrumbs/src/js/react.js +++ b/packages/breadcrumbs/src/react/react.js @@ -42,18 +42,33 @@ const AUbreadcrumbs = ({ dark, label, items, linkComponent, className = '', ...a ); AUbreadcrumbs.propTypes = { + /** + * + */ dark: PropTypes.bool, + /** + * + */ label: PropTypes.string.isRequired, + /** + * + */ items: PropTypes.arrayOf( PropTypes.shape({ link: PropTypes.string, text: PropTypes.string.isRequired, }) ).isRequired, + /** + * + */ linkComponent: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]) }; AUbreadcrumbs.defaultProps = { + /** + * + */ linkComponent: 'a', }; diff --git a/packages/buttons/package.json b/packages/buttons/package.json index 71f710c84..c420dac29 100644 --- a/packages/buttons/package.json +++ b/packages/buttons/package.json @@ -48,11 +48,11 @@ "sass-versioning": true }, "react": { - "path": "lib/js/react.js" + "path": "lib/react/react.js" } } }, - "main": "lib/js/react.es5.js", + "main": "lib/react/react.es5.js", "dependencies": { "@gov.au/pancake": "~1", "@gov.au/pancake-sass": "~2", diff --git a/packages/buttons/src/js/react.js b/packages/buttons/src/react/react.js similarity index 100% rename from packages/buttons/src/js/react.js rename to packages/buttons/src/react/react.js diff --git a/packages/callout/package.json b/packages/callout/package.json index 1d422f208..2467c3fe7 100644 --- a/packages/callout/package.json +++ b/packages/callout/package.json @@ -52,11 +52,11 @@ "sass-versioning": true }, "react": { - "path": "lib/js/react.js" + "path": "lib/react/react.js" } } }, - "main": "lib/js/react.es5.js", + "main": "lib/react/react.es5.js", "dependencies": { "@gov.au/pancake": "~1", "@gov.au/pancake-sass": "~2", diff --git a/packages/callout/src/js/react.js b/packages/callout/src/react/react.js similarity index 100% rename from packages/callout/src/js/react.js rename to packages/callout/src/react/react.js diff --git a/packages/control-input/package.json b/packages/control-input/package.json index c168a31ea..b6f4895cf 100644 --- a/packages/control-input/package.json +++ b/packages/control-input/package.json @@ -48,11 +48,11 @@ "sass-versioning": true }, "react": { - "path": "lib/js/react.js" + "path": "lib/react/react.js" } } }, - "main": "lib/js/react.es5.js", + "main": "lib/react/react.es5.js", "dependencies": { "@gov.au/pancake": "~1", "@gov.au/pancake-sass": "~2", diff --git a/packages/control-input/src/js/react.js b/packages/control-input/src/react/react.js similarity index 100% rename from packages/control-input/src/js/react.js rename to packages/control-input/src/react/react.js diff --git a/packages/cta-link/package.json b/packages/cta-link/package.json index f239a02dc..1835b9f0e 100644 --- a/packages/cta-link/package.json +++ b/packages/cta-link/package.json @@ -51,11 +51,11 @@ "sass-versioning": true }, "react": { - "path": "lib/js/react.js" + "path": "lib/react/react.js" } } }, - "main": "lib/js/react.es5.js", + "main": "lib/react/react.es5.js", "dependencies": { "@gov.au/pancake": "~1", "@gov.au/pancake-sass": "~2", diff --git a/packages/cta-link/src/js/react.js b/packages/cta-link/src/react/react.js similarity index 100% rename from packages/cta-link/src/js/react.js rename to packages/cta-link/src/react/react.js diff --git a/packages/direction-links/package.json b/packages/direction-links/package.json index 29d76df3b..116274ecf 100644 --- a/packages/direction-links/package.json +++ b/packages/direction-links/package.json @@ -54,11 +54,11 @@ "sass-versioning": true }, "react": { - "path": "lib/js/react.js" + "path": "lib/react/react.js" } } }, - "main": "lib/js/react.es5.js", + "main": "lib/react/react.es5.js", "dependencies": { "@gov.au/pancake": "~1", "@gov.au/pancake-sass": "~2", diff --git a/packages/direction-links/src/js/react.js b/packages/direction-links/src/react/react.js similarity index 100% rename from packages/direction-links/src/js/react.js rename to packages/direction-links/src/react/react.js diff --git a/packages/footer/package.json b/packages/footer/package.json index 1da477e6d..c621cac7d 100644 --- a/packages/footer/package.json +++ b/packages/footer/package.json @@ -51,11 +51,11 @@ "sass-versioning": true }, "react": { - "path": "lib/js/react.js" + "path": "lib/react/react.js" } } }, - "main": "lib/js/react.es5.js", + "main": "lib/react/react.es5.js", "dependencies": { "@gov.au/pancake": "~1", "@gov.au/pancake-sass": "~2", diff --git a/packages/footer/src/js/react.js b/packages/footer/src/react/react.js similarity index 100% rename from packages/footer/src/js/react.js rename to packages/footer/src/react/react.js diff --git a/packages/header/package.json b/packages/header/package.json index 0521d3e51..9f88c1315 100644 --- a/packages/header/package.json +++ b/packages/header/package.json @@ -50,11 +50,11 @@ "sass-versioning": true }, "react": { - "path": "lib/js/react.js" + "path": "lib/react/react.js" } } }, - "main": "lib/js/react.es5.js", + "main": "lib/react/react.es5.js", "dependencies": { "@gov.au/pancake": "~1", "@gov.au/pancake-sass": "~2", diff --git a/packages/header/src/js/react.js b/packages/header/src/react/react.js similarity index 100% rename from packages/header/src/js/react.js rename to packages/header/src/react/react.js diff --git a/packages/headings/package.json b/packages/headings/package.json index 19ffa9950..b0f2d9681 100644 --- a/packages/headings/package.json +++ b/packages/headings/package.json @@ -52,11 +52,11 @@ "sass-versioning": true }, "react": { - "path": "lib/js/react.js" + "path": "lib/react/react.js" } } }, - "main": "lib/js/react.es5.js", + "main": "lib/react/react.es5.js", "dependencies": { "@gov.au/pancake": "~1", "@gov.au/pancake-sass": "~2", diff --git a/packages/headings/src/js/react.js b/packages/headings/src/react/react.js similarity index 100% rename from packages/headings/src/js/react.js rename to packages/headings/src/react/react.js diff --git a/packages/inpage-nav/package.json b/packages/inpage-nav/package.json index fbd311c1c..bf3b28226 100644 --- a/packages/inpage-nav/package.json +++ b/packages/inpage-nav/package.json @@ -52,11 +52,11 @@ "sass-versioning": true }, "react": { - "path": "lib/js/react.js" + "path": "lib/react/react.js" } } }, - "main": "lib/js/react.es5.js", + "main": "lib/react/react.es5.js", "dependencies": { "@gov.au/pancake": "~1", "@gov.au/pancake-sass": "~2", diff --git a/packages/inpage-nav/src/js/react.js b/packages/inpage-nav/src/react/react.js similarity index 100% rename from packages/inpage-nav/src/js/react.js rename to packages/inpage-nav/src/react/react.js diff --git a/packages/keyword-list/package.json b/packages/keyword-list/package.json index 6426bb147..f2098ff89 100644 --- a/packages/keyword-list/package.json +++ b/packages/keyword-list/package.json @@ -52,11 +52,11 @@ "sass-versioning": true }, "react": { - "path": "lib/js/react.js" + "path": "lib/react/react.js" } } }, - "main": "lib/js/react.es5.js", + "main": "lib/react/react.es5.js", "dependencies": { "@gov.au/pancake": "~1", "@gov.au/pancake-sass": "~2", diff --git a/packages/keyword-list/src/js/react.js b/packages/keyword-list/src/react/react.js similarity index 100% rename from packages/keyword-list/src/js/react.js rename to packages/keyword-list/src/react/react.js diff --git a/packages/link-list/package.json b/packages/link-list/package.json index 6d691ba2b..b83bf9937 100644 --- a/packages/link-list/package.json +++ b/packages/link-list/package.json @@ -51,11 +51,11 @@ "sass-versioning": true }, "react": { - "path": "lib/js/react.js" + "path": "lib/react/react.js" } } }, - "main": "lib/js/react.es5.js", + "main": "lib/react/react.es5.js", "dependencies": { "@gov.au/pancake": "~1", "@gov.au/pancake-sass": "~2", diff --git a/packages/link-list/src/js/react.js b/packages/link-list/src/react/react.js similarity index 100% rename from packages/link-list/src/js/react.js rename to packages/link-list/src/react/react.js diff --git a/packages/main-nav/package.json b/packages/main-nav/package.json index 83563b7a1..7e7d6a33e 100644 --- a/packages/main-nav/package.json +++ b/packages/main-nav/package.json @@ -52,11 +52,11 @@ "path": "lib/js/module.js" }, "react": { - "path": "lib/js/react.js" + "path": "lib/react/react.js" } } }, - "main": "lib/js/react.es5.js", + "main": "lib/react/react.es5.js", "dependencies": { "@gov.au/pancake": "~1", "@gov.au/pancake-js": "~1", diff --git a/packages/main-nav/src/js/react.js b/packages/main-nav/src/react/react.js similarity index 100% rename from packages/main-nav/src/js/react.js rename to packages/main-nav/src/react/react.js diff --git a/packages/page-alerts/package.json b/packages/page-alerts/package.json index 742f8a0fb..8823c737a 100644 --- a/packages/page-alerts/package.json +++ b/packages/page-alerts/package.json @@ -55,11 +55,11 @@ "sass-versioning": true }, "react": { - "path": "lib/js/react.js" + "path": "lib/react/react.js" } } }, - "main": "lib/js/react.es5.js", + "main": "lib/react/react.es5.js", "dependencies": { "@gov.au/pancake": "~1", "@gov.au/pancake-sass": "~2", diff --git a/packages/page-alerts/src/js/react.js b/packages/page-alerts/src/react/react.js similarity index 100% rename from packages/page-alerts/src/js/react.js rename to packages/page-alerts/src/react/react.js diff --git a/packages/progress-indicator/package.json b/packages/progress-indicator/package.json index fb60e9a76..aaffebe55 100644 --- a/packages/progress-indicator/package.json +++ b/packages/progress-indicator/package.json @@ -48,11 +48,11 @@ "sass-versioning": true }, "react": { - "path": "lib/js/react.js" + "path": "lib/react/react.js" } } }, - "main": "lib/js/react.es5.js", + "main": "lib/react/react.es5.js", "dependencies": { "@gov.au/pancake": "~1", "@gov.au/pancake-sass": "~2", diff --git a/packages/progress-indicator/src/js/react.js b/packages/progress-indicator/src/react/react.js similarity index 100% rename from packages/progress-indicator/src/js/react.js rename to packages/progress-indicator/src/react/react.js diff --git a/packages/select/package.json b/packages/select/package.json index c89c0952d..dd6c5a9bd 100644 --- a/packages/select/package.json +++ b/packages/select/package.json @@ -50,11 +50,11 @@ "sass-versioning": true }, "react": { - "path": "lib/js/react.js" + "path": "lib/react/react.js" } } }, - "main": "lib/js/react.es5.js", + "main": "lib/react/react.es5.js", "dependencies": { "@gov.au/pancake": "~1", "@gov.au/pancake-sass": "~2", diff --git a/packages/select/src/js/react.js b/packages/select/src/react/react.js similarity index 100% rename from packages/select/src/js/react.js rename to packages/select/src/react/react.js diff --git a/packages/side-nav/package.json b/packages/side-nav/package.json index fce03221d..bb06cec99 100644 --- a/packages/side-nav/package.json +++ b/packages/side-nav/package.json @@ -52,11 +52,11 @@ "path": "lib/js/module.js" }, "react": { - "path": "lib/js/react.js" + "path": "lib/react/react.js" } } }, - "main": "lib/js/react.es5.js", + "main": "lib/react/react.es5.js", "dependencies": { "@gov.au/pancake": "~1", "@gov.au/pancake-js": "~1", diff --git a/packages/side-nav/src/js/react.js b/packages/side-nav/src/react/react.js similarity index 100% rename from packages/side-nav/src/js/react.js rename to packages/side-nav/src/react/react.js diff --git a/packages/skip-link/package.json b/packages/skip-link/package.json index aed9a227d..7088ee92e 100644 --- a/packages/skip-link/package.json +++ b/packages/skip-link/package.json @@ -52,11 +52,11 @@ "sass-versioning": true }, "react": { - "path": "lib/js/react.js" + "path": "lib/react/react.js" } } }, - "main": "lib/js/react.es5.js", + "main": "lib/react/react.es5.js", "dependencies": { "@gov.au/pancake": "~1", "@gov.au/pancake-sass": "~2", diff --git a/packages/skip-link/src/js/react.js b/packages/skip-link/src/react/react.js similarity index 100% rename from packages/skip-link/src/js/react.js rename to packages/skip-link/src/react/react.js diff --git a/packages/tags/package.json b/packages/tags/package.json index 5c3669664..021406f7f 100644 --- a/packages/tags/package.json +++ b/packages/tags/package.json @@ -50,11 +50,11 @@ "sass-versioning": true }, "react": { - "path": "lib/js/react.js" + "path": "lib/react/react.js" } } }, - "main": "lib/js/react.es5.js", + "main": "lib/react/react.es5.js", "dependencies": { "@gov.au/pancake": "~1", "@gov.au/pancake-sass": "~2", diff --git a/packages/tags/src/js/react.js b/packages/tags/src/react/react.js similarity index 100% rename from packages/tags/src/js/react.js rename to packages/tags/src/react/react.js diff --git a/packages/text-inputs/package.json b/packages/text-inputs/package.json index a2190382d..f417131ac 100644 --- a/packages/text-inputs/package.json +++ b/packages/text-inputs/package.json @@ -56,11 +56,11 @@ "sass-versioning": true }, "react": { - "path": "lib/js/react.js" + "path": "lib/react/react.js" } } }, - "main": "lib/js/react.es5.js", + "main": "lib/react/react.es5.js", "dependencies": { "@gov.au/pancake": "~1", "@gov.au/pancake-sass": "~2", diff --git a/packages/text-inputs/src/js/react.js b/packages/text-inputs/src/react/react.js similarity index 95% rename from packages/text-inputs/src/js/react.js rename to packages/text-inputs/src/react/react.js index bad27ccb0..0db9ebd45 100644 --- a/packages/text-inputs/src/js/react.js +++ b/packages/text-inputs/src/react/react.js @@ -29,7 +29,7 @@ import PropTypes from 'prop-types'; * @param {string} className - An additional class, optional * @param {object} attributeOptions - Any other attribute options */ -const AUtextInput = ({ as, dark, block, status, width, type = 'text', className = '', ...attributeOptions }) => ( +const AUtextInput = ( { as, dark, block, status, width, type = 'text', className = '', ...attributeOptions } ) => ( as === 'textarea' ? + : +); + +AUtextInput.propTypes = { + /** + * The kind of input, can be either 'input' or 'textarea', default: 'input'. + */ + as: PropTypes.oneOf([ 'input', 'textarea' ]), + /** + * A dark variation of the component. + */ + dark: PropTypes.bool, + /** + * Add the block variation class. + */ + block: PropTypes.bool, + /** + * Mark this field as either 'valid' or 'invalid'. + */ + status: PropTypes.oneOf([ 'valid', 'invalid' ]), + /** + * The class name for the element, optional. + */ + className: PropTypes.string, + /** + * + */ + width: PropTypes.oneOf([ 'xs', 'sm', 'md', 'lg', 'xl' ]) +}; + +AUtextInput.defaultProps = { + as: 'input', +}; + +export default AUtextInput; From cd5a4585f9f54d2246cbfbc99a974a98601ee41a Mon Sep 17 00:00:00 2001 From: "Adam A. Zerella" Date: Thu, 4 Apr 2019 10:19:28 +1100 Subject: [PATCH 8/8] Removed old react file names --- packages/accordion/src/react/react.js | 441 --------------- packages/breadcrumbs/src/react/react.js | 72 --- packages/buttons/src/react/react.js | 122 ---- packages/callout/src/react/react.js | 170 ------ packages/control-input/src/react/react.js | 151 ----- packages/cta-link/src/react/react.js | 82 --- packages/direction-links/src/react/react.js | 101 ---- packages/footer/src/react/react.js | 107 ---- packages/header/src/react/react.js | 164 ------ packages/headings/src/react/react.js | 69 --- packages/inpage-nav/src/react/react.js | 155 ----- packages/keyword-list/src/react/react.js | 148 ----- packages/link-list/src/react/react.js | 131 ----- packages/main-nav/src/react/react.js | 530 ------------------ packages/page-alerts/src/react/react.js | 82 --- .../progress-indicator/src/react/react.js | 129 ----- packages/select/src/react/react.js | 105 ---- packages/side-nav/src/react/react.js | 201 ------- packages/skip-link/src/react/react.js | 81 --- packages/tags/src/react/react.js | 120 ---- packages/text-inputs/src/react/react.js | 88 --- 21 files changed, 3249 deletions(-) delete mode 100644 packages/accordion/src/react/react.js delete mode 100644 packages/breadcrumbs/src/react/react.js delete mode 100644 packages/buttons/src/react/react.js delete mode 100644 packages/callout/src/react/react.js delete mode 100644 packages/control-input/src/react/react.js delete mode 100644 packages/cta-link/src/react/react.js delete mode 100644 packages/direction-links/src/react/react.js delete mode 100644 packages/footer/src/react/react.js delete mode 100644 packages/header/src/react/react.js delete mode 100644 packages/headings/src/react/react.js delete mode 100644 packages/inpage-nav/src/react/react.js delete mode 100644 packages/keyword-list/src/react/react.js delete mode 100644 packages/link-list/src/react/react.js delete mode 100644 packages/main-nav/src/react/react.js delete mode 100644 packages/page-alerts/src/react/react.js delete mode 100644 packages/progress-indicator/src/react/react.js delete mode 100644 packages/select/src/react/react.js delete mode 100644 packages/side-nav/src/react/react.js delete mode 100644 packages/skip-link/src/react/react.js delete mode 100644 packages/tags/src/react/react.js delete mode 100644 packages/text-inputs/src/react/react.js diff --git a/packages/accordion/src/react/react.js b/packages/accordion/src/react/react.js deleted file mode 100644 index eb17e0e09..000000000 --- a/packages/accordion/src/react/react.js +++ /dev/null @@ -1,441 +0,0 @@ -/*! [replace-name] v[replace-version] */ -/*************************************************************************************************************************************************************** - * - * Accordion function - * - * A component to allow users to show or hide page elements. - * - **************************************************************************************************************************************************************/ - -import React from 'react'; -import PropTypes from 'prop-types'; - -import AU from '@gov.au/animate'; // interdependency with our animate lib - - -// The following line will be replaced automatically with generic imports for the ES5 pipeline. -// You can safely ignore this bit if you use this module with pancake -// -// [replace-imports] - - -let IDstart = 0; - -class AUaccordion extends React.PureComponent { - /** - * Constructor - * Create state and iterate over a unique ID - * - * @param {object} props - The props object - */ - constructor( props ) { - super( props ); - - const { header, closed, speed, onOpen, afterOpen, onClose, afterClose, dark, className = '', children, ...attributeOptions } = props; - - this.setAriaRoles = this.setAriaRoles.bind( this ); - this.toggleClasses = this.toggleClasses.bind( this ); - this.removeClass = this.removeClass.bind( this ); - this.addClass = this.addClass.bind( this ); - this.accordionToggle = this.accordionToggle.bind( this ); - this.accordionOpen = this.accordionOpen.bind( this ); - this.accordionClose = this.accordionClose.bind( this ); - this.toggle = this.toggle.bind( this ); - this.className = className; - this.attributeOptions = attributeOptions; - - // Generate a unique ID and our css class - IDstart ++; - - this.ID = `accordion${ IDstart }`; - this.closeClass = this.props.closed ? 'au-accordion--closed' : ''; - } - - - /** - * Handle state if supplied - */ - componentDidUpdate( prevProps ) { - if ( this.props.closed !== prevProps.closed ) { - if ( this.props.closed ) { - this.accordionClose( this.accordionHeader ); - } - else { - this.accordionOpen( this.accordionHeader ); - } - } - } - - - /** - * Set the correct Aria roles for given element on the accordion title and body - * - * @param {object} element - The DOM element we want to set attributes for - * @param {object} target - The DOM element we want to set attributes for - * @param {string} state - The DOM element we want to set attributes for - */ - setAriaRoles( element, target, state ) { - - if( state === 'closing' ) { - element.setAttribute( 'aria-expanded', false ); - } - else { - element.setAttribute( 'aria-expanded', true ); - } - } - - - /** - * IE8 compatible function for replacing classes on a DOM node - * - * @param {object} element - The DOM element we want to toggle classes on - * @param {object} target - The DOM element we want to toggle classes on - * @param {object} state - The current state of the animation on the element - * @param {string} openingClass - The firstClass you want to toggle on the DOM node - * @param {string} closingClass - The secondClass you want to toggle on the DOM node - */ - toggleClasses( element, state, openingClass, closingClass ) { - if( state === 'opening' || state === 'open' ) { - var oldClass = openingClass || 'au-accordion--closed'; - var newClass = closingClass || 'au-accordion--open'; - } - else { - var oldClass = closingClass || 'au-accordion--open'; - var newClass = openingClass || 'au-accordion--closed'; - } - - this.removeClass( element, oldClass ); - this.addClass( element, newClass ); - } - - - /** - * IE8 compatible function for removing a class - * - * @param {object} element - The DOM element we want to manipulate - * @param {object} className - The name of the class to be removed - */ - removeClass( element, className ) { - if( element.classList ) { - element.classList.remove( className ); - } - else { - element.className = element.className.replace( new RegExp("(^|\\b)" + className.split(" ").join("|") + "(\\b|$)", "gi"), " " ); - } - } - - - /** - * IE8 compatible function for adding a class - * - * @param {object} element - The DOM element we want to manipulate - * @param {object} className - The name of the class to be added - */ - addClass( element, className ) { - if( element.classList ) { - element.classList.add( className ); - } - else { - element.className = element.className + " " + className; - } - } - - - /** - * Toggle an accordion element - * - * @param {string} elements - The DOM node/s to toggle - * @param {integer} speed - The speed in ms for the animation - * @param {object} callbacks - An object of four optional callbacks: { onOpen, afterOpen, onClose, afterClose } - * - */ - accordionToggle( elements, speed, callbacks ) { - const SetAriaRoles = this.setAriaRoles; - const ToggleClasses = this.toggleClasses; - - // stop event propagation - try { - window.event.cancelBubble = true; - event.stopPropagation(); - } - catch( error ) {} - - // making sure we can iterate over just one DOM element - if( elements.length === undefined ) { - elements = [ elements ]; - } - - // check this once - if( typeof callbacks != 'object' ) { - callbacks = {}; - } - - for( var i = 0; i < elements.length; i++ ) { - - var element = elements[ i ]; - var targetId = element.getAttribute('aria-controls'); - var target = document.getElementById( targetId ); - - if( target == null ) { - throw new Error('AU.animate.Toggle cannot find the target to be toggled from inside aria-controls'); - } - - target.style.display = 'block'; - - - (function( element ) { - AU.animate.Toggle({ - element: target, - property: 'height', - speed: speed || 250, - prefunction: function( target, state ) { - if( state === 'opening' ) { - target.style.display = 'block'; - - // run when opening - if( typeof callbacks.onOpen === 'function' ) { - callbacks.onOpen(); - } - } - else { - // run when closing - if( typeof callbacks.onClose === 'function' ) { - callbacks.onClose(); - } - } - - SetAriaRoles( element, target, state ); - ToggleClasses( element, state ); - }, - postfunction: function( target, state ) { - if( state === 'closed' ) { - target.style.display = ''; - target.style.height = ''; - - // run after opening - if( typeof callbacks.afterOpen === 'function' ) { - callbacks.afterClose(); - } - } - else { - - // run after closing - if( typeof callbacks.afterClose === 'function' ) { - callbacks.afterOpen(); - } - } - - ToggleClasses( target, state ); - }, - }); - })( element ); - - } - - return false; - - } - - - /** - * Open a group of accordion elements - * - * @param {string} elements - The DOM node/s to toggle - * @param {integer} speed - The speed in ms for the animation - * - */ - accordionOpen( elements, speed ) { - const ToggleClasses = this.toggleClasses; - - // stop event propagation - try { - window.event.cancelBubble = true; - event.stopPropagation(); - } - catch( error ) {} - - if( elements.length === undefined ) { - elements = [ elements ]; - } - - for( var i = 0; i < elements.length; i++ ) { - - var element = elements[ i ]; - var targetId = element.getAttribute('aria-controls'); - var target = document.getElementById( targetId ); - - // let’s find out if this accordion is still closed - var height = 0; - if( typeof getComputedStyle !== 'undefined' ) { - height = window.getComputedStyle( target ).height; - } - else { - height = target.currentStyle.height; - } - - if( parseInt( height ) === 0 ) { - target.style.height = '0px'; - } - - target.style.display = ''; - this.toggleClasses( target, 'opening' ); - this.toggleClasses( element, 'opening' ); - this.setAriaRoles( element, target, 'opening' ); - - (function( target, speed, element ) { - AU.animate.Run({ - element: target, - property: 'height', - endSize: 'auto', - speed: speed || 250, - callback: function() { - ToggleClasses( element, 'opening' ); - }, - }); - })( target, speed, element ); - } - - } - - - /** - * Close a group of accordion elements - * - * @param {string} elements - The DOM node/s to toggle - * @param {integer} speed - The speed in ms for the animation - * - */ - accordionClose( elements, speed ) { - - const ToggleClasses = this.toggleClasses; - - // stop event propagation - try { - window.event.cancelBubble = true; - event.stopPropagation(); - } - catch( error ) {} - - if( elements.length === undefined ) { - elements = [ elements ]; - } - - for( var i = 0; i < elements.length; i++ ) { - - var element = elements[ i ]; - var targetId = element.getAttribute('aria-controls'); - var target = document.getElementById( targetId ); - - this.toggleClasses( element, 'closing' ); - this.setAriaRoles( element, target, 'closing' ); - - (function( target, speed ) { - AU.animate.Run({ - element: target, - property: 'height', - endSize: 0, - speed: speed || 250, - callback: function() { - target.style.display = ''; - target.style.height = ''; - ToggleClasses( target, 'close' ); - }, - }); - })( target, speed ); - } - - } - - - /** - * Toggle an accordion on click - * - * @param {object} event - The event object of the click - */ - toggle( event ) { - event.preventDefault(); - - this.accordionToggle( this.accordionHeader, this.props.speed, { - onOpen: this.props.onOpen, - afterOpen: this.props.afterOpen, - onClose: this.props.onClose, - afterClose: this.props.afterClose, - }); - } - - - render() { - return ( -
- - -
-
- - { this.props.children } - -
-
-
- ); - } -}; - - -AUaccordion.propTypes = { - /** - * The elements inside. - */ - children: PropTypes.node.isRequired, - /** - * The headline of the accordion - */ - header: PropTypes.string.isRequired, - /** - * Closed state, optional - */ - closed: PropTypes.bool, - /** - * Speed of the animation in ms, optional - */ - speed: PropTypes.number, - /** - * A dark variation of the component - */ - dark: PropTypes.bool, - /** - * A function executed when the accordion opens, optional - */ - onOpen: PropTypes.func, - /** - * A function executed after the accordion opened, optional - */ - afterOpen: PropTypes.func, - /** - * A function executed when the accordion closes, optional - */ - onClose: PropTypes.func, - /** - * A function executed when the accordion closes, optional - */ - afterClose: PropTypes.func, - /** - * The class name for the element, optional. - */ - className: PropTypes.string, -}; - -AUaccordion.defaultProps = { - closed: false, -}; - -export default AUaccordion; diff --git a/packages/breadcrumbs/src/react/react.js b/packages/breadcrumbs/src/react/react.js deleted file mode 100644 index 61ffddaf5..000000000 --- a/packages/breadcrumbs/src/react/react.js +++ /dev/null @@ -1,72 +0,0 @@ -/*! [replace-name] v[replace-version] */ -/*************************************************************************************************************************************************************** - * - * breadcrumbs function - * - * Breadcrumbs help users understand where they are in the service and how they got there. - * - **************************************************************************************************************************************************************/ - -import React from 'react'; -import PropTypes from 'prop-types'; - -// ES5 dependency: import AUlinkList from '@gov.au/link-list'; -// ES6 dependency: import AUlinkList from './link-list'; - - -// The following line will be replaced automatically with generic imports for the ES5 pipeline. -// You can safely ignore this bit if you use this module with pancake -// -// [replace-imports] - - -/** - * DEFAULT - * The breadcrumbs component - * - * @param {boolean} dark - Add the dark variation class, optional - * @param {string} label - The aria label of the component - * @param {array} items - Items inside the breadcrumbs passed on to AUlinkList - * @param {string} linkComponent - The component used for the link - * @param {string} className - An additional class, optional - * @param {object} attributeOptions - Any other attribute options - */ -const AUbreadcrumbs = ({ dark, label, items, linkComponent, className = '', ...attributeOptions }) => ( - -); - -AUbreadcrumbs.propTypes = { - /** - * A dark variation of the component. - */ - dark: PropTypes.bool, - /** - * Provide the aria label - */ - label: PropTypes.string.isRequired, - /** - * The link, text and props for each of the breadcrumbs - */ - items: PropTypes.arrayOf( - PropTypes.shape({ - link: PropTypes.string, - text: PropTypes.string.isRequired, - }) - ).isRequired, - /** - * The component used for the link, optional. - */ - linkComponent: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]) -}; - -AUbreadcrumbs.defaultProps = { - linkComponent: 'a', -}; - -export default AUbreadcrumbs; diff --git a/packages/buttons/src/react/react.js b/packages/buttons/src/react/react.js deleted file mode 100644 index c8dad2042..000000000 --- a/packages/buttons/src/react/react.js +++ /dev/null @@ -1,122 +0,0 @@ -/*! [replace-name] v[replace-version] */ -/*************************************************************************************************************************************************************** - * - * buttons function - * - * Buttons signal action. Use them to move the user through the service. - * - **************************************************************************************************************************************************************/ - -import React from 'react'; -import PropTypes from 'prop-types'; - - -// The following line will be replaced automatically with generic imports for the ES5 pipeline. -// You can safely ignore this bit if you use this module with pancake -// -// [replace-imports] - - -/** - * All different kind of button options - * - * @type {Object} - */ -const options = { - 'primary': '', - 'secondary': 'au-btn--secondary', - 'tertiary': 'au-btn--tertiary', -}; - - -/** - * DEFAULT - * The primary button - * - * @param {string} linkComponent - The component used for the link - * @param {string} link - If this is a link the location it goes - * @param {string} children - Anything inside - * @param {string} as - The kind of button, can be either 'primary', 'secondary', 'tertiary', default: 'primary' - * @param {boolean} dark - Add the dark variation class, optional - * @param {string} type - The type attribute, default: 'button', optional - * @param {boolean} block - The block option, optional - * @param {string} className - An additional class, optional - * @param {object} attributeOptions - Any other attribute options - */ -const AUbutton = ({ linkComponent, link, children, as, dark, type, block, className = '', ...attributeOptions }) => { - if( link ) { - const LinkComponent = linkComponent; - - // If we are using a normal link - if( LinkComponent === 'a' ) { - attributeOptions.href = link; - } - // If we are using a link component - else if( typeof LinkComponent === 'function' ) { - attributeOptions.to = link; - } - - return ( - - { children } - - ); - } - else { - return ( - - ); - } -}; - -AUbutton.propTypes = { - /** - * If an link is set the button will render as a link. - */ - link: PropTypes.string, - /** - * Anything inside. - */ - children: PropTypes.node.isRequired, - /** - * The kind of button, secondary or tertiary. - */ - as: PropTypes.oneOf([ 'primary', 'secondary', 'tertiary' ]).isRequired, - /** - * A dark variation of the component. - */ - dark: PropTypes.bool, - /** - * - */ - type: PropTypes.string, - /** - * The block option to make the button fill the available width. - */ - block: PropTypes.bool, - /** - * The class name for the element, optional. - */ - className: PropTypes.string, - /** - * The component used for the link, optional. - */ - linkComponent: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]), -}; - -AUbutton.defaultProps = { - type: 'button', - as: 'primary', - linkComponent: 'a', -}; - -export default AUbutton; diff --git a/packages/callout/src/react/react.js b/packages/callout/src/react/react.js deleted file mode 100644 index e58c148eb..000000000 --- a/packages/callout/src/react/react.js +++ /dev/null @@ -1,170 +0,0 @@ -/*! [replace-name] v[replace-version] */ -/*************************************************************************************************************************************************************** - * - * Callout function - * - * Use callout to notify and alert users of important snippets of information. - * - **************************************************************************************************************************************************************/ - -import React from 'react'; -import PropTypes from 'prop-types'; - - -// The following line will be replaced automatically with generic imports for the ES5 pipeline. -// You can safely ignore this bit if you use this module with pancake -// -// [replace-imports] - - -/** - * Default callout - * - * @param {string} title - The title of the header - * @param {string} level - The tag level (

etc), default: '1' - * @param {boolean} srOnlyTitle - Title is visible to screen readers only - * @param {boolean} dark - Add the dark variation class, optional - * @param {boolean} alt - Add the alt variation class, optional - * @param {string} children - Anything inside - * @param {string} className - An additional class, optional - * @param {object} attributeOptions - Any other attribute options - */ -export const AUcallout = ({ title, level, srOnlyTitle, dark, alt, description, children, className = '', ...attributeOptions }) => { - const HeadingTag = `h${ level }`; - - return ( -
- - { children } -
- ) -}; - -AUcallout.propTypes = { - /** - * Title of the callout. - */ - title: PropTypes.string.isRequired, - /** - * The tag level (

etc), default: '1'. - */ - level: PropTypes.number, - /** - * Make title screen reader visible. - */ - srOnlyTitle: PropTypes.bool, - /** - * A dark variation of the component. - */ - dark: PropTypes.bool, - /** - * A alternate variation of the component. - */ - alt: PropTypes.bool, - /** - * Anything inside. - */ - children: PropTypes.node.isRequired, - /** - * The class name for the element, optional. - */ - className: PropTypes.string, -}; - -AUcallout.defaultProps = { - title: 'Title of the callout', - level: 2, - srOnlyTitle: false, -}; - - -/** - * Calendar callout - * - * @param {string} title - The title of the header - * @param {string} level - The tag level (

etc), default: '1' - * @param {boolean} srOnlyTitle - Title is visible to screen readers only - * @param {boolean} dark - Add the dark variation class, optional - * @param {boolean} alt - Add the alt variation class, optional - * @param {string} subline - The subline of the event, optional - * @param {string} datetime - The datetime of the event as ISO datetime - * @param {string} time - The time that appears on the page - * @param {string} name - The name of the event, optional - * @param {string} className - An additional class, optional - * @param {object} attributeOptions - Any other attribute options - */ -export const AUcalloutCalendar = ({ title, level, srOnlyTitle, dark, alt, subline, datetime, time, name, className = '', ...attributeOptions }) => { - const HeadingTag = `h${ level }`; - - return ( -
- - { subline &&

{ subline }

} - - { name && { name } } -
- ) -} - -AUcalloutCalendar.propTypes = { - /** - * Title of the callout. - */ - title: PropTypes.string.isRequired, - /** - * The tag level (

etc), default: '1'. - */ - level: PropTypes.number, - /** - * Make title screen reader visible. - */ - srOnlyTitle: PropTypes.bool, - /** - * A dark variation of the component. - */ - dark: PropTypes.bool, - /** - * A alternate variation of the component. - */ - alt: PropTypes.bool, - /** - * The subline of the event, optional. - */ - subline: PropTypes.string, - /** - * The date time string. - */ - datetime: PropTypes.string.isRequired, - /** - * The same date but human readable. - */ - time: PropTypes.string.isRequired, - /** - * The name of the event, optional. - */ - name: PropTypes.string, - /** - * The class name for the element, optional. - */ - className: PropTypes.string, -}; - -AUcalloutCalendar.defaultProps = { - title: 'Title of the calendar callout', - datetime: '2017-01-01T00:00:00+00:00', - time: 'Sunday 32 Jun', - level: 2, - srOnlyTitle: true, -}; diff --git a/packages/control-input/src/react/react.js b/packages/control-input/src/react/react.js deleted file mode 100644 index b7d033ce6..000000000 --- a/packages/control-input/src/react/react.js +++ /dev/null @@ -1,151 +0,0 @@ -/*! [replace-name] v[replace-version] */ -/*************************************************************************************************************************************************************** - * - * control-input function - * - * Control inputs include radio buttons and checkboxes. They allow users to select one or more options. - * - **************************************************************************************************************************************************************/ - -import React from 'react'; -import PropTypes from 'prop-types'; - - -// The following line will be replaced automatically with generic imports for the ES5 pipeline. -// You can safely ignore this bit if you use this module with pancake -// -// [replace-imports] - - -/** - * The checkbox component - * - * @param {boolean} dark - Add the dark variation class, optional - * @param {boolean} alt - Add the alt variation class, optional - * @param {boolean} small - Add the small variation class - * @param {boolean} block - Add the block variation class - * @param {string} label - The label text - * @param {string} status - Mark this field as either 'valid' or 'invalid', optional - * @param {string} id - The id of the checkbox input - * @param {string} className - An additional class, optional - * @param {object} attributeOptions - Any other attribute options - * - */ -export const AUcheckbox = ({ dark, alt, small, block, label, status, id, className = '', ...attributeOptions }) => { - return ( -
- - -
- ); -}; - -AUcheckbox.propTypes = { - /** - * A dark variation of the component - */ - dark: PropTypes.bool, - /** - * An alternate variation of the component - */ - alt: PropTypes.bool, - /** - * The small variation of the component - */ - small: PropTypes.bool, - /** - * - */ - block: PropTypes.bool, - /** - * The label of the radio button - */ - label: PropTypes.string.isRequired, - /** - * - */ - id: PropTypes.string.isRequired, - /** - * - */ - status: PropTypes.oneOf([ 'valid', 'invalid' ]), - /** - * The class name for the element, optional. - */ - className: PropTypes.string, -}; - - -/** - * The radio component - * - * @param {boolean} dark - Add the dark variation class, optional - * @param {boolean} alt - Add the alt variation class, optional - * @param {boolean} small - Add the small variation class - * @param {boolean} block - Add the block variation class - * @param {string} label - The label text - * @param {string} status - Mark this field as either 'valid' or 'invalid', optional - * @param {string} id - The id of the radio input - * @param {string} className - An additional class, optional - * @param {object} attributeOptions - Any other attribute options - */ -export const AUradio = ({ dark, alt, small, block, label, status, id, className = '', ...attributeOptions }) => { - - return ( -
- - -
- ); -}; - -AUradio.propTypes = { - /** - * A dark variation of the component - */ - dark: PropTypes.bool, - /** - * An alternate variation of the component - */ - alt: PropTypes.bool, - /** - * The small variation of the component - */ - small: PropTypes.bool, - /** - * - */ - block: PropTypes.bool, - /** - * The label of the radio button - */ - label: PropTypes.string.isRequired, - /** - * The label of the checkbox button - */ - id: PropTypes.string.isRequired, - /** - * - */ - status: PropTypes.oneOf([ 'valid', 'invalid' ]), - /** - * The class name for the element, optional. - */ - className: PropTypes.string, -}; diff --git a/packages/cta-link/src/react/react.js b/packages/cta-link/src/react/react.js deleted file mode 100644 index b8642c8dd..000000000 --- a/packages/cta-link/src/react/react.js +++ /dev/null @@ -1,82 +0,0 @@ -/*! [replace-name] v[replace-version] */ -/*************************************************************************************************************************************************************** - * - * cta-link function - * - * Provide a see more/all link when there are too many items to show in the current context. - * - **************************************************************************************************************************************************************/ - -import React from 'react'; -import PropTypes from 'prop-types'; - - -// The following line will be replaced automatically with generic imports for the ES5 pipeline. -// You can safely ignore this bit if you use this module with pancake -// -// [replace-imports] - - -/** - * DEFAULT - * The cta link component - * - * @param {string} linkComponent - The component used for the link - * @param {boolean} dark - Add the dark variation class, optional - * @param {string} link - The link target, if not supplied this will render as a button, optional - * @param {string} text - The text of the CTA link - * @param {string} className - An additional class, optional - * @param {object} attributeOptions - Any other attribute options - */ -const AUctaLink = ({ linkComponent, dark, link, text, className = '', ...attributeOptions }) => { - const LinkComponent = linkComponent; - - if( link ) { - // If we are using a normal link - if( LinkComponent === 'a' ) { - attributeOptions.href = link; - } - // If we are using a link component - else if( typeof LinkComponent === 'function' ) { - attributeOptions.to = link; - } - - return ( - { text } - ); - } - else { - return ( - - ); - } -} - -AUctaLink.propTypes = { - /** - * A dark variation of the component. - */ - dark: PropTypes.bool, - /** - * The link to the location of the cta-link. - */ - link: PropTypes.string, - /** - * Provide the aria label. - */ - text: PropTypes.string.isRequired, - /** - * The class name for the element, optional. - */ - className: PropTypes.string, - /** - * The component used for the link, optional. - */ - linkComponent: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]) -}; - -AUctaLink.defaultProps = { - linkComponent: 'a', -}; - -export default AUctaLink; diff --git a/packages/direction-links/src/react/react.js b/packages/direction-links/src/react/react.js deleted file mode 100644 index 1ce1ae465..000000000 --- a/packages/direction-links/src/react/react.js +++ /dev/null @@ -1,101 +0,0 @@ -/*! [replace-name] v[replace-version] */ -/*************************************************************************************************************************************************************** - * - * direction-links function - * - * Use direction links to link up and down within the DOM or back to a parent page. - * - **************************************************************************************************************************************************************/ - -import React from 'react'; -import PropTypes from 'prop-types'; - - -// The following line will be replaced automatically with generic imports for the ES5 pipeline. -// You can safely ignore this bit if you use this module with pancake -// -// [replace-imports] - - -/** - * All direction options - * - * @type {Object} - */ -const directions = { - up: 'au-direction-link--up', - right: 'au-direction-link--right', - down: 'au-direction-link--down', - left: 'au-direction-link--left', -}; - - -/** - * DEFAULT - * The direction-links component - * - * @param {string} linkComponent - The component used for the link - * @param {boolean} dark - Add the dark variation class, optional - * @param {string} link - The link target, optional - * @param {string} text - The text of the CTA link - * @param {string} direction - The direction for the arrow; can be either: up right down left, default: 'right' - * @param {string} className - An additional class, optional - * @param {object} attributeOptions - Any other attribute options - */ -const AUdirectionLink = ({ linkComponent, dark, link, text, direction, className = '', ...attributeOptions }) => { - const LinkComponent = linkComponent; - - if( link ) { - // If we are using a normal link - if( LinkComponent === 'a' ) { - attributeOptions.href = link; - } - // If we are using a link component - else if( typeof LinkComponent === 'function' ) { - attributeOptions.to = link; - } - - return ( - { text } - ); - } - else { - return ( - - ); - } -}; - -AUdirectionLink.propTypes = { - /** - * A dark variation of the component. - */ - dark: PropTypes.bool, - /** - * The href link, optional. - */ - link: PropTypes.string, - /** - * The text of the link. - */ - text: PropTypes.string.isRequired, - /** - * The direction the link goes. - */ - direction: PropTypes.oneOf([ 'up', 'right', 'down', 'left' ]).isRequired, - /** - * The class name for the element, optional. - */ - className: PropTypes.string, - /** - * The component used for the link, optional. - */ - linkComponent: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]) -}; - -AUdirectionLink.defaultProps = { - direction: 'right', - linkComponent: 'a', -}; - -export default AUdirectionLink; diff --git a/packages/footer/src/react/react.js b/packages/footer/src/react/react.js deleted file mode 100644 index d5ec25e82..000000000 --- a/packages/footer/src/react/react.js +++ /dev/null @@ -1,107 +0,0 @@ -/*! [replace-name] v[replace-version] */ -/*************************************************************************************************************************************************************** - * - * footer function - * - * Footers help users who reach the bottom of a page without finding what they want. - * - **************************************************************************************************************************************************************/ - -import React from 'react'; -import PropTypes from 'prop-types'; - - -// The following line will be replaced automatically with generic imports for the ES5 pipeline. -// You can safely ignore this bit if you use this module with pancake -// -// [replace-imports] - - - -/** - * A section for the footer that contains navigational elements - * - * @param {node} children - The inside of this section - * @param {string} className - An additional class, optional - * @param {string} ariaLabel - The aria-label attribute, optional - * @param {object} attributeOptions - Any other attribute options - */ -export const AUfooterNav = ({ children, className = '', ariaLabel, ...attributeOptions }) => ( - -); - -AUfooterNav.propTypes = { - /** - * The elements inside. - */ - children: PropTypes.node.isRequired, - /** - * The class name for the element, optional. - */ - className: PropTypes.string, - /** - * The aria-label attribute, defaults to "footer navigation" - */ - ariaLabel: PropTypes.string, -}; - -AUfooterNav.defaultProps = { - ariaLabel: 'footer navigation', -} - - -/** - * A section for the footer that sits at the end - * - * @param {node} children - The inside of this section - * @param {string} className - An additional class, optional - * @param {object} attributeOptions - Any other attribute options - */ -export const AUfooterEnd = ({ children, className = '', ...attributeOptions }) => ( -
- { children } -
-); - -AUfooterEnd.propTypes = { - /** - * The elements inside. - */ - children: PropTypes.node.isRequired, - /** - * The class name for the element, optional. - */ - className: PropTypes.string, -}; - - -/** - * DEFAULT - * The footer component - * - * @param {boolean} dark - Add the dark variation class, optional - * @param {boolean} alt - Add the alt variation class, optional - * @param {node} children - The inside of this section - * @param {string} className - An additional class, optional - * @param {object} attributeOptions - Any other attribute options - */ -const AUfooter = ({ dark, alt, children, className = '', ...attributeOptions }) => ( -
- { children } -
-); - -AUfooter.propTypes = { - dark: PropTypes.bool, - alt: PropTypes.bool, - children: PropTypes.node.isRequired, - className: PropTypes.string, -}; - -export default AUfooter; diff --git a/packages/header/src/react/react.js b/packages/header/src/react/react.js deleted file mode 100644 index 24bcb97a1..000000000 --- a/packages/header/src/react/react.js +++ /dev/null @@ -1,164 +0,0 @@ -/*! [replace-name] v[replace-version] */ -/*************************************************************************************************************************************************************** - * - * header function - * - * Headers provide a consistent start to pages. - * - **************************************************************************************************************************************************************/ - -import React from 'react'; -import PropTypes from 'prop-types'; - - -// The following line will be replaced automatically with generic imports for the ES5 pipeline. -// You can safely ignore this bit if you use this module with pancake -// -// [replace-imports] - - -/** - * The header brand component - * - * @param {string} title - The title of the header - * @param {string} level - The tag level (

etc), default: '1' - * @param {string} subline - An optional subline, optional - * @param {string} brandImage - An optional brand image, optional - * @param {string} brandImageAlt - Brand image alt tag - * @param {string} link - An optional link for the header brand, optional - * @param {node} children - The inside of this section - * @param {string} className - An additional class, optional - * @param {object} attributeOptions - Any other attribute options - */ -export const AUheaderBrand = ({ - title, - level, - subline, - brandImage, - brandImageAlt, - link, - children, - className = '', - linkComponent, - ...attributeOptions -}) => { - const HeadingTag = `h${ level }`; - const LinkComponent = link - ? linkComponent - : 'div'; - - if( link ) { - // If we are using a normal link - if( LinkComponent === 'a' ) { - attributeOptions.href = link; - } - // If we are using a link component - else if( typeof LinkComponent === 'function' ) { - attributeOptions.to = link; - } - } - - let brand = brandImage - ? { - : null; - - return ( - - { brand } - { - title || subline - ? -
- { - title - ? - : null - } - { - subline - ?
- : null - } - { children } -
- : '' - } - - - ); -} - -AUheaderBrand.propTypes = { - /** - * - */ - title: PropTypes.node, - /** - * - */ - level: PropTypes.oneOf([ '1', '2', '3', '4', '5', '6' ]), - /** - * - */ - subline: PropTypes.node, - /** - * - */ - link: PropTypes.string, - /** - * - */ - brandImage: PropTypes.string, - /** - * - */ - brandImageAlt: PropTypes.string, - /** - * - */ - children: PropTypes.node, - /** - * The class name for the element, optional. - */ - className: PropTypes.string, - /** - * - */ - linkComponent: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]), -} - -AUheaderBrand.defaultProps = { - level: '1', - brandImageAlt: 'Australian Government Crest', - linkComponent: 'a', -}; - - -/** - * DEFAULT - * The header component - * - * @param {boolean} hero - The hero option, optional - * @param {boolean} dark - Add the dark variation class, optional - * @param {boolean} alt - Add the alt variation class, optional - * @param {node} children - The inside of this section - * @param {string} className - An additional class, optional - * @param {object} attributeOptions - Any other attribute options - */ -const AUheader = ({ hero, dark, alt, children, className = '', ...attributeOptions }) => ( -
- { children } -
-); - -AUheader.propTypes = { - hero: PropTypes.bool, - dark: PropTypes.bool, - alt: PropTypes.bool, - children: PropTypes.node, - className: PropTypes.string, -}; - -export default AUheader; diff --git a/packages/headings/src/react/react.js b/packages/headings/src/react/react.js deleted file mode 100644 index 847ebf347..000000000 --- a/packages/headings/src/react/react.js +++ /dev/null @@ -1,69 +0,0 @@ -/*! [replace-name] v[replace-version] */ -/*************************************************************************************************************************************************************** - * - * headings function - * - * Class styles for display headings. - * - **************************************************************************************************************************************************************/ - -import React from 'react'; -import PropTypes from 'prop-types'; - - -// The following line will be replaced automatically with generic imports for the ES5 pipeline. -// You can safely ignore this bit if you use this module with pancake -// -// [replace-imports] - -/** - * All heading options - * - * @type {Array} - */ -const sizes = [ - 'au-display-xs', - 'au-display-sm', - 'au-display-md', - 'au-display-lg', - 'au-display-xl', - 'au-display-xxl', - 'au-display-xxxl', -]; - - -/** - * DEFAULT - * The headings component - * - * @param {string} level - The tag level (

etc) - * @param {string} size - The headings size - * @param {string} children - Anything inside - * @param {string} className - An additional class, optional - * @param {object} attributeOptions - Any other attribute options - */ -const AUheading = ({ level, size, children, className = '', ...attributeOptions }) => { - const HeadingTag = `h${ level }`; - - return ( - { children } - ); -}; - -AUheading.propTypes = { - /** - * The semantic headline tag level, h1-h6. - */ - level: PropTypes.oneOf([ '1', '2', '3', '4', '5', '6' ]).isRequired, - /** - * The display size, 'xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl'. - */ - size: PropTypes.oneOf([ 'xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl' ]).isRequired, - children: PropTypes.node.isRequired, - /** - * The class name for the element, optional. - */ - className: PropTypes.string, -}; - -export default AUheading; diff --git a/packages/inpage-nav/src/react/react.js b/packages/inpage-nav/src/react/react.js deleted file mode 100644 index 6b042c7d3..000000000 --- a/packages/inpage-nav/src/react/react.js +++ /dev/null @@ -1,155 +0,0 @@ -/*! [replace-name] v[replace-version] */ -/*************************************************************************************************************************************************************** - * - * inpage-nav function - * - * Use inpage-nav links to help users scan and jump to content of a page. - * - **************************************************************************************************************************************************************/ - -import React from 'react'; -import PropTypes from 'prop-types'; - - -// The following line will be replaced automatically with generic imports for the ES5 pipeline. -// You can safely ignore this bit if you use this module with pancake -// -// [replace-imports] - - -/** - * The section component for the AUinpageNavLinks component - * - * @param {object} link - The link of this section - * @param {object} title - The title of the section - * @param {object} li - An additional object to be spread into the wrapping element, optional - * @param {object} attributeOptions - Any other attribute options - */ -export const AUinpageNavLinksItem = ({ link, title, li = {}, ...attributeOptions }) => ( -
  • - { title } -
    • -); - -AUinpageNavLinksItem.propTypes = { - link: PropTypes.string.isRequired, - title: PropTypes.string.isRequired, - li: PropTypes.object, -}; - - -/** - * The inpage-nav component - * - * @param {boolean} dark - Add the dark variation class, optional - * @param {string} title - The title of the content link block, default: Contents - * @param {array} sections - An array of objects of all sections, sample: { link: '', title: '', onClick: () } - * @param {string} className - An additional class, optional - * @param {string} ariaLabel - The aria-label attribute, optional - * @param {object} attributeOptions - Any other attribute options - */ -export const AUinpageNavLinks = ({ dark, title, sections, ariaLabel, className = '', ...attributeOptions }) => ( - -); - -AUinpageNavLinks.propTypes = { - /** - * A dark variation of the component - */ - dark: PropTypes.bool, - /** - * - */ - title: PropTypes.string.isRequired, - /** - * - */ - sections: PropTypes.arrayOf( - PropTypes.shape({ - link: PropTypes.string.isRequired, - title: PropTypes.string.isRequired, - li: PropTypes.object, - }) - ).isRequired, - /** - * The class name for the element, optional. - */ - className: PropTypes.string, -}; - -AUinpageNavLinks.defaultProps = { - title: 'Contents', - ariaLabel: 'in page navigation', -}; - - -/** - * The inpage-nav component - * - * @param {string} title - The title of the section - * @param {string} link - The link to this section - * @param {DOM node} children - The content of the section, default: '2' - * @param {string} level - The heading level of the h tag - * @param {string} headingClass - Any additional heading classes eg 'au-display-sm' etc, optional - * @param {string} sectionLink - The text for the section link, default: 'Link to section', optional - * @param {string} className - An additional class, optional - * @param {object} attributeOptions - Any other attribute options - */ -export const AUinpageNavSection = ({ title, link, children, level, headingClass, sectionLink, className = '', ...attributeOptions }) => { - - const HeadingTag = `h${ level }`; - - return ( - - - { title } - - { sectionLink } - - - { children } - - ); -}; - -AUinpageNavSection.propTypes = { - /** - * - */ - title: PropTypes.string.isRequired, - /** - * - */ - link: PropTypes.string.isRequired, - /** - * The elements inside. - */ - children: PropTypes.node.isRequired, - /** - * - */ - level: PropTypes.oneOf([ '1', '2', '3', '4', '5', '6' ]).isRequired, - /** - * - */ - headingClass: PropTypes.string, - /** - * - */ - sectionLink: PropTypes.string, - /** - * The class name for the element, optional. - */ - className: PropTypes.string, -}; - -AUinpageNavSection.defaultProps = { - level: '2', - sectionLink: 'Link to section', -}; diff --git a/packages/keyword-list/src/react/react.js b/packages/keyword-list/src/react/react.js deleted file mode 100644 index ca2caf326..000000000 --- a/packages/keyword-list/src/react/react.js +++ /dev/null @@ -1,148 +0,0 @@ -/*! [replace-name] v[replace-version] */ -/*************************************************************************************************************************************************************** - * - * keyword-list function - * - * Headers provide a consistent start to pages. - * - **************************************************************************************************************************************************************/ - -import React from 'react'; -import PropTypes from 'prop-types'; - - -// The following line will be replaced automatically with generic imports for the ES5 pipeline. -// You can safely ignore this bit if you use this module with pancake -// -// [replace-imports] - -/** - * An item inside the AUkeywordList component - * - * @param {string} repeatedName - The repeated bit in each item - * @param {string} link - The link URL, optional - * @param {string} linkComponent - The component used for the link - * @param {string} name - The name of the item - * @param {object} li - An additional object to be spread into the wrapping element, optional - * @param {object} attributeOptions - Any other attribute options - */ -export const AUkeywordListItem = ({ linkComponent, repeatedName, link, name, li = {}, ...attributeOptions }) => { - const LinkComponent = linkComponent; - - if( typeof attributeOptions.onClick === 'function' ) { - - // if we find an onClick event but no link we make it a link so onClick can be added (no button support yet) - if( !link ) { - link = '#'; - } - } - - if( link ){ - - // If we are using a normal link - if( LinkComponent === 'a' ) { - attributeOptions.href = link; - } - // If we are using a link component - else if( typeof LinkComponent === 'function' ) { - attributeOptions.to = link; - } - } - - return ( -
  • - { - link - ? { repeatedName }{ name } - : { repeatedName }{ name } - } -
    • - ); -}; - -AUkeywordListItem.propTypes = { - /** - * - */ - repeatedName: PropTypes.string.isRequired, - /** - * - */ - link: PropTypes.string, - /** - * - */ - name: PropTypes.string.isRequired, - /** - * - */ - li: PropTypes.object, - /** - * - */ - linkComponent: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]), -}; - - -AUkeywordListItem.defaultProps = { - linkComponent: 'a', -}; - - -/** - * DEFAULT - * The keyword-list component - * - * @param {string} repeatedName - The repeated bit in each item - * @param {array} items - All items in this list, format: { link: '', name: '', onClick: () } - * @param {boolean} dark - Add the dark variation class, optional - * @param {string} className - An additional class, optional - * @param {string} linkComponent - The component used for the link - * @param {object} attributeOptions - Any other attribute options - */ -const AUkeywordList = ({ repeatedName, linkComponent, items, dark, className = '', ...attributeOptions }) => ( -
      - { - items.map( - ( item, i ) => - ) - } -
    -); - -AUkeywordList.propTypes = { - /** - * - */ - repeatedName: PropTypes.string.isRequired, - /** - * A dark variation of the component - */ - dark: PropTypes.bool, - /** - * - */ - items: PropTypes.arrayOf( - PropTypes.shape({ - link: PropTypes.string, - name: PropTypes.string.isRequired, - li: PropTypes.object, - }) - ).isRequired, - /** - * The class name for the element, optional. - */ - className: PropTypes.string, - /** - * - */ - linkComponent: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]), -}; - - -AUkeywordList.defaultProps = { - linkComponent: 'a', -}; - - -export default AUkeywordList; diff --git a/packages/link-list/src/react/react.js b/packages/link-list/src/react/react.js deleted file mode 100644 index 2ec6d543d..000000000 --- a/packages/link-list/src/react/react.js +++ /dev/null @@ -1,131 +0,0 @@ -/*! [replace-name] v[replace-version] */ -/*************************************************************************************************************************************************************** - * - * link-lists function - * - * A simple list of inline links. - * - **************************************************************************************************************************************************************/ - -import React from 'react'; -import PropTypes from 'prop-types'; - - -// The following line will be replaced automatically with generic imports for the ES5 pipeline. -// You can safely ignore this bit if you use this module with pancake -// -// [replace-imports] - -/** - * An item inside the AUlinkList component - * - * @param {node} text - The link Text or link html - * @param {string} link - The link URL, optional - * @param {string} linkComponent - The component used for the link - * @param {object} li - An additional object to be spread into the wrapping element, optional - * @param {object} attributeOptions - Any other attribute options, optional - */ -export const AUlinkListItem = ({ text, link, linkComponent, li = {}, children, ...attributeOptions }) => { - const LinkComponent = linkComponent; - - // If there is no link provided and an onClick function - if( typeof onClick === 'function' ) { - attributeOptions.onClick = onClick; - - // if we find an onClick event but no link we make it a link so onClick can be added (no button support yet) - if( !link ) { - link = '#'; - } - } - - // If we are using a normal link - if( LinkComponent === 'a' ) { - attributeOptions.href = link; - } - // If we are using a link component - else if( typeof LinkComponent === 'function' ) { - attributeOptions.to = link; - } - - if( link ){ - return ( -
  • - { text } - { children } -
    • - ) - } - - return (
  • { text }{ children }
    • ); -}; - -AUlinkListItem.propTypes = { - /** - * - */ - text: PropTypes.node.isRequired, - /** - * - */ - link: PropTypes.string, - /** - * - */ - li: PropTypes.object, - /** - * - */ - linkComponent: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]) -}; - -AUlinkListItem.defaultProps = { - linkComponent: "a", -}; - - -/** - * DEFAULT - * The Link List component - * - * @param {array} items - All items inside the link list to be passed to AUlinkListItem, format: { link: '', text: '', onClick: () } - * @param {string} className - An additional class, optional - * @param {string} linkComponent - The component used for the link - * @param {object} attributeOptions - Any other attribute options, optional - */ -const AUlinkList = ({ inline, items, linkComponent, className = '', ...attributeOptions }) => ( -
      - { - items.map( - ( item, i ) => - ) - } -
    -); - -AUlinkList.propTypes = { - /** - * - */ - inline: PropTypes.bool, - /** - * - */ - items: PropTypes.arrayOf( - PropTypes.shape({ - link: PropTypes.string, - text: PropTypes.node.isRequired, - li: PropTypes.object, - }) - ).isRequired, - /** - * - */ - linkComponent: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]) -}; - -AUlinkList.defaultProps = { - linkComponent: "a", -}; - - -export default AUlinkList; diff --git a/packages/main-nav/src/react/react.js b/packages/main-nav/src/react/react.js deleted file mode 100644 index c19398721..000000000 --- a/packages/main-nav/src/react/react.js +++ /dev/null @@ -1,530 +0,0 @@ -/*! [replace-name] v[replace-version] */ -/*************************************************************************************************************************************************************** - * - * mainNav function - * - * Horizontal list of links to key areas on the website. Usually located in the header. - * - **************************************************************************************************************************************************************/ - -import React from 'react'; -import PropTypes from 'prop-types'; - -import AU from '@gov.au/animate'; // interdependency with our animate lib - - -// ES5 dependency: import AUlinkList from '@gov.au/link-list'; -// ES6 dependency: import AUlinkList from './link-list'; - - -// The following line will be replaced automatically with generic imports for the ES5 pipeline. -// You can safely ignore this bit if you use this module with pancake -// -// [replace-imports] - - -/** - * A menu inside the AUmainNav - * - * @param {array} items - The links in an array containing text, location and active status - * @param {string} linkComponent - The component used for the link - */ -const AUmainNavMenu = ({ items, linkComponent }) => { - // Generate the menu - const GenerateMenu = ( items ) => { - const menu = items.map( item => { - const link = item.active ? { - link: item.link, - text: item.text, - 'aria-current': 'page', - li: { - className: 'active', - }, - } : - { - link: item.link, - text: item.text, - }; - - // return the link, maybe with children - return link; - }); - - return menu; - } - - // Create the menu with children - return ( - - ); -} - - -AUmainNavMenu.propTypes = { - /** - * - */ - items: PropTypes.arrayOf( - PropTypes.shape({ - link: PropTypes.string, - text: PropTypes.node.isRequired, - children: PropTypes.array, - }) - ).isRequired, - /** - * - */ - linkComponent: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]), -}; - -AUmainNavMenu.defaultProps = { - linkComponent: 'a', -}; - - -// This value gets increased for each navigation component -let IDvalue = 0; - - -export class AUmainNavContent extends React.PureComponent { - constructor( props ) { - super( props ); - - const { - items, - className = '', - children, - linkComponent, - onOpen, - afterOpen, - onClose, - afterClose, - ...attributeOptions - } = props; - - // Functions - this.toggleClasses = this.toggleClasses.bind( this ); - this.removeClass = this.removeClass.bind( this ); - this.addClass = this.addClass.bind( this ); - this.mainNavToggle = this.mainNavToggle.bind( this ); - this.toggle = this.toggle.bind( this ); - this.toggleAnimationState = function() { - this.setState({ animating: !this.state.animating } ) - }.bind( this ); - - - // Event listeners - this.auFocusTrapListenerTop = this.auFocusTrapListenerTop.bind( this ); - this.auFocusTrapListenerBottom = this.auFocusTrapListenerBottom.bind( this ); - this.auKeyListener = this.auKeyListener.bind( this ); - - - // Variables - this.state = { - closed: true, - animating: false, - }; - - - // Increase the ID so it's unique for each instance - IDvalue += 1; - this.id = `au-main-nav-${ IDvalue }`; - } - - - /** - * Toggle an main navigation on click - * - * @param {event object} event - The event object of the click - */ - toggle( event ) { - event.preventDefault(); - - // If the main menu is animating don't change toggle the menu - if( this.state.animating ){ - return; - } - - // Toggle the menu's current state - this.setState({ - closed: !this.state.closed, - animating: true, - }); - } - - - /** - * componentDidUpdate - Update the component when it changes - * - * @param {*} prevProps - The previous property values - * @param {*} prevState - The previous state values - */ - componentDidUpdate( prevProps, prevState ){ - if( prevState !== undefined && this.state !== undefined && this.state.closed !== prevState.closed ) { - this.mainNavToggle( this.mainNavContent, this.props.speed, { - onOpen: this.props.onOpen, - afterOpen: this.props.afterOpen, - onClose: this.props.onClose, - afterClose: this.props.afterClose, - }); - } - } - - - /** - * IE8 compatible function for replacing classes on a DOM node - * - * @param {object} element - The DOM element we want to toggle classes on - * @param {string} openingClass - The firstClass you want to toggle on the DOM node - * @param {string} closingClass - The secondClass you want to toggle on the DOM node - */ - toggleClasses( element, state, openingClass, closingClass ) { - if( state === 'opening' || state === 'open' ) { - var oldClass = openingClass || 'au-main-nav__content--closed'; - var newClass = closingClass || 'au-main-nav__content--open'; - } - else { - var oldClass = closingClass || 'au-main-nav__content--open'; - var newClass = openingClass || 'au-main-nav__content--closed'; - } - - this.removeClass( element, oldClass ); - this.addClass( element, newClass ); - } - - - /** - * IE8 compatible function for removing a class - * - * @param {object} element - The DOM element we want to manipulate - * @param {object} className - The name of the class to be removed - */ - removeClass( element, className ) { - if( element.classList ) { - element.classList.remove( className ); - } - else { - element.className = element.className.replace( new RegExp("(^|\\b)" + className.split(" ").join("|") + "(\\b|$)", "gi"), " " ); - } - } - - - /** - * IE8 compatible function for adding a class - * - * @param {object} element - The DOM element we want to manipulate - * @param {object} className - The name of the class to be added - */ - addClass( element, className ) { - if( element.classList ) { - element.classList.add( className ); - } - else { - element.className = element.className + " " + className; - } - } - - - /** - * auFocusTrapListenerTop - What happens when the focus trap top gets focus - * - * @param {event} event - the event - */ - auFocusTrapListenerTop( event ) { - var focusContent = this.mainNavMenu.querySelectorAll( 'a, .au-main-nav__toggle' ); - focusContent[ focusContent.length - 1 ].focus(); - } - - - /** - * auFocusTrapListenerBottom - What happens when the focus trap bottom gets focus - * - * @param {event} event - the event - */ - auFocusTrapListenerBottom( event ) { - var focusContent = this.mainNavMenu.querySelectorAll( 'a, .au-main-nav__toggle' ); - focusContent[ 0 ].focus(); - } - - - /** - * auKeyListener - What happens when a key gets pressed and the menu is open - * - * @param {event} event - the event - */ - auKeyListener( event ) { - // This should only close the menu when the menu is visibly open - var overlayOpen = window.getComputedStyle( this.mainNavOverlay ).getPropertyValue( 'display' ); - - // Check the menu is open and visible and the escape key is pressed - if( event.keyCode === 27 && overlayOpen === 'block' ) { - this.toggle( event ); - } - } - - - /** - * Toggle a mainNav element - * - * @param {string} element - The toggle for the main nav - * @param {integer} speed - The speed in ms for the animation - * - */ - mainNavToggle( element, speed, callbacks ) { - // stop event propagation - try { - window.event.cancelBubble = true; - event.stopPropagation(); - } - catch( error ) {} - - // check this once - if( typeof callbacks != 'object' ) { - callbacks = {}; - } - - - // Elements we modify - var menu = this.mainNavMenu; - var overlay = this.mainNavOverlay; - var closeButton = element.querySelector( '.au-main-nav__toggle--close' ); - var openButton = element.querySelector( '.au-main-nav__toggle--open' ); - var focustrapTop = element.querySelector( '.au-main-nav__focus-trap-top' ); - var focustrapBottom = element.querySelector( '.au-main-nav__focus-trap-bottom' ); - - var closed = !this.state.closed; - var state = closed ? 'opening' : ''; - var menuWidth = menu.offsetWidth; - - - // Functions - var ToggleClasses = this.toggleClasses; - var AUkeyListener = this.auKeyListener; - var AUfocusTrapListenerTop = this.auFocusTrapListenerTop; - var AUfocusTrapListenerBottom = this.auFocusTrapListenerBottom; - var ToggleAnimationState = this.toggleAnimationState; - - - overlay.style.display = 'block'; - - - (function( menu ) { - AU.animate.Toggle({ - element: menu, - property: 'left', - openSize: 0, - closeSize: -1 * menuWidth, - speed: speed || 250, - prefunction: function( ) { - // Set these value immediately for transitions - if( state === 'opening' ) { - menu.style.display = 'block'; - overlay.style.left = 0; - overlay.style.opacity = 0.5; - - // run when opening - if( typeof callbacks.onOpen === 'function' ) { - callbacks.onOpen(); - } - } - else { - overlay.style.opacity = '0'; - - // run when closing - if( typeof callbacks.onClose === 'function' ) { - callbacks.onClose(); - } - } - }, - postfunction: function(){ - if ( state === 'opening' ){ - - // Move the focus to the close button - closeButton.focus(); - - - // Focus trap enabled - focustrapTop.setAttribute( "tabindex", 0 ); - focustrapBottom.setAttribute( "tabindex", 0 ); - - - focustrapTop.addEventListener( 'focus', AUfocusTrapListenerTop ); - focustrapBottom.addEventListener( 'focus', AUfocusTrapListenerBottom ); - - // Add key listener - document.addEventListener( 'keyup', AUkeyListener ); - - if( typeof callbacks.afterOpen === 'function' ) { - callbacks.afterOpen(); - } - } - else { - // Move the focus back to the menu button - openButton.focus(); - - // Remove the focus trap - focustrapTop.removeAttribute( "tabindex" ); - focustrapBottom.removeAttribute( "tabindex" ); - - - // Remove the event listeners - focustrapTop.removeEventListener( 'focus', AUfocusTrapListenerTop ); - focustrapBottom.removeEventListener( 'focus', AUfocusTrapListenerBottom ); - - - // Remove the event listener for the keypress - document.removeEventListener( 'keyup', AUkeyListener ); - - if( typeof callbacks.afterClose === 'function' ) { - callbacks.afterClose(); - } - } - - - // Toggle classes - ToggleClasses( element, state ); - ToggleClasses( - document.body, - state, - 'au-main-nav__scroll--unlocked', - 'au-main-nav__scroll--locked', - ); - - - // Reset inline styles - menu.style.display = ''; - menu.style.left = ''; - overlay.style.display = ''; - overlay.style.left = ''; - overlay.style.opacity = ''; - - - // Toggle the animating state to false so that we can allow toggling again - ToggleAnimationState(); - }, - }); - })( menu ); - } - - - render(){ - return ( -
    { this.mainNavContent = mainNavContent }}> - -
    { this.mainNavMenu = mainNavMenu }} - > -
    -
    - - - { this.props.children } -
    -
    -
    -
    { this.mainNavOverlay = mainNavOverlay }} - onClick={ ( event ) => this.toggle( event ) } - className="au-main-nav__overlay">
    -
    - ); - } -}; - -AUmainNavContent.propTypes = { - /** - * A dark variation of the component - */ - dark: PropTypes.bool, - /** - * An alternate variation of the component - */ - alt: PropTypes.bool, - /** - * - */ - children: PropTypes.node, - /** - * - */ - speed: PropTypes.number, - /** - * - */ - onOpen: PropTypes.func, - /** - * - */ - afterOpen: PropTypes.func, - /** - * - */ - onClose: PropTypes.func, - /** - * - */ - afterClose: PropTypes.func, - /** - * The class name for the element, optional. - */ - className: PropTypes.string, -}; - - -const AUmainNav = ({ dark, alt, className, ariaLabel, children, ...attributeOptions }) => ( - -); - -AUmainNav.propTypes = { - /** - * A dark variation of the component - */ - dark: PropTypes.bool, - /** - * An alternate variation of the component - */ - alt: PropTypes.bool, - /** - * - */ - ariaLabel: PropTypes.string, - /** - * The elements inside. - */ - children: PropTypes.node.isRequired, -}; - -AUmainNav.defaultProps = { - ariaLabel: 'main navigation', -}; - -export default AUmainNav; diff --git a/packages/page-alerts/src/react/react.js b/packages/page-alerts/src/react/react.js deleted file mode 100644 index 8d7b0a1dc..000000000 --- a/packages/page-alerts/src/react/react.js +++ /dev/null @@ -1,82 +0,0 @@ -/*! [replace-name] v[replace-version] */ -/*************************************************************************************************************************************************************** - * - * Page alert function - * - * Use page alert to notify and alert users of important application events. - * - **************************************************************************************************************************************************************/ - -import React from 'react'; -import PropTypes from 'prop-types'; - - -// The following line will be replaced automatically with generic imports for the ES5 pipeline. -// You can safely ignore this bit if you use this module with pancake -// -// [replace-imports] - -/** - * All different kind of alerts - * - * @type {Object} - */ -const options = { - info: 'au-page-alerts--info', - warning: 'au-page-alerts--warning', - error: 'au-page-alerts--error', - success: 'au-page-alerts--success', -}; - - -/** - * DEFAULT - * Page alert - * - * @param {boolean} dark - Add the dark variation class, optional - * @param {boolean} alt - Add the alt variation class, optional - * @param {string} as - What kind of alert this is, takes: 'info', 'warning', 'error', 'success' - * @param {node} children - Anything inside the component - * @param {string} className - An additional class, optional - * @param {object} attributeOptions - Any other attribute options - */ -const AUpageAlert = ({ as, alt, dark, children, className = '', ...attributeOptions }) => ( -
    - { children } -
    -); - -AUpageAlert.propTypes = { - /** - * One of four kinds: 'info', 'success', 'warning', 'error'. - */ - as: PropTypes.oneOf([ 'info', 'warning', 'error', 'success' ]).isRequired, - /** - * An alternate variation of the component. - */ - alt: PropTypes.bool, - /** - * A dark variation of the component. - */ - dark: PropTypes.bool, - /** - * Anything inside. - */ - children: PropTypes.node.isRequired, - /** - * The class name for the element, optional. - */ - className: PropTypes.string, -}; - -export default AUpageAlert; diff --git a/packages/progress-indicator/src/react/react.js b/packages/progress-indicator/src/react/react.js deleted file mode 100644 index 7af9bea16..000000000 --- a/packages/progress-indicator/src/react/react.js +++ /dev/null @@ -1,129 +0,0 @@ -/*! [replace-name] v[replace-version] */ -/*************************************************************************************************************************************************************** - * - * progress-indicator function - * - * Indicator of progress through a multitude of pages mostly used for forms. - * - **************************************************************************************************************************************************************/ - -import React from 'react'; -import PropTypes from 'prop-types'; - - -// The following line will be replaced automatically with generic imports for the ES5 pipeline. -// You can safely ignore this bit if you use this module with pancake -// -// [replace-imports] - -/** - * All status options, can be overwritten - * - * @type {Object} - */ -const StatusText = { - doing: 'Doing', - todo: 'To do', - done: 'Done', -}; - - -/** - * An item inside the AUprogressIndicator component - * - * @param {string} link - The link URL, If no link is passed we render a button instead of a link tag, optional - * @param {string} linkComponent - The component used for the link - * @param {string} text - The text of this item - * @param {string} status - The status of this item - * @param {string} statusText - The status text of this item, optional - * @param {string} className - An additional class, optional - * @param {object} li - An additional object to be spread into the wrapping element, optional - * @param {object} attributeOptions - Any other attribute options - */ -export const AUprogressIndicatorItem = ({ link, linkComponent, text, status, statusText, className = '', li = {}, ...attributeOptions }) => { - const LinkComponent = linkComponent; - - if( link ){ - // If we are using a normal link - if( LinkComponent === 'a' ) { - attributeOptions.href = link; - } - // If we are using a link component - else if( typeof LinkComponent === 'function' ) { - attributeOptions.to = link; - } - } - - return( -
  • - { - link - ? - - { statusText ? statusText : StatusText[ status ] } - { text } - - : - - } -
    • - ) -}; - -AUprogressIndicatorItem.propTypes = { - link: PropTypes.string, - text: PropTypes.string.isRequired, - status: PropTypes.PropTypes.oneOf([ 'doing', 'todo', 'done' ]).isRequired, - statusText: PropTypes.string, - li: PropTypes.object, - linkComponent: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]), -}; - - -AUprogressIndicatorItem.defaultProps = { - linkComponent: 'a', -}; - - -/** - * DEFAULT - * The progress-indicator component - * - * @param {boolean} dark - Add the dark variation class, optional - * @param {array} items - All items for this progress indicator - * @param {string} className - An additional class, optional - * @param {string} linkComponent - The component used for the link - * @param {object} attributeOptions - Any other attribute options - */ -const AUprogressIndicator = ({ dark, linkComponent, items, className = '', ...attributeOptions }) => ( -
      - { - items.map( - ( item, i ) => - ) - } -
    -); - -AUprogressIndicator.propTypes = { - dark: PropTypes.bool, - items: PropTypes.arrayOf( - PropTypes.shape({ - link: PropTypes.string, - text: PropTypes.string.isRequired, - status: PropTypes.PropTypes.oneOf([ 'doing', 'todo', 'done' ]).isRequired, - statusText: PropTypes.string, - li: PropTypes.object, - }) - ).isRequired, - linkComponent: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]), -}; - -AUprogressIndicator.defaultProps = { - linkComponent: 'a', -}; - -export default AUprogressIndicator; diff --git a/packages/select/src/react/react.js b/packages/select/src/react/react.js deleted file mode 100644 index fe0b4300a..000000000 --- a/packages/select/src/react/react.js +++ /dev/null @@ -1,105 +0,0 @@ -/*! [replace-name] v[replace-version] */ -/*************************************************************************************************************************************************************** - * - * select function - * - * The form select element for multiple options - * - **************************************************************************************************************************************************************/ - -import React from 'react'; -import PropTypes from 'prop-types'; - - -// The following line will be replaced automatically with generic imports for the ES5 pipeline. -// You can safely ignore this bit if you use this module with pancake -// -// [replace-imports] - - -/** - * An item inside the Select component - * - * @param {string} text - The text of this option - * @param {string} value - The value of this option - * @param {object} attributeOptions - Any other attribute options - */ -export const AUselectItem = ({ text, value, ...attributeOptions }) => ( - -); - -AUselectItem.propTypes = { - /** - * - */ - text: PropTypes.string.isRequired, - /** - * - */ - value: PropTypes.string.isRequired, - /** - * The class name for the element, optional. - */ - className: PropTypes.string, -}; - - -/** - * DEFAULT - * The select component - * - * @param {boolean} dark - Add the dark variation class, optional - * @param {array} options - The options for the select, format: { value: '', text: '' } - * @param {string} block - The block option - * @param {string} status - Mark this field as either 'valid' or 'invalid', optional - * @param {string} className - An additional class, optional - * @param {object} attributeOptions - Any other attribute options - */ -const AUselect = ({ dark, options, block, status, className = '', ...attributeOptions }) => { - - return ( - - ); -}; - -AUselect.propTypes = { - /** - * A dark variation of the component - */ - dark: PropTypes.bool, - /** - * - */ - options: PropTypes.arrayOf( - PropTypes.shape({ - value: PropTypes.string.isRequired, - text: PropTypes.string.isRequired, - }) - ).isRequired, - /** - * - */ - block: PropTypes.bool, - /** - * - */ - status: PropTypes.oneOf([ 'valid', 'invalid' ]), - /** - * The class name for the element, optional. - */ - className: PropTypes.string, -}; - -export default AUselect; diff --git a/packages/side-nav/src/react/react.js b/packages/side-nav/src/react/react.js deleted file mode 100644 index 41711f695..000000000 --- a/packages/side-nav/src/react/react.js +++ /dev/null @@ -1,201 +0,0 @@ -/*! [replace-name] v[replace-version] */ -/*************************************************************************************************************************************************************** - * - * sideNav function - * - * A vertical list of links for site navigation typically placed next to the body content. - * - **************************************************************************************************************************************************************/ - -import React from 'react'; -import PropTypes from 'prop-types'; - -// ES5 dependency: import AUlinkList from '@gov.au/link-list'; -// ES6 dependency: import AUlinkList from './link-list'; -// ES5 dependency: import AUaccordion from '@gov.au/accordion'; -// ES6 dependency: import AUaccordion from './accordion'; - - -// The following line will be replaced automatically with generic imports for the ES5 pipeline. -// You can safely ignore this bit if you use this module with pancake -// -// [replace-imports] - - -/** - * A menu inside the AUsideNav - * - * @param {array} items - The links in an array containing text, location and active status - * @param {string} linkComponent - The component used for the link - */ -const AUsideNavMenu = ({ items, linkComponent }) => { - // Recursively re generate the menu with children as necessary - const GenerateMenu = ( items ) => { - const menu = items.map( item => { - const link = { - link: item.active ? '' : item.link, - text: item.active ? { item.text } : item.text, - li: { - className: item.active ? 'active' : '', - }, - }; - - // If it has children create a menu again - if( item.children ){ - link.children = - } - - // return the link, maybe with children - return link; - }); - - return menu; - } - - // Create the menu with children - return ( - - ); -} - - -/** - * DEFAULT - * The side navigation component - * - * @param {boolean} dark - Add the dark variation class, optional - * @param {boolean} alt - Add the alternate variation class, optional - * @param {string} accordionHeader - The accordion header - * @param {boolean} closed - The accordions default state - * @param {func} speed - Speed of the animation in ms, optional - * @param {func} onOpen - Executed when the accordion opens, optional - * @param {func} afterOpen - Executed after the accordion opened, optional - * @param {func} onClose - Executed when the accordion closes, optional - * @param {func} afterClose - Executed after the accordion opened, optional - * @param {string} menuHeader - The header text for the menu - * @param {string} menuHeaderLink - The link for the header in the menu - * @param {array} items - The menu items and their children - * @param {string} className - An additional class, optional - * @param {string} ariaLabel - The aria-label attribute, optional - * @param {object} attributeOptions - Any other attribute options - */ -const AUsideNav = ({ - dark, - alt, - accordionHeader, - speed, - onOpen, - afterOpen, - onClose, - afterClose, - closed, - menuHeader, - menuHeaderLink, - linkComponent, - items, - className = '', - ariaLabel, - attributeOptions, -}) => ( - - ); - -AUsideNav.propTypes = { - /** - * A dark variation of the component. - */ - dark: PropTypes.bool, - /** - * An alternate variation of the component. - */ - alt: PropTypes.bool, - /** - * The headline of the accordion. - */ - accordionHeader: PropTypes.string.isRequired, - /** - * A function executed when the accordion opens, optional. - */ - onOpen: PropTypes.func, - /** - * A function executed after the accordion opens, optional. - */ - afterOpen: PropTypes.func, - /** - * A function executed when the accordion closes, optional. - */ - onClose: PropTypes.func, - /** - * A function executed after the accordion closes, optional. - */ - afterClose: PropTypes.func, - /** - * The headline of the menu. - */ - menuHeader: PropTypes.string, - /** - * The menu headers link. - */ - menuHeaderLink: PropTypes.string, - /** - * Closed state, optional. - */ - closed: PropTypes.bool, - /** - * Speed of the animation in ms, optional. - */ - speed: PropTypes.number, - /** - * The component used for the child links, optional. - */ - linkComponent: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]), - /** - * The menu items. - */ - items: PropTypes.arrayOf( - PropTypes.shape({ - link: PropTypes.string, - text: PropTypes.node.isRequired, - children: PropTypes.array, - }) - ).isRequired, - /** - * The class name for the element, optional. - */ - className: PropTypes.string, - /** - * The aria-label attribute, defaults to "side navigation". - */ - ariaLabel: PropTypes.string, -}; - -AUsideNav.defaultProps = { - linkComponent: 'a', - closed: true, - ariaLabel: 'side navigation', -}; - -export default AUsideNav; diff --git a/packages/skip-link/src/react/react.js b/packages/skip-link/src/react/react.js deleted file mode 100644 index df9c49167..000000000 --- a/packages/skip-link/src/react/react.js +++ /dev/null @@ -1,81 +0,0 @@ -/*! [replace-name] v[replace-version] */ -/*************************************************************************************************************************************************************** - * - * skip-link function - * - * Provide skip links to navigation and content. - * - **************************************************************************************************************************************************************/ - -import React from 'react'; -import PropTypes from 'prop-types'; - - -/** - * One skip-link item - * - * @param {string} link - The href for the link - * @param {string} text - The link text - * @param {string} className - An additional class, optional - * @param {object} attributeOptions - Any other attribute options - */ -export const AUskipLinkItem = ({ link, text, className = '', ...attributeOptions }) => ( - { text } -); - -AUskipLinkItem.propTypes = { - /** - * - */ - link: PropTypes.string.isRequired, - /** - * - */ - text: PropTypes.string.isRequired, - /** - * The class name for the element, optional. - */ - className: PropTypes.string, -}; - - -/** - * DEFAULT - * The skip-link component - * - * @param {array} links - The links, format: { url: '', text: '' } - * @param {string} className - An additional class, optional - * @param {string} ariaLabel - The aria-label attribute, optional - * @param {object} attributeOptions - Any other attribute options - */ -const AUskipLink = ({ links, className = '', ariaLabel, ...attributeOptions }) => ( - -); - -AUskipLink.propTypes = { - /** - * - */ - links: PropTypes.arrayOf( - PropTypes.shape({ - link: PropTypes.string.isRequired, - text: PropTypes.string.isRequired, - }) - ).isRequired, - /** - * - */ - ariaLabel: PropTypes.string, -}; - -AUskipLink.defaultProps = { - ariaLabel: 'skip links navigation', -} - -export default AUskipLink; diff --git a/packages/tags/src/react/react.js b/packages/tags/src/react/react.js deleted file mode 100644 index 10adf4b99..000000000 --- a/packages/tags/src/react/react.js +++ /dev/null @@ -1,120 +0,0 @@ -/*! [replace-name] v[replace-version] */ -/*************************************************************************************************************************************************************** - * - * tags function - * - * Use tags to apply a taxonomy and link to similar content. - * - **************************************************************************************************************************************************************/ - -import React from 'react'; -import PropTypes from 'prop-types'; - - -/** - * A tag item inside the AUtags component - * - * @param {string} link - The link for this tag, optional - * @param {string} text - The text for the tag - * @param {object} li - An additional object to be spread into the wrapping element, optional - * @param {object} attributeOptions - Any other attribute options - */ -const AUtagItem = ({ link, linkComponent, text, li = {}, ...attributeOptions }) => { - const LinkComponent = linkComponent; - - if( link ){ - // If we are using a normal link - if( LinkComponent === 'a' ) { - attributeOptions.href = link; - } - // If we are using a link component - else if( typeof LinkComponent === 'function' ) { - attributeOptions.to = link; - } - } - - return ( -
  • - { - link - ? { text } - : { text } - } -
    • - ) -}; - - -AUtagItem.propTypes = { - /** - * - */ - link: PropTypes.string, - /** - * - */ - text: PropTypes.string.isRequired, - /** - * - */ - li: PropTypes.object, - /** - * - */ - linkComponent: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]), -}; - -AUtagItem.defaultProps = { - linkComponent: 'a', -}; - - -/** - * DEFAULT - * The tags component - * - * @param {boolean} dark - Add the dark variation class, optional - * @param {array} tags - The tags, format: { link: '', text: '', onClick: () } - * @param {string} className - An additional class, optional - * @param {object} attributeOptions - Any other attribute options - */ -const AUtags = ({ dark, linkComponent, tags, className = '', ...attributeOptions }) => ( -
      - { - tags.map( - ( tag, i ) => - ) - } -
    -); - -AUtags.propTypes = { - /** - * A dark variation of the component. - */ - dark: PropTypes.bool, - /** - * All tags inside a neat array. - */ - tags: PropTypes.arrayOf( - PropTypes.shape({ - link: PropTypes.string, - text: PropTypes.string.isRequired, - li: PropTypes.object, - }) - ).isRequired, - /** - * The class name for the element, optional. - */ - className: PropTypes.string, - /** - * The component used for the child links, optional. - */ - linkComponent: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]), -}; - -AUtags.defaultProps = { - linkComponent: 'a', -}; - -export default AUtags; diff --git a/packages/text-inputs/src/react/react.js b/packages/text-inputs/src/react/react.js deleted file mode 100644 index 9db5ff9ca..000000000 --- a/packages/text-inputs/src/react/react.js +++ /dev/null @@ -1,88 +0,0 @@ -/*! [replace-name] v[replace-version] */ -/*************************************************************************************************************************************************************** - * - * text-input function - * - * Text inputs include text inputs, labels, hints and textareas. They allow users to input data into a field. - * - **************************************************************************************************************************************************************/ - -import React from 'react'; -import PropTypes from 'prop-types'; - - -// The following line will be replaced automatically with generic imports for the ES5 pipeline. -// You can safely ignore this bit if you use this module with pancake -// -// [replace-imports] - - -/** - * DEFAULT - * The AUtextInput component - * - * @param {string} as - The kind of input, can be either 'input' or 'textarea', default: 'input' - * @param {boolean} dark - Add the dark variation class, optional - * @param {boolean} block - Add the block variation class, optional - * @param {string} status - Mark this field as either 'valid' or 'invalid', optional - * @param {string} type - The type of the field, optional, default: text - * @param {string} className - An additional class, optional - * @param {object} attributeOptions - Any other attribute options - */ -const AUtextInput = ( { as, dark, block, status, width, type = 'text', className = '', ...attributeOptions } ) => ( - as === 'textarea' - ? - : -); - -AUtextInput.propTypes = { - /** - * The kind of input, can be either 'input' or 'textarea', default: 'input'. - */ - as: PropTypes.oneOf([ 'input', 'textarea' ]), - /** - * A dark variation of the component. - */ - dark: PropTypes.bool, - /** - * Add the block variation class. - */ - block: PropTypes.bool, - /** - * Mark this field as either 'valid' or 'invalid'. - */ - status: PropTypes.oneOf([ 'valid', 'invalid' ]), - /** - * The class name for the element, optional. - */ - className: PropTypes.string, - /** - * - */ - width: PropTypes.oneOf([ 'xs', 'sm', 'md', 'lg', 'xl' ]) -}; - -AUtextInput.defaultProps = { - as: 'input', -}; - -export default AUtextInput;