diff --git a/packages/accordion/src/react/accordion.js b/packages/accordion/src/react/accordion.js index e002c7633..ffd31f9f2 100644 --- a/packages/accordion/src/react/accordion.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/breadcrumbs/src/react/breadcrumbs.js b/packages/breadcrumbs/src/react/breadcrumbs.js index 9bf5e9ef6..61ffddaf5 100644 --- a/packages/breadcrumbs/src/react/breadcrumbs.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/src/react/buttons.js b/packages/buttons/src/react/buttons.js index 7bb8c932e..effc33fb5 100644 --- a/packages/buttons/src/react/buttons.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/src/react/callout.js b/packages/callout/src/react/callout.js index 5fec3def6..339babd12 100644 --- a/packages/callout/src/react/callout.js +++ b/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 (

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, }; diff --git a/packages/callout/src/react/calloutCalendar.js b/packages/callout/src/react/calloutCalendar.js index 098b27d8f..46dfc9a43 100644 --- a/packages/callout/src/react/calloutCalendar.js +++ b/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 (

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/control-input.js b/packages/control-input/src/react/control-input.js index 6543bd7ed..cb6042f88 100644 --- a/packages/control-input/src/react/control-input.js +++ b/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, }; diff --git a/packages/control-input/src/react/control-inputRadio.js b/packages/control-input/src/react/control-inputRadio.js index b80912f14..fe62eaca0 100644 --- a/packages/control-input/src/react/control-inputRadio.js +++ b/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, }; diff --git a/packages/cta-link/src/react/cta-link.js b/packages/cta-link/src/react/cta-link.js index e77e8d0c2..b8642c8dd 100644 --- a/packages/cta-link/src/react/cta-link.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/src/react/direction-links.js b/packages/direction-links/src/react/direction-links.js index 81b7356e8..1ce1ae465 100644 --- a/packages/direction-links/src/react/direction-links.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/src/react/footer.js b/packages/footer/src/react/footer.js index ad3cb0aa6..0e3f25174 100644 --- a/packages/footer/src/react/footer.js +++ b/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, }; diff --git a/packages/footer/src/react/footerEnd.js b/packages/footer/src/react/footerEnd.js index f3e0a206a..fdb7b7d4c 100644 --- a/packages/footer/src/react/footerEnd.js +++ b/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, }; diff --git a/packages/footer/src/react/footerNav.js b/packages/footer/src/react/footerNav.js index cb6b05606..ad604a6da 100644 --- a/packages/footer/src/react/footerNav.js +++ b/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, }; diff --git a/packages/header/src/react/headerBrand.js b/packages/header/src/react/headerBrand.js index b1568a0df..7b705a8d6 100644 --- a/packages/header/src/react/headerBrand.js +++ b/packages/header/src/react/headerBrand.js @@ -83,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 ]), } diff --git a/packages/headings/src/react/headings.js b/packages/headings/src/react/headings.js index 4af8d15aa..847ebf347 100644 --- a/packages/headings/src/react/headings.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/src/react/inpage-nav.js b/packages/inpage-nav/src/react/inpage-nav.js index 7a91439e8..e63427ee7 100644 --- a/packages/inpage-nav/src/react/inpage-nav.js +++ b/packages/inpage-nav/src/react/inpage-nav.js @@ -47,12 +47,33 @@ export const AUinpageNavSection = ({ title, link, children, level, headingClass, }; 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, }; diff --git a/packages/inpage-nav/src/react/inpage-navLinks.js b/packages/inpage-nav/src/react/inpage-navLinks.js index 6b1dc54ed..0915b6c78 100644 --- a/packages/inpage-nav/src/react/inpage-navLinks.js +++ b/packages/inpage-nav/src/react/inpage-navLinks.js @@ -32,8 +32,17 @@ export const AUinpageNavLinks = ({ dark, title, sections, ariaLabel, className = ); AUinpageNavLinks.propTypes = { + /** + * A dark variation of the component + */ dark: PropTypes.bool, + /** + * + */ title: PropTypes.string.isRequired, + /** + * + */ sections: PropTypes.arrayOf( PropTypes.shape({ link: PropTypes.string.isRequired, @@ -41,6 +50,9 @@ AUinpageNavLinks.propTypes = { li: PropTypes.object, }) ).isRequired, + /** + * The class name for the element, optional. + */ className: PropTypes.string, }; diff --git a/packages/inpage-nav/src/react/inpage-navLinksItem.js b/packages/inpage-nav/src/react/inpage-navLinksItem.js index faff4e416..a3c3f3cbd 100644 --- a/packages/inpage-nav/src/react/inpage-navLinksItem.js +++ b/packages/inpage-nav/src/react/inpage-navLinksItem.js @@ -26,7 +26,16 @@ export const AUinpageNavLinksItem = ({ link, title, li = {}, ...attributeOptions ); AUinpageNavLinksItem.propTypes = { + /** + * + */ link: PropTypes.string.isRequired, + /** + * The title of the link + */ title: PropTypes.string.isRequired, + /** + * + */ li: PropTypes.object, }; diff --git a/packages/keyword-list/src/react/keyword-list.js b/packages/keyword-list/src/react/keyword-list.js index a611cf4b7..1432fc302 100644 --- a/packages/keyword-list/src/react/keyword-list.js +++ b/packages/keyword-list/src/react/keyword-list.js @@ -39,8 +39,17 @@ const AUkeywordList = ({ repeatedName, linkComponent, items, dark, className = ' ); AUkeywordList.propTypes = { + /** + * + */ repeatedName: PropTypes.string.isRequired, + /** + * A dark variation of the component + */ dark: PropTypes.bool, + /** + * + */ items: PropTypes.arrayOf( PropTypes.shape({ link: PropTypes.string, @@ -48,7 +57,13 @@ AUkeywordList.propTypes = { li: PropTypes.object, }) ).isRequired, + /** + * The class name for the element, optional. + */ className: PropTypes.string, + /** + * + */ linkComponent: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]), }; diff --git a/packages/keyword-list/src/react/keyword-listItem.js b/packages/keyword-list/src/react/keyword-listItem.js index 07b10fb69..c58c5e3bc 100644 --- a/packages/keyword-list/src/react/keyword-listItem.js +++ b/packages/keyword-list/src/react/keyword-listItem.js @@ -56,10 +56,25 @@ export const AUkeywordListItem = ({ linkComponent, repeatedName, link, name, li }; AUkeywordListItem.propTypes = { + /** + * + */ repeatedName: PropTypes.string.isRequired, + /** + * + */ link: PropTypes.string, + /** + * + */ name: PropTypes.string.isRequired, + /** + * + */ li: PropTypes.object, + /** + * + */ linkComponent: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]), }; diff --git a/packages/link-list/src/react/link-list.js b/packages/link-list/src/react/link-list.js index 81339b984..7b49f1e32 100644 --- a/packages/link-list/src/react/link-list.js +++ b/packages/link-list/src/react/link-list.js @@ -37,7 +37,13 @@ const AUlinkList = ({ inline, items, linkComponent, className = '', ...attribute ); AUlinkList.propTypes = { + /** + * + */ inline: PropTypes.bool, + /** + * + */ items: PropTypes.arrayOf( PropTypes.shape({ link: PropTypes.string, @@ -45,6 +51,9 @@ AUlinkList.propTypes = { li: PropTypes.object, }) ).isRequired, + /** + * + */ linkComponent: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]) }; diff --git a/packages/link-list/src/react/link-listItem.js b/packages/link-list/src/react/link-listItem.js index 5a35e547e..1dc699844 100644 --- a/packages/link-list/src/react/link-listItem.js +++ b/packages/link-list/src/react/link-listItem.js @@ -55,9 +55,21 @@ export const AUlinkListItem = ({ text, link, linkComponent, li = {}, children, . }; AUlinkListItem.propTypes = { + /** + * + */ text: PropTypes.node.isRequired, + /** + * + */ link: PropTypes.string, + /** + * + */ li: PropTypes.object, + /** + * + */ linkComponent: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]) }; diff --git a/packages/main-nav/src/react/main-nav.js b/packages/main-nav/src/react/main-nav.js index 1deccbb70..6b4c9d333 100644 --- a/packages/main-nav/src/react/main-nav.js +++ b/packages/main-nav/src/react/main-nav.js @@ -33,9 +33,21 @@ const AUmainNav = ({ dark, alt, className, ariaLabel, children, ...attributeOpti ); 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, }; diff --git a/packages/main-nav/src/react/main-navContent.js b/packages/main-nav/src/react/main-navContent.js index dce39f4ba..7b3799b54 100644 --- a/packages/main-nav/src/react/main-navContent.js +++ b/packages/main-nav/src/react/main-navContent.js @@ -381,13 +381,40 @@ export class AUmainNavContent extends React.PureComponent { }; 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, }; diff --git a/packages/main-nav/src/react/main-navMenu.js b/packages/main-nav/src/react/main-navMenu.js index 92c346a90..c765d31b1 100644 --- a/packages/main-nav/src/react/main-navMenu.js +++ b/packages/main-nav/src/react/main-navMenu.js @@ -52,6 +52,9 @@ const AUmainNavMenu = ({ items, linkComponent }) => { AUmainNavMenu.propTypes = { + /** + * + */ items: PropTypes.arrayOf( PropTypes.shape({ link: PropTypes.string, @@ -59,6 +62,9 @@ AUmainNavMenu.propTypes = { children: PropTypes.array, }) ).isRequired, + /** + * + */ linkComponent: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]), }; diff --git a/packages/page-alerts/src/react/page-alerts.js b/packages/page-alerts/src/react/page-alerts.js index efb092d8e..8d7b0a1dc 100644 --- a/packages/page-alerts/src/react/page-alerts.js +++ b/packages/page-alerts/src/react/page-alerts.js @@ -57,10 +57,25 @@ const AUpageAlert = ({ as, alt, dark, children, className = '', ...attributeOpti ); 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, }; diff --git a/packages/select/src/react/select.js b/packages/select/src/react/select.js index 6f4b4968b..0fd4dd45b 100644 --- a/packages/select/src/react/select.js +++ b/packages/select/src/react/select.js @@ -48,15 +48,30 @@ const AUselect = ({ dark, options, block, status, className = '', ...attributeOp }; 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, }; diff --git a/packages/select/src/react/selectItem.js b/packages/select/src/react/selectItem.js index f3200a70d..c52da1efd 100644 --- a/packages/select/src/react/selectItem.js +++ b/packages/select/src/react/selectItem.js @@ -23,7 +23,16 @@ 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, }; diff --git a/packages/side-nav/src/react/side-nav.js b/packages/side-nav/src/react/side-nav.js index 6ae52b0c4..f67be3948 100644 --- a/packages/side-nav/src/react/side-nav.js +++ b/packages/side-nav/src/react/side-nav.js @@ -85,18 +85,57 @@ const AUsideNav = ({ ); 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, @@ -104,7 +143,13 @@ AUsideNav.propTypes = { 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, }; diff --git a/packages/skip-link/src/react/skip-link.js b/packages/skip-link/src/react/skip-link.js index c3bf965bb..df9c49167 100644 --- a/packages/skip-link/src/react/skip-link.js +++ b/packages/skip-link/src/react/skip-link.js @@ -24,8 +24,17 @@ export const AUskipLinkItem = ({ link, text, className = '', ...attributeOptions ); AUskipLinkItem.propTypes = { + /** + * + */ link: PropTypes.string.isRequired, + /** + * + */ text: PropTypes.string.isRequired, + /** + * The class name for the element, optional. + */ className: PropTypes.string, }; @@ -50,12 +59,18 @@ 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, }; diff --git a/packages/tags/src/react/tags.js b/packages/tags/src/react/tags.js index cca0dae27..10adf4b99 100644 --- a/packages/tags/src/react/tags.js +++ b/packages/tags/src/react/tags.js @@ -46,9 +46,21 @@ const AUtagItem = ({ link, linkComponent, text, li = {}, ...attributeOptions }) AUtagItem.propTypes = { + /** + * + */ link: PropTypes.string, + /** + * + */ text: PropTypes.string.isRequired, + /** + * + */ li: PropTypes.object, + /** + * + */ linkComponent: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]), }; @@ -77,7 +89,13 @@ const AUtags = ({ dark, linkComponent, tags, className = '', ...attributeOptions ); 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, @@ -85,7 +103,13 @@ AUtags.propTypes = { 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 ]), }; diff --git a/packages/text-inputs/src/react/text-inputs.js b/packages/text-inputs/src/react/text-inputs.js index bad27ccb0..e1888dd3a 100644 --- a/packages/text-inputs/src/react/text-inputs.js +++ b/packages/text-inputs/src/react/text-inputs.js @@ -55,11 +55,29 @@ const AUtextInput = ({ as, dark, block, status, width, type = 'text', className ); 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' ]) };