@openedx/paragon 22.6.0 → 23.0.0-alpha.2

package/src/ListBox/ListBox.test.jsx

@@ -1,161 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import ListBox from '.';
-import ListBoxOption from '../ListBoxOption';
-
-describe('ListBox', () => {
-  beforeEach(() => {
-    render(
-      <ListBox>
-        <ListBoxOption>test1</ListBoxOption>
-        <ListBoxOption>test2</ListBoxOption>
-        <ListBoxOption>test3</ListBoxOption>
-      </ListBox>,
-    );
-  });
-
-  it('should have null aria-activedescendant attribute by default', () => {
-    const listBoxElement = screen.getByRole('listbox');
-    expect(listBoxElement.getAttribute('aria-activedescendant')).toBeNull();
-  });
-
-  it(
-    'should have correct aria-activedescendant attribute when selectedOptionIndex state is non-null',
-    async () => {
-      const listBoxElement = screen.getByRole('listbox');
-      const selectedOptionIndex = 1;
-
-      listBoxElement.focus();
-
-      await userEvent.keyboard('{arrowdown}');
-
-      expect(listBoxElement.getAttribute('aria-activedescendant')).toEqual(`list-box-option-${selectedOptionIndex}`);
-    },
-  );
-
-  it('selectedOptionIndex prop should override selectedOptionIndex state', async () => {
-    const listBoxElement = screen.getByRole('listbox');
-    const selectedOptionIndex = 2;
-
-    listBoxElement.focus();
-
-    await userEvent.keyboard('{arrowdown}');
-    await userEvent.keyboard('{arrowdown}');
-
-    expect(listBoxElement.getAttribute('aria-activedescendant')).toEqual(`list-box-option-${selectedOptionIndex}`);
-  });
-
-  it('should render a div by default', () => {
-    const listBoxElement = screen.getByRole('listbox');
-    expect(listBoxElement.tagName.toLowerCase()).toBe('div');
-  });
-
-  it('should render an HTML element when passed tag prop is an HTML element', () => {
-    const { container } = render(
-      <ListBox tag="li">
-        <ListBoxOption>test1</ListBoxOption>
-      </ListBox>,
-    );
-    const listBoxElement = container.querySelector('li');
-    expect(listBoxElement).toBeInTheDocument();
-  });
-
-  it('should have correct default classNames', () => {
-    const listBoxElement = screen.getByRole('listbox');
-    expect(listBoxElement).toHaveClass('list-group');
-  });
-
-  it('should have listbox role', () => {
-    const listBoxElement = screen.getByRole('listbox');
-    expect(listBoxElement).toHaveAttribute('role', 'listbox');
-  });
-
-  it('should have 0 tabIndex', () => {
-    const listBoxElement = screen.getByRole('listbox');
-    expect(listBoxElement).toHaveAttribute('tabIndex', '0');
-  });
-
-  it('should select first ListBoxOption on focus if not ListBoxOption selected', async () => {
-    const listBoxElement = screen.getByRole('listbox');
-
-    listBoxElement.focus();
-
-    expect(listBoxElement.getAttribute('aria-activedescendant')).toEqual('list-box-option-0');
-  });
-
-  it('should not select first ListBoxOption on focus if ListBoxOption selected', async () => {
-    const listBoxElement = screen.getByRole('listbox');
-
-    listBoxElement.focus();
-
-    await userEvent.keyboard('{arrowdown}');
-
-    listBoxElement.focus();
-
-    expect(listBoxElement.getAttribute('aria-activedescendant')).toEqual('list-box-option-1');
-  });
-
-  it('should select next ListBoxOption on down arrow key', async () => {
-    const listBoxElement = screen.getByRole('listbox');
-
-    listBoxElement.focus();
-
-    await userEvent.keyboard('{arrowdown}');
-
-    expect(listBoxElement.getAttribute('aria-activedescendant')).toEqual('list-box-option-1');
-  });
-
-  it('should not select next ListBoxOption on down arrow key if at end of list', async () => {
-    const listBoxElement = screen.getByRole('listbox');
-
-    listBoxElement.focus();
-
-    await userEvent.keyboard('{arrowdown}');
-    await userEvent.keyboard('{arrowdown}');
-    await userEvent.keyboard('{arrowdown}');
-
-    expect(listBoxElement.getAttribute('aria-activedescendant')).toEqual('list-box-option-2');
-  });
-
-  it('should select previous ListBoxOption on up arrow key', async () => {
-    const listBoxElement = screen.getByRole('listbox');
-
-    listBoxElement.focus();
-
-    await userEvent.keyboard('{arrowdown}');
-    await userEvent.keyboard('{arrowup}');
-
-    expect(listBoxElement.getAttribute('aria-activedescendant')).toEqual('list-box-option-0');
-  });
-
-  it('should not select previous ListBoxOption on up arrow key if at start of list', async () => {
-    const listBoxElement = screen.getByRole('listbox');
-
-    listBoxElement.focus();
-
-    await userEvent.keyboard('{arrowup}');
-
-    expect(listBoxElement.getAttribute('aria-activedescendant')).toEqual('list-box-option-0');
-  });
-
-  it('should not change ListBoxOption selection on non-supported key', async () => {
-    const listBoxElement = screen.getByRole('listbox');
-
-    listBoxElement.focus();
-
-    await userEvent.keyboard('{leftarrow}');
-
-    expect(listBoxElement.getAttribute('aria-activedescendant')).toEqual('list-box-option-0');
-  });
-
-  it('should update state when child\'s onSelect is called', async () => {
-    const listBoxElement = screen.getByRole('listbox');
-    const listBoxOption2 = screen.getAllByRole('option')[1];
-
-    await userEvent.click(listBoxOption2);
-
-    expect(listBoxElement.getAttribute('aria-activedescendant')).toEqual('list-box-option-1');
-  });
-});

package/src/ListBox/README.md

@@ -1,185 +0,0 @@
----
-title: 'ListBox'
-type: 'component'
-components:
-- ListBox
-- ListBoxOption
-categories:
-- Forms (deprecated)
-status: 'Deprecate Soon'
-designStatus: 'TBD'
-devStatus: 'To Do'
-notes: 'Not used anywhere in code on Github. Consult design.'
----
-
-## basic usage
-
-```jsx live
-<ListBox>
-  <ListBoxOption>
-    Apple
-  </ListBoxOption>
-  <ListBoxOption>
-    Orange
-  </ListBoxOption>
-  <ListBoxOption>
-    Strawberry
-  </ListBoxOption>
-  <ListBoxOption>
-    Banana
-  </ListBoxOption>
-</ListBox>
-```
-
-## using tag prop
-
-```jsx live
-<React.Fragment>
-  <div>This is an ordered list!</div>
-  <ListBox tag="ol">
-    <ListBoxOption tag="li">
-      Apple
-    </ListBoxOption>
-    <ListBoxOption tag="li">
-      <div>Orange</div>
-    </ListBoxOption>
-    <ListBoxOption tag="li">
-      Strawberry
-    </ListBoxOption>
-    <ListBoxOption tag="li">
-      Banana
-    </ListBoxOption>
-  </ListBox>
-</React.Fragment>
-```
-
-## using onSelect prop
-
-```jsx live
-class ListBoxWrapperForOnSelect extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.onSelect = this.onSelect.bind(this);
-
-    this.state = {
-      selectedOption: null,
-      selectedOptionIndex: null,
-    };
-
-    this.fruits = {
-      Apple: '🍎',
-      Orange: '🍊',
-      Strawberry: '🍓',
-      Banana: '🍌',
-    };
-  }
-
-  onSelect(option, index) {
-    this.setState({
-      selectedOption: option,
-      selectedOptionIndex: index,
-    });
-  }
-
-  getSelectedFruitEmoji(fruit) {
-    return fruit ? this.fruits[fruit] : '';
-  }
-
-  render() {
-    const children = Object.keys(this.fruits).map((fruit, index) => (
-      <ListBoxOption
-        key={fruit}
-        onSelect={() => this.onSelect(fruit, index)}
-        style={{ textAlign: 'center' }}
-      >
-        {fruit}
-      </ListBoxOption>
-    ));
-
-    return (
-      <React.Fragment>
-        <span aria-live="polite">
-          Selected Fruit:
-          {this.state.selectedOptionIndex === undefined ? (
-            <span className="sr-only">none</span>
-          ) : (
-            <span
-              arialabelledby={`list-box-option-${
-                this.state.selectedOptionIndex
-              }`}
-            >
-              {this.getSelectedFruitEmoji(this.state.selectedOption)}
-            </span>
-          )}
-        </span>
-        <ListBox style={{ width: '200px' }}>
-          {children}
-        </ListBox>
-      </React.Fragment>
-    );
-  }
-}
-```
-
-## using selectedOptionIndex prop
-
-```jsx live
-class ListBoxWrapperForSelectedOptionIndex extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.onSelect = this.onSelect.bind(this);
-    this.onButtonClick = this.onButtonClick.bind(this);
-
-    this.state = {
-      reset: true,
-    };
-
-    this.fruits = Object.keys({
-      Apple: '🍎',
-      Orange: '🍊',
-      Strawberry: '🍓',
-      Banana: '🍌',
-    });
-  }
-
-  onButtonClick() {
-    this.setState({
-      reset: true,
-    });
-  }
-
-  onSelect() {
-    this.setState({
-      reset: false,
-    });
-  }
-
-  render() {
-    const children = this.fruits.map(fruit => (
-      <ListBoxOption
-        key={fruit}
-        onSelect={this.onSelect}
-        style={{ textAlign: 'center' }}
-      >
-        {fruit}
-      </ListBoxOption>
-    ));
-
-    return (
-      <React.Fragment>
-        <Button variant="primary" onClick={this.onButtonClick}>
-          Click me to reset your selected fruit!
-        </Button>
-        <ListBox
-          selectedOptionIndex={this.state.reset ? null : undefined}
-          style={{ margin: '10px' }}
-        >
-          {children}
-        </ListBox>
-      </React.Fragment>
-    );
-  }
-}
-```

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: () => { },
-};