@progressiveui/react 2.0.2 → 2.0.4

package/src/components/TextInput/TextInput.legacy.js

@@ -1,162 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import classNames from 'classnames';
-import useSettings from '../../hooks/useSettings';
-import Input from '../Input/Input';
-import useInput from '../Input/useInput';
-
-/** Text inputs enable the user to interact with and input content and data. This component can be used for long and short form entries. */
-
-const TextInput = React.forwardRef((props, ref) => {
-  const {
-    disabled,
-    labelText,
-    className,
-    id,
-    formItemClassName,
-    placeholder,
-    type,
-    onChange,
-    onClick,
-    hideLabel,
-    invalid,
-    invalidText,
-    helperText,
-    inputRef = ref,
-    pattern,
-    required,
-    ...other
-  } = props;
-
-  const { prefix } = useSettings();
-
-  const textInputClasses = classNames(`${prefix}--text`, className, {
-    [`${prefix}--text--helpertext`]: helperText,
-    [`${prefix}--text--nolabel`]: hideLabel,
-    [`${prefix}--text--required`]: required,
-  });
-
-  const newProps = {
-    disabled,
-    id,
-  };
-
-  const input = useInput(props);
-
-  return (
-    <Input {...props} formItemClassName={formItemClassName}>
-      <input
-        pattern={pattern}
-        type={type}
-        {...other}
-        {...newProps}
-        ref={inputRef}
-        className={textInputClasses}
-        {...input}
-      />
-    </Input>
-  );
-});
-
-TextInput.propTypes = {
-  /**
-   * Specify an optional className to be applied to the &lt;input&gt; node
-   */
-  className: PropTypes.string,
-
-  /**
-   * Optionally provide the default value of the &lt;input&gt;
-   */
-  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Specify whether the &lt;input&gt; should be disabled
-   */
-  disabled: PropTypes.bool,
-
-  /**
-   * Specify an optional className to be applied to the form-item node
-   */
-  formItemClassName: PropTypes.string,
-
-  /**
-   * Specify a custom `id` for the &lt;input&gt;
-   */
-  id: PropTypes.string,
-
-  /**
-   * Provide the text that will be read by a screen reader when visiting this
-   * control
-   */
-  labelText: PropTypes.node,
-
-  /**
-   * Specify a custom `name` for the &lt;input&gt;
-   */
-  name: PropTypes.string,
-
-  /**
-   * Optionally provide an `onChange` handler that is called whenever &lt;input&gt;
-   * is updated
-   */
-  onChange: PropTypes.func,
-
-  /**
-   * Optionally provide an `onClick` handler that is called whenever the
-   * &lt;input&gt; is clicked
-   */
-  onClick: PropTypes.func,
-
-  /**
-   * Specify the placeholder attribute for the &lt;input&gt;
-   */
-  placeholder: PropTypes.string,
-
-  /**
-   * Specify the type of the &lt;input&gt;
-   */
-  type: PropTypes.string,
-
-  /**
-   * Specify the value of the &lt;input&gt;
-   */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Specify whether you want the underlying label to be visually hidden
-   */
-  hideLabel: PropTypes.bool,
-
-  /**
-   * Specify whether the control is currently invalid.
-   * Either a boolean in combination with `invalidText` or an `object`( eg. { message: "Message", …otherErrorProperties }) can be passed.
-   */
-  invalid: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-
-  /**
-   * Provide the text that is displayed when the control is in an invalid state
-   */
-  invalidText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-
-  /**
-   * Provide additional component that is used alongside the input for customization
-   */
-  additional: PropTypes.node,
-
-  /**
-   * Provide text that is used alongside the control label for additional help
-   */
-  helperText: PropTypes.node,
-};
-
-TextInput.defaultProps = {
-  className: 'wfp--text-input',
-  disabled: false,
-  onChange: () => {},
-  onClick: () => {},
-  invalid: false,
-  invalidText: '',
-  helperText: '',
-};
-
-export default TextInput;

package/src/components/TextInput/TextInput.stories.tsx

@@ -1,80 +0,0 @@
-import React from "react";
-import TextInput from ".";
-import reactHookFormDecorator from "../../../.storybook/reactHookFormDecorator";
-import { Controller } from "react-hook-form";
-
-export default {
-  title: "Components/Forms/TextInput",
-  component: TextInput,
-  parameters: {
-    componentSubtitle: "Component",
-    status: "released",
-  },
-};
-
-export const TextInputDefault = (args) => <TextInput {...args} />;
-
-TextInputDefault.args = {
-  type: "text",
-  name: "inputname",
-  helperText: "Optional helperText",
-  labelText: "The labelText",
-  placeholder: "placeholder",
-};
-
-export const PasswordInput = (args) => <TextInput {...args} />;
-
-PasswordInput.args = {
-  type: "password",
-  name: "password",
-  labelText: "The labelText",
-};
-
-export const withError = (args) => <TextInput {...args} />;
-
-withError.args = {
-  name: "inputname",
-  helperText: "Optional helperText",
-  labelText: "Enter password",
-  invalid: { message: "Please enter your first name" },
-};
-
-export const withDisabled = (args) => <TextInput {...args} />;
-
-withDisabled.args = {
-  name: "inputname",
-  helperText: "Optional helperText",
-  labelText: "Disabled labelText",
-  disabled: true,
-};
-
-export const withReactHookForm = (args, props) => {
-  const { form } = props;
-
-  if (!props.form?.register) return <div>Loading...</div>;
-  return (
-    <>
-      <TextInput {...args} {...form.register("inputname")} />
-
-      <Controller
-        render={({ field }) => (
-          <TextInput
-            helperText="Optional helperText"
-            labelText="Disabled labelText"
-            {...field}
-          />
-        )}
-        control={form.control}
-        name="select"
-      />
-    </>
-  );
-};
-
-withReactHookForm.args = {
-  name: "inputname",
-  helperText: "Optional helperText",
-  labelText: "Disabled labelText",
-};
-
-withReactHookForm.decorators = [reactHookFormDecorator];

package/src/components/TextInput/TextInput.tsx

@@ -1,52 +0,0 @@
-import * as React from "react";
-import classNames from "classnames";
-import useSettings from "../../hooks/useSettings";
-import Input from "../Input/Input";
-import { UseInputProps, useInput } from "../Input/useInput";
-import { InputProps } from "../Input";
-
-/** Text inputs enable the user to interact with and input content and data. This component can be used for long and short form entries. */
-
-interface TextInputProps
-  extends InputProps,
-    React.ComponentPropsWithRef<"input"> {}
-
-const TextInput: React.FC<TextInputProps> = React.forwardRef((props, ref) => {
-  const {
-    //className,
-    //formItemClassName,
-    hideLabel,
-    helperText,
-    pattern,
-    required,
-  } = props;
-
-  const { prefix } = useSettings();
-
-  const inputClassName = classNames(
-    `${prefix}--input`,
-    `${prefix}--text-input`,
-    //className,
-    {
-      [`${prefix}--text--helpertext`]: helperText,
-      [`${prefix}--text--nolabel`]: hideLabel,
-      [`${prefix}--text--required`]: required,
-    }
-  );
-
-  const useInputProps = props as UseInputProps;
-  const { inputProps, wrapperProps } = useInput({
-    ...useInputProps,
-    inputClassName,
-  });
-
-  return (
-    <Input {...wrapperProps} /*formItemClassName={formItemClassName} */>
-      <input pattern={pattern} {...inputProps} ref={ref} />
-    </Input>
-  );
-});
-
-TextInput.displayName = "TextInput";
-
-export default TextInput;

package/src/components/TextInput/index.ts

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

package/src/components/Toggle/README.mdx

@@ -1,4 +0,0 @@
-**Toggles** are controls that are used to quickly switch between two possible states. The example below shows
-an uncontrolled Toggle component. To use the Toggle component as a controlled component, set the toggled property.
-Setting the toggled property will allow you to change the value dynamically, whereas setting the defaultToggled
-prop will only set the value initially.

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

@@ -1,113 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import classNames from 'classnames';
-import useSettings from '../../hooks/useSettings';
-
-/** A toggle is used to quickly switch between two possible states. They are commonly used for “on/off” switches */
-
-const Toggle = ({
-  className,
-  defaultToggled,
-  toggled,
-  onChange,
-  onToggle,
-  id,
-  name,
-  labelA,
-  labelB,
-  ...other
-}) => {
-  const { prefix } = useSettings();
-  let input;
-  const wrapperClasses = classNames({
-    [`${prefix}--form-item`]: true,
-    [className]: className,
-  });
-
-  const checkedProps = {};
-
-  if (typeof toggled !== 'undefined') {
-    checkedProps.checked = toggled;
-  } else {
-    checkedProps.defaultChecked = defaultToggled;
-  }
-
-  const htmlFor = id ? id : name;
-
-  return (
-    <div className={wrapperClasses}>
-      <input
-        {...other}
-        {...checkedProps}
-        type="checkbox"
-        id={htmlFor}
-        className={`${prefix}--toggle`}
-        onChange={(evt) => {
-          onChange && onChange(evt);
-          onToggle(input.checked, htmlFor, evt);
-        }}
-        ref={(el) => {
-          input = el;
-        }}
-      />
-
-      <label className={`${prefix}--toggle__label`} htmlFor={htmlFor}>
-        <span className={`${prefix}--toggle__text--left`}>{labelA}</span>
-        <span className={`${prefix}--toggle__appearance`} />
-        <span className={`${prefix}--toggle__text--right`}>{labelB}</span>
-      </label>
-    </div>
-  );
-};
-
-Toggle.propTypes = {
-  /**
-   * Specify a custom className to apply to the form-item node
-   */
-  className: PropTypes.string,
-
-  /**
-   * Specify whether the toggle should be on by default
-   */
-  defaultToggled: PropTypes.bool,
-
-  /**
-   * Provide an optional hook that is called when the control is toggled
-   */
-  onToggle: PropTypes.func,
-
-  /**
-   * Provide an id that unique represents the underlying `input`
-   */
-  id: PropTypes.string,
-
-  /**
-   * Provide an name that unique represents the underlying `input`
-   */
-  name: PropTypes.string.isRequired,
-
-  /**
-   * Specify whether the control is toggled
-   */
-  toggled: PropTypes.bool,
-
-  /**
-   * Specify the label for the "off" position
-   */
-  labelA: PropTypes.string.isRequired,
-
-  /**
-   * Specify the label for the "on" position
-   */
-  labelB: PropTypes.string.isRequired,
-};
-
-Toggle.defaultProps = {
-  defaultToggled: false,
-  labelA: 'Off',
-  labelB: 'On',
-  name: 'toggle',
-  onToggle: () => {},
-};
-
-export default Toggle;

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

@@ -1,114 +0,0 @@
-import React from 'react';
-import Toggle from '.';
-import ToggleSkeleton from './Toggle.Skeleton';
-import { mount, shallow } from 'enzyme';
-
-describe('Toggle', () => {
-  describe('Renders as expected', () => {
-    const wrapper = mount(<Toggle id="toggle-1" />);
-
-    const input = wrapper.find('input');
-
-    it('Switch and label Ids should match', () => {
-      const toggleLabel = wrapper.find('.wfp--toggle__label');
-      expect(input.id).toEqual(toggleLabel.htmlFor);
-    });
-
-    it('should set defaultChecked as expected', () => {
-      expect(input.props().defaultChecked).toEqual(false);
-      wrapper.setProps({ defaultToggled: true });
-      expect(wrapper.find('input').props().defaultChecked).toEqual(true);
-    });
-
-    it('Can set defaultToggled state', () => {
-      wrapper.setProps({ defaultToggled: true });
-      expect(wrapper.find('.wfp--toggle').props().defaultChecked).toEqual(true);
-    });
-
-    it('Should add extra classes that are passed via className', () => {
-      wrapper.setProps({ className: 'extra-class' });
-      expect(wrapper.find('div').hasClass('extra-class')).toEqual(true);
-    });
-
-    it('Can be disabled', () => {
-      wrapper.setProps({ disabled: true });
-      expect(wrapper.find('.wfp--toggle').props().disabled).toEqual(true);
-    });
-
-    it('Can have a labelA', () => {
-      wrapper.setProps({ labelA: 'labelA-test' });
-      expect(wrapper.find('.wfp--toggle__text--left').text()).toEqual(
-        'labelA-test'
-      );
-    });
-
-    it('Can have a labelB', () => {
-      wrapper.setProps({ labelB: 'labelB-test' });
-      expect(wrapper.find('.wfp--toggle__text--right').text()).toEqual(
-        'labelB-test'
-      );
-    });
-  });
-
-  it('toggled prop sets checked prop on input', () => {
-    const wrapper = mount(<Toggle id="test" toggled />);
-
-    const input = () => wrapper.find('input');
-    expect(input().props().checked).toEqual(true);
-
-    wrapper.setProps({ toggled: false });
-    expect(input().props().checked).toEqual(false);
-  });
-
-  describe('events', () => {
-    it('passes along onChange to <input>', () => {
-      const onChange = jest.fn();
-      const id = 'test-input';
-      const wrapper = mount(<Toggle id={id} onChange={onChange} />);
-
-      const input = wrapper.find('input');
-      const inputElement = input.instance();
-
-      inputElement.checked = true;
-      wrapper.find('input').simulate('change');
-
-      expect(
-        onChange.mock.calls.map((call) =>
-          call.map((arg, i) => (i > 0 ? arg : arg.target))
-        )
-      ).toEqual([[inputElement]]);
-    });
-
-    it('should invoke onToggle with expected arguments', () => {
-      const onToggle = jest.fn();
-      const id = 'test-input';
-      const wrapper = mount(<Toggle id={id} onToggle={onToggle} />);
-
-      const input = wrapper.find('input');
-      const inputElement = input.instance();
-
-      inputElement.checked = true;
-      wrapper.find('input').simulate('change');
-
-      const call = onToggle.mock.calls[0];
-
-      expect(call[0]).toEqual(true);
-      expect(call[1]).toEqual(id);
-      expect(call[2].target).toBe(inputElement);
-    });
-  });
-});
-
-describe('ToggleSkeleton', () => {
-  describe('Renders as expected', () => {
-    const wrapper = shallow(<ToggleSkeleton />);
-    const input = wrapper.find('input');
-    const toggleLabel = wrapper.find('.wfp--toggle__label');
-
-    it('Has the expected classes', () => {
-      expect(input.hasClass('wfp--skeleton')).toEqual(true);
-      expect(input.hasClass('wfp--toggle')).toEqual(true);
-      expect(toggleLabel.hasClass('wfp--skeleton')).toEqual(true);
-    });
-  });
-});

package/src/components/Toggle/Toggle.Skeleton.jsx

@@ -1,18 +0,0 @@
-import React from "react";
-
-export default class ToggleSkeleton extends React.Component {
-  render() {
-    const { id } = this.props;
-    return (
-      <div className="wfp--form-item">
-        <input type="checkbox" id={id} className="wfp--toggle wfp--skeleton" />
-
-        <label className="wfp--toggle__label wfp--skeleton" htmlFor={id}>
-          <span className="wfp--toggle__text--left" />
-          <span className="wfp--toggle__appearance" />
-          <span className="wfp--toggle__text--right" />
-        </label>
-      </div>
-    );
-  }
-}

package/src/components/Toggle/Toggle.stories.tsx

@@ -1,21 +0,0 @@
-import * as React from "react";
-import Toggle from ".";
-
-export default {
-  title: "Components/UI Elements/Toggle",
-  component: Toggle,
-  parameters: {
-    componentSubtitle: "Component",
-    status: "released",
-  },
-};
-
-export const ToggleDefault: Story = {
-  render: (args) => <Toggle {...args} />,
-  args: {
-    defaultToggled: false,
-    labelA: "Off",
-    labelB: "On",
-    name: "togglename",
-  },
-};

package/src/components/Toggle/Toggle.tsx

@@ -1,113 +0,0 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-import * as React from "react";
-import classNames from "classnames";
-import useSettings from "../../hooks/useSettings";
-import Input, { InputProps, useInput } from "../Input";
-import { UseInputProps } from "../Input/useInput";
-
-/** A toggle is used to quickly switch between two possible states. They are commonly used for “on/off” switches */
-
-interface ToggleProps extends InputProps, React.ComponentPropsWithRef<"input"> {
-  /**
-   * Specify whether the toggle should be on by default
-   */
-  defaultToggled?: boolean;
-  toggled?: boolean;
-  /**
-   * Specify the label for the "off" position
-   */
-  labelA?: string;
-  /**
-   * Specify the label for the "on" position
-   */
-  labelB?: string;
-  /**
-   * Provide an optional hook that is called when the control is toggled
-   */
-  /* onToggleLegacy?: (
-    value: boolean,
-    htmlFor: string,
-    event: React.ChangeEvent<HTMLInputElement>,
-  ) => void;
-  className?: string; */
-  /**
-   * Provide an id that unique represents the underlying `input`
-   */
-  id?: string;
-  /**
-   * Provide an name that unique represents the underlying `input`
-   */
-  name?: string;
-  /**
-   * Provide a function that is called when a change event occurs on the control
-   */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-export type Ref = HTMLTextAreaElement;
-
-const Toggle: React.FC<ToggleProps> = React.forwardRef((props, ref) => {
-  const {
-    className,
-    defaultToggled = false,
-    //    toggled,
-    //    onChange,
-    //    onToggle = () => {},
-    id,
-    labelA = "Off",
-    labelB = "On",
-    ...other
-  } = props;
-  const { prefix } = useSettings();
-  //  let input;
-  const wrapperClasses = classNames(
-    {
-      [`${prefix}--form-item`]: true,
-    },
-    className,
-  );
-
-  // const checkedProps = {};
-
-  // if (typeof toggled !== 'undefined') {
-  //   checkedProps.checked = toggled;
-  // } else {
-  //   checkedProps.defaultChecked = defaultToggled;
-  // }
-
-  const htmlFor = id ? id : other.name;
-  const useInputProps = props as UseInputProps;
-
-  const input = useInput(useInputProps);
-
-  const otherInputProps = other as React.ComponentPropsWithRef<"input">;
-
-  return (
-    <Input className={wrapperClasses} {...props}>
-      <input
-        {...otherInputProps}
-        {...input.inputProps}
-        //checked={toggled}
-        defaultChecked={defaultToggled}
-        type="checkbox"
-        id={htmlFor}
-        className={`${prefix}--toggle`}
-        /*onChange={(evt) => {
-          onChange && onChange(evt);
-          onToggle && onToggle(input.checked, htmlFor, evt);
-        }}*/
-        ref={ref}
-      />
-
-      <label className={`${prefix}--toggle__label`} htmlFor={htmlFor}>
-        <span className={`${prefix}--toggle__text--left`}>{labelA}</span>
-        <span className={`${prefix}--toggle__appearance`} />
-        <span className={`${prefix}--toggle__text--right`}>{labelB}</span>
-      </label>
-    </Input>
-  );
-});
-
-Toggle.displayName = "Toggle";
-
-export default Toggle;

package/src/components/Toggle/index.ts

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

package/src/components/Tooltip/Empty.js

@@ -1,5 +0,0 @@
-import * as React from 'react';
-
-export default function Empty() {
-  return <div></div>;
-}

package/src/components/Tooltip/README.mdx

@@ -1 +0,0 @@
-The tooltip component uses [react-popper-tooltip](https://react-popper-tooltip.netlify.app/) for tooltips and [Popper.js](https://popper.js.org/) to place the tooltip.