@financial-times/o3-form 0.1.0 → 0.2.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/cjs/CheckBox-DRFC93iL.d.ts +35 -0
- package/cjs/CheckBox.d.ts +2 -0
- package/cjs/CheckBox.js +53 -0
- package/cjs/index.d.ts +3 -31
- package/cjs/index.js +1 -0
- package/css/main.css +140 -14
- package/esm/CheckBox-DRFC93iL.d.ts +35 -0
- package/esm/CheckBox.d.ts +2 -0
- package/esm/CheckBox.js +53 -0
- package/esm/index.d.ts +3 -31
- package/esm/index.js +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
|
|
3
|
+
type BaseInputProps = {
|
|
4
|
+
inputId?: string;
|
|
5
|
+
label?: string;
|
|
6
|
+
description?: string;
|
|
7
|
+
optional?: boolean;
|
|
8
|
+
error?: boolean;
|
|
9
|
+
attributes?: JSX.IntrinsicElements['input'];
|
|
10
|
+
};
|
|
11
|
+
interface CheckBoxProps extends BaseInputProps {
|
|
12
|
+
inputId: string;
|
|
13
|
+
checkboxLabel: string;
|
|
14
|
+
}
|
|
15
|
+
interface FormFieldsetProps {
|
|
16
|
+
label: string;
|
|
17
|
+
description?: string;
|
|
18
|
+
children: JSX.Element | JSX.Element[];
|
|
19
|
+
feedback?: FeedbackProps;
|
|
20
|
+
}
|
|
21
|
+
interface FormFieldProps extends BaseInputProps {
|
|
22
|
+
feedback?: FeedbackProps;
|
|
23
|
+
children: JSX.Element & JSX.IntrinsicElements['input'];
|
|
24
|
+
}
|
|
25
|
+
type FeedbackProps = {
|
|
26
|
+
errorElementIds?: string[];
|
|
27
|
+
message: string;
|
|
28
|
+
type: 'error';
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
declare const CheckBoxItem: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
|
|
32
|
+
declare const CheckBox: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
|
|
33
|
+
declare const CheckBoxGroup: (props: FormFieldsetProps) => react_jsx_runtime.JSX.Element;
|
|
34
|
+
|
|
35
|
+
export { CheckBoxItem as C, type FeedbackProps as F, type FormFieldProps as a, type FormFieldsetProps as b, CheckBox as c, CheckBoxGroup as d };
|
package/cjs/CheckBox.js
ADDED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _jsxruntime = require('react/jsx-runtime');
|
|
2
|
+
var _react = require('react');
|
|
3
|
+
var _FormField = require('./fieldComponents/FormField');
|
|
4
|
+
const CheckBoxItem = (props) => {
|
|
5
|
+
let { inputId, attributes, optional, error } = props;
|
|
6
|
+
const classNames = ["o3-form-input__checkbox-input", "o3-visually-hidden"];
|
|
7
|
+
if (error) {
|
|
8
|
+
classNames.push("o3-form-input-error");
|
|
9
|
+
}
|
|
10
|
+
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "o3-form-input__checkbox", children: [
|
|
11
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
12
|
+
"input",
|
|
13
|
+
{
|
|
14
|
+
...attributes,
|
|
15
|
+
type: "checkbox",
|
|
16
|
+
id: inputId,
|
|
17
|
+
className: classNames.join(" "),
|
|
18
|
+
required: !optional,
|
|
19
|
+
"aria-required": !optional
|
|
20
|
+
}
|
|
21
|
+
),
|
|
22
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: inputId, className: "o3-form-input__checkbox-label", children: props.checkboxLabel })
|
|
23
|
+
] });
|
|
24
|
+
};
|
|
25
|
+
const CheckBox = (props) => {
|
|
26
|
+
const newProps = {
|
|
27
|
+
...props,
|
|
28
|
+
labelId: props.inputId,
|
|
29
|
+
descriptionId: props.inputId
|
|
30
|
+
};
|
|
31
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FormField.LabeledFormField, { ...newProps, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CheckBoxItem, { ...newProps, children: " " }) });
|
|
32
|
+
};
|
|
33
|
+
const CheckBoxGroup = (props) => {
|
|
34
|
+
const { children, ...restProps } = props;
|
|
35
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FormField.FormFieldset, { ...restProps, children: children.map((child) => {
|
|
36
|
+
const hasError = _optionalChain([props, 'access', _ => _.feedback, 'optionalAccess', _2 => _2.errorElementIds, 'optionalAccess', _3 => _3.includes, 'call', _4 => _4(
|
|
37
|
+
child.props.inputId
|
|
38
|
+
)]);
|
|
39
|
+
return /* @__PURE__ */ _react.createElement.call(void 0,
|
|
40
|
+
CheckBoxItem,
|
|
41
|
+
{
|
|
42
|
+
...child.props,
|
|
43
|
+
error: hasError,
|
|
44
|
+
key: child.props.inputId
|
|
45
|
+
}
|
|
46
|
+
);
|
|
47
|
+
}) });
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
exports.CheckBox = CheckBox; exports.CheckBoxGroup = CheckBoxGroup; exports.CheckBoxItem = CheckBoxItem;
|
package/cjs/index.d.ts
CHANGED
|
@@ -1,36 +1,8 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { F as FeedbackProps, a as FormFieldProps, b as FormFieldsetProps } from './CheckBox-DRFC93iL.js';
|
|
3
|
+
export { c as CheckBox, d as CheckBoxGroup, C as CheckBoxItem } from './CheckBox-DRFC93iL.js';
|
|
2
4
|
|
|
3
|
-
type
|
|
4
|
-
inputId?: string;
|
|
5
|
-
label?: string;
|
|
6
|
-
description?: string;
|
|
7
|
-
optional?: boolean;
|
|
8
|
-
error?: string;
|
|
9
|
-
attributes?: JSX.IntrinsicElements['input'];
|
|
10
|
-
};
|
|
11
|
-
interface FormFieldProps extends BaseInputProps {
|
|
12
|
-
feedback?: FeedBackProps;
|
|
13
|
-
children: JSX.Element & JSX.IntrinsicElements['input'];
|
|
14
|
-
}
|
|
15
|
-
interface FormFieldsetProps {
|
|
16
|
-
label: string;
|
|
17
|
-
description?: string;
|
|
18
|
-
error?: string;
|
|
19
|
-
children: JSX.Element | JSX.Element[];
|
|
20
|
-
feedback?: FeedBackProps;
|
|
21
|
-
}
|
|
22
|
-
interface FormFieldsetProps {
|
|
23
|
-
label: string;
|
|
24
|
-
description?: string;
|
|
25
|
-
error?: string;
|
|
26
|
-
children: JSX.Element | JSX.Element[];
|
|
27
|
-
}
|
|
28
|
-
type FeedBackProps = {
|
|
29
|
-
message: string;
|
|
30
|
-
type: 'error';
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
declare const Feedback: ({ message, type }: FeedBackProps) => react_jsx_runtime.JSX.Element;
|
|
5
|
+
declare const Feedback: ({ message, type }: FeedbackProps) => react_jsx_runtime.JSX.Element;
|
|
34
6
|
|
|
35
7
|
declare const LabeledFormField: ({ inputId, label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
|
|
36
8
|
declare const TitledFormField: ({ label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
|
package/cjs/index.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _createStarExport(obj) { Object.keys(obj) .filter((key) => key !== "default" && key !== "__esModule") .forEach((key) => { if (exports.hasOwnProperty(key)) { return; } Object.defineProperty(exports, key, {enumerable: true, configurable: true, get: () => obj[key]}); }); }var _Feedback = require('./fieldComponents/Feedback'); _createStarExport(_Feedback);
|
|
2
2
|
var _FormField = require('./fieldComponents/FormField'); _createStarExport(_FormField);
|
|
3
3
|
var _Form = require('./fieldComponents/Form'); _createStarExport(_Form);
|
|
4
|
+
var _CheckBox = require('./CheckBox'); _createStarExport(_CheckBox);
|
package/css/main.css
CHANGED
|
@@ -7,32 +7,158 @@
|
|
|
7
7
|
.o3-form-field {
|
|
8
8
|
display: flex;
|
|
9
9
|
flex-direction: column;
|
|
10
|
+
font-family: var(--o3-font-family-metric);
|
|
10
11
|
gap: var(--o3-spacing-3xs);
|
|
11
12
|
}
|
|
12
|
-
.o3-form-
|
|
13
|
-
|
|
13
|
+
.o3-form-field:where(fieldset) {
|
|
14
|
+
margin: 0;
|
|
15
|
+
padding: 0;
|
|
16
|
+
border: 0;
|
|
17
|
+
}
|
|
18
|
+
.o3-form-field :is(.o3-form-field__label, .o3-form-field__title, .o3-form-field__legend) {
|
|
14
19
|
font-size: var(--o3-font-size-metric2-0);
|
|
20
|
+
line-height: var(--o3-font-lineheight-metric2-0);
|
|
21
|
+
font-weight: var(--o3-font-weight-medium);
|
|
22
|
+
color: var(--o3-color-use-case-body-text);
|
|
23
|
+
}
|
|
24
|
+
.o3-form-field :is(.o3-form-field__label, .o3-form-field__title, .o3-form-field__legend):has(~ .o3-form-input__checkbox > input:not(:required))::after {
|
|
25
|
+
content: "(optional)";
|
|
26
|
+
margin-left: var(--o3-spacing-3xs);
|
|
27
|
+
color: var(--o3-color-use-case-muted-text);
|
|
28
|
+
font-weight: var(--o3-font-weight-regular);
|
|
29
|
+
}
|
|
30
|
+
.o3-form-field .o3-form-field__legend {
|
|
31
|
+
padding: 0 0 var(--o3-spacing-5xs) 0;
|
|
15
32
|
}
|
|
16
|
-
.o3-form-
|
|
33
|
+
.o3-form-field .o3-form-input__description {
|
|
17
34
|
font-size: var(--o3-font-size-metric2-0);
|
|
18
|
-
|
|
35
|
+
line-height: var(--o3-font-lineheight-metric2-0);
|
|
36
|
+
font-weight: var(--o3-font-weight-regular);
|
|
37
|
+
color: var(--o3-color-palette-black-60);
|
|
19
38
|
}
|
|
20
|
-
|
|
21
|
-
margin:
|
|
22
|
-
padding: 0;
|
|
23
|
-
border: 0;
|
|
39
|
+
.o3-form-field :is(.o3-form-field__label + .o3-form-input__description, .o3-form-field__title + .o3-form-input__description) {
|
|
40
|
+
margin-top: calc(-1 * var(--o3-spacing-4xs));
|
|
24
41
|
}
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
42
|
+
.o3-form-field__feedback--error {
|
|
43
|
+
color: var(--o3-color-use-case-error);
|
|
44
|
+
font-size: var(--o3-font-size-metric2-0);
|
|
28
45
|
}
|
|
29
46
|
|
|
30
47
|
/* src/css/components/feedback.css */
|
|
31
|
-
[class^=o3-form-feedback__] {
|
|
32
|
-
margin-top: var(--o3-spacing-3xs);
|
|
33
|
-
}
|
|
34
48
|
.o3-form-feedback__error {
|
|
49
|
+
display: flex;
|
|
50
|
+
align-items: center;
|
|
51
|
+
font-size: var(--o3-font-size-metric2-0);
|
|
52
|
+
line-height: var(--o3-font-lineheight-metric2-0);
|
|
35
53
|
color: var(--o3-color-palette-crimson);
|
|
36
54
|
}
|
|
55
|
+
.o3-form-feedback__error-message {
|
|
56
|
+
margin-left: var(--o3-spacing-5xs);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* src/css/components/checkbox.css */
|
|
60
|
+
.o3-form-input__checkbox-input + label::before {
|
|
61
|
+
content: "";
|
|
62
|
+
display: inline-block;
|
|
63
|
+
width: var(--o3-spacing-s);
|
|
64
|
+
height: var(--o3-spacing-s);
|
|
65
|
+
margin-right: var(--o3-spacing-3xs);
|
|
66
|
+
border: 2px solid var(--o3-color-palette-black-50);
|
|
67
|
+
border-radius: var(--o3-spacing-5xs);
|
|
68
|
+
box-sizing: border-box;
|
|
69
|
+
}
|
|
70
|
+
.o3-form-input__checkbox-input:hover + label::before {
|
|
71
|
+
border-color: var(--o3-color-palette-black-40);
|
|
72
|
+
}
|
|
73
|
+
.o3-form-input__checkbox-input:active + label::before {
|
|
74
|
+
border-color: var(--o3-color-palette-black-30);
|
|
75
|
+
}
|
|
76
|
+
.o3-form-input__checkbox-input:checked + label::after {
|
|
77
|
+
position: absolute;
|
|
78
|
+
content: "";
|
|
79
|
+
width: var(--o3-spacing-s);
|
|
80
|
+
height: var(--o3-spacing-s);
|
|
81
|
+
background-color: var(--o3-color-palette-white);
|
|
82
|
+
-webkit-mask-image: var(--o3-icons-ft-icon-tick);
|
|
83
|
+
mask-image: var(--o3-icons-ft-icon-tick);
|
|
84
|
+
-webkit-mask-repeat: no-repeat;
|
|
85
|
+
mask-repeat: no-repeat;
|
|
86
|
+
-webkit-mask-size: contain;
|
|
87
|
+
mask-size: contain;
|
|
88
|
+
}
|
|
89
|
+
.o3-form-input__checkbox-input:checked + label::before {
|
|
90
|
+
background-color: var(--o3-color-palette-black-50);
|
|
91
|
+
}
|
|
92
|
+
.o3-form-input__checkbox-input:checked:hover + label::before {
|
|
93
|
+
background-color: var(--o3-color-palette-black-40);
|
|
94
|
+
}
|
|
95
|
+
.o3-form-input__checkbox-input:checked:active + label::before {
|
|
96
|
+
background-color: var(--o3-color-palette-black-30);
|
|
97
|
+
}
|
|
98
|
+
.o3-form-input__checkbox-input:disabled + label::before {
|
|
99
|
+
border-color: var(--o3-color-palette-black-30);
|
|
100
|
+
}
|
|
101
|
+
.o3-form-input__checkbox-input:disabled + label {
|
|
102
|
+
color: var(--o3-color-palette-black-30);
|
|
103
|
+
}
|
|
104
|
+
.o3-form-input__checkbox-input:checked:disabled + label::before {
|
|
105
|
+
background-color: var(--o3-color-palette-black-30);
|
|
106
|
+
}
|
|
107
|
+
.o3-form-input__checkbox-input.o3-form-input-error + label::before {
|
|
108
|
+
border-color: var(--o3-color-use-case-error);
|
|
109
|
+
background-color: var(--o3-color-use-case-error-background);
|
|
110
|
+
}
|
|
111
|
+
.o3-form-input__checkbox-input.o3-form-input-error:checked + label::before {
|
|
112
|
+
border-color: var(--o3-color-use-case-error);
|
|
113
|
+
background-color: var(--o3-color-use-case-error-background);
|
|
114
|
+
}
|
|
115
|
+
.o3-form-input__checkbox-input.o3-form-input-error:checked + label::after {
|
|
116
|
+
background-color: var(--o3-color-use-case-error);
|
|
117
|
+
}
|
|
118
|
+
.o3-form-input__checkbox-input:indeterminate + label::before {
|
|
119
|
+
border-color: var(--o3-color-palette-black-50);
|
|
120
|
+
background-color: var(--o3-color-palette-black-50);
|
|
121
|
+
}
|
|
122
|
+
.o3-form-input__checkbox-input:indeterminate + label::after {
|
|
123
|
+
position: absolute;
|
|
124
|
+
content: "";
|
|
125
|
+
width: var(--o3-spacing-s);
|
|
126
|
+
height: var(--o3-spacing-s);
|
|
127
|
+
background-color: var(--o3-color-palette-white);
|
|
128
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='10' width='14' height='4' rx='2' fill='%23CC0000'/%3E%3C/svg%3E%0A");
|
|
129
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='10' width='14' height='4' rx='2' fill='%23CC0000'/%3E%3C/svg%3E%0A");
|
|
130
|
+
-webkit-mask-repeat: no-repeat;
|
|
131
|
+
mask-repeat: no-repeat;
|
|
132
|
+
-webkit-mask-size: contain;
|
|
133
|
+
mask-size: contain;
|
|
134
|
+
}
|
|
135
|
+
.o3-form-input__checkbox-input:indeterminate:hover + label::before {
|
|
136
|
+
border-color: var(--o3-color-palette-black-40);
|
|
137
|
+
background-color: var(--o3-color-palette-black-40);
|
|
138
|
+
}
|
|
139
|
+
.o3-form-input__checkbox-input:indeterminate:active + label::before,
|
|
140
|
+
.o3-form-input__checkbox-input:indeterminate:disabled + label::before {
|
|
141
|
+
border-color: var(--o3-color-palette-black-30);
|
|
142
|
+
background-color: var(--o3-color-palette-black-30);
|
|
143
|
+
}
|
|
144
|
+
.o3-form-input__checkbox-input.o3-form-input-error:indeterminate + label::before {
|
|
145
|
+
border-color: var(--o3-color-use-case-error);
|
|
146
|
+
background-color: var(--o3-color-use-case-error-background);
|
|
147
|
+
}
|
|
148
|
+
.o3-form-input__checkbox-input.o3-form-input-error:indeterminate + label::after {
|
|
149
|
+
background-color: var(--o3-color-use-case-error);
|
|
150
|
+
}
|
|
151
|
+
.o3-form-input__checkbox-label {
|
|
152
|
+
display: flex;
|
|
153
|
+
align-items: center;
|
|
154
|
+
font-size: var(--o3-font-size-metric2-0);
|
|
155
|
+
line-height: var(--o3-font-lineheight-metric2-0);
|
|
156
|
+
font-weight: var(--o3-font-weight-regular);
|
|
157
|
+
color: var(--o3-color-use-case-body-text);
|
|
158
|
+
}
|
|
159
|
+
.o3-form-input__checkbox-label:focus-visible {
|
|
160
|
+
padding: var(--o3-spacing-5xs);
|
|
161
|
+
margin: calc(-1 * var(--o3-spacing-5xs)) 0 calc(-1 * var(--o3-spacing-5xs)) calc(-1 * var(--o3-spacing-5xs));
|
|
162
|
+
}
|
|
37
163
|
|
|
38
164
|
/* main.css */
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
|
|
3
|
+
type BaseInputProps = {
|
|
4
|
+
inputId?: string;
|
|
5
|
+
label?: string;
|
|
6
|
+
description?: string;
|
|
7
|
+
optional?: boolean;
|
|
8
|
+
error?: boolean;
|
|
9
|
+
attributes?: JSX.IntrinsicElements['input'];
|
|
10
|
+
};
|
|
11
|
+
interface CheckBoxProps extends BaseInputProps {
|
|
12
|
+
inputId: string;
|
|
13
|
+
checkboxLabel: string;
|
|
14
|
+
}
|
|
15
|
+
interface FormFieldsetProps {
|
|
16
|
+
label: string;
|
|
17
|
+
description?: string;
|
|
18
|
+
children: JSX.Element | JSX.Element[];
|
|
19
|
+
feedback?: FeedbackProps;
|
|
20
|
+
}
|
|
21
|
+
interface FormFieldProps extends BaseInputProps {
|
|
22
|
+
feedback?: FeedbackProps;
|
|
23
|
+
children: JSX.Element & JSX.IntrinsicElements['input'];
|
|
24
|
+
}
|
|
25
|
+
type FeedbackProps = {
|
|
26
|
+
errorElementIds?: string[];
|
|
27
|
+
message: string;
|
|
28
|
+
type: 'error';
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
declare const CheckBoxItem: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
|
|
32
|
+
declare const CheckBox: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
|
|
33
|
+
declare const CheckBoxGroup: (props: FormFieldsetProps) => react_jsx_runtime.JSX.Element;
|
|
34
|
+
|
|
35
|
+
export { CheckBoxItem as C, type FeedbackProps as F, type FormFieldProps as a, type FormFieldsetProps as b, CheckBox as c, CheckBoxGroup as d };
|
package/esm/CheckBox.js
ADDED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { createElement } from "react";
|
|
3
|
+
import { LabeledFormField, FormFieldset } from "./fieldComponents/FormField";
|
|
4
|
+
const CheckBoxItem = (props) => {
|
|
5
|
+
let { inputId, attributes, optional, error } = props;
|
|
6
|
+
const classNames = ["o3-form-input__checkbox-input", "o3-visually-hidden"];
|
|
7
|
+
if (error) {
|
|
8
|
+
classNames.push("o3-form-input-error");
|
|
9
|
+
}
|
|
10
|
+
return /* @__PURE__ */ jsxs("div", { className: "o3-form-input__checkbox", children: [
|
|
11
|
+
/* @__PURE__ */ jsx(
|
|
12
|
+
"input",
|
|
13
|
+
{
|
|
14
|
+
...attributes,
|
|
15
|
+
type: "checkbox",
|
|
16
|
+
id: inputId,
|
|
17
|
+
className: classNames.join(" "),
|
|
18
|
+
required: !optional,
|
|
19
|
+
"aria-required": !optional
|
|
20
|
+
}
|
|
21
|
+
),
|
|
22
|
+
/* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "o3-form-input__checkbox-label", children: props.checkboxLabel })
|
|
23
|
+
] });
|
|
24
|
+
};
|
|
25
|
+
const CheckBox = (props) => {
|
|
26
|
+
const newProps = {
|
|
27
|
+
...props,
|
|
28
|
+
labelId: props.inputId,
|
|
29
|
+
descriptionId: props.inputId
|
|
30
|
+
};
|
|
31
|
+
return /* @__PURE__ */ jsx(LabeledFormField, { ...newProps, children: /* @__PURE__ */ jsx(CheckBoxItem, { ...newProps, children: " " }) });
|
|
32
|
+
};
|
|
33
|
+
const CheckBoxGroup = (props) => {
|
|
34
|
+
const { children, ...restProps } = props;
|
|
35
|
+
return /* @__PURE__ */ jsx(FormFieldset, { ...restProps, children: children.map((child) => {
|
|
36
|
+
const hasError = props.feedback?.errorElementIds?.includes(
|
|
37
|
+
child.props.inputId
|
|
38
|
+
);
|
|
39
|
+
return /* @__PURE__ */ createElement(
|
|
40
|
+
CheckBoxItem,
|
|
41
|
+
{
|
|
42
|
+
...child.props,
|
|
43
|
+
error: hasError,
|
|
44
|
+
key: child.props.inputId
|
|
45
|
+
}
|
|
46
|
+
);
|
|
47
|
+
}) });
|
|
48
|
+
};
|
|
49
|
+
export {
|
|
50
|
+
CheckBox,
|
|
51
|
+
CheckBoxGroup,
|
|
52
|
+
CheckBoxItem
|
|
53
|
+
};
|
package/esm/index.d.ts
CHANGED
|
@@ -1,36 +1,8 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { F as FeedbackProps, a as FormFieldProps, b as FormFieldsetProps } from './CheckBox-DRFC93iL.js';
|
|
3
|
+
export { c as CheckBox, d as CheckBoxGroup, C as CheckBoxItem } from './CheckBox-DRFC93iL.js';
|
|
2
4
|
|
|
3
|
-
type
|
|
4
|
-
inputId?: string;
|
|
5
|
-
label?: string;
|
|
6
|
-
description?: string;
|
|
7
|
-
optional?: boolean;
|
|
8
|
-
error?: string;
|
|
9
|
-
attributes?: JSX.IntrinsicElements['input'];
|
|
10
|
-
};
|
|
11
|
-
interface FormFieldProps extends BaseInputProps {
|
|
12
|
-
feedback?: FeedBackProps;
|
|
13
|
-
children: JSX.Element & JSX.IntrinsicElements['input'];
|
|
14
|
-
}
|
|
15
|
-
interface FormFieldsetProps {
|
|
16
|
-
label: string;
|
|
17
|
-
description?: string;
|
|
18
|
-
error?: string;
|
|
19
|
-
children: JSX.Element | JSX.Element[];
|
|
20
|
-
feedback?: FeedBackProps;
|
|
21
|
-
}
|
|
22
|
-
interface FormFieldsetProps {
|
|
23
|
-
label: string;
|
|
24
|
-
description?: string;
|
|
25
|
-
error?: string;
|
|
26
|
-
children: JSX.Element | JSX.Element[];
|
|
27
|
-
}
|
|
28
|
-
type FeedBackProps = {
|
|
29
|
-
message: string;
|
|
30
|
-
type: 'error';
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
declare const Feedback: ({ message, type }: FeedBackProps) => react_jsx_runtime.JSX.Element;
|
|
5
|
+
declare const Feedback: ({ message, type }: FeedbackProps) => react_jsx_runtime.JSX.Element;
|
|
34
6
|
|
|
35
7
|
declare const LabeledFormField: ({ inputId, label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
|
|
36
8
|
declare const TitledFormField: ({ label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
|
package/esm/index.js
CHANGED