@progressiveui/react 1.22.0

package/src/components/Form/Form.stories.tsx

@@ -0,0 +1,485 @@
+import React from "react";
+import Checkbox from "../Checkbox";
+import Form from "./Form";
+import FormGroup from "../FormGroup";
+//import FileUploader from '../FileUploader';
+import Dropzone from "react-dropzone";
+import NumberInput from "../NumberInput";
+import RadioButton from "../RadioButton";
+import InputGroup from "../InputGroup";
+import Button from "../Button";
+import Search from "../Search";
+import Select from "../Select";
+import SelectItem from "../SelectItem";
+import TextArea from "../TextArea";
+import TextInput from "../TextInput";
+import Toggle from "../Toggle";
+
+import markdown from "./README.mdx";
+
+export default {
+  title: "Components/Forms/Form",
+  component: Form,
+  parameters: {
+    componentSubtitle: "Component",
+    status: "released",
+    mdx: markdown,
+  },
+};
+
+export const Default = (args) => {
+  return (
+    <Form {...args}>
+      <TextInput
+        id="testinput"
+        labelText="Text Input label"
+        placeholder="Placeholder text"
+      />
+      <br />
+
+      <TextArea
+        labelText="Text Area label"
+        placeholder="Placeholder text"
+        id="textarea5"
+        cols={50}
+        rows={3}
+      />
+
+      <Select id="select-12" defaultValue="placeholder-item">
+        <SelectItem
+          disabled
+          hidden
+          value="placeholder-item"
+          text="Choose an option"
+        />
+        <SelectItem value="option-1" text="Option 1" />
+        <SelectItem value="option-2" text="Option 2" />
+        <SelectItem value="option-3" text="Option 3" />
+      </Select>
+
+      <Button type="submit" className="some-class">
+        Submit
+      </Button>
+    </Form>
+  );
+};
+
+Default.args = {
+  children: "Form",
+  className: "some-class",
+  longForm: true,
+};
+
+const defaultformsourcecode = `
+import { Form, TextInput, TextArea, Select, SelectItem, Button } from "@progressiveui/react";
+
+<Form>
+  <TextInput
+    id="testinput"
+    labelText="Text Input label"
+    placeholder="Placeholder text"
+  />
+  <br />
+
+  <TextArea
+    labelText="Text Area label"
+    placeholder="Placeholder text"
+    id="textarea5"
+    cols={50}
+    rows={3}
+  />
+
+  <Select id="select-12" defaultValue="placeholder-item">
+    <SelectItem
+      disabled
+      hidden
+      value="placeholder-item"
+      text="Choose an option"
+    />
+    <SelectItem value="option-1" text="Option 1" />
+    <SelectItem value="option-2" text="Option 2" />
+    <SelectItem value="option-3" text="Option 3" />
+  </Select>
+
+  <Button type="submit" className="some-class">
+    Submit
+  </Button>
+</Form>
+`;
+
+Default.story = {
+  parameters: {
+    docs: {
+      source: {
+        code: defaultformsourcecode,
+      },
+    },
+  },
+};
+
+export const DetailedForm = (args) => {
+  return (
+    <Form {...args}>
+      <FormGroup legendText="Checkbox heading">
+        <Checkbox defaultChecked labelText="Checkbox label" id="checkbox-0" />
+        <Checkbox labelText="Checkbox label2" id="checkbox-1" />
+        <Checkbox disabled labelText="Checkbox label3" id="checkbox-2" />
+      </FormGroup>
+
+      <NumberInput
+        id="number-input-1"
+        labelText="Text Input label"
+        min={0}
+        max={100}
+        value={50}
+        step={10}
+      />
+
+      <FormGroup>
+        <Toggle id="toggle-1" />
+        <Toggle disabled id="toggle-2" />
+      </FormGroup>
+
+      <FormGroup legendText="File Upload Types">
+        <p>Legacy FileUploader</p>
+        {/* TODO: <FileUploader
+          id="file-1"
+          labelDescription="Choose Files..."
+          buttonLabel="Add files"
+          labelText="Legacy"
+  />*/}
+
+        <p>Drag and Drop File Uploader</p>
+
+        <Dropzone onDrop={(acceptedFiles) => acceptedFiles}>
+          {({ getRootProps, getInputProps }) => (
+            <section className="wfp--dropzone">
+              <div {...getRootProps({ className: "wfp--dropzone__input" })}>
+                <input {...getInputProps()} />
+                <div>
+                  Drag 'n' drop some files here, or click to select files
+                </div>
+              </div>
+            </section>
+          )}
+        </Dropzone>
+      </FormGroup>
+
+      <FormGroup legendText="Radio Button heading">
+        <InputGroup name="input-group" defaultSelected="default-selected">
+          <RadioButton
+            value="standard"
+            id="radio-1"
+            labelText="Standard Radio Button"
+          />
+          <RadioButton
+            value="default-selected"
+            labelText="Default Selected Radio Button"
+            id="radio-2"
+          />
+          <RadioButton
+            value="blue"
+            labelText="Standard Radio Button"
+            id="radio-3"
+          />
+          <RadioButton
+            value="disabled"
+            labelText="Disabled Radio Button"
+            id="radio-4"
+            disabled
+          />
+        </InputGroup>
+      </FormGroup>
+
+      <FormGroup legendText="Radio Button heading">
+        <Search id="search-1" labelText="Search" placeholder="Search" />
+      </FormGroup>
+
+      <Select id="select-1" defaultValue="placeholder-item">
+        <SelectItem
+          disabled
+          hidden
+          value="placeholder-item"
+          text="Choose an option"
+        />
+        <SelectItem value="option-1" text="Option 1" />
+        <SelectItem value="option-2" text="Option 2" />
+        <SelectItem value="option-3" text="Option 3" />
+      </Select>
+
+      <TextInput
+        id="test2"
+        labelText="Text Input label"
+        placeholder="Placeholder text"
+      />
+
+      <TextInput
+        type="password"
+        required
+        pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}"
+        id="test3"
+        labelText="Password"
+      />
+
+      <TextInput
+        type="password"
+        required
+        pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}"
+        id="test4"
+        labelText="Password"
+        invalid={true}
+        invalidText="Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number."
+      />
+
+      <br />
+      <br />
+
+      <TextArea
+        labelText="Text Area label"
+        placeholder="Placeholder text"
+        id="test5"
+        cols={50}
+        rows={4}
+      />
+
+      <Button type="submit" className="some-class">
+        Submit
+      </Button>
+    </Form>
+  );
+};
+
+DetailedForm.args = {
+  children: "Form",
+  className: "some-class",
+  longForm: true,
+};
+
+const detailedformsourcecode = `
+import { Form, FormGroup, Checkbox, NumberInput, Toggle, FileUploader, InputGroup, RadioButton, Search, TextInput, Button } from '@progressiveui/react';
+import Dropzone from 'react-dropzone';
+
+<Form>
+  <FormGroup legendText="Checkbox heading">
+    <Checkbox defaultChecked labelText="Checkbox label" id="checkbox-0" />
+  </FormGroup>
+
+  <NumberInput
+    id="number-input-1"
+    label="Number Input"
+    labelText="Text Input label"
+    min={0}
+    max={100}
+    value={50}
+    step={10}
+  />
+
+  <FormGroup>
+    <Toggle id="toggle-1" />
+  </FormGroup>
+
+  <FormGroup legendText="File Upload Types">
+    <p>Legacy FileUploader</p>
+    <FileUploader
+      id="file-1"
+      labelDescription="Choose Files..."
+      buttonLabel="Add files"
+      labelText="Legacy"
+    />
+
+    <p>Drag and Drop File Uploader</p>
+
+    <Dropzone onDrop={(acceptedFiles) => acceptedFiles}>
+      {({ getRootProps, getInputProps }) => (
+        <section className="wfp--dropzone">
+          <div {...getRootProps({ className: "wfp--dropzone__input" })}>
+            <input {...getInputProps()} />
+            <div>
+              Drag 'n' drop some files here, or click to select files
+            </div>
+          </div>
+        </section>
+      )}
+    </Dropzone>
+  </FormGroup>
+
+  <FormGroup legendText="Radio Button heading">
+    <InputGroup name="input-group" defaultSelected="default-selected">
+      <RadioButton
+        value="standard"
+        id="radio-1"
+        labelText="Standard Radio Button"
+      />
+      <RadioButton
+        value="default-selected"
+        labelText="Default Selected Radio Button"
+        id="radio-2"
+      />
+    </InputGroup>
+  </FormGroup>
+
+  <Search id="search-1" placeHolder="Search" />
+
+  <TextInput
+    type="password"
+    required
+    pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}"
+    id="test3"
+    labelText="Password"
+  />
+  <Button type="submit" className="some-class">
+    Submit
+  </Button>
+</Form>
+`;
+
+DetailedForm.story = {
+  parameters: {
+    docs: {
+      source: {
+        code: detailedformsourcecode,
+      },
+    },
+  },
+};
+
+export const Login = (args) => {
+  return (
+    <Form {...args}>
+      <FormGroup legendText="Login Form Example">
+        <TextInput
+          type="email"
+          id="email1"
+          labelText="Email"
+          placeholder="c*****@progressiveui.org"
+        />
+        <br />
+        <TextInput
+          type="password"
+          required
+          pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}"
+          id="password2"
+          labelText="Password"
+        />
+        <br />
+        <Button type="submit" className="some-class">
+          Submit
+        </Button>
+      </FormGroup>
+    </Form>
+  );
+};
+
+Login.args = {
+  longForm: false,
+};
+
+export const Contact = (args) => {
+  return (
+    <Form {...args}>
+      <FormGroup align="horizontal" legendText="Contact Form Example: name">
+        <TextInput
+          type="text"
+          id="firstname"
+          labelText="Firstname"
+          placeholder="Noami"
+        />
+        <TextInput
+          type="text"
+          id="lastname"
+          labelText="lastname"
+          placeholder="ADAMS"
+        />
+      </FormGroup>
+      <TextInput
+        type="email"
+        id="email4"
+        labelText="Email"
+        placeholder="c******@progressiveui.org"
+      />
+
+      <FormGroup legendText="Additional details">
+        <TextArea
+          labelText="Message"
+          placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum."
+          id="test5"
+          cols={50}
+          rows={5}
+        />
+      </FormGroup>
+      <>
+        <Button type="button" kind="secondary">
+          cancel
+        </Button>
+        <Button type="submit" className="some-class">
+          Send
+        </Button>
+      </>
+    </Form>
+  );
+};
+
+const contactsourcecode = `
+import { Form, FormGroup, TextInput, Button  } from "@progressiveui/react";
+
+
+<Form>
+  <FormGroup align="horizontal" legendText="Contact Form Example: name">
+    <TextInput
+      type="text"
+      id="firstname"
+      labelText="Firstname"
+      placeholder="Noami"
+    />
+    <TextInput
+      type="text"
+      id="lastname"
+      labelText="lastname"
+      placeholder="ADAMS"
+    />
+  </FormGroup>
+  <TextInput
+    type="email"
+    id="email4"
+    labelText="Email"
+    placeholder="c******@progressiveui.org"
+  />
+
+  <FormGroup legendText="Additional details">
+    <TextArea
+      labelText="Message"
+      placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+      eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+      minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+      aliquip ex ea commodo consequat..."
+      id="test5"
+      cols={50}
+      rows={5}
+    />
+  </FormGroup>
+  <>
+    <Button type="button" kind="secondary">
+      cancel
+    </Button>
+    <Button type="submit" className="some-class">
+      Send
+    </Button>
+  </>
+</Form>
+`;
+
+Contact.story = {
+  parameters: {
+    docs: {
+      source: {
+        code: contactsourcecode,
+      },
+    },
+  },
+};

package/src/components/Form/Form.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import type { PropsWithChildren } from 'react';
+import classNames from 'classnames';
+import useSettings from '../../hooks/useSettings';
+
+type FormProps = PropsWithChildren<{
+  /**
+   * Default margin is added to each form input
+   */
+  longForm?: boolean;
+  /**
+   * Provide a custom className to be applied on the containing <form> node
+   */
+  className?: string;
+}>;
+/** A form is a group of related input controls that allows users to provide data or configure options. */
+const Form: React.FC<FormProps> = ({
+  className,
+  children,
+  longForm = true,
+  ...other
+}) => {
+  const { prefix } = useSettings();
+
+  const classes = classNames(
+    `${prefix}--form`,
+    { [`${prefix}--form-long`]: longForm === true },
+    className
+  );
+
+  return (
+    <form className={classes} {...other}>
+      {children}
+    </form>
+  );
+};
+
+Form.displayName = 'Form';
+
+export default Form;

package/src/components/Form/README.mdx

@@ -0,0 +1,46 @@
+## Usage
+
+Forms are widely used to collect user input.
+
+Form can have any number of react components enclosed within FormGroup component. FormGroup component
+is a wrapper for legend and fieldset component.
+
+## Content
+
+#### Labels
+
+Effective form labeling helps users understand what information to enter into a Text Input. Using a placeholder text as a label is often applied as a space-saving method. However, this is not recommended because it hides context and presents accessibility issues.
+
+#### Accessibility best practices for labels:
+
+- Labels must be visible when an input gets focus.
+
+- Labels must be announced to the screen reader on focus.
+- Ensure the helper text that appears under an input is read when an assistive technology user stops at an input using ARIA.
+- Use sentence-style capitalization (only the first word in a phrase and any proper nouns capitalized).
+  Default values
+- Where possible, add programmatic assistance. Detect and pre-fill inputs to reduce errors and save time. When the software can’t determine the value that belongs in an input, use type-ahead to make suggestions. Use sentence-case for default values, detected values, and auto-completion text.
+
+#### Helper text
+
+Helper text is pertinent information that assists the user in completing a field. Helper text is always available when the input is focused and appears underneath the label. Use sentence-style capitalization, and in most cases, write the text as full sentences with punctuation.
+
+#### Placeholder text
+
+Placeholder text provides hints or examples of what to enter. Placeholder text disappears after the user begins entering data into the Input and should not contain crucial information. Use sentence-style capitalization, and in most cases, write the text as a direct statement without punctuation.
+
+## 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/Form/index.ts

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

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

@@ -0,0 +1,100 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import useSettings from '../../hooks/useSettings';
+
+/** A FormGroup element is used to group several controls as well as labels  within a web form. It uses  `<fieldset>` */
+const FormGroup = ({
+  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>
+  );
+};
+
+FormGroup.propTypes = {
+  /**
+   * Specify the contained form elements
+   */
+  children: PropTypes.node,
+  /**
+   * Specify a breakpoint to show containing inputs vertically on mobile devices
+   */
+  breakpoint: PropTypes.oneOf(['none', 'sm', 'md', 'lg']),
+  /**
+   * Specify a title for the `FormGroup`
+   */
+  legendText: PropTypes.string,
+  /**
+   * Specify an optional className to be applied to the wrapper node
+   */
+  className: PropTypes.string,
+  /**
+   * 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.object, PropTypes.bool]),
+  /**
+   * Specify if a message is shown for the `fieldset`
+   */
+  message: PropTypes.bool,
+  /**
+   * Specify a message for the `fieldset`
+   */
+  messageText: PropTypes.string,
+  /**
+   * Specify a message for the `fieldset`
+   */
+  align: PropTypes.oneOf(['vertical', 'horizontal']),
+  /**
+   * Specify the spacing between horizontaly aligned inputs
+   */
+  inputSpacing: PropTypes.oneOf(['none', 'md', 'lg']),
+};
+
+FormGroup.defaultProps = {
+  align: 'vertical',
+  invalid: false,
+  inputSpacing: 'lg',
+  breakpoint: 'md',
+  message: false,
+  messageText: '',
+};
+
+export default FormGroup;