@progressiveui/react 1.22.0

package/src/components/InlineLoading/inline-loading.js

@@ -0,0 +1,135 @@
+/**
+ * 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 { settings } from '../../globals/js';
+import mixin from '../../globals/js/misc/mixin';
+import createComponent from '../../globals/js/mixins/create-component';
+import initComponentBySearch from '../../globals/js/mixins/init-component-by-search';
+import handles from '../../globals/js/mixins/handles';
+import toggleAttribute from '../../globals/js/misc/toggle-attribute';
+
+const { prefix } = settings;
+
+/** kadskjbkj */
+
+class InlineLoading extends mixin(
+  createComponent,
+  initComponentBySearch,
+  handles
+) {
+  /**
+   * Spinner indicating loading state.
+   * @extends CreateComponent
+   * @extends InitComponentBySearch
+   * @extends Handles
+   * @param {HTMLElement} element The element working as a spinner.
+   * @param {object} [options] The component options.
+   * @param {string} [options.initialState] The initial state, should be `inactive`, `active` or `finished`.
+   */
+  constructor(element, options) {
+    super(element, options);
+    // Sets the initial state
+    const initialState = this.options.initialState;
+    if (initialState) {
+      this.setState(initialState);
+    }
+  }
+
+  /**
+   * Sets active/inactive state.
+   * @param {string} state The new state, should be `inactive`, `active` or `finished`.
+   */
+  setState(state) {
+    const states = this.constructor.states;
+    const values = Object.keys(states).map((key) => states[key]);
+    if (values.indexOf(state) < 0) {
+      throw new Error(
+        `One of the following value should be given as the state: ${values.join(
+          ', '
+        )}`
+      );
+    }
+
+    const elem = this.element;
+    const {
+      selectorSpinner,
+      selectorFinished,
+      selectorTextActive,
+      selectorTextFinished,
+    } = this.options;
+    const spinner = elem.querySelector(selectorSpinner);
+    const finished = elem.querySelector(selectorFinished);
+    const textActive = elem.querySelector(selectorTextActive);
+    const textFinished = elem.querySelector(selectorTextFinished);
+
+    if (spinner) {
+      spinner.classList.toggle(
+        this.options.classLoadingStop,
+        state !== states.ACTIVE
+      );
+      toggleAttribute(spinner, 'hidden', state === states.FINISHED);
+    }
+
+    if (finished) {
+      toggleAttribute(finished, 'hidden', state !== states.FINISHED);
+    }
+
+    if (textActive) {
+      toggleAttribute(textActive, 'hidden', state !== states.ACTIVE);
+    }
+
+    if (textFinished) {
+      toggleAttribute(textFinished, 'hidden', state !== states.FINISHED);
+    }
+
+    return this;
+  }
+
+  /**
+   * The list of states.
+   * @type {object<string, string>}
+   */
+  static states /* #__PURE_CLASS_PROPERTY__ */ = {
+    INACTIVE: 'inactive',
+    ACTIVE: 'active',
+    FINISHED: 'finished',
+  };
+
+  /**
+   * The map associating DOM element and spinner instance.
+   * @member InlineLoading.components
+   * @type {WeakMap}
+   */
+  static components /* #__PURE_CLASS_PROPERTY__ */ = new WeakMap();
+
+  /**
+   * The component options.
+   * If `options` is specified in the constructor, {@linkcode InlineLoading.create .create()},
+   * or {@linkcode InlineLoading.init .init()},
+   * properties in this object are overriden for the instance being create and how {@linkcode InlineLoading.init .init()} works.
+   * @member InlineLoading.options
+   * @type {object}
+   * @property {string} selectorInit The CSS selector to find inline loading components.
+   * @property {string} selectorSpinner The CSS selector to find the spinner.
+   * @property {string} selectorFinished The CSS selector to find the "finished" icon.
+   * @property {string} selectorTextActive The CSS selector to find the text describing the active state.
+   * @property {string} selectorTextFinished The CSS selector to find the text describing the finished state.
+   * @property {string} classLoadingStop The CSS class for spinner's stopped state.
+   */
+  static get options() {
+    return {
+      selectorInit: '[data-inline-loading]',
+      selectorSpinner: '[data-inline-loading-spinner]',
+      selectorFinished: '[data-inline-loading-finished]',
+      selectorTextActive: '[data-inline-loading-text-active]',
+      selectorTextFinished: '[data-inline-loading-text-finished]',
+      classLoadingStop: `${prefix}--loading--stop`,
+    };
+  }
+}
+
+export default InlineLoading;

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

@@ -0,0 +1,120 @@
+import React from 'react';
+import Input from '../Input';
+import { shallow, mount } from 'enzyme';
+
+describe('Input', () => {
+    describe('Renders as expected', () => {
+        const minProps = {
+            labelText: 'labelText',
+            helperText:'helperText',
+            additional: 'additional',
+          };  
+        const wrapper = mount(
+            <Input {...minProps} className="some-class">
+            {() => <input placeholder="This can be any type of custom input" />}
+            </Input>
+        );
+
+        const shallowWrapper = shallow(
+            <Input {...minProps}>
+            {() => <input placeholder="This can be any type of custom input" />}
+            </Input>
+        );
+        it('should use the appropriate link class', () => {
+            expect(wrapper.length).toBe(1);
+        });
+        it('Renders as an <FormItem> element wrapper', () => {
+            expect(shallowWrapper.is('FormItem')).toBe(true);
+        });
+        it('should expect a helperText prop', () => {
+            expect(wrapper.prop('helperText')).toEqual('helperText');
+        });
+
+        it('should expect a labelText prop', () => {
+            expect(wrapper.prop('labelText')).toEqual('labelText');
+        });
+   
+        it('should expect a additional prop', () => {
+            expect(wrapper.prop('additional')).toEqual('additional');
+        });
+
+        it('should expect classes', () => {
+            expect(wrapper.hasClass('some-class')).toBe(true);
+        });
+
+
+        describe('inputClassWrapper', () => {
+            const inputClassWrapper = () => wrapper.find('div.wfp--input-wrapper');
+
+            it('render as expected', () => {
+                expect(inputClassWrapper().length).toBe(1);
+            })
+    
+            it('has inner div classes as expected', () => {
+                expect(inputClassWrapper().hasClass('wfp--input-wrapper')).toBe(true);
+            })
+
+        })
+
+
+        describe('error handling', () => {
+            const errorWrapper = shallow(
+                <Input invalid className="some-class">
+                {() => <input placeholder="This can be any type of custom input" />}
+                </Input>
+            );
+    
+            it('has error div classes as expected', () => {
+                expect(errorWrapper.exists('.wfp--form-requirement')).toBe(true);
+            })
+
+            it('has error message shows required text', () => {
+                expect(errorWrapper.find('span').text()).toEqual('required');
+            })
+
+            describe('invalid object message', () => {
+                const inValidObjectWrapper = shallow(
+                    <Input invalid={{message:'input field required'}} className="some-class">
+                    {() => <input placeholder="This can be any type of custom input" />}
+                    </Input>
+                );
+
+                it('has error message shows passed message', () => {
+                    expect(inValidObjectWrapper.find('span').text()).toEqual('input field required');
+                })
+            })
+
+            describe('invalid message as string', () => {
+                const inValidStringWrapper = shallow(
+                    <Input invalid invalidText='invalid input' className="some-class">
+                    {() => <input placeholder="This can be any type of custom input" />}
+                    </Input>
+                );
+
+                it('has error message shows passed message', () => {
+                    expect(inValidStringWrapper.find('span').text()).toEqual('invalid input');
+                })
+            })
+        })
+
+        // describe('onChange handling', () => {
+        //     const testState = { value: '' }
+        //     const onChangeWrapper = shallow(
+        //         <Input className="some-class" onChange={(e) => {
+        //             testState.value = e.target.value;
+        //           }}>
+        //         {() => <input placeholder="This can be any type of custom input" />}
+        //         </Input>
+        //     );
+
+        //     it('enable onChange if input is not disabled or readOnly', () => {
+        //         onChangeWrapper.find('input').simulate('change', { target: { value: "50" } });
+        //         expect(testState.value).toEqual("50");
+        //     })
+        // })
+
+    });
+
+    
+    
+});

package/src/components/Input/Input.stories.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import markdown from "./README.mdx";
+import Input from ".";
+
+export default {
+  title: "Components/Forms/Input",
+  component: Input,
+  parameters: {
+    componentSubtitle: "Component",
+    status: "experimental",
+    mdx: markdown,
+  },
+};
+
+export const InputDefault: Story = {
+  render: (args) => (
+    <Input {...args}>
+      <input placeholder="This can be any type of custom input" />
+    </Input>
+  ),
+  args: {
+    name: "inputname",
+    helperText: "Optional helperText",
+    labelText: "The labelText",
+  },
+};
+
+const inputsourcecode = `
+import { Input  } from "@progressiveui/react";
+
+<Input
+  helperText="Optional helperText"
+  labelText="The labelText"
+  name="inputname"
+>
+{() => <input placeholder="This can be any type of custom input" />}
+</Input>
+`;
+
+InputDefault.story = {
+  parameters: {
+    docs: {
+      source: {
+        code: inputsourcecode,
+      },
+    },
+  },
+};

package/src/components/Input/Input.tsx

@@ -0,0 +1,345 @@
+import * as React from "react";
+import { ComponentType } from "react";
+import type { PropsWithChildren } from "react";
+import classNames from "classnames";
+import useSettings from "../../hooks/useSettings";
+import FormItem from "../FormItem/FormItem";
+import { WarningSolid } from "@progressiveui/icons-react";
+import * as HookForm from "react-hook-form";
+
+/**
+   * Optionally provide the default value of the input @design
+ 
+  defaultValue?: string | number;  */
+
+export interface InputProps {
+  /**
+   * Provide text that is used alongside the control label for additional help
+   */
+  helperText?: React.ReactNode;
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control @design
+   */
+  labelText?: React.ReactNode;
+
+  /**
+   * Provide a custom className that is applied directly to the underlying
+   * <textarea> node
+   */
+  formItemClassName?: string;
+  /**
+   * Provide a custom className that is applied directly to the underlying
+   * <input> or <textarea> node
+   */
+  inputWrapperClassName?: string;
+  /**
+   * Specify whether you want the underlying label to be visually hidden
+   */
+  hideLabel?: boolean;
+  /**
+   * 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?: boolean | HookForm.FieldError | any;
+  /**
+   * Provide the text that is displayed when the control is in an invalid state @design
+   */
+  invalidText?: string | React.ReactNode | any;
+  /**
+   * Provide the content that will be shown in addition to the label
+   * (e.g. units, currency, etc.)
+   * This content will be placed after the label @design
+   */
+  additional?: React.ReactNode;
+
+  light?: boolean;
+  /**
+   * Specify the placeholder attribute for the input @design
+   */
+  placeholder?: string;
+  /**
+   * Provide a unique identifier for the control
+   */
+  id?: string;
+  /**
+   * Provide a name for the control
+   */
+  name?: string;
+  /**
+   * Specify if the control is required @design
+   * (sets aria-invalid as well)
+   */
+  required?: boolean;
+  /**
+   * Specify if the control is disabled @design
+   * (sets aria-disabled as well)
+   */
+  disabled?: boolean;
+  /**
+   * If the input is read-only, the user cannot change its value but focus
+   * and tabIndex are still applied @design
+   * (sets aria-readonly as well)
+   */
+  readOnly?: boolean;
+  /**
+   * Renders the input as inline element for horizontal forms
+   */
+  inline?: boolean;
+  /**
+   * Additional helper in front of the input, e.g. a currency symbol @design
+   * (sets aria-describedby as well)
+   */
+  addonBefore?: string | React.ReactNode;
+  /**
+   * Additional helper behind the input, e.g. a currency symbol @design
+   * (sets aria-describedby as well)
+   */
+  addonAfter?: string | React.ReactNode;
+  /**
+   * Supports replacement components
+   */
+  components?: {
+    AddonBefore?: ComponentType<InputPropsForReplacementComponents>;
+    AddonAfter?: ComponentType<InputPropsForReplacementComponents>;
+    Label?: ComponentType<InputPropsForReplacementComponents>;
+    HelperText?: ComponentType<InputPropsForReplacementComponents>;
+    InlineErrorMessage?: ComponentType<InputPropsForReplacementComponents>;
+  };
+}
+
+export interface InputPropsForReplacementComponents
+  extends InputProps,
+    React.ComponentPropsWithRef<"div"> {
+  /**
+   * The classes for the label
+   */
+  labelClasses?: string;
+  /**
+   * The the ID of the element, uses the `name` prop if no `id` is provided. Make sure it is unique on the page.
+   */
+  calculatedId?: string;
+  /**
+   * The classes for the helper element
+   */
+  helperTextClasses?: string;
+  /**
+   * The classes for the error element
+   */
+  errorClasses?: string;
+  /**
+   * The id of the error. calculatedId + '-error-msg'
+   */
+  errorId?: string;
+  /**
+   * An icon for the error element
+   */
+  errorIcon?: React.ReactNode;
+}
+
+export interface AddonBeforeProps {
+  addonBefore?: React.ReactNode;
+  prefix?: string;
+}
+
+export function AddonBefore({
+  addonBefore,
+  prefix,
+}: InputPropsForReplacementComponents) {
+  if (addonBefore) {
+    return <div className={`${prefix}--input-addon-before`}>{addonBefore}</div>;
+  }
+  return null;
+}
+
+export function AddonAfter({
+  addonAfter,
+  prefix,
+}: InputPropsForReplacementComponents) {
+  if (addonAfter) {
+    return <div className={`${prefix}--input-addon-after`}>{addonAfter}</div>;
+  }
+  return null;
+}
+
+/**
+ * Shows the error message underneath the element */
+export function InlineErrorMessage({
+  errorId,
+  errorClasses,
+  invalid,
+  invalidText,
+}: InputPropsForReplacementComponents) {
+  if (invalid) {
+    const errorIcon = <WarningSolid fill="#c5192d" />;
+    return (
+      <div className={errorClasses} id={errorId}>
+        {errorIcon}{" "}
+        <span>
+          {typeof invalid === "object" && invalid.message
+            ? invalid.message
+            : typeof invalid === "string"
+            ? invalid
+            : invalidText
+            ? invalidText
+            : "required"}
+        </span>
+      </div>
+    );
+  }
+  return null;
+}
+
+/**
+ * Shows a helper text under the label */
+export function Label({
+  labelClasses,
+  calculatedId,
+  labelText,
+  required,
+  hideLabel,
+}: InputPropsForReplacementComponents) {
+  if (hideLabel) return null;
+  return (
+    <label htmlFor={calculatedId} className={labelClasses}>
+      {labelText && labelText}
+      {required && "*"}
+    </label>
+  );
+}
+
+/**
+ * Shows a helper text under the label */
+export function Helper({
+  helperTextClasses,
+  helperText,
+}: InputPropsForReplacementComponents) {
+  if (helperText) return <div className={helperTextClasses}>{helperText}</div>;
+  return null;
+}
+
+interface InputPropsI extends InputProps, React.ComponentPropsWithRef<"div"> {
+  /**
+   * Provide a children to the input
+   */
+  children?: React.ReactNode;
+}
+
+/**
+ * Input is a wrapper for custom inputs providing the label, helperText and errors. */
+const Input: React.FC<PropsWithChildren<InputPropsI>> = ({
+  additional,
+  addonBefore,
+  addonAfter,
+  labelText,
+  children,
+  components: componentsOverride = {},
+  //className,
+  // iconDescription,
+  id,
+  className,
+  inputWrapperClassName,
+  //placeholder,
+  //type,
+  //onChange,
+  //onClick,
+  hideLabel,
+  name,
+  invalid,
+  invalidText,
+  helperText,
+  required,
+  ...other
+}) => {
+  const { prefix } = useSettings();
+
+  const calculatedId = id ? id : name;
+  /* const inputProps = {
+    id: calculatedId,
+    onChange: (evt) => {
+      if (!other.disabled && !other.readOnly) {
+        onChange && onChange(evt);
+      }
+    },
+    onClick: (evt) => {
+      if (!other.disabled && !other.readOnly) {
+        onClick && onClick(evt);
+      }
+    },
+    placeholder,
+    type,
+  };*/
+
+  const errorId = calculatedId + "-error-msg";
+
+  const labelClasses = classNames(`${prefix}--label`, {
+    // [`${prefix}--input--light`]: light,
+    [`${prefix}--visually-hidden`]: hideLabel || !labelText,
+    [`${prefix}--label--disabled`]: other.disabled,
+  });
+
+  const inputWrapperClasses = classNames(
+    `${prefix}--input-wrapper`,
+    { [`${prefix}--form-item--invalid`]: invalid },
+    inputWrapperClassName
+  );
+
+  const helperTextClasses = classNames(`${prefix}--form__helper-text`, {
+    [`${prefix}--form__helper-text--disabled`]: other.disabled,
+  });
+
+  const errorClasses = `${prefix}--form-requirement`;
+
+  const components = {
+    AddonAfter,
+    AddonBefore,
+    Label,
+    Helper,
+    InlineErrorMessage,
+    ...componentsOverride,
+  };
+  const AddonAfterComponent =
+    components.AddonAfter as React.FC<InputPropsForReplacementComponents>;
+  const AddonBeforeComponent =
+    components.AddonBefore as React.FC<InputPropsForReplacementComponents>;
+  const LabelComponent =
+    components.Label as React.FC<InputPropsForReplacementComponents>;
+  const HelperComponent =
+    components.Helper as React.FC<InputPropsForReplacementComponents>;
+  const InlineErrorMessageComponent =
+    components.InlineErrorMessage as React.FC<InputPropsForReplacementComponents>;
+
+  const componentProps = {
+    labelText,
+    labelClasses,
+    calculatedId,
+    required,
+    helperTextClasses,
+    helperText,
+    errorClasses,
+    errorId,
+    invalid,
+    invalidText,
+    addonAfter,
+    addonBefore,
+    hideLabel,
+    prefix,
+  };
+
+  return (
+    <FormItem className={className} inline={other.inline}>
+      <LabelComponent {...componentProps} />
+      <HelperComponent {...componentProps} />
+      {additional}
+      <div className={inputWrapperClasses}>
+        <AddonBeforeComponent {...componentProps} />
+        {children}
+        <AddonAfterComponent {...componentProps} />
+      </div>
+      <InlineErrorMessageComponent {...componentProps} />
+    </FormItem>
+  );
+};
+Input.displayName = "Input";
+
+export default Input;

package/src/components/Input/README.mdx

@@ -0,0 +1,46 @@
+## Usage
+
+**NumberInput** are used to let the user enter a number. They include built-in validation to reject non-numerical entries. They provide stepper arrows to let the user increase and decrease the value using their mouse or by simply tapping with a fingertip.
+
+- Inputs with custom input elements but standardized labelText and helperText
+
+```jsx
+<Input
+    formItemClassName={classes}
+    invalid={invalid}
+    invalidText={invalid && invalid.message}
+    labelText={labelText}
+    >
+    {() => (
+        <Select
+        className="wfp--react-select-container"
+        classNamePrefix="wfp--react-select"
+        />
+    )}
+</Input>
+);
+```
+
+#### When not to use
+
+- Do not replace existing components
+
+## Related
+
+[TextInput](?path=/docs/components-forms-textinput--regular)
+
+[TextArea](?path=/docs/components-forms-textarea--regular)
+
+[Checkbox](?path=/docs/components-forms-checkbox--regular)
+
+[RadioButton](?path=/docs/components-forms-radiobutton--regular)
+
+[Search](?path=/docs/components-forms-search--regular)
+
+[NumberInput](?path=/docs/components-forms-numberinput--regular)
+
+[InputGroup](?path=/docs/components-forms-inputgroup--regular)
+
+```
+
+```

package/src/components/Input/index.tsx

@@ -0,0 +1,13 @@
+export {
+  default,
+  AddonBefore,
+  AddonAfter,
+  Label,
+  Helper,
+  InlineErrorMessage,
+  // TODO: Check how to make the Types avaliable InputProps,
+} from "./Input";
+
+export type { InputProps } from "./Input";
+
+export { useInput } from "./useInput";