@react-ui-org/react-ui 0.44.1 → 0.47.0

package/src/lib/components/TextArea/TextArea.jsx

@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import getRootSizeClassName from '../../helpers/getRootSizeClassName';
-import getRootValidationStateClassName from '../../helpers/getRootValidationStateClassName';
-import { resolveContextOrProp } from '../../helpers/resolveContextOrProp';
-import { withProviderContext } from '../../provider';
-import transferProps from '../../utils/transferProps';
+import { withGlobalProps } from '../../provider';
+import { classNames } from '../../utils/classNames';
+import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
+import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
+import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
+import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
 import withForwardedRef from '../withForwardedRef';
 import styles from './TextArea.scss';
@@ -33,27 +34,27 @@ export const TextArea = ({
 
   return (
     <label
-      className={[
+      className={classNames(
         styles.root,
-        fullWidth ? styles.isRootFullWidth : '',
-        context ? styles.isRootInFormLayout : '',
+        fullWidth && styles.isRootFullWidth,
+        context && styles.isRootInFormLayout,
         resolveContextOrProp(context && context.layout, layout) === 'horizontal'
           ? styles.rootLayoutHorizontal
           : styles.rootLayoutVertical,
-        disabled ? styles.isRootDisabled : '',
-        required ? styles.isRootRequired : '',
+        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={[
+        className={classNames(
           styles.label,
-          isLabelVisible ? '' : styles.isLabelHidden,
-        ].join(' ')}
+          !isLabelVisible && styles.isLabelHidden,
+        )}
         id={id && `${id}__labelText`}
       >
         {label}
@@ -191,13 +192,16 @@ TextArea.propTypes = {
   /**
    * Value of the input.
    */
-  value: PropTypes.string,
+  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 TextAreaWithContext = withForwardedRef(withProviderContext(TextArea, 'TextArea'));
+export const TextAreaWithGlobalProps = withForwardedRef(withGlobalProps(TextArea, 'TextArea'));
 
-export default TextAreaWithContext;
+export default TextAreaWithGlobalProps;

package/src/lib/components/TextArea/TextArea.scss

@@ -1,95 +1,95 @@
-@use '../../styles/tools/form-fields/box-field-elements';
-@use '../../styles/tools/form-fields/box-field-layout';
-@use '../../styles/tools/form-fields/box-field-sizes';
-@use '../../styles/tools/form-fields/foundation';
-@use '../../styles/tools/form-fields/variants';
-@use '../../styles/tools/accessibility';
+@use "../../styles/tools/form-fields/box-field-elements";
+@use "../../styles/tools/form-fields/box-field-layout";
+@use "../../styles/tools/form-fields/box-field-sizes";
+@use "../../styles/tools/form-fields/foundation";
+@use "../../styles/tools/form-fields/variants";
+@use "../../styles/tools/accessibility";
 
 // Foundation
 .root {
-  @include foundation.root();
+    @include foundation.root();
 }
 
 .label {
-  @include foundation.label();
+    @include foundation.label();
 }
 
 .inputContainer {
-  @include box-field-elements.input-container();
+    @include box-field-elements.input-container();
 }
 
 .input {
-  @include box-field-elements.input();
-  @include box-field-elements.input-textarea();
+    @include box-field-elements.input();
+    @include box-field-elements.input-textarea();
 }
 
 .bottomLine {
-  @include box-field-elements.bottom-line();
+    @include box-field-elements.bottom-line();
 }
 
 .helpText,
 .validationText {
-  @include foundation.help-text();
+    @include foundation.help-text();
 }
 
 .isRootRequired .label {
-  @include foundation.label-required();
+    @include foundation.label-required();
 }
 
 // Visual variants
 .rootVariantFilled {
-  @include variants.visual(box, $variant: filled);
+    @include variants.visual(box, $variant: filled);
 }
 
 .rootVariantOutline {
-  @include variants.visual(box, $variant: outline);
+    @include variants.visual(box, $variant: outline);
 }
 
 // States
 .isRootStateInvalid {
-  @include variants.validation(invalid);
+    @include variants.validation(invalid);
 }
 
 .isRootStateValid {
-  @include variants.validation(valid);
+    @include variants.validation(valid);
 }
 
 .isRootStateWarning {
-  @include variants.validation(warning);
+    @include variants.validation(warning);
 }
 
 // Invisible label
 .isLabelHidden {
-  @include accessibility.hide-text();
+    @include accessibility.hide-text();
 }
 
 // Layouts
 .rootLayoutVertical,
 .rootLayoutHorizontal {
-  @include box-field-layout.vertical();
+    @include box-field-layout.vertical();
 }
 
 .rootLayoutHorizontal {
-  @include box-field-layout.horizontal();
+    @include box-field-layout.horizontal();
 }
 
 .isRootFullWidth {
-  @include box-field-layout.full-width();
+    @include box-field-layout.full-width();
 }
 
 .isRootInFormLayout {
-  @include box-field-layout.in-form-layout();
+    @include box-field-layout.in-form-layout();
 }
 
 // Sizes
 .rootSizeSmall {
-  @include box-field-sizes.size(small, $is-multiline: true);
+    @include box-field-sizes.size(small, $is-multiline: true);
 }
 
 .rootSizeMedium {
-  @include box-field-sizes.size(medium, $is-multiline: true);
+    @include box-field-sizes.size(medium, $is-multiline: true);
 }
 
 .rootSizeLarge {
-  @include box-field-sizes.size(large, $is-multiline: true);
+    @include box-field-sizes.size(large, $is-multiline: true);
 }

package/src/lib/components/TextField/README.mdx

@@ -493,7 +493,7 @@ It's possible to disable the whole input.
 
 In addition to the options below, you can specify [React synthetic events] or
 any custom HTML attributes that do not interfere with the API, and they will be
-passed to the `input` HTML element. This enables making the component
+passed to the `<input>` HTML element. This enables making the component
 interactive and helps improve its [accessibility](#forwarding-html-attributes).
 
 <Props table of={TextField} />

package/src/lib/components/TextField/TextField.jsx

@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import getRootSizeClassName from '../../helpers/getRootSizeClassName';
-import getRootValidationStateClassName from '../../helpers/getRootValidationStateClassName';
-import { resolveContextOrProp } from '../../helpers/resolveContextOrProp';
-import { withProviderContext } from '../../provider';
-import transferProps from '../../utils/transferProps';
+import { withGlobalProps } from '../../provider';
+import { classNames } from '../../utils/classNames';
+import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
+import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
+import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
+import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
 import withForwardedRef from '../withForwardedRef';
 import styles from './TextField.scss';
@@ -36,30 +37,30 @@ export const TextField = ({
 
   return (
     <label
-      className={[
+      className={classNames(
         styles.root,
-        fullWidth ? styles.isRootFullWidth : '',
-        hasSmallInput ? styles.hasRootSmallInput : '',
-        inputSize ? styles.hasRootCustomInputSize : '',
-        context ? styles.isRootInFormLayout : '',
+        fullWidth && styles.isRootFullWidth,
+        hasSmallInput && styles.hasRootSmallInput,
+        inputSize && styles.hasRootCustomInputSize,
+        context && styles.isRootInFormLayout,
         resolveContextOrProp(context && context.layout, layout) === 'horizontal'
           ? styles.rootLayoutHorizontal
           : styles.rootLayoutVertical,
-        disabled ? styles.isRootDisabled : '',
-        required ? styles.isRootRequired : '',
+        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`}
       {...(inputSize ? { style: { '--rui-custom-input-size': inputSize } } : {})}
     >
       <div
-        className={[
+        className={classNames(
           styles.label,
-          isLabelVisible ? '' : styles.isLabelHidden,
-        ].join(' ')}
+          !isLabelVisible && styles.isLabelHidden,
+        )}
         id={id && `${id}__labelText`}
       >
         {label}
@@ -208,6 +209,6 @@ TextField.propTypes = {
   variant: PropTypes.oneOf(['filled', 'outline']),
 };
 
-export const TextFieldWithContext = withForwardedRef(withProviderContext(TextField, 'TextField'));
+export const TextFieldWithGlobalProps = withForwardedRef(withGlobalProps(TextField, 'TextField'));
 
-export default TextFieldWithContext;
+export default TextFieldWithGlobalProps;

package/src/lib/components/TextField/TextField.scss

@@ -1,102 +1,102 @@
-@use '../../styles/tools/form-fields/box-field-elements';
-@use '../../styles/tools/form-fields/box-field-layout';
-@use '../../styles/tools/form-fields/box-field-sizes';
-@use '../../styles/tools/form-fields/foundation';
-@use '../../styles/tools/form-fields/variants';
-@use '../../styles/tools/accessibility';
+@use "../../styles/tools/form-fields/box-field-elements";
+@use "../../styles/tools/form-fields/box-field-layout";
+@use "../../styles/tools/form-fields/box-field-sizes";
+@use "../../styles/tools/form-fields/foundation";
+@use "../../styles/tools/form-fields/variants";
+@use "../../styles/tools/accessibility";
 
 // Foundation
 .root {
-  @include foundation.root();
+    @include foundation.root();
 }
 
 .label {
-  @include foundation.label();
+    @include foundation.label();
 }
 
 .inputContainer {
-  @include box-field-elements.input-container();
+    @include box-field-elements.input-container();
 }
 
 .input {
-  @include box-field-elements.input();
+    @include box-field-elements.input();
 }
 
 .bottomLine {
-  @include box-field-elements.bottom-line();
+    @include box-field-elements.bottom-line();
 }
 
 .helpText,
 .validationText {
-  @include foundation.help-text();
+    @include foundation.help-text();
 }
 
 .hasRootCustomInputSize .input {
-  @include box-field-elements.input-size();
+    @include box-field-elements.input-size();
 }
 
 .isRootRequired .label {
-  @include foundation.label-required();
+    @include foundation.label-required();
 }
 
 // Variants
 .rootVariantFilled {
-  @include variants.visual(box, $variant: filled);
+    @include variants.visual(box, $variant: filled);
 }
 
 .rootVariantOutline {
-  @include variants.visual(box, $variant: outline);
+    @include variants.visual(box, $variant: outline);
 }
 
 // States
 .isRootStateInvalid {
-  @include variants.validation(invalid);
+    @include variants.validation(invalid);
 }
 
 .isRootStateValid {
-  @include variants.validation(valid);
+    @include variants.validation(valid);
 }
 
 .isRootStateWarning {
-  @include variants.validation(warning);
+    @include variants.validation(warning);
 }
 
 // Invisible label
 .isLabelHidden {
-  @include accessibility.hide-text();
+    @include accessibility.hide-text();
 }
 
 // Layouts
 .rootLayoutVertical,
 .rootLayoutHorizontal {
-  @include box-field-layout.vertical();
+    @include box-field-layout.vertical();
 }
 
 .rootLayoutHorizontal {
-  @include box-field-layout.horizontal();
+    @include box-field-layout.horizontal();
 }
 
 .isRootFullWidth {
-  @include box-field-layout.full-width();
+    @include box-field-layout.full-width();
 }
 
 .isRootInFormLayout {
-  @include box-field-layout.in-form-layout();
+    @include box-field-layout.in-form-layout();
 }
 
 .hasRootSmallInput.rootLayoutHorizontal {
-  @include box-field-layout.horizontal-with-small-input();
+    @include box-field-layout.horizontal-with-small-input();
 }
 
 // Sizes
 .rootSizeSmall {
-  @include box-field-sizes.size(small);
+    @include box-field-sizes.size(small);
 }
 
 .rootSizeMedium {
-  @include box-field-sizes.size(medium);
+    @include box-field-sizes.size(medium);
 }
 
 .rootSizeLarge {
-  @include box-field-sizes.size(large);
+    @include box-field-sizes.size(large);
 }

package/src/lib/components/TextLink/README.mdx

@@ -0,0 +1,77 @@
+---
+name: TextLink
+menu: 'Actions'
+route: /components/text-link
+---
+
+# TextLink
+
+import {
+  Playground,
+  Props,
+} from 'docz'
+import { TextLink } from './TextLink'
+
+TextLink allows users to follow navigation.
+
+## Basic Usage
+
+To implement the TextLink component, you need to import it first:
+
+```js
+import { TextLink } from '@react-ui-org/react-ui';
+```
+
+And use it:
+
+<Playground>
+  <TextLink
+    href="/contribute/guidelines"
+    label="How can I contribute to React UI?"
+  />
+</Playground>
+
+See [API](#api) for all available options.
+
+## General Guidelines
+
+**Avoid using links for actions**, use a [Button](/components/button)
+instead. This is because users expect navigation to happen when clicking on
+something what looks like a link.
+
+## Custom Routing
+
+It's common to use custom function for routing within SPAs. Use the
+`onClick` option to provide such function.
+
+<Playground>
+  <TextLink
+    href="/contribute/guidelines"
+    label="This link is controlled by custom function"
+    onClick={(event) => {
+      event.preventDefault();
+      alert('You will be redirected.')
+      window.location = event.currentTarget.getAttribute('href');
+    }}
+  />
+</Playground>
+
+## API
+
+In addition to the options below, you can specify [React synthetic events] or
+any custom HTML attributes that do not interfere with the API, and they will be
+passed to the `<a>` HTML element. This enables making the component interactive
+and helps improve its accessibility.
+
+<Props table of={TextLink} />
+
+## Theming
+
+| Custom Property                          | Description                       |
+|------------------------------------------|-----------------------------------|
+| `--rui-TextLink__color`                  | Text color                        |
+| `--rui-TextLink__text-decoration`        | Text decoration, e.g. underline   |
+| `--rui-TextLink--hover__color`           | Text color on hover               |
+| `--rui-TextLink--hover__text-decoration` | Text decoration on hover          |
+
+[React synthetic events]: https://reactjs.org/docs/events.html

package/src/lib/components/TextLink/TextLink.jsx

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { withGlobalProps } from '../../provider';
+import { transferProps } from '../_helpers/transferProps';
+import styles from './TextLink.scss';
+
+export const TextLink = ({
+  href,
+  id,
+  label,
+  ...restProps
+}) => (
+  <a
+    {...transferProps(restProps)}
+    href={href}
+    className={styles.root}
+    id={id}
+  >
+    {label}
+  </a>
+);
+
+TextLink.defaultProps = {
+  id: undefined,
+};
+
+TextLink.propTypes = {
+  /**
+   * Link's `href` attribute.
+   */
+  href: PropTypes.string.isRequired,
+  /**
+   * ID of the root HTML element.
+   */
+  id: PropTypes.string,
+  /**
+   * Link label.
+   */
+  label: PropTypes.string.isRequired,
+};
+
+export const LinkWithGlobalProps = withGlobalProps(TextLink, 'TextLink');
+
+export default LinkWithGlobalProps;

package/src/lib/components/TextLink/TextLink.scss

@@ -0,0 +1,11 @@
+@use "theme";
+
+.root {
+    text-decoration: theme.$text-decoration;
+    color: theme.$color;
+
+    &:hover {
+        text-decoration: theme.$hover-text-decoration;
+        color: theme.$hover-color;
+    }
+}

package/src/lib/components/TextLink/_theme.scss

@@ -0,0 +1,4 @@
+$color: var(--rui-TextLink__color);
+$text-decoration: var(--rui-TextLink__text-decoration);
+$hover-color: var(--rui-TextLink--hover__color);
+$hover-text-decoration: var(--rui-TextLink--hover__text-decoration);

package/src/lib/components/TextLink/index.js

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

package/src/lib/components/Toggle/README.mdx

@@ -181,7 +181,7 @@ Disabled state makes the input unavailable.
 
 In addition to the options below, you can specify [React synthetic events] or
 any custom HTML attributes that do not interfere with the API, and they will be
-passed to the `input` HTML element. This enables making the component
+passed to the `<input>` HTML element. This enables making the component
 interactive and helps improve its accessibility.
 
 <Props table of={Toggle} />

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

@@ -1,8 +1,9 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import getRootValidationStateClassName from '../../helpers/getRootValidationStateClassName';
-import { withProviderContext } from '../../provider';
-import transferProps from '../../utils/transferProps';
+import { withGlobalProps } from '../../provider';
+import { classNames } from '../../utils/classNames';
+import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
+import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
 import withForwardedRef from '../withForwardedRef';
 import styles from './Toggle.scss';
@@ -26,19 +27,28 @@ export const Toggle = ({
 
   return (
     <label
-      className={[
+      className={classNames(
         styles.root,
-        context ? styles.isRootInFormLayout : '',
+        context && styles.isRootInFormLayout,
         context && context.layout === 'horizontal' ? styles.rootLayoutHorizontal : styles.rootLayoutVertical,
-        labelPosition === 'before' ? styles.hasRootLabelBefore : '',
-        disabled ? styles.isRootDisabled : '',
-        required ? styles.isRootRequired : '',
+        labelPosition === 'before' && styles.hasRootLabelBefore,
+        disabled && styles.isRootDisabled,
+        required && styles.isRootRequired,
         getRootValidationStateClassName(validationState, styles),
-      ].join(' ')}
+      )}
       htmlFor={id}
       id={id && `${id}__label`}
     >
       <div className={styles.field}>
+        <div
+          className={classNames(
+            styles.label,
+            !isLabelVisible && styles.isLabelHidden,
+          )}
+          id={id && `${id}__labelText`}
+        >
+          {label}
+        </div>
         <input
           {...transferProps(restProps)}
           checked={checked}
@@ -51,15 +61,6 @@ export const Toggle = ({
           type="checkbox"
           value={value}
         />
-        <div
-          className={[
-            styles.label,
-            isLabelVisible ? '' : styles.isLabelHidden,
-          ].join(' ')}
-          id={id && `${id}__labelText`}
-        >
-          {label}
-        </div>
       </div>
       {helpText && (
         <div
@@ -158,6 +159,6 @@ Toggle.propTypes = {
   ]),
 };
 
-export const ToggleWithContext = withForwardedRef(withProviderContext(Toggle, 'Toggle'));
+export const ToggleWithGlobalProps = withForwardedRef(withGlobalProps(Toggle, 'Toggle'));
 
-export default ToggleWithContext;
+export default ToggleWithGlobalProps;