@openedx/paragon 22.4.0 → 23.0.0-alpha.1

package/src/CheckBox/index.jsx

@@ -1,80 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import asInput from '../asInput';
-import withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';
-
-class Check extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.onChange = this.onChange.bind(this);
-
-    this.state = {
-      checked: props.checked || false,
-    };
-  }
-
-  /* eslint-disable react/no-did-update-set-state */
-  componentDidUpdate(prevProps) {
-    if (prevProps.checked !== this.props.checked) {
-      this.setState({
-        checked: this.props.checked,
-      });
-    }
-  }
-
-  onChange(event) {
-    this.setState(prevState => ({
-      checked: !prevState.checked,
-    }));
-    this.props.onChange(event);
-  }
-
-  render() {
-    const {
-      inputRef,
-      ...others
-    } = this.props;
-    return (
-      <input
-        {...others}
-        type="checkbox"
-        ref={inputRef}
-        checked={this.state.checked}
-        aria-checked={this.state.checked}
-        onChange={this.onChange}
-      />
-    );
-  }
-}
-
-Check.propTypes = {
-  // eslint-disable-next-line max-len
-  /** (`Boolean`): `true` if the state should be checked, `false` otherwise. This prop can be used to manage the Checkbox more directly, overriding the default Checkbox checked state. */
-  checked: PropTypes.bool,
-  /** (`Boolean`): `true` if the checkbox should be disabled, `false` otherwise */
-  onChange: PropTypes.func,
-  /** function to be called when the checkbox changes state */
-  inputRef: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.shape({ current: PropTypes.instanceOf(PropTypes.element) }),
-  ]),
-};
-
-Check.defaultProps = {
-  checked: false,
-  onChange: () => {},
-  inputRef: undefined,
-};
-
-const CheckBox = asInput(withDeprecatedProps(Check, 'Checkbox', {
-  className: {
-    deprType: DeprTypes.FORMAT,
-    expect: value => typeof value === 'string',
-    transform: value => (Array.isArray(value) ? value.join(' ') : value),
-    message: 'It should be a string.',
-  },
-}), 'checkbox', false);
-
-export default CheckBox;

package/src/CheckBoxGroup/CheckBoxGroup.test.jsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import CheckBoxGroup from '.';
-import CheckBox from '../CheckBox';
-
-describe('<CheckBoxGroup />', () => {
-  it('correct number of children displayed in group', () => {
-    const checkBoxGroup = (
-      <CheckBoxGroup>
-        <CheckBox
-          id="checkbox1"
-          name="basicCheckBox"
-          label="CheckBox 1"
-        />
-        <CheckBox
-          id="checkbox2"
-          name="basicCheckBox"
-          label="CheckBox 2"
-        />
-        <CheckBox
-          id="checkbox3"
-          name="basicCheckBox"
-          label="CheckBox 3"
-        />
-      </CheckBoxGroup>
-    );
-    const { getByLabelText } = render(checkBoxGroup);
-
-    expect(getByLabelText('CheckBox 1')).toBeInTheDocument();
-    expect(getByLabelText('CheckBox 2')).toBeInTheDocument();
-    expect(getByLabelText('CheckBox 3')).toBeInTheDocument();
-  });
-});

package/src/CheckBoxGroup/README.md

@@ -1,35 +0,0 @@
----
-title: 'CheckBoxGroup'
-type: 'component'
-components:
-- CheckBoxGroup
-categories:
-- Forms (deprecated)
-status: 'Deprecate Soon'
-designStatus: 'To Do'
-devStatus: 'To Do'
-notes: |
-  Replaced by Form.Checkbox and Form.CheckboxSet
----
-
-## Basic Usage
-
-```jsx live
-<CheckBoxGroup>
-  <CheckBox
-    id="checkbox1"
-    name="basicCheckBox1"
-    label="CheckBox 1"
-  />
-  <CheckBox
-    id="checkbox2"
-    name="basicCheckBox2"
-    label="CheckBox 2"
-  />
-  <CheckBox
-    id="checkbox3"
-    name="basicCheckBox3"
-    label="CheckBox 3"
-  />
-</CheckBoxGroup>
-```

package/src/CheckBoxGroup/index.jsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-function CheckBoxGroup(props) {
-  return (
-    <div className="form-group">
-      {props.children}
-    </div>
-  );
-}
-
-CheckBoxGroup.propTypes = {
-  // eslint-disable-next-line max-len
-  /** represents the CheckBox components defined within the CheckBoxGroup component and is not a specific named prop that needs to be passed in. At least one CheckBox must be defined within the group. Example: `<CheckBoxGroup><CheckBox .../></CheckBoxGroup>`
-   */
-  children: PropTypes.arrayOf(PropTypes.element).isRequired,
-};
-
-export default CheckBoxGroup;

package/src/Chip/_variables.scss

@@ -1,28 +0,0 @@
-$chip-padding-x:                            .5rem !default;
-$chip-padding-y:                            1px !default;
-$chip-icon-margin:                          .25rem !default;
-$chip-margin:                               .125rem !default;
-$chip-border-radius:                        .375rem !default;
-$chip-disable-opacity:                      .3 !default;
-$chip-icon-size:                            1.5rem !default;
-$chip-label-color:                          $primary-700 !default;
-$chip-border-color:                         $light-800 !default;
-$chip-outline-width:                        3px !default;
-$chip-light-bg-color:                       $white !default;
-$chip-light-outline-color:                  $chip-label-color !default;
-$chip-light-selected-outline-distance:      3px !default;
-$chip-light-selected-focus-border-color:    $dark-500 !default;
-$chip-light-hover-bg:                       $dark-500 !default;
-$chip-light-hover-border-color:             $chip-light-hover-bg !default;
-$chip-light-hover-label-color:              $chip-light-bg-color !default;
-$chip-light-hover-icon-color:               $chip-light-hover-label-color !default;
-$chip-light-focus-outline-distance:         .313rem !default;
-$chip-dark-bg:                              $primary-300 !default;
-$chip-dark-outline-color:                   $white !default;
-$chip-dark-selected-outline-distance:       3px !default;
-$chip-dark-selected-focus-border-color:     $chip-dark-outline-color !default;
-$chip-dark-label-color:                     $chip-dark-outline-color !default;
-$chip-dark-hover-bg:                        $white !default;
-$chip-dark-hover-border-color:              $chip-dark-hover-bg !default;
-$chip-dark-hover-label-color:               $primary-500 !default;
-$chip-dark-focus-outline-distance:          .313rem !default;

package/src/ChipCarousel/_variables.scss

@@ -1,3 +0,0 @@
-$chip-carousel-controls-top-offset:    .375rem !default;
-$chip-carousel-container-padding-x:    .625rem !default;
-$chip-carousel-container-padding-y:    .313rem !default;

package/src/CloseButton/_variables.scss

@@ -1,6 +0,0 @@
-// Close
-
-$close-font-size:                   $font-size-base * 1.5 !default;
-$close-font-weight:                 $font-weight-bold !default;
-$close-color:                       $black !default;
-$close-text-shadow:                 0 1px 0 $white !default;

package/src/Code/_variables.scss

@@ -1,17 +0,0 @@
-// Code
-
-$code-font-size:                    87.5% !default;
-$code-color:                        #E83E8C !default;
-
-$kbd-box-shadow:              inset 0 -.1rem 0 rgba($black, .25) !default;
-$nested-kbd-font-weight:      $font-weight-bold !default;
-
-// HTML Keyboard Input element (<kbd>) styles
-$kbd-padding-y:                     .2rem !default;
-$kbd-padding-x:                     .4rem !default;
-$kbd-font-size:                     $code-font-size !default;
-$kbd-color:                         $white !default;
-$kbd-bg:                            theme-color("gray", "hover") !default;
-
-$pre-color:                         theme-color("gray", "dark-text") !default;
-$pre-scrollable-max-height:         340px !default;

package/src/Collapsible/_variables.scss

@@ -1,12 +0,0 @@
-// Collapsible
-
-$collapsible-card-spacer-y:               .5rem !default;
-$collapsible-card-spacer-x:               .5rem !default;
-$collapsible-card-spacer-y-lg:         $card-spacer-y !default;
-$collapsible-card-spacer-x-lg:         $card-spacer-x !default;
-$collapsible-card-body-spacer-left:        .75rem !default;
-$collapsible-card-spacer-icon:             2.5rem !default;
-
-$collapsible-basic-spacer-y:               .5rem !default;
-$collapsible-basic-spacer-x:               .5rem !default;
-$collapsible-basic-spacer-icon:            .625rem !default;

package/src/ColorPicker/_variables.scss

@@ -1,2 +0,0 @@
-$picker-size-sm:                     2rem !default;
-$picker-size-md:                     calc(1.3333em + 1.125rem + 2px) !default;

package/src/Container/_variables.scss

@@ -1,5 +0,0 @@
-$max-width-xs: 464px !default;
-$max-width-sm: 708px !default;
-$max-width-md: 952px !default;
-$max-width-lg: 1192px !default;
-$max-width-xl: 1440px !default;

package/src/DataTable/_variables.scss

@@ -1,11 +0,0 @@
-$data-table-background-color: $white !default;
-$data-table-border: 2px solid $light-300 !default;
-$data-table-box-shadow: $box-shadow-sm !default;
-$data-table-padding-x: .75rem !default;
-$data-table-padding-y: .75rem !default;
-$data-table-padding-small: .5rem !default;
-$data-table-cell-padding: .5rem .75rem !default;
-$data-table-footer-position: center !default;
-$data-table-pagination-dropdown-max-height: 60vh !default;
-$data-table-pagination-dropdown-min-width: 6rem !default;
-$data-table-layout-sidebar-width: 12rem !default;

package/src/Dropdown/_variables.scss

@@ -1,33 +0,0 @@
-// Dropdowns
-//
-// Dropdown menu container and contents.
-
-$dropdown-min-width:                18rem !default;
-$dropdown-padding-x:                0 !default;
-$dropdown-padding-y:                .5rem !default;
-$dropdown-spacer:                   .125rem !default;
-$dropdown-font-size:                $font-size-base !default;
-$dropdown-color:                    $body-color !default;
-$dropdown-bg:                       $white !default;
-$dropdown-border-color:             rgba($black, .15) !default;
-$dropdown-border-radius:            $border-radius !default;
-$dropdown-border-width:             $border-width !default;
-$dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
-$dropdown-divider-bg:               theme-color("gray", "background") !default;
-$dropdown-divider-margin-y:         calc($spacer / 2) !default;
-$dropdown-box-shadow:               0 .5rem 1rem rgba($black, .175) !default;
-
-$dropdown-link-color:               theme-color("gray", "dark-text") !default;
-$dropdown-link-hover-color:         darken(theme-color("gray", "dark-text"), 5%) !default;
-$dropdown-link-hover-bg:            $light-300 !default;
-
-$dropdown-link-active-color:        $component-active-color !default;
-$dropdown-link-active-bg:           $component-active-bg !default;
-
-$dropdown-link-disabled-color:      theme-color("gray", "light-text") !default;
-
-$dropdown-item-padding-y:           .25rem !default;
-$dropdown-item-padding-x:           1rem !default;
-
-$dropdown-header-color:             theme-color("gray", "light-text") !default;
-$dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x !default;

package/src/Dropdown/deprecated/Dropdown.test.jsx

@@ -1,238 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import renderer from 'react-test-renderer';
-import userEvent from '@testing-library/user-event';
-
-import Dropdown from './index';
-import Icon from '../../Icon';
-
-const menuContent = (
-  <>
-    <Dropdown.Button>
-      Search Engines
-    </Dropdown.Button>
-    <Dropdown.Menu>
-      <Dropdown.Item href="https://google.com">Google</Dropdown.Item>
-      <Dropdown.Item href="https://duckduckgo.com">DuckDuckGo</Dropdown.Item>
-      <Dropdown.Item href="https://yahoo.com">Yahoo</Dropdown.Item>
-    </Dropdown.Menu>
-  </>
-);
-
-const menuOpen = (isOpen, wrapper) => {
-  expect(wrapper.container.querySelector('.dropdown').classList.contains('show')).toBe(isOpen);
-  expect(wrapper.getByRole('button', { name: 'Search Engines' })).toHaveAttribute('aria-expanded', isOpen ? 'true' : 'false');
-};
-
-describe('<Dropdown />', () => {
-  describe('Rendering', () => {
-    it('renders the happy path', () => {
-      const tree = renderer.create((
-        <Dropdown>
-          {menuContent}
-        </Dropdown>
-      )).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    it('renders when there is html content in the trigger button', () => {
-      const tree = renderer.create((
-        <Dropdown>
-          {menuContent}
-        </Dropdown>
-      )).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    it('renders with custom menu content', () => {
-      const tree = renderer.create((
-        <Dropdown>
-          Custom Content
-        </Dropdown>
-      )).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-  });
-
-  describe('Mouse Interactions', () => {
-    let wrapper;
-
-    beforeEach(() => {
-      wrapper = render(<Dropdown>{menuContent}</Dropdown>);
-    });
-
-    it('opens on trigger click', async () => {
-      await userEvent.click(wrapper.getByRole('button', { name: 'Search Engines' }));
-      menuOpen(true, wrapper);
-    });
-
-    it('should focus on the first item after opening', async () => {
-      await userEvent.click(wrapper.getByRole('button', { name: 'Search Engines' }));
-      expect(wrapper.getByText('Google')).toHaveFocus();
-    });
-
-    it('does not close on click inside the menu', async () => {
-      await userEvent.click(wrapper.getByRole('button', { name: 'Search Engines' }));
-      await userEvent.click(wrapper.getByText('Google')); // Do nothing
-      menuOpen(true, wrapper);
-    });
-
-    it('closes on trigger click', async () => {
-      await userEvent.click(wrapper.getByRole('button', { name: 'Search Engines' }));
-      await userEvent.click(wrapper.getByRole('button', { name: 'Search Engines' })); // Close
-      menuOpen(false, wrapper);
-    });
-
-    it('should focus on the trigger button after closing', async () => {
-      await userEvent.click(wrapper.getByRole('button', { name: 'Search Engines' }));
-      await userEvent.click(wrapper.getByRole('button', { name: 'Search Engines' })); // Close
-      expect(wrapper.getByRole('button', { name: 'Search Engines' })).toHaveFocus();
-    });
-
-    it('closes on document click when open', async () => {
-      await userEvent.click(wrapper.getByRole('button', { name: 'Search Engines' }));
-      menuOpen(true, wrapper);
-      document.dispatchEvent(new MouseEvent('click'));
-      menuOpen(false, wrapper);
-    });
-  });
-
-  describe('Keyboard Interactions', () => {
-    let wrapper;
-
-    beforeEach(() => {
-      wrapper = render(<Dropdown>{menuContent}</Dropdown>);
-    });
-
-    it('opens on Enter keyDown', async () => {
-      wrapper.getByRole('button', { name: 'Search Engines' }).focus();
-      await userEvent.keyboard('{Enter}');
-      menuOpen(true, wrapper);
-    });
-
-    it('opens on Space keyDown', async () => {
-      wrapper.getByRole('button', { name: 'Search Engines' }).focus();
-      await userEvent.keyboard('{space}');
-      menuOpen(true, wrapper);
-    });
-
-    it('should focus on the first item after opening', async () => {
-      wrapper.getByRole('button', { name: 'Search Engines' }).focus();
-      await userEvent.keyboard('{Enter}');
-      expect(wrapper.getByText('Google')).toHaveFocus();
-    });
-
-    it('should focus the next item after ArrowDown keyDown', async () => {
-      wrapper.getByRole('button', { name: 'Search Engines' }).focus();
-      await userEvent.keyboard('{Enter}');
-      await userEvent.keyboard('{arrowdown}');
-      expect(wrapper.getByText('DuckDuckGo')).toHaveFocus();
-    });
-
-    it('should focus the next item after Tab keyDown', async () => {
-      wrapper.getByRole('button', { name: 'Search Engines' }).focus();
-      await userEvent.keyboard('{Enter}');
-      await userEvent.tab();
-      expect(wrapper.getByText('DuckDuckGo')).toHaveFocus();
-    });
-
-    it('should loop focus to the first item after Tab keyDown on last item', async () => {
-      wrapper.getByRole('button', { name: 'Search Engines' }).focus();
-      await userEvent.keyboard('{Enter}');
-      wrapper.getByRole('link', { name: 'Yahoo' }).focus();
-      await userEvent.tab();
-      expect(wrapper.getByText('Google')).toHaveFocus();
-    });
-
-    it('should loop focus to the last item after ArrowUp keyDown on first item', async () => {
-      wrapper.getByRole('button', { name: 'Search Engines' }).focus();
-      await userEvent.keyboard('{Enter}');
-      wrapper.getByRole('link', { name: 'Google' }).focus();
-      await userEvent.keyboard('{arrowup}');
-      expect(wrapper.getByText('Yahoo')).toHaveFocus();
-    });
-
-    it('should focus the previous item after Shift + Tab keyDown', async () => {
-      wrapper.getByRole('button', { name: 'Search Engines' }).focus();
-      await userEvent.keyboard('{Enter}');
-      wrapper.getByRole('link', { name: 'Yahoo' }).focus();
-      await userEvent.keyboard('{Shift>}{Tab}');
-      expect(wrapper.getByText('DuckDuckGo')).toHaveFocus();
-    });
-
-    it('should close the menu on Escape keyDown', async () => {
-      wrapper.getByRole('button', { name: 'Search Engines' }).focus();
-      await userEvent.keyboard('{Enter}');
-      await userEvent.keyboard('{escape}');
-      menuOpen(false, wrapper);
-    });
-
-    it('should focus on the trigger button after closing', async () => {
-      wrapper.getByRole('button', { name: 'Search Engines' }).focus();
-      await userEvent.keyboard('{Enter}');
-      await userEvent.keyboard('{escape}');
-      expect(wrapper.getByRole('button', { name: 'Search Engines' })).toHaveFocus();
-    });
-  });
-
-  it('renders the basic usage', () => {
-    const tree = renderer.create((
-      <Dropdown
-        title="Search Engines"
-        menuItems={[
-          {
-            label: 'Google',
-            href: 'https://google.com',
-          },
-          {
-            label: 'DuckDuckGo',
-            href: 'https://duckduckgo.com',
-          },
-          {
-            label: 'Yahoo',
-            href: 'https://yahoo.com',
-          },
-        ]}
-      />
-    )).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('renders menu items as elements', () => {
-    const tree = renderer.create((
-      <Dropdown
-        title="Search Engines"
-        menuItems={[
-          <a href="http://www.google.com">Google</a>,
-          <a href="http://www.duckduckgo.com">DuckDuckGo</a>,
-          <a href="http://www.yahoo.com">Yahoo</a>,
-        ]}
-      />
-    )).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('renders with icon element', () => {
-    const tree = renderer.create((
-      <Dropdown
-        title="Search Engines"
-        iconElement={<Icon className="fa fa-user px-3" />}
-        menuItems={[
-          {
-            label: 'Google',
-            href: 'https://google.com',
-          },
-          {
-            label: 'DuckDuckGo',
-            href: 'https://duckduckgo.com',
-          },
-          {
-            label: 'Yahoo',
-            href: 'https://yahoo.com',
-          },
-        ]}
-      />
-    )).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

package/src/Dropdown/deprecated/DropdownButton.jsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-// eslint-disable-next-line import/no-cycle
-import { Consumer } from './index';
-
-function DropdownButton({ children, className, ...other }) {
-  return (
-    <Consumer>
-      {({
-        buttonRef,
-        isOpen,
-        toggle,
-        triggerId,
-      }) => (
-        <button
-          {...other}
-          id={classNames(triggerId, other.id)}
-          aria-expanded={isOpen}
-          aria-haspopup
-          type="button"
-          ref={buttonRef}
-          className={classNames(
-            'dropdown-toggle',
-            'btn',
-            className,
-          )}
-          onClick={(e) => {
-            toggle(e);
-            if (other.onClick) {
-              other.onClick(e);
-            }
-          }}
-        >
-          {children}
-        </button>
-      )}
-    </Consumer>
-  );
-}
-
-DropdownButton.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-};
-
-DropdownButton.defaultProps = {
-  children: undefined,
-  className: 'btn-light',
-};
-
-export default DropdownButton;

package/src/Dropdown/deprecated/DropdownItem.jsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-function DropdownItem(props) {
-  const {
-    type, children, className, ...other
-  } = props;
-  return React.createElement(
-    type,
-    {
-      ...other,
-      className: classNames(
-        'dropdown-item',
-        className,
-      ),
-    },
-    children,
-  );
-}
-
-DropdownItem.propTypes = {
-  type: PropTypes.string,
-  children: PropTypes.node,
-  className: PropTypes.string,
-};
-
-DropdownItem.defaultProps = {
-  type: 'a',
-  children: undefined,
-  className: null,
-};
-
-export default DropdownItem;

package/src/Dropdown/deprecated/DropdownMenu.jsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-// eslint-disable-next-line import/no-cycle
-import { Consumer } from './index';
-
-function DropdownMenu({ children, ...other }) {
-  return (
-    <Consumer>
-      {({
-        handleMenuKeyDown,
-        isOpen,
-        menuRef,
-        triggerId,
-      }) => (
-      /* eslint-disable-next-line jsx-a11y/interactive-supports-focus */
-        <div
-          {...other}
-          aria-labelledby={triggerId}
-          aria-hidden={!isOpen}
-          ref={menuRef}
-          role="menu"
-          className={classNames(
-            'dropdown-menu',
-            { show: isOpen },
-            other.className,
-          )}
-          onKeyDown={(e) => {
-            handleMenuKeyDown(e);
-            if (other.onKeyDown) {
-              other.onKeyDown(e);
-            }
-          }}
-        >
-          {children}
-        </div>
-      )}
-    </Consumer>
-  );
-}
-
-DropdownMenu.propTypes = {
-  children: PropTypes.node,
-};
-
-DropdownMenu.defaultProps = {
-  children: undefined,
-};
-
-export default DropdownMenu;