@openedx/paragon 22.0.0-alpha.24 → 22.1.0

package/src/Input/__snapshots__/input.test.jsx.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Input /> rendering properly renders groups 1`] = `
+<select
+  className="form-control"
+  defaultValue="Foo Bar"
+>
+  <option
+    value="Foo Bar"
+  >
+    Foo Bar
+  </option>
+  <option
+    value="Foos Bar"
+  >
+    Bar foo
+  </option>
+  <option
+    value="Foo sBar"
+  >
+    FoBaro
+  </option>
+  <option
+    value="Foo ssBar"
+  >
+    Farboo
+  </option>
+  <optgroup
+    label="But there is more"
+  >
+    <option
+      value="vFoo Bar"
+    >
+      Foov Bar
+    </option>
+    <option
+      value="vFoos Bar"
+    >
+      Barv foo
+    </option>
+    <option
+      value="vFoo sBar"
+    >
+      FoBarov
+    </option>
+    <option
+      value="vFoo ssBar"
+    >
+      Farboov
+    </option>
+  </optgroup>
+</select>
+`;

package/src/Input/index.jsx

@@ -0,0 +1,151 @@
+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

@@ -0,0 +1,85 @@
+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

@@ -0,0 +1,136 @@
+---
+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

@@ -0,0 +1,92 @@
+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

@@ -0,0 +1,74 @@
+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);
+    });
+  });
+});