@progressiveui/react 1.22.0

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,179 @@
+import React, { useState } from "react";
+import markdown from "./README.mdx";
+import Checkbox from ".";
+import InputGroup from "../InputGroup";
+
+export default {
+  title: "Components/Forms/Checkbox",
+  component: Checkbox,
+  parameters: {
+    componentSubtitle: "Component",
+    status: "released",
+    mdx: markdown,
+  },
+};
+
+export const CheckboxDefault: Story = {
+  render: (args) => <Checkbox {...args} />,
+  args: {
+    labelText: "Checkbox label text",
+    id: "check-1",
+  },
+};
+
+export const CheckedInput = (args) => {
+  const [isChecked, setChecked] = useState(true);
+
+  return (
+    <Checkbox
+      {...args}
+      onChange={() => setChecked(!isChecked)}
+      checked={isChecked}
+    />
+  );
+};
+
+CheckedInput.args = {
+  labelText: "Checked Input",
+  id: "check-2",
+};
+
+const check = `Specify whether the underlying input should be checked.`;
+
+CheckedInput.story = {
+  parameters: {
+    docs: {
+      storyDescription: check,
+    },
+  },
+};
+
+export const Indeterminate = (args) => <Checkbox {...args} />;
+
+Indeterminate.args = {
+  labelText: "Indeterminate Input",
+  indeterminate: true,
+  id: "check-3",
+};
+
+const indeterminate = `Is a state that is neither checked nor unchecked. It’s that in-between state that we might consider the “Maybe” between “Yes” and “No” options`;
+
+Indeterminate.story = {
+  parameters: {
+    docs: {
+      storyDescription: indeterminate,
+    },
+  },
+};
+
+export const DisabledInput = (args) => <Checkbox {...args} />;
+
+DisabledInput.args = {
+  labelText: "Disabled Input",
+  disabled: true,
+  id: "check-4",
+};
+
+const disabled = `Specify whether the Checkbox should be interactive or not`;
+
+DisabledInput.story = {
+  parameters: {
+    docs: {
+      storyDescription: disabled,
+    },
+  },
+};
+
+export const HideLabel = (args) => <Checkbox {...args} />;
+
+HideLabel.args = {
+  labelText: "Hidden Label",
+  hideLabel: true,
+  id: "check-5",
+};
+
+const nolabel = `Specify whether the label should be hidden or not`;
+
+HideLabel.story = {
+  parameters: {
+    docs: {
+      storyDescription: nolabel,
+    },
+  },
+};
+
+export const VerticalGrouping = (args) => (
+  <InputGroup
+    helperText="select any that apply"
+    labelText="Programming language preference"
+    vertical
+  >
+    <Checkbox {...args} defaultChecked labelText="ReactJs" id="react" />
+    <Checkbox {...args} defaultChecked labelText="ReactNative" id="native" />
+    <Checkbox {...args} labelText="Node.js" id="node" />
+    <Checkbox {...args} labelText="PHP" id="php" />
+    <Checkbox {...args} labelText="Java" id="java" />
+  </InputGroup>
+);
+
+const verticalsourcecode = `
+import { Checkbox, InputGroup  } from "@progressiveui/react";
+
+<InputGroup
+  helperText="select any that apply"
+  labelText="Programming language preference"
+  vertical>
+  <Checkbox defaultChecked labelText="ReactJs" id="react" />
+  <Checkbox defaultChecked labelText="ReactNative" id="native" />
+  <Checkbox labelText="Node.js" id="node" />
+  <Checkbox labelText="PHP" id="php" />
+  <Checkbox labelText="Java" id="java" />
+</InputGroup>
+`;
+
+VerticalGrouping.story = {
+  parameters: {
+    docs: {
+      source: {
+        code: verticalsourcecode,
+      },
+    },
+  },
+};
+
+export const HorizontalGrouping = (args) => (
+  <InputGroup
+    helperText="select any that apply"
+    labelText="Programming language preference"
+  >
+    <Checkbox {...args} defaultChecked labelText="ReactJs" id="react1" />
+    <Checkbox {...args} defaultChecked labelText="ReactNative" id="native1" />
+    <Checkbox {...args} labelText="Node.js" id="node1" />
+    <Checkbox {...args} defaultChecked labelText="PHP" id="php1" />
+    <Checkbox {...args} labelText="Java" id="java1" />
+  </InputGroup>
+);
+
+const horizontalsourcecode = `
+import { Checkbox, InputGroup  } from "@progressiveui/react";
+
+<InputGroup
+  helperText="select any that apply"
+  labelText="Programming language preference">
+  <Checkbox defaultChecked labelText="ReactJs" id="react1" />
+  <Checkbox defaultChecked labelText="ReactNative" id="native1" />
+  <Checkbox labelText="Node.js" id="node1" />
+  <Checkbox defaultChecked labelText="PHP" id="php1" />
+  <Checkbox labelText="Java" id="java1" />
+</InputGroup>
+`;
+
+HorizontalGrouping.story = {
+  parameters: {
+    docs: {
+      source: {
+        code: horizontalsourcecode,
+      },
+    },
+  },
+};

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,123 @@
+import * as React from "react";
+import classNames from "classnames";
+import useSettings from "../../hooks/useSettings";
+import { InlineErrorMessage } from "../Input";
+
+interface CheckboxProps
+  extends Omit<React.ComponentPropsWithRef<"input">, "onChange"> {
+  /**
+   * Specify whether the Checkbox is in an indeterminate state
+   */
+  indeterminate?: boolean;
+  /**
+   * Provide a label to provide a description of the Checkbox input that you are
+   * exposing to the user
+   */
+  labelText?: React.ReactNode;
+  /**
+   * Specify whether the label should be hidden, or not
+   */
+  hideLabel?: boolean;
+  /**
+   * Invalid state for the checkbox
+   */
+  invalid?: boolean;
+  /**
+   * Provide the text that is displayed when the checkbox is in an invalid state
+   */
+  invalidText?: string;
+  /**
+   * The CSS class name to be placed on the wrapping element
+   */
+  wrapperClassName?: string;
+  /**
+   *
+   * @param event | The event triggering the change
+   * @param checked | The new value of the checkbox
+   * @param customId | The id of the checkbox
+   */
+  onChange?(
+    event: React.ChangeEvent<HTMLInputElement>,
+    checked?: boolean,
+    customId?: string
+  ): void;
+}
+
+export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  (
+    {
+      className,
+      id,
+      labelText,
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      onChange = () => {},
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      indeterminate,
+      invalid,
+      invalidText,
+      hideLabel,
+      wrapperClassName,
+      title = "",
+      ...other
+    },
+    ref
+  ) => {
+    const { prefix } = useSettings();
+    const labelClasses = classNames(`${prefix}--checkbox-label`, className);
+    const innerLabelClasses = classNames(`${prefix}--checkbox-label-text`, {
+      [`${prefix}--visually-hidden`]: hideLabel,
+    });
+    const wrapperClasses = classNames(
+      `${prefix}--form-item`,
+      `${prefix}--checkbox-wrapper`,
+      {
+        [`${prefix}--checkbox-wrapper--invalid`]: invalid,
+      },
+      wrapperClassName
+    );
+
+    return (
+      <div className={wrapperClasses}>
+        <input
+          {...other}
+          aria-invalid={invalid}
+          data-invalid={invalid}
+          type="checkbox"
+          onChange={(evt) => {
+            onChange(evt, evt.target.checked, id);
+          }}
+          className={`${prefix}--checkbox`}
+          id={id || other.name}
+          ref={(el) => {
+            if (el) {
+              if (indeterminate) {
+                el.indeterminate = indeterminate;
+              }
+            }
+            if (typeof ref === "function") {
+              ref(el);
+            } else if (Object(ref) === ref && ref) {
+              ref.current = el;
+            }
+          }}
+        />
+        <label
+          htmlFor={id || other.name}
+          className={labelClasses}
+          title={title || undefined}
+        >
+          <span className={innerLabelClasses}>{labelText}</span>
+        </label>
+        <InlineErrorMessage
+          errorClasses={`${prefix}--form-requirement`}
+          invalid={invalid}
+          invalidText={invalidText}
+        />
+      </div>
+    );
+  }
+);
+
+Checkbox.displayName = "Checkbox";
+
+export default Checkbox;

package/src/components/Checkbox/README.mdx

@@ -0,0 +1,59 @@
+## Usage
+
+Checkboxes are used for multiple choices, not for mutually exclusive choices. Each checkbox works independently from other checkboxes in the list, therefore checking an additional box does not affect any other selections.
+
+#### When to use
+
+**Forms**
+
+Can be used in forms on a full page, in modals, or on side panels.
+
+** Filtering and batch action **
+
+Used to filter data either on a page, in a menu, or within a component. Checkboxes are found in Data table for batch editing purposes.
+
+** Terms and conditions **
+
+Turning the checkbox input on or off can indicate whether you agree to the terms.
+
+** Lists with sub-selections **
+
+Used when there is a parent and child relationship. You can use a parent checkbox to make a bulk selection of all list items. Unchecking the parent deselects all of the list items. Alternatively, you can select children individually when the parent is not selected, which is where the indeterminate state comes in to play.
+
+#### When not to use
+
+If a user can select only one option from a list, radio buttons should be used instead of checkboxes. Checkboxes allow the user to select multiple items in a set whereas radio buttons allow the user to select only one option.
+
+![Image of Checkbox usage](https://github.com/wfp/ui/blob/component-updates/src/assets/formatting/Checkbox.png?raw=true)
+
+## Behaviour
+
+#### Checkbox States
+
+The checkbox control allows for three states: **selected**, **unselected**, and **indeterminate**. The indeterminate state comes into play when the checkbox contains a sublist of selections, some of which are selected, and some unselected.
+
+## Actions
+
+#### Click target
+
+Users should be able to select the checkbox by clicking on the box directly or by clicking on its label.
+
+#### Default selection
+
+The default view of a set of checkboxes is having no option selected.
+
+## Formatting
+
+![Image of Breadcrumb Format](https://github.com/wfp/ui/blob/component-updates/src/assets/formatting/Check.png?raw=true)
+
+1. **Checkbox input(1):** It indicates the checkbox state. By default it is set to unselected.
+
+2. **Checkbox label(2):** Describes the information you want to select or unselect.
+
+## Related
+
+[RadioButton](?path=/docs/components-radiobutton--regular)
+
+## Reference
+
+[Carbon Design System Usage for checkboxes](https://next.carbondesignsystem.com/components/checkbox)

package/src/components/Checkbox/index.ts

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

package/src/components/CheckboxGroup/README.md

@@ -0,0 +1,29 @@
+## Use with React Final Form (Redux form)
+
+Add `controlled={false}` to allow final-form to hand the state.
+
+```js
+<InputGroup
+  controlled={false}
+  labelText="Tracking frequency"
+  helperText="How often the position will be updated">
+  <Field
+    component={ReduxFormWrapper}
+    inputComponent={RadioButton}
+    id="radioButton-1"
+    name="radioButton"
+    value={5}
+    labelText="Radiobutton 1"
+    type="radio"
+  />
+  <Field
+    component={ReduxFormWrapper}
+    inputComponent={RadioButton}
+    id="radioButton-2"
+    name="radioButton"
+    value={10}
+    labelText="Radiobutton 2"
+    type="radio"
+  />
+</InputGroup>
+```

package/src/components/CheckboxGroup/RadioButtonGroup.js

@@ -0,0 +1,158 @@
+import PropTypes from "prop-types";
+import React from "react";
+import classNames from "classnames";
+import RadioButton from "../RadioButton";
+import warning from "warning";
+import { withWFPCoreSettings } from "../WFPCoreSettings";
+
+class InputGroup extends React.Component {
+  state = { selected: this.props.valueSelected || this.props.defaultSelected };
+
+  static propTypes = {
+    prefix: PropTypes.string.isRequired,
+    /**
+     * Provide a collection of <RadioButton> components to render in the group
+     */
+    children: PropTypes.node,
+
+    /**
+     * Provide an optional className to be applied to the container node
+     */
+    className: PropTypes.string,
+    /**
+     * Provide an optional className to be applied to the container node
+     */
+    controlled: PropTypes.bool,
+
+    /**
+     * Specify the <RadioButton> to be selected by default
+     */
+    defaultSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+    /**
+     * Specify the name of the underlying `input` nodes
+     */
+    name: PropTypes.string.isRequired,
+
+    /**
+     * Specify whether the group is disabled
+     */
+    disabled: PropTypes.bool,
+
+    /**
+     * Provide an optional `onChange` hook that is called whenever the value of
+     * the group changes
+     */
+    onChange: PropTypes.func,
+
+    /**
+     * Specify the value that is currently selected in the group
+     */
+    valueSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+    /**
+     * Specify whether you want the underlying label to be visually hidden
+     */
+
+    hideLabel: PropTypes.bool,
+    /**
+     * Provide text that is used alongside the control label for additional help
+     */
+
+    helperText: PropTypes.node,
+
+    /**
+     * Provide the text that will be read by a screen reader when visiting this
+     * control
+     */
+    labelText: PropTypes.node,
+  };
+
+  static defaultProps = {
+    onChange: /* istanbul ignore next */ () => {},
+    controlled: false,
+  };
+
+  static getDerivedStateFromProps({ valueSelected, defaultSelected }, state) {
+    const { prevValueSelected } = state;
+    return prevValueSelected === valueSelected
+      ? null
+      : {
+          selected: valueSelected || defaultSelected,
+          prevValueSelected: valueSelected,
+        };
+  }
+
+  getRadioButtons = () => {
+    const children = React.Children.map(this.props.children, (radioButton) => {
+      const { value, ...other } = radioButton.props;
+      /* istanbul ignore if */
+      if (radioButton.props.hasOwnProperty("checked")) {
+        warning(
+          false,
+          `Instead of using the checked property on the RadioButton, set
+            the defaultSelected property or valueSelected property on the InputGroup.`
+        );
+      }
+
+      return (
+        <RadioButton
+          {...other}
+          name={this.props.name}
+          key={value}
+          value={value}
+          onChange={this.handleChange}
+          checked={value === this.state.selected}
+        />
+      );
+    });
+
+    return children;
+  };
+
+  handleChange = (newSelection, value, evt) => {
+    if (newSelection !== this.state.selected) {
+      this.setState({ selected: newSelection });
+      this.props.onChange(newSelection, this.props.name, evt);
+    }
+  };
+
+  render() {
+    const { prefix } = this.props;
+    const {
+      children,
+      disabled,
+      labelText,
+      helperText,
+      controlled,
+      hideLabel,
+      className = `${prefix}--input-group`,
+    } = this.props;
+
+    const labelClasses = classNames(`${prefix}--label`, {
+      [`${prefix}--visually-hidden`]: hideLabel,
+    });
+
+    const label = labelText ? (
+      <span className={labelClasses}>{labelText}</span>
+    ) : null;
+
+    const helper = helperText ? (
+      <div className={`${prefix}--form__helper-text`}>{helperText}</div>
+    ) : null;
+
+    return (
+      <div className={`${prefix}--form-item`}>
+        <div className={className} disabled={disabled}>
+          {label}
+          {helper}
+          <div className={`${prefix}--input-group-inside`}>
+            {controlled ? this.getRadioButtons() : children}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default withWFPCoreSettings(InputGroup);

package/src/components/CheckboxGroup/RadioButtonGroupWithoutControls.js

@@ -0,0 +1,46 @@
+import PropTypes from "prop-types";
+import React from "react";
+import classNames from "classnames";
+import { withWFPCoreSettings } from "../WFPCoreSettings";
+
+class FormWizard extends React.Component {
+  static propTypes = {
+    prefix: PropTypes.string.isRequired,
+    /**
+     * Specify a custom css class
+     * which is added to the container
+     */
+    className: PropTypes.string,
+    /**
+     * Specify the custom
+     * main content component
+     */
+    children: PropTypes.node.isRequired,
+    /**
+     * Specify the custom
+     * sidebar component
+     */
+    sidebar: PropTypes.node.isRequired,
+  };
+
+  static defaultProps = {};
+
+  render() {
+    const { className, children, sidebar } = this.props;
+
+    const classes = {
+      formControls: classNames("wfp--form-wizard", className),
+    };
+
+    const { prefix } = this.props;
+
+    return (
+      <div className={classes.formControls}>
+        <div className={`${prefix}--form-wizard__sidebar`}>{sidebar}</div>
+        <div className={`${prefix}--form-wizard__content`}>{children}</div>
+      </div>
+    );
+  }
+}
+
+export default withWFPCoreSettings(FormWizard);

package/src/components/CheckboxGroup/index.js

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