@ilo-org/react 0.7.8 → 0.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (174) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/lib/cjs/components/Checkbox/Checkbox.js +28 -16
  3. package/lib/cjs/components/Checkbox/index.js +25 -3
  4. package/lib/cjs/components/DatePicker/DatePicker.js +21 -16
  5. package/lib/cjs/components/DatePicker/index.js +4 -4
  6. package/lib/cjs/components/Dropdown/Dropdown.js +19 -15
  7. package/lib/cjs/components/Dropdown/index.js +3 -3
  8. package/lib/cjs/components/Fieldset/Fieldset.js +33 -9
  9. package/lib/cjs/components/Fieldset/index.js +2 -2
  10. package/lib/cjs/components/FileUpload/FileUpload.js +29 -15
  11. package/lib/cjs/components/FileUpload/index.js +3 -3
  12. package/lib/cjs/components/Form/Form.js +8 -55
  13. package/lib/cjs/components/Form/index.js +10 -20
  14. package/lib/cjs/components/FormControl/FormControl.js +79 -0
  15. package/lib/cjs/components/FormControl/index.js +16 -0
  16. package/lib/cjs/components/Input/Input.js +1 -1
  17. package/lib/cjs/components/NumberPicker/NumberPicker.js +21 -16
  18. package/lib/cjs/components/NumberPicker/index.js +4 -4
  19. package/lib/cjs/components/Radio/Radio.js +34 -17
  20. package/lib/cjs/components/Radio/index.js +19 -4
  21. package/lib/cjs/components/TextInput/TextInput.js +30 -0
  22. package/lib/cjs/components/TextInput/index.js +52 -0
  23. package/lib/cjs/components/Textarea/Textarea.js +19 -19
  24. package/lib/cjs/components/Textarea/index.js +26 -5
  25. package/lib/cjs/components/Toggle/Toggle.js +33 -0
  26. package/lib/cjs/components/Toggle/index.js +51 -0
  27. package/lib/cjs/components/Tooltip/Tooltip.js +2 -2
  28. package/lib/cjs/components/index.js +10 -11
  29. package/lib/cjs/hooks/usePrevious.js +20 -0
  30. package/lib/cjs/index.js +10 -11
  31. package/lib/esm/components/Checkbox/Checkbox.js +31 -19
  32. package/lib/esm/components/Checkbox/index.js +27 -2
  33. package/lib/esm/components/DatePicker/DatePicker.js +22 -17
  34. package/lib/esm/components/DatePicker/index.js +4 -4
  35. package/lib/esm/components/Dropdown/Dropdown.js +20 -16
  36. package/lib/esm/components/Dropdown/index.js +3 -3
  37. package/lib/esm/components/Fieldset/Fieldset.js +31 -11
  38. package/lib/esm/components/Fieldset/index.js +1 -1
  39. package/lib/esm/components/FileUpload/FileUpload.js +31 -17
  40. package/lib/esm/components/FileUpload/index.js +3 -3
  41. package/lib/esm/components/Form/Form.js +10 -57
  42. package/lib/esm/components/Form/index.js +13 -20
  43. package/lib/esm/components/FormControl/FormControl.js +73 -0
  44. package/lib/esm/components/{ChoiceGroup → FormControl}/index.js +3 -6
  45. package/lib/esm/components/NumberPicker/NumberPicker.js +21 -16
  46. package/lib/esm/components/NumberPicker/index.js +4 -4
  47. package/lib/esm/components/Radio/Radio.js +34 -17
  48. package/lib/esm/components/Radio/index.js +21 -3
  49. package/lib/esm/components/TextInput/TextInput.js +28 -0
  50. package/lib/esm/components/TextInput/index.js +49 -0
  51. package/lib/esm/components/Textarea/Textarea.js +19 -19
  52. package/lib/esm/components/Textarea/index.js +28 -4
  53. package/lib/esm/components/Toggle/Toggle.js +31 -0
  54. package/lib/esm/components/Toggle/index.js +48 -0
  55. package/lib/esm/components/Tooltip/Tooltip.js +2 -2
  56. package/lib/esm/components/index.js +8 -5
  57. package/lib/esm/hooks/usePrevious.js +15 -0
  58. package/lib/esm/index.js +8 -5
  59. package/lib/types/react/src/components/Checkbox/Checkbox.args.d.ts +52 -0
  60. package/lib/types/react/src/components/Checkbox/Checkbox.d.ts +5 -3
  61. package/lib/types/react/src/components/Checkbox/Checkbox.props.d.ts +4 -13
  62. package/lib/types/react/src/components/Checkbox/index.d.ts +1 -0
  63. package/lib/types/react/src/components/DatePicker/DatePicker.d.ts +4 -3
  64. package/lib/types/react/src/components/DatePicker/DatePicker.props.d.ts +10 -43
  65. package/lib/types/react/src/components/Dropdown/Dropdown.d.ts +5 -3
  66. package/lib/types/react/src/components/Dropdown/Dropdown.props.d.ts +16 -42
  67. package/lib/types/react/src/components/Fieldset/Fieldset.d.ts +6 -0
  68. package/lib/types/react/src/components/Fieldset/Fieldset.props.d.ts +14 -21
  69. package/lib/types/react/src/components/FileUpload/FileUpload.d.ts +5 -3
  70. package/lib/types/react/src/components/FileUpload/FileUpload.props.d.ts +7 -44
  71. package/lib/types/react/src/components/Form/Form.args.d.ts +2 -0
  72. package/lib/types/react/src/components/Form/Form.d.ts +1 -2
  73. package/lib/types/react/src/components/Form/Form.props.d.ts +4 -111
  74. package/lib/types/react/src/components/Form/index.d.ts +1 -0
  75. package/lib/types/react/src/components/FormControl/FormControl.d.ts +9 -0
  76. package/lib/types/react/src/components/FormControl/FormControl.props.d.ts +55 -0
  77. package/lib/types/react/src/components/FormControl/index.d.ts +2 -0
  78. package/lib/types/react/src/components/FormElement/FormElement.props.d.ts +2 -2
  79. package/lib/types/react/src/components/Input/Input.props.d.ts +2 -2
  80. package/lib/types/react/src/components/NumberPicker/NumberPicker.d.ts +5 -3
  81. package/lib/types/react/src/components/NumberPicker/NumberPicker.props.d.ts +5 -42
  82. package/lib/types/react/src/components/Radio/Radio.args.d.ts +8 -0
  83. package/lib/types/react/src/components/Radio/Radio.d.ts +5 -3
  84. package/lib/types/react/src/components/Radio/Radio.props.d.ts +4 -14
  85. package/lib/types/react/src/components/Radio/index.d.ts +1 -0
  86. package/lib/types/react/src/components/TextInput/TextInput.args.d.ts +10 -0
  87. package/lib/types/react/src/components/TextInput/TextInput.d.ts +6 -0
  88. package/lib/types/react/src/components/TextInput/TextInput.props.d.ts +17 -0
  89. package/lib/types/react/src/components/TextInput/index.d.ts +2 -0
  90. package/lib/types/react/src/components/Textarea/Textarea.args.d.ts +10 -0
  91. package/lib/types/react/src/components/Textarea/Textarea.d.ts +5 -3
  92. package/lib/types/react/src/components/Textarea/Textarea.props.d.ts +17 -39
  93. package/lib/types/react/src/components/Textarea/index.d.ts +2 -0
  94. package/lib/types/react/src/components/Toggle/Toggle.args.d.ts +12 -0
  95. package/lib/types/react/src/components/Toggle/Toggle.d.ts +5 -0
  96. package/lib/types/react/src/components/Toggle/Toggle.props.d.ts +22 -0
  97. package/lib/types/react/src/components/Toggle/index.d.ts +3 -0
  98. package/lib/types/react/src/components/Tooltip/Tooltip.props.d.ts +4 -0
  99. package/lib/types/react/src/components/index.d.ts +1 -5
  100. package/lib/types/react/src/hooks/usePrevious.d.ts +2 -0
  101. package/lib/types/react/src/types/index.d.ts +57 -1
  102. package/package.json +20 -19
  103. package/src/components/Checkbox/Checkbox.args.ts +31 -9
  104. package/src/components/Checkbox/Checkbox.props.ts +5 -13
  105. package/src/components/Checkbox/Checkbox.tsx +78 -76
  106. package/src/components/Checkbox/index.ts +1 -0
  107. package/src/components/DatePicker/DatePicker.args.ts +6 -32
  108. package/src/components/DatePicker/DatePicker.props.ts +11 -51
  109. package/src/components/DatePicker/DatePicker.tsx +71 -110
  110. package/src/components/Dropdown/Dropdown.args.ts +42 -192
  111. package/src/components/Dropdown/Dropdown.props.ts +18 -49
  112. package/src/components/Dropdown/Dropdown.tsx +73 -62
  113. package/src/components/Fieldset/Fieldset.props.ts +14 -23
  114. package/src/components/Fieldset/Fieldset.tsx +75 -69
  115. package/src/components/FileUpload/FileUpload.args.ts +25 -27
  116. package/src/components/FileUpload/FileUpload.props.ts +8 -53
  117. package/src/components/FileUpload/FileUpload.tsx +103 -72
  118. package/src/components/Form/Form.args.ts +2 -184
  119. package/src/components/Form/Form.props.ts +4 -133
  120. package/src/components/Form/Form.tsx +17 -77
  121. package/src/components/Form/index.ts +1 -0
  122. package/src/components/FormControl/FormControl.props.ts +72 -0
  123. package/src/components/FormControl/FormControl.tsx +169 -0
  124. package/src/components/FormControl/index.ts +2 -0
  125. package/src/components/FormElement/FormElement.props.ts +2 -2
  126. package/src/components/Input/Input.props.ts +2 -2
  127. package/src/components/Navigation/Navigation.args.ts +2 -1
  128. package/src/components/NumberPicker/NumberPicker.args.ts +18 -26
  129. package/src/components/NumberPicker/NumberPicker.props.ts +7 -52
  130. package/src/components/NumberPicker/NumberPicker.tsx +73 -56
  131. package/src/components/Radio/Radio.args.ts +1 -7
  132. package/src/components/Radio/Radio.props.ts +6 -14
  133. package/src/components/Radio/Radio.tsx +90 -52
  134. package/src/components/Radio/index.ts +1 -0
  135. package/src/components/TextInput/TextInput.args.ts +75 -0
  136. package/src/components/TextInput/TextInput.props.ts +20 -0
  137. package/src/components/TextInput/TextInput.tsx +71 -0
  138. package/src/components/TextInput/index.ts +2 -0
  139. package/src/components/Textarea/Textarea.args.ts +19 -37
  140. package/src/components/Textarea/Textarea.props.ts +18 -46
  141. package/src/components/Textarea/Textarea.tsx +44 -59
  142. package/src/components/Textarea/index.ts +2 -0
  143. package/src/components/Toggle/Toggle.args.ts +62 -0
  144. package/src/components/Toggle/Toggle.props.ts +27 -0
  145. package/src/components/Toggle/Toggle.tsx +85 -0
  146. package/src/components/Toggle/index.ts +3 -0
  147. package/src/components/Tooltip/Tooltip.props.ts +5 -0
  148. package/src/components/Tooltip/Tooltip.tsx +2 -0
  149. package/src/components/index.ts +1 -5
  150. package/src/hooks/usePrevious.ts +15 -0
  151. package/src/types/forms.args.ts +288 -0
  152. package/src/types/index.ts +69 -1
  153. package/tsconfig.json +2 -1
  154. package/lib/cjs/components/ChoiceGroup/ChoiceGroup.js +0 -34
  155. package/lib/cjs/components/ChoiceGroup/index.js +0 -19
  156. package/lib/cjs/components/FormGroup/FormGroup.js +0 -58
  157. package/lib/cjs/components/FormGroup/index.js +0 -26
  158. package/lib/esm/components/ChoiceGroup/ChoiceGroup.js +0 -32
  159. package/lib/esm/components/FormGroup/FormGroup.js +0 -56
  160. package/lib/esm/components/FormGroup/index.js +0 -20
  161. package/lib/types/react/src/components/ChoiceGroup/ChoiceGroup.d.ts +0 -4
  162. package/lib/types/react/src/components/ChoiceGroup/ChoiceGroup.props.d.ts +0 -20
  163. package/lib/types/react/src/components/ChoiceGroup/index.d.ts +0 -1
  164. package/lib/types/react/src/components/FormGroup/FormGroup.d.ts +0 -4
  165. package/lib/types/react/src/components/FormGroup/FormGroup.props.d.ts +0 -81
  166. package/lib/types/react/src/components/FormGroup/index.d.ts +0 -1
  167. package/src/components/ChoiceGroup/ChoiceGroup.args.ts +0 -95
  168. package/src/components/ChoiceGroup/ChoiceGroup.props.ts +0 -25
  169. package/src/components/ChoiceGroup/ChoiceGroup.tsx +0 -54
  170. package/src/components/ChoiceGroup/index.ts +0 -1
  171. package/src/components/FormGroup/FormGroup.args.ts +0 -85
  172. package/src/components/FormGroup/FormGroup.props.ts +0 -102
  173. package/src/components/FormGroup/FormGroup.tsx +0 -73
  174. package/src/components/FormGroup/index.ts +0 -1
@@ -0,0 +1,9 @@
1
+ import { FC } from "react";
2
+ import { FormControlProps } from "./FormControl.props";
3
+ export interface FormControlContextProps {
4
+ ariaDescribedBy?: string;
5
+ }
6
+ export declare const FormControlContext: React.Context<FormControlContextProps>;
7
+ export declare const useFormControl: () => FormControlContextProps;
8
+ declare const FormControl: FC<FormControlProps>;
9
+ export default FormControl;
@@ -0,0 +1,55 @@
1
+ import { ReactElement } from "react";
2
+ import { DropdownProps } from "../Dropdown/Dropdown.props";
3
+ import { InputProps } from "../Input/Input.props";
4
+ import { TextareaProps } from "../Textarea";
5
+ import { ToggleProps } from "../Toggle";
6
+ export interface FormControlPublicProps {
7
+ /**
8
+ * Optional className to add to the FormControl wrapper
9
+ */
10
+ className?: string;
11
+ /**
12
+ * Is the input disabled?
13
+ */
14
+ disabled?: boolean;
15
+ /**
16
+ * Does the input have an error?
17
+ */
18
+ error?: boolean;
19
+ /**
20
+ * The message to display in case of an error
21
+ */
22
+ errorMessage?: string;
23
+ /**
24
+ * Helper text to display with the label
25
+ */
26
+ helper?: string;
27
+ /**
28
+ * The FormControl's label
29
+ */
30
+ label: string;
31
+ /**
32
+ * Where to place the label
33
+ */
34
+ labelPlacement?: "top" | "start" | "bottom" | "end";
35
+ /**
36
+ * The size of your label. Defaults to "medium"
37
+ */
38
+ labelSize?: "small" | "medium" | "large";
39
+ /**
40
+ * Inline styles for the input
41
+ */
42
+ style?: React.CSSProperties;
43
+ /**
44
+ * Optional text to render in a tooltip
45
+ */
46
+ tooltip?: string;
47
+ }
48
+ export interface FormControlPrivateProps {
49
+ /**
50
+ * The id of the underlying input element
51
+ */
52
+ fieldId: string;
53
+ children: ReactElement<ToggleProps> | ReactElement<InputProps> | ReactElement<DropdownProps> | ReactElement<TextareaProps>;
54
+ }
55
+ export type FormControlProps = FormControlPublicProps & FormControlPrivateProps;
@@ -0,0 +1,2 @@
1
+ export { default as FormControl } from "./FormControl";
2
+ export type { FormControlProps } from "./FormControl.props";
@@ -1,5 +1,5 @@
1
1
  import { ReactElement } from "react";
2
- import { InputTypes, FieldTypes } from "../../types";
2
+ import { TextInputTypes, FieldTypes } from "../../types";
3
3
  import { DropdownProps } from "../Dropdown/Dropdown.props";
4
4
  import { InputProps } from "../Input/Input.props";
5
5
  import { TextareaProps } from "../Textarea/Textarea.props";
@@ -43,5 +43,5 @@ export interface FormElementProps {
43
43
  /**
44
44
  * The type of field
45
45
  */
46
- type?: InputTypes | FieldTypes;
46
+ type?: TextInputTypes | FieldTypes;
47
47
  }
@@ -1,4 +1,4 @@
1
- import { InputTypes } from "../../types";
1
+ import { TextInputTypes } from "../../types";
2
2
  export interface InputProps {
3
3
  /**
4
4
  * The input's onChange callback.
@@ -47,5 +47,5 @@ export interface InputProps {
47
47
  /**
48
48
  * The input's type.
49
49
  */
50
- type: InputTypes;
50
+ type: TextInputTypes;
51
51
  }
@@ -1,4 +1,6 @@
1
- import { FC } from "react";
1
+ import React from "react";
2
2
  import { NumberPickerProps } from "./NumberPicker.props";
3
- declare const NumberPicker: FC<NumberPickerProps>;
4
- export default NumberPicker;
3
+ declare const LabelledNumberPicker: React.ForwardRefExoticComponent<NumberPickerProps & import("../FormControl/FormControl.props").FormControlPublicProps & {
4
+ inputStyle?: React.CSSProperties | undefined;
5
+ } & React.RefAttributes<HTMLInputElement>>;
6
+ export default LabelledNumberPicker;
@@ -1,46 +1,9 @@
1
- export interface NumberPickerProps {
1
+ import { FormFieldProps } from "../../types";
2
+ import { LabelledFormFieldProps } from "../../types";
3
+ export interface NumberPickerProps extends FormFieldProps<HTMLInputElement> {
2
4
  /**
3
- * The input's onChange callback.
4
- */
5
- callback: (e: React.ChangeEvent<HTMLInputElement>) => any;
6
- /**
7
- * Specify an optional className to be added to your input.
8
- */
9
- className?: string;
10
- /**
11
- * Is the input disabled?
12
- */
13
- disabled?: boolean;
14
- /**
15
- * Does the input have an error?
16
- */
17
- error?: string | false;
18
- /**
19
- * The input's helper text
20
- */
21
- helper: string | false;
22
- /**
23
- * The input's id attribute
24
- */
25
- id?: string;
26
- /**
27
- * Does this input have a label?
28
- */
29
- label: string;
30
- /**
31
- * The input's name attribute
32
- */
33
- name?: Required<string>;
34
- /**
35
- * Specify an optional className to be added to your NumberPicker component.
5
+ * The placeholder text when the input is empty.
36
6
  */
37
7
  placeholder?: string;
38
- /**
39
- * Specify whether this input is required
40
- */
41
- required?: boolean;
42
- /**
43
- * Does this NumberPicker have a tooltip?
44
- */
45
- tooltip?: string;
46
8
  }
9
+ export type LabelledNumberPickerProps = LabelledFormFieldProps<NumberPickerProps>;
@@ -0,0 +1,8 @@
1
+ import { RadioProps } from "./Radio.props";
2
+ /**
3
+ * Sample prop definitions Radio's enumerable properties (imported in stories and test)
4
+ */
5
+ declare const RadioArgs: {
6
+ basic: RadioProps;
7
+ };
8
+ export default RadioArgs;
@@ -1,4 +1,6 @@
1
- import { FC } from "react";
1
+ import React from "react";
2
2
  import { RadioProps } from "./Radio.props";
3
- declare const Radio: FC<RadioProps>;
4
- export default Radio;
3
+ declare const LabelledRadio: React.ForwardRefExoticComponent<RadioProps & import("../FormControl/FormControl.props").FormControlPublicProps & {
4
+ inputStyle?: React.CSSProperties | undefined;
5
+ } & React.RefAttributes<HTMLInputElement>>;
6
+ export default LabelledRadio;
@@ -1,14 +1,4 @@
1
- export interface RadioProps {
2
- callback?: (e: React.ChangeEvent<HTMLInputElement>) => any;
3
- className?: string;
4
- disabled?: boolean;
5
- error?: string;
6
- helper?: string;
7
- id?: string;
8
- label?: string;
9
- name: string;
10
- required?: boolean;
11
- tooltip?: string;
12
- value: string;
13
- selected?: string;
14
- }
1
+ import { ChoiceFieldProps } from "../../types";
2
+ import { LabelledFormFieldProps } from "../../types";
3
+ export type RadioProps = ChoiceFieldProps<HTMLInputElement>;
4
+ export type LabelledRadioProps = LabelledFormFieldProps<RadioProps>;
@@ -1 +1,2 @@
1
1
  export { default as Radio } from "./Radio";
2
+ export { default as RadioArgs } from "./Radio.args";
@@ -0,0 +1,10 @@
1
+ import { LabelledTextInputProps } from "./TextInput.props";
2
+ export declare const basic: LabelledTextInputProps;
3
+ export declare const isdisabled: LabelledTextInputProps;
4
+ export declare const hashelper: LabelledTextInputProps;
5
+ export declare const haserror: LabelledTextInputProps;
6
+ export declare const hastooltip: LabelledTextInputProps;
7
+ export declare const email: LabelledTextInputProps;
8
+ export declare const password: LabelledTextInputProps;
9
+ export declare const telephone: LabelledTextInputProps;
10
+ export declare const url: LabelledTextInputProps;
@@ -0,0 +1,6 @@
1
+ import React from "react";
2
+ import { TextInputProps } from "./TextInput.props";
3
+ declare const LabelledTextInput: React.ForwardRefExoticComponent<TextInputProps & import("../FormControl/FormControl.props").FormControlPublicProps & {
4
+ inputStyle?: React.CSSProperties | undefined;
5
+ } & React.RefAttributes<HTMLInputElement>>;
6
+ export default LabelledTextInput;
@@ -0,0 +1,17 @@
1
+ import { FormFieldProps, TextInputTypes } from "../../types";
2
+ import { LabelledFormFieldProps } from "../../types";
3
+ export interface TextInputProps extends FormFieldProps<HTMLInputElement> {
4
+ /**
5
+ * Optional pattern attribute for phone numbers, zip codes, etc.
6
+ */
7
+ pattern?: string;
8
+ /**
9
+ * Specify an optional className to be added to your Input component.
10
+ */
11
+ placeholder?: string;
12
+ /**
13
+ * The input's type.
14
+ */
15
+ type: TextInputTypes;
16
+ }
17
+ export type LabelledTextInputProps = LabelledFormFieldProps<TextInputProps>;
@@ -0,0 +1,2 @@
1
+ export { default as TextInput } from "./TextInput";
2
+ export * as TextInputArgs from "./TextInput.args";
@@ -0,0 +1,10 @@
1
+ import { LabelledTextareaProps, TextareaProps } from "./Textarea.props";
2
+ export declare const basic: LabelledTextareaProps;
3
+ export declare const haserror: TextareaProps;
4
+ export declare const disabled: TextareaProps;
5
+ declare const _default: {
6
+ basic: LabelledTextareaProps;
7
+ haserror: TextareaProps;
8
+ disabled: TextareaProps;
9
+ };
10
+ export default _default;
@@ -1,4 +1,6 @@
1
- import { FC } from "react";
1
+ import React from "react";
2
2
  import { TextareaProps } from "./Textarea.props";
3
- declare const Textarea: FC<TextareaProps>;
4
- export default Textarea;
3
+ declare const LabelledTextarea: React.ForwardRefExoticComponent<TextareaProps & import("../FormControl/FormControl.props").FormControlPublicProps & {
4
+ inputStyle?: React.CSSProperties | undefined;
5
+ } & React.RefAttributes<HTMLTextAreaElement>>;
6
+ export default LabelledTextarea;
@@ -1,32 +1,18 @@
1
- export interface TextareaProps {
1
+ import { FormFieldProps } from "../../types";
2
+ import { LabelledFormFieldProps } from "../../types";
3
+ export interface TextareaProps extends FormFieldProps<HTMLTextAreaElement> {
2
4
  /**
3
5
  * The Textarea's onChange callback.
4
6
  */
5
- callback?: (e: React.ChangeEvent<HTMLTextAreaElement>) => any;
7
+ onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => any;
6
8
  /**
7
- * Specify an optional className to be added to your Textarea.
8
- */
9
- className?: string;
10
- /**
11
- * Is the Textarea disabled?
12
- */
13
- disabled?: boolean;
14
- /**
15
- * Does the Textarea have an error?
16
- */
17
- error?: string;
18
- /**
19
- * The Textarea's helper text
20
- */
21
- helper?: string;
22
- /**
23
- * The Textarea's id attribute
24
- */
25
- id?: string;
9
+ * Activate automatic spelling correction and processing of text substitutions
10
+ **/
11
+ autocorrect?: "on" | "off";
26
12
  /**
27
- * Does this Textarea have a label?
28
- */
29
- label: string;
13
+ * The id of the form element the Textarea belongs to if it's not nested inside the form.
14
+ **/
15
+ form?: string;
30
16
  /**
31
17
  * The Textarea's maxlength
32
18
  */
@@ -35,25 +21,17 @@ export interface TextareaProps {
35
21
  * The Textarea's minlength
36
22
  */
37
23
  minlength?: number;
38
- /**
39
- * The Textarea's name attribute
40
- */
41
- name?: Required<string>;
42
24
  /**
43
25
  * Specify an optional className to be added to your Textarea component.
44
26
  */
45
27
  placeholder?: string;
46
28
  /**
47
- * Specify whether this Textarea is required
48
- */
49
- required?: boolean;
50
- /**
51
- * Specify whether this Textarea employs browser-based spellcheck
52
- */
53
- spellcheck?: boolean;
29
+ * Specifies whether the textarea is subject to spellchecking by the underlying browser/OS
30
+ **/
31
+ spellcheck?: boolean | "default";
54
32
  /**
55
- * Does this Textarea have a tooltip?
56
- */
57
- tooltip?: string;
58
- type?: never;
33
+ * How the control should wrap the value for submission.
34
+ **/
35
+ wrap?: "hard" | "soft" | "off";
59
36
  }
37
+ export type LabelledTextareaProps = LabelledFormFieldProps<TextareaProps>;
@@ -1 +1,3 @@
1
1
  export { default as Textarea } from "./Textarea";
2
+ export type { TextareaProps } from "./Textarea.props";
3
+ export { default as TextareaArgs } from "./Textarea.args";
@@ -0,0 +1,12 @@
1
+ import { LabelledToggleProps } from "./Toggle.props";
2
+ export declare const Default: LabelledToggleProps;
3
+ export declare const Checked: LabelledToggleProps;
4
+ export declare const Disabled: LabelledToggleProps;
5
+ export declare const Helper: LabelledToggleProps;
6
+ export declare const Tooltip: LabelledToggleProps;
7
+ export declare const Error: LabelledToggleProps;
8
+ export declare const DefaultChecked: LabelledToggleProps;
9
+ export declare const Controlled: LabelledToggleProps;
10
+ export declare const Large: LabelledToggleProps;
11
+ export declare const Medium: LabelledToggleProps;
12
+ export declare const Small: LabelledToggleProps;
@@ -0,0 +1,5 @@
1
+ import { ToggleProps } from "./Toggle.props";
2
+ declare const LabelledToggle: import("react").ForwardRefExoticComponent<ToggleProps & import("../FormControl/FormControl.props").FormControlPublicProps & {
3
+ inputStyle?: import("react").CSSProperties | undefined;
4
+ } & import("react").RefAttributes<HTMLInputElement>>;
5
+ export default LabelledToggle;
@@ -0,0 +1,22 @@
1
+ import { FormFieldProps } from "../../types";
2
+ import { LabelledFormFieldProps } from "../../types";
3
+ export interface ToggleProps extends FormFieldProps<HTMLInputElement> {
4
+ /**
5
+ * Specify the size of your Toggle. Defaults to "medium".
6
+ */
7
+ size?: "large" | "medium" | "small";
8
+ /**
9
+ * Specify whether your Toggle is checked by default. Defaults to false.
10
+ *
11
+ */
12
+ defaultChecked?: boolean;
13
+ /**
14
+ * Specify whether your Toggle is checked. Defaults to undefined.
15
+ */
16
+ checked?: boolean;
17
+ /**
18
+ * OnClick handler for the input element.
19
+ */
20
+ onClick?: (event: React.MouseEvent<HTMLInputElement>) => any;
21
+ }
22
+ export type LabelledToggleProps = LabelledFormFieldProps<ToggleProps>;
@@ -0,0 +1,3 @@
1
+ export { default as Toggle } from "./Toggle";
2
+ export type { ToggleProps } from "./Toggle.props";
3
+ export * as ToggleArgs from "./Toggle.args";
@@ -8,6 +8,10 @@ export interface TooltipProps {
8
8
  * Should the tooltip appear on hover of an info icon?
9
9
  */
10
10
  icon?: boolean;
11
+ /**
12
+ * Set the id of the tooltip
13
+ */
14
+ id?: string;
11
15
  /**
12
16
  * Set the label for the tooltip
13
17
  */
@@ -1,7 +1,7 @@
1
1
  export { Accordion, AccordionButton, AccordionItem, AccordionPanel, } from "./Accordion";
2
+ export { Form } from "./Form";
2
3
  export { Collapse } from "./Collapse";
3
4
  export { Empty } from "./Empty";
4
- export { FormGroup } from "./FormGroup";
5
5
  export { Image } from "./Image";
6
6
  export { Loading } from "./Loading";
7
7
  export { Radio } from "./Radio";
@@ -10,7 +10,6 @@ export { Button } from "./Button";
10
10
  export { ContextMenu } from "./ContextMenu";
11
11
  export { Fieldset } from "./Fieldset";
12
12
  export { GlobalProvider } from "./GlobalProvider";
13
- export { Input } from "./Input";
14
13
  export { Notification } from "./Notification";
15
14
  export { ReadMore } from "./ReadMore";
16
15
  export { Textarea } from "./Textarea";
@@ -24,15 +23,12 @@ export { RichText } from "./RichText";
24
23
  export { Tooltip } from "./Tooltip";
25
24
  export { Checkbox } from "./Checkbox";
26
25
  export { DatePicker } from "./DatePicker";
27
- export { Form } from "./Form";
28
26
  export { Hero } from "./Hero";
29
27
  export { LinkList } from "./LinkList";
30
28
  export { Pagination } from "./Pagination";
31
29
  export { SearchField } from "./SearchField";
32
30
  export { Video } from "./Video";
33
- export { ChoiceGroup } from "./ChoiceGroup";
34
31
  export { Dropdown } from "./Dropdown";
35
- export { FormElement } from "./FormElement";
36
32
  export { Icon } from "./Icon";
37
33
  export { List } from "./List";
38
34
  export { Profile } from "./Profile";
@@ -0,0 +1,2 @@
1
+ export declare function usePrevious<T>(value: T): T | undefined;
2
+ export default usePrevious;
@@ -1,3 +1,4 @@
1
+ import { FormControlPublicProps } from "../components/FormControl/FormControl.props";
1
2
  export type ThemeTypes = "light" | "dark";
2
3
  export type ButtonFunctions = "button" | "submit" | "reset";
3
4
  export type ButtonTypes = "primary" | "secondary" | "tertiary" | "alert";
@@ -6,7 +7,7 @@ export type ChoiceGroupFieldTypes = "checkbox" | "radio";
6
7
  export type FieldTypes = "checkbox" | "date" | "dropdown" | "formgroup" | "input" | "number" | "radio" | "textarea" | "toggle" | "file";
7
8
  export type FormGroupTypes = "default" | "filter";
8
9
  export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
9
- export type InputTypes = "email" | "hidden" | "password" | "search" | "tel" | "text" | "url";
10
+ export type TextInputTypes = "email" | "hidden" | "password" | "search" | "tel" | "text" | "url";
10
11
  export type Language = "en" | "fr" | "es";
11
12
  export type LabelTypes = "default" | "actionable" | "light";
12
13
  export type LinkTypes = "light" | "dark" | "footer" | "button";
@@ -29,3 +30,58 @@ export type CardSize = "wide" | "standard" | "narrow";
29
30
  export type CardCornerType = "cornercut" | "corner";
30
31
  export type CardAlignment = "left" | "right";
31
32
  export type CardTypes = "stat" | "multilink" | "graphic" | "graphicpromo" | "feature" | "detail" | "factlist" | "data";
33
+ export interface FormFieldProps<T> {
34
+ /**
35
+ * The input's onChange callback.
36
+ */
37
+ onChange?: (e: React.ChangeEvent<T>) => any;
38
+ /**
39
+ * The input's onBlur callback.
40
+ */
41
+ onBlur?: (e: React.FocusEvent<T>) => any;
42
+ /**
43
+ * Specify an optional className to be added to your input.
44
+ */
45
+ className?: string;
46
+ /**
47
+ * Is the input disabled?
48
+ */
49
+ disabled?: boolean;
50
+ /**
51
+ * Does the input have an error?
52
+ */
53
+ error?: boolean;
54
+ /**
55
+ * The input's id attribute. Will otherwise be set to the same value as `name`.
56
+ */
57
+ id?: string;
58
+ /**
59
+ * The input's name attribute.
60
+ */
61
+ name: string;
62
+ /**
63
+ * Specify whether this input is required
64
+ */
65
+ required?: boolean;
66
+ /**
67
+ * Inline styles applies to the outermost container
68
+ */
69
+ style?: React.CSSProperties;
70
+ }
71
+ export interface ChoiceFieldProps<T> extends FormFieldProps<T> {
72
+ /**
73
+ * Whether the input should be checked by default
74
+ **/
75
+ defaultChecked?: boolean;
76
+ /**
77
+ * Whether the input is checked
78
+ */
79
+ checked?: boolean;
80
+ /**
81
+ * The input's value attribute.
82
+ */
83
+ value?: string;
84
+ }
85
+ export type LabelledFormFieldProps<T> = T & FormControlPublicProps & {
86
+ inputStyle?: React.CSSProperties;
87
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ilo-org/react",
3
- "version": "0.7.8",
3
+ "version": "0.8.1",
4
4
  "description": "React components for the ILO's Design System",
5
5
  "keywords": [
6
6
  "ui_patterns",
@@ -70,34 +70,35 @@
70
70
  "dependencies": {
71
71
  "classnames": "^2.3.1",
72
72
  "dom-helpers": "^5.2.1",
73
+ "nanoid": "^3.3.6",
73
74
  "react-player": "2.10.1",
74
75
  "react-transition-group": "^4.4.1",
75
76
  "@ilo-org/brand-assets": "0.1.0",
76
77
  "@ilo-org/fonts": "0.1.0",
77
78
  "@ilo-org/icons-react": "0.0.21",
78
- "@ilo-org/styles": "0.8.4",
79
- "@ilo-org/themes": "0.2.0",
79
+ "@ilo-org/styles": "0.9.1",
80
+ "@ilo-org/themes": "0.3.0",
80
81
  "@ilo-org/utils": "0.0.11"
81
82
  },
82
83
  "devDependencies": {
83
84
  "@rollup/plugin-commonjs": "^23.0.2",
84
85
  "@rollup/plugin-json": "^5.0.1",
85
86
  "@rollup/plugin-node-resolve": "^15.0.1",
86
- "@storybook/addon-a11y": "^7.0.18",
87
- "@storybook/addon-actions": "^7.0.18",
88
- "@storybook/addon-docs": "^7.0.18",
89
- "@storybook/addon-essentials": "^7.0.18",
90
- "@storybook/addon-links": "^7.0.18",
91
- "@storybook/addon-styling": "^1.0.8",
92
- "@storybook/blocks": "^7.0.18",
93
- "@storybook/builder-vite": "^7.0.18",
94
- "@storybook/client-api": "^7.0.18",
95
- "@storybook/manager-api": "^7.0.18",
96
- "@storybook/node-logger": "^7.0.18",
87
+ "@storybook/addon-a11y": "7.5.0-alpha.1",
88
+ "@storybook/addon-actions": "7.5.0-alpha.1",
89
+ "@storybook/addon-docs": "7.5.0-alpha.1",
90
+ "@storybook/addon-essentials": "7.5.0-alpha.1",
91
+ "@storybook/addon-links": "7.5.0-alpha.1",
92
+ "@storybook/addon-styling": "^1.3.7",
93
+ "@storybook/blocks": "7.5.0-alpha.1",
94
+ "@storybook/builder-vite": "7.5.0-alpha.1",
95
+ "@storybook/client-api": "7.5.0-alpha.1",
96
+ "@storybook/manager-api": "7.5.0-alpha.1",
97
+ "@storybook/node-logger": "7.5.0-alpha.1",
97
98
  "@storybook/preset-scss": "^1.0.3",
98
- "@storybook/react": "^7.0.18",
99
- "@storybook/react-vite": "^7.0.18",
100
- "@storybook/theming": "^7.0.18",
99
+ "@storybook/react": "7.5.0-alpha.1",
100
+ "@storybook/react-vite": "7.5.0-alpha.1",
101
+ "@storybook/theming": "7.5.0-alpha.1",
101
102
  "@testing-library/jest-dom": "5.16.5",
102
103
  "@testing-library/react": "^12.1.2",
103
104
  "@testing-library/user-event": "^13.5.0",
@@ -123,10 +124,10 @@
123
124
  "rollup-plugin-peer-deps-external": "^2.2.4",
124
125
  "rollup-plugin-typescript2": "^0.34.1",
125
126
  "screenfull": "^5.2.0",
126
- "storybook": "^7.0.18",
127
+ "storybook": "7.5.0-alpha.1",
127
128
  "storybook-addon-performance": "^0.17.1",
128
129
  "ts-dedent": "^2.2.0",
129
- "ts-jest": "^27.1.3",
130
+ "ts-jest": "^29.1.1",
130
131
  "tslib": "^2.3.1",
131
132
  "vite": "^4.3.9",
132
133
  "@ilo-org/eslint-config": "0.1.0",
@@ -1,20 +1,42 @@
1
- import { CheckboxProps } from "./Checkbox.props";
2
-
3
- const basic: CheckboxProps = {
4
- callback: () => {},
5
- disabled: false,
6
- error: false,
7
- grouped: false,
8
- label: "Checkbox Label",
1
+ import { LabelledCheckboxProps } from "./Checkbox.props";
2
+
3
+ const NUMBER_CHECKBOXES = 3;
4
+
5
+ const basic: LabelledCheckboxProps = {
6
+ label: "Checkbox",
7
+ className: "checkbox",
9
8
  name: "checkbox",
10
- required: false,
11
9
  };
12
10
 
11
+ const basicCheckBoxes = Array(NUMBER_CHECKBOXES).map((_, i) => ({
12
+ ...basic,
13
+ id: `checkbox-${i}`,
14
+ }));
15
+
16
+ const checked: LabelledCheckboxProps = {
17
+ ...basic,
18
+ defaultChecked: true,
19
+ };
20
+
21
+ const error: LabelledCheckboxProps = {
22
+ ...basic,
23
+ error: true,
24
+ };
25
+
26
+ const errorCheckBoxes = Array(NUMBER_CHECKBOXES).map((_, i) => ({
27
+ ...error,
28
+ id: `checkbox-${i}`,
29
+ }));
30
+
13
31
  /**
14
32
  * Sample prop definitions Checkbox's enumerable properties (imported in stories and test)
15
33
  */
16
34
  const CheckboxArgs = {
17
35
  basic,
36
+ basicCheckBoxes,
37
+ errorCheckBoxes,
38
+ checked,
39
+ error,
18
40
  };
19
41
 
20
42
  export default CheckboxArgs;