@openedx/paragon 22.6.0 → 23.0.0-alpha.2

package/src/Dropdown/deprecated/index.jsx

@@ -1,222 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-// eslint-disable-next-line import/no-cycle
-import DropdownButton from './DropdownButton';
-// eslint-disable-next-line import/no-cycle
-import DropdownMenu from './DropdownMenu';
-import DropdownItem from './DropdownItem';
-
-import withDeprecatedProps, { DeprTypes } from '../../withDeprecatedProps';
-
-const { Provider, Consumer } = React.createContext();
-
-class Dropdown extends React.Component {
-  // eslint-disable-next-line react/sort-comp
-  static idCounter = 0; // For creating unique ids
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      open: false,
-    };
-
-    // Used for aria labelling. Increment the id counter so the next id can be unique
-    this.uniqueId = Dropdown.idCounter;
-    Dropdown.idCounter += 1;
-    this.triggerId = `pgn__dropdown-trigger-${this.uniqueId}`;
-
-    this.containerRef = React.createRef();
-    this.menuRef = React.createRef();
-    this.buttonRef = React.createRef();
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    if (prevState.open !== this.state.open) {
-      if (this.state.open) {
-        this.focusFirst();
-      } else {
-        this.buttonRef.current.focus();
-      }
-    }
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('click', this.handleDocumentClick, true);
-  }
-
-  getFocusableElements() {
-    const selector = 'button:not([disabled]), [href]:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])';
-    return Array.from(this.menuRef.current.querySelectorAll(selector));
-  }
-
-  handleDocumentClick = (e) => {
-    if (this.containerRef.current.contains(e.target) && this.containerRef.current !== e.target) {
-      return;
-    }
-    if (this.state.open) {
-      this.close();
-    }
-  };
-
-  handleMenuKeyDown = (e) => {
-    switch (e.key) {
-      case 'ArrowUp':
-        e.preventDefault();
-        this.focusPrevious();
-        break;
-      case 'ArrowDown':
-        e.preventDefault();
-        this.focusNext();
-        break;
-      case 'Tab':
-        e.preventDefault();
-        if (e.shiftKey) {
-          this.focusPrevious();
-        } else {
-          this.focusNext();
-        }
-        break;
-      case 'Escape':
-        e.stopPropagation();
-        this.close();
-        break;
-      default:
-        break;
-    }
-  };
-
-  toggle = () => {
-    if (this.state.open) {
-      this.close();
-    } else {
-      this.open();
-    }
-  };
-
-  close() {
-    document.removeEventListener('click', this.handleDocumentClick, true);
-    this.setState({
-      open: false,
-    });
-  }
-
-  open() {
-    // adding event listener here so the user can close dropdown on click outside of the dropdown
-    document.addEventListener('click', this.handleDocumentClick, true);
-    this.setState({
-      open: true,
-    });
-  }
-
-  focusFirst() {
-    const focusableElements = this.getFocusableElements();
-    if (focusableElements.length) { focusableElements[0].focus(); }
-  }
-
-  focusNext() {
-    const allFocusableElements = this.getFocusableElements();
-    if (allFocusableElements.length === 0) { return; }
-    const activeIndex = allFocusableElements.indexOf(document.activeElement);
-    const nextIndex = (activeIndex + 1) % allFocusableElements.length;
-    allFocusableElements[nextIndex].focus();
-  }
-
-  focusPrevious() {
-    const allFocusableElements = this.getFocusableElements();
-    if (allFocusableElements.length === 0) { return; }
-    const activeIndex = allFocusableElements.indexOf(document.activeElement);
-    const previousIndex = ((activeIndex - 1) + allFocusableElements.length) % allFocusableElements.length;
-    allFocusableElements[previousIndex].focus();
-  }
-
-  render() {
-    const { children, ...other } = this.props;
-
-    return (
-      <div
-        {...other}
-        className={classNames(
-          'dropdown',
-          { show: this.state.open },
-          other.className,
-        )}
-        ref={this.containerRef}
-      >
-        <Provider
-          value={{
-            buttonRef: this.buttonRef,
-            handleMenuKeyDown: this.handleMenuKeyDown,
-            isOpen: this.state.open,
-            menuRef: this.menuRef,
-            toggle: this.toggle,
-            triggerId: this.triggerId,
-          }}
-        >
-          {children}
-        </Provider>
-      </div>
-    );
-  }
-}
-
-Dropdown.propTypes = {
-  children: PropTypes.node,
-};
-
-Dropdown.Item = DropdownItem;
-Dropdown.Button = DropdownButton;
-Dropdown.Menu = DropdownMenu;
-
-const DropdownWithDeprecatedProps = withDeprecatedProps(Dropdown, 'Dropdown', {
-  menuItems: {
-    deprType: DeprTypes.MOVED_AND_FORMAT,
-    message: 'They should be components sent as children.',
-    newName: 'children',
-    transform: (menuItems, allProps) => {
-      if (!Array.isArray(menuItems)) { return null; }
-      return (
-        <>
-          <DropdownButton>
-            {React.isValidElement(allProps.iconElement) ? allProps.iconElement : null }
-            {allProps.title}
-          </DropdownButton>
-          <DropdownMenu>
-            {menuItems.map((menuItem, i) => {
-            /* eslint-disable react/no-array-index-key */
-              if (React.isValidElement(menuItem)) {
-                return React.cloneElement(menuItem, {
-                  className: 'dropdown-item',
-                  key: i,
-                });
-              }
-              return <DropdownItem key={i} href={menuItem.href}>{menuItem.label}</DropdownItem>;
-            /* eslint-enable react/no-array-index-key */
-            })}
-          </DropdownMenu>
-        </>
-      );
-    },
-  },
-  title: {
-    deprType: DeprTypes.REMOVED,
-    message: 'It should be specified inside the Dropdown.Button component',
-  },
-  buttonType: {
-    deprType: DeprTypes.REMOVED,
-    message: 'It should be specified as a className prop',
-  },
-  iconElement: {
-    deprType: DeprTypes.REMOVED,
-    message: 'It should be specified inside the buttonContent prop.',
-  },
-});
-
-DropdownWithDeprecatedProps.propTypes = Dropdown.propTypes;
-DropdownWithDeprecatedProps.defaultProps = Dropdown.defaultProps;
-DropdownWithDeprecatedProps.Item = Dropdown.Item;
-DropdownWithDeprecatedProps.Button = Dropdown.Button;
-DropdownWithDeprecatedProps.Menu = Dropdown.Menu;
-
-export { Provider, Consumer };
-export default DropdownWithDeprecatedProps;

package/src/Dropzone/_variables.scss

@@ -1,9 +0,0 @@
-$dropzone-padding:                          1.5rem !default;
-$dropzone-border-default:                   1px dashed $gray-500 !default;
-$dropzone-box-shadow-hover:                 inset 0 0 0 2px $info-300 !default;
-$dropzone-box-shadow-focus:                 inset 0 0 0 2px $info-300 !default;
-$dropzone-box-shadow-active:                inset 0 0 0 2px $primary-500 !default;
-$dropzone-box-shadow-error:                 inset 0 0 0 2px $danger-300 !default;
-$dropzone-error-wrapper-color:              $danger-500 !default;
-$dropzone-restriction-msg-font-size:        $x-small-font-size !default;
-$dropzone-restriction-msg-color:            $gray-500 !default;

package/src/Fieldset/Fieldset.test.jsx

@@ -1,101 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import Fieldset from '.';
-import Variant from '../utils/constants';
-
-const dangerVariant = {
-  status: Variant.status.DANGER,
-};
-const id = 'input1';
-const legend = 'A Fieldset';
-const invalidMessage = 'This is invalid!';
-const children = 'Input goes here';
-const variant = {
-  status: Variant.status.INFO,
-};
-const variantIconDescription = 'Error';
-
-const baseProps = {
-  className: '',
-  id,
-  isValid: true,
-  legend,
-  invalidMessage,
-  variant,
-  variantIconDescription,
-};
-
-jest.mock('../utils/newId', () => jest.fn().mockReturnValue('fieldset1'));
-
-describe('Fieldset', () => {
-  it('renders', () => {
-    const { getByTestId, getByText } = render(
-      <Fieldset {...baseProps}>{children}</Fieldset>,
-    );
-
-    const fieldset = getByTestId('fieldset');
-    expect(fieldset).toBeInTheDocument();
-    expect(fieldset).toHaveClass('is-invalid-nodanger');
-    expect(fieldset).toHaveAttribute('aria-describedby', `error-${id}`);
-
-    const legendElem = getByText(legend);
-    expect(legendElem).toBeInTheDocument();
-
-    const feedback = getByTestId('validation-message');
-    expect(feedback).toHaveAttribute('id', `error-${id}`);
-  });
-
-  it('renders with auto-generated id if not specified', () => {
-    const props = {
-      ...baseProps,
-      id: undefined,
-    };
-
-    const { getByTestId } = render(<Fieldset {...props} />);
-    const feedback = getByTestId('validation-message');
-    expect(feedback).toHaveAttribute('id', 'error-fieldset1');
-  });
-
-  it('renders invalidMessage when isValid is false', () => {
-    const { getByTestId } = render(
-      <Fieldset {...baseProps} isValid={false} />,
-    );
-    const feedback = getByTestId('validation-message');
-    expect(feedback).toHaveTextContent(invalidMessage);
-  });
-
-  it('renders with danger variant when isValid is false and variant is DANGER', () => {
-    const { getByTestId } = render(
-      <Fieldset {...baseProps} isValid={false} variant={dangerVariant} />,
-    );
-    const feedback = getByTestId('validation-message');
-    expect(feedback).not.toHaveClass('invalid-feedback-nodanger');
-    expect(feedback).toHaveTextContent(invalidMessage);
-  });
-
-  it('receives new id when a valid one is passed to props', () => {
-    const nextId = 'new-id';
-
-    const { getByTestId } = render(<Fieldset {...baseProps} id={nextId} />);
-    const fieldset = getByTestId('fieldset');
-    const feedback = getByTestId('validation-message');
-
-    expect(fieldset).toHaveAttribute('aria-describedby', `error-${nextId}`);
-    expect(feedback).toHaveAttribute('id', `error-${nextId}`);
-  });
-
-  it('auto-generates new id when an invalid one is passed to props', () => {
-    const nextId = '';
-
-    const { getByTestId } = render(<Fieldset {...baseProps} id={nextId} />);
-    const fieldset = getByTestId('fieldset');
-    const feedback = getByTestId('validation-message');
-
-    expect(fieldset).toHaveAttribute(
-      'aria-describedby',
-      'error-fieldset1',
-    );
-    expect(feedback).toHaveAttribute('id', 'error-fieldset1');
-  });
-});

package/src/Fieldset/README.md

@@ -1,146 +0,0 @@
----
-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

@@ -1,107 +0,0 @@
-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

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