@openedx/paragon 22.11.0 → 22.11.1

package/dist/IconButton/index.d.ts

@@ -33,6 +33,8 @@ interface Props extends React.HTMLAttributes<HTMLButtonElement> {
     variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'light' | 'dark' | 'black' | 'brand';
     /** size of button to render */
     size?: 'sm' | 'md' | 'inline';
+    /** Used with `IconButtonToggle` */
+    value?: string;
     /** no children */
     children?: never;
 }
@@ -64,6 +66,7 @@ declare namespace IconButtonWithTooltip {
         } | undefined;
         variant?: "primary" | "success" | "warning" | "secondary" | "danger" | "dark" | "light" | "black" | "brand" | undefined;
         size?: "sm" | "md" | "inline" | undefined;
+        value?: string | undefined;
         children?: undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;

package/dist/IconButton/index.js

@@ -57,6 +57,7 @@ IconButton.defaultProps = {
   size: 'md',
   onClick: () => {},
   isActive: false,
+  value: undefined,
   children: undefined
 };
 IconButton.propTypes = {
@@ -91,7 +92,9 @@ IconButton.propTypes = {
   /** size of button to render */
   size: PropTypes.oneOf(['sm', 'md', 'inline']),
   /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */
-  isActive: PropTypes.bool
+  isActive: PropTypes.bool,
+  /** Used with <IconButtonToggle> */
+  value: PropTypes.string
 };
 /**
  * An icon button wrapped in overlaytrigger to display a tooltip.

package/dist/IconButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","FontAwesomeIcon","OverlayTrigger","Tooltip","IconButton","forwardRef","_ref","ref","className","alt","invertColors","icon","src","iconClassNames","onClick","size","variant","iconAs","isActive","children","attrs","invert","activeStyle","process","env","NODE_ENV","console","msg","warn","IconComponent","createElement","type","defaultProps","undefined","propTypes","string","elementType","isRequired","bool","shape","prefix","iconName","array","func","oneOf","IconButtonWithTooltip","_ref2","tooltipPlacement","tooltipContent","props","placement","overlay","id","node"],"sources":["../../src/IconButton/index.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { type Placement } from 'react-bootstrap/Overlay';\n\nimport { OverlayTrigger } from '../Overlay';\nimport Tooltip from '../Tooltip';\nimport Icon from '../Icon';\n\ninterface Props extends React.HTMLAttributes<HTMLButtonElement> {\n  iconAs?: typeof Icon | typeof FontAwesomeIcon,\n  /** Additional CSS class[es] to apply to this button */\n  className?: string;\n  /** Alt text for your icon. For best practice, avoid using alt text to describe\n   * the image in the `IconButton`. Instead, we recommend describing the function\n   * of the button. */\n  alt: string;\n  /** Changes icon styles for dark background */\n  invertColors?: boolean;\n  /** An icon component to render. Example import of a Paragon icon component:\n   * `import { Check } from '@openedx/paragon/icons';`\n   * */\n  // Note: React.ComponentType is what we want here. React.ElementType would allow some element type strings like \"div\",\n  // but we only want to allow components like 'Add' (a specific icon component function/class)\n  src?: React.ComponentType;\n  /** Extra class names that will be added to the icon */\n  iconClassNames?: string;\n  /** Click handler for the button */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */\n  isActive?: boolean;\n  /** @deprecated Using FontAwesome icons is deprecated. Instead, pass iconAs={Icon} src={...} */\n  icon?: { prefix?: string; iconName?: string, icon?: any[] },\n  /** Type of button (uses Bootstrap options) */\n  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'light' | 'dark' | 'black' | 'brand';\n  /** size of button to render */\n  size?: 'sm' | 'md' | 'inline';\n  /** no children */\n  children?: never;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, Props>(({\n  className,\n  alt,\n  invertColors,\n  icon,\n  src,\n  iconClassNames,\n  onClick,\n  size,\n  variant,\n  iconAs,\n  isActive,\n  children, // unused, just here because we don't want it to be part of 'attrs'\n  ...attrs\n}, ref) => {\n  const invert = invertColors ? 'inverse-' : '';\n  const activeStyle = isActive ? `${variant}-` : '';\n  if (!iconAs && process.env.NODE_ENV === 'development' && console) {\n    const msg = '[Deprecated] IconButton: you have not provided a value for iconAs prop and '\n      + 'are using a default one - FontAwesomeIcon, the default value is going to be changed soon '\n      + 'as Paragon is moving away from FontAwesome, please use Paragon\\'s icons instead.';\n    // eslint-disable-next-line no-console\n    console.warn(msg);\n  }\n  const IconComponent = iconAs || FontAwesomeIcon;\n  return (\n    <button\n      aria-label={alt}\n      className={classNames(\n        'btn-icon',\n        `btn-icon-${invert}${variant}`,\n        `btn-icon-${size}`,\n        {\n          [`btn-icon-${invert}${activeStyle}active`]: isActive,\n        },\n        className,\n      )}\n      onClick={onClick}\n      type=\"button\"\n      ref={ref}\n      {...attrs}\n    >\n      <span className=\"btn-icon__icon-container\">\n        <IconComponent\n          className={classNames('btn-icon__icon', iconClassNames)}\n          icon={icon as any}\n          src={src}\n        />\n      </span>\n    </button>\n  );\n});\n\nIconButton.defaultProps = {\n  iconAs: undefined,\n  src: undefined,\n  icon: undefined,\n  iconClassNames: undefined,\n  className: undefined,\n  invertColors: false,\n  variant: 'primary',\n  size: 'md',\n  onClick: () => {},\n  isActive: false,\n  children: undefined,\n};\n\nIconButton.propTypes = {\n  /** A custom class name. */\n  className: PropTypes.string,\n  /** Component that renders the icon, currently defaults to `FontAwesomeIcon`,\n   *  but is going to be deprecated soon, please use Paragon's icons instead. */\n  iconAs: PropTypes.elementType as any,\n  /** An icon component to render. Example import of a Paragon icon component:\n   * `import { Check } from '@openedx/paragon/icons';`\n   * */\n  src: PropTypes.elementType as any,\n  /** Alt text for your icon. For best practice, avoid using alt text to describe\n   * the image in the `IconButton`. Instead, we recommend describing the function\n   * of the button. */\n  alt: PropTypes.string.isRequired,\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n  /** Accepts a React fontawesome icon. */\n  icon: PropTypes.shape({\n    prefix: PropTypes.string,\n    iconName: PropTypes.string,\n    // eslint-disable-next-line react/forbid-prop-types\n    icon: PropTypes.array,\n  }) as any,\n  /** Extra class names that will be added to the icon */\n  iconClassNames: PropTypes.string,\n  /** Click handler for the button */\n  onClick: PropTypes.func,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** size of button to render */\n  size: PropTypes.oneOf(['sm', 'md', 'inline']),\n  /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */\n  isActive: PropTypes.bool,\n};\n\ninterface PropsWithTooltip extends Props {\n  /** choose from https://popper.js.org/docs/v2/constructors/#options */\n  tooltipPlacement: Placement,\n  /** any content to pass to tooltip content area */\n  tooltipContent: React.ReactNode,\n}\n\n/**\n * An icon button wrapped in overlaytrigger to display a tooltip.\n */\nfunction IconButtonWithTooltip({\n  tooltipPlacement, tooltipContent, ...props\n}: PropsWithTooltip) {\n  const invert = props.invertColors ? 'inverse-' : '';\n  return (\n    <OverlayTrigger\n      placement={tooltipPlacement}\n      overlay={(\n        <Tooltip\n          id={`iconbutton-tooltip-${tooltipPlacement}`}\n          variant={invert ? 'light' : undefined}\n        >\n          {tooltipContent}\n        </Tooltip>\n      )}\n    >\n      <IconButton {...props} />\n    </OverlayTrigger>\n  );\n}\n\nIconButtonWithTooltip.defaultProps = {\n  ...IconButton.defaultProps,\n  tooltipPlacement: 'top',\n};\n\nIconButtonWithTooltip.propTypes = {\n  /** tooltip placement can be top, left, right etc, per https://popper.js.org/docs/v2/constructors/#options  */\n  tooltipPlacement: PropTypes.string,\n  /** any valid JSX or text to be rendered as tooltip contents */\n  tooltipContent: PropTypes.node.isRequired,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n};\n\n(IconButton as any).IconButtonWithTooltip = IconButtonWithTooltip;\n\nexport default IconButton as typeof IconButton & {\n  IconButtonWithTooltip: typeof IconButtonWithTooltip,\n};\nexport { IconButtonWithTooltip };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","FontAwesomeIcon","OverlayTrigger","Tooltip","IconButton","forwardRef","_ref","ref","className","alt","invertColors","icon","src","iconClassNames","onClick","size","variant","iconAs","isActive","children","attrs","invert","activeStyle","process","env","NODE_ENV","console","msg","warn","IconComponent","createElement","type","defaultProps","undefined","value","propTypes","string","elementType","isRequired","bool","shape","prefix","iconName","array","func","oneOf","IconButtonWithTooltip","_ref2","tooltipPlacement","tooltipContent","props","placement","overlay","id","node"],"sources":["../../src/IconButton/index.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { type Placement } from 'react-bootstrap/Overlay';\n\nimport { OverlayTrigger } from '../Overlay';\nimport Tooltip from '../Tooltip';\nimport Icon from '../Icon';\n\ninterface Props extends React.HTMLAttributes<HTMLButtonElement> {\n  iconAs?: typeof Icon | typeof FontAwesomeIcon,\n  /** Additional CSS class[es] to apply to this button */\n  className?: string;\n  /** Alt text for your icon. For best practice, avoid using alt text to describe\n   * the image in the `IconButton`. Instead, we recommend describing the function\n   * of the button. */\n  alt: string;\n  /** Changes icon styles for dark background */\n  invertColors?: boolean;\n  /** An icon component to render. Example import of a Paragon icon component:\n   * `import { Check } from '@openedx/paragon/icons';`\n   * */\n  // Note: React.ComponentType is what we want here. React.ElementType would allow some element type strings like \"div\",\n  // but we only want to allow components like 'Add' (a specific icon component function/class)\n  src?: React.ComponentType;\n  /** Extra class names that will be added to the icon */\n  iconClassNames?: string;\n  /** Click handler for the button */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */\n  isActive?: boolean;\n  /** @deprecated Using FontAwesome icons is deprecated. Instead, pass iconAs={Icon} src={...} */\n  icon?: { prefix?: string; iconName?: string, icon?: any[] },\n  /** Type of button (uses Bootstrap options) */\n  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'light' | 'dark' | 'black' | 'brand';\n  /** size of button to render */\n  size?: 'sm' | 'md' | 'inline';\n  /** Used with `IconButtonToggle` */\n  value?: string;\n  /** no children */\n  children?: never;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, Props>(({\n  className,\n  alt,\n  invertColors,\n  icon,\n  src,\n  iconClassNames,\n  onClick,\n  size,\n  variant,\n  iconAs,\n  isActive,\n  children, // unused, just here because we don't want it to be part of 'attrs'\n  ...attrs\n}, ref) => {\n  const invert = invertColors ? 'inverse-' : '';\n  const activeStyle = isActive ? `${variant}-` : '';\n  if (!iconAs && process.env.NODE_ENV === 'development' && console) {\n    const msg = '[Deprecated] IconButton: you have not provided a value for iconAs prop and '\n      + 'are using a default one - FontAwesomeIcon, the default value is going to be changed soon '\n      + 'as Paragon is moving away from FontAwesome, please use Paragon\\'s icons instead.';\n    // eslint-disable-next-line no-console\n    console.warn(msg);\n  }\n  const IconComponent = iconAs || FontAwesomeIcon;\n  return (\n    <button\n      aria-label={alt}\n      className={classNames(\n        'btn-icon',\n        `btn-icon-${invert}${variant}`,\n        `btn-icon-${size}`,\n        {\n          [`btn-icon-${invert}${activeStyle}active`]: isActive,\n        },\n        className,\n      )}\n      onClick={onClick}\n      type=\"button\"\n      ref={ref}\n      {...attrs}\n    >\n      <span className=\"btn-icon__icon-container\">\n        <IconComponent\n          className={classNames('btn-icon__icon', iconClassNames)}\n          icon={icon as any}\n          src={src}\n        />\n      </span>\n    </button>\n  );\n});\n\nIconButton.defaultProps = {\n  iconAs: undefined,\n  src: undefined,\n  icon: undefined,\n  iconClassNames: undefined,\n  className: undefined,\n  invertColors: false,\n  variant: 'primary',\n  size: 'md',\n  onClick: () => {},\n  isActive: false,\n  value: undefined,\n  children: undefined,\n};\n\nIconButton.propTypes = {\n  /** A custom class name. */\n  className: PropTypes.string,\n  /** Component that renders the icon, currently defaults to `FontAwesomeIcon`,\n   *  but is going to be deprecated soon, please use Paragon's icons instead. */\n  iconAs: PropTypes.elementType as any,\n  /** An icon component to render. Example import of a Paragon icon component:\n   * `import { Check } from '@openedx/paragon/icons';`\n   * */\n  src: PropTypes.elementType as any,\n  /** Alt text for your icon. For best practice, avoid using alt text to describe\n   * the image in the `IconButton`. Instead, we recommend describing the function\n   * of the button. */\n  alt: PropTypes.string.isRequired,\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n  /** Accepts a React fontawesome icon. */\n  icon: PropTypes.shape({\n    prefix: PropTypes.string,\n    iconName: PropTypes.string,\n    // eslint-disable-next-line react/forbid-prop-types\n    icon: PropTypes.array,\n  }) as any,\n  /** Extra class names that will be added to the icon */\n  iconClassNames: PropTypes.string,\n  /** Click handler for the button */\n  onClick: PropTypes.func,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** size of button to render */\n  size: PropTypes.oneOf(['sm', 'md', 'inline']),\n  /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */\n  isActive: PropTypes.bool,\n  /** Used with <IconButtonToggle> */\n  value: PropTypes.string,\n};\n\ninterface PropsWithTooltip extends Props {\n  /** choose from https://popper.js.org/docs/v2/constructors/#options */\n  tooltipPlacement: Placement,\n  /** any content to pass to tooltip content area */\n  tooltipContent: React.ReactNode,\n}\n\n/**\n * An icon button wrapped in overlaytrigger to display a tooltip.\n */\nfunction IconButtonWithTooltip({\n  tooltipPlacement, tooltipContent, ...props\n}: PropsWithTooltip) {\n  const invert = props.invertColors ? 'inverse-' : '';\n  return (\n    <OverlayTrigger\n      placement={tooltipPlacement}\n      overlay={(\n        <Tooltip\n          id={`iconbutton-tooltip-${tooltipPlacement}`}\n          variant={invert ? 'light' : undefined}\n        >\n          {tooltipContent}\n        </Tooltip>\n      )}\n    >\n      <IconButton {...props} />\n    </OverlayTrigger>\n  );\n}\n\nIconButtonWithTooltip.defaultProps = {\n  ...IconButton.defaultProps,\n  tooltipPlacement: 'top',\n};\n\nIconButtonWithTooltip.propTypes = {\n  /** tooltip placement can be top, left, right etc, per https://popper.js.org/docs/v2/constructors/#options  */\n  tooltipPlacement: PropTypes.string,\n  /** any valid JSX or text to be rendered as tooltip contents */\n  tooltipContent: PropTypes.node.isRequired,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n};\n\n(IconButton as any).IconButtonWithTooltip = IconButtonWithTooltip;\n\nexport default IconButton as typeof IconButton & {\n  IconButtonWithTooltip: typeof IconButtonWithTooltip,\n};\nexport { IconButtonWithTooltip };\n"],"mappings":"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","ignoreList":[]}

package/dist/utils/propTypes/utils.js

@@ -36,7 +36,7 @@ export const isEveryPropDefined = (props, otherPropNames) => otherPropNames
  * Returns a PropType entry with the given propType that is required if otherPropName
  * is truthy.
  * @param {func} propType - target PropType
- * @param {string} otherPropName - string name for prop that, if true, marks the
+ * @param {string | string[]} otherPropName - string name for prop that, if true, marks the
  *   associated prop as required
  * @return {func} - PropType based on propType that is required if otherPropName is
  *   set to true.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "22.11.0",
+  "version": "22.11.1",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/Collapsible/README.md

@@ -185,13 +185,13 @@ See the developer console for logging.
 ### Controlled usage
 
 ```jsx live
-function() {
+() => {
   const [collapseIsOpen, setCollapseOpen] = React.useState(true);
 
   return (
     <Collapsible.Advanced
       open={collapseIsOpen}
-      onToggle={isOpen => setCollapseOpen(!isOpen)}
+      onToggle={isOpen => setCollapseOpen(isOpen)}
       className="collapsible-card"
     >
       <Collapsible.Trigger className="collapsible-trigger">

package/src/DataTable/README.md

@@ -253,7 +253,7 @@ To enable proper selection behavior with backend pagination (i.e., when ``isSele
     </Component>
   );
 
-  const ClearAction = ({ as: Component, tableInstance, ...rest }) => (
+  const ClearAction = ({ as: Component, tableInstance }) => (
     <Component
       variant="danger"
       onClick={() => {
@@ -845,7 +845,7 @@ a responsive grid of cards.
     </Component>
   );
 
-  const ClearAction = ({ as: Component, tableInstance, ...rest }) => (
+  const ClearAction = ({ as: Component, tableInstance }) => (
     <Component
       variant="danger"
       onClick={() => {

package/src/Dropdown/README.md

@@ -145,7 +145,7 @@ You can use `Dropdown.Toggle` with [IconButton](/components/iconbutton) componen
 ```jsx live
 <Dropdown.Deprecated>
   <Dropdown.Deprecated.Button>
-    <Icon className="fa fa-user pr-3" alt="" />
+    <Icon className="fa fa-user pr-3" />
     Search Engines
   </Dropdown.Deprecated.Button>
   <Dropdown.Deprecated.Menu>

package/src/Dropzone/README.md

@@ -240,7 +240,7 @@ This example validates that only `400x479` images can be uploaded.
   async function imageDimensionValidator(file) {
     const image = new window.Image();
     try {
-      url = URL.createObjectURL(file);
+      const url = URL.createObjectURL(file);
       image.src = url;
       await image.decode();
       if (image.width !== 400 || image.height !== 479) {

package/src/Form/form-control.mdx

@@ -49,7 +49,9 @@ or [select attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element
 () => {
   {/* start example state */}
   const [type, setType] = useState('default');
+  const [value, setValue] = useState('');
   {/* end example state */}
+  const handleChange = (e) => setValue(e.target.value);
 
   const inputs = {
     default: (
@@ -144,8 +146,6 @@ or [select attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element
       </Form.Group>
     </>),
   };
-  const [value, setValue] = useState('');
-  const handleChange = (e) => setValue(e.target.value);
   return (
     <>
       {/* start example form block */}
@@ -172,7 +172,9 @@ See [react-imask](https://imask.js.org) for documentation on available props.
 () => {
   {/* start example state */}
   const [maskType, setMaskType] = useState('phone');
+  const [value, setValue] = useState('');
   {/* end example state */}
+  const handleChange = (e) => setValue(e.target.value);
 
   const inputsWithMask = {
     phone: (
@@ -255,10 +257,6 @@ See [react-imask](https://imask.js.org) for documentation on available props.
     ),
   };
 
-  const [value, setValue] = useState('');
-
-  const handleChange = (e) => setValue(e.target.value);
-
   return (
     <>
       {/* start example form block */}

package/src/IconButton/index.tsx

@@ -36,6 +36,8 @@ interface Props extends React.HTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'light' | 'dark' | 'black' | 'brand';
   /** size of button to render */
   size?: 'sm' | 'md' | 'inline';
+  /** Used with `IconButtonToggle` */
+  value?: string;
   /** no children */
   children?: never;
 }
@@ -104,6 +106,7 @@ IconButton.defaultProps = {
   size: 'md',
   onClick: () => {},
   isActive: false,
+  value: undefined,
   children: undefined,
 };
 
@@ -140,6 +143,8 @@ IconButton.propTypes = {
   size: PropTypes.oneOf(['sm', 'md', 'inline']),
   /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */
   isActive: PropTypes.bool,
+  /** Used with <IconButtonToggle> */
+  value: PropTypes.string,
 };
 
 interface PropsWithTooltip extends Props {

package/src/InputSelect/README.md

@@ -90,14 +90,13 @@ notes: |
   label="Favorite Color"
   options={['', 'red', 'orange', 'yellow', 'green', 'blue', 'purple']}
   validator={value => {
-    let feedback = { isValid: true };
     if (!value) {
-      feedback = {
+      return {
         isValid: false,
         validationMessage: 'Please make a selection.',
       };
     }
-    return feedback;
+    return { isValid: true };
   }}
 />
 ```

package/src/InputText/README.md

@@ -33,14 +33,13 @@ notes: |
   label="Username"
   description="The unique name that identifies you throughout the site."
   validator={value => {
-    let feedback = { isValid: true };
     if (value.length < 3) {
-      feedback = {
+      return {
         isValid: false,
         validationMessage: 'Username must be at least 3 characters in length.',
       };
     }
-    return feedback;
+    return { isValid: true };
   }}
 />
 ```
@@ -53,15 +52,14 @@ notes: |
   label="Username"
   description="The unique name that identifies you throughout the site."
   validator={value => {
-    let feedback = { isValid: true };
     if (value.length < 3) {
-      feedback = {
+      return {
         isValid: false,
         validationMessage: 'Username must be at least 3 characters in length.',
         dangerIconDescription: 'Error',
       };
     }
-    return feedback;
+    return { isValid: true };
   }}
   themes={['danger']}
 />

package/src/ListBox/README.md

@@ -105,7 +105,7 @@ class ListBoxWrapperForOnSelect extends React.Component {
             <span className="sr-only">none</span>
           ) : (
             <span
-              arialabelledby={`list-box-option-${
+              aria-labelledby={`list-box-option-${
                 this.state.selectedOptionIndex
               }`}
             >

package/src/Modal/standard-modal.mdx

@@ -31,7 +31,7 @@ The standard `ModalDialog` composition. `StandardModal` passes all of its props
         footerNode={(
           <ActionRow>
             <p className="small">
-              <Hyperlink href="#">Get help</Hyperlink>
+              <Hyperlink destination="#">Get help</Hyperlink>
             </p>
             <ActionRow.Spacer />
             <Button variant="tertiary" onClick={close}>Cancel</Button>

package/src/TextArea/README.md

@@ -40,14 +40,13 @@ notes: |
   label="Username"
   description="The unique name that identifies you throughout the site."
   validator={value => {
-    let feedback = { isValid: true };
     if (value.length < 3) {
-      feedback = {
+      return {
         isValid: false,
         validationMessage: 'Username must be at least 3 characters in length.',
       };
     }
-    return feedback;
+    return { isValid: true };
   }}
 />
 ```

package/src/utils/propTypes/utils.js

@@ -36,7 +36,7 @@ export const isEveryPropDefined = (props, otherPropNames) => otherPropNames
  * Returns a PropType entry with the given propType that is required if otherPropName
  * is truthy.
  * @param {func} propType - target PropType
- * @param {string} otherPropName - string name for prop that, if true, marks the
+ * @param {string | string[]} otherPropName - string name for prop that, if true, marks the
  *   associated prop as required
  * @return {func} - PropType based on propType that is required if otherPropName is
  *   set to true.