diff --git a/src/components/Anchor/index.d.ts b/src/components/Anchor/index.d.ts index 137a12454..f599dc3db 100644 --- a/src/components/Anchor/index.d.ts +++ b/src/components/Anchor/index.d.ts @@ -17,6 +17,7 @@ export interface AnchorProps extends React.AnchorHTMLAttributes; diff --git a/src/components/Anchor/index.jsx b/src/components/Anchor/index.jsx index f7b3670a9..5fbe955ed 100644 --- a/src/components/Anchor/index.jsx +++ b/src/components/Anchor/index.jsx @@ -3,7 +3,7 @@ import classNames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; import { expandDts, invariant } from '../../lib/utils'; -import { buttonSharedPropTypes, buttonSharedClasses, colors, variants, sizes } from '../Button'; +import { buttonSharedClasses, colors, variants, sizes } from '../Button'; const Anchor = (props) => { const { @@ -66,8 +66,14 @@ Anchor.propTypes = { color: PropTypes.oneOf(colors), variant: PropTypes.oneOf(variants), size: PropTypes.oneOf(sizes), - ...buttonSharedPropTypes, href: PropTypes.string.isRequired, + round: PropTypes.bool, + icon: PropTypes.node, + fullWidth: PropTypes.bool, + className: PropTypes.string, + dts: PropTypes.string, + disabled: PropTypes.bool, + children: PropTypes.node, }; export default Anchor; diff --git a/src/components/Button/index.d.ts b/src/components/Button/index.d.ts index 17352c45c..59e433c55 100644 --- a/src/components/Button/index.d.ts +++ b/src/components/Button/index.d.ts @@ -27,6 +27,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes; diff --git a/src/components/Button/index.jsx b/src/components/Button/index.jsx index dace0ecb2..0286adc6c 100644 --- a/src/components/Button/index.jsx +++ b/src/components/Button/index.jsx @@ -36,6 +36,7 @@ const Button = (props) => { } = props; const isLink = variant === 'link' || className?.match(/\b(aui-link)\b/)?.[0]; + // eslint-disable-next-line react/prop-types invariant(!props.href, 'Button: should not be used for href links. Use an instead.'); invariant(!theme, 'Button: The theme prop has been deprecated. Please use color instead.'); invariant(!inverse, 'Button: The inverse prop has been deprecated. Please use variant="inverse" instead.'); @@ -96,15 +97,6 @@ export const colors = ['default', 'primary', 'secondary', 'success', 'danger', ' export const variants = ['solid', 'borderless', 'inverse', 'link']; export const sizes = ['medium', 'large']; -export const buttonSharedPropTypes = { - round: PropTypes.bool, - icon: PropTypes.node, - fullWidth: PropTypes.bool, - className: PropTypes.string, - dts: PropTypes.string, - disabled: PropTypes.bool, -}; - Button.propTypes = { isLoading: PropTypes.bool, color: PropTypes.oneOf(colors), @@ -120,7 +112,13 @@ Button.propTypes = { * Please use `variant="inverse"` instead. */ inverse: PropTypes.bool, - ...buttonSharedPropTypes, + round: PropTypes.bool, + icon: PropTypes.node, + fullWidth: PropTypes.bool, + className: PropTypes.string, + dts: PropTypes.string, + disabled: PropTypes.bool, + children: PropTypes.node, }; export default Button; diff --git a/src/components/Checkbox/index.d.ts b/src/components/Checkbox/index.d.ts index 5c2202aa5..05d1cc1b6 100644 --- a/src/components/Checkbox/index.d.ts +++ b/src/components/Checkbox/index.d.ts @@ -18,7 +18,13 @@ export interface CheckboxProps { * checkBox label for the checkbox input */ label?: React.ReactNode; + /** + * additional text description to display below the label + */ text?: React.ReactNode; + /** + * icon to display beside the label when parent group's `variant="box"` + */ icon?: React.ReactNode; /** * checkBox input value diff --git a/src/components/Checkbox/index.jsx b/src/components/Checkbox/index.jsx index d970e91f9..9d6ff93b5 100644 --- a/src/components/Checkbox/index.jsx +++ b/src/components/Checkbox/index.jsx @@ -118,7 +118,13 @@ Checkbox.propTypes = { * checkBox label for the checkbox input */ label: PropTypes.node, + /** + * additional text description to display below the label + */ text: PropTypes.node, + /** + * icon to display beside the label when parent group's `variant="box"` + */ icon: PropTypes.node, /** * checkBox input value diff --git a/src/components/CheckboxGroup/index.d.ts b/src/components/CheckboxGroup/index.d.ts index 2ec503ed4..39b6926ba 100644 --- a/src/components/CheckboxGroup/index.d.ts +++ b/src/components/CheckboxGroup/index.d.ts @@ -7,7 +7,19 @@ export type CheckboxGroupVariant = 'default' | 'box'; export interface CheckboxGroupProps { value: any[]; name: string; + /** + * @function onChange + * @param {array} newValue - the new checkboxGroup value + * @param {string} name - the checkbox name + * @param {string|number} value - the changed checkbox's value + */ onChange: (...args: any[]) => any; + /** + * @function getIsChecked overrides the default checked state behaviour + * @param {string|number} itemValue - the checkbox's value + * @param {array} value - the checkbox group's value + */ + getIsChecked?: (...args: any[]) => any; orientation?: CheckboxGroupOrientation; children: React.ReactNode; className?: string; diff --git a/src/components/CheckboxGroup/index.jsx b/src/components/CheckboxGroup/index.jsx index 9eeff3f11..a48f0658f 100644 --- a/src/components/CheckboxGroup/index.jsx +++ b/src/components/CheckboxGroup/index.jsx @@ -2,7 +2,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import { invariant } from '../../lib/utils'; -import { radioGroupSharedPropTypes } from '../RadioGroup'; import '../RadioGroup/style.css'; const CheckboxGroupContext = React.createContext({}); @@ -74,7 +73,30 @@ const CheckboxGroup = ({ CheckboxGroup.propTypes = { value: PropTypes.array.isRequired, - ...radioGroupSharedPropTypes, + name: PropTypes.string.isRequired, + /** + * @function onChange + * @param {array} newValue - the new checkboxGroup value + * @param {string} name - the checkbox name + * @param {string|number} value - the changed checkbox's value + */ + onChange: PropTypes.func.isRequired, + /** + * @function getIsChecked overrides the default checked state behaviour + * @param {string|number} itemValue - the checkbox's value + * @param {array} value - the checkbox group's value + */ + getIsChecked: PropTypes.func, + orientation: PropTypes.oneOf(['vertical', 'horizontal']), + children: PropTypes.node.isRequired, + className: PropTypes.string, + dts: PropTypes.string, + variant: PropTypes.oneOf(['default', 'box']), + id: PropTypes.string, + /** + * @deprecated use orientation="horizontal" instead + **/ + inline: PropTypes.bool, }; export default CheckboxGroup; diff --git a/src/components/Radio/index.d.ts b/src/components/Radio/index.d.ts index 87a8b52f6..0017cf29e 100644 --- a/src/components/Radio/index.d.ts +++ b/src/components/Radio/index.d.ts @@ -7,7 +7,13 @@ export interface RadioProps { className?: string; name?: string; label?: React.ReactNode; + /** + * additional text description to display below the label + */ text?: React.ReactNode; + /** + * icon to display beside the label when parent group's `variant="box"` + */ icon?: React.ReactNode; value?: RadioValue; dts?: string; @@ -17,6 +23,9 @@ export interface RadioProps { * @param {string|number} value - the radio value */ onChange?: (...args: any[]) => any; + /** + * checked status of the radio input + */ checked?: boolean; /** * @deprecated diff --git a/src/components/Radio/index.jsx b/src/components/Radio/index.jsx index 8e652e99e..05544896d 100644 --- a/src/components/Radio/index.jsx +++ b/src/components/Radio/index.jsx @@ -101,7 +101,13 @@ Radio.propTypes = { className: PropTypes.string, name: PropTypes.string, label: PropTypes.node, + /** + * additional text description to display below the label + */ text: PropTypes.node, + /** + * icon to display beside the label when parent group's `variant="box"` + */ icon: PropTypes.node, value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), dts: PropTypes.string, @@ -111,6 +117,9 @@ Radio.propTypes = { * @param {string|number} value - the radio value */ onChange: PropTypes.func, + /** + * checked status of the radio input + */ checked: PropTypes.bool, /** * @deprecated diff --git a/src/components/RadioGroup/index.jsx b/src/components/RadioGroup/index.jsx index 97060e72d..5b5b8f8d9 100644 --- a/src/components/RadioGroup/index.jsx +++ b/src/components/RadioGroup/index.jsx @@ -68,7 +68,8 @@ const RadioGroup = ({ ); }; -export const radioGroupSharedPropTypes = { +RadioGroup.propTypes = { + value: PropTypes.string.isRequired, name: PropTypes.string.isRequired, onChange: PropTypes.func.isRequired, orientation: PropTypes.oneOf(['vertical', 'horizontal']), @@ -83,9 +84,4 @@ export const radioGroupSharedPropTypes = { inline: PropTypes.bool, }; -RadioGroup.propTypes = { - value: PropTypes.string.isRequired, - ...radioGroupSharedPropTypes, -}; - export default RadioGroup; diff --git a/www/containers/Props.jsx b/www/containers/Props.jsx index 6364546d2..f56629b1b 100644 --- a/www/containers/Props.jsx +++ b/www/containers/Props.jsx @@ -45,7 +45,11 @@ const Props = ({ componentName, customMapper }) => { {_.get(prop, 'defaultValue.value', '')} - {HtmlParser(prop.description)} + + {prop.description?.split('\n').map((line, i) => ( +
{HtmlParser(line)}
+ ))} + ))} diff --git a/www/containers/props.json b/www/containers/props.json index fabc6c7d9..6e7bdd367 100644 --- a/www/containers/props.json +++ b/www/containers/props.json @@ -418,11 +418,57 @@ }, "required": true, "description": "" + }, + "round": { + "type": { + "name": "bool" + }, + "required": false, + "description": "" + }, + "icon": { + "type": { + "name": "node" + }, + "required": false, + "description": "" + }, + "fullWidth": { + "type": { + "name": "bool" + }, + "required": false, + "description": "" + }, + "className": { + "type": { + "name": "string" + }, + "required": false, + "description": "" + }, + "dts": { + "type": { + "name": "string" + }, + "required": false, + "description": "" + }, + "disabled": { + "type": { + "name": "bool" + }, + "required": false, + "description": "" + }, + "children": { + "type": { + "name": "node" + }, + "required": false, + "description": "" } - }, - "composes": [ - "../Button" - ] + } } ], "src/components/Avatar/index.jsx": [ @@ -785,6 +831,13 @@ }, "required": false, "description": "" + }, + "children": { + "type": { + "name": "node" + }, + "required": false, + "description": "" } } } @@ -1118,14 +1171,14 @@ "name": "node" }, "required": false, - "description": "" + "description": "additional text description to display below the label" }, "icon": { "type": { "name": "node" }, "required": false, - "description": "" + "description": "icon to display beside the label when parent group's `variant=\"box\"`" }, "value": { "type": { @@ -1231,24 +1284,105 @@ "required": true, "description": "" }, + "name": { + "type": { + "name": "string" + }, + "required": true, + "description": "" + }, + "onChange": { + "type": { + "name": "func" + }, + "required": true, + "description": "@function onChange\n@param {array} newValue - the new checkboxGroup value\n@param {string} name - the checkbox name\n@param {string|number} value - the changed checkbox's value" + }, + "getIsChecked": { + "type": { + "name": "func" + }, + "required": false, + "description": "@function getIsChecked overrides the default checked state behaviour\n@param {string|number} itemValue - the checkbox's value\n@param {array} value - the checkbox group's value" + }, "orientation": { + "type": { + "name": "enum", + "value": [ + { + "value": "'vertical'", + "computed": false + }, + { + "value": "'horizontal'", + "computed": false + } + ] + }, + "required": false, + "description": "", "defaultValue": { "value": "'vertical'", "computed": false + } + }, + "children": { + "type": { + "name": "node" }, - "required": false + "required": true, + "description": "" + }, + "className": { + "type": { + "name": "string" + }, + "required": false, + "description": "" + }, + "dts": { + "type": { + "name": "string" + }, + "required": false, + "description": "" }, "variant": { + "type": { + "name": "enum", + "value": [ + { + "value": "'default'", + "computed": false + }, + { + "value": "'box'", + "computed": false + } + ] + }, + "required": false, + "description": "", "defaultValue": { "value": "'default'", "computed": false + } + }, + "id": { + "type": { + "name": "string" }, - "required": false + "required": false, + "description": "" + }, + "inline": { + "type": { + "name": "bool" + }, + "required": false, + "description": "@deprecated use orientation=\"horizontal\" instead" } - }, - "composes": [ - "../RadioGroup" - ] + } } ], "src/components/ConfirmModal/index.jsx": [ @@ -3459,14 +3593,14 @@ "name": "node" }, "required": false, - "description": "" + "description": "additional text description to display below the label" }, "icon": { "type": { "name": "node" }, "required": false, - "description": "" + "description": "icon to display beside the label when parent group's `variant=\"box\"`" }, "value": { "type": { @@ -3517,7 +3651,7 @@ "name": "bool" }, "required": false, - "description": "", + "description": "checked status of the radio input", "defaultValue": { "value": "false", "computed": false