@ilo-org/react 0.7.7 → 0.8.0

package/src/components/Dropdown/Dropdown.args.ts

@@ -1,214 +1,64 @@
-import { DropdownProps } from "./Dropdown.props";
+import { LabelledDropdownProps } from "./Dropdown.props";
 
-const basic: DropdownProps = {
+export const options = [
+  { label: "Switzerland", value: "CH" },
+  { label: "Côte d'Ivoire ", value: "CI" },
+  { label: "Thailand", value: "TH" },
+  { label: "United States", value: "US" },
+  { label: "Zimbabwe", value: "ZW" },
+  { label: "Afghanistan", value: "AF" },
+  { label: "Åland Islands", value: "AX" },
+  { label: "Albania", value: "AL" },
+  { label: "Algeria", value: "DZ" },
+  { label: "American Samoa", value: "AS" },
+  { label: "AndorrA", value: "AD" },
+  { label: "Angola", value: "AO" },
+  { label: "Anguilla", value: "AI" },
+  { label: "Antarctica", value: "AQ" },
+  { label: "Antigua and Barbuda", value: "AG" },
+  { label: "Argentina", value: "AR" },
+  { label: "Armenia", value: "AM" },
+  { label: "Aruba", value: "AW" },
+  { label: "Australia", value: "AU" },
+  { label: "Austria", value: "AT" },
+  { label: "Azerbaijan", value: "AZ" },
+];
+
+const basic: LabelledDropdownProps = {
+  label: "Select a country",
+  errorMessage: "Please select a country",
   autocomplete: "false",
-  callback: () => {},
   className: "storybook",
   disabled: false,
   error: false,
-  helper: false,
   id: "dropdown",
-  label: "Dropdown Label",
   name: "dropdown",
-  options: [
-    {
-      disabled: false,
-      label: "Option One",
-      value: "option one",
-    },
-    {
-      disabled: false,
-      label: "Option Two",
-      value: "option two",
-    },
-    {
-      disabled: false,
-      label: "Option Three",
-      value: "option three",
-    },
-    {
-      disabled: false,
-      label: "Option Four",
-      value: "four",
-    },
-    {
-      disabled: false,
-      label: "Option Five",
-      value: "the fifth",
-    },
-  ],
+  options,
   required: false,
   value: "option one",
+  style: { width: "100%" },
 };
 
-const haserror: DropdownProps = {
-  autocomplete: "false",
-  callback: () => {},
-  className: "storybook",
-  disabled: false,
-  error: "This is an error message",
-  helper: "Example Helper Text",
-  id: "dropdown",
-  label: "Dropdown Label",
-  name: "dropdown",
-  options: [
-    {
-      disabled: false,
-      label: "Option One",
-      value: "option one",
-    },
-    {
-      disabled: false,
-      label: "Option Two",
-      value: "option two",
-    },
-    {
-      disabled: false,
-      label: "Option Three",
-      value: "option three",
-    },
-    {
-      disabled: false,
-      label: "Option Four",
-      value: "four",
-    },
-    {
-      disabled: false,
-      label: "Option Five",
-      value: "the fifth",
-    },
-  ],
-  required: false,
-  value: "option one",
+const haserror: LabelledDropdownProps = {
+  ...basic,
+  error: true,
 };
 
-const hashelper: DropdownProps = {
-  autocomplete: "false",
-  callback: () => {},
-  className: "storybook",
-  disabled: false,
-  error: false,
-  helper: "Example Helper Text",
-  id: "dropdown",
-  label: "Dropdown Label",
-  name: "dropdown",
-  options: [
-    {
-      disabled: false,
-      label: "Option One",
-      value: "option one",
-    },
-    {
-      disabled: false,
-      label: "Option Two",
-      value: "option two",
-    },
-    {
-      disabled: false,
-      label: "Option Three",
-      value: "option three",
-    },
-    {
-      disabled: false,
-      label: "Option Four",
-      value: "four",
-    },
-    {
-      disabled: false,
-      label: "Option Five",
-      value: "the fifth",
-    },
-  ],
-  required: false,
-  value: "option one",
+const hashelper: LabelledDropdownProps = {
+  ...basic,
+  helper: "Please select a country",
 };
 
-const hastooltip: DropdownProps = {
-  autocomplete: "false",
-  callback: () => {},
-  className: "storybook",
-  disabled: false,
-  error: false,
-  helper: false,
-  id: "dropdown",
-  label: "Dropdown Label",
-  name: "dropdown",
-  options: [
-    {
-      disabled: false,
-      label: "Option One",
-      value: "option one",
-    },
-    {
-      disabled: false,
-      label: "Option Two",
-      value: "option two",
-    },
-    {
-      disabled: false,
-      label: "Option Three",
-      value: "option three",
-    },
-    {
-      disabled: false,
-      label: "Option Four",
-      value: "four",
-    },
-    {
-      disabled: false,
-      label: "Option Five",
-      value: "the fifth",
-    },
-  ],
-  required: false,
-  tooltip: "This is my tooltip text.",
-  value: "option one",
+const hastooltip: LabelledDropdownProps = {
+  ...basic,
+  tooltip: "Please select a country",
 };
 
-const isdisabled: DropdownProps = {
-  autocomplete: "false",
-  callback: () => {},
-  className: "storybook",
-  disabled: false,
-  error: false,
-  helper: false,
-  id: "dropdown",
-  label: "Dropdown Label",
-  name: "dropdown",
-  options: [
-    {
-      disabled: false,
-      label: "Option One",
-      value: "option one",
-    },
-    {
-      disabled: false,
-      label: "Option Two",
-      value: "option two",
-    },
-    {
-      disabled: false,
-      label: "Option Three",
-      value: "option three",
-    },
-    {
-      disabled: false,
-      label: "Option Four",
-      value: "four",
-    },
-    {
-      disabled: false,
-      label: "Option Five",
-      value: "the fifth",
-    },
-  ],
-  required: false,
-  value: "option one",
+const isdisabled: LabelledDropdownProps = {
+  ...basic,
+  disabled: true,
 };
 
-/**
- * Sample prop definitions Dropdown's enumerable properties (imported in stories and test)
- */
 const DropdownArgs = {
   basic,
   haserror,

package/src/components/Dropdown/Dropdown.props.ts

@@ -1,3 +1,6 @@
+import { FormFieldProps } from "../../types";
+import { LabelledFormFieldProps } from "../../types";
+
 export interface OptionProps {
   /**
    * Is this option disabled?
@@ -7,78 +10,44 @@ export interface OptionProps {
   /**
    * The option's label
    */
-  label: Required<string>;
+  label: string;
 
   /**
    * The option's value
    */
-  value?: Required<string>;
+  value?: string;
 }
 
-export interface DropdownProps {
-  /**
-   * Should the Dropdown allow default browser autocomplete functionality?
-   * Ideally this would be boolean but for some reason React expects a string. So: "true" if true.
-   */
-  autocomplete: string;
-
-  /**
-   * The Dropdown's onChange callback.
-   */
-  callback?: (e: React.ChangeEvent<HTMLSelectElement>) => any;
-
-  /**
-   * Specify an optional className to be added to your Profile component.
-   */
-  className?: string;
-
-  /**
-   * Is the Dropdown disabled?
-   */
-  disabled?: boolean;
-
+export interface DropdownProps extends FormFieldProps<HTMLSelectElement> {
   /**
-   * Does the Dropdown have an error?
+   * A string providing a hint for a user agent's autocomplete feature.
    */
-  error?: string | false;
+  autocomplete?: string;
 
   /**
-   * The Dropdown's helper text
+   * The form element to associate the Dropdown with if it's not nested in a form element.
    */
-  helper: string | false;
+  form?: string;
 
   /**
-   * The Dropdown's id attribute
+   * Indicates that multiple options can be selected from the list.
    */
-  id?: string;
-
-  /**
-   * The Dropdown's label
-   */
-  label: string;
-
-  /**
-   * The Dropdown's name attribute
-   */
-  name?: Required<string>;
+  multiple?: boolean;
 
   /**
    * The Dropdown's options
    */
-  options?: Required<Array<OptionProps>>;
-
-  /**
-   * Is a selection required?
-   */
-  required?: boolean;
+  options?: OptionProps[];
 
   /**
-   * Does this Dropdown have a tooltip?
+   * Number of rows in the list that should be visible at one time. Corresponds to the select element's size attribute.
    */
-  tooltip?: string;
+  selectSize?: number;
 
   /**
    * The Dropdown's default selection; should match one of the values in `options`
    */
-  value: string;
+  value?: string;
 }
+
+export type LabelledDropdownProps = LabelledFormFieldProps<DropdownProps>;

package/src/components/Dropdown/Dropdown.tsx

@@ -1,82 +1,93 @@
-import { FC, useState } from "react";
+import React, { forwardRef, useState } from "react";
 import classNames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { DropdownProps } from "./Dropdown.props";
-import { Fieldset } from "../Fieldset";
-import { FormElement } from "../FormElement";
+import { useGlobalSettings } from "../../hooks";
+import { DropdownProps, LabelledDropdownProps } from "./Dropdown.props";
+import FormControl, { useFormControl } from "../FormControl/FormControl";
+
+const Dropdown = forwardRef<HTMLSelectElement, DropdownProps>((props, ref) => {
+  const {
+    autocomplete,
+    onChange,
+    onBlur,
+    disabled = false,
+    error,
+    id,
+    name,
+    options,
+    required,
+    value,
+    form,
+    multiple,
+    selectSize,
+  } = props;
 
-const Dropdown: FC<DropdownProps> = ({
-  autocomplete,
-  callback,
-  disabled = false,
-  error,
-  helper,
-  id,
-  label,
-  name,
-  options,
-  required,
-  tooltip,
-  value,
-}) => {
   const { prefix } = useGlobalSettings();
+  const formControlCtx = useFormControl();
+  const { ariaDescribedBy } = formControlCtx;
 
   const baseClass = `${prefix}--dropdown`;
 
-  const dropdownClasses = classNames("", {
-    [baseClass]: true,
+  const dropdownClasses = classNames(baseClass, {
     [`error`]: error,
   });
 
   const [currentvalue, setValue] = useState(value);
 
-  /**
-   * On change, if there is a callback, call it
-   */
   const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     setValue(e.target.value);
-
-    if (callback) {
-      callback(e);
+    if (onChange) {
+      onChange(e);
     }
   };
 
   return (
-    <Fieldset>
-      <FormElement
-        elemid={name as any}
-        label={label}
-        helper={helper as any}
-        error={error as any}
-        required={required as any}
-        tooltip={tooltip}
-        type={"dropdown"}
+    <div className={`${baseClass}--wrapper`}>
+      <select
+        ref={ref}
+        id={id ? id : name}
+        autoComplete={autocomplete}
+        name={name}
+        required={required}
+        onChange={handleChange}
+        onBlur={onBlur}
+        disabled={disabled}
+        className={dropdownClasses}
+        value={currentvalue}
+        form={form}
+        multiple={multiple}
+        size={selectSize}
+        aria-describedby={ariaDescribedBy}
       >
-        <div className={`${baseClass}--wrapper`}>
-          <select
-            id={id ? id : name}
-            autoComplete={autocomplete}
-            name={name}
-            required={required}
-            onChange={handleChange}
-            disabled={disabled}
-            className={dropdownClasses}
-            value={currentvalue}
-          >
-            {options &&
-              options.map((option, i) => (
-                <option
-                  disabled={option.disabled}
-                  label={option.label}
-                  value={option.value}
-                  key={`${baseClass}--option--${i}`}
-                />
-              ))}
-          </select>
-        </div>
-      </FormElement>
-    </Fieldset>
+        {options &&
+          options.map((option, i) => (
+            <option
+              disabled={option.disabled}
+              label={option.label}
+              value={option.value}
+              key={`${baseClass}--option--${i}`}
+            />
+          ))}
+      </select>
+    </div>
   );
-};
+});
+
+const LabelledDropdown = forwardRef<HTMLSelectElement, LabelledDropdownProps>(
+  (props, ref) => {
+    const { style, inputStyle, className, ...rest } = props;
+    const fieldId = props.id ? props.id : props.name;
+
+    return (
+      <FormControl
+        fieldId={fieldId}
+        style={style}
+        className={className}
+        {...rest}
+      >
+        <Dropdown ref={ref} style={inputStyle} {...rest} />
+      </FormControl>
+    );
+  }
+);
 
-export default Dropdown;
+export default LabelledDropdown;

package/src/components/Fieldset/Fieldset.props.ts

@@ -1,42 +1,33 @@
-import { ReactElement } from "react";
-import { InputProps } from "../Input/Input.props";
-import { TextareaProps } from "../Textarea/Textarea.props";
-
-export type FieldsetChild = ReactElement<InputProps | TextareaProps>;
-
-export interface FieldsetProps {
-  /**
-   * Specify the content of your Fieldset.
-   */
-  children: (null | false | FieldsetChild) | (null | false | FieldsetChild)[];
+import { HTMLProps } from "react";
 
+export interface FieldsetProps extends HTMLProps<HTMLFieldSetElement> {
   /**
-   * Specify an optional className to be added to your Fieldset component.
+   * Optional helper text for the fieldset
    */
-  className?: string;
+  helper?: string;
 
   /**
-   * The fieldset's id
+   * Optional error text for the fieldset
    */
-  fieldsetid?: string;
+  errorMessage?: string;
 
   /**
-   * Optional error text for the fieldset
+   * Optional tooltip text for the fieldset
    */
-  grouperror?: string;
+  tooltip?: string;
 
   /**
-   * Optional helper text for the fieldset
+   * The fieldset's legend
    */
-  grouphelper?: string;
+  legend?: string;
 
   /**
-   * Optional tooltip text for the fieldset
+   * The direction of the Fieldset's children
    */
-  grouptooltip?: string;
+  direction?: "row" | "column" | "row-reverse" | "column-reverse";
 
   /**
-   * The fieldset's legend
+   * How the Fieldset children will wrap
    */
-  legend?: string;
+  wrap?: "reverse" | "nowrap" | "wrap" | "wrap-reverse";
 }