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

package/src/lib/components/Text/_helpers/getRootClampClassName.js

@@ -0,0 +1,11 @@
+export const getRootClampClassName = (lines, styles) => {
+  if (lines === 1) {
+    return styles.rootClampSingleLine;
+  }
+
+  if (lines > 1) {
+    return styles.rootClampMultiLine;
+  }
+
+  return null;
+};

package/src/lib/components/Text/{helpers → _helpers}/getRootHyphensClassName.js

@@ -1,4 +1,4 @@
-export default (hyphens, styles) => {
+export const getRootHyphensClassName = (hyphens, styles) => {
   if (hyphens === 'auto') {
     return styles.rootHyphensAuto;
   }

package/src/lib/components/Text/{helpers → _helpers}/getRootWordWrappingClassName.js

@@ -1,4 +1,4 @@
-export default (wordWrapping, styles) => {
+export const getRootWordWrappingClassName = (wordWrapping, styles) => {
   if (wordWrapping === 'anywhere') {
     return styles.rootWordWrappingAnywhere;
   }

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

@@ -350,7 +350,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 `textarea` HTML element. This enables making the component
+passed to the `<textarea>` HTML element. This enables making the component
 interactive and helps improve its [accessibility](#forwarding-html-attributes).
 
 <Props table of={TextArea} />

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 { 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,7 +192,10 @@ 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.
    */

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 { 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,29 +37,30 @@ export const TextField = ({
 
   return (
     <label
-      className={[
+      className={classNames(
         styles.root,
-        fullWidth ? styles.isRootFullWidth : '',
-        hasSmallInput ? styles.hasRootSmallInput : '',
-        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}

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/{Link/Link.jsx → TextLink/TextLink.jsx}

@@ -1,13 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import transferProps from '../../utils/transferProps';
 import { withProviderContext } from '../../provider';
-import styles from './Link.scss';
+import { transferProps } from '../_helpers/transferProps';
+import styles from './TextLink.scss';
 
-export const Link = ({
-  children,
+export const TextLink = ({
   href,
   id,
+  label,
   ...restProps
 }) => (
   <a
@@ -16,20 +16,15 @@ export const Link = ({
     className={styles.root}
     id={id}
   >
-    {children}
+    {label}
   </a>
 );
 
-Link.defaultProps = {
-  children: null,
+TextLink.defaultProps = {
   id: undefined,
 };
 
-Link.propTypes = {
-  /**
-   * Content of the link.
-   */
-  children: PropTypes.node,
+TextLink.propTypes = {
   /**
    * Link's `href` attribute.
    */
@@ -38,8 +33,12 @@ Link.propTypes = {
    * ID of the root HTML element.
    */
   id: PropTypes.string,
+  /**
+   * Link label.
+   */
+  label: PropTypes.string.isRequired,
 };
 
-export const LinkWithContext = withProviderContext(Link, 'Link');
+export const LinkWithContext = withProviderContext(TextLink, 'Link');
 
 export default LinkWithContext;

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

@@ -44,7 +44,7 @@ See [API](#api) for all available options.
 - Use the toggle only for boolean (true/false) input **with an immediate effect
   (without confirmation)**. To toggle things on or off in forms that require to
   be submitted by a button, use rather the
-  [CheckboxField](/components/ui/checkbox-field) component.
+  [CheckboxField](/components/checkbox-field) component.
 
 - **Use positive wording for the toggle label,** so that it's clear what will
   happen when the user turns on the toggle. Avoid negations such as “Don't send
@@ -63,7 +63,7 @@ See [API](#api) for all available options.
 - The toggle is designed for **switching things on and off.** Don't use it to
   switch between two different things that cannot be described as on or off
   using a single label, e.g. different viewing modes. In such cases, consider
-  using the [ButtonGroup](/components/ui/button-group) component.
+  using the [ButtonGroup](/components/button-group) component.
 
 ## Help Text
 
@@ -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 { 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