@ilo-org/react 0.7.7 → 0.8.0

package/lib/types/react/src/components/FormControl/FormControl.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+import { FormControlProps } from "./FormControl.props";
+export interface FormControlContextProps {
+    ariaDescribedBy?: string;
+}
+export declare const FormControlContext: React.Context<FormControlContextProps>;
+export declare const useFormControl: () => FormControlContextProps;
+declare const FormControl: FC<FormControlProps>;
+export default FormControl;

package/lib/types/react/src/components/FormControl/FormControl.props.d.ts

@@ -0,0 +1,55 @@
+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/lib/types/react/src/components/FormControl/index.d.ts

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

package/lib/types/react/src/components/FormElement/FormElement.props.d.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";
@@ -43,5 +43,5 @@ export interface FormElementProps {
     /**
      * The type of field
      */
-    type?: InputTypes | FieldTypes;
+    type?: TextInputTypes | FieldTypes;
 }

package/lib/types/react/src/components/Input/Input.props.d.ts

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

package/lib/types/react/src/components/NumberPicker/NumberPicker.d.ts

@@ -1,4 +1,6 @@
-import { FC } from "react";
+import React from "react";
 import { NumberPickerProps } from "./NumberPicker.props";
-declare const NumberPicker: FC<NumberPickerProps>;
-export default NumberPicker;
+declare const LabelledNumberPicker: React.ForwardRefExoticComponent<NumberPickerProps & import("../FormControl/FormControl.props").FormControlPublicProps & {
+    inputStyle?: React.CSSProperties | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export default LabelledNumberPicker;

package/lib/types/react/src/components/NumberPicker/NumberPicker.props.d.ts

@@ -1,46 +1,9 @@
-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>;

package/lib/types/react/src/components/Radio/Radio.args.d.ts

@@ -0,0 +1,8 @@
+import { RadioProps } from "./Radio.props";
+/**
+ * Sample prop definitions Radio's enumerable properties (imported in stories and test)
+ */
+declare const RadioArgs: {
+    basic: RadioProps;
+};
+export default RadioArgs;

package/lib/types/react/src/components/Radio/Radio.d.ts

@@ -1,4 +1,6 @@
-import { FC } from "react";
+import React from "react";
 import { RadioProps } from "./Radio.props";
-declare const Radio: FC<RadioProps>;
-export default Radio;
+declare const LabelledRadio: React.ForwardRefExoticComponent<RadioProps & import("../FormControl/FormControl.props").FormControlPublicProps & {
+    inputStyle?: React.CSSProperties | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export default LabelledRadio;

package/lib/types/react/src/components/Radio/Radio.props.d.ts

@@ -1,14 +1,4 @@
-export interface RadioProps {
-    callback?: (e: React.ChangeEvent<HTMLInputElement>) => any;
-    className?: string;
-    disabled?: boolean;
-    error?: string;
-    helper?: string;
-    id?: string;
-    label?: string;
-    name: string;
-    required?: boolean;
-    tooltip?: string;
-    value: string;
-    selected?: string;
-}
+import { ChoiceFieldProps } from "../../types";
+import { LabelledFormFieldProps } from "../../types";
+export type RadioProps = ChoiceFieldProps<HTMLInputElement>;
+export type LabelledRadioProps = LabelledFormFieldProps<RadioProps>;

package/lib/types/react/src/components/Radio/index.d.ts

@@ -1 +1,2 @@
 export { default as Radio } from "./Radio";
+export { default as RadioArgs } from "./Radio.args";

package/lib/types/react/src/components/TextInput/TextInput.args.d.ts

@@ -0,0 +1,10 @@
+import { LabelledTextInputProps } from "./TextInput.props";
+export declare const basic: LabelledTextInputProps;
+export declare const isdisabled: LabelledTextInputProps;
+export declare const hashelper: LabelledTextInputProps;
+export declare const haserror: LabelledTextInputProps;
+export declare const hastooltip: LabelledTextInputProps;
+export declare const email: LabelledTextInputProps;
+export declare const password: LabelledTextInputProps;
+export declare const telephone: LabelledTextInputProps;
+export declare const url: LabelledTextInputProps;

package/lib/types/react/src/components/TextInput/TextInput.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { TextInputProps } from "./TextInput.props";
+declare const LabelledTextInput: React.ForwardRefExoticComponent<TextInputProps & import("../FormControl/FormControl.props").FormControlPublicProps & {
+    inputStyle?: React.CSSProperties | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export default LabelledTextInput;

package/lib/types/react/src/components/TextInput/TextInput.props.d.ts

@@ -0,0 +1,17 @@
+import { FormFieldProps, TextInputTypes } from "../../types";
+import { LabelledFormFieldProps } from "../../types";
+export interface TextInputProps extends FormFieldProps<HTMLInputElement> {
+    /**
+     * Optional pattern attribute for phone numbers, zip codes, etc.
+     */
+    pattern?: string;
+    /**
+     * Specify an optional className to be added to your Input component.
+     */
+    placeholder?: string;
+    /**
+     * The input's type.
+     */
+    type: TextInputTypes;
+}
+export type LabelledTextInputProps = LabelledFormFieldProps<TextInputProps>;

package/lib/types/react/src/components/TextInput/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TextInput } from "./TextInput";
+export * as TextInputArgs from "./TextInput.args";

package/lib/types/react/src/components/Textarea/Textarea.args.d.ts

@@ -0,0 +1,10 @@
+import { LabelledTextareaProps, TextareaProps } from "./Textarea.props";
+export declare const basic: LabelledTextareaProps;
+export declare const haserror: TextareaProps;
+export declare const disabled: TextareaProps;
+declare const _default: {
+    basic: LabelledTextareaProps;
+    haserror: TextareaProps;
+    disabled: TextareaProps;
+};
+export default _default;

package/lib/types/react/src/components/Textarea/Textarea.d.ts

@@ -1,4 +1,6 @@
-import { FC } from "react";
+import React from "react";
 import { TextareaProps } from "./Textarea.props";
-declare const Textarea: FC<TextareaProps>;
-export default Textarea;
+declare const LabelledTextarea: React.ForwardRefExoticComponent<TextareaProps & import("../FormControl/FormControl.props").FormControlPublicProps & {
+    inputStyle?: React.CSSProperties | undefined;
+} & React.RefAttributes<HTMLTextAreaElement>>;
+export default LabelledTextarea;

package/lib/types/react/src/components/Textarea/Textarea.props.d.ts

@@ -1,32 +1,18 @@
-export interface TextareaProps {
+import { FormFieldProps } from "../../types";
+import { LabelledFormFieldProps } from "../../types";
+export interface TextareaProps extends FormFieldProps<HTMLTextAreaElement> {
     /**
      * The Textarea's onChange callback.
      */
-    callback?: (e: React.ChangeEvent<HTMLTextAreaElement>) => any;
+    onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => any;
     /**
-     * Specify an optional className to be added to your Textarea.
-     */
-    className?: string;
-    /**
-     * Is the Textarea disabled?
-     */
-    disabled?: boolean;
-    /**
-     * Does the Textarea have an error?
-     */
-    error?: string;
-    /**
-     * The Textarea's helper text
-     */
-    helper?: string;
-    /**
-     * The Textarea's id attribute
-     */
-    id?: string;
+     * Activate automatic spelling correction and processing of text substitutions
+     **/
+    autocorrect?: "on" | "off";
     /**
-     * Does this Textarea have a label?
-     */
-    label: string;
+     *  The id of the form element the Textarea belongs to if it's not nested inside the form.
+     **/
+    form?: string;
     /**
      * The Textarea's maxlength
      */
@@ -35,25 +21,17 @@ export interface TextareaProps {
      * The Textarea's minlength
      */
     minlength?: number;
-    /**
-     * The Textarea's name attribute
-     */
-    name?: Required<string>;
     /**
      * Specify an optional className to be added to your Textarea component.
      */
     placeholder?: string;
     /**
-     * Specify whether this Textarea is required
-     */
-    required?: boolean;
-    /**
-     * Specify whether this Textarea employs browser-based spellcheck
-     */
-    spellcheck?: boolean;
+     * Specifies whether the textarea is subject to spellchecking by the underlying browser/OS
+     **/
+    spellcheck?: boolean | "default";
     /**
-     * Does this Textarea have a tooltip?
-     */
-    tooltip?: string;
-    type?: never;
+     *  How the control should wrap the value for submission.
+     **/
+    wrap?: "hard" | "soft" | "off";
 }
+export type LabelledTextareaProps = LabelledFormFieldProps<TextareaProps>;

package/lib/types/react/src/components/Textarea/index.d.ts

@@ -1 +1,3 @@
 export { default as Textarea } from "./Textarea";
+export type { TextareaProps } from "./Textarea.props";
+export { default as TextareaArgs } from "./Textarea.args";

package/lib/types/react/src/components/Toggle/Toggle.args.d.ts

@@ -0,0 +1,12 @@
+import { LabelledToggleProps } from "./Toggle.props";
+export declare const Default: LabelledToggleProps;
+export declare const Checked: LabelledToggleProps;
+export declare const Disabled: LabelledToggleProps;
+export declare const Helper: LabelledToggleProps;
+export declare const Tooltip: LabelledToggleProps;
+export declare const Error: LabelledToggleProps;
+export declare const DefaultChecked: LabelledToggleProps;
+export declare const Controlled: LabelledToggleProps;
+export declare const Large: LabelledToggleProps;
+export declare const Medium: LabelledToggleProps;
+export declare const Small: LabelledToggleProps;

package/lib/types/react/src/components/Toggle/Toggle.d.ts

@@ -0,0 +1,5 @@
+import { ToggleProps } from "./Toggle.props";
+declare const LabelledToggle: import("react").ForwardRefExoticComponent<ToggleProps & import("../FormControl/FormControl.props").FormControlPublicProps & {
+    inputStyle?: import("react").CSSProperties | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default LabelledToggle;

package/lib/types/react/src/components/Toggle/Toggle.props.d.ts

@@ -0,0 +1,22 @@
+import { FormFieldProps } from "../../types";
+import { LabelledFormFieldProps } from "../../types";
+export interface ToggleProps extends FormFieldProps<HTMLInputElement> {
+    /**
+     * Specify the size of your Toggle. Defaults to "medium".
+     */
+    size?: "large" | "medium" | "small";
+    /**
+     * Specify whether your Toggle is checked by default. Defaults to false.
+     *
+     */
+    defaultChecked?: boolean;
+    /**
+     * Specify whether your Toggle is checked. Defaults to undefined.
+     */
+    checked?: boolean;
+    /**
+     * OnClick handler for the input element.
+     */
+    onClick?: (event: React.MouseEvent<HTMLInputElement>) => any;
+}
+export type LabelledToggleProps = LabelledFormFieldProps<ToggleProps>;

package/lib/types/react/src/components/Toggle/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Toggle } from "./Toggle";
+export type { ToggleProps } from "./Toggle.props";
+export * as ToggleArgs from "./Toggle.args";

package/lib/types/react/src/components/Tooltip/Tooltip.props.d.ts

@@ -8,6 +8,10 @@ export interface TooltipProps {
      * Should the tooltip appear on hover of an info icon?
      */
     icon?: boolean;
+    /**
+     * Set the id of the tooltip
+     */
+    id?: string;
     /**
      * Set the label for the tooltip
      */

package/lib/types/react/src/components/index.d.ts

@@ -1,7 +1,7 @@
 export { Accordion, AccordionButton, AccordionItem, AccordionPanel, } from "./Accordion";
+export { Form } from "./Form";
 export { Collapse } from "./Collapse";
 export { Empty } from "./Empty";
-export { FormGroup } from "./FormGroup";
 export { Image } from "./Image";
 export { Loading } from "./Loading";
 export { Radio } from "./Radio";
@@ -10,7 +10,6 @@ export { Button } from "./Button";
 export { ContextMenu } from "./ContextMenu";
 export { Fieldset } from "./Fieldset";
 export { GlobalProvider } from "./GlobalProvider";
-export { Input } from "./Input";
 export { Notification } from "./Notification";
 export { ReadMore } from "./ReadMore";
 export { Textarea } from "./Textarea";
@@ -24,15 +23,12 @@ export { RichText } from "./RichText";
 export { Tooltip } from "./Tooltip";
 export { Checkbox } from "./Checkbox";
 export { DatePicker } from "./DatePicker";
-export { Form } from "./Form";
 export { Hero } from "./Hero";
 export { LinkList } from "./LinkList";
 export { Pagination } from "./Pagination";
 export { SearchField } from "./SearchField";
 export { Video } from "./Video";
-export { ChoiceGroup } from "./ChoiceGroup";
 export { Dropdown } from "./Dropdown";
-export { FormElement } from "./FormElement";
 export { Icon } from "./Icon";
 export { List } from "./List";
 export { Profile } from "./Profile";

package/lib/types/react/src/hooks/usePrevious.d.ts

@@ -0,0 +1,2 @@
+export declare function usePrevious<T>(value: T): T | undefined;
+export default usePrevious;

package/lib/types/react/src/types/index.d.ts

@@ -1,3 +1,4 @@
+import { FormControlPublicProps } from "../components/FormControl/FormControl.props";
 export type ThemeTypes = "light" | "dark";
 export type ButtonFunctions = "button" | "submit" | "reset";
 export type ButtonTypes = "primary" | "secondary" | "tertiary" | "alert";
@@ -6,7 +7,7 @@ export type ChoiceGroupFieldTypes = "checkbox" | "radio";
 export type FieldTypes = "checkbox" | "date" | "dropdown" | "formgroup" | "input" | "number" | "radio" | "textarea" | "toggle" | "file";
 export type FormGroupTypes = "default" | "filter";
 export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-export type InputTypes = "email" | "hidden" | "password" | "search" | "tel" | "text" | "url";
+export type TextInputTypes = "email" | "hidden" | "password" | "search" | "tel" | "text" | "url";
 export type Language = "en" | "fr" | "es";
 export type LabelTypes = "default" | "actionable" | "light";
 export type LinkTypes = "light" | "dark" | "footer" | "button";
@@ -29,3 +30,58 @@ export type CardSize = "wide" | "standard" | "narrow";
 export type CardCornerType = "cornercut" | "corner";
 export type CardAlignment = "left" | "right";
 export type CardTypes = "stat" | "multilink" | "graphic" | "graphicpromo" | "feature" | "detail" | "factlist" | "data";
+export interface FormFieldProps<T> {
+    /**
+     * The input's onChange callback.
+     */
+    onChange?: (e: React.ChangeEvent<T>) => any;
+    /**
+     * The input's onBlur callback.
+     */
+    onBlur?: (e: React.FocusEvent<T>) => 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?: boolean;
+    /**
+     * The input's id attribute. Will otherwise be set to the same value as `name`.
+     */
+    id?: string;
+    /**
+     * The input's name attribute.
+     */
+    name: string;
+    /**
+     * Specify whether this input is required
+     */
+    required?: boolean;
+    /**
+     * Inline styles applies to the outermost container
+     */
+    style?: React.CSSProperties;
+}
+export interface ChoiceFieldProps<T> extends FormFieldProps<T> {
+    /**
+     * Whether the input should be checked by default
+     **/
+    defaultChecked?: boolean;
+    /**
+     * Whether the input is checked
+     */
+    checked?: boolean;
+    /**
+     * The input's value attribute.
+     */
+    value?: string;
+}
+export type LabelledFormFieldProps<T> = T & FormControlPublicProps & {
+    inputStyle?: React.CSSProperties;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/react",
-  "version": "0.7.7",
+  "version": "0.8.0",
   "description": "React components for the ILO's Design System",
   "keywords": [
     "ui_patterns",
@@ -70,12 +70,13 @@
   "dependencies": {
     "classnames": "^2.3.1",
     "dom-helpers": "^5.2.1",
+    "nanoid": "^3.3.6",
     "react-player": "2.10.1",
     "react-transition-group": "^4.4.1",
     "@ilo-org/brand-assets": "0.1.0",
     "@ilo-org/fonts": "0.1.0",
     "@ilo-org/icons-react": "0.0.21",
-    "@ilo-org/styles": "0.8.3",
+    "@ilo-org/styles": "0.9.0",
     "@ilo-org/themes": "0.2.0",
     "@ilo-org/utils": "0.0.11"
   },
@@ -83,21 +84,21 @@
     "@rollup/plugin-commonjs": "^23.0.2",
     "@rollup/plugin-json": "^5.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
-    "@storybook/addon-a11y": "^7.0.18",
-    "@storybook/addon-actions": "^7.0.18",
-    "@storybook/addon-docs": "^7.0.18",
-    "@storybook/addon-essentials": "^7.0.18",
-    "@storybook/addon-links": "^7.0.18",
-    "@storybook/addon-styling": "^1.0.8",
-    "@storybook/blocks": "^7.0.18",
-    "@storybook/builder-vite": "^7.0.18",
-    "@storybook/client-api": "^7.0.18",
-    "@storybook/manager-api": "^7.0.18",
-    "@storybook/node-logger": "^7.0.18",
+    "@storybook/addon-a11y": "7.5.0-alpha.1",
+    "@storybook/addon-actions": "7.5.0-alpha.1",
+    "@storybook/addon-docs": "7.5.0-alpha.1",
+    "@storybook/addon-essentials": "7.5.0-alpha.1",
+    "@storybook/addon-links": "7.5.0-alpha.1",
+    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/blocks": "7.5.0-alpha.1",
+    "@storybook/builder-vite": "7.5.0-alpha.1",
+    "@storybook/client-api": "7.5.0-alpha.1",
+    "@storybook/manager-api": "7.5.0-alpha.1",
+    "@storybook/node-logger": "7.5.0-alpha.1",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^7.0.18",
-    "@storybook/react-vite": "^7.0.18",
-    "@storybook/theming": "^7.0.18",
+    "@storybook/react": "7.5.0-alpha.1",
+    "@storybook/react-vite": "7.5.0-alpha.1",
+    "@storybook/theming": "7.5.0-alpha.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
@@ -123,10 +124,10 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-typescript2": "^0.34.1",
     "screenfull": "^5.2.0",
-    "storybook": "^7.0.18",
+    "storybook": "7.5.0-alpha.1",
     "storybook-addon-performance": "^0.17.1",
     "ts-dedent": "^2.2.0",
-    "ts-jest": "^27.1.3",
+    "ts-jest": "^29.1.1",
     "tslib": "^2.3.1",
     "vite": "^4.3.9",
     "@ilo-org/eslint-config": "0.1.0",

package/src/components/Checkbox/Checkbox.args.ts

@@ -1,20 +1,42 @@
-import { CheckboxProps } from "./Checkbox.props";
-
-const basic: CheckboxProps = {
-  callback: () => {},
-  disabled: false,
-  error: false,
-  grouped: false,
-  label: "Checkbox Label",
+import { LabelledCheckboxProps } from "./Checkbox.props";
+
+const NUMBER_CHECKBOXES = 3;
+
+const basic: LabelledCheckboxProps = {
+  label: "Checkbox",
+  className: "checkbox",
   name: "checkbox",
-  required: false,
 };
 
+const basicCheckBoxes = Array(NUMBER_CHECKBOXES).map((_, i) => ({
+  ...basic,
+  id: `checkbox-${i}`,
+}));
+
+const checked: LabelledCheckboxProps = {
+  ...basic,
+  defaultChecked: true,
+};
+
+const error: LabelledCheckboxProps = {
+  ...basic,
+  error: true,
+};
+
+const errorCheckBoxes = Array(NUMBER_CHECKBOXES).map((_, i) => ({
+  ...error,
+  id: `checkbox-${i}`,
+}));
+
 /**
  * Sample prop definitions Checkbox's enumerable properties (imported in stories and test)
  */
 const CheckboxArgs = {
   basic,
+  basicCheckBoxes,
+  errorCheckBoxes,
+  checked,
+  error,
 };
 
 export default CheckboxArgs;