@openedx/paragon 22.4.0 → 23.0.0-alpha.1

package/src/Input/index.jsx

@@ -1,151 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-class Input extends React.Component {
-  componentDidMount() {
-    if (process.env.NODE_ENV === 'development') {
-      this.checkHasLabel();
-    }
-  }
-
-  getHTMLTagForType() {
-    const { type } = this.props;
-    if (type === 'select' || type === 'textarea') { return type; }
-    return 'input';
-  }
-
-  getClassNameForType() {
-    switch (this.props.type) {
-      case 'file':
-        return 'form-control-file';
-      case 'checkbox':
-      case 'radio':
-        return 'form-check-input';
-      default:
-        return 'form-control';
-    }
-  }
-
-  setRef(forwardedRef) {
-    // In production just return the optional forwardedRef
-    if (process.env.NODE_ENV !== 'development') { return forwardedRef; }
-
-    return (element) => {
-      if (forwardedRef) { forwardedRef.current = element; } // eslint-disable-line no-param-reassign
-      this.inputEl = element;
-    };
-  }
-
-  checkHasLabel() {
-    if (this.inputEl.labels.length > 0) { return; }
-    if (this.inputEl.getAttribute('aria-label') !== null) { return; }
-    if (this.inputEl.getAttribute('aria-labelledby') !== null) { return; }
-
-    if (console) {
-      // eslint-disable-next-line no-console
-      console.warn('Input[a11y]: There is no associated label for this Input');
-    }
-  }
-
-  renderOptions(options) {
-    return options.map((option) => {
-      const {
-        value,
-        label,
-        group,
-        ...attributes
-      } = option;
-
-      if (group) {
-        return (
-          <optgroup key={`optgroup-${label}`} label={label} {...attributes}>
-            {this.renderOptions(group)}
-          </optgroup>
-        );
-      }
-      return (
-        <option key={value} value={value} {...attributes}>
-          {label}
-        </option>
-      );
-    }, this);
-  }
-
-  render() {
-    const {
-      type,
-      className,
-      options,
-      forwardedRef, // eslint-disable-line react/prop-types
-      ...attributes // eslint-disable-line react/prop-types
-    } = this.props;
-
-    const htmlTag = this.getHTMLTagForType();
-    const htmlProps = {
-      className: classNames(this.getClassNameForType(), className),
-      type: htmlTag === 'input' ? type : undefined,
-      ...attributes,
-      ref: this.setRef(forwardedRef),
-    };
-    const htmlChildren = type === 'select' ? this.renderOptions(options) : null;
-
-    return React.createElement(htmlTag, htmlProps, htmlChildren);
-  }
-}
-
-Input.propTypes = {
-  /** specifies the type of component.
-   * One of select, textarea, or any valid type for an html input tag. */
-  type: PropTypes.oneOf([
-    'textarea',
-    'select',
-    'checkbox',
-    'color',
-    'date',
-    'datetime',
-    'datetime-local',
-    'email',
-    'file',
-    'hidden',
-    'image',
-    'month',
-    'number',
-    'password',
-    'radio',
-    'range',
-    'reset',
-    'search',
-    'submit',
-    'tel',
-    'text',
-    'time',
-    'url',
-    'week',
-  ]).isRequired,
-  /** specifies the className in addition to a bootstrap class name. */
-  className: PropTypes.string,
-  /** should be used to specify the options of an Input of type select */
-  options: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    disabled: PropTypes.bool,
-    group: PropTypes.arrayOf(PropTypes.shape({
-      label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-      disabled: PropTypes.bool,
-    })),
-  })),
-};
-
-Input.defaultProps = {
-  className: undefined,
-  options: [],
-};
-
-// eslint-disable-next-line react/no-multi-comp
-const InputWithRefForwarding = React.forwardRef((props, ref) => (
-  <Input forwardedRef={ref} {...props} />
-));
-
-export default InputWithRefForwarding;

package/src/Input/input.test.jsx

@@ -1,85 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import renderer from 'react-test-renderer';
-
-import Input from '.';
-
-describe('<Input />', () => {
-  const label = 'label';
-  const name = 'name';
-  const className = 'input';
-  const props = {
-    label,
-    name,
-    className,
-  };
-  const types = [
-    'textarea',
-    'select',
-    'checkbox',
-    'color',
-    'date',
-    'datetime',
-    'datetime-local',
-    'email',
-    'file',
-    'hidden',
-    'image',
-    'month',
-    'number',
-    'password',
-    'radio',
-    'range',
-    'reset',
-    'search',
-    'submit',
-    'tel',
-    'text',
-    'time',
-    'url',
-    'week',
-  ];
-
-  const groupInput = (
-    <Input
-      type="select"
-      defaultValue="Foo Bar"
-      options={[
-        { value: 'Foo Bar', label: 'Foo Bar' },
-        { value: 'Foos Bar', label: 'Bar foo' },
-        { value: 'Foo sBar', label: 'FoBaro' },
-        { value: 'Foo ssBar', label: 'Farboo' },
-        {
-          label: 'But there is more',
-          group: [
-            { value: 'vFoo Bar', label: 'Foov Bar' },
-            { value: 'vFoos Bar', label: 'Barv foo' },
-            { value: 'vFoo sBar', label: 'FoBarov' },
-            { value: 'vFoo ssBar', label: 'Farboov' },
-          ],
-        },
-      ]}
-    />
-  );
-
-  describe('rendering', () => {
-    it('should render with forwardRef', () => {
-      const refSpy = jest.fn();
-      render(<Input type="text" ref={refSpy} {...props} />);
-      expect(refSpy).toHaveBeenCalled();
-    });
-
-    it('should render each input type', () => {
-      types.forEach((type) => {
-        const { container } = render(<Input type={type} {...props} />);
-        const input = container.querySelector('.input');
-        expect(input).toBeInTheDocument();
-      });
-    });
-
-    it('properly renders groups', () => {
-      const tree = renderer.create(groupInput).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-  });
-});

package/src/InputSelect/README.md

@@ -1,136 +0,0 @@
----
-title: 'InputSelect'
-type: 'component'
-components:
-- InputSelect
-categories:
-- Forms (deprecated)
-status: 'Deprecate Soon'
-designStatus: 'TBD'
-devStatus: 'To Do'
-notes: |
-  Replaced by Form.Control
----
-
-## Basic usage
-
-```jsx live
-<InputSelect
-  name="fruits"
-  label="Fruits"
-  value="strawberry"
-  options={[
-    'apple',
-    'orange',
-    'strawberry',
-    'banana',
-  ]}
-/>
-```
-
-## Separate labels and values
-
-```jsx live
-<InputSelect
-  name="new-england-states"
-  label="New England States"
-  value="RI"
-  options={[
-    { label: 'Connecticut', value: 'CN' },
-    { label: 'Maine', value: 'ME' },
-    { label: 'Massachusetts', value: 'MA' },
-    { label: 'New Hampshire', value: 'NH' },
-    { label: 'Rhode Island', value: 'RI' },
-    { label: 'Vermont', value: 'VT' },
-  ]}
-/>
-```
-
-## Separate option groups
-
-```jsx live
-<InputSelect
-  name="northeast-states"
-  label="Northeast States"
-  value="MD"
-  options={[
-    {
-      label: 'New England States',
-      options: [
-        { label: 'Connecticut', value: 'CN' },
-        { label: 'Maine', value: 'ME' },
-        { label: 'Massachusetts', value: 'MA' },
-        { label: 'New Hampshire', value: 'NH' },
-        { label: 'Rhode Island', value: 'RI' },
-        { label: 'Vermont', value: 'VT' },
-      ],
-    },
-    {
-      label: 'Mid Atlantic States',
-      options: [
-        { label: 'Delaware', value: 'DE' },
-        { label: 'Maryland', value: 'MD' },
-        { label: 'New Jersey', value: 'NJ' },
-        { label: 'New York', value: 'NY' },
-        { label: 'Pennsylvania', value: 'PA' },
-        { label: 'Virginia', value: 'VA' },
-        { label: 'Washington, DC', value: 'DC' },
-        { label: 'West Virginia', value: 'WV' },
-      ],
-    },
-  ]}
-/>
-```
-
-## With validation
-
-```jsx live
-<InputSelect
-  name="color"
-  label="Favorite Color"
-  options={['', 'red', 'orange', 'yellow', 'green', 'blue', 'purple']}
-  validator={value => {
-    let feedback = { isValid: true };
-    if (!value) {
-      feedback = {
-        isValid: false,
-        validationMessage: 'Please make a selection.',
-      };
-    }
-    return feedback;
-  }}
-/>
-```
-
-## Disabled usage
-
-```jsx live
-<InputSelect
-  name="fruits"
-  label="Fruits"
-  aria-label="Fruits"
-  value="strawberry"
-  options={[
-    'apple',
-    'orange',
-    'strawberry',
-    'banana',
-  ]}
-  disabled
-/>
-```
-
-## With disabled option
-
-```jsx live
-<InputSelect
-  name="fruits"
-  label="Fruits"
-  value="strawberry"
-  options={[
-    { label: 'apple', value: 'apple' },
-    { label: 'orange', value: 'orange', disabled: true },
-    { label: 'banana', value: 'banana', disabled: true },
-  ]}
-/>
-```

package/src/InputSelect/index.jsx

@@ -1,92 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import asInput from '../asInput';
-import withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';
-
-class Select extends React.Component {
-  static getOption(option, i) {
-    const { disabled } = option;
-    let { label, value } = option;
-
-    if (typeof option === 'string') {
-      label = option;
-      value = option;
-    }
-
-    return (
-      <option
-        key={`option-${i}`}
-        value={value}
-        disabled={disabled}
-      >
-        {label}
-      </option>
-    );
-  }
-
-  getOptions() {
-    return this.props.options.map((option, i) => {
-      let section;
-      if (option.options) {
-        const groupOpts = option.options.map((opt, j) => Select.getOption(opt, j));
-        section = (
-          <optgroup label={option.label} key={option.label}>
-            {groupOpts}
-          </optgroup>
-        );
-      } else {
-        section = Select.getOption(option, i);
-      }
-      return section;
-    });
-  }
-
-  render() {
-    const {
-      className,
-      inputRef,
-      ...others
-    } = this.props;
-    const options = this.getOptions();
-
-    return (
-      <select
-        {...others}
-        className={className}
-        type="select"
-        ref={inputRef}
-      >
-        {options}
-      </select>
-    );
-  }
-}
-
-Select.propTypes = {
-  className: PropTypes.string,
-  inputRef: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.shape({ current: PropTypes.instanceOf(PropTypes.element) }),
-  ]),
-  options: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.string),
-    PropTypes.arrayOf(PropTypes.shape({})),
-  ]).isRequired,
-};
-
-Select.defaultProps = {
-  className: undefined,
-  inputRef: undefined,
-};
-
-const InputSelect = asInput(withDeprecatedProps(Select, 'InputSelect', {
-  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 InputSelect;

package/src/InputText/InputText.test.jsx

@@ -1,74 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import InputText from '.';
-
-describe('<InputText />', () => {
-  const label = 'label';
-  const name = 'name';
-  const props = {
-    label,
-    name,
-  };
-
-  describe('rendering', () => {
-    it('should render with default type when type is not defined', () => {
-      const { container } = render(<InputText {...props} />);
-      const input = container.querySelector('input');
-      expect(input).toBeInTheDocument();
-      expect(input.type).toEqual('text');
-    });
-
-    it('should render with default type when type is defined as undefined', () => {
-      const { container } = render(<InputText {...props} type={undefined} />);
-      const input = container.querySelector('input');
-      expect(input).toBeInTheDocument();
-      expect(input.type).toEqual('text');
-    });
-
-    it('should render with default type when type is defined as null', () => {
-      const { container } = render(<InputText {...props} type={null} />);
-      const input = container.querySelector('input');
-      expect(input).toBeInTheDocument();
-      expect(input.type).toEqual('text');
-    });
-
-    it('should render with specified type when type is defined', () => {
-      const type = 'foobar';
-      const { getByRole } = render(<InputText {...props} type={type} />);
-      const input = getByRole('textbox', { type: 'foobar' });
-      expect(input).toBeInTheDocument();
-      expect(input.getAttribute('type')).toEqual(type);
-    });
-
-    it('should render with the autoComplete property if set', () => {
-      const { container } = render(<InputText {...props} autoComplete="off" />);
-      const input = container.querySelector('input');
-      expect(input).toBeInTheDocument();
-      expect(input.getAttribute('autocomplete')).toEqual('off');
-    });
-
-    it('should render with custom classNames if set', () => {
-      const { container } = render(<InputText {...props} className={['first', 'last']} />);
-      const input = container.querySelector('input');
-      expect(input).toBeInTheDocument();
-      expect(input.type).toEqual('text');
-      expect(input.classList.contains('first')).toBe(true);
-      expect(input.classList.contains('last')).toBe(true);
-    });
-
-    it('should not be readOnly if the readOnly property is not set', () => {
-      const { container } = render(<InputText {...props} />);
-      const input = container.querySelector('input');
-      expect(input).toBeInTheDocument();
-      expect(input.readOnly).toBe(false);
-    });
-
-    it('should render with the readOnly property if set', () => {
-      const { container } = render(<InputText {...props} readOnly />);
-      const input = container.querySelector('input');
-      expect(input).toBeInTheDocument();
-      expect(input.readOnly).toBe(true);
-    });
-  });
-});