@progressiveui/react 1.22.0

package/src/components/Pagination/README.mdx

@@ -0,0 +1,27 @@
+## Usage
+
+Generally, pagination is used if there are too many items displayed in one view. The default number displayed will vary depending on the context.
+
+### Usage with react
+
+```js
+import { Pagination } from "@progressiveui/react";
+```
+
+## Best practices
+
+#### Identify the current page
+
+Clearly identify which page the user is on by displaying the current page number. By providing context into how many pages there are in total (eg. 1 of 4 pages), you can help provide clarity around the data displayed.
+
+#### Provide various options for navigating
+
+Previous and next chevrons or links are the most useful way for the user to move forward or backward through pages of data. Provide an inline select in which users can choose the page they wish to navigate to.
+
+#### Items per page
+
+Use an inline select within the pagination bar so the user can change the amount of data displayed per page.
+
+## Reference
+
+[Carbon Design System Usage for pagination](https://www.carbondesignsystem.com/components/pagination/usage)

package/src/components/Pagination/index.js

@@ -0,0 +1,2 @@
+export { default } from "./Pagination";
+// export * from "./Pagination.Skeleton";

package/src/components/RadioButton/README.mdx

@@ -0,0 +1,34 @@
+**Radio buttons** are used when a list of two or more options are mutually exclusive, meaning the user must select only one option.
+
+RadioButton is based on a fork from [Carbon Components](https://www.carbondesignsystem.com/components/radio-button/code)
+
+### Headings
+
+If necessary, a heading can accompany a set of radio buttons to provide further clarity for the user. Use sentence-style capitalization (only the first word in a phrase and any proper nouns capitalized).
+
+### Labels
+
+Always use a clear and concise label for radio buttons. Be explicit about the action that will follow if the radio button is selected. Labels appear to the right of radio buttons. Use sentence-style capitalization (only the first word in a phrase and any proper nouns capitalized) and no more than three words.
+
+### Default selection
+
+A set of radio buttons should default to having one option selected. Never display them without a default selection.
+
+### Usage with react
+
+```js
+import { RadioButton } from "@progressiveui/react";
+```
+
+```js
+<RadioButton
+  id="radio-1"
+  className="some-class"
+  name="test"
+  value="standard"
+  labelText="Standard Radio Button"
+  checked={false}
+  disabled={false}
+  onChange={onChange}
+/>
+```

package/src/components/RadioButton/RadioButton-fc.js

@@ -0,0 +1,103 @@
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import uId from '../../tools/uniqueId';
+import useSettings from '../../hooks/useSettings';
+
+/** Radio buttons represent a group of mutually exclusive choices */
+
+const RadioButton = React.forwardRef((props, ref) => {
+  const {
+    labelText,
+
+    id,
+    className,
+    value,
+    name,
+    onChange,
+    ...other
+  } = props;
+
+  const [uid] = useState(id || uId());
+
+  const { prefix } = useSettings();
+
+  const wrapperClasses = classNames('radioButtonWrapper', className);
+
+  const handleOnChange = (evt) => {
+    onChange(evt, value, name);
+  };
+
+  const handleChange = props.onChange
+    ? {
+        onChange: handleOnChange,
+      }
+    : {};
+
+  return (
+    <div className={wrapperClasses}>
+      <input
+        {...other}
+        ref={ref}
+        type="radio"
+        className={`${prefix}--radio-button`}
+        {...handleChange}
+        id={uid}
+      />
+      <label htmlFor={uid} className={`${prefix}--radio-button__label`}>
+        <span className={`${prefix}--radio-button__appearance`} />
+        {labelText}
+      </label>
+    </div>
+  );
+});
+
+RadioButton.propTypes = {
+  prefix: PropTypes.string.isRequired,
+  /**
+   * Specify whether the <RadioButton> is currently checked
+   */
+  checked: PropTypes.bool,
+
+  /**
+   * Provide an optional className to be applied to the containing node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the <RadioButton> should be checked by default
+   */
+  defaultChecked: PropTypes.bool,
+
+  /**
+   * Specify whether the control is disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Provide a unique id for the underlying `input` node
+   */
+  id: PropTypes.string,
+
+  /**
+   * Provide label text to be read by screen readers when interacting with the
+   * control
+   */
+  labelText: PropTypes.node.isRequired,
+
+  /**
+   * Provide a name for the underlying `input` node
+   */
+  name: PropTypes.string,
+
+  /**
+   * Provide an optional `onChange` hook that is called each time the value of
+   * the underlying `input` changes
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Specify the value of the <RadioButton>
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+};

package/src/components/RadioButton/RadioButton-old.js

@@ -0,0 +1,109 @@
+import PropTypes from "prop-types";
+import React from "react";
+import classNames from "classnames";
+import uid from "../../tools/uniqueId";
+import { withWFPCoreSettings } from "../WFPCoreSettings";
+
+/** Radio buttons represent a group of mutually exclusive choices */
+
+class RadioButton extends React.Component {
+  static propTypes = {
+    prefix: PropTypes.string.isRequired,
+    /**
+     * Specify whether the <RadioButton> is currently checked
+     */
+    checked: PropTypes.bool,
+
+    /**
+     * Provide an optional className to be applied to the containing node
+     */
+    className: PropTypes.string,
+
+    /**
+     * Specify whether the <RadioButton> should be checked by default
+     */
+    defaultChecked: PropTypes.bool,
+
+    /**
+     * Specify whether the control is disabled
+     */
+    disabled: PropTypes.bool,
+
+    /**
+     * Provide a unique id for the underlying `input` node
+     */
+    id: PropTypes.string,
+
+    /**
+     * Provide label text to be read by screen readers when interacting with the
+     * control
+     */
+    labelText: PropTypes.node.isRequired,
+
+    /**
+     * Provide a name for the underlying `input` node
+     */
+    name: PropTypes.string,
+
+    /**
+     * Provide an optional `onChange` hook that is called each time the value of
+     * the underlying `input` changes
+     */
+    onChange: PropTypes.func,
+
+    /**
+     * Specify the value of the <RadioButton>
+     */
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  };
+
+  UNSAFE_componentWillMount() {
+    this.uid = this.props.id || uid();
+  }
+
+  handleChange = (evt) => {
+    this.props.onChange(evt, this.props.value, this.props.name);
+  };
+
+  render() {
+    const wrapperClasses = classNames(
+      "radioButtonWrapper",
+      this.props.className
+    );
+
+    const { prefix, labelText, inputRef, ...other } = this.props;
+
+    const handleChange = this.props.onChange
+      ? {
+          onChange: this.handleChange,
+        }
+      : {};
+
+    return (
+      <div className={wrapperClasses}>
+        <input
+          {...other}
+          ref={inputRef}
+          type="radio"
+          className={`${prefix}--radio-button`}
+          {...handleChange}
+          id={this.uid}
+        />
+        <label htmlFor={this.uid} className={`${prefix}--radio-button__label`}>
+          <span className={`${prefix}--radio-button__appearance`} />
+          {labelText}
+        </label>
+      </div>
+    );
+  }
+}
+
+const WrappedRadioButton = withWFPCoreSettings(RadioButton);
+
+export default (() => {
+  const forwardRef = (props, ref) => (
+    <WrappedRadioButton {...props} inputRef={ref} />
+  );
+  forwardRef.displayName = "RadioButton";
+  return React.forwardRef(forwardRef);
+})();

package/src/components/RadioButton/RadioButton-test.js

@@ -0,0 +1,131 @@
+import React from 'react';
+import RadioButton from '../RadioButton';
+import RadioButtonSkeleton from '../RadioButton/RadioButton.Skeleton';
+import { mount, shallow } from 'enzyme';
+
+const render = props =>
+  mount(
+    <RadioButton
+      {...props}
+      className="extra-class"
+      name="test-name"
+      value="test-value"
+      labelText="testlabel"
+    />
+  );
+
+describe('RadioButton', () => {
+  describe('renders as expected', () => {
+    const wrapper = render({
+      checked: true,
+    });
+
+    const input = wrapper.find('input');
+    const label = wrapper.find('label');
+    const div = wrapper.find('div');
+
+    describe('input', () => {
+      it('is of type radio', () => {
+        expect(input.props().type).toEqual('radio');
+      });
+
+      it('has the expected class', () => {
+        expect(input.hasClass('wfp--radio-button')).toEqual(true);
+      });
+
+      it('has a unique id set by default', () => {
+        expect(input.props().id).toBeDefined();
+      });
+
+      it('should have checked set when checked is passed', () => {
+        wrapper.setProps({ checked: true });
+        expect(input.props().checked).toEqual(true);
+      });
+
+      it('should set the name prop as expected', () => {
+        expect(input.props().name).toEqual('test-name');
+      });
+    });
+
+    describe('label', () => {
+      it('should set htmlFor', () => {
+        expect(label.props().htmlFor).toEqual(input.props().id);
+      });
+
+      it('should set the correct class', () => {
+        expect(label.props().className).toEqual('wfp--radio-button__label');
+      });
+
+      it('should render a span with the correct class', () => {
+        const span = label.find('span');
+        expect(span.hasClass('wfp--radio-button__appearance')).toEqual(true);
+      });
+
+      it('should render label text', () => {
+        wrapper.setProps({ labelText: 'test label text' });
+        expect(label.text()).toMatch(/test label text/);
+      });
+    });
+
+    describe('wrapper', () => {
+      it('should have the correct class', () => {
+        expect(div.hasClass('radioButtonWrapper')).toEqual(true);
+      });
+
+      it('should have extra classes applied', () => {
+        expect(div.hasClass('extra-class')).toEqual(true);
+      });
+    });
+  });
+
+  it('should set defaultChecked as expected', () => {
+    const wrapper = render({
+      defaultChecked: true,
+    });
+
+    const input = () => wrapper.find('input');
+    expect(input().props().defaultChecked).toEqual(true);
+    wrapper.setProps({ defaultChecked: false });
+    expect(input().props().defaultChecked).toEqual(false);
+  });
+
+  it('should set id if one is passed in', () => {
+    const wrapper = render({
+      id: 'unique-id',
+    });
+
+    const input = wrapper.find('input');
+    expect(input.props().id).toEqual('unique-id');
+  });
+
+  describe('events', () => {
+    it('should invoke onChange with expected arguments', () => {
+      const onChange = jest.fn();
+      const wrapper = render({ onChange });
+      const input = wrapper.find('input');
+      const inputElement = input.instance();
+
+      inputElement.checked = true;
+      wrapper.find('input').simulate('change');
+
+      const call = onChange.mock.calls[0];
+
+      expect(call[0]).toEqual('test-value');
+      expect(call[1]).toEqual('test-name');
+      expect(call[2].target).toBe(inputElement);
+    });
+  });
+});
+
+describe('RadioButtonSkeleton', () => {
+  describe('Renders as expected', () => {
+    const wrapper = shallow(<RadioButtonSkeleton />);
+
+    const label = wrapper.find('label');
+
+    it('Has the expected classes', () => {
+      expect(label.hasClass('wfp--skeleton')).toEqual(true);
+      expect(label.hasClass('wfp--radio-button__label')).toEqual(true);
+    });
+  });
+});

package/src/components/RadioButton/RadioButton.Skeleton.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import useSettings from '../../hooks/useSettings';
+
+const RadioButtonSkeleton = (props) => {
+  const { prefix } = useSettings();
+  const { id } = props;
+  return (
+    <div className="radioButtonWrapper">
+      <div className={`${prefix}--radio-button ${prefix}--skeleton`} />
+      {
+        <label
+          className={`${prefix}--radio-button__label ${prefix}--skeleton`}
+          htmlFor={id}
+        />
+      }
+    </div>
+  );
+};
+
+export default RadioButtonSkeleton;

package/src/components/RadioButton/RadioButton.hbs

@@ -0,0 +1,7 @@
+<div class="radioButtonWrapper">
+	<input name="test" id="radio-1" class="wfp--radio-button" value="standard" type="radio">
+	<label for="radio-1" class="wfp--radio-button__label">
+		<span class="wfp--radio-button__appearance">
+		</span>Standard Radio Button
+	</label>
+</div>

package/src/components/RadioButton/RadioButton.stories.tsx

@@ -0,0 +1,183 @@
+import React, { useState } from "react";
+import markdown from "./README.mdx";
+import RadioButton from ".";
+import InputGroup from "../InputGroup";
+
+export default {
+  title: "Components/Forms/RadioButton",
+  component: RadioButton,
+  parameters: {
+    componentSubtitle: "RadioButton",
+    status: "released",
+    mdx: markdown,
+  },
+};
+
+export const RadioButtonDefault: Story = {
+  render: (args) => <RadioButton {...args} />,
+  args: {
+    labelText: "Radio button",
+    value: "radio0",
+    name: "radio0",
+  },
+};
+
+export const VerticalGrouping = (args) => {
+  const [gender, setgender] = useState("female");
+
+  const handleOnchange = (e) => {
+    setgender(e.target.value);
+    console.log("eg", e.target.value);
+  };
+
+  return (
+    <InputGroup
+      name="input-group"
+      helperText="select one"
+      labelText="Please select your gender"
+      vertical
+    >
+      <RadioButton
+        {...args}
+        value="female"
+        id="female"
+        labelText="Female"
+        name="gender"
+        onChange={handleOnchange}
+      />
+      <RadioButton
+        {...args}
+        value="male"
+        labelText="Male"
+        id="male"
+        name="gender"
+        onChange={handleOnchange}
+      />
+      <RadioButton
+        {...args}
+        value="other"
+        labelText="Other"
+        id="other"
+        name="gender"
+        onChange={handleOnchange}
+      />
+    </InputGroup>
+  );
+};
+
+const verticalsourcecode = `
+
+import { RadioButton, InputGroup  } from "@progressiveui/react";
+
+const [gender, setgender] = useState('');
+
+const handleOnchange = (e) => {
+  setgender(e);
+};
+
+
+<InputGroup
+  name="input-group"
+  helperText="select one"
+  labelText="Please select your gender"
+  vertical>
+  <RadioButton
+    value="female"
+    id="female"
+    labelText="Female"
+    name="female"
+    checked={gender === 'female'}
+    onChange={handleOnchange}
+  />
+  <RadioButton
+    value="male"
+    labelText="Male"
+    id="male"
+    name="male"
+    checked={gender === 'male'}
+    onChange={handleOnchange}
+  />
+  <RadioButton
+    value="other"
+    labelText="Other"
+    id="other"
+    name="other"
+    checked={gender === 'other'}
+    onChange={handleOnchange}
+  />
+</InputGroup>
+`;
+VerticalGrouping.story = {
+  parameters: {
+    docs: {
+      source: {
+        code: verticalsourcecode,
+      },
+    },
+  },
+};
+
+export const HorizontalGrouping = () => (
+  <InputGroup
+    name="input-group"
+    helperText="select one"
+    labelText="Please select your age range"
+  >
+    <RadioButton
+      name="radiob"
+      value="standard"
+      id="radiob-1"
+      labelText="Below 20"
+    />
+    <RadioButton
+      name="radiob"
+      value="default-selected"
+      id="radiob-2"
+      labelText="20-50"
+    />
+    <RadioButton
+      name="radiob"
+      value="disabled"
+      id="radiob-3"
+      labelText="Above 50"
+    />
+  </InputGroup>
+);
+
+const horizontalsourcecode = `
+import { RadioButton, InputGroup  } from "@progressiveui/react";
+
+<InputGroup
+  name="input-group"
+  helperText="select one"
+  labelText="Please select your age range">
+  <RadioButton
+    name="radiob"
+    value="standard"
+    id="radiob-1"
+    labelText="Below 20"
+  />
+  <RadioButton
+    name="radiob"
+    value="default-selected"
+    id="radiob-2"
+    labelText="20-50"
+  />
+  <RadioButton
+    name="radiob"
+    value="disabled"
+    id="radiob-3"
+    labelText="Above 50"
+  />
+</InputGroup>
+`;
+
+HorizontalGrouping.story = {
+  parameters: {
+    docs: {
+      source: {
+        code: horizontalsourcecode,
+      },
+    },
+  },
+};

package/src/components/RadioButton/RadioButton.tsx

@@ -0,0 +1,85 @@
+import * as React from "react";
+import { useState, ChangeEventHandler } from "react";
+import classNames from "classnames";
+import uId from "../../tools/uniqueId";
+import useSettings from "../../hooks/useSettings";
+import { InputProps } from "../Input";
+
+interface RadioButtonProps
+  extends InputProps,
+    Omit<React.ComponentPropsWithRef<"input">, "onChange"> {
+  /**
+   * Specify whether the <RadioButton> is currently checked
+   */
+  checked?: boolean;
+
+  /**
+   * Specify whether the <RadioButton> should be checked by default
+   */
+  defaultChecked?: boolean;
+  /**
+   * Specify whether the control is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Provide an optional `onChange` hook that is called each time the value of
+   * the underlying `input` changes
+   */
+  onChange?: (
+    event: React.ChangeEvent<HTMLInputElement>,
+    value: string | number,
+    name?: string
+  ) => void;
+  /**
+   * Specify the value of the <RadioButton>
+   */
+  value: string | number;
+}
+
+const RadioButton: React.FC<RadioButtonProps> = React.forwardRef(
+  (props, ref) => {
+    const { labelText, id, className, value, name, onChange, ...other } = props;
+
+    const [uid] = useState<string>(id || uId());
+
+    const { prefix } = useSettings();
+
+    const wrapperClasses = classNames("radioButtonWrapper", className);
+
+    const handleOnChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
+      onChange?.(evt, value, name);
+    };
+
+    const handleChange = onChange
+      ? {
+          onChange: handleOnChange,
+        }
+      : {};
+
+    return (
+      <div className={wrapperClasses}>
+        <input
+          {...other}
+          ref={ref}
+          type="radio"
+          className={`${prefix}--radio-button`}
+          {...handleChange}
+          id={uid}
+          value={value}
+          name={name}
+          checked={props.checked}
+          defaultChecked={props.defaultChecked}
+          disabled={props.disabled}
+        />
+        <label htmlFor={uid} className={`${prefix}--radio-button__label`}>
+          <span className={`${prefix}--radio-button__appearance`} />
+          {labelText}
+        </label>
+      </div>
+    );
+  }
+);
+
+RadioButton.displayName = "RadioButton";
+
+export default RadioButton;