@openedx/paragon 22.4.0 → 23.0.0-alpha.1

package/src/Pagination/_variables.scss

@@ -1,19 +0,0 @@
-// Pagination
-
-$pagination-padding-y:              .625rem !default;
-$pagination-margin-x:               .5rem !default;
-$pagination-line-height:            1.5rem !default;
-$pagination-font-size-sm:           .875rem !default;
-
-$pagination-icon-width:             2.25rem !default;
-$pagination-icon-height:            2.25rem !default;
-$pagination-toggle-border:          .3125rem !default;
-$pagination-toggle-border-sm:       .25rem !default;
-$pagination-secondary-height:       2.75rem !default;
-$pagination-secondary-height-sm:    2.25rem !default;
-
-$pagination-dropdown-color-inverse: $white !default;
-$pagination-border-width:           $border-width !default;
-
-$pagination-reduced-dropdown-max-height: 60vh !default;
-$pagination-reduced-dropdown-min-width: 6rem !default;

package/src/Popover/_variables.scss

@@ -1,36 +0,0 @@
-// Popovers
-
-$popover-font-size:                 $font-size-sm !default;
-$popover-bg:                        $white !default;
-$popover-max-width:                 480px !default;
-$popover-border-width:              $border-width !default;
-$popover-border-color:              rgba($black, .2) !default;
-$popover-border-radius:             $border-radius-sm !default;
-$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;
-$popover-box-shadow:                drop-shadow(0 2px 4px rgba(0, 0, 0, .15))
-  drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default;
-$popover-icon-margin-right:         .5rem;
-$popover-icon-height:               1rem;
-$popover-icon-width:                1rem;
-
-$popover-header-bg:                 $white !default;
-$popover-header-color:              $headings-color !default;
-$popover-header-padding-y:          .5rem !default;
-$popover-header-padding-x:          1rem !default;
-
-$popover-body-color:                $body-color !default;
-$popover-body-padding-y:            $popover-header-padding-y !default;
-$popover-body-padding-x:            $popover-header-padding-x !default;
-
-$popover-arrow-width:               1rem !default;
-$popover-arrow-height:              .5rem !default;
-$popover-arrow-color:               $popover-bg !default;
-
-$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
-
-$popover-success-bg:                $success-100 !default;
-$popover-success-icon-color:        $success-500 !default;
-$popover-warning-bg:                $warning-100 !default;
-$popover-warning-icon-color:        $warning-500 !default;
-$popover-danger-bg:                 $danger-100 !default;
-$popover-danger-icon-color:         $danger-500 !default;

package/src/ProductTour/_variables.scss

@@ -1,15 +0,0 @@
-// Checkpoints
-
-$checkpoint-background-color:       $light-300 !default;
-
-$checkpoint-body-color:             $gray-700;
-
-$checkpoint-border-color:           $brand !default;
-$checkpoint-border-width:           8px !default;
-
-$checkpoint-breadcrumb-color:       $primary !default;
-
-$checkpoint-arrow-width:            15px !default;
-$checkpoint-max-width:              480px !default;
-
-$checkpoint-z-index:                1060 !default;

package/src/ProgressBar/_variables.scss

@@ -1,23 +0,0 @@
-// Progress bars
-
-$progress-height:                   1rem !default;
-$annotated-progress-height:         .3125rem !default;
-$progress-font-size:                $font-size-base * .75 !default;
-$progress-bg:                       transparent !default;
-$progress-border-radius:            0 !default;
-$progress-box-shadow:               none !default;
-$progress-bar-color:                $white !default;
-$progress-bar-bg:                   theme-color("accent-a") !default;
-$annotated-progress-bar-bg:         theme-color("dark") !default;
-$progress-bar-animation-timing:     1s linear infinite !default;
-$progress-bar-transition:           width .6s ease !default;
-$progress-bar-border-width:         1px !default;
-$progress-bar-border-color:         $gray-500 !default;
-$progress-threshold-circle:         .5625rem !default;
-$progress-hint-annotation-gap:      .5rem !default;
-$progress-colors: (
-  "dark":    $primary-500,
-  "success": $success-500,
-  "error":   $danger-500,
-  "warning": $accent-b,
-) !default;

package/src/RadioButtonGroup/README.md

@@ -1,50 +0,0 @@
----
-title: 'RadioButtonGroup'
-type: 'component'
-components:
-- RadioButtonGroup
-categories:
-- Forms (deprecated)
-status: 'Deprecate Soon'
-designStatus: 'To Do'
-devStatus: 'To Do'
-notes: |
-  Replaced by Form.Radio and From.RadioSet
----
-
-## Unselected minimal usage
-
-```jsx live
-<RadioButtonGroup
-  name="rbg"
-  label="Radio Button Group"
-  onBlur={() => console.log('blurred')}
-  onChange={() => console.log('onChange')}
-  onClick={() => console.log('onClick')}
-  onFocus={() => console.log('onFocus')}
-  onKeyDown={() => console.log('onKeyDown')}
->
-  <RadioButton value="jaebaebae">First Value</RadioButton>
-  <RadioButton value="value2">Second Value</RadioButton>
-  <RadioButton value="value3">Third Value</RadioButton>
-</RadioButtonGroup>
-```
-
-## Selected minimal usage
-
-```jsx live
-<RadioButtonGroup
-  name="rbg-2"
-  label="Radio Button Group"
-  onBlur={() => console.log('blurred')}
-  onChange={() => console.log('onChange')}
-  onClick={() => console.log('onClick')}
-  onFocus={() => console.log('onFocus')}
-  onKeyDown={() => console.log('onKeyDown')}
-  selectedIndex={1}
->
-  <RadioButton value="jaebaebae">First Value</RadioButton>
-  <RadioButton value="value2">Second Value</RadioButton>
-  <RadioButton value="value3">Third Value</RadioButton>
-</RadioButtonGroup>
-```

package/src/RadioButtonGroup/RadioButtonGroup.test.jsx

@@ -1,127 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import RadioButtonGroup, { RadioButton } from '.';
-
-describe('<RadioButton />', () => {
-  const text = 'text';
-  const index = 0;
-  const isChecked = false;
-  const name = 'name';
-  const onBlur = jest.fn();
-  const onClick = jest.fn();
-  const onFocus = jest.fn();
-  const onKeyDown = jest.fn();
-  const value = 'value';
-  const props = {
-    index,
-    isChecked,
-    name,
-    onBlur,
-    onClick,
-    onFocus,
-    onKeyDown,
-    value,
-  };
-  describe('correct rendering', () => {
-    it('renders RadioButton', () => {
-      render(
-        <RadioButton {...props}>
-          {text}
-        </RadioButton>,
-      );
-
-      const radioButton = screen.getByRole('radio');
-      expect(radioButton).toBeInTheDocument();
-      expect(radioButton).toHaveAttribute('name', name);
-      expect(radioButton).toHaveAttribute('value', value);
-      expect(radioButton).toHaveAttribute('aria-checked', isChecked.toString());
-      expect(radioButton).toHaveAttribute('data-index', index.toString());
-    });
-  });
-
-  describe('event handlers correctly triggered', () => {
-    let spy;
-
-    beforeEach(() => {
-      spy = jest.fn();
-    });
-
-    afterEach(() => {
-      spy.mockClear();
-    });
-
-    it('should fire onBlur', async () => {
-      render((<RadioButton {...props} onBlur={spy} />));
-      const radioButton = screen.getByRole('radio');
-      radioButton.focus();
-      await userEvent.tab();
-      expect(spy).toHaveBeenCalledTimes(1);
-    });
-    it('should fire onClick', async () => {
-      render((<RadioButton {...props} onClick={spy} />));
-      const radioButton = screen.getByRole('radio');
-      await userEvent.click(radioButton);
-      expect(spy).toHaveBeenCalledTimes(1);
-    });
-    it('should fire onFocus', async () => {
-      render((<RadioButton {...props} onFocus={spy} />));
-      const radioButton = screen.getByRole('radio');
-      radioButton.focus();
-      expect(spy).toHaveBeenCalledTimes(1);
-    });
-    it('should fire onKeyDown', async () => {
-      render((<RadioButton {...props} onKeyDown={spy} />));
-      const radioButton = screen.getByRole('radio');
-      radioButton.focus();
-      await userEvent.keyboard('{enter}');
-      expect(spy).toHaveBeenCalledTimes(1);
-    });
-  });
-});
-
-describe('<RadioButtonGroup />', () => {
-  const firstText = 'firstText';
-  const secondText = 'secondText';
-  const name = 'name';
-  const label = 'label';
-  const onBlur = jest.fn();
-  const onChange = jest.fn();
-  const onClick = jest.fn();
-  const onFocus = jest.fn();
-  const onKeyDown = jest.fn();
-  const firstValue = 'firstValue';
-  const secondValue = 'secondValue';
-  const props = {
-    name,
-    label,
-    onBlur,
-    onChange,
-    onClick,
-    onFocus,
-    onKeyDown,
-  };
-
-  it('renders RadioButtonGroup', () => {
-    render(
-      <RadioButtonGroup {...props}>
-        <RadioButton value={firstValue}>{firstText}</RadioButton>
-        <RadioButton value={secondValue}>{secondText}</RadioButton>
-      </RadioButtonGroup>,
-    );
-
-    const radioButtons = screen.getAllByRole('radio');
-    expect(radioButtons.length).toBe(2);
-
-    radioButtons.forEach((radioButton, index) => {
-      expect(radioButton).toHaveAttribute('name', name);
-      expect(radioButton).toHaveAttribute('value', index === 0 ? firstValue : secondValue);
-    });
-
-    const radioButtonGroupDiv = screen.getByRole('radiogroup');
-    expect(radioButtonGroupDiv).toBeInTheDocument();
-    expect(radioButtonGroupDiv).toHaveAttribute('aria-label', label);
-    expect(radioButtonGroupDiv).toHaveAttribute('tabIndex', '-1');
-  });
-});

package/src/RadioButtonGroup/index.jsx

@@ -1,185 +0,0 @@
-/* eslint-disable react/no-multi-comp, max-classes-per-file, max-len */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-class RadioButton extends React.PureComponent {
-  constructor(props) {
-    super(props);
-
-    const {
-      onBlur,
-      onClick,
-      onFocus,
-      onKeyDown,
-    } = props;
-
-    this.onBlur = onBlur.bind(this);
-    this.onClick = onClick.bind(this);
-    this.onFocus = onFocus.bind(this);
-    this.onKeyDown = onKeyDown.bind(this);
-  }
-
-  render() {
-    const {
-      children,
-      index,
-      isChecked,
-      name,
-      value,
-      ...other
-    } = this.props;
-
-    return (
-      <div>
-        <input
-          type="radio"
-          name={name}
-          aria-checked={isChecked}
-          defaultChecked={isChecked}
-          value={value}
-          aria-label={children}
-          data-index={index}
-          onBlur={this.onBlur}
-          onClick={this.onClick}
-          onFocus={this.onFocus}
-          onKeyDown={this.onKeyDown}
-          {...other}
-        />{children}
-      </div>
-    );
-  }
-}
-
-class RadioButtonGroup extends React.Component {
-  constructor(props) {
-    super();
-    // Bind the method to the component context
-    this.renderChildren = this.renderChildren.bind(this);
-    this.onChange = this.onChange.bind(this);
-
-    this.state = {
-      selectedIndex: props.selectedIndex,
-    };
-  }
-
-  onChange(event) {
-    if (event.target.checked && event.target.hasAttribute('data-index')) {
-      this.setState({
-        selectedIndex: parseInt(event.target.getAttribute('data-index'), 10),
-      });
-    }
-
-    this.props.onChange(event);
-  }
-
-  renderChildren() {
-    const {
-      children,
-      name,
-      onBlur,
-      onClick,
-      onFocus,
-      onKeyDown,
-    } = this.props;
-
-    return React.Children.map((children), (child, index) => React.cloneElement(child, {
-      name,
-      value: child.props.value,
-      isChecked: index === this.state.selectedIndex,
-      onBlur,
-      onClick,
-      onFocus,
-      onKeyDown,
-      index,
-    }));
-  }
-
-  render() {
-    const {
-      children,
-      label,
-      name,
-      onBlur,
-      onChange,
-      onClick,
-      onFocus,
-      onKeyDown,
-      selectedIndex,
-      ...other
-    } = this.props;
-
-    return (
-      <div
-        role="radiogroup"
-        aria-label={label}
-        onChange={this.onChange}
-        tabIndex={-1}
-        {...other}
-      >
-        {this.renderChildren()}
-      </div>
-    );
-  }
-}
-
-RadioButton.defaultProps = {
-  children: undefined,
-  index: undefined,
-  isChecked: false,
-  name: undefined,
-  onBlur: () => {},
-  onClick: () => {},
-  onFocus: () => {},
-  onKeyDown: () => {},
-};
-
-RadioButton.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-    PropTypes.bool,
-  ]),
-  index: PropTypes.number,
-  isChecked: PropTypes.bool,
-  name: PropTypes.string,
-  onBlur: PropTypes.func,
-  onClick: PropTypes.func,
-  onFocus: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-    PropTypes.bool,
-  ]).isRequired,
-};
-
-RadioButtonGroup.defaultProps = {
-  onBlur: () => {},
-  onChange: () => {},
-  onClick: () => {},
-  onFocus: () => {},
-  onKeyDown: () => {},
-  selectedIndex: undefined,
-};
-
-RadioButtonGroup.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.element).isRequired,
-  /** specifies the `aria-label` value for the `RadioButtonGroup` */
-  label: PropTypes.string.isRequired,
-  /** specifies the `name` value for the `RadioButtonGroup` so that no more than one `RadioButton` can be selected at any given time */
-  name: PropTypes.string.isRequired,
-  /** specifies the callback for the `onBlur` event for each `RadioButton` within the group. The default value is a no-op function. */
-  onBlur: PropTypes.func,
-  /** specifies the callback for the onChange event for each RadioButton within the group. The default value is a no-op function. */
-  onChange: PropTypes.func,
-  /** specifies the callback for the `onClick` event for each `RadioButton` within the group. The default value is a no-op function. */
-  onClick: PropTypes.func,
-  /** specifies the callback for the `onFocus` event for each `RadioButton` within the group. The default value is a no-op function. */
-  onFocus: PropTypes.func,
-  /** specifies the callback for the `onKeyDown` event for each `RadioButton` within the group. The default value is a no-op function. */
-  onKeyDown: PropTypes.func,
-  /** specifies which `RadioButton` is initially selected. The default value is `undefined` which signifies that no `RadioButton` is initially selected. */
-  selectedIndex: PropTypes.number,
-};
-
-export { RadioButtonGroup as default, RadioButton };

package/src/SearchField/_variables.scss

@@ -1,14 +0,0 @@
-$search-btn-variants: (
-  "light":  $primary-500,
-  "dark":   $brand-500,
-);
-$search-border-radius:                0 !default;
-$search-border-color:                 $gray-500 !default;
-$search-form-background-color:        $white !default;
-$search-border-color-interaction:     $black !default;
-$search-border-width:                 .0625rem !default;
-$search-disabled-opacity:             .3 !default;
-$search-button-margin:                .5rem !default;
-$input-height-search:                 calc(#{$input-line-height * 1em} + #{$input-padding-y * 2}) !default;
-$search-border-focus-color:           $black !default;
-$search-border-focus-width:           .3125rem !default;

package/src/SelectableBox/_variables.scss

@@ -1,5 +0,0 @@
-$selectable-box-padding:                   1rem !default;
-$selectable-box-border-radius:             .25rem !default;
-$selectable-box-space:                     .75rem !default;
-$min-cols-number:                          1 !default;
-$max-cols-number:                          12 !default;

package/src/Spinner/_variables.scss

@@ -1,9 +0,0 @@
-// Spinners
-
-$spinner-width:         2rem !default;
-$spinner-height:        $spinner-width !default;
-$spinner-border-width:  .25em !default;
-
-$spinner-width-sm:        1rem !default;
-$spinner-height-sm:       $spinner-width-sm !default;
-$spinner-border-width-sm: .2em !default;

package/src/Stack/_variables.scss

@@ -1 +0,0 @@
-$stack-gap:                       0 !default;

package/src/StatusAlert/README.md

@@ -1,149 +0,0 @@
----
-title: 'StatusAlert'
-type: 'component'
-components:
-- StatusAlert
-categories:
-- Status & metadata
-status: 'Deprecate Soon'
-designStatus: 'Done'
-devStatus: 'Done'
-notes: |
-  Alert replaces this component
----
-
-## basic usage
-
-```jsx live
-<StatusAlert
-  dialog="You have a status alert!"
-  onClose={() => {}}
-  open
-/>
-```
-
-## success alert
-
-```jsx live
-<StatusAlert
-  alertType="success"
-  dialog="Success!"
-  onClose={() => {}}
-  open
-/>
-```
-
-## danger alert
-
-```jsx live
-<StatusAlert
-  alertType="danger"
-  dialog="Error!"
-  onClose={() => {}}
-  open
-/>
-```
-
-## informational alert
-
-```jsx live
-<StatusAlert
-  alertType="info"
-  dialog="Get some info here!"
-  onClose={() => {}}
-  open
-/>
-```
-
-## alert with a custom aria-label on the close button
-
-```jsx live
-<StatusAlert
-  alertType="info"
-  dialog="Some very specific information."
-  onClose={() => {}}
-  open
-  closeButtonAriaLabel="Dismiss this very specific information."
-/>
-```
-
-## Non-dismissible alert
-
-```jsx live
-<StatusAlert
-  alertType="danger"
-  dismissible={false}
-  dialog="You can't get rid of me!"
-  open
-/>
-```
-
-## alert invoked via a button
-
-```jsx live
-class StatusAlertWrapper extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.openStatusAlert = this.openStatusAlert.bind(this);
-    this.resetStatusAlertWrapperState = this.resetStatusAlertWrapperState.bind(
-      this,
-    );
-
-    this.state = { open: false };
-  }
-
-  openStatusAlert() {
-    this.setState({ open: true });
-  }
-
-  resetStatusAlertWrapperState() {
-    this.setState({ open: false });
-    this.button.focus();
-  }
-
-  render() {
-    return (
-      <div>
-        <StatusAlert
-          alertType="warning"
-          open={this.state.open}
-          dialog="You triggered a warning"
-          onClose={this.resetStatusAlertWrapperState}
-        />
-        <Button
-          onClick={this.openStatusAlert}
-          variant="light"
-          inputRef={input => {
-            this.button = input;
-          }}
-        >
-          Click me to open a Status Alert!
-        </Button>
-      </div>
-    );
-  }
-}
-```
-
-## alert with a link
-
-```jsx live
-<StatusAlert
-  alertType="info"
-  dialog={
-    <div>
-      <span>Love cats? </span>
-      <a
-        href="https://www.factretriever.com/cat-facts"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        Click me!
-      </a>
-    </div>
-  }
-  onClose={() => {}}
-  open
-/>
-```