@react-ui-org/react-ui 0.42.0 → 0.44.0

package/src/lib/components/ui/Radio/Radio.jsx

@@ -1,179 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import getRootValidationStateClassName from '../../../helpers/getRootValidationStateClassName';
-import { withProviderContext } from '../../../provider';
-import transferProps from '../../../utils/transferProps';
-import styles from './Radio.scss';
-
-export const Radio = ({
-  changeHandler,
-  disabled,
-  helpText,
-  id,
-  inFormLayout,
-  isLabelVisible,
-  label,
-  layout,
-  options,
-  required,
-  validationState,
-  validationText,
-  value,
-  ...restProps
-}) => (
-  <div
-    className={[
-      styles.root,
-      inFormLayout ? styles.isRootInFormLayout : '',
-      layout === 'horizontal' ? styles.rootLayoutHorizontal : styles.rootLayoutVertical,
-      disabled ? styles.isRootDisabled : '',
-      required ? styles.isRootRequired : '',
-      getRootValidationStateClassName(validationState, styles),
-    ].join(' ')}
-  >
-    <div
-      className={[
-        styles.label,
-        isLabelVisible ? '' : styles.isLabelHidden,
-      ].join(' ')}
-      id={id && `${id}__labelText`}
-    >
-      {label}
-    </div>
-    <div className={styles.field}>
-      <ul className={styles.list}>
-        {
-          options.map((option) => (
-            <li key={option.value}>
-              <label
-                className={styles.option}
-                htmlFor={id && `${id}__item__${option.value}`}
-                id={id && `${id}__item__${option.value}__label`}
-              >
-                <input
-                  {...transferProps(restProps)}
-                  className={styles.input}
-                  checked={(value === option.value) || false}
-                  disabled={disabled || option.disabled}
-                  id={id && `${id}__item__${option.value}`}
-                  name={id}
-                  onChange={changeHandler}
-                  type="radio"
-                  value={option.value}
-                />
-                <span
-                  className={styles.optionLabel}
-                  id={id && `${id}__item__${option.value}__labelText`}
-                >
-                  { option.label }
-                </span>
-              </label>
-            </li>
-          ))
-        }
-      </ul>
-      {helpText && (
-        <div
-          className={styles.helpText}
-          id={id && `${id}__helpText`}
-        >
-          {helpText}
-        </div>
-      )}
-      {validationText && (
-        <div
-          className={styles.validationText}
-          id={id && `${id}__validationText`}
-        >
-          {validationText}
-        </div>
-      )}
-    </div>
-  </div>
-);
-
-Radio.defaultProps = {
-  changeHandler: null,
-  disabled: false,
-  helpText: null,
-  id: undefined,
-  inFormLayout: false,
-  isLabelVisible: true,
-  layout: 'vertical',
-  required: false,
-  validationState: null,
-  validationText: null,
-  value: undefined,
-};
-
-Radio.propTypes = {
-  /**
-   * Function to call when the input has changed.
-   */
-  changeHandler: PropTypes.func,
-  /**
-   * If `true`, the input will be disabled.
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Optional help text.
-   */
-  helpText: PropTypes.node,
-  /**
-   * Prefix for ID of important inner elements: `<ID>__labelText`, `<ID>__helpText`,
-   * `<ID>__validationText`, and all options: `<ID>__item__<VALUE>` (individual inputs),
-   * `<ID>__item__<VALUE>__label`, and `<ID>__item__<VALUE>__labelText`.
-   */
-  id: PropTypes.string,
-  /**
-   * Treat the field differently when it's inside a FormLayout. Do not set manually!
-   */
-  inFormLayout: PropTypes.bool,
-  /**
-   * If `false`, the label will be visually hidden (but remains accessible by assistive
-   * technologies).
-   */
-  isLabelVisible: PropTypes.bool,
-  /**
-   * Label of the group of options.
-   */
-  label: PropTypes.string.isRequired,
-  /**
-   * Layout of the field.
-   */
-  layout: PropTypes.oneOf(['horizontal', 'vertical']),
-  /**
-   * Set of options to be chosen from.
-   */
-  options: PropTypes.arrayOf(PropTypes.shape({
-    disabled: PropTypes.bool,
-    label: PropTypes.string.isRequired,
-    value: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-  })).isRequired,
-  /**
-   * If `true`, the input will be required.
-   */
-  required: PropTypes.bool,
-  /**
-   * Alter the field to provide feedback based on validation result.
-   */
-  validationState: PropTypes.oneOf(['invalid', 'valid', 'warning']),
-  /**
-   * Validation message to be displayed.
-   */
-  validationText: PropTypes.node,
-  /**
-   * Value of the input.
-   */
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
-};
-
-export const RadioWithContext = withProviderContext(Radio, 'Radio');
-
-export default RadioWithContext;

package/src/lib/components/ui/SelectField/SelectField.jsx

@@ -1,214 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import getRootSizeClassName from '../../../helpers/getRootSizeClassName';
-import getRootValidationStateClassName from '../../../helpers/getRootValidationStateClassName';
-import { withProviderContext } from '../../../provider';
-import transferProps from '../../../utils/transferProps';
-import withForwardedRef from '../withForwardedRef';
-import styles from './SelectField.scss';
-
-export const SelectField = ({
-  changeHandler,
-  disabled,
-  forwardedRef,
-  fullWidth,
-  helpText,
-  id,
-  inFormLayout,
-  isLabelVisible,
-  label,
-  layout,
-  options,
-  required,
-  size,
-  validationState,
-  validationText,
-  value,
-  variant,
-  ...restProps
-}) => (
-  <label
-    className={[
-      styles.root,
-      fullWidth ? styles.isRootFullWidth : '',
-      inFormLayout ? styles.isRootInFormLayout : '',
-      layout === 'horizontal' ? styles.rootLayoutHorizontal : styles.rootLayoutVertical,
-      disabled ? styles.isRootDisabled : '',
-      required ? styles.isRootRequired : '',
-      getRootSizeClassName(size, styles),
-      getRootValidationStateClassName(validationState, styles),
-      variant === 'filled' ? styles.rootVariantFilled : styles.rootVariantOutline,
-    ].join(' ')}
-    htmlFor={id}
-    id={id && `${id}__label`}
-  >
-    <div
-      className={[
-        styles.label,
-        isLabelVisible ? '' : styles.isLabelHidden,
-      ].join(' ')}
-      id={id && `${id}__labelText`}
-    >
-      {label}
-    </div>
-    <div className={styles.field}>
-      <div className={styles.inputContainer}>
-        <select
-          {...transferProps(restProps)}
-          className={styles.input}
-          disabled={disabled}
-          id={id}
-          onChange={changeHandler}
-          ref={forwardedRef}
-          required={required}
-          value={value}
-        >
-          {
-            options.map((option) => (
-              <option
-                disabled={option.disabled}
-                id={id && `${id}__item__${option.value}`}
-                key={option.value}
-                value={option.value}
-              >
-                {option.label}
-              </option>
-            ))
-          }
-        </select>
-        <div className={styles.caret}>
-          <span className={styles.caretIcon} />
-        </div>
-        {variant === 'filled' && (
-          <div className={styles.bottomLine} />
-        )}
-      </div>
-      {helpText && (
-        <div
-          className={styles.helpText}
-          id={id && `${id}__helpText`}
-        >
-          {helpText}
-        </div>
-      )}
-      {validationText && (
-        <div
-          className={styles.validationText}
-          id={id && `${id}__validationText`}
-        >
-          {validationText}
-        </div>
-      )}
-    </div>
-  </label>
-);
-
-SelectField.defaultProps = {
-  changeHandler: null,
-  disabled: false,
-  forwardedRef: undefined,
-  fullWidth: false,
-  helpText: null,
-  id: undefined,
-  inFormLayout: false,
-  isLabelVisible: true,
-  layout: 'vertical',
-  required: false,
-  size: 'medium',
-  validationState: null,
-  validationText: null,
-  value: undefined,
-  variant: 'outline',
-};
-
-SelectField.propTypes = {
-  /**
-   * Function to call when the input has changed.
-   */
-  changeHandler: PropTypes.func,
-  /**
-   * If `true`, the input will be disabled.
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Reference forwarded to the `select` element.
-   */
-  forwardedRef: PropTypes.oneOfType([
-    PropTypes.func,
-    // eslint-disable-next-line react/forbid-prop-types
-    PropTypes.shape({ current: PropTypes.any }),
-  ]),
-  /**
-   * If `true`, the field will span the full width of its parent.
-   */
-  fullWidth: PropTypes.bool,
-  /**
-   * Optional help text.
-   */
-  helpText: PropTypes.node,
-  /**
-   * ID of the input HTML element. It also serves as a prefix for important inner elements:
-   * `<ID>__label`, `<ID>__labelText`, `<ID>__helpText`, `<ID>__validationText`, and all options:
-   * `<ID>__item__<VALUE>`.
-   */
-  id: PropTypes.string,
-  /**
-   * Treat the field differently when it's inside a FormLayout. Do not set manually!
-   */
-  inFormLayout: PropTypes.bool,
-  /**
-   * If `false`, the label will be visually hidden (but remains accessible by assistive
-   * technologies).
-   */
-  isLabelVisible: PropTypes.bool,
-  /**
-   * Select field label.
-   */
-  label: PropTypes.string.isRequired,
-  /**
-   * Layout of the field.
-   */
-  layout: PropTypes.oneOf(['horizontal', 'vertical']),
-  /**
-   * Set of options to be chosen from.
-   */
-  options: PropTypes.arrayOf(PropTypes.shape({
-    disabled: PropTypes.bool,
-    label: PropTypes.string.isRequired,
-    value: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-  })).isRequired,
-  /**
-   * If `true`, the input will be required.
-   */
-  required: PropTypes.bool,
-  /**
-   * Size of the field.
-   */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /**
-   * Alter the field to provide feedback based on validation result.
-   */
-  validationState: PropTypes.oneOf(['invalid', 'valid', 'warning']),
-  /**
-   * Validation message to be displayed.
-   */
-  validationText: PropTypes.node,
-  /**
-   * Value of the input.
-   */
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
-  /**
-   * Design variant of the field, further customizable with CSS custom properties.
-   */
-  variant: PropTypes.oneOf(['filled', 'outline']),
-};
-
-export const SelectFieldWithContext = withForwardedRef(withProviderContext(SelectField, 'SelectField'));
-
-export default SelectFieldWithContext;

package/src/lib/components/ui/Toggle/Toggle.jsx

@@ -1,174 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import getRootValidationStateClassName from '../../../helpers/getRootValidationStateClassName';
-import { withProviderContext } from '../../../provider';
-import transferProps from '../../../utils/transferProps';
-import withForwardedRef from '../withForwardedRef';
-import styles from './Toggle.scss';
-
-export const Toggle = ({
-  changeHandler,
-  checked,
-  disabled,
-  forwardedRef,
-  helpText,
-  id,
-  inFormLayout,
-  isLabelVisible,
-  label,
-  labelPosition,
-  layout,
-  required,
-  validationState,
-  validationText,
-  value,
-  ...restProps
-}) => (
-  <label
-    className={[
-      styles.root,
-      inFormLayout ? styles.isRootInFormLayout : '',
-      labelPosition === 'before' ? styles.hasRootLabelBefore : '',
-      layout === 'horizontal' ? styles.rootLayoutHorizontal : styles.rootLayoutVertical,
-      disabled ? styles.isRootDisabled : '',
-      required ? styles.isRootRequired : '',
-      getRootValidationStateClassName(validationState, styles),
-    ].join(' ')}
-    htmlFor={id}
-    id={id && `${id}__label`}
-  >
-    <div className={styles.field}>
-      <input
-        {...transferProps(restProps)}
-        checked={checked}
-        className={styles.input}
-        disabled={disabled}
-        id={id}
-        name={id}
-        onChange={changeHandler}
-        ref={forwardedRef}
-        required={required}
-        type="checkbox"
-        value={value}
-      />
-      <div
-        className={[
-          styles.label,
-          isLabelVisible ? '' : styles.isLabelHidden,
-        ].join(' ')}
-        id={id && `${id}__labelText`}
-      >
-        {label}
-      </div>
-    </div>
-    {helpText && (
-      <div
-        className={styles.helpText}
-        id={id && `${id}__helpText`}
-      >
-        {helpText}
-      </div>
-    )}
-    {validationText && (
-      <div
-        className={styles.validationText}
-        id={id && `${id}__validationText`}
-      >
-        {validationText}
-      </div>
-    )}
-  </label>
-);
-
-Toggle.defaultProps = {
-  changeHandler: null,
-  checked: false,
-  disabled: false,
-  forwardedRef: undefined,
-  helpText: null,
-  id: undefined,
-  inFormLayout: false,
-  isLabelVisible: true,
-  labelPosition: 'after',
-  layout: 'vertical',
-  required: false,
-  validationState: null,
-  validationText: null,
-  value: undefined,
-};
-
-Toggle.propTypes = {
-  /**
-   * Function to call when the input is toggled.
-   */
-  changeHandler: PropTypes.func,
-  /**
-   * If `true`, the input will be checked.
-   */
-  checked: PropTypes.bool,
-  /**
-   * If `true`, the input will be disabled.
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Reference forwarded to the `input` element.
-   */
-  forwardedRef: PropTypes.oneOfType([
-    PropTypes.func,
-    // eslint-disable-next-line react/forbid-prop-types
-    PropTypes.shape({ current: PropTypes.any }),
-  ]),
-  /**
-   * Optional help text.
-   */
-  helpText: PropTypes.node,
-  /**
-   * ID of the input HTML element. It also serves as a prefix for important inner elements:
-   * `<ID>__label`, `<ID>__labelText`, `<ID>__helpText`, and `<ID>__validationText`.
-   */
-  id: PropTypes.string,
-  /**
-   * Treat the field differently when it's inside a FormLayout. Do not set manually!
-   */
-  inFormLayout: PropTypes.bool,
-  /**
-   * If `false`, the label will be visually hidden (but remains accessible by assistive
-   * technologies).
-   */
-  isLabelVisible: PropTypes.bool,
-  /**
-   * Toggle label.
-   */
-  label: PropTypes.string.isRequired,
-  /**
-   * Placement of the label relative to the input.
-   */
-  labelPosition: PropTypes.oneOf(['before', 'after']),
-  /**
-   * Layout of the field. It has impact only on Toggle inside a FormLayout.
-   */
-  layout: PropTypes.oneOf(['horizontal', 'vertical']),
-  /**
-   * If `true`, the input will be required.
-   */
-  required: PropTypes.bool,
-  /**
-   * Alter the field to provide feedback based on validation result.
-   */
-  validationState: PropTypes.oneOf(['invalid', 'valid', 'warning']),
-  /**
-   * Validation message to be displayed.
-   */
-  validationText: PropTypes.node,
-  /**
-   * Value of the input.
-   */
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
-};
-
-export const ToggleWithContext = withForwardedRef(withProviderContext(Toggle, 'Toggle'));
-
-export default ToggleWithContext;