@openedx/paragon 22.0.0-alpha.24 → 22.1.0

package/src/Form/form-autosuggest.mdx

@@ -19,52 +19,79 @@ Form auto-suggest enables users to manually select or type to find matching opti
 
 ```jsx live
 () => {
-  const [selected, setSelected] = useState('');
+  const [value, setValue] = useState({});
+  const [isValueRequired, setIsValueRequired] = useState(false);
+  const [isSelectionRequired, setIsSelectionRequired] = useState(false);
+  const [hasCustomValidation, setHasCustomValidation] = useState(false);
 
-  return (
-    <Form.Group>
-      <Form.Label>
-        <h4>Programming language</h4>
-      </Form.Label>
-      <Form.Autosuggest
-        aria-label="form autosuggest"
-        helpMessage="Select language"
-        errorMessageText="Error, no selected value"
-        value={selected}
-        onSelected={(value) => setSelected(value)}
-      >
-        <Form.AutosuggestOption>JavaScript</Form.AutosuggestOption>
-        <Form.AutosuggestOption>Python</Form.AutosuggestOption>
-        <Form.AutosuggestOption>Rube</Form.AutosuggestOption>
-        <Form.AutosuggestOption onClick={(e) => alert(e.currentTarget.getAttribute('data-value'))}>
-          Option with custom onClick
-        </Form.AutosuggestOption>
-      </Form.Autosuggest>
-    </Form.Group>
-  );
-};
-```
-
-## Search Usage
+  const hasCustomError = () => (hasCustomValidation ? value.selectionId !== 'c-option-id' : false);
 
-```jsx live
-() => {
-  const [selected, setSelected] = useState('');
+  const autosuggestRef = useRef();
+  const forceUpdateErrorState = () => {
+    autosuggestRef.current.updateErrorStateAndErrorMessage();
+  };
 
   return (
-    <Form.Autosuggest
-      placeholder="Type 'T'"
-      aria-label="form autosuggest"
-      errorMessageText="Error, no selected value"
-      helpMessage="Select language"
-      value={selected}
-      onSelected={(value) => setSelected(value)}
-    >
-      <Form.AutosuggestOption>PHP</Form.AutosuggestOption>
-      <Form.AutosuggestOption>Java</Form.AutosuggestOption>
-      <Form.AutosuggestOption>Turbo Pascal</Form.AutosuggestOption>
-      <Form.AutosuggestOption>Flask</Form.AutosuggestOption>
-    </Form.Autosuggest>
+    <>
+      <Form.Group>
+        <Form.Label>
+          <h4>Programming language</h4>
+        </Form.Label>
+        <Form.Autosuggest
+          ref={autosuggestRef}
+          aria-label="form autosuggest"
+          helpMessage="Select language"
+          value={value}
+          onChange={(v) => setValue(v)}
+          isValueRequired={isValueRequired}
+          valueRequiredErrorMessageText="Error: value required"
+          isSelectionRequired={isSelectionRequired}
+          selectionRequiredErrorMessageText="Error: selection required"
+          hasCustomError={hasCustomError()}
+          customErrorMessageText="Error: selected language less than 50 years old"
+        >
+          <Form.AutosuggestOption id="javascript-option-id">JavaScript</Form.AutosuggestOption>
+          <Form.AutosuggestOption id="python-option-id">Python</Form.AutosuggestOption>
+          <Form.AutosuggestOption id="ruby-option-id">Ruby</Form.AutosuggestOption>
+          <Form.AutosuggestOption id="c-option-id">C</Form.AutosuggestOption>
+        </Form.Autosuggest>
+      </Form.Group>
+      <Form.Group>
+        <Form.CheckboxSet isInline>
+          <Form.Checkbox checked={isValueRequired} onChange={e => setIsValueRequired(e.target.checked)}>Value Required</Form.Checkbox>
+          <Form.Checkbox checked={isSelectionRequired} onChange={e => setIsSelectionRequired(e.target.checked)}>Selection Required</Form.Checkbox>
+          <Form.Checkbox checked={hasCustomValidation} onChange={e => setHasCustomValidation(e.target.checked)}>Custom Validation</Form.Checkbox>
+        </Form.CheckboxSet>
+      </Form.Group>
+      <Collapsible styling="basic" title="Value details">
+        <Row>
+          <Col xs={3}><pre>userProvidedText:</pre></Col>
+          <Col><pre>{value.userProvidedText}</pre></Col>
+        </Row>
+        <Row>
+          <Col xs={3}><pre>selectionValue:</pre></Col>
+          <Col><pre>{value.selectionValue}</pre></Col>
+        </Row>
+        <Row>
+          <Col xs={3}><pre>selectionId:</pre></Col>
+          <Col><pre>{value.selectionId}</pre></Col>
+        </Row>
+      </Collapsible>
+      <Collapsible styling="basic" title="External modification">
+        <Form.Group className="mb-3">
+          <Form.Label>User provided text</Form.Label>
+          <Form.Control
+            onChange={(e) => setValue({
+              userProvidedText: e.target.value,
+              selectionValue: '',
+              selectionId: '',
+            })}
+            value={value.userProvidedText}
+          />
+        </Form.Group>
+        <Button onClick={forceUpdateErrorState}>Trigger validation</Button>
+      </Collapsible>
+    </>
   );
 };
 ```
@@ -73,6 +100,9 @@ Form auto-suggest enables users to manually select or type to find matching opti
 
 ```jsx live
 () => {
+  const [userProvidedText, setUserProvidedText] = useState('');
+  const [selectionValue, setSelectionValue] = useState('');
+  const [selectionId, setSelectionId] = useState('');
   const [data, setData] = useState([]);
   const [showLoading, setShowLoading] = useState(false);
 
@@ -88,8 +118,10 @@ Form auto-suggest enables users to manually select or type to find matching opti
       });
   }, []);
 
-  const searchCoffee = (title) => {
-    setShowLoading(true);
+  const searchCoffee = (title, id) => {
+    if (!id) {
+      setShowLoading(true);
+    }
     fetch('https://api.sampleapis.com/coffee/hot')
       .then(data => data.json())
       .then(items => setTimeout(() => {
@@ -100,20 +132,45 @@ Form auto-suggest enables users to manually select or type to find matching opti
       }, 1500));
   };
 
+  const valueChanged = (value) => {
+    if (userProvidedText !== value.userProvidedText) {
+      searchCoffee(value.userProvidedText, value.selectionId);
+    }
+    setUserProvidedText(value.userProvidedText);
+    setSelectionValue(value.selectionValue);
+    setSelectionId(value.selectionId);
+  };
+
   return (
-    <Form.Group>
-      <Form.Label>
-        <h4>Café API</h4>
-      </Form.Label>
-      <Form.Autosuggest
-        isLoading={showLoading}
-        placeholder="This is placeholder"
-        screenReaderText="Loading..."
-        onChange={searchCoffee}
-      >
-        {data.map((item, index) => <Form.AutosuggestOption key={index}>{item.title}</Form.AutosuggestOption>)}
-      </Form.Autosuggest>
-    </Form.Group>
+    <>
+      <Form.Group>
+        <Form.Label>
+          <h4>Café API</h4>
+        </Form.Label>
+        <Form.Autosuggest
+          isLoading={showLoading}
+          placeholder="This is placeholder"
+          screenReaderText="Loading..."
+          onChange={valueChanged}
+        >
+          {data.map((item, index) => <Form.AutosuggestOption key={index}>{item.title}</Form.AutosuggestOption>)}
+        </Form.Autosuggest>
+      </Form.Group>
+      <Collapsible styling="basic" title="Value details">
+        <Row>
+          <Col xs={3}><pre>userProvidedText:</pre></Col>
+          <Col><pre>{userProvidedText}</pre></Col>
+        </Row>
+        <Row>
+          <Col xs={3}><pre>selectionValue:</pre></Col>
+          <Col><pre>{selectionValue}</pre></Col>
+        </Row>
+        <Row>
+          <Col xs={3}><pre>selectionId:</pre></Col>
+          <Col><pre>{selectionId}</pre></Col>
+        </Row>
+      </Collapsible>
+    </>
   );
 };
 ```

package/src/Form/tests/FormAutosuggest.test.jsx

@@ -23,10 +23,15 @@ function FormAutosuggestTestComponent(props) {
       name="FormAutosuggest"
       floatingLabel="floatingLabel text"
       helpMessage="Example help message"
-      errorMessageText="Example error message"
-      onSelected={props.onSelected}
+      valueRequiredErrorMessageText="Example value required error message"
+      selectionRequiredErrorMessageText="Example selection required error message"
+      customErrorMessageText="Example custom error message"
+      onChange={props.onChange}
+      isValueRequired={props.isValueRequired}
+      isSelectionRequired={props.isSelectionRequired}
+      hasCustomError={props.hasCustomError}
     >
-      <FormAutosuggestOption>Option 1</FormAutosuggestOption>
+      <FormAutosuggestOption id="option-1-id">Option 1</FormAutosuggestOption>
       <FormAutosuggestOption onClick={props.onClick}>Option 2</FormAutosuggestOption>
       <FormAutosuggestOption>Learn from more than 160 member universities</FormAutosuggestOption>
     </FormAutosuggestWrapper>
@@ -47,15 +52,19 @@ function FormAutosuggestLabelTestComponent() {
 }
 
 FormAutosuggestTestComponent.defaultProps = {
-  onSelected: jest.fn(),
+  onChange: jest.fn(),
   onClick: jest.fn(),
+  isValueRequired: false,
+  isSelectionRequired: false,
+  hasCustomError: false,
 };
 
 FormAutosuggestTestComponent.propTypes = {
-  /** Specifies onSelected event handler. */
-  onSelected: PropTypes.func,
-  /** Specifies onClick event handler. */
+  onChange: PropTypes.func,
   onClick: PropTypes.func,
+  isValueRequired: PropTypes.bool,
+  isSelectionRequired: PropTypes.bool,
+  hasCustomError: PropTypes.bool,
 };
 
 describe('render behavior', () => {
@@ -76,7 +85,7 @@ describe('render behavior', () => {
   });
 
   it('renders the auto-populated value if it exists', () => {
-    render(<FormAutosuggestWrapper value="Test Value" />);
+    render(<FormAutosuggestWrapper value={{ userProvidedText: 'Test Value' }} />);
     expect(screen.getByDisplayValue('Test Value')).toBeInTheDocument();
   });
 
@@ -88,15 +97,42 @@ describe('render behavior', () => {
     expect(list.length).toBe(3);
   });
 
-  it('renders with error msg', () => {
-    const { getByText, getByTestId } = render(<FormAutosuggestTestComponent />);
+  it('renders with value required error msg', () => {
+    const { getByText, getByTestId } = render(<FormAutosuggestTestComponent isValueRequired />);
+    const input = getByTestId('autosuggest-textbox-input');
+
+    // if you click into the input and click outside, you should see the error message
+    userEvent.click(input);
+    userEvent.click(document.body);
+
+    const formControlFeedback = getByText('Example value required error message');
+
+    expect(formControlFeedback).toBeInTheDocument();
+  });
+
+  it('renders with selection required error msg', () => {
+    const { getByText, getByTestId } = render(<FormAutosuggestTestComponent isSelectionRequired />);
+    const input = getByTestId('autosuggest-textbox-input');
+
+    // if you click into the input and click outside, you should see the error message
+    userEvent.click(input);
+    userEvent.type(input, '1');
+    userEvent.click(document.body);
+
+    const formControlFeedback = getByText('Example selection required error message');
+
+    expect(formControlFeedback).toBeInTheDocument();
+  });
+
+  it('renders with custom error msg', () => {
+    const { getByText, getByTestId } = render(<FormAutosuggestTestComponent hasCustomError />);
     const input = getByTestId('autosuggest-textbox-input');
 
     // if you click into the input and click outside, you should see the error message
     userEvent.click(input);
     userEvent.click(document.body);
 
-    const formControlFeedback = getByText('Example error message');
+    const formControlFeedback = getByText('Example custom error message');
 
     expect(formControlFeedback).toBeInTheDocument();
   });
@@ -147,17 +183,28 @@ describe('controlled behavior', () => {
     expect(input.value).toEqual('Option 1');
   });
 
-  it('calls onSelected based on clicked option', () => {
-    const onSelected = jest.fn();
-    const { getByText, getByTestId } = render(<FormAutosuggestTestComponent onSelected={onSelected} />);
+  it('calls onChange based on clicked option', () => {
+    const onChange = jest.fn();
+    const { getByText, getByTestId } = render(<FormAutosuggestTestComponent onChange={onChange} />);
     const input = getByTestId('autosuggest-textbox-input');
 
     userEvent.click(input);
     const menuItem = getByText('Option 1');
     userEvent.click(menuItem);
 
-    expect(onSelected).toHaveBeenCalledWith('Option 1');
-    expect(onSelected).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith({ selectionId: 'option-1-id', selectionValue: 'Option 1', userProvidedText: 'Option 1' });
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onChange when the textbox is cleared', () => {
+    const onChange = jest.fn();
+    const { getByTestId } = render(<FormAutosuggestTestComponent onChange={onChange} />);
+    const input = getByTestId('autosuggest-textbox-input');
+
+    userEvent.type(input, '1');
+    userEvent.type(input, '{backspace}');
+
+    expect(onChange).toHaveBeenCalledWith({ selectionId: '', selectionValue: '', userProvidedText: '' });
   });
 
   it('calls the function passed to onClick when an option with it is selected', () => {

package/src/Hyperlink/index.scss

@@ -1,9 +1,9 @@
 .pgn__hyperlink {
+  display: inline-flex;
+  align-items: center;
   text-align: start;
 
   &__external-icon {
-    display: inline-block;
-    vertical-align: middle;
-    margin-inline-start: var(--pgn-spacing-spacer-2);
+    margin-inline-start: map_get($spacers, 2);
   }
 }

package/src/Icon/README.md

@@ -11,13 +11,13 @@ devStatus: 'Done'
 notes: |
 ---
 
-Displays an svg icon from `@edx/paragon/icons`. See [Icons Foundation Documentation](/foundations/icons) for a list of all available icons.
+Displays an svg icon from `@openedx/paragon/icons`. See [Icons Foundation Documentation](/foundations/icons) for a list of all available icons.
 
 ## Basic Usage
 
 ```jsx live
 // Included in this live jsx scope:
-// import { Add, AddCircle } from '@edx/paragon/icons';
+// import { Add, AddCircle } from '@openedx/paragon/icons';
 <Icon src={Add} />
 ```
 ### With HTML attributes
@@ -26,7 +26,7 @@ HTML attributes can be passed to this component allowing for customization of th
 
 ```jsx live
 // Included in this live jsx scope:
-// import { Add, AddCircle } from '@edx/paragon/icons';
+// import { Add, AddCircle } from '@openedx/paragon/icons';
 <div className="d-flex align-items-center bg-dark">
   <Icon src={Add} className="mx-3 text-white" />
   <Icon src={Add} className="mx-3 text-white" size="xs" />

package/src/Icon/_variables.scss

@@ -0,0 +1,7 @@
+// Icons sizes
+
+$icon-inline: .8em !default;
+$icon-xs: 1rem !default;
+$icon-sm: 1.25rem !default;
+$icon-md: 1.5rem !default;
+$icon-lg: 1.75rem !default;

package/src/Icon/index.jsx

@@ -72,7 +72,7 @@ function Icon({
 Icon.propTypes = {
   /**
    * An icon component to render.
-   * Example import of a Paragon icon component: `import { Check } from '@edx/paragon/icons';`
+   * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';`
    */
   src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),
   /** HTML element attributes to pass through to the underlying svg element */

package/src/Icon/index.scss

@@ -1,3 +1,5 @@
+@import "variables";
+
 .pgn__icon {
   display: block;
   height: 1.5rem; // 24px, Assumes base font size to be 16px
@@ -6,28 +8,28 @@
   flex-shrink: 0;
 
   &.pgn__icon__inline {
-    width: var(--pgn-size-icon-inline);
-    height: var(--pgn-size-icon-inline);
+    width: $icon-inline;
+    height: $icon-inline;
   }
 
   &.pgn__icon__xs {
-    width: var(--pgn-size-icon-xs);
-    height: var(--pgn-size-icon-xs);
+    width: $icon-xs;
+    height: $icon-xs;
   }
 
   &.pgn__icon__sm {
-    width: var(--pgn-size-icon-sm);
-    height: var(--pgn-size-icon-sm);
+    width: $icon-sm;
+    height: $icon-sm;
   }
 
   &.pgn__icon__md {
-    width: var(--pgn-size-icon-md);
-    height: var(--pgn-size-icon-md);
+    width: $icon-md;
+    height: $icon-md;
   }
 
   &.pgn__icon__lg {
-    width: var(--pgn-size-icon-lg);
-    height: var(--pgn-size-icon-lg);
+    width: $icon-lg;
+    height: $icon-lg;
   }
 }
 

package/src/IconButton/README.md

@@ -20,7 +20,7 @@ notes: ''
   return (
     <div className="d-flex flex-wrap">
       {variants.map((variant) => (
-        <IconButton key={variant} src={Close} alt="Close" onClick={() => {}} variant={variant} className="mr-2" />
+        <IconButton key={variant} src={Close} iconAs={Icon} alt="Close" onClick={() => {}} variant={variant} className="mr-2" />
       ))}
     </div>
   );
@@ -40,6 +40,7 @@ notes: ''
           tooltipPlacement='top'
           tooltipContent={<div>a nice tooltip of {variant}!</div>}
           src={Close}
+          iconAs={Icon}
           alt="Close"
           onClick={() => {}}
           variant={variant}
@@ -63,6 +64,7 @@ notes: ''
           isActive
           key={variant}
           src={Close}
+          iconAs={Icon}
           alt="Close"
           onClick={() => {}}
           variant={variant}
@@ -87,6 +89,7 @@ notes: ''
           isActive
           key={variant}
           src={Close}
+          iconAs={Icon}
           alt="Close"
           onClick={() => {}}
           variant={variant}
@@ -106,6 +109,7 @@ notes: ''
   <div className="p-1 bg-brand">
     <IconButton
       src={MenuIcon}
+      iconAs={Icon}
       alt="Menu"
       onClick={() => console.log("You clicked the menu button")}
       variant="brand"
@@ -115,6 +119,7 @@ notes: ''
   <div className="p-1 bg-primary">
     <IconButton
       src={MenuIcon}
+      iconAs={Icon}
       alt="Menu"
       onClick={() => console.log("You clicked the menu button")}
       variant="primary"
@@ -124,6 +129,7 @@ notes: ''
   <div className="p-1 bg-secondary">
     <IconButton
       src={MenuIcon}
+      iconAs={Icon}
       alt="Menu"
       onClick={() => console.log("You clicked the menu button")}
       variant="secondary"
@@ -133,6 +139,7 @@ notes: ''
   <div className="p-1 bg-success">
     <IconButton
       src={MenuIcon}
+      iconAs={Icon}
       alt="Menu"
       onClick={() => console.log("You clicked the menu button")}
       variant="success"
@@ -142,6 +149,7 @@ notes: ''
   <div className="p-1 bg-warning">
     <IconButton
       src={MenuIcon}
+      iconAs={Icon}
       alt="Menu"
       onClick={() => console.log("You clicked the menu button")}
       variant="warning"
@@ -151,6 +159,7 @@ notes: ''
   <div className="p-1 bg-danger">
     <IconButton
       src={MenuIcon}
+      iconAs={Icon}
       alt="Menu"
       onClick={() => console.log("You clicked the menu button")}
       variant="danger"
@@ -160,6 +169,7 @@ notes: ''
   <div className="p-1 bg-light">
     <IconButton
       src={MenuIcon}
+      iconAs={Icon}
       alt="Menu"
       onClick={() => console.log("You clicked the menu button")}
       variant="light"
@@ -169,6 +179,7 @@ notes: ''
   <div className="p-1" style={{ background: "black" }}>
     <IconButton
       src={MenuIcon}
+      iconAs={Icon}
       alt="Menu"
       onClick={() => console.log("You clicked the menu button")}
       variant="black"
@@ -186,6 +197,7 @@ notes: ''
     Small
     <IconButton
       src={MenuIcon}
+      iconAs={Icon}
       alt="Menu"
       onClick={() => {}}
       variant="primary"
@@ -196,6 +208,7 @@ notes: ''
     Inline:
     <IconButton
       src={MenuIcon}
+      iconAs={Icon}
       alt="Menu"
       onClick={() => {}}
       variant="primary"
@@ -207,6 +220,7 @@ notes: ''
     For example, applying className="x-small" will make the Icon Button look like this:
     <IconButton
       src={Favorite}
+      iconAs={Icon}
       alt="Favorite"
       onClick={() => {}}
       variant="primary"

package/src/IconButton/__snapshots__/IconButton.test.jsx.snap

@@ -10,11 +10,34 @@ exports[`<IconButton /> renders with required props 1`] = `
   <span
     className="btn-icon__icon-container"
   >
-    <span
-      aria-hidden={true}
-      className="btn-icon__icon"
-      id="Icon1"
-    />
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-InfoOutlineIcon btn-icon__icon"
+      data-icon="InfoOutlineIcon"
+      data-prefix="pgn"
+      focusable="false"
+      role="img"
+      src={null}
+      style={Object {}}
+      viewBox="0 0 function SvgInfoOutline(props) {
+  return /*#__PURE__*/React.createElement(\\"svg\\", _extends({
+    width: 24,
+    height: 24,
+    viewBox: \\"0 0 24 24\\",
+    fill: \\"none\\",
+    xmlns: \\"http://www.w3.org/2000/svg\\"
+  }, props), /*#__PURE__*/React.createElement(\\"path\\", {
+    d: \\"M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z\\",
+    fill: \\"currentColor\\"
+  }));
+} undefined"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
   </span>
 </button>
 `;

package/src/IconButton/index.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import Icon from '../Icon';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { OverlayTrigger } from '../Overlay';
 import Tooltip from '../Tooltip';
 
@@ -22,8 +22,14 @@ const IconButton = React.forwardRef(({
 }, ref) => {
   const invert = invertColors ? 'inverse-' : '';
   const activeStyle = isActive ? `${variant}-` : '';
-  const IconComponent = iconAs;
-
+  if (!iconAs && process.env.NODE_ENV === 'development' && console) {
+    const msg = '[Deprecated] IconButton: you have not provided a value for iconAs prop and '
+      + 'are using a default one - FontAwesomeIcon, the default value is going to be changed soon '
+      + 'as Paragon is moving away from FontAwesome, please use Paragon\'s icons instead.';
+    // eslint-disable-next-line no-console
+    console.warn(msg);
+  }
+  const IconComponent = iconAs || FontAwesomeIcon;
   return (
     <button
       aria-label={alt}
@@ -53,7 +59,7 @@ const IconButton = React.forwardRef(({
 });
 
 IconButton.defaultProps = {
-  iconAs: Icon,
+  iconAs: undefined,
   src: null,
   icon: undefined,
   iconClassNames: undefined,
@@ -68,10 +74,11 @@ IconButton.defaultProps = {
 IconButton.propTypes = {
   /** A custom class name. */
   className: PropTypes.string,
-  /** Component that renders the icon, currently defaults to `Icon` */
+  /** Component that renders the icon, currently defaults to `FontAwesomeIcon`,
+   *  but is going to be deprecated soon, please use Paragon's icons instead. */
   iconAs: PropTypes.elementType,
   /** An icon component to render. Example import of a Paragon icon component:
-   * `import { Check } from '@edx/paragon/dist/icon';`
+   * `import { Check } from '@openedx/paragon/dist/icon';`
    * */
   src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),
   /** Alt text for your icon. For best practice, avoid using alt text to describe
@@ -80,7 +87,7 @@ IconButton.propTypes = {
   alt: PropTypes.string.isRequired,
   /** Changes icon styles for dark background */
   invertColors: PropTypes.bool,
-  /** Accepts a [Paragon icon](https://paragon-openedx.netlify.app/foundations/icons) */
+  /** Accepts a React fontawesome icon. */
   icon: PropTypes.shape({
     prefix: PropTypes.string,
     iconName: PropTypes.string,