Move react components into react/ folders

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

packages/accordion/package.json

@@ -52,11 +52,11 @@
 				"path": "lib/js/module.js"
 			},
 			"react": {
-				"path": "lib/js/react.js"
+				"path": "lib/react/accordion.js"
 			}
 		}
 	},
-	"main": "lib/js/react.es5.js",
+	"main": "lib/react/accordion.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();
@@ -390,16 +390,47 @@ 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/breadcrumbs/package.json

@@ -50,11 +50,11 @@
 				"sass-versioning": true
 			},
 			"react": {
-				"path": "lib/js/react.js"
+				"path": "lib/react/breadcrumbs.js"
 			}
 		}
 	},
-	"main": "lib/js/react.es5.js",
+	"main": "lib/react/breadcrumbs.es6.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

@@ -48,11 +48,11 @@
 				"sass-versioning": true
 			},
 			"react": {
-				"path": "lib/js/react.js"
+				"path": "lib/react/buttons.js"
 			}
 		}
 	},
-	"main": "lib/js/react.es5.js",
+	"main": "lib/react/buttons.es6.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,37 @@ 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

@@ -52,11 +52,11 @@
 				"sass-versioning": true
 			},
 			"react": {
-				"path": "lib/js/react.js"
+				"path": "lib/react/callout.js"
 			}
 		}
 	},
-	"main": "lib/js/react.es5.js",
+	"main": "lib/react/callout.es6.js",
 	"dependencies": {
 		"@gov.au/pancake": "~1",
 		"@gov.au/pancake-sass": "~2",

packages/callout/src/js/react.js → packages/callout/src/react/callout.js

@@ -10,6 +10,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import AUcalloutCalendar from './calloutCalendar';
+
 
 // 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
@@ -47,69 +49,39 @@ export const AUcallout = ({ title, level, srOnlyTitle, dark, alt, description, c
 };
 
 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 = {
+	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 (<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}  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 (
-		<section
-			className={ `au-callout au-callout--calendar-event ${ className }${ dark ? ' au-callout--dark' : '' }${ alt ? ' au-callout--alt' : '' }` }
-			{ ...attributeOptions }
-		>
-			<HeadingTag
-				children={ title }
-				className={ `au-callout__heading${ srOnlyTitle ? ' au-callout__heading--sronly' : '' }` }
-			/>
-			{ subline && <p className="au-callout--calendar-event__lede">{ subline }</p> }
-			<time className="au-callout--calendar-event__time" dateTime={ new Date( datetime ).toJSON() }>{ time }</time>
-			{ name && <span className="au-callout--calendar-event__name">{ name }</span> }
-		</section>
-	)
-}
-
-AUcalloutCalendar.propTypes = {
-	title: PropTypes.string.isRequired,
-	level: PropTypes.number,
-	srOnlyTitle: PropTypes.bool,
-	dark: PropTypes.bool,
-	alt: PropTypes.bool,
-	subline: PropTypes.string,
-	datetime: PropTypes.string.isRequired,
-	time: PropTypes.string.isRequired,
-	name: PropTypes.string,
-	className: PropTypes.string,
-};
-
-AUcalloutCalendar.defaultProps = {
-	level: 2,
-	srOnlyTitle: true,
-};

packages/callout/src/react/calloutCalendar.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+/**
+ * Calendar 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}  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 (
+		<section
+			className={ `au-callout au-callout--calendar-event ${ className }${ dark ? ' au-callout--dark' : '' }${ alt ? ' au-callout--alt' : '' }` }
+			{ ...attributeOptions }
+		>
+			<HeadingTag
+				children={ title }
+				className={ `au-callout__heading${ srOnlyTitle ? ' au-callout__heading--sronly' : '' }` }
+			/>
+			{ subline && <p className="au-callout--calendar-event__lede">{ subline }</p> }
+			<time className="au-callout--calendar-event__time" dateTime={ new Date( datetime ).toJSON() }>{ time }</time>
+			{ name && <span className="au-callout--calendar-event__name">{ name }</span> }
+		</section>
+	)
+}
+
+AUcalloutCalendar.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,
+	/**
+	 * 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,
+};

packages/callout/tests/react/index.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import { AUcallout, AUcalloutCalendar } from './callout.js';
+import { AUcallout } from './callout.js';
+import { AUcalloutCalendar } from './calloutCalendar.js';
 
 
 ReactDOM.render(