@utilitywarehouse/hearth-react-native 0.15.3 → 0.16.0
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.
- package/.turbo/turbo-build.log +1 -1
- package/.turbo/turbo-lint.log +1 -3
- package/CHANGELOG.md +67 -6
- package/build/components/Checkbox/CheckboxGroup.d.ts +1 -1
- package/build/components/Checkbox/CheckboxGroup.js +2 -2
- package/build/components/Checkbox/CheckboxGroup.props.d.ts +2 -1
- package/build/components/CurrencyInput/CurrencyInput.d.ts +1 -1
- package/build/components/CurrencyInput/CurrencyInput.js +2 -6
- package/build/components/CurrencyInput/CurrencyInput.props.d.ts +6 -0
- package/build/components/DateInput/DateInputSegment.js +0 -1
- package/build/components/DatePickerInput/DatePickerInput.d.ts +1 -1
- package/build/components/DatePickerInput/DatePickerInput.js +2 -2
- package/build/components/DatePickerInput/DatePickerInput.props.d.ts +6 -0
- package/build/components/FormField/FormField.context.d.ts +8 -2
- package/build/components/FormField/FormField.d.ts +1 -1
- package/build/components/FormField/FormField.js +24 -4
- package/build/components/FormField/FormField.props.d.ts +2 -0
- package/build/components/FormField/FormFieldLabel.d.ts +1 -1
- package/build/components/FormField/FormFieldLabel.js +3 -3
- package/build/components/FormField/FormFieldValid.js +2 -2
- package/build/components/Input/Input.js +48 -10
- package/build/components/Input/Input.props.d.ts +7 -1
- package/build/components/Label/Label.d.ts +1 -1
- package/build/components/Label/Label.js +5 -1
- package/build/components/Label/Label.props.d.ts +3 -2
- package/build/components/Radio/RadioGroup.d.ts +1 -1
- package/build/components/Radio/RadioGroup.js +2 -2
- package/build/components/Radio/RadioGroup.props.d.ts +1 -0
- package/build/components/RadioCard/RadioCard.d.ts +1 -1
- package/build/components/RadioCard/RadioCard.js +2 -2
- package/build/components/RadioCard/RadioCard.props.d.ts +1 -0
- package/build/components/Select/Select.d.ts +1 -1
- package/build/components/Select/Select.js +2 -2
- package/build/components/Select/Select.props.d.ts +10 -0
- package/build/components/Textarea/Textarea.d.ts +1 -1
- package/build/components/Textarea/Textarea.js +43 -6
- package/build/components/Textarea/Textarea.props.d.ts +8 -0
- package/build/components/VerificationInput/VerificationInput.d.ts +1 -1
- package/build/components/VerificationInput/VerificationInput.js +2 -2
- package/build/components/VerificationInput/VerificationInput.props.d.ts +4 -0
- package/docs/components/AllComponents.web.tsx +3 -2
- package/docs/theme-tokens.mdx +390 -2
- package/package.json +3 -3
- package/src/components/Checkbox/Checkbox.docs.mdx +32 -31
- package/src/components/Checkbox/CheckboxGroup.props.ts +2 -1
- package/src/components/Checkbox/CheckboxGroup.tsx +6 -1
- package/src/components/CurrencyInput/CurrencyInput.docs.mdx +52 -9
- package/src/components/CurrencyInput/CurrencyInput.props.ts +6 -0
- package/src/components/CurrencyInput/CurrencyInput.stories.tsx +30 -1
- package/src/components/CurrencyInput/CurrencyInput.tsx +16 -8
- package/src/components/DateInput/DateInputSegment.tsx +0 -1
- package/src/components/DatePickerInput/DatePickerInput.docs.mdx +22 -0
- package/src/components/DatePickerInput/DatePickerInput.props.ts +6 -0
- package/src/components/DatePickerInput/DatePickerInput.tsx +17 -3
- package/src/components/FormField/FormField.context.ts +6 -1
- package/src/components/FormField/FormField.docs.mdx +30 -30
- package/src/components/FormField/FormField.props.ts +2 -0
- package/src/components/FormField/FormField.stories.tsx +8 -2
- package/src/components/FormField/FormField.tsx +38 -4
- package/src/components/FormField/FormFieldLabel.tsx +7 -3
- package/src/components/FormField/FormFieldValid.tsx +2 -2
- package/src/components/Input/Input.docs.mdx +67 -22
- package/src/components/Input/Input.props.ts +7 -1
- package/src/components/Input/Input.stories.tsx +9 -1
- package/src/components/Input/Input.tsx +124 -59
- package/src/components/Label/Label.props.ts +3 -2
- package/src/components/Label/Label.tsx +11 -1
- package/src/components/Radio/Radio.docs.mdx +31 -30
- package/src/components/Radio/RadioGroup.props.ts +1 -0
- package/src/components/Radio/RadioGroup.stories.tsx +6 -0
- package/src/components/Radio/RadioGroup.tsx +6 -1
- package/src/components/RadioCard/RadioCard.docs.mdx +31 -30
- package/src/components/RadioCard/RadioCard.props.ts +1 -0
- package/src/components/RadioCard/RadioCard.tsx +8 -2
- package/src/components/Select/Select.props.ts +10 -0
- package/src/components/Select/Select.tsx +3 -2
- package/src/components/Textarea/Textarea.docs.mdx +65 -17
- package/src/components/Textarea/Textarea.props.ts +8 -0
- package/src/components/Textarea/Textarea.stories.tsx +23 -2
- package/src/components/Textarea/Textarea.tsx +84 -19
- package/src/components/VerificationInput/VerificationInput.docs.mdx +1 -0
- package/src/components/VerificationInput/VerificationInput.props.ts +4 -1
- package/src/components/VerificationInput/VerificationInput.tsx +2 -0
|
@@ -76,22 +76,22 @@ const MyComponent = () => {
|
|
|
76
76
|
|
|
77
77
|
## Props
|
|
78
78
|
|
|
79
|
-
| Property | Type | Default
|
|
80
|
-
| -------------------- | ----------------------------------- |
|
|
81
|
-
| `value` | `string` | -
|
|
82
|
-
| `onChange` | `(value: boolean) => void` | -
|
|
83
|
-
| `defaultchecked` | `bool` | `false`
|
|
84
|
-
| `checked` | `bool` | `false`
|
|
85
|
-
| `validationStatus` | `'valid' \| 'invalid' \| 'initial'` | -
|
|
86
|
-
| `disabled` | `bool` | `false`
|
|
87
|
-
| `label` | `string` | -
|
|
88
|
-
| `helperText` | `string` | -
|
|
89
|
-
| `helperIcon` | `React.ComponentType` | -
|
|
90
|
-
| `invalidText` | `string` | -
|
|
91
|
-
| `validText` | `string` | -
|
|
92
|
-
| `showValidationIcon` | `boolean` | `true`
|
|
93
|
-
| `type` | `'default' \| 'tile'` | `default` | The type of the checkbox. |
|
|
94
|
-
| `image` | `ReactNode` | -
|
|
79
|
+
| Property | Type | Default | Description |
|
|
80
|
+
| -------------------- | ----------------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------- |
|
|
81
|
+
| `value` | `string` | - | The value to be used in the checkbox input. This is the value that will be returned on form submission. |
|
|
82
|
+
| `onChange` | `(value: boolean) => void` | - | Function called when the state of the checkbox changes. |
|
|
83
|
+
| `defaultchecked` | `bool` | `false` | If true, the checkbox will be initially checked. |
|
|
84
|
+
| `checked` | `bool` | `false` | When true, the checkbox will be checked. You'll need to pass onChange update it's value (since it's now controlled). |
|
|
85
|
+
| `validationStatus` | `'valid' \| 'invalid' \| 'initial'` | - | The validation status of the checkbox. |
|
|
86
|
+
| `disabled` | `bool` | `false` | To manually set disable to the checkbox. |
|
|
87
|
+
| `label` | `string` | - | The label to be displayed next to the checkbox. |
|
|
88
|
+
| `helperText` | `string` | - | The helper text to be displayed below the checkbox. |
|
|
89
|
+
| `helperIcon` | `React.ComponentType` | - | The icon to be displayed next to the helper text. |
|
|
90
|
+
| `invalidText` | `string` | - | The invalid text to be displayed below the checkbox. |
|
|
91
|
+
| `validText` | `string` | - | The valid text to be displayed below the checkbox. |
|
|
92
|
+
| `showValidationIcon` | `boolean` | `true` | Whether to show the validation icon. |
|
|
93
|
+
| `type` | `'default' \| 'tile'` | `'default'` | The type of the checkbox. |
|
|
94
|
+
| `image` | `ReactNode` | - | The image to be displayed next to the label. |
|
|
95
95
|
|
|
96
96
|
## Components
|
|
97
97
|
|
|
@@ -123,21 +123,22 @@ The `CheckboxLabel` component is used to create the label for the checkbox input
|
|
|
123
123
|
|
|
124
124
|
The `CheckboxGroup` component is used to group multiple checkbox inputs together. It inherits all the properties of React Native's `View` component.
|
|
125
125
|
|
|
126
|
-
| Property | Type | Default
|
|
127
|
-
| -------------------- | ----------------------------------- |
|
|
128
|
-
| `value` | string | -
|
|
129
|
-
| `onChange` | function | -
|
|
130
|
-
| `disabled` | bool | -
|
|
131
|
-
| `validationStatus` | `'valid' \| 'invalid' \| 'initial'` | -
|
|
132
|
-
| `label` | `string` | -
|
|
133
|
-
| `
|
|
134
|
-
| `
|
|
135
|
-
| `
|
|
136
|
-
| `
|
|
137
|
-
| `
|
|
138
|
-
| `
|
|
139
|
-
| `
|
|
140
|
-
| `
|
|
126
|
+
| Property | Type | Default | Description |
|
|
127
|
+
| -------------------- | ----------------------------------- | ----------- | ---------------------------------------------------------------------- |
|
|
128
|
+
| `value` | string | - | The value of the checkbox group. |
|
|
129
|
+
| `onChange` | function | - | The callback fired when any children Checkbox is checked or unchecked. |
|
|
130
|
+
| `disabled` | bool | - | To manually set disable to the checkbox group. |
|
|
131
|
+
| `validationStatus` | `'valid' \| 'invalid' \| 'initial'` | - | The validation status of the checkbox group. |
|
|
132
|
+
| `label` | `string` | - | The label to be displayed above the checkbox group. |
|
|
133
|
+
| `labelVariant` | `'heading' \| 'body'` | `'body'` | The variant of the label text. |
|
|
134
|
+
| `helperText` | `string` | - | The helper text to be displayed below the checkbox group. |
|
|
135
|
+
| `helperIcon` | `React.ComponentType` | - | The icon to be displayed next to the helper text. |
|
|
136
|
+
| `invalidText` | `string` | - | The invalid text to be displayed below the checkbox group. |
|
|
137
|
+
| `validText` | `string` | - | The valid text to be displayed below the checkbox group. |
|
|
138
|
+
| `showValidationIcon` | `boolean` | `true` | Whether to show the validation icon. |
|
|
139
|
+
| `type` | `'default' \| 'tile'` | `'default'` | The type of the checkbox group. |
|
|
140
|
+
| `direction` | `'row' \| 'column'` | `'column'` | The direction of the checkbox group. |
|
|
141
|
+
| `gap` | `string` | - | The gap between the checkbox group items. |
|
|
141
142
|
|
|
142
143
|
<UsageWrap>
|
|
143
144
|
<Center>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ComponentType } from 'react';
|
|
2
|
-
import { space } from '../../tokens';
|
|
3
2
|
import { ViewProps } from 'react-native';
|
|
3
|
+
import { space } from '../../tokens';
|
|
4
4
|
|
|
5
5
|
interface CheckboxGroupProps extends ViewProps {
|
|
6
6
|
disabled?: boolean;
|
|
@@ -9,6 +9,7 @@ interface CheckboxGroupProps extends ViewProps {
|
|
|
9
9
|
readonly?: boolean;
|
|
10
10
|
validationStatus?: 'valid' | 'invalid' | 'initial';
|
|
11
11
|
label?: string;
|
|
12
|
+
labelVariant?: 'heading' | 'body';
|
|
12
13
|
helperText?: string;
|
|
13
14
|
showValidationIcon?: boolean;
|
|
14
15
|
invalidText?: string;
|
|
@@ -14,6 +14,7 @@ const CheckboxGroup = ({
|
|
|
14
14
|
readonly,
|
|
15
15
|
validationStatus,
|
|
16
16
|
label,
|
|
17
|
+
labelVariant = 'body',
|
|
17
18
|
helperText,
|
|
18
19
|
invalidText,
|
|
19
20
|
validText,
|
|
@@ -50,7 +51,11 @@ const CheckboxGroup = ({
|
|
|
50
51
|
>
|
|
51
52
|
{showHeader && (
|
|
52
53
|
<CheckboxGroupTextContent>
|
|
53
|
-
{!!label &&
|
|
54
|
+
{!!label && (
|
|
55
|
+
<Label disabled={disabled} variant={labelVariant}>
|
|
56
|
+
{label}
|
|
57
|
+
</Label>
|
|
58
|
+
)}
|
|
54
59
|
{!!helperText && <Helper disabled={disabled} icon={helperIcon} text={helperText} />}
|
|
55
60
|
{validationStatus === 'invalid' && !!invalidText && (
|
|
56
61
|
<Helper
|
|
@@ -16,6 +16,7 @@ An input specialised for monetary amounts. It shows a currency symbol prefix and
|
|
|
16
16
|
- [Playground](#playground)
|
|
17
17
|
- [Usage](#usage)
|
|
18
18
|
- [Props](#props)
|
|
19
|
+
- [Examples](#examples)
|
|
19
20
|
- [States](#states)
|
|
20
21
|
- [Formatting](#formatting)
|
|
21
22
|
- [Accessibility](#accessibility)
|
|
@@ -48,20 +49,62 @@ const MyComponent = () => {
|
|
|
48
49
|
|
|
49
50
|
When using `CurrencyInput`, the component inherits React Native TextInput props (except `children`). In addition, it supports:
|
|
50
51
|
|
|
51
|
-
| Prop
|
|
52
|
-
|
|
|
53
|
-
| validationStatus
|
|
54
|
-
|
|
|
55
|
-
|
|
|
56
|
-
|
|
|
57
|
-
|
|
|
58
|
-
|
|
|
59
|
-
|
|
|
52
|
+
| Prop | Type | Default | Description |
|
|
53
|
+
| --------------------- | ------------------------------------------------ | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
54
|
+
| validationStatus | `'initial' \| 'valid' \| 'invalid'` | `'initial'` | Validation styling state |
|
|
55
|
+
| onChangeText | `(e: { nativeEvent: { text: string } }) => void` | - | Callback when the text changes |
|
|
56
|
+
| value | `string` | - | The value of the input |
|
|
57
|
+
| label | `string` | - | The label for the input |
|
|
58
|
+
| labelVariant | `'heading' \| 'body'` | `'body'` | The variant of the label text |
|
|
59
|
+
| helperText | `string` | - | Helper text to display below the input |
|
|
60
|
+
| helperIcon | `ComponentType` | - | Icon to display alongside the helper text |
|
|
61
|
+
| required | `boolean` |
|
|
62
|
+
| disabled | `boolean` | `false` | Disables the input |
|
|
63
|
+
| readonly | `boolean` | `false` | Makes the input read-only |
|
|
64
|
+
| focused | `boolean` | `false` | Forces the focused visual state |
|
|
65
|
+
| inBottomSheet | `boolean` | `false` | Use BottomSheetTextInput when true |
|
|
66
|
+
| placeholder | `string` | `'0.00'` | Placeholder text |
|
|
67
|
+
| disableGroupSeparator | `boolean` | `false` | Disables automatic inserting of thousand separators while the user types _(Formatting only works with controlled components via onTextChange)_ |
|
|
60
68
|
|
|
61
69
|
Note: When used inside `FormField`, `validationStatus` and `disabled` are read from the context unless explicitly overridden.
|
|
62
70
|
|
|
63
71
|
## Examples
|
|
64
72
|
|
|
73
|
+
## With Label and Helper Text
|
|
74
|
+
|
|
75
|
+
The `CurrencyInput` component can display a label and helper text by passing the appropriate props.
|
|
76
|
+
|
|
77
|
+
<UsageWrap>
|
|
78
|
+
<Center>
|
|
79
|
+
<CurrencyInput
|
|
80
|
+
label="Amount"
|
|
81
|
+
helperText="Enter the amount in GBP"
|
|
82
|
+
placeholder="0.00"
|
|
83
|
+
onChange={() => console.log('###')}
|
|
84
|
+
/>
|
|
85
|
+
</Center>
|
|
86
|
+
</UsageWrap>
|
|
87
|
+
|
|
88
|
+
```tsx
|
|
89
|
+
import { CurrencyInput } from '@utilitywarehouse/hearth-react-native';
|
|
90
|
+
|
|
91
|
+
const MyComponent = () => {
|
|
92
|
+
const [value, setValue] = useState('');
|
|
93
|
+
const handleChange = e => {
|
|
94
|
+
setValue(e.target.value);
|
|
95
|
+
};
|
|
96
|
+
return (
|
|
97
|
+
<CurrencyInput
|
|
98
|
+
label="Amount"
|
|
99
|
+
helperText="Enter the amount in GBP"
|
|
100
|
+
placeholder="0.00"
|
|
101
|
+
value={value}
|
|
102
|
+
onChange={handleChange}
|
|
103
|
+
/>
|
|
104
|
+
);
|
|
105
|
+
};
|
|
106
|
+
```
|
|
107
|
+
|
|
65
108
|
### With `FormField`
|
|
66
109
|
|
|
67
110
|
The `CurrencyInput` component can be used with the `FormField` component to create a custom input field.
|
|
@@ -12,6 +12,12 @@ export interface CurrencyInputBaseProps {
|
|
|
12
12
|
required?: boolean;
|
|
13
13
|
/** When not specifically disabled, the numeric value is automatically formatted with thousand separators (e.g. 1234 -> 1,234). */
|
|
14
14
|
disableGroupSeparator?: boolean;
|
|
15
|
+
label?: string;
|
|
16
|
+
labelVariant?: 'heading' | 'body';
|
|
17
|
+
helperText?: string;
|
|
18
|
+
helperIcon?: React.ComponentType;
|
|
19
|
+
validText?: string;
|
|
20
|
+
invalidText?: string;
|
|
15
21
|
}
|
|
16
22
|
|
|
17
23
|
export type CurrencyInputProps = CurrencyInputBaseProps &
|
|
@@ -22,6 +22,35 @@ const meta = {
|
|
|
22
22
|
description: 'The validation status',
|
|
23
23
|
defaultValue: 'initial',
|
|
24
24
|
},
|
|
25
|
+
label: {
|
|
26
|
+
control: 'text',
|
|
27
|
+
description: 'The label for the CurrencyInput',
|
|
28
|
+
defaultValue: 'Currency Input Label',
|
|
29
|
+
},
|
|
30
|
+
helperText: {
|
|
31
|
+
control: 'text',
|
|
32
|
+
description: 'The helper text for the CurrencyInput',
|
|
33
|
+
defaultValue: 'Supporting text',
|
|
34
|
+
},
|
|
35
|
+
labelVariant: {
|
|
36
|
+
control: 'radio',
|
|
37
|
+
options: ['heading', 'body'],
|
|
38
|
+
description: 'The label text variant',
|
|
39
|
+
},
|
|
40
|
+
helperIcon: {
|
|
41
|
+
control: 'object',
|
|
42
|
+
description: 'The helper icon component',
|
|
43
|
+
},
|
|
44
|
+
validText: {
|
|
45
|
+
control: 'text',
|
|
46
|
+
description: 'The valid text for the CurrencyInput',
|
|
47
|
+
defaultValue: 'Valid text',
|
|
48
|
+
},
|
|
49
|
+
invalidText: {
|
|
50
|
+
control: 'text',
|
|
51
|
+
description: 'The invalid text for the CurrencyInput',
|
|
52
|
+
defaultValue: 'Invalid text',
|
|
53
|
+
},
|
|
25
54
|
disabled: {
|
|
26
55
|
control: 'boolean',
|
|
27
56
|
description: 'Disable the input',
|
|
@@ -107,7 +136,7 @@ export const States: Story = {
|
|
|
107
136
|
<CurrencyInput disabled />
|
|
108
137
|
</VariantTitle>
|
|
109
138
|
<VariantTitle title="Readonly">
|
|
110
|
-
<CurrencyInput readonly value="11666"/>
|
|
139
|
+
<CurrencyInput readonly value="11666" />
|
|
111
140
|
</VariantTitle>
|
|
112
141
|
<VariantTitle title="Disable auto format thousands">
|
|
113
142
|
<CurrencyInput disableGroupSeparator value="1234.56" />
|
|
@@ -2,7 +2,6 @@ import { Platform } from 'react-native';
|
|
|
2
2
|
import { StyleSheet } from 'react-native-unistyles';
|
|
3
3
|
import { formatThousands } from '../../utils';
|
|
4
4
|
import { DetailText } from '../DetailText';
|
|
5
|
-
import { useFormFieldContext } from '../FormField';
|
|
6
5
|
import { Input, InputField, InputSlot } from '../Input';
|
|
7
6
|
import type CurrencyInputProps from './CurrencyInput.props';
|
|
8
7
|
|
|
@@ -13,17 +12,19 @@ const CurrencyInput = ({
|
|
|
13
12
|
readonly,
|
|
14
13
|
placeholder,
|
|
15
14
|
inBottomSheet = false,
|
|
16
|
-
required,
|
|
15
|
+
required = true,
|
|
17
16
|
disableGroupSeparator = false,
|
|
18
17
|
value,
|
|
19
18
|
onChangeText,
|
|
19
|
+
label,
|
|
20
|
+
labelVariant = 'body',
|
|
21
|
+
helperText,
|
|
22
|
+
helperIcon,
|
|
23
|
+
validText,
|
|
24
|
+
invalidText,
|
|
20
25
|
ref,
|
|
21
26
|
...rest
|
|
22
27
|
}: CurrencyInputProps) => {
|
|
23
|
-
const formFieldContext = useFormFieldContext();
|
|
24
|
-
const { disabled: formFieldDisabled } = formFieldContext;
|
|
25
|
-
const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
|
|
26
|
-
|
|
27
28
|
const defaultFormat = '0.00';
|
|
28
29
|
const getPlaceholder = placeholder ?? defaultFormat;
|
|
29
30
|
|
|
@@ -41,11 +42,18 @@ const CurrencyInput = ({
|
|
|
41
42
|
|
|
42
43
|
return (
|
|
43
44
|
<Input
|
|
44
|
-
validationStatus={
|
|
45
|
-
disabled={
|
|
45
|
+
validationStatus={validationStatus}
|
|
46
|
+
disabled={disabled}
|
|
46
47
|
readonly={readonly}
|
|
47
48
|
focused={focused}
|
|
49
|
+
required={required}
|
|
48
50
|
style={styles.wrap}
|
|
51
|
+
label={label}
|
|
52
|
+
labelVariant={labelVariant}
|
|
53
|
+
helperText={helperText}
|
|
54
|
+
helperIcon={helperIcon}
|
|
55
|
+
validText={validText}
|
|
56
|
+
invalidText={invalidText}
|
|
49
57
|
>
|
|
50
58
|
<InputSlot>
|
|
51
59
|
<DetailText size="4xl" style={styles.text} accessible={false}>
|
|
@@ -78,6 +78,12 @@ When used inside `FormField`, validation, disabled, and required states are inhe
|
|
|
78
78
|
| `disabled` | `boolean` | `false` | Disables both typing and the calendar trigger button. |
|
|
79
79
|
| `readonly` | `boolean` | `false` | Prevents manual typing while keeping the picker available. |
|
|
80
80
|
| `focused` | `boolean` | `false` | Forces the focused state styling. |
|
|
81
|
+
| `label` | `string` | `-` | The label for the input. When used inside `FormField`, this is inherited from the context. |
|
|
82
|
+
| `labelVariant` | `'heading' \| 'body'` | `'body'` | The variant of the label text. |
|
|
83
|
+
| `helperText` | `string` | `-` | Helper text to display below the input. When used inside `FormField`, this is inherited from the context. |
|
|
84
|
+
| `helperIcon` | `ComponentType` | `-` | Icon to display alongside the helper |
|
|
85
|
+
| `validText` | `string` | `-` | Text to display when validation status is 'valid'. When used inside `FormField`, this is inherited from the context. |
|
|
86
|
+
| `invalidText` | `string` | `-` | Text to display when validation status is 'invalid'. When used inside `FormField`, this is inherited from the context. |
|
|
81
87
|
| `inBottomSheet` | `boolean` | `false` | Uses `BottomSheetTextInput` when rendering inside a bottom sheet. |
|
|
82
88
|
| `format` | `string` | `'DD/MM/YYYY'` | Day.js format string used to render selected dates and parse manual input. Leaving it as `'DD/MM/YYYY'` automatically inserts `/` separators and requests a numeric keypad. |
|
|
83
89
|
| `openButtonLabel` | `string` | `'Open date picker'` | Accessible label read by screen readers for the calendar trigger button. |
|
|
@@ -152,6 +158,22 @@ Selection through the calendar always returns a JavaScript `Date` that is reform
|
|
|
152
158
|
|
|
153
159
|
## Examples
|
|
154
160
|
|
|
161
|
+
## With Label and Helper Text
|
|
162
|
+
|
|
163
|
+
The `DatePickerInput` component can display a label and helper text by passing the appropriate props.
|
|
164
|
+
|
|
165
|
+
<UsageWrap>
|
|
166
|
+
<BottomSheetModalProvider>
|
|
167
|
+
<Center>
|
|
168
|
+
<DatePickerInput label="Travel date" helperText="Choose a departure day" onClear={() => {}} />
|
|
169
|
+
</Center>
|
|
170
|
+
</BottomSheetModalProvider>
|
|
171
|
+
</UsageWrap>
|
|
172
|
+
|
|
173
|
+
```tsx
|
|
174
|
+
<DatePickerInput label="Travel date" helperText="Choose a departure day" onClear={() => {}} />
|
|
175
|
+
```
|
|
176
|
+
|
|
155
177
|
### With `FormField`
|
|
156
178
|
|
|
157
179
|
<UsageWrap>
|
|
@@ -7,6 +7,12 @@ export interface DatePickerInputBaseProps {
|
|
|
7
7
|
validationStatus?: 'initial' | 'valid' | 'invalid';
|
|
8
8
|
readonly?: boolean;
|
|
9
9
|
focused?: boolean;
|
|
10
|
+
label?: string;
|
|
11
|
+
labelVariant?: 'heading' | 'body';
|
|
12
|
+
helperText?: string;
|
|
13
|
+
helperIcon?: React.ComponentType;
|
|
14
|
+
validText?: string;
|
|
15
|
+
invalidText?: string;
|
|
10
16
|
placeholder?: string;
|
|
11
17
|
inBottomSheet?: boolean;
|
|
12
18
|
required?: boolean;
|
|
@@ -36,6 +36,13 @@ const DatePickerInput = ({
|
|
|
36
36
|
format = DEFAULT_FORMAT,
|
|
37
37
|
openButtonLabel = 'Open date picker',
|
|
38
38
|
autoCloseOnSelect = true,
|
|
39
|
+
label,
|
|
40
|
+
labelVariant,
|
|
41
|
+
helperText,
|
|
42
|
+
helperIcon,
|
|
43
|
+
validText,
|
|
44
|
+
invalidText,
|
|
45
|
+
required = true,
|
|
39
46
|
onChange,
|
|
40
47
|
onChangeText,
|
|
41
48
|
onBlur,
|
|
@@ -183,10 +190,17 @@ const DatePickerInput = ({
|
|
|
183
190
|
return (
|
|
184
191
|
<>
|
|
185
192
|
<Input
|
|
186
|
-
validationStatus={
|
|
187
|
-
disabled={
|
|
188
|
-
readonly={
|
|
193
|
+
validationStatus={validationStatus}
|
|
194
|
+
disabled={disabled}
|
|
195
|
+
readonly={readonly}
|
|
189
196
|
focused={focused}
|
|
197
|
+
label={label}
|
|
198
|
+
labelVariant={labelVariant}
|
|
199
|
+
helperText={helperText}
|
|
200
|
+
helperIcon={helperIcon}
|
|
201
|
+
validText={validText}
|
|
202
|
+
invalidText={invalidText}
|
|
203
|
+
required={required}
|
|
190
204
|
style={styles.wrap}
|
|
191
205
|
accessible={false}
|
|
192
206
|
>
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import { createContext, useContext } from 'react';
|
|
2
2
|
import { FormFieldBaseProps } from './FormField.props';
|
|
3
3
|
|
|
4
|
-
export const FormFieldContext = createContext<
|
|
4
|
+
export const FormFieldContext = createContext<
|
|
5
|
+
FormFieldBaseProps & {
|
|
6
|
+
setShouldHandleAccessibility?: (value: boolean) => void;
|
|
7
|
+
shouldHandleAccessibility?: boolean;
|
|
8
|
+
}
|
|
9
|
+
>({});
|
|
5
10
|
|
|
6
11
|
export const useFormFieldContext = () => useContext(FormFieldContext);
|
|
@@ -1,32 +1,28 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
1
|
+
import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
|
|
2
|
+
import { EmailMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
|
|
3
3
|
import {
|
|
4
|
-
|
|
5
|
-
InputField,
|
|
4
|
+
Center,
|
|
6
5
|
FormField,
|
|
7
6
|
FormFieldHelper,
|
|
8
7
|
FormFieldHelperText,
|
|
9
|
-
FormFieldLabel,
|
|
10
|
-
FormFieldLabelText,
|
|
11
|
-
FormFieldInvalidIcon,
|
|
12
8
|
FormFieldInvalid,
|
|
9
|
+
FormFieldInvalidIcon,
|
|
13
10
|
FormFieldInvalidText,
|
|
14
|
-
|
|
11
|
+
FormFieldLabel,
|
|
12
|
+
FormFieldLabelText,
|
|
13
|
+
FormFieldTextContent,
|
|
15
14
|
FormFieldValid,
|
|
15
|
+
FormFieldValidIcon,
|
|
16
16
|
FormFieldValidText,
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
RadioGroup,
|
|
17
|
+
Input,
|
|
18
|
+
InputField,
|
|
20
19
|
Radio,
|
|
20
|
+
RadioGroup,
|
|
21
21
|
RadioIndicator,
|
|
22
22
|
RadioLabel,
|
|
23
|
-
// Checkbox,
|
|
24
|
-
// CheckboxIndicator,
|
|
25
|
-
// CheckboxIcon,
|
|
26
|
-
// CheckboxLabel,
|
|
27
23
|
} from '../../';
|
|
28
|
-
import {
|
|
29
|
-
import
|
|
24
|
+
import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
|
|
25
|
+
import * as Stories from './FormField.stories';
|
|
30
26
|
|
|
31
27
|
<Meta title="Forms / Form Field" />
|
|
32
28
|
|
|
@@ -116,19 +112,23 @@ const MyComponent = () => {
|
|
|
116
112
|
|
|
117
113
|
## Props
|
|
118
114
|
|
|
119
|
-
| Name
|
|
120
|
-
|
|
|
121
|
-
| `validationStatus`
|
|
122
|
-
| `disabled`
|
|
123
|
-
| `readonly`
|
|
124
|
-
| `label`
|
|
125
|
-
| `
|
|
126
|
-
| `
|
|
127
|
-
| `
|
|
128
|
-
| `
|
|
129
|
-
| `
|
|
130
|
-
| `
|
|
131
|
-
| `
|
|
115
|
+
| Name | Type | Default | Description |
|
|
116
|
+
| ---------------------------------- | ----------------------------------- | ----------- | ---------------------------------------------------------------------------------------------------- |
|
|
117
|
+
| `validationStatus` | `'initial' \| 'valid' \| 'invalid'` | `'initial'` | The validation status of the field. |
|
|
118
|
+
| `disabled` | `boolean` | `false` | Whether the field is disabled. |
|
|
119
|
+
| `readonly` | `boolean` | `false` | Whether the field is readonly. |
|
|
120
|
+
| `label` | `string` | `-` | The label for the field. |
|
|
121
|
+
| `labelVariant` | `'heading' \| 'body'` | `'body'` | The variant of the label text. |
|
|
122
|
+
| `helperText` | `string` | `-` | The helper text for the field. |
|
|
123
|
+
| `helperIcon` | `React.ComponentType` | `-` | The icon for the helper text. |
|
|
124
|
+
| `helperPosition` | `'top' \| 'bottom'` | `'top'` | The position of the helper text. |
|
|
125
|
+
| `validText` | `string` | `-` | The valid text for the field. |
|
|
126
|
+
| `invalidText` | `string` | `-` | The invalid text for the field. |
|
|
127
|
+
| `showValidationIcon` | `boolean` | `false` | Whether to show the validation icon next to the validation text. |
|
|
128
|
+
| `required` | `boolean` | `true` | Whether the field is required. |
|
|
129
|
+
| `accessibilityHandledByChildren`\* | `boolean` | `false` | Whether accessibility is handled by child components. (Hides accessibility for the FormField itself) |
|
|
130
|
+
|
|
131
|
+
- This prop is useful when the child component (e.g., Input) manages its own accessibility attributes, preventing screen readers from reading the FormField's label and helper text multiple times.
|
|
132
132
|
|
|
133
133
|
## Components
|
|
134
134
|
|
|
@@ -6,11 +6,13 @@ export interface FormFieldBaseProps {
|
|
|
6
6
|
disabled?: boolean;
|
|
7
7
|
readonly?: boolean;
|
|
8
8
|
label?: string;
|
|
9
|
+
labelVariant?: 'heading' | 'body';
|
|
9
10
|
helperText?: string;
|
|
10
11
|
helperIcon?: ComponentType;
|
|
11
12
|
validText?: string;
|
|
12
13
|
invalidText?: string;
|
|
13
14
|
required?: boolean;
|
|
15
|
+
accessibilityHandledByChildren?: boolean;
|
|
14
16
|
}
|
|
15
17
|
|
|
16
18
|
interface FormFieldProps extends FormFieldBaseProps, ViewProps {}
|
|
@@ -28,6 +28,12 @@ const meta = {
|
|
|
28
28
|
description: 'The label of the Input component',
|
|
29
29
|
defaultValue: 'Label',
|
|
30
30
|
},
|
|
31
|
+
labelVariant: {
|
|
32
|
+
control: 'radio',
|
|
33
|
+
options: ['heading', 'body'],
|
|
34
|
+
description: 'The label variant of the Input component',
|
|
35
|
+
defaultValue: 'body',
|
|
36
|
+
},
|
|
31
37
|
helperText: {
|
|
32
38
|
control: 'text',
|
|
33
39
|
description: 'The helper text of the Input component',
|
|
@@ -37,7 +43,7 @@ const meta = {
|
|
|
37
43
|
control: 'select',
|
|
38
44
|
options: ['none', ...Object.keys(Icons).filter(icon => icon.includes('Medium'))],
|
|
39
45
|
description: 'The helper text icon of the Input component',
|
|
40
|
-
defaultValue: '
|
|
46
|
+
defaultValue: 'none',
|
|
41
47
|
},
|
|
42
48
|
|
|
43
49
|
validText: {
|
|
@@ -55,9 +61,9 @@ const meta = {
|
|
|
55
61
|
validationStatus: 'initial',
|
|
56
62
|
disabled: false,
|
|
57
63
|
label: 'Label',
|
|
64
|
+
labelVariant: 'body',
|
|
58
65
|
helperText: 'Helper text',
|
|
59
66
|
helperIcon: undefined,
|
|
60
|
-
|
|
61
67
|
validText: 'Valid text',
|
|
62
68
|
invalidText: 'Invalid error text',
|
|
63
69
|
},
|