Seperate react components into single files

.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",

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",

packages/accordion/src/js/react.js → 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,
 };
 

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:*"
 	},

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",

packages/breadcrumbs/src/js/react.js → 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 ])
 };
 

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",

packages/buttons/src/js/react.js → 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 ]),
 };
 

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",

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 (<h1/> <h2/> 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 (
+		<section
+			className={ `au-callout ${ className }${ dark ? ' au-callout--dark' : '' }${ alt ? ' au-callout--alt' : '' }` }
+			{ ...attributeOptions }
+		>
+			<HeadingTag
+				children={ title }
+				className={ `au-callout__heading${ srOnlyTitle ? ' au-callout__heading--sronly' : '' }` }
+			/>
+			{ children }
+		</section>
+	)
+};
+
+AUcallout.propTypes = {
+	/**
+	 * Title of the callout.
+	 */
+	title: PropTypes.string.isRequired,
+	/**
+	 * The tag level (<h1/> <h2/> 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,
+};