@openedx/paragon 22.6.0 → 23.0.0-alpha.2

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);
-    });
-  });
-});

package/src/InputText/README.md

@@ -1,293 +0,0 @@
----
-title: 'InputText'
-type: 'component'
-components:
-- InputText
-categories:
-- Forms (deprecated)
-status: 'Deprecate Soon'
-designStatus: 'TBD'
-devStatus: 'To Do'
-notes: |
-  Replaced by Form.Control
----
-
-## Minimal usage
-
-```jsx live
-<InputText name="name" label="First Name" value="Foo Bar" />
-```
-
-## Read only
-
-```jsx live
-<InputText name="inputState" label="Input State" value="Read Only" readOnly />
-```
-
-## Validation
-
-```jsx live
-<InputText
-  id="username"
-  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;
-  }}
-/>
-```
-
-### Validation with danger theme
-
-```jsx live
-<InputText
-  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.',
-        dangerIconDescription: 'Error',
-      };
-    }
-    return feedback;
-  }}
-  themes={['danger']}
-/>
-```
-
-### Label as element
-
-```jsx live
-<InputText
-  name="username"
-  label={<span lang="en">Element</span>}
-  value="Label is wrapped in language span"
-/>
-```
-
-### Focus test
-
-```jsx live
-class FocusInputWrapper extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { open: true };
-
-    this.resetStatusAlertWrapperState = this.resetStatusAlertWrapperState.bind(
-      this,
-    );
-  }
-
-  resetStatusAlertWrapperState() {
-    this.setState({ open: false });
-    this.inputForm.focus();
-  }
-
-  render() {
-    return (
-      <div>
-        <StatusAlert
-          alertType="info"
-          open={this.state.open}
-          dialog="Close me to input data!"
-          onClose={this.resetStatusAlertWrapperState}
-        />
-        <InputText
-          id="data"
-          name="data"
-          label="Data Input"
-          inputRef={input => {
-            this.inputForm = input;
-          }}
-        />
-      </div>
-    );
-  }
-}
-```
-
-### Different textual input types
-
-```jsx live
-<form>
-  <InputText
-    name="search"
-    label="Search"
-    value="what is paragon"
-    type="search"
-    id="input-search"
-  />
-  <InputText
-    name="email"
-    label="Email"
-    value="paragon@edx.org"
-    type="email"
-    id="input-email"
-  />
-  <InputText
-    name="url"
-    label="Url"
-    value="https://edx.github.io/paragon"
-    type="url"
-    id="input-url"
-  />
-  <InputText
-    name="telephone"
-    label="Telephone"
-    value="1-(555)-555-5555"
-    type="tel"
-    id="input-tel"
-  />
-  <InputText
-    name="password"
-    label="Password"
-    value="hunter2"
-    type="password"
-    id="input-password"
-  />
-  <InputText
-    name="number"
-    label="Number"
-    value={42}
-    type="number"
-    id="input-number"
-  />
-  <InputText
-    name="datetime-local"
-    label="Date and time"
-    value="2017-04-27T13:45:00"
-    type="datetime-local"
-    id="input-datetime-local"
-  />
-  <InputText
-    name="date"
-    label="Date"
-    value="2017-04-27"
-    type="date"
-    id="input-date"
-  />
-  <InputText
-    name="month"
-    label="Month"
-    value="2017-04"
-    type="month"
-    id="input-month"
-  />
-  <InputText
-    name="week"
-    label="Week"
-    value="2017-W33"
-    type="week"
-    id="input-week"
-  />
-  <InputText
-    name="time"
-    label="Time"
-    value="13:45:00"
-    type="time"
-    id="input-time"
-  />
-  <InputText
-    name="color"
-    label="Color"
-    value="#BF472C"
-    type="color"
-    id="input-color"
-  />
-</form>
-```
-
-### Price with step
-
-```jsx live
-<InputText
-  name="price"
-  label="Price"
-  type="number"
-  value={3.5}
-  min={0}
-  step={0.01}
-/>
-```
-
-### Displayed inline
-
-```jsx live
-<InputText name="username" label="Username" value="foobar" inline />
-```
-
-### With input group addons
-
-```jsx live
-<form>
-  <InputText
-    name="username"
-    label="Username"
-    value="foobar"
-    inputGroupPrepend={<div className="input-group-text">{'@'}</div>}
-  />
-  <InputText
-    name="username"
-    label="Username"
-    value="foobar"
-    inputGroupAppend={<div className="input-group-text">{'@example.com'}</div>}
-  />
-  <InputText
-    name="money"
-    label="Money"
-    type="number"
-    value={1000}
-    inputGroupPrepend={<div className="input-group-text">{'$'}</div>}
-    inputGroupAppend={<div className="input-group-text">{'.00'}</div>}
-  />
-  <InputText
-    name="search"
-    label="Search"
-    value="what is paragon"
-    inputGroupAppend={(
-      <Button variant="outline-secondary">Go</Button>
-    )}
-  />
-  <InputText
-    name="username"
-    label="Username"
-    value="foobar"
-    inputGroupAppend={[
-      <div className="input-group-text">
-        <Icon
-          id="checkmark"
-          className="fa fa-check"
-          screenReaderText="Checkmark"
-        />
-      </div>,
-      <Button variant="outline-secondary">Go</Button>,
-    ]}
-  />
-  <InputText
-    name="password"
-    label="Password"
-    value="secret"
-    inputGroupAppend={
-      <div className="input-group-text">
-        <Icon
-          id="checkmark"
-          className="fa fa-check"
-          screenReaderText="Checkmark"
-        />
-      </div>
-    }
-  />
-</form>
-```

package/src/InputText/index.jsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import asInput from '../asInput';
-import withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';
-
-function Text(props) {
-  const {
-    className,
-    inputRef,
-    type,
-    ...others
-  } = props;
-
-  return (
-    <input
-      {...others}
-      className={className}
-      type={type || 'text'}
-      ref={inputRef}
-    />
-  );
-}
-
-Text.propTypes = {
-  className: PropTypes.string,
-  inputRef: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.shape({ current: PropTypes.instanceOf(PropTypes.element) }),
-  ]),
-  type: PropTypes.string,
-};
-
-Text.defaultProps = {
-  className: undefined,
-  inputRef: undefined,
-  type: 'text',
-};
-
-const InputText = asInput(withDeprecatedProps(Text, 'InputText', {
-  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 InputText;