@coopdigital/react 0.44.0 → 0.45.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.
Files changed (66) hide show
  1. package/dist/components/Checkbox/Checkbox.d.ts +4 -24
  2. package/dist/components/Checkbox/Checkbox.js +7 -14
  3. package/dist/components/Checkbox/index.d.ts +1 -2
  4. package/dist/components/Field/Field.d.ts +44 -5
  5. package/dist/components/Field/Field.js +68 -5
  6. package/dist/components/FieldMarkers/Error.d.ts +9 -0
  7. package/dist/components/{FieldError/FieldError.js → FieldMarkers/Error.js} +2 -2
  8. package/dist/components/FieldMarkers/Hint.d.ts +9 -0
  9. package/dist/components/{FieldHint/FieldHint.js → FieldMarkers/Hint.js} +2 -2
  10. package/dist/components/FieldMarkers/Label.d.ts +11 -0
  11. package/dist/components/FieldMarkers/Label.js +8 -0
  12. package/dist/components/FieldMarkers/Legend.d.ts +11 -0
  13. package/dist/components/FieldMarkers/Legend.js +13 -0
  14. package/dist/components/Fieldset/Fieldset.d.ts +54 -0
  15. package/dist/components/Fieldset/Fieldset.js +44 -0
  16. package/dist/components/Fieldset/index.d.ts +4 -0
  17. package/dist/components/RadioButton/RadioButton.d.ts +4 -22
  18. package/dist/components/RadioButton/RadioButton.js +5 -9
  19. package/dist/components/RadioButton/index.d.ts +1 -2
  20. package/dist/components/SearchBox/SearchBox.js +3 -3
  21. package/dist/components/TextInput/TextInput.d.ts +4 -18
  22. package/dist/components/TextInput/TextInput.js +7 -11
  23. package/dist/components/Textarea/Textarea.d.ts +4 -18
  24. package/dist/components/Textarea/Textarea.js +8 -9
  25. package/dist/hooks/useId.d.ts +2 -0
  26. package/dist/hooks/useId.js +8 -0
  27. package/dist/index.d.ts +1 -3
  28. package/dist/index.js +2 -6
  29. package/dist/utils/slots.d.ts +3 -1
  30. package/dist/utils/slots.js +8 -2
  31. package/package.json +10 -10
  32. package/src/components/Checkbox/Checkbox.tsx +8 -64
  33. package/src/components/Checkbox/index.ts +1 -2
  34. package/src/components/Field/Field.tsx +144 -8
  35. package/src/components/{FieldError/FieldError.tsx → FieldMarkers/Error.tsx} +4 -4
  36. package/src/components/{FieldHint/FieldHint.tsx → FieldMarkers/Hint.tsx} +5 -9
  37. package/src/components/FieldMarkers/Label.tsx +21 -0
  38. package/src/components/FieldMarkers/Legend.tsx +28 -0
  39. package/src/components/Fieldset/Fieldset.tsx +98 -0
  40. package/src/components/Fieldset/index.ts +5 -0
  41. package/src/components/RadioButton/RadioButton.tsx +6 -55
  42. package/src/components/RadioButton/index.ts +1 -2
  43. package/src/components/SearchBox/SearchBox.tsx +4 -2
  44. package/src/components/TextInput/TextInput.tsx +12 -45
  45. package/src/components/Textarea/Textarea.tsx +12 -40
  46. package/src/hooks/useId.ts +9 -0
  47. package/src/index.ts +1 -3
  48. package/src/utils/slots.ts +10 -2
  49. package/dist/components/Checkbox/CheckboxGroup.d.ts +0 -32
  50. package/dist/components/Checkbox/CheckboxGroup.js +0 -21
  51. package/dist/components/FieldError/FieldError.d.ts +0 -9
  52. package/dist/components/FieldError/index.d.ts +0 -4
  53. package/dist/components/FieldHint/FieldHint.d.ts +0 -9
  54. package/dist/components/FieldHint/index.d.ts +0 -4
  55. package/dist/components/FieldLabel/FieldLabel.d.ts +0 -13
  56. package/dist/components/FieldLabel/FieldLabel.js +0 -13
  57. package/dist/components/FieldLabel/index.d.ts +0 -4
  58. package/dist/components/RadioButton/RadioButtonGroup.d.ts +0 -32
  59. package/dist/components/RadioButton/RadioButtonGroup.js +0 -21
  60. package/dist/components/Tag/index.js +0 -5
  61. package/src/components/Checkbox/CheckboxGroup.tsx +0 -73
  62. package/src/components/FieldError/index.ts +0 -5
  63. package/src/components/FieldHint/index.ts +0 -5
  64. package/src/components/FieldLabel/FieldLabel.tsx +0 -31
  65. package/src/components/FieldLabel/index.ts +0 -5
  66. package/src/components/RadioButton/RadioButtonGroup.tsx +0 -73
@@ -1,21 +0,0 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import clsx from 'clsx';
3
- import { FieldError } from '../FieldError/FieldError.js';
4
- import { FieldHint } from '../FieldHint/FieldHint.js';
5
-
6
- const RadioButtonGroup = ({ children, className, error = false, hint, label, labelVisible = true, orientation = "vertical", size = "md", variant = "default", ...props }) => {
7
- const componentProps = {
8
- className: clsx("coop-fieldset", "coop-radio-button-group", className),
9
- "data-error": error ? "" : undefined,
10
- "data-orientation": orientation !== "vertical" ? orientation : undefined,
11
- "data-size": size.length && size !== "md" ? size : undefined,
12
- "data-variant": variant !== "default" ? variant : undefined,
13
- ...props,
14
- };
15
- const legendProps = {
16
- className: clsx("coop-field-label", !labelVisible && "sr-only"),
17
- };
18
- return (jsxs("fieldset", { ...componentProps, children: [label && jsx("legend", { ...legendProps, children: label }), hint && jsx(FieldHint, { children: hint }), typeof error === "object" && (error === null || error === void 0 ? void 0 : error.message) && jsx(FieldError, { children: error.message }), jsx("div", { className: "coop-radio-button-group-options", children: children })] }));
19
- };
20
-
21
- export { RadioButtonGroup, RadioButtonGroup as default };
@@ -1,5 +0,0 @@
1
- import { Tag } from './Tag.js';
2
-
3
-
4
-
5
- export { Tag, Tag as default };
@@ -1,73 +0,0 @@
1
- import type { FieldsetHTMLAttributes, JSX } from "react"
2
-
3
- import clsx from "clsx"
4
-
5
- import { FormFieldError, StandardSizes } from "../../../src/types"
6
- import { FieldError } from "../FieldError"
7
- import { FieldHint } from "../FieldHint"
8
-
9
- export interface CheckboxGroupProps 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 CheckboxGroup, 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 CheckboxGroup 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 CheckboxGroup 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 CheckboxGroup. 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 CheckboxGroup orientation. */
31
- orientation?: "horizontal" | "vertical"
32
- /** **(Optional)** Specify the CheckboxGroup size. */
33
- size?: StandardSizes
34
- /** **(Optional)** Specify the CheckboxGroup variant. */
35
- variant?: "default" | "boxed"
36
- }
37
-
38
- export const CheckboxGroup = ({
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
- }: CheckboxGroupProps): JSX.Element => {
50
- const componentProps = {
51
- className: clsx("coop-fieldset", "coop-checkbox-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-checkbox-group-options">{children}</div>
69
- </fieldset>
70
- )
71
- }
72
-
73
- export default CheckboxGroup
@@ -1,5 +0,0 @@
1
- import FieldError from "./FieldError"
2
-
3
- export default FieldError
4
- export { FieldError }
5
- export * from "./FieldError"
@@ -1,5 +0,0 @@
1
- import FieldHint from "./FieldHint"
2
-
3
- export default FieldHint
4
- export { FieldHint }
5
- export * from "./FieldHint"
@@ -1,31 +0,0 @@
1
- import type { JSX, LabelHTMLAttributes, ReactNode } from "react"
2
-
3
- import clsx from "clsx"
4
-
5
- export interface FieldLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
6
- /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
7
- children?: string | ReactNode
8
- /** **(Optional)** Specify additional CSS classes to be applied to the component. */
9
- className?: string
10
- /** Specify the field ID to connect FieldLabel to the field itself. */
11
- htmlFor: string
12
- /** **(Optional)** Specify whether the FieldLabel is visible for humans or only for screen readers. */
13
- isVisible?: boolean
14
- }
15
-
16
- export const FieldLabel = ({
17
- children,
18
- className,
19
- htmlFor,
20
- isVisible = true,
21
- ...props
22
- }: FieldLabelProps): JSX.Element | null => {
23
- const componentProps = {
24
- className: clsx("coop-field-label ", isVisible ? "" : "sr-only", className),
25
- htmlFor,
26
- ...props,
27
- }
28
- return children && htmlFor ? <label {...componentProps}>{children}</label> : null
29
- }
30
-
31
- export default FieldLabel
@@ -1,5 +0,0 @@
1
- import FieldLabel from "./FieldLabel"
2
-
3
- export default FieldLabel
4
- export { FieldLabel }
5
- export * from "./FieldLabel"
@@ -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