@openedx/paragon 22.6.0 → 23.0.0-alpha.2

package/src/CheckBox/CheckBox.test.jsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import CheckBox from '.';
-
-describe('<CheckBox />', () => {
-  it('attributes are set correctly', () => {
-    render(<CheckBox name="checkbox" label="check me out!" />);
-    const checkbox = screen.getByLabelText('check me out!');
-    expect(checkbox).toBeInTheDocument();
-    expect(checkbox).toHaveAttribute('type', 'checkbox');
-    expect(checkbox).not.toBeChecked();
-    expect(checkbox).toHaveAttribute('aria-checked', 'false');
-  });
-
-  it('aria-label changes after click', async () => {
-    render(<CheckBox name="checkbox" label="check me out!" />);
-    const checkbox = screen.getByLabelText('check me out!');
-    expect(checkbox).toHaveAttribute('aria-checked', 'false');
-    await userEvent.click(checkbox);
-    expect(checkbox).toHaveAttribute('aria-checked', 'true');
-    await userEvent.click(checkbox);
-    expect(checkbox).toHaveAttribute('aria-checked', 'false');
-  });
-
-  it('check that callback function is triggered when clicked', async () => {
-    const onChangeSpy = jest.fn();
-    render(<CheckBox name="checkbox" label="check me out!" onChange={onChangeSpy} />);
-    const checkbox = screen.getByLabelText('check me out!');
-    expect(onChangeSpy).toHaveBeenCalledTimes(0);
-    await userEvent.click(checkbox);
-    expect(onChangeSpy).toHaveBeenCalledTimes(1);
-    expect(onChangeSpy).toHaveBeenCalledWith(true, 'checkbox');
-    await userEvent.click(checkbox);
-    expect(onChangeSpy).toHaveBeenCalledTimes(2);
-    expect(onChangeSpy).toHaveBeenCalledWith(false, 'checkbox');
-  });
-
-  it('checks if start state can be set to checked', async () => {
-    render(<CheckBox name="checkbox" label="I start checked" checked />);
-    const checkbox = screen.getByLabelText('I start checked');
-    expect(checkbox).toBeChecked();
-    expect(checkbox).toHaveAttribute('aria-checked', 'true');
-    await userEvent.click(checkbox);
-    expect(checkbox).not.toBeChecked();
-    expect(checkbox).toHaveAttribute('aria-checked', 'false');
-  });
-
-  it('checkbox can be disabled', async () => {
-    render(<CheckBox name="checkbox" label="I am disabled" disabled />);
-    const checkbox = screen.getByLabelText('I am disabled');
-    expect(checkbox).toBeDisabled();
-    await userEvent.click(checkbox);
-    expect(checkbox).toBeDisabled();
-  });
-
-  it('overrides state value when props value changes', () => {
-    const { rerender } = render(<CheckBox name="checkbox" label="I start checked" checked />);
-    const checkbox = screen.getByLabelText('I start checked');
-    expect(checkbox).toBeChecked();
-    rerender(<CheckBox name="checkbox" label="I start checked" checked={false} />);
-    expect(checkbox).not.toBeChecked();
-  });
-});

package/src/CheckBox/README.md

@@ -1,93 +0,0 @@
----
-title: 'Checkbox'
-type: 'component'
-components:
-- Check
-categories:
-- Forms (deprecated)
-status: 'Deprecate Soon'
-designStatus: 'TBD'
-devStatus: 'Done'
-notes: |
-  Replaced by Form.Checkbox
----
-
-## Basic usage
-
-```jsx live
-<CheckBox
-  name="checkbox"
-  label="check me out!"
-/>
-```
-
-## Disabled
-
-```jsx live
-<CheckBox
-  name="checkbox"
-  label="you cannot check me out"
-  disabled
-/>
-```
-
-## Default checked
-
-```jsx live
-<CheckBox
-  name="checkbox"
-  label="(un)check me out"
-  checked
-/>
-```
-
-## Call a function
-
-```jsx live
-<CheckBox
-  name="checkbox"
-  label="check out the console"
-  onChange={() => console.log('the checkbox changed state')}
-/>
-```
-
-## Controlled example
-
-```jsx live
-class CheckBoxWrapper extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.toggleCheckBox = this.toggleCheckBox.bind(this);
-
-    this.state = {
-      checked: false,
-    };
-  }
-
-  toggleCheckBox() {
-    this.setState({
-      checked: !this.state.checked,
-    });
-  }
-
-  render() {
-    return (
-      <div className="d-flex align-items-center">
-        <Button
-          variant="light"
-          className="mr-3"
-          onClick={this.toggleCheckBox}
-        >
-          Click me to toggle the check box!
-        </Button>
-        <CheckBox
-          name="checkbox"
-          label="click the button"
-          checked={this.state.checked}
-        />
-      </div>
-    );
-  }
-}
-```

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;