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

package/src/lib/components/Card/Card.jsx

@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import getRootColorClassName from '../../helpers/getRootColorClassName';
-import { withProviderContext } from '../../provider';
+import { withGlobalProps } from '../../provider';
+import { classNames } from '../../utils/classNames';
+import { getRootColorClassName } from '../_helpers/getRootColorClassName';
 import styles from './Card.scss';
 
 export const Card = ({
@@ -13,13 +14,13 @@ export const Card = ({
   color,
 }) => (
   <div
-    className={[
+    className={classNames(
       styles.root,
       getRootColorClassName(color, styles),
-      dense ? styles.rootDense : '',
-      raised ? styles.rootRaised : '',
-      disabled ? styles.isDisabled : '',
-    ].join(' ')}
+      dense && styles.rootDense,
+      raised && styles.rootRaised,
+      disabled && styles.isDisabled,
+    )}
     id={id}
   >
     {children}
@@ -66,6 +67,6 @@ Card.propTypes = {
   raised: PropTypes.bool,
 };
 
-export const CardWithContext = withProviderContext(Card, 'Card');
+export const CardWithGlobalProps = withGlobalProps(Card, 'Card');
 
-export default CardWithContext;
+export default CardWithGlobalProps;

package/src/lib/components/Card/Card.scss

@@ -1,79 +1,79 @@
 // 1. Retain equal card widths in flex and grid layouts independently on their content.
 
-@use '../../styles/theme/colors';
-@use 'theme';
-@use 'tools';
+@use "../../styles/theme/colors";
+@use "theme";
+@use "tools";
 
 .root {
-  --rui-local-padding: #{theme.$padding};
+    --rui-local-padding: #{theme.$padding};
 
-  display: flex;
-  flex-direction: column;
-  min-width: 0; // 1.
-  color: var(--rui-local-color);
-  border: theme.$border-width solid var(--rui-local-border-color);
-  border-radius: theme.$border-radius;
-  background-color: var(--rui-local-background-color);
+    display: flex;
+    flex-direction: column;
+    min-width: 0; // 1.
+    color: var(--rui-local-color);
+    border: theme.$border-width solid var(--rui-local-border-color);
+    border-radius: theme.$border-radius;
+    background-color: var(--rui-local-background-color);
 }
 
 .body {
-  flex: 1 0 auto;
-  padding: var(--rui-local-padding);
+    flex: 1 0 auto;
+    padding: var(--rui-local-padding);
 }
 
 .footer {
-  padding: var(--rui-local-padding);
+    padding: var(--rui-local-padding);
 }
 
 .rootDense {
-  --rui-local-padding: #{theme.$dense-padding};
+    --rui-local-padding: #{theme.$dense-padding};
 }
 
 .rootRaised {
-  box-shadow: theme.$raised-box-shadow;
+    box-shadow: theme.$raised-box-shadow;
 }
 
 .rootColorPrimary {
-  @include tools.color(primary);
+    @include tools.color(primary);
 }
 
 .rootColorSecondary {
-  @include tools.color(secondary);
+    @include tools.color(secondary);
 }
 
 .rootColorSuccess {
-  @include tools.color(success);
+    @include tools.color(success);
 }
 
 .rootColorWarning {
-  @include tools.color(warning);
+    @include tools.color(warning);
 }
 
 .rootColorDanger {
-  @include tools.color(danger);
+    @include tools.color(danger);
 }
 
 .rootColorHelp {
-  @include tools.color(help);
+    @include tools.color(help);
 }
 
 .rootColorInfo {
-  @include tools.color(info);
+    @include tools.color(info);
 }
 
 .rootColorNote {
-  @include tools.color(note);
+    @include tools.color(note);
 }
 
 .rootColorLight {
-  @include tools.color(light);
+    @include tools.color(light);
 }
 
 .rootColorDark {
-  @include tools.color(dark);
+    @include tools.color(dark);
 }
 
 .isDisabled {
-  background-color: theme.$disabled-background-color;
-  opacity: theme.$disabled-opacity;
+    background-color: theme.$disabled-background-color;
+    opacity: theme.$disabled-opacity;
 }

package/src/lib/components/Card/CardBody.jsx

@@ -1,18 +1,19 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../provider';
+import { withGlobalProps } from '../../provider';
 import styles from './Card.scss';
 
-export const CardBody = (props) => {
-  const {
-    children,
-  } = props;
+export const CardBody = ({
+  children,
+  id,
+}) => (
+  <div className={styles.body} id={id}>
+    {children}
+  </div>
+);
 
-  return (
-    <div className={styles.body}>
-      {children}
-    </div>
-  );
+CardBody.defaultProps = {
+  id: undefined,
 };
 
 CardBody.propTypes = {
@@ -20,8 +21,12 @@ CardBody.propTypes = {
    * Content of the card.
    */
   children: PropTypes.node.isRequired,
+  /**
+   * ID of the root HTML element.
+   */
+  id: PropTypes.string,
 };
 
-export const CardBodyWithContext = withProviderContext(CardBody, 'CardBody');
+export const CardBodyWithGlobalProps = withGlobalProps(CardBody, 'CardBody');
 
-export default CardBodyWithContext;
+export default CardBodyWithGlobalProps;

package/src/lib/components/Card/CardFooter.jsx

@@ -1,27 +1,40 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../provider';
+import { withGlobalProps } from '../../provider';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './Card.scss';
 
-export const CardFooter = (props) => {
-  const {
-    children,
-  } = props;
+export const CardFooter = ({
+  children,
+  id,
+}) => {
+  if (isChildrenEmpty(children)) {
+    return null;
+  }
 
   return (
-    <div className={styles.footer}>
+    <div className={styles.footer} id={id}>
       {children}
     </div>
   );
 };
 
+CardFooter.defaultProps = {
+  children: null,
+  id: undefined,
+};
+
 CardFooter.propTypes = {
   /**
    * Card actions, usually buttons.
    */
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
+  /**
+   * ID of the root HTML element.
+   */
+  id: PropTypes.string,
 };
 
-export const CardFooterWithContext = withProviderContext(CardFooter, 'CardFooter');
+export const CardFooterWithGlobalProps = withGlobalProps(CardFooter, 'CardFooter');
 
-export default CardFooterWithContext;
+export default CardFooterWithGlobalProps;

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

@@ -9,54 +9,54 @@ $disabled-background-color: var(--rui-Card--disabled__background-color);
 $disabled-opacity: var(--rui-Card--disabled__opacity);
 
 $colors: (
-  primary: (
-    color: var(--rui-Card--primary__color),
-    border-color: var(--rui-Card--primary__border-color),
-    background-color: var(--rui-Card--primary__background-color),
-  ),
-  secondary: (
-    color: var(--rui-Card--secondary__color),
-    border-color: var(--rui-Card--secondary__border-color),
-    background-color: var(--rui-Card--secondary__background-color),
-  ),
-  success: (
-    color: var(--rui-Card--success__color),
-    border-color: var(--rui-Card--success__border-color),
-    background-color: var(--rui-Card--success__background-color),
-  ),
-  warning: (
-    color: var(--rui-Card--warning__color),
-    border-color: var(--rui-Card--warning__border-color),
-    background-color: var(--rui-Card--warning__background-color),
-  ),
-  danger: (
-    color: var(--rui-Card--danger__color),
-    border-color: var(--rui-Card--danger__border-color),
-    background-color: var(--rui-Card--danger__background-color),
-  ),
-  info: (
-    color: var(--rui-Card--info__color),
-    border-color: var(--rui-Card--info__border-color),
-    background-color: var(--rui-Card--info__background-color),
-  ),
-  help: (
-    color: var(--rui-Card--help__color),
-    border-color: var(--rui-Card--help__border-color),
-    background-color: var(--rui-Card--help__background-color),
-  ),
-  note: (
-    color: var(--rui-Card--note__color),
-    border-color: var(--rui-Card--note__border-color),
-    background-color: var(--rui-Card--note__background-color),
-  ),
-  light: (
-    color: var(--rui-Card--light__color),
-    border-color: var(--rui-Card--light__border-color),
-    background-color: var(--rui-Card--light__background-color),
-  ),
-  dark: (
-    color: var(--rui-Card--dark__color),
-    border-color: var(--rui-Card--dark__border-color),
-    background-color: var(--rui-Card--dark__background-color),
-  ),
+    primary: (
+        color: var(--rui-Card--primary__color),
+        border-color: var(--rui-Card--primary__border-color),
+        background-color: var(--rui-Card--primary__background-color),
+    ),
+    secondary: (
+        color: var(--rui-Card--secondary__color),
+        border-color: var(--rui-Card--secondary__border-color),
+        background-color: var(--rui-Card--secondary__background-color),
+    ),
+    success: (
+        color: var(--rui-Card--success__color),
+        border-color: var(--rui-Card--success__border-color),
+        background-color: var(--rui-Card--success__background-color),
+    ),
+    warning: (
+        color: var(--rui-Card--warning__color),
+        border-color: var(--rui-Card--warning__border-color),
+        background-color: var(--rui-Card--warning__background-color),
+    ),
+    danger: (
+        color: var(--rui-Card--danger__color),
+        border-color: var(--rui-Card--danger__border-color),
+        background-color: var(--rui-Card--danger__background-color),
+    ),
+    info: (
+        color: var(--rui-Card--info__color),
+        border-color: var(--rui-Card--info__border-color),
+        background-color: var(--rui-Card--info__background-color),
+    ),
+    help: (
+        color: var(--rui-Card--help__color),
+        border-color: var(--rui-Card--help__border-color),
+        background-color: var(--rui-Card--help__background-color),
+    ),
+    note: (
+        color: var(--rui-Card--note__color),
+        border-color: var(--rui-Card--note__border-color),
+        background-color: var(--rui-Card--note__background-color),
+    ),
+    light: (
+        color: var(--rui-Card--light__color),
+        border-color: var(--rui-Card--light__border-color),
+        background-color: var(--rui-Card--light__background-color),
+    ),
+    dark: (
+        color: var(--rui-Card--dark__color),
+        border-color: var(--rui-Card--dark__border-color),
+        background-color: var(--rui-Card--dark__background-color),
+    ),
 );

package/src/lib/components/Card/_tools.scss

@@ -1,10 +1,10 @@
-@use 'sass:map';
-@use 'theme';
+@use "sass:map";
+@use "theme";
 
 @mixin color($color) {
-  $color-variant-properties: map.get(theme.$colors, $color);
+    $color-variant-properties: map.get(theme.$colors, $color);
 
-  --rui-local-color: #{map.get($color-variant-properties, color)};
-  --rui-local-border-color: #{map.get($color-variant-properties, border-color)};
-  --rui-local-background-color: #{map.get($color-variant-properties, background-color)};
+    --rui-local-color: #{map.get($color-variant-properties, color)};
+    --rui-local-border-color: #{map.get($color-variant-properties, border-color)};
+    --rui-local-background-color: #{map.get($color-variant-properties, background-color)};
 }

package/src/lib/components/CheckboxField/CheckboxField.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 './CheckboxField.scss';
@@ -26,19 +27,28 @@ export const CheckboxField = ({
 
   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}
@@ -50,15 +60,6 @@ export const CheckboxField = ({
           type="checkbox"
           value={value}
         />
-        <div
-          className={[
-            styles.label,
-            isLabelVisible ? '' : styles.isLabelHidden,
-          ].join(' ')}
-          id={id && `${id}__labelText`}
-        >
-          {label}
-        </div>
       </div>
       {helpText && (
         <div
@@ -159,6 +160,6 @@ CheckboxField.propTypes = {
   ]),
 };
 
-export const CheckboxFieldWithContext = withForwardedRef(withProviderContext(CheckboxField, 'CheckboxField'));
+export const CheckboxFieldWithGlobalProps = withForwardedRef(withGlobalProps(CheckboxField, 'CheckboxField'));
 
-export default CheckboxFieldWithContext;
+export default CheckboxFieldWithGlobalProps;

package/src/lib/components/CheckboxField/CheckboxField.scss

@@ -1,61 +1,61 @@
-@use '../../styles/tools/form-fields/foundation';
-@use '../../styles/tools/form-fields/inline-field-elements';
-@use '../../styles/tools/form-fields/inline-field-layout';
-@use '../../styles/tools/form-fields/variants';
-@use '../../styles/tools/accessibility';
+@use "../../styles/tools/form-fields/foundation";
+@use "../../styles/tools/form-fields/inline-field-elements";
+@use "../../styles/tools/form-fields/inline-field-layout";
+@use "../../styles/tools/form-fields/variants";
+@use "../../styles/tools/accessibility";
 
 // Foundation
 .root {
-  @include foundation.root();
-  @include inline-field-layout.root();
-  @include inline-field-elements.min-tap-target($type: checkbox);
-  @include variants.visual(check);
+    @include foundation.root();
+    @include inline-field-layout.root();
+    @include inline-field-elements.min-tap-target($type: checkbox);
+    @include variants.visual(check);
 }
 
 .label {
-  @include foundation.label();
+    @include foundation.label();
 }
 
 .field {
-  @include inline-field-layout.field();
+    @include inline-field-layout.field($type: checkbox);
 }
 
 .input {
-  @include inline-field-elements.check-input($type: checkbox);
+    @include inline-field-elements.check-input($type: checkbox);
 }
 
 .helpText,
 .validationText {
-  @include foundation.help-text();
+    @include foundation.help-text();
 }
 
 .isRootRequired .label {
-  @include foundation.label-required();
+    @include foundation.label-required();
 }
 
 // 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
 .hasRootLabelBefore {
-  @include inline-field-layout.has-label-before();
+    @include inline-field-layout.has-label-before();
 }
 
 .isRootInFormLayout {
-  @include inline-field-layout.in-form-layout();
+    @include inline-field-layout.in-form-layout();
 }

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

@@ -185,7 +185,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={CheckboxField} />

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

@@ -1,9 +1,10 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-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 { 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 './FileInputField.scss';
@@ -26,25 +27,25 @@ export const FileInputField = ({
 
   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,
         getRootValidationStateClassName(validationState, styles),
-      ].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}
@@ -157,6 +158,6 @@ FileInputField.propTypes = {
   validationText: PropTypes.node,
 };
 
-export const FileInputFieldWithContext = withForwardedRef(withProviderContext(FileInputField, 'FileInputField'));
+export const FileInputFieldWithGlobalProps = withForwardedRef(withGlobalProps(FileInputField, 'FileInputField'));
 
-export default FileInputFieldWithContext;
+export default FileInputFieldWithGlobalProps;