@openedx/paragon 22.4.0 → 23.0.0-alpha.1

package/src/StatusAlert/StatusAlert.test.jsx

@@ -1,150 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import StatusAlert from '.';
-import { Button } from '..';
-
-const dialog = 'Status Alert dialog';
-const defaultProps = {
-  dialog,
-  onClose: () => {},
-  open: true,
-};
-
-describe('<StatusAlert />', () => {
-  describe('correct rendering', () => {
-    it('renders default view', () => {
-      render(<StatusAlert {...defaultProps} />);
-      const statusAlertDialog = screen.getByRole('alert');
-      expect(statusAlertDialog.textContent).toContain(dialog);
-      expect(screen.getAllByRole('button')).toHaveLength(1);
-    });
-
-    it('renders non-dismissible view', () => {
-      render(<StatusAlert {...defaultProps} dismissible={false} />);
-      const statusAlertDialog = screen.getByRole('alert');
-
-      expect(statusAlertDialog.textContent).toContain(dialog);
-      expect(screen.queryAllByRole('button')).toHaveLength(0);
-    });
-
-    it('renders custom aria-label view', () => {
-      const customLabel = 'Dismiss this alert post-haste!';
-      render(<StatusAlert {...defaultProps} closeButtonAriaLabel={customLabel} />);
-      const button = screen.getByRole('button');
-
-      expect(button.getAttribute('aria-label')).toBe(customLabel);
-    });
-  });
-
-  describe('props received correctly', () => {
-    it('component receives props', async () => {
-      const onCloseMock = jest.fn();
-
-      const { rerender } = render(
-        <StatusAlert dialog={dialog} onClose={onCloseMock} />,
-      );
-      const alertElement = screen.getByRole('alert', { hidden: true });
-      expect(alertElement).not.toHaveClass('show');
-
-      rerender(<StatusAlert dialog={dialog} onClose={onCloseMock} open />);
-      expect(screen.getByRole('alert')).toHaveClass('show');
-
-      expect(onCloseMock).not.toHaveBeenCalled();
-      const closeButton = screen.getByRole('button');
-      await userEvent.click(closeButton);
-      expect(onCloseMock).toHaveBeenCalled();
-    });
-
-    it('component receives props and ignores prop change', () => {
-      render(<StatusAlert {...defaultProps} />);
-      const statusAlertDialog = screen.getByRole('alert');
-
-      // Initial rendering with default props
-      expect(statusAlertDialog.textContent).toContain(dialog);
-
-      // Simulate prop update
-      render(<StatusAlert {...defaultProps} dialog="Changed alert dialog" />);
-      expect(statusAlertDialog.textContent).toContain(dialog);
-    });
-  });
-
-  describe('close functions properly', () => {
-    it('closes when x button pressed', async () => {
-      render(<StatusAlert {...defaultProps} />);
-      const closeButton = screen.getByRole('button');
-      await userEvent.click(closeButton);
-      expect(screen.queryByRole('alert')).toBeNull();
-    });
-
-    it('closes when Enter key pressed', async () => {
-      render(<StatusAlert {...defaultProps} />);
-      const closeButton = screen.getByRole('button');
-      closeButton.focus();
-      await userEvent.keyboard('{enter}');
-      expect(screen.queryByRole('alert')).toBeNull();
-    });
-
-    it('closes when Escape key pressed', async () => {
-      render(<StatusAlert {...defaultProps} />);
-      const closeButton = screen.getByRole('button');
-      closeButton.focus();
-      await userEvent.keyboard('{enter}');
-      expect(screen.queryByRole('alert')).toBeNull();
-    });
-
-    it('calls callback function on close', async () => {
-      const spy = jest.fn();
-
-      render(<StatusAlert {...defaultProps} onClose={spy} />);
-      const closeButton = screen.getByRole('button');
-
-      expect(spy).toHaveBeenCalledTimes(0);
-
-      await userEvent.click(closeButton);
-      expect(spy).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('invalid keystrokes do nothing', () => {
-    beforeEach(() => {
-      render(<StatusAlert {...defaultProps} />);
-    });
-
-    it('does nothing on invalid keystroke q', async () => {
-      const closeButton = screen.getByRole('button');
-      expect(document.activeElement).toEqual(closeButton);
-      closeButton.focus();
-      await userEvent.keyboard('{q}');
-      expect(document.activeElement).toEqual(closeButton);
-    });
-
-    it('does nothing on invalid keystroke + ctrl', async () => {
-      const closeButton = screen.getByRole('button');
-      expect(document.activeElement).toEqual(closeButton);
-      await userEvent.keyboard('{ctrl>}{tab}{/ctrl}');
-      expect(document.activeElement).toEqual(closeButton);
-    });
-  });
-  describe('focus functions properly', () => {
-    it('focus function changes focus', async () => {
-      render(
-        <div>
-          <Button label="test">Button</Button>
-          <StatusAlert {...defaultProps} />
-        </div>,
-      );
-      const buttons = screen.getAllByRole('button');
-      const xButton = buttons[1];
-      const statusAlertButton = buttons[0];
-
-      // Move focus away from the default StatusAlert xButton
-      await userEvent.click(xButton);
-      expect(xButton.innerHTML).toEqual(document.activeElement.innerHTML);
-
-      statusAlertButton.focus();
-      expect(statusAlertButton.innerHTML).toEqual(document.activeElement.innerHTML);
-    });
-  });
-});

package/src/StatusAlert/index.jsx

@@ -1,144 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import isRequiredIf from 'react-proptype-conditional-require';
-
-import Button from '../Button';
-import withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';
-
-class StatusAlert extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.close = this.close.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.renderDialog = this.renderDialog.bind(this);
-
-    this.state = {
-      open: props.open,
-    };
-  }
-
-  componentDidMount() {
-    if (this.xButton) {
-      this.xButton.focus();
-    }
-  }
-
-  /* eslint-disable react/no-did-update-set-state */
-  componentDidUpdate(prevProps, prevState) {
-    if (this.state.open && !prevState.open && this.xButton) {
-      this.xButton.focus();
-    }
-
-    if (this.props.open !== prevProps.open) {
-      this.setState({ open: this.props.open });
-    }
-  }
-
-  handleKeyDown(e) {
-    if (e.key === 'Enter' || e.key === 'Escape') {
-      e.preventDefault();
-      this.close();
-    }
-  }
-
-  close() {
-    this.setState({ open: false });
-    this.props.onClose();
-  }
-
-  // eslint-disable-next-line react/no-unused-class-component-methods
-  focus() {
-    if (this.xButton) {
-      this.xButton.focus();
-    }
-  }
-
-  renderDialog() {
-    const { dialog } = this.props;
-
-    return (
-      <div className="alert-dialog">
-        { dialog }
-      </div>
-    );
-  }
-
-  renderDismissible() {
-    const { closeButtonAriaLabel, dismissible } = this.props;
-
-    return (dismissible) ? (
-      <Button.Deprecated
-        aria-label={closeButtonAriaLabel}
-        inputRef={(input) => { this.xButton = input; }}
-        onClick={this.close}
-        onKeyDown={this.handleKeyDown}
-        isClose
-      >
-        <span aria-hidden="true">&times;</span>
-      </Button.Deprecated>
-    ) : null;
-  }
-
-  render() {
-    const { alertType, className, dismissible } = this.props;
-
-    return (
-      <div
-        className={classNames([
-          className,
-          'alert',
-          'fade',
-        ], {
-          'alert-dismissible': dismissible,
-        }, {
-          [`alert-${alertType}`]: alertType !== undefined,
-        }, {
-          show: this.state.open,
-        })}
-        role="alert"
-        hidden={!this.state.open}
-      >
-        {this.renderDismissible()}
-        {this.renderDialog()}
-      </div>
-    );
-  }
-}
-
-StatusAlert.propTypes = {
-  /** specifies the type of alert that is being diplayed. It defaults to "warning".
-   * See the other available [bootstrap](https://react-bootstrap-v4.netlify.app/components/alerts/) options. */
-  alertType: PropTypes.string,
-  /** is a string array that defines the classes to be used within the status alert. */
-  className: PropTypes.string,
-  dialog: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
-  /** specifies if the status alert will include the dismissible X button to close the alert. It defaults to true. */
-  dismissible: PropTypes.bool,
-  /* eslint-disable react/require-default-props */
-  closeButtonAriaLabel: PropTypes.string,
-  /** is a function that is called on close. It can be used to perform actions upon closing of the status alert,
-   * such as restoring focus to the previous logical focusable element.  It is only required if `dismissible`
-   * is set to `true` and not required if the alert is not `dismissible`. */
-  onClose: isRequiredIf(PropTypes.func, props => props.dismissible),
-  /** specifies whether the status alert renders open or closed on the initial render. It defaults to false. */
-  open: PropTypes.bool,
-};
-
-StatusAlert.defaultProps = {
-  alertType: 'warning',
-  className: undefined,
-  closeButtonAriaLabel: 'Close',
-  dismissible: true,
-  open: false,
-};
-
-export default withDeprecatedProps(StatusAlert, 'StatusAlert', {
-  className: {
-    deprType: DeprTypes.FORMAT,
-    expect: value => typeof value === 'string',
-    transform: value => (Array.isArray(value) ? value.join(' ') : value),
-    message: 'It should be a string.',
-  },
-});

package/src/Stepper/_variables.scss

@@ -1,18 +0,0 @@
-$stepper-header-bg:                                       transparent !default;
-$stepper-header-min-height:                               5.13rem !default;
-$stepper-header-padding-y:                                .75rem !default;
-$stepper-header-padding-x:                                $spacer !default;
-$stepper-header-line-bg:                                  $light !default;
-$stepper-header-line-height:                              1px !default;
-$stepper-header-step-color:                               $primary !default;
-$stepper-header-step-bg:                                  $stepper-header-bg !default;
-$stepper-header-step-border:                              none !default;
-$stepper-header-step-min-width:                           0 !default;
-$stepper-header-step-padding:                             .25rem !default;
-$stepper-header-step-list-padding-y:                      .25rem !default;
-$stepper-header-step-list-padding-x:                      0 !default;
-$stepper-header-step-list-margin:                         0 !default;
-$stepper-header-active-step-bg:                           $gray-500 !default;
-$stepper-header-step-error-bubble-color:                  $danger !default;
-$stepper-header-step-error-bubble-shadow-width:           3px !default;
-$stepper-header-step-error-description-color:             $stepper-header-step-error-bubble-color !default;

package/src/Sticky/_variables.scss

@@ -1,3 +0,0 @@
-$sticky-offset:                       0 !default;
-$sticky-shadow-top:                   0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15) !default;
-$sticky-shadow-bottom:                0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15) !default;