@progressiveui/react 2.0.3 → 2.0.5

package/src/components/Checkbox/Checkbox.Skeleton.js

@@ -1,37 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import PropTypes from 'prop-types';
-import React from 'react';
-import cx from 'classnames';
-import useSettings from '../../hooks/useSettings';
-
-const CheckboxSkeleton = ({ className, ...rest }) => {
-  const { prefix } = useSettings();
-
-  return (
-    <div
-      className={cx(
-        `${prefix}--form-item`,
-        `${prefix}--checkbox-wrapper`,
-        `${prefix}--checkbox-label`,
-        className
-      )}
-      {...rest}>
-      <span className={`${prefix}--checkbox-label-text ${prefix}--skeleton`} />
-    </div>
-  );
-};
-
-CheckboxSkeleton.propTypes = {
-  /**
-   * Specify an optional className to add.
-   */
-  className: PropTypes.string,
-};
-
-export default CheckboxSkeleton;

package/src/components/Checkbox/Checkbox.hbs

@@ -1,15 +0,0 @@
-<fieldset class="wfp--fieldset">
-  <legend class="wfp--label">Checkbox heading</legend>
-  <div class="wfp--form-item wfp--checkbox-wrapper">
-    <input type="checkbox" class="wfp--checkbox" id="checkbox-label-1">
-    <label for="checkbox-label-1" class="wfp--checkbox-label">
-      <span class="">Checkbox label 1</span>
-    </label>
-  </div>
-  <div class="wfp--form-item wfp--checkbox-wrapper">
-    <input type="checkbox" class="wfp--checkbox" id="checkbox-label-2">
-    <label for="checkbox-label-2" class="wfp--checkbox-label">
-      <span class="">Checkbox label 2</span>
-    </label>
-  </div>
-</fieldset>

package/src/components/Checkbox/Checkbox.legacy.js

@@ -1,126 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import classNames from 'classnames';
-import useSettings from '../../hooks/useSettings';
-
-/**
- * Checkboxes are used for a list of options where the user may select multiple options, including all or none. */
-
-const Checkbox = React.forwardRef((props, ref) => {
-  const {
-    className,
-    id,
-    labelText,
-    onChange,
-    indeterminate,
-    hideLabel,
-    wrapperClassName,
-    inputRef = ref,
-    title = '',
-    ...other
-  } = props;
-  const { prefix } = useSettings();
-  const customId = id ? id : other.name;
-  let input;
-  const labelClasses = classNames(`${prefix}--checkbox-label`, className);
-  const innerLabelClasses = classNames({
-    [`${prefix}--visually-hidden`]: hideLabel,
-  });
-  const wrapperClasses = classNames(
-    `${prefix}--form-item`,
-    `${prefix}--checkbox-wrapper`,
-    wrapperClassName
-  );
-
-  return (
-    <div className={wrapperClasses}>
-      <input
-        {...other}
-        type="checkbox"
-        onChange={(evt) => {
-          onChange(evt, evt.target.checked, customId);
-        }}
-        className="wfp--checkbox"
-        id={customId}
-        ref={(el) => {
-          if (el) {
-            el.indeterminate = indeterminate;
-          }
-          if (typeof inputRef === 'function') {
-            inputRef(el);
-          } else if (Object(inputRef) === inputRef) {
-            inputRef.current = el;
-          }
-        }}
-      />
-      <label htmlFor={customId} className={labelClasses} title={title || null}>
-        <span className={innerLabelClasses}>{labelText}</span>
-      </label>
-    </div>
-  );
-});
-
-Checkbox.propTypes = {
-  /**
-   * Specify whether the underlying input should be checked
-   */
-  checked: PropTypes.bool,
-
-  /**
-   * Specify whether the underlying input should be checked by default
-   */
-  defaultChecked: PropTypes.bool,
-
-  /**
-   * Specify whether the Checkbox is in an indeterminate state
-   */
-  indeterminate: PropTypes.bool,
-
-  /**
-   * Specify an optional className to be applied to the <label> node
-   */
-  className: PropTypes.string,
-
-  /**
-   * Specify whether the Checkbox should be disabled
-   */
-  disabled: PropTypes.bool,
-
-  /**
-   * Provide an `id` to uniquely identify the Checkbox input
-   */
-  id: PropTypes.string.isRequired,
-
-  /**
-   * Provide a label to provide a description of the Checkbox input that you are
-   * exposing to the user
-   */
-  labelText: PropTypes.node.isRequired,
-
-  /**
-   * Specify whether the label should be hidden, or not
-   */
-  hideLabel: PropTypes.bool,
-
-  /**
-   * Receives three arguments: true/false, the checkbox's id, and the dom event.
-   */
-  onChange: PropTypes.func,
-
-  /**
-   * Specify a title for the <label> node for the Checkbox
-   */
-  title: PropTypes.string,
-
-  /**
-   * The CSS class name to be placed on the wrapping element
-   */
-  wrapperClassName: PropTypes.string,
-};
-
-Checkbox.defaultProps = {
-  onChange: () => {},
-  indeterminate: false,
-};
-
-export default Checkbox;

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

@@ -1,179 +0,0 @@
-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

@@ -1,123 +0,0 @@
-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

@@ -1,59 +0,0 @@
-## 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

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

package/src/components/CheckboxGroup/README.md

@@ -1,29 +0,0 @@
-## 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>
-```