@coopdigital/react 0.44.0 → 0.46.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/dist/components/Button/Button.d.ts +6 -4
- package/dist/components/Button/Button.js +4 -6
- package/dist/components/Card/Card.js +2 -2
- package/dist/components/Checkbox/Checkbox.d.ts +4 -24
- package/dist/components/Checkbox/Checkbox.js +7 -14
- package/dist/components/Checkbox/index.d.ts +1 -2
- package/dist/components/Expandable/Expandable.js +2 -2
- package/dist/components/Field/Field.d.ts +44 -5
- package/dist/components/Field/Field.js +68 -5
- package/dist/components/FieldMarkers/Error.d.ts +9 -0
- package/dist/components/{FieldError/FieldError.js → FieldMarkers/Error.js} +2 -2
- package/dist/components/FieldMarkers/Hint.d.ts +9 -0
- package/dist/components/{FieldHint/FieldHint.js → FieldMarkers/Hint.js} +2 -2
- package/dist/components/FieldMarkers/Label.d.ts +11 -0
- package/dist/components/FieldMarkers/Label.js +8 -0
- package/dist/components/FieldMarkers/Legend.d.ts +11 -0
- package/dist/components/FieldMarkers/Legend.js +13 -0
- package/dist/components/Fieldset/Fieldset.d.ts +54 -0
- package/dist/components/Fieldset/Fieldset.js +44 -0
- package/dist/components/Fieldset/index.d.ts +4 -0
- package/dist/components/Pill/Pill.js +2 -2
- package/dist/components/Radio/Radio.d.ts +18 -0
- package/dist/components/Radio/Radio.js +22 -0
- package/dist/components/Radio/index.d.ts +4 -0
- package/dist/components/{SearchBox/SearchBox.d.ts → Searchbox/Searchbox.d.ts} +7 -7
- package/dist/components/{SearchBox/SearchBox.js → Searchbox/Searchbox.js} +6 -6
- package/dist/components/Searchbox/index.d.ts +4 -0
- package/dist/components/TextInput/TextInput.d.ts +5 -19
- package/dist/components/TextInput/TextInput.js +7 -11
- package/dist/components/Textarea/Textarea.d.ts +4 -18
- package/dist/components/Textarea/Textarea.js +8 -9
- package/dist/hooks/useId.d.ts +2 -0
- package/dist/hooks/useId.js +8 -0
- package/dist/{utils/slots.d.ts → hooks/useSlots.d.ts} +3 -1
- package/dist/{utils/slots.js → hooks/useSlots.js} +9 -3
- package/dist/index.d.ts +3 -5
- package/dist/index.js +4 -8
- package/package.json +10 -10
- package/src/components/Button/Button.tsx +10 -14
- package/src/components/Card/Card.tsx +2 -3
- package/src/components/Checkbox/Checkbox.tsx +8 -64
- package/src/components/Checkbox/index.ts +1 -2
- package/src/components/Expandable/Expandable.tsx +2 -2
- package/src/components/Field/Field.tsx +144 -8
- package/src/components/{FieldError/FieldError.tsx → FieldMarkers/Error.tsx} +4 -4
- package/src/components/{FieldHint/FieldHint.tsx → FieldMarkers/Hint.tsx} +5 -9
- package/src/components/FieldMarkers/Label.tsx +21 -0
- package/src/components/FieldMarkers/Legend.tsx +28 -0
- package/src/components/Fieldset/Fieldset.tsx +98 -0
- package/src/components/Fieldset/index.ts +5 -0
- package/src/components/Pill/Pill.tsx +2 -2
- package/src/components/Radio/Radio.tsx +47 -0
- package/src/components/Radio/index.ts +5 -0
- package/src/components/{SearchBox/SearchBox.tsx → Searchbox/Searchbox.tsx} +15 -13
- package/src/components/Searchbox/index.ts +5 -0
- package/src/components/TextInput/TextInput.tsx +25 -46
- package/src/components/Textarea/Textarea.tsx +12 -40
- package/src/hooks/useId.ts +9 -0
- package/src/{utils/slots.ts → hooks/useSlots.ts} +10 -2
- package/src/index.ts +3 -5
- package/dist/components/Checkbox/CheckboxGroup.d.ts +0 -32
- package/dist/components/Checkbox/CheckboxGroup.js +0 -21
- package/dist/components/FieldError/FieldError.d.ts +0 -9
- package/dist/components/FieldError/index.d.ts +0 -4
- package/dist/components/FieldHint/FieldHint.d.ts +0 -9
- package/dist/components/FieldHint/index.d.ts +0 -4
- package/dist/components/FieldLabel/FieldLabel.d.ts +0 -13
- package/dist/components/FieldLabel/FieldLabel.js +0 -13
- package/dist/components/FieldLabel/index.d.ts +0 -4
- package/dist/components/RadioButton/RadioButton.d.ts +0 -36
- package/dist/components/RadioButton/RadioButton.js +0 -26
- package/dist/components/RadioButton/RadioButtonGroup.d.ts +0 -32
- package/dist/components/RadioButton/RadioButtonGroup.js +0 -21
- package/dist/components/RadioButton/index.d.ts +0 -5
- package/dist/components/SearchBox/index.d.ts +0 -4
- package/dist/components/Tag/index.js +0 -5
- package/src/components/Checkbox/CheckboxGroup.tsx +0 -73
- package/src/components/FieldError/index.ts +0 -5
- package/src/components/FieldHint/index.ts +0 -5
- package/src/components/FieldLabel/FieldLabel.tsx +0 -31
- package/src/components/FieldLabel/index.ts +0 -5
- package/src/components/RadioButton/RadioButton.tsx +0 -97
- package/src/components/RadioButton/RadioButtonGroup.tsx +0 -73
- package/src/components/RadioButton/index.ts +0 -6
- package/src/components/SearchBox/index.ts +0 -5
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import type { FieldsetHTMLAttributes, JSX } from "react"
|
|
2
|
-
|
|
3
|
-
import clsx from "clsx"
|
|
4
|
-
|
|
5
|
-
import { FormFieldError, StandardSizes } from "../../types"
|
|
6
|
-
import { FieldError } from "../FieldError"
|
|
7
|
-
import { FieldHint } from "../FieldHint"
|
|
8
|
-
|
|
9
|
-
export interface RadioButtonGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
|
|
10
|
-
/** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
|
|
11
|
-
children?: React.ReactNode
|
|
12
|
-
/** **(Optional)** Specify additional CSS classes to be applied to the component. */
|
|
13
|
-
className?: string
|
|
14
|
-
/** **(Optional)** Specify whether the RadioButtonGroup, and all of its descendents, should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
|
|
15
|
-
disabled?: boolean
|
|
16
|
-
/** **(Optional)** Specify the RadioButtonGroup error state.
|
|
17
|
-
*
|
|
18
|
-
* This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
|
|
19
|
-
*/
|
|
20
|
-
error?: FormFieldError
|
|
21
|
-
/** **(Optional)** Specify the RadioButtonGroup hint.
|
|
22
|
-
*
|
|
23
|
-
* This text is rendered under the label to provide further guidance for users.
|
|
24
|
-
*/
|
|
25
|
-
hint?: string
|
|
26
|
-
/** **(Optional)** Specify the label for the RadioButtonGroup. This will be rendered as a fieldset legend. */
|
|
27
|
-
label?: string
|
|
28
|
-
/** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
|
|
29
|
-
labelVisible?: boolean
|
|
30
|
-
/** **(Optional)** Specify the RadioButtonGroup orientation. */
|
|
31
|
-
orientation?: "horizontal" | "vertical"
|
|
32
|
-
/** **(Optional)** Specify the RadioButtonGroup size. */
|
|
33
|
-
size?: StandardSizes
|
|
34
|
-
/** **(Optional)** Specify the RadioButtonGroup variant. */
|
|
35
|
-
variant?: "default" | "boxed"
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
export const RadioButtonGroup = ({
|
|
39
|
-
children,
|
|
40
|
-
className,
|
|
41
|
-
error = false,
|
|
42
|
-
hint,
|
|
43
|
-
label,
|
|
44
|
-
labelVisible = true,
|
|
45
|
-
orientation = "vertical",
|
|
46
|
-
size = "md",
|
|
47
|
-
variant = "default",
|
|
48
|
-
...props
|
|
49
|
-
}: RadioButtonGroupProps): JSX.Element => {
|
|
50
|
-
const componentProps = {
|
|
51
|
-
className: clsx("coop-fieldset", "coop-radio-button-group", className),
|
|
52
|
-
"data-error": error ? "" : undefined,
|
|
53
|
-
"data-orientation": orientation !== "vertical" ? orientation : undefined,
|
|
54
|
-
"data-size": size.length && size !== "md" ? size : undefined,
|
|
55
|
-
"data-variant": variant !== "default" ? variant : undefined,
|
|
56
|
-
...props,
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
const legendProps = {
|
|
60
|
-
className: clsx("coop-field-label", !labelVisible && "sr-only"),
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
return (
|
|
64
|
-
<fieldset {...componentProps}>
|
|
65
|
-
{label && <legend {...legendProps}>{label}</legend>}
|
|
66
|
-
{hint && <FieldHint>{hint}</FieldHint>}
|
|
67
|
-
{typeof error === "object" && error?.message && <FieldError>{error.message}</FieldError>}
|
|
68
|
-
<div className="coop-radio-button-group-options">{children}</div>
|
|
69
|
-
</fieldset>
|
|
70
|
-
)
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
export default RadioButtonGroup
|