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

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

@@ -1,191 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import getRootSizeClassName from '../../../helpers/getRootSizeClassName';
-import getRootColorClassName from '../../../helpers/getRootColorClassName';
-import { withProviderContext } from '../../../provider';
-import transferProps from '../../../utils/transferProps';
-import withForwardedRef from '../withForwardedRef';
-import getRootLabelVisibilityClassName from './helpers/getRootLabelVisibilityClassName';
-import getRootPriorityClassName from './helpers/getRootPriorityClassName';
-import styles from './Button.scss';
-
-export const Button = ({
-  afterLabel,
-  beforeLabel,
-  block,
-  clickHandler,
-  disabled,
-  endCorner,
-  forwardedRef,
-  grouped,
-  id,
-  label,
-  labelVisibility,
-  loadingIcon,
-  priority,
-  size,
-  startCorner,
-  type,
-  color,
-  ...restProps
-}) => (
-  /* No worries, `type` is always assigned correctly through props. */
-  /* eslint-disable react/button-has-type */
-  <button
-    {...transferProps(restProps)}
-    className={
-      priority === 'link'
-        ? [
-          styles.root,
-          getRootPriorityClassName(priority, styles),
-        ].join(' ')
-        : [
-          styles.root,
-          getRootPriorityClassName(priority, styles),
-          getRootColorClassName(color, styles),
-          getRootSizeClassName(size, styles),
-          getRootLabelVisibilityClassName(labelVisibility, styles),
-          block ? styles.rootBlock : '',
-          grouped ? styles.rootGrouped : '',
-          loadingIcon ? styles.isRootLoading : '',
-        ].join(' ')
-    }
-    disabled={disabled || !!loadingIcon}
-    id={id}
-    onClick={clickHandler}
-    ref={forwardedRef}
-    type={type}
-  >
-    {priority !== 'link' && startCorner && (
-      <span className={styles.startCorner}>
-        {startCorner}
-      </span>
-    )}
-    {beforeLabel && (
-      <span className={styles.beforeLabel}>
-        {beforeLabel}
-      </span>
-    )}
-    <span
-      className={styles.label}
-      {...(id && { id: `${id}__labelText` })}
-    >
-      {label}
-    </span>
-    {afterLabel && (
-      <span className={styles.afterLabel}>
-        {afterLabel}
-      </span>
-    )}
-    {priority !== 'link' && endCorner && (
-      <span className={styles.endCorner}>
-        {endCorner}
-      </span>
-    )}
-    {priority !== 'link' && loadingIcon && (
-      <span className={styles.loadingIcon}>
-        {loadingIcon}
-      </span>
-    )}
-  </button>
-  /* eslint-enable react/button-has-type */
-);
-
-Button.defaultProps = {
-  afterLabel: null,
-  beforeLabel: null,
-  block: false,
-  clickHandler: null,
-  color: 'primary',
-  disabled: false,
-  endCorner: null,
-  forwardedRef: undefined,
-  grouped: false,
-  id: undefined,
-  labelVisibility: 'all',
-  loadingIcon: null,
-  priority: 'filled',
-  size: 'medium',
-  startCorner: null,
-  type: 'button',
-};
-
-Button.propTypes = {
-  /**
-   * Element to be displayed after label, eg. an icon.
-   */
-  afterLabel: PropTypes.node,
-  /**
-   * Element to be displayed before label, eg. an icon.
-   */
-  beforeLabel: PropTypes.node,
-  /**
-   * If `true`, the button will span the full width of its parent.
-   */
-  block: PropTypes.bool,
-  /**
-   * Function to call when the button is clicked.
-   */
-  clickHandler: PropTypes.func,
-  /**
-   * [Color variant](/foundation/colors#component-colors) to clarify importance and meaning of the button.
-   */
-  color: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
-  /**
-   * If `true`, the button will be disabled.
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Element to be displayed in the top right corner.
-   */
-  endCorner: PropTypes.node,
-  /**
-   * Reference forwarded to the `button` element.
-   */
-  forwardedRef: PropTypes.oneOfType([
-    PropTypes.func,
-    // eslint-disable-next-line react/forbid-prop-types
-    PropTypes.shape({ current: PropTypes.any }),
-  ]),
-  /**
-   * Treat button differently when it's inside `ButtonGroup`. Do not set manually!
-   */
-  grouped: PropTypes.bool,
-  /**
-   * ID of the root HTML element.
-   */
-  id: PropTypes.string,
-  /**
-   * Button label.
-   */
-  label: PropTypes.string.isRequired,
-  /**
-   * Defines when the button label should be visible.
-   */
-  labelVisibility: PropTypes.oneOf(['all', 'desktop', 'none']),
-  /**
-   * Element to be displayed as a loading icon. When defined, it implies the button is in the
-   * loading state.
-   */
-  loadingIcon: PropTypes.node,
-  /**
-   * Visual priority to highlight or suppress the button.
-   */
-  priority: PropTypes.oneOf(['filled', 'outline', 'flat', 'link']),
-  /**
-   * Size of the button.
-   */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /**
-   * Element to be displayed in the top left corner.
-   */
-  startCorner: PropTypes.node,
-  /**
-   * Set the HTML `type` attribute of the `button` element.
-   */
-  type: PropTypes.oneOf(['button', 'submit']),
-};
-
-export const ButtonWithContext = withForwardedRef(withProviderContext(Button, 'Button'));
-
-export default ButtonWithContext;

package/src/lib/components/ui/Button/_base.scss

@@ -1,154 +0,0 @@
-@use 'sass:map';
-@use '../../../styles/tools/accessibility';
-@use '../../../styles/tools/breakpoint';
-@use 'settings';
-@use 'theme';
-@use 'tools';
-
-.root {
-  @include tools.button();
-}
-
-.label {
-  display: block;
-}
-
-.beforeLabel,
-.afterLabel,
-.startCorner,
-.endCorner,
-.loadingIcon {
-  display: flex;
-  align-items: baseline;
-  justify-content: center;
-}
-
-.beforeLabel {
-  margin-right: settings.$icon-spacing;
-}
-
-.afterLabel,
-.loadingIcon {
-  margin-left: settings.$icon-spacing;
-}
-
-.startCorner,
-.endCorner {
-  position: absolute;
-  top: -0.35rem;
-}
-
-.startCorner {
-  left: 0;
-  margin-left: -0.35rem;
-}
-
-.endCorner {
-  right: 0;
-  margin-right: -0.35rem;
-}
-
-.rootSizeSmall {
-  @include tools.button-size(small);
-}
-
-.rootSizeMedium {
-  @include tools.button-size(medium);
-}
-
-.rootSizeLarge {
-  @include tools.button-size(large);
-}
-
-.rootBlock {
-  width: 100%;
-}
-
-.rootBlock.withLabelHiddenMobile {
-  @include breakpoint.up(settings.$breakpoint) {
-    width: 100%;
-  }
-}
-
-.rootGrouped {
-  z-index: map.get(settings.$group-z-indexes, button);
-
-  &:not(:first-child) {
-    margin-left: var(--local-gap);
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  &:not(:last-child) {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  &:focus,
-  &:not(:disabled):hover {
-    z-index: map.get(settings.$group-z-indexes, button-hover);
-  }
-}
-
-.rootGrouped .startCorner,
-.rootGrouped .endCorner {
-  z-index: map.get(settings.$group-z-indexes, button-overflowing-elements);
-}
-
-.withLabelHidden .label,
-.withLabelHiddenMobile .label {
-  @include accessibility.hide-text();
-}
-
-.withLabelHiddenMobile .label {
-  @include breakpoint.up(settings.$breakpoint) {
-    position: relative;
-    width: auto;
-    height: auto;
-  }
-}
-
-.withLabelHidden .beforeLabel,
-.withLabelHidden .afterLabel,
-.withLabelHiddenMobile .beforeLabel,
-.withLabelHiddenMobile .afterLabel {
-  margin-right: 0;
-  margin-left: 0;
-}
-
-.withLabelHiddenMobile .beforeLabel {
-  @include breakpoint.up(settings.$breakpoint) {
-    margin-right: settings.$icon-spacing;
-  }
-}
-
-.withLabelHiddenMobile .afterLabel {
-  @include breakpoint.up(settings.$breakpoint) {
-    margin-left: settings.$icon-spacing;
-  }
-}
-
-.withLabelHidden.isRootLoading .loadingIcon,
-.withLabelHiddenMobile.isRootLoading .loadingIcon {
-  margin-left: 0;
-}
-
-.withLabelHidden.isRootLoading .beforeLabel,
-.withLabelHidden.isRootLoading .afterLabel,
-.withLabelHiddenMobile.isRootLoading .beforeLabel,
-.withLabelHiddenMobile.isRootLoading .afterLabel {
-  display: none;
-}
-
-.withLabelHiddenMobile.isRootLoading .beforeLabel,
-.withLabelHiddenMobile.isRootLoading .afterLabel {
-  @include breakpoint.up(settings.$breakpoint) {
-    display: flex;
-  }
-}
-
-.withLabelHiddenMobile.isRootLoading .loadingIcon {
-  @include breakpoint.up(settings.$breakpoint) {
-    margin-left: settings.$icon-spacing;
-  }
-}

package/src/lib/components/ui/Button/helpers/getRootLabelVisibilityClassName.js

@@ -1,11 +0,0 @@
-export default (labelVisibility, styles) => {
-  if (labelVisibility === 'desktop') {
-    return styles.withLabelHiddenMobile;
-  }
-
-  if (labelVisibility === 'none') {
-    return styles.withLabelHidden;
-  }
-
-  return null;
-};

package/src/lib/components/ui/ButtonGroup/index.js

@@ -1 +0,0 @@
-export { default } from './ButtonGroup';

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

@@ -1,173 +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 './CheckboxField.scss';
-
-export const CheckboxField = ({
-  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}
-        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>
-);
-
-CheckboxField.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,
-};
-
-CheckboxField.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,
-  /**
-   * Checkbox field 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 CheckboxField 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 CheckboxFieldWithContext = withForwardedRef(withProviderContext(CheckboxField, 'CheckboxField'));
-
-export default CheckboxFieldWithContext;

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

@@ -1,158 +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 './FileInputField.scss';
-
-export const FileInputField = ({
-  changeHandler,
-  disabled,
-  forwardedRef,
-  fullWidth,
-  helpText,
-  id,
-  inFormLayout,
-  isLabelVisible,
-  label,
-  layout,
-  required,
-  validationState,
-  validationText,
-  ...restProps
-}) => (
-  <label
-    className={[
-      styles.root,
-      fullWidth ? styles.isRootFullWidth : '',
-      inFormLayout ? styles.isRootInFormLayout : '',
-      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.label,
-        isLabelVisible ? '' : styles.isLabelHidden,
-      ].join(' ')}
-      id={id && `${id}__labelText`}
-    >
-      {label}
-    </div>
-    <div className={styles.field}>
-      <div className={styles.inputContainer}>
-        <input
-          {...transferProps(restProps)}
-          className={styles.input}
-          disabled={disabled}
-          id={id}
-          onChange={changeHandler}
-          ref={forwardedRef}
-          required={required}
-          type="file"
-        />
-      </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>
-);
-
-FileInputField.defaultProps = {
-  changeHandler: null,
-  disabled: false,
-  forwardedRef: undefined,
-  fullWidth: false,
-  helpText: null,
-  id: undefined,
-  inFormLayout: false,
-  isLabelVisible: true,
-  layout: 'vertical',
-  required: false,
-  validationState: null,
-  validationText: null,
-};
-
-FileInputField.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 `input` 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`, 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,
-  /**
-   * Text field label.
-   */
-  label: PropTypes.string.isRequired,
-  /**
-   * Layout of the field.
-   */
-  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,
-};
-
-export const FileInputFieldWithContext = withForwardedRef(withProviderContext(FileInputField, 'FileInputField'));
-
-export default FileInputFieldWithContext;