@openedx/paragon 21.5.7

package/src/Fieldset/README.md

@@ -0,0 +1,146 @@
+---
+title: 'Fieldset'
+type: 'component'
+components:
+- Fieldset
+categories:
+- Forms (deprecated)
+status: 'Deprecate Soon'
+designStatus: 'TBD'
+devStatus: 'To Do'
+notes: |
+  Unneeded. Used in one place (studio-frontend/src/components/EditImageModal/index.jsx)
+---
+
+## basic usage
+
+```jsx live
+<form>
+  <Fieldset legend="Name">
+    <InputText
+      name="firstName"
+      label="First Name"
+      value=""
+    />
+    <InputText
+      name="lastName"
+      label="Last Name"
+      value=""
+    />
+  </Fieldset>
+</form>
+```
+
+## invalid
+
+```jsx live
+<form>
+  <Fieldset legend="Name" invalidMessage="This is invalid!" isValid={false}>
+    <InputText
+      name="firstName"
+      label="First Name"
+      value=""
+    />
+    <InputText
+      name="lastName"
+      label="Last Name"
+      value=""
+    />
+  </Fieldset>
+</form>
+```
+
+## invalid with danger theme
+
+```jsx live
+<form>
+  <Fieldset
+    legend="Name"
+    invalidMessage="This is invalid!"
+    isValid={false}
+    variant={{
+      status: Variant.status.DANGER,
+    }}
+    variantIconDescription="Error"
+  >
+    <InputText
+      name="firstName"
+      label="First Name"
+      value=""
+    />
+    <InputText
+      name="lastName"
+      label="Last Name"
+      value=""
+    />
+  </Fieldset>
+</form>
+```
+
+## Validated Form
+
+```jsx live
+class ValidatedForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.firstInputRef = null;
+    this.secondInputRef = null;
+
+    this.state = {
+      isValid: true,
+    };
+
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleSubmit(event) {
+    if (
+      this.firstInputRef.value.length === 0 &&
+      this.secondInputRef.value.length === 0
+    ) {
+      this.setState({
+        isValid: false,
+      });
+    } else {
+      this.setState({
+        isValid: true,
+      });
+    }
+    event.preventDefault();
+  }
+
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <Fieldset
+          legend="Name"
+          invalidMessage="Please enter at least one name."
+          isValid={this.state.isValid}
+          variant={{
+            status: Variant.status.DANGER,
+          }}
+          variantIconDescription="Error"
+        >
+          <InputText
+            name="firstName"
+            label="First Name"
+            value=""
+            inputRef={ref => {
+              this.firstInputRef = ref;
+            }}
+          />
+          <InputText
+            name="lastName"
+            label="Last Name"
+            value=""
+            inputRef={ref => {
+              this.secondInputRef = ref;
+            }}
+          />
+        </Fieldset>
+        <input type="submit" className="btn btn-primary" value="Submit" />
+      </form>
+    );
+  }
+}
+```

package/src/Fieldset/index.jsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import newId from '../utils/newId';
+
+import ValidationMessage from '../ValidationMessage/index';
+import Variant from '../utils/constants';
+
+const inputProps = {
+  legend: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+
+  children: PropTypes.node,
+  className: PropTypes.string,
+  id: PropTypes.string,
+  isValid: PropTypes.bool,
+  invalidMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  variant: PropTypes.shape({
+    status: PropTypes.oneOf(Object.keys(Variant.status).map(k => Variant.status[k])),
+  }),
+  variantIconDescription: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+};
+
+const defaultProps = {
+  children: null,
+  className: undefined,
+  id: '',
+  isValid: true,
+  invalidMessage: '',
+  variant: {
+    status: Variant.status.INFO,
+  },
+  variantIconDescription: '',
+};
+
+class Fieldset extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { id: props.id || newId('fieldset') };
+  }
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.id !== prevState.id) {
+      return { id: nextProps.id || newId('fieldset') };
+    }
+
+    return null;
+  }
+
+  getVariantClassName() {
+    const { variant } = this.props;
+    let className;
+
+    switch (variant.status) {
+      case Variant.status.INFO:
+        className = 'is-invalid-nodanger';
+        break;
+      default:
+        break;
+    }
+
+    return className;
+  }
+
+  render() {
+    const {
+      className,
+      children,
+      variantIconDescription,
+      invalidMessage,
+      isValid,
+      legend,
+      variant,
+    } = this.props;
+    const errorId = `error-${this.state.id}`;
+    return (
+      <div className="paragon-fieldset">
+        <fieldset
+          className={classNames(
+            'form-control',
+            'p-3',
+            { 'is-invalid': !isValid },
+            this.getVariantClassName(),
+            className,
+          )}
+          aria-describedby={errorId}
+          data-testid="fieldset"
+        >
+          <legend className="p-1">{legend}</legend>
+          {children}
+        </fieldset>
+        <ValidationMessage
+          id={errorId}
+          isValid={isValid}
+          invalidMessage={invalidMessage}
+          variant={variant}
+          variantIconDescription={variantIconDescription}
+        />
+      </div>
+    );
+  }
+}
+
+Fieldset.propTypes = inputProps;
+Fieldset.defaultProps = defaultProps;
+
+export default Fieldset;

package/src/Fieldset/index.scss

@@ -0,0 +1,12 @@
+.paragon-fieldset {
+  margin-bottom: $spacer * 1.5;
+
+  .form-control {
+    height: auto;
+  }
+
+  fieldset legend {
+    width: auto;
+    margin-bottom: 0;
+  }
+}

package/src/Figure/README.md

@@ -0,0 +1,34 @@
+---
+title: 'Figure'
+type: 'component'
+categories:
+- Content
+components:
+- Figure
+status: 'Stable'
+designStatus: 'Done'
+devStatus: 'Done'
+notes: |
+
+---
+
+<p className="lead">
+  This is a pass through component from React-Bootstrap.<br/>
+  <a href="https://react-bootstrap-v4.netlify.app/components/figures/" target="_blank" rel="noopener noreferrer">
+    See React-Bootstrap for documentation.
+  </a>
+</p>
+
+## Basic Usage
+
+```jsx live
+<Figure>
+  <Figure.Image
+    alt="nature flower"
+    src="https://picsum.photos/200/200/"
+  />
+  <Figure.Caption>
+    Nulla vitae elit libero, a pharetra augue mollis interdum.
+  </Figure.Caption>
+</Figure>
+```

package/src/Figure/index.scss

@@ -0,0 +1,3 @@
+.figure {
+  text-align: start;
+}

package/src/Form/FormAutosuggest.jsx

@@ -0,0 +1,352 @@
+import React, {
+  useEffect, useState, useRef,
+} from 'react';
+import PropTypes from 'prop-types';
+import { v4 as uuidv4 } from 'uuid';
+import { useIntl } from 'react-intl';
+import { KeyboardArrowUp, KeyboardArrowDown } from '../../icons';
+import Icon from '../Icon';
+import FormGroup from './FormGroup';
+import FormControl from './FormControl';
+import FormControlFeedback from './FormControlFeedback';
+import IconButton from '../IconButton';
+import Spinner from '../Spinner';
+import useArrowKeyNavigation from '../hooks/useArrowKeyNavigation';
+import messages from './messages';
+
+function FormAutosuggest({
+  children,
+  arrowKeyNavigationSelector,
+  ignoredArrowKeysNames,
+  screenReaderText,
+  value,
+  isLoading,
+  errorMessageText,
+  onChange,
+  onSelected,
+  helpMessage,
+  ...props
+}) {
+  const intl = useIntl();
+  const formControlRef = useRef();
+  const parentRef = useArrowKeyNavigation({
+    selectors: arrowKeyNavigationSelector,
+    ignoredKeys: ignoredArrowKeysNames,
+  });
+  const [isMenuClosed, setIsMenuClosed] = useState(true);
+  const [isActive, setIsActive] = useState(false);
+  const [state, setState] = useState({
+    displayValue: value || '',
+    errorMessage: '',
+    dropDownItems: [],
+  });
+  const [activeMenuItemId, setActiveMenuItemId] = useState(null);
+
+  const handleMenuItemFocus = (menuItemId) => {
+    setActiveMenuItemId(menuItemId);
+  };
+
+  const handleItemClick = (e, onClick) => {
+    const clickedValue = e.currentTarget.getAttribute('data-value');
+
+    if (onSelected && clickedValue !== value) {
+      onSelected(clickedValue);
+    }
+
+    setState(prevState => ({
+      ...prevState,
+      dropDownItems: [],
+      displayValue: clickedValue,
+    }));
+
+    setIsMenuClosed(true);
+
+    if (onClick) {
+      onClick(e);
+    }
+  };
+
+  function getItems(strToFind = '') {
+    let childrenOpt = React.Children.map(children, (child) => {
+      // eslint-disable-next-line no-shadow
+      const { children, onClick, ...rest } = child.props;
+      const menuItemId = uuidv4();
+
+      return React.cloneElement(child, {
+        ...rest,
+        children,
+        'data-value': children,
+        onClick: (e) => handleItemClick(e, onClick),
+        id: menuItemId,
+        onFocus: () => handleMenuItemFocus(menuItemId),
+      });
+    });
+
+    if (strToFind.length > 0) {
+      childrenOpt = childrenOpt
+        .filter((opt) => (opt.props.children.toLowerCase().includes(strToFind.toLowerCase())));
+    }
+
+    return childrenOpt;
+  }
+
+  const handleExpand = () => {
+    setIsMenuClosed(!isMenuClosed);
+
+    const newState = {
+      dropDownItems: [],
+    };
+
+    if (isMenuClosed) {
+      setIsActive(true);
+      newState.dropDownItems = getItems(state.displayValue);
+      newState.errorMessage = '';
+    }
+
+    setState(prevState => ({
+      ...prevState,
+      ...newState,
+    }));
+  };
+
+  const iconToggle = (
+    <IconButton
+      className="pgn__form-autosuggest__icon-button"
+      data-testid="autosuggest-iconbutton"
+      tabindex="-1"
+      src={isMenuClosed ? KeyboardArrowDown : KeyboardArrowUp}
+      iconAs={Icon}
+      size="sm"
+      variant="secondary"
+      alt={isMenuClosed
+        ? intl.formatMessage(messages.iconButtonOpened)
+        : intl.formatMessage(messages.iconButtonClosed)}
+      onClick={(e) => handleExpand(e, isMenuClosed)}
+    />
+  );
+
+  const leaveControl = () => {
+    setIsActive(false);
+
+    setState(prevState => ({
+      ...prevState,
+      dropDownItems: [],
+      errorMessage: !state.displayValue ? errorMessageText : '',
+    }));
+
+    setIsMenuClosed(true);
+  };
+
+  const handleDocumentClick = (e) => {
+    if (parentRef.current && !parentRef.current.contains(e.target) && isActive) {
+      leaveControl();
+    }
+  };
+
+  const keyDownHandler = e => {
+    if (e.key === 'Escape' && isActive) {
+      e.preventDefault();
+
+      if (formControlRef) {
+        formControlRef.current.focus();
+      }
+
+      setState(prevState => ({
+        ...prevState,
+        dropDownItems: [],
+      }));
+
+      setIsMenuClosed(true);
+    }
+    if (e.key === 'Tab' && isActive) {
+      leaveControl();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('keydown', keyDownHandler);
+    document.addEventListener('click', handleDocumentClick, true);
+
+    return () => {
+      document.removeEventListener('click', handleDocumentClick, true);
+      document.removeEventListener('keydown', keyDownHandler);
+    };
+  });
+
+  useEffect(() => {
+    if (value || value === '') {
+      setState(prevState => ({
+        ...prevState,
+        displayValue: value,
+      }));
+    }
+  }, [value]);
+
+  const setDisplayValue = (itemValue) => {
+    const optValue = [];
+
+    children.forEach(opt => {
+      optValue.push(opt.props.children);
+    });
+
+    const normalized = itemValue.toLowerCase();
+    const opt = optValue.find((o) => o.toLowerCase() === normalized);
+
+    setState(prevState => ({
+      ...prevState,
+      displayValue: opt || itemValue,
+    }));
+  };
+
+  const handleClick = (e) => {
+    setIsActive(true);
+    const dropDownItems = getItems(e.target.value);
+
+    if (dropDownItems.length > 1) {
+      setState(prevState => ({
+        ...prevState,
+        dropDownItems,
+        errorMessage: '',
+      }));
+
+      setIsMenuClosed(false);
+    }
+  };
+
+  const handleOnChange = (e) => {
+    const findStr = e.target.value;
+
+    if (onChange) { onChange(findStr); }
+
+    if (findStr.length) {
+      const filteredItems = getItems(findStr);
+      setState(prevState => ({
+        ...prevState,
+        dropDownItems: filteredItems,
+        errorMessage: '',
+      }));
+
+      setIsMenuClosed(false);
+    } else {
+      setState(prevState => ({
+        ...prevState,
+        dropDownItems: [],
+      }));
+
+      setIsMenuClosed(true);
+    }
+
+    setDisplayValue(e.target.value);
+  };
+
+  return (
+    <div className="pgn__form-autosuggest__wrapper" ref={parentRef}>
+      <div aria-live="assertive" className="sr-only" data-testid="autosuggest-screen-reader-options-count">
+        {`${state.dropDownItems.length} options found`}
+      </div>
+      <FormGroup isInvalid={!!state.errorMessage}>
+        <FormControl
+          ref={formControlRef}
+          aria-expanded={(state.dropDownItems.length > 0).toString()}
+          aria-owns="pgn__form-autosuggest__dropdown-box"
+          role="combobox"
+          aria-autocomplete="list"
+          autoComplete="off"
+          value={state.displayValue}
+          aria-invalid={state.errorMessage}
+          aria-activedescendant={activeMenuItemId}
+          onChange={handleOnChange}
+          onClick={handleClick}
+          trailingElement={iconToggle}
+          data-testid="autosuggest-textbox-input"
+          {...props}
+        />
+
+        {helpMessage && !state.errorMessage && (
+          <FormControlFeedback type="default">
+            {helpMessage}
+          </FormControlFeedback>
+        )}
+
+        {state.errorMessage && (
+          <FormControlFeedback type="invalid" feedback-for={props.name}>
+            {errorMessageText}
+          </FormControlFeedback>
+        )}
+      </FormGroup>
+
+      <ul
+        id="pgn__form-autosuggest__dropdown-box"
+        className="pgn__form-autosuggest__dropdown"
+        role="listbox"
+      >
+        {isLoading ? (
+          <div className="pgn__form-autosuggest__dropdown-loading">
+            <Spinner
+              animation="border"
+              variant="dark"
+              screenReaderText={screenReaderText}
+              data-testid="autosuggest-loading-spinner"
+            />
+          </div>
+        ) : state.dropDownItems.length > 0 && state.dropDownItems}
+      </ul>
+    </div>
+  );
+}
+
+FormAutosuggest.defaultProps = {
+  arrowKeyNavigationSelector: 'a:not(:disabled),li:not(:disabled, .btn-icon),input:not(:disabled)',
+  ignoredArrowKeysNames: ['ArrowRight', 'ArrowLeft'],
+  isLoading: false,
+  className: null,
+  floatingLabel: null,
+  onChange: null,
+  onSelected: null,
+  helpMessage: '',
+  placeholder: '',
+  value: null,
+  errorMessageText: null,
+  readOnly: false,
+  children: null,
+  name: 'form-autosuggest',
+  screenReaderText: 'loading',
+};
+
+FormAutosuggest.propTypes = {
+  /**
+   * Specifies the CSS selector string that indicates to which elements
+   * the user can navigate using the arrow keys
+  */
+  arrowKeyNavigationSelector: PropTypes.string,
+  /** Specifies ignored hook keys. */
+  ignoredArrowKeysNames: PropTypes.arrayOf(PropTypes.string),
+  /** Specifies loading state. */
+  isLoading: PropTypes.bool,
+  /** Specifies class name to append to the base element. */
+  className: PropTypes.string,
+  /** Specifies floating label to display for the input component. */
+  floatingLabel: PropTypes.string,
+  /** Specifies onChange event handler. */
+  onChange: PropTypes.func,
+  /** Specifies help information for the user. */
+  helpMessage: PropTypes.string,
+  /** Specifies the placeholder text for the input. */
+  placeholder: PropTypes.string,
+  /** Specifies values for the input. */
+  value: PropTypes.string,
+  /** Informs user has errors. */
+  errorMessageText: PropTypes.string,
+  /** Specifies the name of the base input element. */
+  name: PropTypes.string,
+  /** Selected list item is read-only. */
+  readOnly: PropTypes.bool,
+  /** Specifies the content of the `FormAutosuggest`. */
+  children: PropTypes.node,
+  /** Specifies the screen reader text */
+  screenReaderText: PropTypes.string,
+  /** Function that receives the selected value. */
+  onSelected: PropTypes.func,
+};
+
+export default FormAutosuggest;

package/src/Form/FormAutosuggestOption.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import MenuItem from '../Menu/MenuItem';
+
+function FormAutosuggestOption({
+  children,
+  className,
+  onClick,
+  ...props
+}) {
+  return (
+    <MenuItem
+      as="li"
+      data-testid="autosuggest-optionitem"
+      role="option"
+      tabIndex="-1"
+      onClick={onClick}
+      className={classNames(className, 'dropdown-item')}
+      {...props}
+    >
+      {children}
+    </MenuItem>
+  );
+}
+
+FormAutosuggestOption.defaultProps = {
+  className: null,
+  children: null,
+  onClick: null,
+};
+
+FormAutosuggestOption.propTypes = {
+  /** Specifies class name to append to the base element. */
+  className: PropTypes.string,
+  /** Specifies the text-content of the `FormAutosuggestOption`. */
+  children: PropTypes.string,
+  /** A click handler for the `FormAutosuggestOption` */
+  onClick: PropTypes.func,
+};
+
+export default FormAutosuggestOption;