diff --git a/.templates/new-module/package.json b/.templates/new-module/package.json
index c5c87997c..5471a402a 100644
--- a/.templates/new-module/package.json
+++ b/.templates/new-module/package.json
@@ -31,7 +31,7 @@
"serve": "browser-sync tests --files \"tests/**/*.html, tests/**/*.css, tests/**/*.js\"",
"watch:js": "onchange \"src/js/*.js\" -- npm run build:js",
- "watch:jsx": "onchange \"src/js/react.js\" \"tests/react/index.js\" -- npm run build",
+ "watch:jsx": "onchange \"src/react/*.js\" \"tests/react/index.js\" -- npm run build",
"watch:sass": "onchange \"src/sass/*.scss\" \"tests/site/test.scss\" -- npm run build",
"watch": "npm run build && npm-run-all --parallel serve watch:*"
},
@@ -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..b0dcaacdb 100644
--- a/packages/accordion/package.json
+++ b/packages/accordion/package.json
@@ -31,7 +31,7 @@
"serve": "browser-sync tests --files \"tests/**/*.html, tests/**/*.css, tests/**/*.js\"",
"watch:js": "onchange \"src/js/*.js\" -- npm run build:js",
- "watch:jsx": "onchange \"src/js/react.js\" \"tests/react/index.js\" -- npm run build",
+ "watch:jsx": "onchange \"src/react/*.js\" \"tests/react/index.js\" -- npm run build",
"watch:sass": "onchange \"src/sass/*.scss\" \"tests/site/test.scss\" -- npm run build",
"watch": "npm run build && npm-run-all --parallel serve watch:*"
},
@@ -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/jquery.js b/packages/accordion/src/jquery/jquery.js
similarity index 100%
rename from packages/accordion/src/js/jquery.js
rename to packages/accordion/src/jquery/jquery.js
diff --git a/packages/accordion/src/js/react.js b/packages/accordion/src/react/accordion.js
similarity index 94%
rename from packages/accordion/src/js/react.js
rename to packages/accordion/src/react/accordion.js
index e002c7633..ffd31f9f2 100644
--- a/packages/accordion/src/js/react.js
+++ b/packages/accordion/src/react/accordion.js
@@ -350,7 +350,7 @@ class AUaccordion extends React.PureComponent {
/**
* Toggle an accordion on click
*
- * @param {event object} event - The event object of the click
+ * @param {object} event - The event object of the click
*/
toggle( event ) {
event.preventDefault();
@@ -391,15 +391,45 @@ class AUaccordion extends React.PureComponent {
};
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,
};
diff --git a/packages/body/package.json b/packages/body/package.json
index 846d90ab2..b18156aec 100644
--- a/packages/body/package.json
+++ b/packages/body/package.json
@@ -33,7 +33,7 @@
"serve": "browser-sync tests --files \"tests/**/*.html, tests/**/*.css, tests/**/*.js\"",
"watch:js": "onchange \"src/js/*.js\" -- npm run build:js",
- "watch:jsx": "onchange \"src/js/react.js\" \"tests/react/index.js\" -- npm run build",
+ "watch:jsx": "onchange \"src/react/*.js\" \"tests/react/index.js\" -- npm run build",
"watch:sass": "onchange \"src/sass/*.scss\" \"tests/site/test.scss\" -- npm run build",
"watch": "npm run build && npm-run-all --parallel serve watch:*"
},
diff --git a/packages/breadcrumbs/package.json b/packages/breadcrumbs/package.json
index 162cf6dd5..457b8aab9 100644
--- a/packages/breadcrumbs/package.json
+++ b/packages/breadcrumbs/package.json
@@ -33,7 +33,7 @@
"serve": "browser-sync tests --files \"tests/**/*.html, tests/**/*.css, tests/**/*.js\"",
"watch:js": "onchange \"src/js/*.js\" -- npm run build:js",
- "watch:jsx": "onchange \"src/js/react.js\" \"tests/react/index.js\" -- npm run build",
+ "watch:jsx": "onchange \"src/react/*.js\" \"tests/react/index.js\" -- npm run build",
"watch:sass": "onchange \"src/sass/*.scss\" \"tests/site/test.scss\" -- npm run build",
"watch": "npm run build && npm-run-all --parallel serve watch:*"
},
@@ -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/breadcrumbs.js
similarity index 90%
rename from packages/breadcrumbs/src/js/react.js
rename to packages/breadcrumbs/src/react/breadcrumbs.js
index 9bf5e9ef6..61ffddaf5 100644
--- a/packages/breadcrumbs/src/js/react.js
+++ b/packages/breadcrumbs/src/react/breadcrumbs.js
@@ -42,14 +42,26 @@ const AUbreadcrumbs = ({ dark, label, items, linkComponent, className = '', ...a
);
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 ])
};
diff --git a/packages/buttons/package.json b/packages/buttons/package.json
index 71f710c84..f7890ebd4 100644
--- a/packages/buttons/package.json
+++ b/packages/buttons/package.json
@@ -31,7 +31,7 @@
"serve": "browser-sync tests --files \"tests/**/*.html, tests/**/*.css, tests/**/*.js\"",
"watch:js": "onchange \"src/js/*.js\" -- npm run build:js",
- "watch:jsx": "onchange \"src/js/react.js\" \"tests/react/index.js\" -- npm run build",
+ "watch:jsx": "onchange \"src/react/*.js\" \"tests/react/index.js\" -- npm run build",
"watch:sass": "onchange \"src/sass/*.scss\" \"tests/site/test.scss\" -- npm run build",
"watch": "npm run build && npm-run-all --parallel serve watch:*"
},
@@ -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/buttons.js
similarity index 88%
rename from packages/buttons/src/js/react.js
rename to packages/buttons/src/react/buttons.js
index 7bb8c932e..effc33fb5 100644
--- a/packages/buttons/src/js/react.js
+++ b/packages/buttons/src/react/buttons.js
@@ -79,13 +79,34 @@ const AUbutton = ({ linkComponent, link, children, as, dark, type, block, classN
};
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 ]),
};
diff --git a/packages/callout/package.json b/packages/callout/package.json
index 1d422f208..0b7cd3bdb 100644
--- a/packages/callout/package.json
+++ b/packages/callout/package.json
@@ -35,7 +35,7 @@
"serve": "browser-sync tests --files \"tests/**/*.html, tests/**/*.css, tests/**/*.js\"",
"watch:js": "onchange \"src/js/*.js\" -- npm run build:js",
- "watch:jsx": "onchange \"src/js/react.js\" \"tests/react/index.js\" -- npm run build",
+ "watch:jsx": "onchange \"src/react/*.js\" \"tests/react/index.js\" -- npm run build",
"watch:sass": "onchange \"src/sass/*.scss\" \"tests/site/test.scss\" -- npm run build",
"watch": "npm run build && npm-run-all --parallel serve watch:*"
},
@@ -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/react/callout.js b/packages/callout/src/react/callout.js
new file mode 100644
index 000000000..339babd12
--- /dev/null
+++ b/packages/callout/src/react/callout.js
@@ -0,0 +1,83 @@
+/*! [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 = {
+ level: 2,
+ srOnlyTitle: false,
+};
diff --git a/packages/callout/src/js/react.js b/packages/callout/src/react/calloutCalendar.js
similarity index 58%
rename from packages/callout/src/js/react.js
rename to packages/callout/src/react/calloutCalendar.js
index ef03d2099..46dfc9a43 100644
--- a/packages/callout/src/js/react.js
+++ b/packages/callout/src/react/calloutCalendar.js
@@ -1,67 +1,16 @@
-/*! [replace-name] v[replace-version] */
/***************************************************************************************************************************************************************
*
- * Callout function
+ * Callout calendar function
*
- * Use callout to notify and alert users of important snippets of information.
+ * Use callout calendar to ...
*
**************************************************************************************************************************************************************/
+
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: PropTypes.string.isRequired,
- level: PropTypes.number,
- srOnlyTitle: PropTypes.bool,
- dark: PropTypes.bool,
- alt: PropTypes.bool,
- children: PropTypes.node.isRequired,
- className: PropTypes.string,
-};
-
-AUcallout.defaultProps = {
- level: 2,
- srOnlyTitle: false,
-};
-
-
/**
* Calendar callout
*
@@ -97,19 +46,52 @@ export const AUcalloutCalendar = ({ title, level, srOnlyTitle, dark, alt, sublin
}
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/package.json b/packages/control-input/package.json
index c168a31ea..eb5b8d008 100644
--- a/packages/control-input/package.json
+++ b/packages/control-input/package.json
@@ -31,7 +31,7 @@
"serve": "browser-sync tests --files \"tests/**/*.html, tests/**/*.css, tests/**/*.js\"",
"watch:js": "onchange \"src/js/*.js\" -- npm run build:js",
- "watch:jsx": "onchange \"src/js/react.js\" \"tests/react/index.js\" -- npm run build",
+ "watch:jsx": "onchange \"src/react/*.js\" \"tests/react/index.js\" -- npm run build",
"watch:sass": "onchange \"src/sass/*.scss\" \"tests/site/test.scss\" -- npm run build",
"watch": "npm run build && npm-run-all --parallel serve watch:*"
},
@@ -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/control-input.js
similarity index 58%
rename from packages/control-input/src/js/react.js
rename to packages/control-input/src/react/control-input.js
index dc25070b5..5121f4614 100644
--- a/packages/control-input/src/js/react.js
+++ b/packages/control-input/src/react/control-input.js
@@ -1,7 +1,7 @@
/*! [replace-name] v[replace-version] */
/***************************************************************************************************************************************************************
*
- * control-input function
+ * control-input checkbox function
*
* Control inputs include radio buttons and checkboxes. They allow users to select one or more options.
*
@@ -49,55 +49,36 @@ export const AUcheckbox = ({ dark, alt, small, block, label, status, id, classNa
};
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' ]),
- 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 = {
- dark: PropTypes.bool,
- alt: PropTypes.bool,
- small: PropTypes.bool,
- block: PropTypes.bool,
- label: PropTypes.string.isRequired,
+ /**
+ *
+ */
id: PropTypes.string.isRequired,
+ /**
+ *
+ */
status: PropTypes.oneOf([ 'valid', 'invalid' ]),
+ /**
+ * The class name for the element, optional.
+ */
className: PropTypes.string,
};
diff --git a/packages/control-input/src/react/control-inputRadio.js b/packages/control-input/src/react/control-inputRadio.js
new file mode 100644
index 000000000..fe62eaca0
--- /dev/null
+++ b/packages/control-input/src/react/control-inputRadio.js
@@ -0,0 +1,77 @@
+/***************************************************************************************************************************************************************
+ *
+ * control-input radio 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 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/core/package.json b/packages/core/package.json
index db8815f39..9fece00ba 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -31,7 +31,7 @@
"serve": "browser-sync tests --files \"tests/**/*.html, tests/**/*.css, tests/**/*.js\"",
"watch:js": "onchange \"src/js/*.js\" -- npm run build:js",
- "watch:jsx": "onchange \"src/js/react.js\" \"tests/react/index.js\" -- npm run build",
+ "watch:jsx": "onchange \"src/react/*.js\" \"tests/react/index.js\" -- npm run build",
"watch:sass": "onchange \"src/sass/*.scss\" \"tests/site/test.scss\" -- npm run build",
"watch": "npm run build && npm-run-all --parallel serve watch:*"
},
diff --git a/packages/cta-link/package.json b/packages/cta-link/package.json
index f239a02dc..a6b9ba908 100644
--- a/packages/cta-link/package.json
+++ b/packages/cta-link/package.json
@@ -34,7 +34,7 @@
"serve": "browser-sync tests --files \"tests/**/*.html, tests/**/*.css, tests/**/*.js\"",
"watch:js": "onchange \"src/js/*.js\" -- npm run build:js",
- "watch:jsx": "onchange \"src/js/react.js\" \"tests/react/index.js\" -- npm run build",
+ "watch:jsx": "onchange \"src/react/*.js\" \"tests/react/index.js\" -- npm run build",
"watch:sass": "onchange \"src/sass/*.scss\" \"tests/site/test.scss\" -- npm run build",
"watch": "npm run build && npm-run-all --parallel serve watch:*"
},
@@ -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/cta-link.js
similarity index 89%
rename from packages/cta-link/src/js/react.js
rename to packages/cta-link/src/react/cta-link.js
index e77e8d0c2..b8642c8dd 100644
--- a/packages/cta-link/src/js/react.js
+++ b/packages/cta-link/src/react/cta-link.js
@@ -53,10 +53,25 @@ const AUctaLink = ({ linkComponent, dark, link, text, className = '', ...attribu
}
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 ])
};
diff --git a/packages/direction-links/package.json b/packages/direction-links/package.json
index 29d76df3b..56afd27d8 100644
--- a/packages/direction-links/package.json
+++ b/packages/direction-links/package.json
@@ -37,7 +37,7 @@
"serve": "browser-sync tests --files \"tests/**/*.html, tests/**/*.css, tests/**/*.js\"",
"watch:js": "onchange \"src/js/*.js\" -- npm run build:js",
- "watch:jsx": "onchange \"src/js/react.js\" \"tests/react/index.js\" -- npm run build",
+ "watch:jsx": "onchange \"src/react/*.js\" \"tests/react/index.js\" -- npm run build",
"watch:sass": "onchange \"src/sass/*.scss\" \"tests/site/test.scss\" -- npm run build",
"watch": "npm run build && npm-run-all --parallel serve watch:*"
},
@@ -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/direction-links.js
similarity index 90%
rename from packages/direction-links/src/js/react.js
rename to packages/direction-links/src/react/direction-links.js
index 81b7356e8..1ce1ae465 100644
--- a/packages/direction-links/src/js/react.js
+++ b/packages/direction-links/src/react/direction-links.js
@@ -67,11 +67,29 @@ const AUdirectionLink = ({ linkComponent, dark, link, text, direction, className
};
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 ])
};
diff --git a/packages/footer/package.json b/packages/footer/package.json
index 48b79c7af..8de4e2cd4 100644
--- a/packages/footer/package.json
+++ b/packages/footer/package.json
@@ -34,7 +34,7 @@
"serve": "browser-sync tests --files \"tests/**/*.html, tests/**/*.css, tests/**/*.js\"",
"watch:js": "onchange \"src/js/*.js\" -- npm run build:js",
- "watch:jsx": "onchange \"src/js/react.js\" \"tests/react/index.js\" -- npm run build",
+ "watch:jsx": "onchange \"src/react/*.js\" \"tests/react/index.js\" -- npm run build",
"watch:sass": "onchange \"src/sass/*.scss\" \"tests/site/test.scss\" -- npm run build",
"watch": "npm run build && npm-run-all --parallel serve watch:*"
},
@@ -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/footer.js
similarity index 54%
rename from packages/footer/src/js/react.js
rename to packages/footer/src/react/footer.js
index e124f0917..0e3f25174 100644
--- a/packages/footer/src/js/react.js
+++ b/packages/footer/src/react/footer.js
@@ -17,51 +17,6 @@ import PropTypes from 'prop-types';
// [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 = {
- children: PropTypes.node.isRequired,
- className: PropTypes.string,
- ariaLabel: PropTypes.string,
-};
-
-AUfooterNav.defaultProps = {
- ariaLabel: 'footer',
-}
-
-
-/**
- * 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 = {
- children: PropTypes.node.isRequired,
- className: PropTypes.string,
-};
-
-
/**
* DEFAULT
* The footer component
@@ -83,9 +38,21 @@ const AUfooter = ({ dark, alt, children, className = '', ...attributeOptions })
);
AUfooter.propTypes = {
+ /**
+ * A dark variation of the component
+ */
dark: PropTypes.bool,
+ /**
+ * A alternate variation of the component
+ */
alt: PropTypes.bool,
+ /**
+ * The elements inside.
+ */
children: PropTypes.node.isRequired,
+ /**
+ * The class name for the element, optional.
+ */
className: PropTypes.string,
};
diff --git a/packages/footer/src/react/footerEnd.js b/packages/footer/src/react/footerEnd.js
new file mode 100644
index 000000000..fdb7b7d4c
--- /dev/null
+++ b/packages/footer/src/react/footerEnd.js
@@ -0,0 +1,36 @@
+/***************************************************************************************************************************************************************
+ *
+ * footer end 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';
+
+
+/**
+ * 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,
+};
diff --git a/packages/footer/src/react/footerNav.js b/packages/footer/src/react/footerNav.js
new file mode 100644
index 000000000..ad604a6da
--- /dev/null
+++ b/packages/footer/src/react/footerNav.js
@@ -0,0 +1,45 @@
+/***************************************************************************************************************************************************************
+ *
+ * footer nav 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';
+
+
+/**
+ * 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',
+}
diff --git a/packages/form/package.json b/packages/form/package.json
index ef891bbdf..aa3f4ca9a 100644
--- a/packages/form/package.json
+++ b/packages/form/package.json
@@ -23,10 +23,10 @@
"build:pre": "node ../../scripts/helper.js precompile publish",
"build:js": "npm run build:pre && node ../../scripts/helper.js compile",
"build:react": "cd tests/react/ && webpack",
- "build": "npm run build:js && npm run build:react",
+ "build": "npm run build:js",
"serve": "browser-sync tests --files \"tests/**/*.html, tests/**/*.css, tests/**/*.js\"",
"watch:js": "onchange \"src/js/*.js\" -- npm run build:js",
- "watch:jsx": "onchange \"src/js/react.js\" \"tests/react/index.js\" -- npm run build",
+ "watch:jsx": "onchange \"src/react/*.js\" \"tests/react/index.js\" -- npm run build:react",
"watch:sass": "onchange \"src/sass/*.scss\" \"tests/site/test.scss\" -- npm run build",
"watch": "npm run build && npm-run-all --parallel serve watch:*"
},
@@ -43,11 +43,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/form/src/js/react.js b/packages/form/src/js/react.js
deleted file mode 100644
index 125fecbe1..000000000
--- a/packages/form/src/js/react.js
+++ /dev/null
@@ -1,230 +0,0 @@
-/*! [replace-name] v[replace-version] */
-/***************************************************************************************************************************************************************
- *
- * form function
- *
- * The form component contains layout, labelling and inline validations for form fields
- *
- **************************************************************************************************************************************************************/
-
-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 label component
- *
- * @param {string} text - Text of the label, required
- * @param {boolean} dark - Add the dark variation class, optional
- * @param {boolean} inline - Display the label inline, optional
- * @param {string} className - An additional class, optional
- * @param {object} attributeOptions - Any other attribute options
- */
-export const AUlabel = ( { text, dark, inline, className, ...attributeOptions } ) => (
-
-);
-
-AUlabel.propTypes = {
- /**
- * Text of the label, required
- */
- text: PropTypes.string.isRequired,
- /**
- * Add the dark variation class, optional
- */
- dark: PropTypes.bool,
- /**
- * Display the label inline, optional
- */
- inline: PropTypes.bool,
- /**
- * An additional class, optional
- */
- className: PropTypes.string,
-};
-
-
-AUlabel.defaultProps = {
- className: ''
-}
-
-
-/**
- * The hint text component
- *
- * @param {string} text - Text of the label, required
- * @param {boolean} dark - Add the dark variation class, optional
- * @param {boolean} alt - Add the alt variation class, optional
- * @param {string} className - An additional class, optional
- * @param {object} attributeOptions - Any other attribute options
- */
-export const AUhintText = ( { text, dark, alt, className, ...attributeOptions } ) => (
-
- { text }
-
-);
-
-
-AUhintText.propTypes = {
- /**
- * Text of the label, required
- */
- text: PropTypes.string.isRequired,
- /**
- * Add the dark variation class, optional
- */
- alt: PropTypes.bool,
- /**
- * Add the alt variation class, optional
- */
- dark: PropTypes.bool,
- /**
- * An additional class, optional
- */
- className: PropTypes.string,
-};
-
-
-AUhintText.defaultProps = {
- className: ''
-}
-
-
-/**
- * The error text component
- *
- * @param {string} text - Text of the label, required
- * @param {boolean} dark - Add the dark variation class, optional
- * @param {boolean} inline - Display the error text inline, optional
- * @param {string} className - An additional class, optional
- * @param {object} attributeOptions - Any other attribute options
- */
-export const AUerrorText = ( { text, dark, inline, className, ...attributeOptions } ) => (
-
- { text }
-
-);
-
-
-AUerrorText.propTypes = {
- /**
- * Text of the label, required
- */
- dark: PropTypes.bool,
- /**
- * Add the dark variation class, optional
- */
- text: PropTypes.string.isRequired,
- /**
- * Display the error text inline, optional
- */
- inline: PropTypes.bool,
- /**
- * An additional class, optional
- */
- className: PropTypes.string,
-};
-
-
-AUerrorText.defaultProps = {
- className: ''
-}
-
-/**
- * The form group component
- *
- * @param {string} status - Adds invalid state to form group
- * @param {string} className - An additional class, optional
- * @param {object} attributeOptions - Any other attribute options
- */
-export const AUformGroup = ( { status, dark, className, ...attributeOptions } ) => (
-
-);
-
-
-AUformGroup.propTypes = {
- /**
- * Adds invalid state to form group
- */
- status: PropTypes.oneOf(['valid', 'invalid']),
- /**
- * An additional class, optional
- */
- className: PropTypes.string,
-};
-
-AUformGroup.defaultProps = {
- status: "valid",
- className: ''
-}
-
-
-/**
- * The fieldset component
- *
- * @param {string} className - An additional class, optional
- * @param {object} attributeOptions - Any other attribute options
- */
-export const AUfieldset = ( { dark, className, ...attributeOptions } ) => (
-
-);
-
-
-AUfieldset.propTypes = {
- /**
- * An additional class, optional
- */
- className: PropTypes.string,
-};
-
-
-AUfieldset.defaultProps = {
- className: ''
-}
-
-
-/**
- * The legend component
- *
- * @param {object} attributeOptions - Any other attribute options
- */
-export const AUlegend = ( {...attributeOptions} ) => (
-
-);
diff --git a/packages/form/src/react/form.js b/packages/form/src/react/form.js
new file mode 100644
index 000000000..09e5f1bcb
--- /dev/null
+++ b/packages/form/src/react/form.js
@@ -0,0 +1,47 @@
+/*! [replace-name] v[replace-version] */
+/***************************************************************************************************************************************************************
+ *
+ * form fieldset function
+ *
+ * The form component contains layout, labelling and inline validations for form fields
+ *
+**************************************************************************************************************************************************************/
+
+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 fieldset component
+ *
+ * @param {string} className - An additional class, optional
+ * @param {object} attributeOptions - Any other attribute options
+ */
+export const AUfieldset = ( { dark, className, ...attributeOptions } ) => (
+
+);
+
+
+AUfieldset.propTypes = {
+ /**
+ * An additional class, optional
+ */
+ className: PropTypes.string,
+};
+
+
+AUfieldset.defaultProps = {
+ className: ''
+}
diff --git a/packages/form/src/react/formErrorText.js b/packages/form/src/react/formErrorText.js
new file mode 100644
index 000000000..034a02563
--- /dev/null
+++ b/packages/form/src/react/formErrorText.js
@@ -0,0 +1,58 @@
+/***************************************************************************************************************************************************************
+ *
+ * form error text function
+ *
+ * The form component contains layout, labelling and inline validations for form fields
+ *
+**************************************************************************************************************************************************************/
+
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+/**
+ * The error text component
+ *
+ * @param {string} text - Text of the label, required
+ * @param {boolean} dark - Add the dark variation class, optional
+ * @param {boolean} inline - Display the error text inline, optional
+ * @param {string} className - An additional class, optional
+ * @param {object} attributeOptions - Any other attribute options
+ */
+export const AUerrorText = ( { text, dark, inline, className, ...attributeOptions } ) => (
+
+ { text }
+
+);
+
+
+AUerrorText.propTypes = {
+ /**
+ * Text of the label, required
+ */
+ dark: PropTypes.bool,
+ /**
+ * Add the dark variation class, optional
+ */
+ text: PropTypes.string.isRequired,
+ /**
+ * Display the error text inline, optional
+ */
+ inline: PropTypes.bool,
+ /**
+ * An additional class, optional
+ */
+ className: PropTypes.string,
+};
+
+
+AUerrorText.defaultProps = {
+ className: ''
+}
diff --git a/packages/form/src/react/formGroup.js b/packages/form/src/react/formGroup.js
new file mode 100644
index 000000000..527792bb5
--- /dev/null
+++ b/packages/form/src/react/formGroup.js
@@ -0,0 +1,50 @@
+/***************************************************************************************************************************************************************
+ *
+ * form group function
+ *
+ * The form component contains layout, labelling and inline validations for form fields
+ *
+**************************************************************************************************************************************************************/
+
+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 form group component
+ *
+ * @param {string} status - Adds invalid state to form group
+ * @param {string} className - An additional class, optional
+ * @param {object} attributeOptions - Any other attribute options
+ */
+export const AUformGroup = ( { status, dark, className, ...attributeOptions } ) => (
+
+);
+
+
+AUformGroup.propTypes = {
+ /**
+ * Adds invalid state to form group
+ */
+ status: PropTypes.oneOf(['valid', 'invalid']),
+ /**
+ * An additional class, optional
+ */
+ className: PropTypes.string,
+};
+
+AUformGroup.defaultProps = {
+ status: "valid",
+ className: ''
+}
diff --git a/packages/form/src/react/formHintText.js b/packages/form/src/react/formHintText.js
new file mode 100644
index 000000000..131eec2cb
--- /dev/null
+++ b/packages/form/src/react/formHintText.js
@@ -0,0 +1,58 @@
+/***************************************************************************************************************************************************************
+ *
+ * form hint text function
+ *
+ * The form component contains layout, labelling and inline validations for form fields
+ *
+**************************************************************************************************************************************************************/
+
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+/**
+ * The hint text component
+ *
+ * @param {string} text - Text of the label, required
+ * @param {boolean} dark - Add the dark variation class, optional
+ * @param {boolean} alt - Add the alt variation class, optional
+ * @param {string} className - An additional class, optional
+ * @param {object} attributeOptions - Any other attribute options
+ */
+export const AUhintText = ( { text, dark, alt, className, ...attributeOptions } ) => (
+
+ { text }
+
+);
+
+
+AUhintText.propTypes = {
+ /**
+ * Text of the label, required
+ */
+ text: PropTypes.string.isRequired,
+ /**
+ * Add the dark variation class, optional
+ */
+ alt: PropTypes.bool,
+ /**
+ * Add the alt variation class, optional
+ */
+ dark: PropTypes.bool,
+ /**
+ * An additional class, optional
+ */
+ className: PropTypes.string,
+};
+
+
+AUhintText.defaultProps = {
+ className: ''
+}
diff --git a/packages/form/src/react/formLabel.js b/packages/form/src/react/formLabel.js
new file mode 100644
index 000000000..a2b55195b
--- /dev/null
+++ b/packages/form/src/react/formLabel.js
@@ -0,0 +1,57 @@
+/***************************************************************************************************************************************************************
+ *
+ * form label function
+ *
+ * The form component contains layout, labelling and inline validations for form fields
+ *
+**************************************************************************************************************************************************************/
+
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+/**
+ * The label component
+ *
+ * @param {string} text - Text of the label, required
+ * @param {boolean} dark - Add the dark variation class, optional
+ * @param {boolean} inline - Display the label inline, optional
+ * @param {string} className - An additional class, optional
+ * @param {object} attributeOptions - Any other attribute options
+ */
+export const AUlabel = ( { text, dark, inline, className, ...attributeOptions } ) => (
+
+);
+
+AUlabel.propTypes = {
+ /**
+ * Text of the label, required
+ */
+ text: PropTypes.string.isRequired,
+ /**
+ * Add the dark variation class, optional
+ */
+ dark: PropTypes.bool,
+ /**
+ * Display the label inline, optional
+ */
+ inline: PropTypes.bool,
+ /**
+ * An additional class, optional
+ */
+ className: PropTypes.string,
+};
+
+
+AUlabel.defaultProps = {
+ className: ''
+}
diff --git a/packages/form/src/react/formLegend.js b/packages/form/src/react/formLegend.js
new file mode 100644
index 000000000..132bc06b3
--- /dev/null
+++ b/packages/form/src/react/formLegend.js
@@ -0,0 +1,21 @@
+/***************************************************************************************************************************************************************
+ *
+ * form legend function
+ *
+ * The form component contains layout, labelling and inline validations for form fields
+ *
+**************************************************************************************************************************************************************/
+
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+/**
+ * The legend component
+ *
+ * @param {object} attributeOptions - Any other attribute options
+ */
+export const AUlegend = ( {...attributeOptions} ) => (
+
+);
diff --git a/packages/form/tests/react/index.js b/packages/form/tests/react/index.js
index d682e813e..976423e3b 100644
--- a/packages/form/tests/react/index.js
+++ b/packages/form/tests/react/index.js
@@ -1,11 +1,11 @@
import React from 'react';
import ReactDOM from 'react-dom';
-import { AUlabel, AUhintText, AUerrorText, AUformGroup, AUfieldset, AUForm, AUlegend } from './form.js';
-import AUtextInput from '../../../text-inputs/src/js/react';
-import AUheading from '../../../headings/src/js/react';
-import AUselect from '../../../select/src/js/react';
-import { AUcheckbox } from '../../../control-input/src/js/react';
+import { AUlabel, AUhintText, AUerrorText, AUformGroup, AUfieldset, AUlegend } from './form.js';
+import AUtextInput from '../../../text-inputs';
+import AUheading from '../../../headings';
+import AUselect from '../../../select';
+import { AUcheckbox } from '../../../control-input';
class App extends React.Component {
diff --git a/packages/grid-12/package.json b/packages/grid-12/package.json
index 23b6a67b4..e1e8d28aa 100644
--- a/packages/grid-12/package.json
+++ b/packages/grid-12/package.json
@@ -33,7 +33,7 @@
"serve": "browser-sync tests --files \"tests/**/*.html, tests/**/*.css, tests/**/*.js\"",
"watch:js": "onchange \"src/js/*.js\" -- npm run build:js",
- "watch:jsx": "onchange \"src/js/react.js\" \"tests/react/index.js\" -- npm run build",
+ "watch:jsx": "onchange \"src/react/*.js\" \"tests/react/index.js\" -- npm run build",
"watch:sass": "onchange \"src/sass/*.scss\" \"tests/site/test.scss\" -- npm run build",
"watch": "npm run build && npm-run-all --parallel serve watch:*"
},
diff --git a/packages/header/package.json b/packages/header/package.json
index 0521d3e51..45cbb361d 100644
--- a/packages/header/package.json
+++ b/packages/header/package.json
@@ -33,7 +33,7 @@
"serve": "browser-sync tests --files \"tests/**/*.html, tests/**/*.css, tests/**/*.js\"",
"watch:js": "onchange \"src/js/*.js\" -- npm run build:js",
- "watch:jsx": "onchange \"src/js/react.js\" \"tests/react/index.js\" -- npm run build",
+ "watch:jsx": "onchange \"src/react/*.js\" \"tests/react/index.js\" -- npm run build",
"watch:sass": "onchange \"src/sass/*.scss\" \"tests/site/test.scss\" -- npm run build",
"watch": "npm run build && npm-run-all --parallel serve watch:*"
},
@@ -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/react/header.js b/packages/header/src/react/header.js
new file mode 100644
index 000000000..f96e6bf10
--- /dev/null
+++ b/packages/header/src/react/header.js
@@ -0,0 +1,47 @@
+/*! [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]
+
+
+/**
+ * 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/header/src/js/react.js b/packages/header/src/react/headerBrand.js
similarity index 67%
rename from packages/header/src/js/react.js
rename to packages/header/src/react/headerBrand.js
index a1b7faccb..7b705a8d6 100644
--- a/packages/header/src/js/react.js
+++ b/packages/header/src/react/headerBrand.js
@@ -1,22 +1,16 @@
-/*! [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
*
@@ -89,14 +83,41 @@ export const AUheaderBrand = ({
}
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 ]),
}
@@ -105,33 +126,3 @@ AUheaderBrand.defaultProps = {
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/package.json b/packages/headings/package.json
index 19ffa9950..a0c9027bb 100644
--- a/packages/headings/package.json
+++ b/packages/headings/package.json
@@ -35,7 +35,7 @@
"serve": "browser-sync tests --files \"tests/**/*.html, tests/**/*.css, tests/**/*.js\"",
"watch:js": "onchange \"src/js/*.js\" -- npm run build:js",
- "watch:jsx": "onchange \"src/js/react.js\" \"tests/react/index.js\" -- npm run build",
+ "watch:jsx": "onchange \"src/react/*.js\" \"tests/react/index.js\" -- npm run build",
"watch:sass": "onchange \"src/sass/*.scss\" \"tests/site/test.scss\" -- npm run build",
"watch": "npm run build && npm-run-all --parallel serve watch:*"
},
@@ -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/headings.js
similarity index 90%
rename from packages/headings/src/js/react.js
rename to packages/headings/src/react/headings.js
index 4af8d15aa..847ebf347 100644
--- a/packages/headings/src/js/react.js
+++ b/packages/headings/src/react/headings.js
@@ -51,9 +51,18 @@ const AUheading = ({ level, size, children, className = '', ...attributeOptions
};
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,
};
diff --git a/packages/inpage-nav/package.json b/packages/inpage-nav/package.json
index fbd311c1c..3852ced15 100644
--- a/packages/inpage-nav/package.json
+++ b/packages/inpage-nav/package.json
@@ -35,7 +35,7 @@
"serve": "browser-sync tests --files \"tests/**/*.html, tests/**/*.css, tests/**/*.js\"",
"watch:js": "onchange \"src/js/*.js\" -- npm run build:js",
- "watch:jsx": "onchange \"src/js/react.js\" \"tests/react/index.js\" -- npm run build",
+ "watch:jsx": "onchange \"src/react/*.js\" \"tests/react/index.js\" -- npm run build",
"watch:sass": "onchange \"src/sass/*.scss\" \"tests/site/test.scss\" -- npm run build",
"watch": "npm run build && npm-run-all --parallel serve watch:*"
},
@@ -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/inpage-nav.js
similarity index 52%
rename from packages/inpage-nav/src/js/react.js
rename to packages/inpage-nav/src/react/inpage-nav.js
index c01ae4ce7..e63427ee7 100644
--- a/packages/inpage-nav/src/js/react.js
+++ b/packages/inpage-nav/src/react/inpage-nav.js
@@ -17,66 +17,6 @@ import PropTypes from 'prop-types';
// [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 }) => (
-