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

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

@@ -0,0 +1,33 @@
+export default (labelVisibility, styles) => {
+  // Intentionally omitting `xs` which means label is visible on all screen sizes.
+
+  if (labelVisibility === 'sm') {
+    return styles.withLabelVisibleSm;
+  }
+
+  if (labelVisibility === 'md') {
+    return styles.withLabelVisibleMd;
+  }
+
+  if (labelVisibility === 'lg') {
+    return styles.withLabelVisibleLg;
+  }
+
+  if (labelVisibility === 'xl') {
+    return styles.withLabelVisibleXl;
+  }
+
+  if (labelVisibility === 'xxl') {
+    return styles.withLabelVisibleXxl;
+  }
+
+  if (labelVisibility === 'xxxl') {
+    return styles.withLabelVisibleXxxl;
+  }
+
+  if (labelVisibility === 'none') {
+    return styles.withLabelHidden;
+  }
+
+  return null;
+};

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'
 
@@ -43,11 +44,11 @@ See [API](#api) for all available options.
 - Use **short labels or icons** so the buttons can fit small screens.
 
 - For toggling between on/off states, use rather the
-  [Toggle](/components/ui/toggle) component.
+  [Toggle](/components/toggle) component.
 
 - For switching between options in a form that needs to be submitted, use rather
-  the [SelectField](/components/ui/select-field) or
-  [Radio](/components/ui/radio) components.
+  the [SelectField](/components/select-field) or
+  [Radio](/components/radio) components.
 
 - Be careful with using `startCorner` and `endCorner` options for grouped
   buttons. Overflowing elements may cause undesired interaction problems.
@@ -64,7 +65,7 @@ different types or sizes.
 ## Priorities
 
 There are three **visual priorities** of buttons which exactly copy the
-priorities of the [Button](/components/ui/button) component:
+priorities of the [Button](/components/button) component:
 
 1. filled
 2. outline
@@ -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'
@@ -61,9 +61,9 @@ See [API](#api) for all available options.
 
 - Place rather **a few smaller elements** into the layout, so they fit the
   screen even at the smallest size. For complex layouts and a lot of actions,
-  consider using the [Toolbar](/components/layout/toolbar) layout.
+  consider using the [Toolbar](/components/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
@@ -53,7 +53,7 @@ See [API](#api) for all available options.
   grid. It will help you keep the UI clean and easy to scan.
 
 - **Card, or Paper?** Card is a versatile surface for displaying content.
-  However, there is also the [Paper](/components/ui/paper) component. While Card
+  However, there is also the [Paper](/components/paper) component. While Card
   is designed for displaying items (and also supports more visual options),
   Paper is usually used to hold larger content areas like lists, grids, or
   forms.
@@ -119,7 +119,7 @@ card should be also smaller to keep the card contained and easy to scan.
 
 ## Scrollable Card
 
-Combine Card with [ScrollView](/components/ui/scroll-view) to enable scrolling
+Combine Card with [ScrollView](/components/scroll-view) to enable scrolling
 for card content.
 
 <Playground>

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 {