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

package/src/lib/components/{ui/Button → Button}/helpers/getRootPriorityClassName.js

@@ -11,9 +11,5 @@ export default (priority, styles) => {
     return styles.rootPriorityFlat;
   }
 
-  if (priority === 'link') {
-    return styles.rootPriorityLink;
-  }
-
   return null;
 };

package/src/lib/components/{ui/ButtonGroup → ButtonGroup}/ButtonGroup.jsx

@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../../provider';
+import { withProviderContext } from '../../provider';
 import styles from './ButtonGroup.scss';
+import { ButtonGroupContext } from './ButtonGroupContext';
 
 export const ButtonGroup = ({
   block,
@@ -19,19 +20,16 @@ export const ButtonGroup = ({
     role="group"
     {...restProps}
   >
-    {React.Children.map(children, (child) => {
-      if (!React.isValidElement(child)) {
-        return null;
-      }
-
-      return React.cloneElement(child, {
+    <ButtonGroupContext.Provider
+      value={{
         block,
         disabled,
-        grouped: true,
         priority,
         size,
-      });
-    })}
+      }}
+    >
+      {children}
+    </ButtonGroupContext.Provider>
   </div>
 );
 
@@ -50,7 +48,7 @@ ButtonGroup.propTypes = {
   /**
    * Buttons to be grouped.
    */
-  children: PropTypes.arrayOf(PropTypes.element).isRequired,
+  children: PropTypes.node.isRequired,
   /**
    * If `true`, all buttons inside the group will be disabled.
    */

package/src/lib/components/ButtonGroup/ButtonGroupContext.js

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const ButtonGroupContext = React.createContext(null);

package/src/lib/components/{ui/ButtonGroup → ButtonGroup}/README.mdx

@@ -1,7 +1,7 @@
 ---
 name: ButtonGroup
-menu: 'UI'
-route: /components/ui/button-group
+menu: 'Layouts'
+route: /components/button-group
 ---
 
 # ButtonGroup
@@ -12,6 +12,7 @@ import {
   Playground,
   Props,
 } from 'docz'
+import Icon from '../../../docs/_components/Icon'
 import Button from '../Button'
 import { ButtonGroup } from './ButtonGroup'
 
@@ -166,6 +167,29 @@ Disables all buttons inside the group.
   </ButtonGroup>
 </Playground>
 
+### Feedback State
+
+When user's action triggers an asynchronous process on background, feedback
+state of individual buttons can be indicated by showing an icon.
+
+<Playground>
+  <ButtonGroup>
+    <Button label="Week" color="success" feedbackIcon={<Icon icon="success" />} />
+    <Button label="Month" />
+    <Button label="Year" />
+  </ButtonGroup>
+  <ButtonGroup priority="outline">
+    <Button label="Week" color="success" feedbackIcon={<Icon icon="success" />} />
+    <Button label="Month" />
+    <Button label="Year" />
+  </ButtonGroup>
+  <ButtonGroup priority="flat">
+    <Button label="Week" color="success" feedbackIcon={<Icon icon="success" />} />
+    <Button label="Month" />
+    <Button label="Year" />
+  </ButtonGroup>
+</Playground>
+
 ### Active State
 
 To highlight the selected option, the active state can be achieved by setting

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

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

package/src/lib/components/{layout/CTA → CTA}/CTA.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../../provider';
+import { withProviderContext } from '../../provider';
 import styles from './CTA.scss';
 
 export const CTA = (props) => {
@@ -47,7 +47,10 @@ CTA.propTypes = {
    */
   align: PropTypes.oneOf(['top', 'middle', 'bottom', 'baseline']),
   /**
-   * Slot for individual CTA elements: CTAStart, CTACenter, and CTAEnd.
+   * Nested elements. Supported types are:
+   * * `CTAStart`
+   * * `CTACenter`
+   * * `CTAEnd`
    */
   children: PropTypes.node.isRequired,
 };

package/src/lib/components/{layout/CTA → CTA}/CTA.scss

@@ -1,5 +1,5 @@
-@use '../../../styles/tools/breakpoint';
-@use '../../../styles/tools/spacing';
+@use '../../styles/tools/breakpoint';
+@use '../../styles/tools/spacing';
 
 $_breakpoint: lg;
 $_spacing: spacing.of(1);

package/src/lib/components/{layout/CTA → CTA}/CTACenter.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../../provider';
+import { withProviderContext } from '../../provider';
 import styles from './CTA.scss';
 
 export const CTACenter = (props) => {

package/src/lib/components/{layout/CTA → CTA}/CTAEnd.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../../provider';
+import { withProviderContext } from '../../provider';
 import styles from './CTA.scss';
 
 export const CTAEnd = (props) => {

package/src/lib/components/{layout/CTA → CTA}/CTAStart.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../../provider';
+import { withProviderContext } from '../../provider';
 import styles from './CTA.scss';
 
 export const CTAStart = (props) => {

package/src/lib/components/{layout/CTA → CTA}/README.mdx

@@ -1,7 +1,7 @@
 ---
 name: CTA
 menu: 'Layouts'
-route: /components/layout/cta
+route: /components/cta
 ---
 
 # CTA
@@ -13,7 +13,7 @@ import {
   Playground,
   Props,
 } from 'docz'
-import { Placeholder } from '../../../../docs/_components/Placeholder/Placeholder'
+import { Placeholder } from '../../../docs/_components/Placeholder/Placeholder'
 import { CTA } from './CTA'
 import { CTACenter } from './CTACenter'
 import { CTAEnd } from './CTAEnd'
@@ -63,7 +63,7 @@ See [API](#api) for all available options.
   screen even at the smallest size. For complex layouts and a lot of actions,
   consider using the [Toolbar](/components/layout/toolbar) layout.
 
-👉 On screen sizes smaller than 66 em (the `lg`
+📐 On screen sizes smaller than 66 em (the `lg`
 [breakpoint](/foundation/breakpoints)), the start element expands over the full
 width of its parent. Please resize your browser rather than the playground to
 see this work.

package/src/lib/components/{ui/Card → Card}/Card.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import getRootColorClassName from '../../../helpers/getRootColorClassName';
-import { withProviderContext } from '../../../provider';
+import getRootColorClassName from '../../helpers/getRootColorClassName';
+import { withProviderContext } from '../../provider';
 import styles from './Card.scss';
 
 export const Card = ({
@@ -36,8 +36,10 @@ Card.defaultProps = {
 
 Card.propTypes = {
   /**
-   * Slot for individual card elements that build up the inner layout: CardBody, CardFooter, or
-   * ScrollView.
+   * Slot for individual card elements that build up the inner layout:
+   * * `CardBody`
+   * * `CardFooter`
+   * * `ScrollView`
    */
   children: PropTypes.node.isRequired,
   /**

package/src/lib/components/{ui/Card → Card}/Card.scss

@@ -1,6 +1,6 @@
 // 1. Retain equal card widths in flex and grid layouts independently on their content.
 
-@use '../../../styles/theme/colors';
+@use '../../styles/theme/colors';
 @use 'theme';
 @use 'tools';
 

package/src/lib/components/{ui/Card → Card}/CardBody.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../../provider';
+import { withProviderContext } from '../../provider';
 import styles from './Card.scss';
 
 export const CardBody = (props) => {

package/src/lib/components/{ui/Card → Card}/CardFooter.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../../provider';
+import { withProviderContext } from '../../provider';
 import styles from './Card.scss';
 
 export const CardFooter = (props) => {

package/src/lib/components/{ui/Card → Card}/README.mdx

@@ -1,7 +1,7 @@
 ---
 name: Card
-menu: 'UI'
-route: /components/ui/card
+menu: 'Miscellaneous'
+route: /components/card
 ---
 
 # Card

package/src/lib/components/{layout/Center → Center}/Center.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../../provider';
+import { withProviderContext } from '../../provider';
 import styles from './Center.scss';
 
 export const Center = ({ children }) => (

package/src/lib/components/{layout/Center → Center}/README.mdx

@@ -1,7 +1,7 @@
 ---
 name: Center
 menu: 'Layouts'
-route: /components/layout/center
+route: /components/center
 ---
 
 # Center
@@ -12,7 +12,7 @@ import {
   Playground,
   Props,
 } from 'docz'
-import { Placeholder } from '../../../../docs/_components/Placeholder/Placeholder'
+import { Placeholder } from '../../../docs/_components/Placeholder/Placeholder'
 import { Center } from './Center'
 
 ## Basic Usage

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

@@ -0,0 +1,164 @@
+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 { FormLayoutContext } from '../FormLayout';
+import withForwardedRef from '../withForwardedRef';
+import styles from './CheckboxField.scss';
+
+export const CheckboxField = ({
+  checked,
+  disabled,
+  forwardedRef,
+  helpText,
+  id,
+  isLabelVisible,
+  label,
+  labelPosition,
+  required,
+  validationState,
+  validationText,
+  value,
+  ...restProps
+}) => {
+  const context = useContext(FormLayoutContext);
+
+  return (
+    <label
+      className={[
+        styles.root,
+        context ? styles.isRootInFormLayout : '',
+        context && context.layout === 'horizontal' ? styles.rootLayoutHorizontal : styles.rootLayoutVertical,
+        labelPosition === 'before' ? styles.hasRootLabelBefore : '',
+        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}
+          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 = {
+  checked: undefined,
+  disabled: false,
+  forwardedRef: undefined,
+  helpText: null,
+  id: undefined,
+  isLabelVisible: true,
+  labelPosition: 'after',
+  required: false,
+  validationState: null,
+  validationText: null,
+  value: undefined,
+};
+
+CheckboxField.propTypes = {
+  /**
+   * 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.
+   *
+   * Also serves as base for ids of nested elements:
+   * * `<ID>__label`
+   * * `<ID>__labelText`
+   * * `<ID>__helpText`
+   * * `<ID>__validationText`
+   */
+  id: PropTypes.string,
+  /**
+   * 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']),
+  /**
+   * 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/CheckboxField → CheckboxField}/CheckboxField.scss

@@ -1,8 +1,8 @@
-@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 {

package/src/lib/components/{ui/CheckboxField → CheckboxField}/README.mdx

@@ -1,7 +1,7 @@
 ---
 name: CheckboxField
-menu: 'UI'
-route: /components/ui/checkbox-field
+menu: 'Inputs'
+route: /components/checkbox-field
 ---
 
 # CheckboxField
@@ -29,9 +29,9 @@ And use it:
     const [agree, setAgree] = React.useState(true);
     return (
       <CheckboxField
-        changeHandler={() => setAgree(!agree)}
         checked={agree}
         label="I agree"
+        onChange={() => setAgree(!agree)}
       />
     );
   }}
@@ -81,10 +81,10 @@ turning the checkbox on or off.
     const [getNewsletter, setGetNewsletter] = React.useState(true);
     return (
       <CheckboxField
-        changeHandler={() => setGetNewsletter(!getNewsletter)}
         checked={getNewsletter}
         helpText="We will not bother you more than once a month, we promise!"
         label="Send me newsletter"
+        onChange={() => setGetNewsletter(!getNewsletter)}
       />
     );
   }}
@@ -100,10 +100,10 @@ label remains accessible to assistive technologies.
     const [checked, setChecked] = React.useState(true);
     return (
       <CheckboxField
-        changeHandler={() => setChecked(!checked)}
         checked={checked}
         isLabelVisible={false}
         label="You cannot see this"
+        onChange={() => setChecked(!checked)}
       />
     );
   }}
@@ -116,10 +116,10 @@ It's also possible to display label before input:
     const [checked, setChecked] = React.useState(true);
     return (
       <CheckboxField
-        changeHandler={() => setChecked(!checked)}
         checked={checked}
         label="Label precedes input"
         labelPosition="before"
+        onChange={() => setChecked(!checked)}
       />
     );
   }}
@@ -140,22 +140,22 @@ have.
     return (
       <>
         <CheckboxField
-          changeHandler={() => setAgree(!agree)}
           checked={agree}
           label="I have read and agree with terms and conditions"
+          onChange={() => setAgree(!agree)}
           validationState="valid"
         />
         <CheckboxField
-          changeHandler={() => setAgree(!agree)}
           checked={agree}
           label="I have read and agree with terms and conditions"
+          onChange={() => setAgree(!agree)}
           validationState="warning"
           validationText="Please wait 10 minutes until we verify your data."
         />
         <CheckboxField
-          changeHandler={() => setAgree(!agree)}
           checked={agree}
           label="I have read and agree with terms and conditions"
+          onChange={() => setAgree(!agree)}
           required
           validationState="invalid"
           validationText="You must agree to be able to proceed."
@@ -183,9 +183,10 @@ Disabled state makes the input unavailable.
 
 ## API
 
-In addition to the options below, you can add any custom attributes that do not
-interfere with the API, and they will be passed to the `input` HTML element.
-This is useful mainly to improve component's accessibility.
+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
+interactive and helps improve its accessibility.
 
 <Props table of={CheckboxField} />
 
@@ -198,3 +199,5 @@ options. On top of that, the following options are available for CheckboxField.
 |----------------------------------------------------------------------|----------------------------------------------|
 | `--rui-FormField--check__input--checkbox__border-radius`             | Input corner radius                          |
 | `--rui-FormField--check__input--checkbox--checked__background-image` | Background image of checked input            |
+
+[React synthetic events]: https://reactjs.org/docs/events.html