@progressiveui/react 1.22.0

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import FormGroup from '../FormGroup';
+import { shallow } from 'enzyme';
+
+describe('FormGroup', () => {
+  describe('Renders as expected', () => {
+    const wrapper = shallow(
+      <FormGroup className="extra-class" legendText="legendtest" />
+    );
+
+    it('renders children as expected', () => {
+      expect(wrapper.find('.child').length).toBe(0);
+    });
+    it('renders wrapper as expected', () => {
+      expect(wrapper.length).toBe(1);
+    });
+    it('has the expected classes', () => {
+      expect(wrapper.hasClass('wfp--fieldset')).toEqual(true);
+    });
+    it('renders extra classes passed in via className', () => {
+      expect(wrapper.hasClass('extra-class')).toEqual(true);
+    });
+    it('should not render the data-invalid property by default', () => {
+      expect(wrapper.props()['data-invalid']).toBe(undefined);
+    });
+    it('should render the data-invalid attribute when invalid is set', () => {
+      const formgroup = shallow(<FormGroup legendText="legendtest" invalid />);
+      expect(formgroup.props()['data-invalid']).toBe('');
+    });
+    it('should render wrapper as expected', () => {
+      const formGroup = shallow(
+        <FormGroup legendText="legendtest">
+          <div className="test-child1" />
+          <div className="test-child2" />
+        </FormGroup>
+      );
+      expect(formGroup.length).toEqual(1);
+    });
+    it('should render children as expected', () => {
+      const formGroup1 = shallow(
+        <FormGroup legendText="legendtest">
+          <div className="test-child" />
+          <div className="test-child" />
+        </FormGroup>
+      );
+      expect(formGroup1.find('.test-child').length).toBe(2);
+    });
+  });
+});

package/src/components/FormGroup/FormGroup.stories.tsx.new

@@ -0,0 +1,306 @@
+import React, { useState } from 'react';
+import FormGroup from './FormGroup';
+import TextInput from '../TextInput';
+import NumberInput from '../NumberInput';
+import CreatableSelect from 'react-select/creatable';
+import markdown from './README.mdx';
+
+export default {
+  title: 'Components/Forms/FormGroup',
+  component: FormGroup,
+  parameters: {
+    componentSubtitle: 'Component',
+    status: 'released',
+    mdx: markdown,
+    showFeedback: true,
+  },
+};
+
+export const Default = (args) => (
+  <FormGroup {...args} className="wfp--form-long">
+    <TextInput
+      id="test11"
+      labelText="Text Input label"
+      placeholder="Placeholder text"
+    />
+    <TextInput
+      id="test21"
+      labelText="Text Input label"
+      placeholder="Placeholder text"
+    />
+    <TextInput
+      id="test31"
+      labelText="Text Input label"
+      placeholder="Placeholder text"
+    />
+  </FormGroup>
+);
+Default.args = {
+  legendText: 'FormGroup heading',
+};
+
+const defaultsourcecode = `
+import { FormGroup, TextInput } from "@progressiveui/react";
+
+<FormGroup
+  className="wfp--form-long"
+  legendText="FormGroup heading"
+>
+  <TextInput
+    id="test11"
+    labelText="Text Input label"
+    placeholder="Placeholder text"
+  />
+  <TextInput
+    id="test21"
+    labelText="Text Input label"
+    placeholder="Placeholder text"
+  />
+  <TextInput
+    id="test31"
+    labelText="Text Input label"
+    placeholder="Placeholder text"
+  />
+</FormGroup>
+`;
+
+Default.story = {
+  parameters: {
+    docs: {
+      source: {
+        code: defaultsourcecode,
+      },
+    },
+  },
+};
+
+const options = [
+  {
+    value: 'afghanistan',
+    label: 'Afghanistan (AF)',
+  },
+  {
+    value: 'albania',
+    label: 'Albania',
+  },
+  {
+    value: 'algeria',
+    label: 'Algeria',
+  },
+];
+
+const cities = [
+  {
+    country: 'afghanistan',
+    cityoptions: [
+      { value: 'kabul', label: 'Kabul' },
+      { value: 'kandahar', label: 'Kandahar' },
+      { value: 'kerat', label: 'Herat' },
+    ],
+  },
+  {
+    country: 'albania',
+    cityoptions: [
+      { value: 'ballsh', label: 'ballsh' },
+      { value: 'Fier', label: 'Fier' },
+      { value: 'Labinot-Mal', label: 'Labinot-Mal' },
+    ],
+  },
+  {
+    country: 'algeria',
+    cityoptions: [
+      { value: 'algiers', label: 'Algiers' },
+      { value: 'oran', label: 'Oran' },
+      { value: 'constantine', label: 'Constantine' },
+    ],
+  },
+];
+
+export const AddressDetails = (args) => {
+  const [cityoption, setcityoption] = useState(null);
+
+  const handleChange = (newValue) => {
+    const selectedCountry = cities.find(
+      (city) => city.country === newValue.value
+    );
+    if (selectedCountry?.cityoptions)
+      setcityoption(selectedCountry.cityoptions);
+  };
+
+  const handleCityChange = (newValue) => {
+    console.log(newValue);
+  };
+
+  return (
+    <>
+      <FormGroup
+        {...args}
+        className="wfp--form-long"
+        align="horizontal"
+        legendText="Address Info"
+        style={{ marginTop: '1rem' }}>
+        <div className="wfp--form-item" style={{ minWidth: '100px' }}>
+          <label htmlFor="country" className="wfp--label">
+            Country*
+          </label>
+          <CreatableSelect
+            className="wfp--react-select-container"
+            classNamePrefix="wfp--react-select"
+            onChange={handleChange}
+            options={options}
+          />
+        </div>
+        <div className="wfp--form-item" style={{ minWidth: '100px' }}>
+          <label htmlFor="city" className="wfp--label">
+            City*
+          </label>
+          <CreatableSelect
+            className="wfp--react-select-container"
+            classNamePrefix="wfp--react-select"
+            isClearable
+            onChange={handleCityChange}
+            options={cityoption}
+          />
+        </div>
+        <TextInput
+          id="zipcode"
+          labelText="Postal code/ZIP code"
+          placeholder="eg: 13-3456"
+        />
+      </FormGroup>
+      <FormGroup {...args} className="wfp--form-long" align="horizontal">
+        <TextInput
+          id="street"
+          labelText="Street"
+          placeholder="eg: Chemin Aime Steinlein"
+        />
+        <NumberInput id="hno" labelText="House number" placeholder="5" />
+      </FormGroup>
+    </>
+  );
+};
+
+AddressDetails.story = {
+  name: 'Residence Address',
+};
+
+const addressdetailsourcecode = `
+import {FormGroup, NumberInput, TextInput } from '@progressiveui/react';
+import CreatableSelect from 'react-select/creatable';
+
+const options = [
+    {
+      value: 'afghanistan',
+      label: 'Afghanistan (AF)',
+    },
+    {
+      value: 'albania',
+      label: 'Albania',
+    },
+    {
+      value: 'algeria',
+      label: 'Algeria',
+    },
+  ];
+  
+  const cities = [
+    {
+      country: 'afghanistan',
+      cityoptions: [
+        { value: 'kabul', label: 'Kabul' },
+        { value: 'kandahar', label: 'Kandahar' },
+        { value: 'kerat', label: 'Herat' },
+      ],
+    },
+    {
+      country: 'albania',
+      cityoptions: [
+        { value: 'ballsh', label: 'ballsh' },
+        { value: 'Fier', label: 'Fier' },
+        { value: 'Labinot-Mal', label: 'Labinot-Mal' },
+      ],
+    },
+    {
+      country: 'algeria',
+      cityoptions: [
+        { value: 'algiers', label: 'Algiers' },
+        { value: 'oran', label: 'Oran' },
+        { value: 'constantine', label: 'Constantine' },
+      ],
+    },
+  ];
+
+const AddressDetails = () => {
+    const [cityoption, setcityoption] = useState(null);
+
+  const handleChange = (newValue) => {
+    const selectedCountry = cities.find(
+      (city) => city.country === newValue.value
+    );
+    setcityoption(selectedCountry.cityoptions);
+  };
+
+  const handleCityChange = (newValue) => {
+  };
+return(
+    <>
+        <FormGroup
+        className="wfp--form-long"
+        align="horizontal"
+        legendText="Address Info"
+        style={{ marginTop: '1rem' }}>
+        <div className="wfp--form-item" style={{ minWidth: '100px' }}>
+          <label htmlFor="country" className="wfp--label">
+            Country*
+          </label>
+          <CreatableSelect
+            className="wfp--react-select-container"
+            classNamePrefix="wfp--react-select"
+            onChange={handleChange}
+            options={options}
+          />
+        </div>
+        <div className="wfp--form-item" style={{ minWidth: '100px' }}>
+          <label htmlFor="city" className="wfp--label">
+            City*
+          </label>
+          <CreatableSelect
+            className="wfp--react-select-container"
+            classNamePrefix="wfp--react-select"
+            isClearable
+            onChange={handleCityChange}
+            options={cityoption}
+          />
+        </div>
+        <TextInput
+          id="zipcode"
+          labelText="Postal code/ZIP code"
+          placeholder="eg: 13-3456"
+        />
+      </FormGroup>
+      <FormGroup className="wfp--form-long" align="horizontal">
+        <TextInput
+          id="street"
+          labelText="Street"
+          placeholder="eg: Chemin Aime Steinlein"
+        />
+        <NumberInput id="hno" labelText="House number" placeholder="5" />
+      </FormGroup>
+      </>
+)
+
+}
+
+export default AddressDetails;
+`;
+
+AddressDetails.story = {
+  name: 'Residence Address',
+  parameters: {
+    docs: {
+      source: {
+        code: addressdetailsourcecode,
+      },
+    },
+  },
+};

package/src/components/FormGroup/FormGroup.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import useSettings from '../../hooks/useSettings';
+//import * as HookForm from 'react-hook-form';
+
+interface FormGroupProps extends React.ComponentPropsWithRef<'a'> {
+  legendText?: string;
+  breakpoint?: 'none' | 'sm' | 'md' | 'lg';
+  // invalid?: boolean | HookForm.FieldError;
+  message?: boolean;
+  messageText?: string;
+  align?: 'vertical' | 'horizontal';
+  inputSpacing?: 'none' | 'md' | 'lg';
+  className?: string;
+  inline?: boolean;
+}
+/** A FormGroup element is used to group several controls as well as labels  within a web form. It uses  `<fieldset>` */
+const FormGroup: React.FC<FormGroupProps> = ({
+  align,
+  breakpoint,
+  legendText,
+  inline,
+  // invalid,
+  children,
+  className,
+  inputSpacing,
+  message,
+  messageText,
+  // ...other
+}) => {
+  const { prefix } = useSettings();
+
+  const classNamesLegend = classNames(
+    `${prefix}--form-group__title`,
+    className
+  );
+  const classNamesFieldset = classNames(
+    `${prefix}--fieldset`,
+    {
+      [`${prefix}--fieldset__inline`]: inline,
+      [`${prefix}--fieldset__align-${align}`]: align,
+      [`${prefix}--fieldset__breakpoint-${breakpoint}`]: breakpoint,
+      [`${prefix}--fieldset__input-spacing-${inputSpacing}`]: inputSpacing,
+    },
+    className
+  );
+
+  return (
+    <div
+      //{...(invalid && { 'data-invalid': '' })}
+      className={classNamesFieldset}
+      //{...other}
+    >
+      <legend className={classNamesLegend}>{legendText}</legend>
+      <div className={`${prefix}--fieldset__content`}>{children}</div>
+      {message ? (
+        <div className={`${prefix}--form__requirements`}>{messageText}</div>
+      ) : null}
+    </div>
+  );
+};
+
+export default FormGroup;

package/src/components/FormGroup/README.mdx

@@ -0,0 +1,7 @@
+.
+
+### Usage with react
+
+```js
+import { FormGroup } from "@progressiveui/react";
+```

package/src/components/FormGroup/index.ts

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

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

@@ -0,0 +1,44 @@
+import PropTypes from "prop-types";
+import React from "react";
+import { InfoSolid } from "@progressiveui/icons-react";
+import classNames from "classnames";
+import useSettings from "../../hooks/useSettings";
+import Tooltip from "../Tooltip/Tooltip";
+
+/** FormHint allows you to add a longer explanation to an input element. */
+
+const FormHint = ({ className, children, description, icon, ...other }) => {
+  const { prefix } = useSettings();
+
+  const formHintClasses = classNames(`${prefix}--form-hint`, className);
+  return (
+    <Tooltip content={children}>
+      <div className={formHintClasses}>
+        <InfoSolid width="15" height="15" description={children} />
+      </div>
+    </Tooltip>
+  );
+};
+
+FormHint.propTypes = {
+  /**
+   * Specify an optional className to be applied to the wrapper node
+   */
+  className: PropTypes.string,
+
+  /**
+   * The tooltips content can be a string or an component
+   */
+
+  children: PropTypes.node,
+  /**
+   * Specify a custom icon for the hint
+   */
+  icon: PropTypes.object,
+};
+
+// FormHint.defaultProps = {
+//   icon: InfoSolid16,
+// };
+
+export default FormHint;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import FormHint from '../FormHint';
+import { shallow, mount } from 'enzyme';
+
+describe('FormHint', () => {
+    describe('Renders as expected', () => {
+        const wrapper = shallow(<FormHint>formhint</FormHint>);
+
+        it('renders <Tooltip> as the main wrapper', () => {
+            expect(wrapper.exists('.wfp--form-hint')).toBe(true);
+        })
+    });
+});

package/src/components/FormHint/FormHint.stories.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import markdown from "./README.mdx";
+import FormHint from ".";
+import TextInput from "../TextInput";
+
+export default {
+  title: "Components/Forms/FormHint",
+  component: FormHint,
+  parameters: {
+    componentSubtitle: "Component",
+    status: "released",
+    mdx: markdown,
+  },
+};
+
+export const Regular = (args) => (
+  <label className="wfp--label" htmlFor="input">
+    The Label <FormHint {...args} />
+  </label>
+);
+
+Regular.args = {
+  children: "The hint text",
+};
+
+export const Input = (args) => (
+  <TextInput
+    labelText={
+      <>
+        The label
+        <FormHint>
+          A longer description. Lorem ipsum dolor sit amet, consetetur
+          sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+          dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
+          et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
+          takimata sanctus est{" "}
+        </FormHint>
+      </>
+    }
+    helperText="The helper text provides additional information"
+  />
+);
+
+const formhintsourcecode = `
+import { FormHint, TextInput  } from "@progressiveui/react";
+
+<TextInput
+  labelText={
+    <>
+      The label
+      <FormHint>
+        A longer description. Lorem ipsum dolor sit amet, consetetur
+        sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
+        et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
+        takimata sanctus est{' '}
+      </FormHint>
+    </>
+  }
+  helperText="The helper text provides additional information"
+/>
+`;
+
+Input.story = {
+  parameters: {
+    docs: {
+      source: {
+        code: formhintsourcecode,
+      },
+    },
+  },
+};

package/src/components/FormHint/FormHint.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { InfoSolid } from "@progressiveui/icons-react";
+import type { PropsWithChildren } from "react";
+import classNames from "classnames";
+import useSettings from "../../hooks/useSettings";
+import Tooltip from "../Tooltip/Tooltip";
+
+/** FormHint allows you to add a longer explanation to an input element. */
+type FormHintProps = PropsWithChildren<{
+  /**
+   * The additional className which will be added
+   */
+  className?: string;
+  /**
+   * The description of the icon
+   */
+  description?: string;
+}>;
+
+const FormHint: React.FC<FormHintProps> = ({
+  className,
+  children,
+  description,
+}) => {
+  const { prefix } = useSettings();
+
+  const formHintClasses = classNames(`${prefix}--form-hint`, className);
+  return (
+    <Tooltip content={children}>
+      <div className={formHintClasses}>
+        <InfoSolid width="15" height="15" description={description} />
+      </div>
+    </Tooltip>
+  );
+};
+
+export default FormHint;

package/src/components/FormHint/README.mdx

@@ -0,0 +1,13 @@
+### Usage
+
+The `FormHint` component can provide additional information on how to use an input element. It is placed inside the `labelText`.
+Use the `helperText` prop instead if the information is very important for filling out the input.
+
+### Related
+
+[Input](?path=/docs/components-input--input-regular)
+[FormLabel](?path=/docs/forms-formlabel--regular)
+
+### Reference
+
+[Carbon Design System Usage for Buttons](https://next.carbondesignsystem.com/components/button)

package/src/components/FormHint/index.ts

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import FormItem from '../FormItem';
+
+describe('FormItem', () => {
+  it('should render', () => {
+    const wrapper = shallow(<FormItem />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

package/src/components/FormItem/FormItem.tsx

@@ -0,0 +1,45 @@
+import React, { PropsWithChildren } from "react";
+import classNames from "classnames";
+import useSettings from "../../hooks/useSettings";
+
+export interface FormItemProps extends React.AllHTMLAttributes<HTMLDivElement> {
+  /**
+   * Specify whether the FormItem should be rendered as invalid
+   */
+  invalid?: boolean;
+  /**
+   * Specify whether the FormItem should be rendered as inline
+   */
+  inline?: boolean;
+  /**
+   * Provide the contents of your FormItem
+   */
+  children?: React.ReactNode;
+}
+
+const FormItem: React.FC<PropsWithChildren<FormItemProps>> = ({
+  className,
+  children,
+  invalid,
+  inline,
+  ...other
+}) => {
+  const { prefix } = useSettings();
+
+  const classes = classNames(
+    `${prefix}--form-item`,
+    {
+      [`${prefix}--form-item--inline`]: inline,
+      [`${prefix}--form-item--invalid`]: invalid,
+    },
+    className
+  );
+
+  return (
+    <div className={classes} {...other}>
+      {children}
+    </div>
+  );
+};
+
+export default FormItem;