@openedx/paragon 21.7.1 → 22.0.0-alpha.15

package/src/ListBox/index.jsx

@@ -1,115 +0,0 @@
-/* eslint-disable max-len */
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { nonNegativeInteger } from '../utils/propTypes';
-
-export default class ListBox extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.onFocus = this.onFocus.bind(this);
-    this.onKeyDown = this.onKeyDown.bind(this);
-
-    this.state = {
-      selectedOptionIndex: null,
-    };
-  }
-
-  static getDerivedStateFromProps(nextProps, prevState) {
-    const { selectedOptionIndex } = nextProps;
-
-    if (selectedOptionIndex !== prevState.selectedOptionIndex
-      && selectedOptionIndex !== undefined) {
-      return { selectedOptionIndex };
-    }
-
-    return null;
-  }
-
-  onFocus() {
-    // if no ListBoxOption is selected, select first ListBoxOption on ListBox focus
-    if (!this.state.selectedOptionIndex) {
-      this.setState({
-        selectedOptionIndex: 0,
-      });
-    }
-  }
-
-  onKeyDown(e) {
-    switch (e.key) {
-      case 'ArrowDown': {
-        // prevent scrolling entire modal body with arrow keys
-        e.preventDefault();
-        if (this.state.selectedOptionIndex < React.Children.count(this.props.children) - 1) {
-          this.setState(state => ({
-            selectedOptionIndex: state.selectedOptionIndex + 1,
-          }));
-        }
-        break;
-      }
-      case 'ArrowUp': {
-        // prevent scrolling entire modal body with arrow keys
-        e.preventDefault();
-
-        if (this.state.selectedOptionIndex > 0) {
-          this.setState(state => ({
-            selectedOptionIndex: state.selectedOptionIndex - 1,
-          }));
-        }
-        break;
-      }
-      default:
-    }
-  }
-
-  renderChildren() {
-    return React.Children.map(this.props.children, (child, index) => React.cloneElement(child, {
-      index,
-      isSelected: index === this.state.selectedOptionIndex,
-      onSelect: () => { this.setState({ selectedOptionIndex: index }); child.props.onSelect(); },
-    }));
-  }
-
-  render() {
-    const {
-      children,
-      className,
-      selectedOptionIndex,
-      tag,
-      ...other
-    } = this.props;
-
-    return React.createElement(
-      this.props.tag,
-      {
-        'aria-activedescendant': this.state.selectedOptionIndex === null ? null : `list-box-option-${this.state.selectedOptionIndex}`,
-        className: classNames(['list-group', this.props.className]),
-        onFocus: this.onFocus,
-        onKeyDown: this.onKeyDown,
-        role: 'listbox',
-        tabIndex: 0,
-        ...other,
-      },
-      this.renderChildren(),
-    );
-  }
-}
-
-ListBox.propTypes = {
-  /** specifies the ListBoxOption component(s) that will be displayed within the ListBox element. You can pass in one or more ListBoxOption components.
- */
-  children: PropTypes.node.isRequired,
-  /** specifies Bootstrap class names to apply to the ListBox component. The default is an empty string. */
-  className: PropTypes.string,
-  /** Although the ListBox component keeps track of which ListBoxOption is selected, `selectedOptionIndex` provides a mechanism for an override, if necessary. An example would be to clear the selectedOption when moving between views. Note that override is not permanent and that clicking on a ListBoxOption or interacting with the ListBox with the keyboard will change the selected ListBoxOption relative to the original override. The default is undefined. */
-  selectedOptionIndex: nonNegativeInteger,
-  /** used to specify the element type of the rendered ListBox component. The default is div. Example alternatives include ol, ul, span, etc. */
-  tag: PropTypes.string,
-};
-
-ListBox.defaultProps = {
-  className: undefined,
-  selectedOptionIndex: undefined,
-  tag: 'div',
-};

package/src/ListBoxOption/ListBoxOption.test.jsx

@@ -1,154 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import ListBoxOption from '.';
-
-describe('ListBoxOption', () => {
-  const listBoxOptionChild = 'test';
-
-  describe('rendering', () => {
-    it('should have false aria-selected attribute by default', () => {
-      render(
-        <ListBoxOption data-testid="listbox-option">{listBoxOptionChild}</ListBoxOption>,
-      );
-
-      const listBoxOptionElement = screen.getByTestId('listbox-option');
-      expect(listBoxOptionElement.getAttribute('aria-selected')).toEqual('false');
-    });
-
-    it('should have false aria-selected attribute when isSelected prop is false', () => {
-      const { rerender } = render(
-        <ListBoxOption data-testid="listbox-option" isSelected={false}>{listBoxOptionChild}</ListBoxOption>,
-      );
-
-      const listBoxOptionElement = screen.getByTestId('listbox-option');
-      expect(listBoxOptionElement.getAttribute('aria-selected')).toEqual('false');
-
-      rerender(
-        <ListBoxOption isSelected>{listBoxOptionChild}</ListBoxOption>,
-      );
-
-      expect(listBoxOptionElement.getAttribute('aria-selected')).toEqual('true');
-    });
-
-    it('should render a div by default', () => {
-      const { container } = render(
-        <ListBoxOption>{listBoxOptionChild}</ListBoxOption>,
-      );
-
-      const listBoxOptionElement = container.querySelector('div');
-      expect(listBoxOptionElement).toBeInTheDocument();
-    });
-
-    it('should render an HTML element when tag prop is an HTML element', () => {
-      const { container } = render(
-        <ListBoxOption tag="li">{listBoxOptionChild}</ListBoxOption>,
-      );
-
-      const listBoxOptionElement = container.querySelector('li');
-      expect(listBoxOptionElement).toBeInTheDocument();
-    });
-
-    it('should have correct default classNames', () => {
-      render(
-        <ListBoxOption data-testid="listbox-option">{listBoxOptionChild}</ListBoxOption>,
-      );
-
-      const listBoxOptionElement = screen.getByTestId('listbox-option');
-      expect(listBoxOptionElement).toHaveClass('list-group-item');
-      expect(listBoxOptionElement).toHaveClass('list-group-item-action');
-    });
-
-    it('should not have active className by default', () => {
-      render(
-        <ListBoxOption data-testid="listbox-option">{listBoxOptionChild}</ListBoxOption>,
-      );
-
-      const listBoxOptionElement = screen.getByTestId('listbox-option');
-      expect(listBoxOptionElement).not.toHaveClass('active');
-    });
-
-    it('should have correct default id', () => {
-      render(
-        <ListBoxOption data-testid="listbox-option">{listBoxOptionChild}</ListBoxOption>,
-      );
-
-      const listBoxOptionElement = screen.getByTestId('listbox-option');
-      expect(listBoxOptionElement.getAttribute('id')).toBeNull();
-    });
-
-    it('should have correct id when index prop is a number', () => {
-      const { rerender } = render(
-        <ListBoxOption data-testid="listbox-option" index={1}>{listBoxOptionChild}</ListBoxOption>,
-      );
-
-      const listBoxOptionElement = screen.getByTestId('listbox-option');
-      expect(listBoxOptionElement.getAttribute('id')).toEqual('list-box-option-1');
-
-      rerender(
-        <ListBoxOption index={2}>{listBoxOptionChild}</ListBoxOption>,
-      );
-
-      expect(listBoxOptionElement.getAttribute('id')).toEqual('list-box-option-2');
-    });
-
-    it('should have option role', () => {
-      render(
-        <ListBoxOption data-testid="listbox-option">{listBoxOptionChild}</ListBoxOption>,
-      );
-
-      const listBoxOptionElement = screen.getByTestId('listbox-option');
-      expect(listBoxOptionElement.getAttribute('role')).toEqual('option');
-    });
-
-    it('should have active className when isSelected prop is true', () => {
-      const { rerender } = render(
-        <ListBoxOption data-testid="listbox-option" isSelected={false}>{listBoxOptionChild}</ListBoxOption>,
-      );
-
-      const listBoxOptionElement = screen.getByTestId('listbox-option');
-      expect(listBoxOptionElement).not.toHaveClass('active');
-
-      rerender(
-        <ListBoxOption isSelected>{listBoxOptionChild}</ListBoxOption>,
-      );
-
-      expect(listBoxOptionElement).toHaveClass('active');
-    });
-  });
-
-  describe('behavior', () => {
-    it('should call onSelect on mouse down', async () => {
-      const onSelectSpy = jest.fn();
-      render(
-        <ListBoxOption data-testid="listbox-option" onSelect={onSelectSpy}>{listBoxOptionChild}</ListBoxOption>,
-      );
-
-      const listBoxOptionElement = screen.getByTestId('listbox-option');
-
-      await userEvent.click(listBoxOptionElement);
-
-      expect(onSelectSpy).toHaveBeenCalledTimes(1);
-    });
-
-    it('should call onSelect when receiving new isSelected prop', async () => {
-      const onSelectSpy = jest.fn();
-      const { rerender } = render(
-        <ListBoxOption data-testid="listbox-option" onSelect={onSelectSpy}>{listBoxOptionChild}</ListBoxOption>,
-      );
-
-      const listBoxOptionElement = screen.getByTestId('listbox-option');
-
-      await userEvent.click(listBoxOptionElement);
-
-      rerender(
-        <ListBoxOption onSelect={onSelectSpy} isSelected>
-          {listBoxOptionChild}
-        </ListBoxOption>,
-      );
-
-      expect(onSelectSpy).toHaveBeenCalledTimes(2);
-    });
-  });
-});

package/src/ListBoxOption/index.jsx

@@ -1,78 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-export default class ListBoxOption extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.onMouseDown = this.onMouseDown.bind(this);
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.props.isSelected && !prevProps.isSelected) {
-      this.props.onSelect();
-    }
-  }
-
-  /**
-   * onMouseDown is used instead of onClick because onClick triggers the focus
-   * event before click event. This focus event bubbles up to the parent
-   * (since onFocus bubbles in React), which triggers the ListBox's onFocus function.
-   * This function will select the first ListBoxOption if one is not selected, and this
-   * causes the user to see the first option selected before their desired option is selected
-   * when the click event is fired shortly thereafter. The mouseDown event occurs before the
-   * focus event, which prevents this behavior.
-   */
-  onMouseDown() {
-    this.props.onSelect();
-  }
-
-  render() {
-    const {
-      children,
-      className,
-      index,
-      isSelected,
-      tag,
-      ...other
-    } = this.props;
-
-    return React.createElement(
-      this.props.tag,
-      {
-        'aria-selected': isSelected,
-        className: classNames(
-          'list-group-item',
-          'list-group-item-action',
-          {
-            active: this.props.isSelected,
-          },
-          className,
-        ),
-        id: index === undefined ? null : `list-box-option-${index}`,
-        onMouseDown: this.onMouseDown,
-        role: 'option',
-        ...other,
-      },
-      children,
-    );
-  }
-}
-
-ListBoxOption.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  index: PropTypes.number,
-  isSelected: PropTypes.bool,
-  tag: PropTypes.string,
-  onSelect: PropTypes.func,
-};
-
-ListBoxOption.defaultProps = {
-  className: undefined,
-  index: undefined,
-  isSelected: false,
-  tag: 'div',
-  onSelect: () => { },
-};

package/src/Menu/_variables.scss

@@ -1,24 +0,0 @@
-$menu-box-shadow:                                $box-shadow !default;
-$menu-border-radius:                             .25em !default;
-$menu-bg:                                        $white !default;
-$menu-max-height:                                16.813rem !default;
-$menu-item-height:                               3rem !default;
-$menu-item-width:                                19rem !default;
-$menu-item-width-xs:                             13.438rem !default;
-$menu-item-color:                                $body-color !default;
-$menu-item-bg:                                   transparent !default;
-$menu-item-border-color:                         $menu-item-bg !default;
-$menu-item-border-width:                         $btn-border-width !default;
-$menu-item-hover-border:                         $menu-item-bg !default;
-$menu-item-padding-x:                            $btn-padding-x !default;
-$menu-item-padding-y:                            $btn-padding-y !default;
-$menu-item-hover-color:                          $btn-tertiary-color !default;
-$menu-item-hover-border-color:                   $menu-item-bg !default;
-$menu-item-hover-bg:                             $btn-tertiary-hover-bg !default;
-$menu-item-icon-margin-left:                     .25em !default;
-$menu-item-icon-margin-right:                    $menu-item-icon-margin-left !default;
-$menu-item-focus-bg:                             $btn-tertiary-active-bg !default;
-$menu-item-border:                               $menu-item-border-width solid $menu-item-border-color !default;
-$menu-select-btn-link-color:                     $primary-500 !default;
-$menu-select-btn-link-text-decoration-line:      underline !default;
-$menu-select-btn-link-text-decoration-thickness: .125rem !default;

package/src/Modal/README.md

@@ -1,148 +0,0 @@
----
-title: 'Modal'
-type: 'component'
-components:
-- Modal
-categories:
-- Overlays
-status: 'Deprecate soon'
-designStatus: 'Done'
-devStatus: 'To Do'
-notes: |
-  Replaced by ModalDialog.
----
-
-## Example Usage
-
-```jsx live
-class ModalWrapper extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.openModal = this.openModal.bind(this);
-    this.resetModalWrapperState = this.resetModalWrapperState.bind(this);
-
-    this.state = { open: false };
-  }
-
-  openModal() {
-    this.setState({ open: true });
-  }
-
-  resetModalWrapperState() {
-    this.setState({ open: false });
-  }
-
-  render() {
-    return (
-      <div>
-        <Modal
-          open={this.state.open}
-          title="Modal title."
-          body={
-            <div>
-              <p>Enter your e-mail address to receive free cat facts!</p>
-              <InputText
-                name="e-mail"
-                label="E-Mail Address"
-              />
-            </div>
-          }
-          parentSelector={this.props.parentSelector}
-          onClose={this.resetModalWrapperState}
-          buttons={[
-            <Button variant="success" data-autofocus>Green button!</Button>
-          ]}
-        />
-        <Button
-          onClick={this.openModal}
-          variant="light"
-        >
-          Click me to open a modal!
-        </Button>
-      </div>
-    );
-  }
-}
-```
-
-## configurable buttons
-
-```jsx
-<Modal
-  open
-  title="Modal title."
-  body="Modal body."
-  buttons={[
-    <Button variant="primary">Blue button!</Button>,
-    {
-      label: 'Red button!',
-      buttonType: 'danger',
-    },
-    <Button variant="success">Green button!</Button>,
-  ]}
-  onClose={() => {}}
-/>
-```
-
-## configurable title and body
-
-```jsx
-<Modal
-  open
-  title="Custom title!"
-  body="Custom body!"
-  buttons={[
-    <Button variant="dark">Dark button!</Button>
-  ]}
-  onClose={() => {}}
-/>
-```
-
-## configurable buttons that perform actions
-
-```jsx
-<Modal
-  open
-  title="Modal title."
-  body="Modal body."
-  buttons={[
-    <Button
-      variant="light"
-      onClick={action('button-click')}
-    >
-      Click me and check the console!
-    </Button>,
-  ]}
-  onClose={() => {}}
-/>
-```
-
-## configurable close button string
-
-```jsx
-<Modal
-  open
-  title="Modal title."
-  body="Modal body."
-  closeText="SHOO!"
-  onClose={() => {}}
-/>
-```
-
-## configurable close button element
-
-```jsx
-<Modal
-  open
-  title="Modal title."
-  body="Modal body."
-  closeText={
-    <Icon
-      className="fa fa-ship"
-      screenReaderText="Close"
-    />
-  }
-  onClose={() => {}}
-/>
-```

package/src/Modal/_variables.scss

@@ -1,50 +0,0 @@
-// Modals
-
-// Padding applied to the modal body
-$modal-inner-padding:               1.5rem !default;
-$modal-inner-padding-bottom:        .7rem !default;
-
-// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
-$modal-footer-margin-between:       .5rem !default;
-
-$modal-dialog-margin:               1.5rem !default;
-$modal-dialog-margin-y-sm-up:       1.75rem !default;
-
-$modal-title-line-height:           $line-height-base !default;
-
-$modal-content-color:               null !default;
-$modal-content-bg:                  $white !default;
-$modal-content-border-color:        rgba($black, .2) !default;
-$modal-content-border-width:        0 !default;
-$modal-content-border-radius:       $border-radius-lg !default;
-$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
-$modal-content-box-shadow-xs:       0 .25rem .5rem rgba($black, .5) !default;
-$modal-content-box-shadow-sm-up:    0 10px 20px rgba($black, .15), 0 8px 20px rgba($black, .15) !default;
-
-$modal-backdrop-bg:                 $black !default;
-$modal-backdrop-opacity:            .5 !default;
-$modal-header-border-color:         $border-color !default;
-$modal-footer-border-color:         $modal-header-border-color !default;
-$modal-header-border-width:         $modal-content-border-width !default;
-$modal-footer-border-width:         $modal-header-border-width !default;
-$modal-header-padding-y:            1rem !default;
-$modal-header-padding-x:            1.5rem !default;
-$modal-close-container-top:         .625rem !default;
-
-// Keep this for backwards compatibility
-$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default;
-$modal-footer-padding-y:            1rem !default;
-$modal-footer-padding-x:            1.5rem !default;
-
-// Keep this for backwards compatibility
-$modal-footer-padding:              $modal-footer-padding-y $modal-footer-padding-x !default;
-
-$modal-xl:                          1140px !default;
-$modal-lg:                          800px !default;
-$modal-md:                          500px !default;
-$modal-sm:                          400px !default;
-
-$modal-fade-transform:              translate(0, -50px) !default;
-$modal-show-transform:              none !default;
-$modal-transition:                  transform .3s ease-out !default;
-$modal-scale-transform:             scale(1.02) !default;