@ilo-org/react 0.7.7 → 0.8.0

package/src/components/Form/Form.props.ts

@@ -1,137 +1,8 @@
-import { CheckboxProps } from "../Checkbox/Checkbox.props";
-import { DatePickerProps } from "../DatePicker/DatePicker.props";
-import { DropdownProps } from "../Dropdown/Dropdown.props";
-import { FileUploadProps } from "../FileUpload/FileUpload.props";
-import { NumberPickerProps } from "../NumberPicker/NumberPicker.props";
-import { RadioProps } from "../Radio/Radio.props";
-import { TextareaProps } from "../Textarea/Textarea.props";
-import { InputProps } from "../Input/Input.props";
-import { FormGroupProps } from "../FormGroup/FormGroup.props";
-
-export interface InputItem {
-  type: "input";
-  field: InputProps;
-  choicegroupid?: never;
-  legend?: never;
-  grouptooltip?: never;
-  grouperror?: never;
-  grouphelper?: never;
-}
-
-export interface DropdownItem {
-  type: "dropdown";
-  field: DropdownProps;
-  choicegroupid?: never;
-  legend?: never;
-  grouptooltip?: never;
-  grouperror?: never;
-  grouphelper?: never;
-}
-
-export interface CheckboxItem {
-  type: "checkbox";
-  field: CheckboxProps | CheckboxProps[];
-  choicegroupid: string;
-  legend?: string;
-  grouptooltip?: string;
-  grouperror?: string;
-  grouphelper?: string;
-}
-
-export interface RadioItem {
-  type: "radio";
-  field: RadioProps | RadioProps[];
-  choicegroupid: string;
-  legend?: string;
-  grouptooltip?: string;
-  grouperror?: string;
-  grouphelper?: string;
-}
-
-export interface FileUploadItem {
-  type: "file";
-  field: FileUploadProps;
-  choicegroupid?: never;
-  legend?: never;
-  grouptooltip?: never;
-  grouperror?: never;
-  grouphelper?: never;
-}
-
-export interface NumberPickerItem {
-  type: "number";
-  field: NumberPickerProps;
-  choicegroupid?: never;
-  legend?: never;
-  grouptooltip?: never;
-  grouperror?: never;
-  grouphelper?: never;
-}
-
-export interface DatePickerItem {
-  type: "date";
-  field: DatePickerProps;
-  choicegroupid?: never;
-  legend?: never;
-  grouptooltip?: never;
-  grouperror?: never;
-  grouphelper?: never;
-}
-
-export interface TextareaItem {
-  type: "textarea";
-  field: TextareaProps;
-  choicegroupid?: never;
-  legend?: never;
-  grouptooltip?: never;
-  grouperror?: never;
-  grouphelper?: never;
-}
-
-export interface FormGroupItem {
-  type: "formgroup";
-  field: FormGroupProps;
-  choicegroupid?: string;
-  legend?: string;
-  grouptooltip?: string;
-  grouperror?: string;
-  grouphelper?: string;
-}
-
-type FormItem =
-  | InputItem
-  | DropdownItem
-  | CheckboxItem
-  | RadioItem
-  | FileUploadItem
-  | NumberPickerItem
-  | DatePickerItem
-  | TextareaItem
-  | FormGroupItem;
-
-export interface FormProps {
-  /**
-   * The form's action attribute
-   */
-  action: Required<string>;
-
-  /**
-   * Specify an optional className to be added to your Form component.
-   */
-  className?: string;
-
-  /**
-   * The ID of the form
-   */
-  formid: Required<string>;
-
-  /**
-   * The inputs in this form group
-   */
-  items: FormItem[];
+export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
+  children?: React.ReactNode;
 
   /**
-   * The label for the form's submit button
+   * The theme of the form. Also sets the theme of the form's children.
    */
-  submitlabel: string;
+  theme?: "light" | "dark";
 }

package/src/components/Form/Form.tsx

@@ -1,83 +1,23 @@
-import { FC } from "react";
+import { forwardRef } from "react";
+import { useGlobalSettings } from "../../hooks";
 import classNames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { Button } from "../Button";
 import { FormProps } from "./Form.props";
-import { FormGroup } from "../FormGroup";
-import { Checkbox } from "../Checkbox";
-import { ChoiceGroup } from "../ChoiceGroup";
-import { DatePicker } from "../DatePicker";
-import { Dropdown } from "../Dropdown";
-import { FileUpload } from "../FileUpload";
-import { Input } from "../Input";
-import { NumberPicker } from "../NumberPicker";
-import { Textarea } from "../Textarea";
 
-const Form: FC<FormProps> = ({
-  action,
-  className,
-  formid,
-  items,
-  submitlabel,
-}) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--form`;
-  const formClasses = classNames(className, {
-    [baseClass]: true,
-  });
+const Form = forwardRef<HTMLFormElement, FormProps>(
+  ({ children, theme = "light", ...props }, ref) => {
+    const { prefix } = useGlobalSettings();
 
-  return (
-    <form className={formClasses} id={formid} action={action}>
-      {items.map((item, i) => {
-        if (item?.type === "input") {
-          return <Input {...(item?.field as any)} key={i} />;
-        }
-        if (item?.type === "dropdown") {
-          return <Dropdown {...(item?.field as any)} key={i} />;
-        }
-        if (item?.type === "checkbox" && Array.isArray(item?.field) === false) {
-          return <Checkbox {...(item?.field as any)} key={i} />;
-        }
-        if (
-          (item?.type === "checkbox" || item?.type === "radio") &&
-          Array.isArray(item?.field)
-        ) {
-          return (
-            <ChoiceGroup
-              items={item?.field as any}
-              legend={item?.legend as any}
-              choicegroupid={item?.choicegroupid as any}
-              grouperror={item?.grouperror as any}
-              grouphelper={item?.grouphelper as any}
-              grouptooltip={item?.grouptooltip as any}
-              key={i}
-            />
-          );
-        }
-        if (item?.type === "file") {
-          return <FileUpload {...(item?.field as any)} key={i} />;
-        }
-        if (item?.type === "date") {
-          return <DatePicker {...(item?.field as any)} key={i} />;
-        }
-        if (item?.type === "number") {
-          return <NumberPicker {...(item?.field as any)} key={i} />;
-        }
-        if (item?.type === "textarea") {
-          return <Textarea {...(item?.field as any)} key={i} />;
-        }
-        if (item?.type === "formgroup") {
-          return <FormGroup {...(item?.field as any)} key={i} />;
-        }
-      })}
-      <Button
-        kind={"submit"}
-        label={submitlabel}
-        size={"large"}
-        type={"primary"}
-      />
-    </form>
-  );
-};
+    const baseClass = `${prefix}--form`;
+    const themeClass = `${baseClass}__theme__${theme}`;
+
+    const formClasses = classNames(baseClass, themeClass);
+
+    return (
+      <form ref={ref} className={formClasses} {...props}>
+        {children}
+      </form>
+    );
+  }
+);
 
 export default Form;

package/src/components/Form/index.ts

@@ -1 +1,2 @@
 export { default as Form } from "./Form";
+export * as FormArgs from "./Form.args";

package/src/components/FormControl/FormControl.props.ts

@@ -0,0 +1,72 @@
+import { ReactElement } from "react";
+import { DropdownProps } from "../Dropdown/Dropdown.props";
+import { InputProps } from "../Input/Input.props";
+import { TextareaProps } from "../Textarea";
+import { ToggleProps } from "../Toggle";
+
+export interface FormControlPublicProps {
+  /**
+   * Optional className to add to the FormControl wrapper
+   */
+  className?: string;
+
+  /**
+   * Is the input disabled?
+   */
+  disabled?: boolean;
+
+  /**
+   * Does the input have an error?
+   */
+  error?: boolean;
+
+  /**
+   * The message to display in case of an error
+   */
+  errorMessage?: string;
+
+  /**
+   * Helper text to display with the label
+   */
+  helper?: string;
+
+  /**
+   * The FormControl's label
+   */
+  label: string;
+
+  /**
+   * Where to place the label
+   */
+  labelPlacement?: "top" | "start" | "bottom" | "end";
+
+  /**
+   * The size of your label. Defaults to "medium"
+   */
+  labelSize?: "small" | "medium" | "large";
+
+  /**
+   * Inline styles for the input
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Optional text to render in a tooltip
+   */
+  tooltip?: string;
+}
+
+export interface FormControlPrivateProps {
+  /**
+   * The id of the underlying input element
+   */
+  fieldId: string;
+
+  children:
+    | ReactElement<ToggleProps>
+    | ReactElement<InputProps>
+    | ReactElement<DropdownProps>
+    | ReactElement<TextareaProps>;
+}
+
+export type FormControlProps = FormControlPublicProps & FormControlPrivateProps;

package/src/components/FormControl/FormControl.tsx

@@ -0,0 +1,169 @@
+import classnames from "classnames";
+import { nanoid } from "nanoid";
+import {
+  FC,
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { useGlobalSettings } from "../../hooks";
+import { Tooltip } from "../Tooltip";
+import { FormControlProps } from "./FormControl.props";
+
+interface AllyFields {
+  tooltip?: string;
+  helper?: string;
+  errorMessage?: string;
+}
+
+interface AllyFieldsIds {
+  tooltipId?: string;
+  helperId?: string;
+  errorId?: string;
+}
+
+export interface FormControlContextProps {
+  ariaDescribedBy?: string;
+}
+
+// Calculates unique IDs for the internal accessibility elements
+// TODO: When we upgrade to React 8, this should use useId instead
+function getA11yFields(
+  baseClass = "",
+  { tooltip, helper, errorMessage }: AllyFields = {}
+) {
+  return {
+    tooltipId: tooltip && `${baseClass}--tooltip--${nanoid()}`,
+    helperId: helper && `${baseClass}--helper--${nanoid()}`,
+    errorId: errorMessage && `${baseClass}--error--${nanoid()}`,
+  };
+}
+
+// Calculates the aria-describedby attribute value based on whether or not there's an error
+function getAriaDescribedBy(getAllyFields: AllyFieldsIds, hasError?: boolean) {
+  const { tooltipId, helperId, errorId } = getAllyFields;
+
+  const ariaDescribedBy = classnames(tooltipId, {
+    [`${helperId}`]: !hasError,
+    [`${errorId}`]: hasError,
+  });
+
+  // For some reason, classnames seems to return "undefined" as a string sometimes
+  if (!ariaDescribedBy || ariaDescribedBy === "undefined") {
+    return undefined;
+  }
+  return ariaDescribedBy;
+}
+
+// The context passed down to form elements wrapped by the form control
+export const FormControlContext: React.Context<FormControlContextProps> =
+  createContext({});
+
+// Hook to get the context value
+export const useFormControl = () => useContext(FormControlContext);
+
+const FormControl: FC<FormControlProps> = ({
+  children,
+  className,
+  label,
+  helper,
+  errorMessage,
+  tooltip,
+  style,
+  error,
+  disabled,
+  fieldId,
+  labelSize = "medium",
+  labelPlacement = "top",
+}) => {
+  const { prefix } = useGlobalSettings();
+
+  // Classes applied to the outer container
+  const baseClass = `${prefix}--form-control`;
+
+  // The ids of the tooltip, helper, and error only get calculated on first render
+  const a11yFields = useMemo(
+    () => getA11yFields(baseClass, { helper, errorMessage, tooltip }),
+    [baseClass, helper, errorMessage, tooltip]
+  );
+
+  // The ids of the tooltip, helper, and error
+  const { tooltipId, helperId, errorId } = a11yFields;
+
+  // The aria-describedby attribute value
+  const [ariaDescribedBy, setAriaDescribedBy] = useState<string | undefined>(
+    undefined
+  );
+
+  // Update the aria-describedby attribute value when the error changes
+  useEffect(() => {
+    setAriaDescribedBy(
+      getAriaDescribedBy({ tooltipId, helperId, errorId }, error)
+    );
+  }, [tooltipId, helperId, errorId, error]);
+
+  // The context passed down to form elements wrapped by the form control
+  const contextValue: FormControlContextProps = {
+    ariaDescribedBy,
+  };
+
+  // Classes applied to the outer container
+  const errorClass = `${baseClass}__error`;
+  const disabledClass = `${baseClass}__disabled`;
+  const labelPlacementClass = `${baseClass}__label-placement__${labelPlacement}`;
+
+  const formControlClass = classnames(
+    baseClass,
+    className,
+    labelPlacementClass,
+    [{ [errorClass]: error }, { [disabledClass]: disabled }]
+  );
+
+  // Classes applies to the label
+  const labelBaseClass = `${baseClass}--label`;
+  const labelSizeClass = `${labelBaseClass}__size__${labelSize}`;
+  const labelClass = classnames(labelBaseClass, labelSizeClass);
+
+  // Helper class
+  const helperClass = `${baseClass}--helper`;
+
+  // Show the error message if there is an error and an error message
+  const showError = !!error && !!errorMessage;
+
+  // Show the helper text if there is no error and a helper text
+  const showHelper = !showError && !!helper;
+
+  return (
+    <FormControlContext.Provider value={contextValue}>
+      <div className={formControlClass} style={style}>
+        <span className={labelClass}>
+          <label htmlFor={fieldId}>{label}</label>
+          {tooltip && (
+            <Tooltip
+              id={tooltipId}
+              className={`${baseClass}--legend--tooltip`}
+              icon={true}
+              label={tooltip}
+              theme={"dark"}
+            />
+          )}
+        </span>
+        {children}
+        {showHelper && (
+          <span id={helperId} className={helperClass}>
+            {helper}
+          </span>
+        )}
+        {showError && (
+          <span id={errorId} className={helperClass} aria-live="assertive">
+            {errorMessage}
+          </span>
+        )}
+      </div>
+    </FormControlContext.Provider>
+  );
+};
+
+export default FormControl;

package/src/components/FormControl/index.ts

@@ -0,0 +1,2 @@
+export { default as FormControl } from "./FormControl";
+export type { FormControlProps } from "./FormControl.props";

package/src/components/FormElement/FormElement.props.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from "react";
-import { InputTypes, FieldTypes } from "../../types";
+import { TextInputTypes, FieldTypes } from "../../types";
 import { DropdownProps } from "../Dropdown/Dropdown.props";
 import { InputProps } from "../Input/Input.props";
 import { TextareaProps } from "../Textarea/Textarea.props";
@@ -56,5 +56,5 @@ export interface FormElementProps {
   /**
    * The type of field
    */
-  type?: InputTypes | FieldTypes;
+  type?: TextInputTypes | FieldTypes;
 }

package/src/components/Input/Input.props.ts

@@ -1,4 +1,4 @@
-import { InputTypes } from "../../types";
+import { TextInputTypes } from "../../types";
 
 export interface InputProps {
   /**
@@ -59,5 +59,5 @@ export interface InputProps {
   /**
    * The input's type.
    */
-  type: InputTypes;
+  type: TextInputTypes;
 }

package/src/components/Navigation/Navigation.args.ts

@@ -1,9 +1,10 @@
 import { NavigationProps } from "./Navigation.props";
 import ilo_logo_white from "@ilo-org/brand-assets/logo_en_horizontal_white.svg";
+import ilo_logo_blue from "@ilo-org/brand-assets/logo_en_horizontal_blue.svg";
 
 const basic: NavigationProps = {
   logo: ilo_logo_white,
-  mobilelogo: ilo_logo_white,
+  mobilelogo: ilo_logo_blue,
   siteurl: "https://www.ilo.org/",
   tagline: {
     tag: "Advancing social justice, promoting decent work",

package/src/components/NumberPicker/NumberPicker.args.ts

@@ -1,53 +1,45 @@
-import { NumberPickerProps } from "./NumberPicker.props";
+import { LabelledNumberPickerProps } from "./NumberPicker.props";
 
-const basic: NumberPickerProps = {
-  callback: () => {},
+const basic: LabelledNumberPickerProps = {
+  label: "How many items would you like?",
+  id: "numberpicker",
   disabled: false,
   error: false,
-  helper: false,
-  label: "Number Picker Field Label",
   name: "text",
-  placeholder: "Number Picker Field",
+  placeholder: "Select a number",
   required: false,
 };
 
-const hashelper: NumberPickerProps = {
-  callback: () => {},
+const hashelper: LabelledNumberPickerProps = {
+  label: "How many items would you like?",
+  id: "numberpicker",
   disabled: false,
   error: false,
-  helper: "Here is the helper text",
-  label: "Number Picker Field Label",
   name: "text",
-  placeholder: "Number Picker Field",
+  placeholder: "Select a number",
   required: false,
 };
 
-const haserror: NumberPickerProps = {
-  callback: () => {},
+const haserror: LabelledNumberPickerProps = {
+  label: "How many items would you like?",
+  id: "numberpicker",
   disabled: false,
-  error: "This one has an error",
-  helper: false,
-  label: "Number Picker Field Label",
+  error: true,
   name: "text",
-  placeholder: "Number Picker Field",
+  placeholder: "Select a number",
   required: false,
 };
 
-const hastooltip: NumberPickerProps = {
-  callback: () => {},
+const hastooltip: LabelledNumberPickerProps = {
+  label: "How many items would you like?",
+  id: "numberpicker",
   disabled: false,
   error: false,
-  helper: false,
-  label: "Number Picker Field Label",
   name: "text",
-  placeholder: "Number Picker Field",
+  placeholder: "Select a number",
   required: false,
-  tooltip: "This is the tooltip",
 };
 
-/**
- * Sample prop definitions NumberPicker's enumerable properties (imported in stories and test)
- */
 const NumberPickerArgs = {
   basic,
   hashelper,

package/src/components/NumberPicker/NumberPicker.props.ts

@@ -1,56 +1,11 @@
-export interface NumberPickerProps {
+import { FormFieldProps } from "../../types";
+import { LabelledFormFieldProps } from "../../types";
+export interface NumberPickerProps extends FormFieldProps<HTMLInputElement> {
   /**
-   * The input's onChange callback.
-   */
-  callback: (e: React.ChangeEvent<HTMLInputElement>) => any;
-
-  /**
-   * Specify an optional className to be added to your input.
-   */
-  className?: string;
-
-  /**
-   * Is the input disabled?
-   */
-  disabled?: boolean;
-
-  /**
-   * Does the input have an error?
-   */
-  error?: string | false;
-
-  /**
-   * The input's helper text
-   */
-  helper: string | false;
-
-  /**
-   * The input's id attribute
-   */
-  id?: string;
-
-  /**
-   * Does this input have a label?
-   */
-  label: string;
-
-  /**
-   * The input's name attribute
-   */
-  name?: Required<string>;
-
-  /**
-   * Specify an optional className to be added to your NumberPicker component.
+   * The placeholder text when the input is empty.
    */
   placeholder?: string;
-
-  /**
-   * Specify whether this input is required
-   */
-  required?: boolean;
-
-  /**
-   * Does this NumberPicker have a tooltip?
-   */
-  tooltip?: string;
 }
+
+export type LabelledNumberPickerProps =
+  LabelledFormFieldProps<NumberPickerProps>;