@openedx/paragon 22.4.0 → 23.0.0-alpha.1

package/src/Tabs/_variables.scss

@@ -1,24 +0,0 @@
-$tab-notification-height:                                   1rem !default;
-$tab-notification-width:                                    1rem !default;
-$tab-notification-font-size:                                $font-size-xs !default;
-$tab-more-link-dropdown-toggle-padding-x:                   .7rem !default;
-$tab-more-link-dropdown-toggle-padding-y:                   $spacer !default;
-$tab-more-link-dropdown-toggle-focus-bg:                    $primary-500 !default;
-$tab-more-link-dropdown-toggle-focus-border-color:          $tab-more-link-dropdown-toggle-focus-bg !default;
-$tab-more-link-dropdown-toggle-focus-color:                 $white !default;
-$tab-more-link-dropdown-toggle-btn-focus-color:             $tab-more-link-dropdown-toggle-focus-color !default;
-$tab-more-link-dropdown-toggle-btn-focus-border-color:      $tab-more-link-dropdown-toggle-focus-bg !default;
-$tab-more-link-dropdown-toggle-active-color:                $tab-more-link-dropdown-toggle-focus-color !default;
-$tab-more-link-dropdown-toggle-hover-color:                 $tab-more-link-dropdown-toggle-focus-bg !default;
-$tab-inverse-pills-link-dropdown-toggle-padding-x:          .625rem !default;
-$tab-inverse-pills-link-dropdown-toggle-padding-y:          $spacer !default;
-$tab-inverse-pills-link-dropdown-toggle-focus-bg:           $white !default;
-$tab-inverse-pills-link-dropdown-toggle-focus-color:        $primary-500 !default;
-$tab-inverse-pills-link-dropdown-toggle-focus-border-color: $tab-inverse-pills-link-dropdown-toggle-focus-bg !default;
-$tab-inverse-pills-link-dropdown-toggle-active-color: $tab-inverse-pills-link-dropdown-toggle-focus-color !default;
-$tab-inverse-pills-link-dropdown-toggle-active-hover-color: $tab-inverse-pills-link-dropdown-toggle-focus-bg !default;
-$tab-inverse-pills-link-dropdown-toggle-active-hover-bg:    $primary-300 !default;
-$tab-inverse-pills-link-dropdown-distance:                  5px !default;
-$tab-inverse-tabs-link-dropdown-toggle-padding-x:           .625rem !default;
-$tab-inverse-tabs-link-dropdown-toggle-padding-y:           $spacer !default;
-$tab-inverse-tabs-link-dropdown-toggle-hover-bg:            transparent !default;

package/src/Tabs/deprecated/Tabs.scss

@@ -1,3 +0,0 @@
-.nav-tabs .nav-link {
-  background: transparent;
-}

package/src/Tabs/deprecated/Tabs.test.jsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import Tabs from '.';
-
-const props = {
-  labels: [
-    'first',
-    'second',
-    'third',
-  ],
-  children: [
-    <div key="first">first</div>,
-    <div key="second">second</div>,
-    <div key="third">third</div>,
-  ],
-};
-
-const tabSelectedAtIndex = (index, container) => {
-  const tabButtons = container.querySelectorAll('button');
-  const tabPanes = container.querySelectorAll('.tab-pane');
-
-  tabButtons.forEach((node, i) => {
-    expect(node.getAttribute('aria-selected')).toEqual(i === index ? 'true' : 'false');
-  });
-
-  tabPanes.forEach((node, i) => {
-    expect(node.classList.contains('active')).toEqual(i === index);
-  });
-};
-
-describe('<Tabs />', () => {
-  it('renders with first tab selected', () => {
-    const { container } = render(<Tabs {...props} />);
-    tabSelectedAtIndex(0, container);
-  });
-
-  describe('switches tab selection', () => {
-    it('on click', () => {
-      const { container } = render(<Tabs {...props} />);
-      const tabButtons = container.querySelectorAll('button');
-
-      tabButtons.forEach((node, i) => {
-        userEvent.click(node);
-        tabSelectedAtIndex(i, container);
-      });
-    });
-  });
-});

package/src/Tabs/deprecated/index.jsx

@@ -1,117 +0,0 @@
-// TODO: @jaebradley fix these eslint errors
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/anchor-is-valid */
-/* eslint-disable max-len */
-import React from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-import newId from '../../utils/newId';
-
-class Tabs extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.toggle = this.toggle.bind(this);
-    this.state = {
-      activeTab: 0,
-      uuid: newId('tabInterface'),
-    };
-  }
-
-  toggle(tab) {
-    if (this.state.activeTab !== tab) {
-      this.setState({
-        activeTab: tab,
-      });
-    }
-  }
-
-  genLabelId(index) {
-    return `tab-label-${this.state.uuid}-${index}`;
-  }
-
-  genPanelId(index) {
-    return `tab-panel-${this.state.uuid}-${index}`;
-  }
-
-  buildLabels() {
-    return this.props.labels.map((label, i) => {
-      const selected = this.state.activeTab === i;
-      const labelId = this.genLabelId(i);
-
-      return (
-        <li key={labelId}>
-          {/* eslint-disable-next-line react/button-has-type */}
-          <button
-            role="tab"
-            aria-selected={selected}
-            aria-controls={this.genPanelId(i)}
-            id={labelId}
-            onClick={() => { this.toggle(i); }}
-            className={classNames('nav-link nav-item', {
-              active: selected,
-            })}
-          >
-            {label}
-          </button>
-        </li>
-      );
-    });
-  }
-
-  buildPanels() {
-    return this.props.children.map((panel, i) => {
-      const selected = this.state.activeTab === i;
-      const panelId = this.genPanelId(i);
-
-      return (
-        <div
-          aria-hidden={!selected}
-          aria-labelledby={this.genLabelId(i)}
-          className={classNames(
-            'tab-pane',
-            { active: selected },
-          )}
-          id={panelId}
-          key={panelId}
-          role="tabpanel"
-        >
-          {panel}
-        </div>
-      );
-    });
-  }
-
-  render() {
-    const labels = this.buildLabels();
-    const panels = this.buildPanels();
-
-    return (
-      <div className="tabs">
-        <ul
-          role="tablist"
-          className={classNames([
-            'nav',
-            'nav-tabs',
-          ])}
-        >
-          {labels}
-        </ul>
-        <div role="tabpanel" className="tab-content">
-          {panels}
-        </div>
-      </div>
-    );
-  }
-}
-// TODO: custom validator that ensures labels and panels are the same length
-Tabs.propTypes = {
-  /** specifies the list of elements that will be displayed within each of the tabbed views.  It is the content relevant to each label. Children should not be passed as Props, but should instead be nested between the opening and closing `<Tabs> </Tabs>` tags. */
-  labels: PropTypes.arrayOf(PropTypes.node).isRequired,
-  /** specifies the list of headings that will appear on all of the tabs that will be created.
- */
-  children: PropTypes.arrayOf(PropTypes.element).isRequired,
-};
-
-export default Tabs;

package/src/TextArea/README.md

@@ -1,63 +0,0 @@
----
-title: 'TextArea'
-type: 'component'
-components:
-- TextArea
-categories:
-- Forms (deprecated)
-status: 'Deprecate Soon'
-designStatus: 'TBD'
-devStatus: 'To Do'
-notes: |
-  Replaced by Form.Control
----
-
-## Minimal usage
-
-```jsx live
-<TextArea
-  name="name"
-  label="First Name"
-  value="Foo Bar"
-/>
-```
-
-## Scrollable
-
-```jsx live
-<TextArea
-  name="name"
-  label="Information"
-  value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-/>
-```
-
-## Validation
-
-```jsx live
-<TextArea
-  name="username"
-  label="Username"
-  description="The unique name that identifies you throughout the site."
-  validator={value => {
-    let feedback = { isValid: true };
-    if (value.length < 3) {
-      feedback = {
-        isValid: false,
-        validationMessage: 'Username must be at least 3 characters in length.',
-      };
-    }
-    return feedback;
-  }}
-/>
-```
-
-## Label as element
-
-```jsx live
-<TextArea
-  name="username"
-  label={<span lang="en">Element</span>}
-  value="Label is wrapped in language span"
-/>
-```

package/src/TextArea/index.jsx

@@ -1,48 +0,0 @@
-/* eslint-disable max-len */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import asInput from '../asInput';
-import withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';
-
-function Text(props) {
-  const {
-    className,
-    inputRef,
-    ...others
-  } = props;
-
-  return (
-    <textarea
-      {...others}
-      className={className}
-      ref={inputRef}
-    />
-  );
-}
-
-Text.propTypes = {
-  className: PropTypes.string,
-  /** specifies all of the properties that are necessary from the included `asInput` component.  Please see details for input requirements within that component.
-  */
-  inputRef: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.shape({ current: PropTypes.instanceOf(PropTypes.element) }),
-  ]),
-};
-
-Text.defaultProps = {
-  className: undefined,
-  inputRef: undefined,
-};
-
-const TextArea = asInput(withDeprecatedProps(Text, 'TextArea', {
-  className: {
-    deprType: DeprTypes.FORMAT,
-    expect: value => typeof value === 'string',
-    transform: value => (Array.isArray(value) ? value.join(' ') : value),
-    message: 'It should be a string.',
-  },
-}));
-
-export default TextArea;

package/src/Toast/_variables.scss

@@ -1,19 +0,0 @@
-// Toasts
-
-$toast-max-width:                   400px !default;
-$toast-padding-x:                   .75rem !default;
-$toast-padding-y:                   .25rem !default;
-$toast-font-size:                   .875rem !default;
-$toast-color:                       null !default;
-$toast-background-color:            $gray-700 !default;
-$toast-border-width:                1px !default;
-$toast-border-color:                rgba(0, 0, 0, .1) !default;
-$toast-border-radius:               .25rem !default;
-$toast-box-shadow:                  0 1.25rem 2.5rem rgba($black, .15), 0 .5rem 3rem rgba($black, .15) !default;
-
-$toast-header-color:                $white !default;
-$toast-header-background-color:     $gray-700 !default;
-$toast-header-border-color:         rgba(0, 0, 0, .5) !default;
-
-$toast-container-gutter-lg:         1.25rem !default;
-$toast-container-gutter-sm:         .625rem !default;

package/src/Tooltip/_variables.scss

@@ -1,21 +0,0 @@
-// Tooltips
-
-$tooltip-font-size:                 $font-size-sm !default;
-$tooltip-max-width:                 200px !default;
-$tooltip-color:                     $white !default;
-$tooltip-bg:                        $black !default;
-$tooltip-border-radius:             $border-radius !default;
-$tooltip-opacity:                   1 !default;
-$tooltip-padding-y:                 .5rem !default;
-$tooltip-padding-x:                 .5rem !default;
-$tooltip-margin:                    0 !default;
-$tooltip-box-shadow:                drop-shadow(0 2px 4px rgba(0, 0, 0, .15))
-  drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default;
-
-$tooltip-arrow-width:               .8rem !default;
-$tooltip-arrow-height:              .4rem !default;
-$tooltip-arrow-color:               $tooltip-bg !default;
-
-$tooltip-color-light:               $black !default;
-$tooltip-bg-light:                  $white !default;
-$tooltip-arrow-color-light:         $white !default;

package/src/ValidationFormGroup/README.md

@@ -1,116 +0,0 @@
----
-title: 'ValidationFormGroup'
-type: 'component'
-components:
-- ValidationFormGroup
-categories:
-- Forms (deprecated)
-status: 'Deprecate Soon'
-designStatus: 'Done'
-devStatus: 'Done'
-notes: |
-  Replaced by Form.Group
----
-
-Handles bootstrap style field validation and handles related aria attributes.
-
-Manages the rendering of bootstrap-style:
-
-- Help text
-- Valid and invalid feedback
-
-For children of type input, textarea, and select:
-
-- Appends bootstrap validation class names
-- Appends aria-describedby attributes (for help text and feedback)
-
-## basic usage
-
-```jsx live
-<ValidationFormGroup
-  for="firstName"
-  helpText="This is your name."
->
-  <label htmlFor="firstName">First Name</label>
-  <Input
-    type="text"
-    id="firstName"
-    name="first-name"
-    value="Casey"
-    onChange={() => {}}
-  />
-</ValidationFormGroup>
-```
-
-## invalid message
-
-```jsx live
-<ValidationFormGroup
-  for="firstName"
-  invalid
-  invalidMessage="Wrong!"
->
-  <label htmlFor="firstName">First Name</label>
-  <Input
-    type="text"
-    id="firstName"
-    name="first-name"
-    value="Casey"
-    onChange={() => {}}
-  />
-</ValidationFormGroup>
-```
-
-## valid message
-
-```jsx live
-<ValidationFormGroup
-  for="firstName"
-  valid
-  validMessage="What a nice name!"
->
-  <label htmlFor="firstName">First Name</label>
-  <Input
-    type="text"
-    id="firstName"
-    name="first-name"
-    value="Casey"
-    onChange={() => {}}
-  />
-</ValidationFormGroup>
-```
-
-## with any kind of input
-
-```jsx live
-<>
-<ValidationFormGroup
-  for="weatherToday"
-  helpText="Look out the window to see."
-  valid
-  validMessage="Correct!"
->
-  <label htmlFor="weatherToday">How is the weather today?</label>
-  <select
-    className="form-control"
-    id="weatherToday"
-    name="weather"
-    value="Sunny"
-    onChange={() => {}}
-  >
-    <option>Sunny</option>
-    <option>Cloudy</option>
-    <option>Rainy</option>
-    <option>Snowy</option>
-  </select>
-</ValidationFormGroup>
-<ValidationFormGroup
-  for="weatherTomorrow"
-  helpText="Incoming weather."
-  invalid
-  invalidMessage="No good!"
->
-  <Form.Control type='text' value='Cloudy' />
-</ValidationFormGroup>
-</>
-```

package/src/ValidationFormGroup/ValidationFormGroup.test.jsx

@@ -1,146 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import { render, screen } from '@testing-library/react';
-
-import Input from '../Input';
-import { FormControl, Form } from '..';
-import ValidationFormGroup from '.';
-
-describe('ValidationFormGroup', () => {
-  const labelAndInputComponents = (
-    <>
-      <label htmlFor="firstName">First Name</label>
-      <input
-        className="form-control"
-        type="text"
-        id="firstName"
-        name="first-name"
-        value="Adam"
-        onChange={() => {}}
-      />
-    </>
-  );
-
-  it('renders', () => {
-    const tree = renderer.create((
-      <ValidationFormGroup
-        for="firstName"
-      >
-        {labelAndInputComponents}
-      </ValidationFormGroup>
-    )).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('renders with help text', () => {
-    const tree = renderer.create((
-      <ValidationFormGroup
-        for="firstName"
-        helpText="This is your first name."
-      >
-        {labelAndInputComponents}
-      </ValidationFormGroup>
-    )).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('renders an invalid message', () => {
-    const tree = renderer.create((
-      <ValidationFormGroup
-        for="firstName"
-        helpText="This is your first name."
-        invalid
-        invalidMessage="This is not your name."
-      >
-        {labelAndInputComponents}
-      </ValidationFormGroup>
-    )).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('renders a valid message', () => {
-    const tree = renderer.create((
-      <ValidationFormGroup
-        for="firstName"
-        helpText="This is your first name."
-        valid
-        validMessage="What a nice name."
-      >
-        {labelAndInputComponents}
-      </ValidationFormGroup>
-    )).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('renders an invalid message with a select input', () => {
-    const tree = renderer.create((
-      <ValidationFormGroup
-        for="weatherToday"
-        helpText="Look out the window to see."
-        valid
-        validMessage="Correct!"
-      >
-        <label htmlFor="weatherToday">How is the weather today?</label>
-        <select id="weatherToday" name="weather" value="Sunny" onChange={() => {}}>
-          <option>Sunny</option>
-          <option>Cloudy</option>
-          <option>Rainy</option>
-          <option>Snowy</option>
-        </select>
-      </ValidationFormGroup>
-    )).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  [
-    { Component: Input, name: 'Input' },
-    { Component: FormControl, name: 'FormControl' },
-    { Component: Form.Control, name: 'Form.Control' },
-  ].forEach(({ Component, name }) => {
-    const formControlId = 'bestForm';
-    const formControlHelp = 'So helpful';
-    const validMessage = 'Valid feedback';
-    const invalidMessage = 'Exterminate, Exterminate';
-
-    it(`renders a ${name} child with the correct aria attributes and helptext`, () => {
-      render(
-        <ValidationFormGroup
-          for={formControlId}
-          helpText={formControlHelp}
-          validMessage={validMessage}
-          valid
-        >
-          <Component id={formControlId} />
-        </ValidationFormGroup>,
-      );
-      const component = screen.getByRole('textbox');
-      expect(component.getAttribute('aria-describedby')).toBe(`${formControlId}-help-text ${formControlId}-valid-feedback`);
-      expect(screen.getByText(formControlHelp)).toBeTruthy();
-    });
-    it(`renders a ${name} child with the correct valid message`, () => {
-      render(
-        <ValidationFormGroup
-          for={formControlId}
-          helpText={formControlHelp}
-          validMessage={validMessage}
-          valid
-        >
-          <Component id={formControlId} />
-        </ValidationFormGroup>,
-      );
-      expect(screen.getByText(validMessage)).toBeTruthy();
-    });
-    it(`renders a ${name} child with the correct invalid message`, () => {
-      render(
-        <ValidationFormGroup
-          for={formControlId}
-          helpText={formControlHelp}
-          invalidMessage={invalidMessage}
-          invalid
-        >
-          <Component id={formControlId} />
-        </ValidationFormGroup>,
-      );
-      expect(screen.getByText(invalidMessage)).toBeTruthy();
-    });
-  });
-});