Added react proptype jsdoc

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/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/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/src/react/callout.js

@@ -47,12 +47,33 @@ 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,
 };
 

packages/callout/src/react/calloutCalendar.js

@@ -46,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 (<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/control-input/src/react/control-input.js

@@ -48,12 +48,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, 
+	/**
+	 * 
+	 */
+	id: PropTypes.string.isRequired,
+	/**
+	 * 
+	 */
 	status: PropTypes.oneOf([ 'valid', 'invalid' ]),
+	/**
+	 * The class name for the element, optional.
+	 */
 	className: PropTypes.string,
 };

packages/control-input/src/react/control-inputRadio.js

@@ -42,12 +42,36 @@ export const AUradio = ({ dark, alt, small, block, label, status, id, className
 };
 
 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,
 };

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 ])
 };
 

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 ])
 };
 

packages/footer/src/react/footer.js

@@ -38,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,
 };
 

packages/footer/src/react/footerEnd.js

@@ -25,6 +25,12 @@ export const AUfooterEnd = ({ children, className = '', ...attributeOptions }) =
 );
 
 AUfooterEnd.propTypes = {
+	/**
+	 * The elements inside.
+	 */
 	children: PropTypes.node.isRequired,
+	/**
+	 * The class name for the element, optional.
+	 */
 	className: PropTypes.string,
 };

packages/footer/src/react/footerNav.js

@@ -26,8 +26,17 @@ export const AUfooterNav = ({ children, className = '', ariaLabel, ...attributeO
 );
 
 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,
 };