@egov3/system-design 1.3.169 → 1.3.170
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/cjs/baseComponents/Checkbox/Checkbox.module.css.js +2 -2
- package/dist/cjs/baseComponents/Checkbox/index.js +7 -2
- package/dist/cjs/baseComponents/Checkbox/index.js.map +1 -1
- package/dist/esm/baseComponents/Checkbox/Checkbox.module.css.js +2 -2
- package/dist/esm/baseComponents/Checkbox/index.js +7 -2
- package/dist/esm/baseComponents/Checkbox/index.js.map +1 -1
- package/dist/types/baseComponents/Checkbox/index.d.ts +4 -1
- package/package.json +1 -1
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var css_248z = ".Checkbox-module_checkbox__PIXrC {\n display: flex;\n align-items: center;\n cursor: pointer;\n padding: 8px 0;\n gap: 12px;\n}\n\n.Checkbox-module_checkbox__PIXrC input {\n position: absolute;\n width: 1px;\n height: 1px;\n clip-path: inset(50%);\n}\n\n.Checkbox-module_checkboxControl__LINlA {\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n}\n\n.Checkbox-module_disabled__DZku2 {\n cursor: not-allowed;\n color: var(--text-disabled-color);\n}\n";
|
|
6
|
-
var styles = {"checkbox":"Checkbox-module_checkbox__PIXrC","checkboxControl":"Checkbox-module_checkboxControl__LINlA","disabled":"Checkbox-module_disabled__DZku2"};
|
|
5
|
+
var css_248z = ".Checkbox-module_checkbox__PIXrC {\n display: flex;\n align-items: center;\n cursor: pointer;\n padding: 8px 0;\n gap: 12px;\n}\n\n.Checkbox-module_checkbox__PIXrC input {\n position: absolute;\n width: 1px;\n height: 1px;\n clip-path: inset(50%);\n}\n\n.Checkbox-module_checkboxControl__LINlA {\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n}\n\n.Checkbox-module_labelGroupWrap__S5yei {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.Checkbox-module_hintText__chlIf {\n width: fit-content;\n color: var(--text-secondary);\n}\n\n.Checkbox-module_disabled__DZku2 {\n cursor: not-allowed;\n color: var(--text-disabled-color);\n}\n.Checkbox-module_labelWrap__wXwTk {\n display: flex;\n gap: 4px;\n flex-wrap: wrap;\n}\n.Checkbox-module_action__kP-ng {\n border: 0;\n padding: 0;\n background: transparent;\n color: var(--text-accent);\n font: inherit;\n cursor: pointer;\n}\n";
|
|
6
|
+
var styles = {"checkbox":"Checkbox-module_checkbox__PIXrC","checkboxControl":"Checkbox-module_checkboxControl__LINlA","labelGroupWrap":"Checkbox-module_labelGroupWrap__S5yei","hintText":"Checkbox-module_hintText__chlIf","disabled":"Checkbox-module_disabled__DZku2","labelWrap":"Checkbox-module_labelWrap__wXwTk","action":"Checkbox-module_action__kP-ng"};
|
|
7
7
|
function styleInject(css, options) {
|
|
8
8
|
if (typeof document === 'undefined') return;
|
|
9
9
|
const head = document.head || document.getElementsByTagName('head')[0];
|
|
@@ -16,13 +16,18 @@ const getIconColor = (checked, disabled) => {
|
|
|
16
16
|
}
|
|
17
17
|
return "var(--icon-tertiary)";
|
|
18
18
|
};
|
|
19
|
-
const Checkbox = ({ label, checked, setChecked, disabled = false, }) => {
|
|
19
|
+
const Checkbox = ({ label, checked, setChecked, disabled = false, hintText, actionLabel, onActionClick, }) => {
|
|
20
20
|
const handleChange = (event) => {
|
|
21
21
|
setChecked(event.target.checked);
|
|
22
22
|
};
|
|
23
|
+
const handleActionClick = (event) => {
|
|
24
|
+
event.preventDefault();
|
|
25
|
+
event.stopPropagation();
|
|
26
|
+
onActionClick?.(event);
|
|
27
|
+
};
|
|
23
28
|
const CheckboxIcon = checked ? CheckboxEmptyFilled.CheckboxEmptyFilledIcon : CheckboxEmpty.CheckboxEmptyIcon;
|
|
24
29
|
const iconColor = getIconColor(checked, disabled);
|
|
25
|
-
return (jsxRuntime.jsxs("label", { "data-testid": "Checkbox_LABEL", className: joinClasses.joinClasses(Checkbox_module.default.checkbox, disabled ? Checkbox_module.default.disabled : undefined), children: [jsxRuntime.jsx("input", { "data-testid": "Checkbox_INPUT", type: "checkbox", checked: checked, onChange: handleChange, disabled: disabled }), jsxRuntime.jsx(CheckboxIcon, { "data-testid": "Checkbox_CONTROL", className: Checkbox_module.default.checkboxControl, "aria-hidden": "true", fill: iconColor }), jsxRuntime.jsx("span", { "data-testid": "Checkbox_TEXT", className: typography_module.default.body2Regular, children: label })] }));
|
|
30
|
+
return (jsxRuntime.jsxs("label", { "data-testid": "Checkbox_LABEL", className: joinClasses.joinClasses(Checkbox_module.default.checkbox, disabled ? Checkbox_module.default.disabled : undefined), children: [jsxRuntime.jsx("input", { "data-testid": "Checkbox_INPUT", type: "checkbox", checked: checked, onChange: handleChange, disabled: disabled }), jsxRuntime.jsx(CheckboxIcon, { "data-testid": "Checkbox_CONTROL", className: Checkbox_module.default.checkboxControl, "aria-hidden": "true", fill: iconColor }), jsxRuntime.jsxs("div", { className: Checkbox_module.default.labelGroupWrap, "data-testid": "Checkbox_LABEL_WRAP", children: [jsxRuntime.jsxs("div", { className: Checkbox_module.default.labelWrap, "data-testid": "Checkbox_LABEL", children: [jsxRuntime.jsx("span", { "data-testid": "Checkbox_TEXT", className: typography_module.default.body2Regular, children: label }), actionLabel && (jsxRuntime.jsx("button", { type: "button", className: Checkbox_module.default.action, onClick: handleActionClick, "data-testid": "Checkbox_ACTION", children: jsxRuntime.jsx("span", { "data-testid": "Checkbox_ACTION_TEXT", className: typography_module.default.body2Regular, children: actionLabel }) }))] }), hintText && hintText.length > 0 && (jsxRuntime.jsx("span", { "data-testid": "CheckboxHint_TEXT", className: joinClasses.joinClasses(Checkbox_module.default.hintText, typography_module.default.caption1Regular), children: hintText }))] })] }));
|
|
26
31
|
};
|
|
27
32
|
|
|
28
33
|
exports.Checkbox = Checkbox;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/baseComponents/Checkbox/index.tsx"],"sourcesContent":[null],"names":["CheckboxFilledIcon","CheckboxEmptyIcon","_jsxs","joinClasses","styles","_jsx","typography"],"mappings":";;;;;;;;;
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/baseComponents/Checkbox/index.tsx"],"sourcesContent":[null],"names":["CheckboxFilledIcon","CheckboxEmptyIcon","_jsxs","joinClasses","styles","_jsx","typography"],"mappings":";;;;;;;;;AAiBA,MAAM,YAAY,GAAG,CAAC,OAAgB,EAAE,QAAiB,KAAI;IAC3D,IAAI,QAAQ,EAAE;AACZ,QAAA,OAAO,4BAA4B;IACrC;IACA,IAAI,OAAO,EAAE;AACX,QAAA,OAAO,0BAA0B;IACnC;AACA,IAAA,OAAO,sBAAsB;AAC/B,CAAC;MAEY,QAAQ,GAAG,CAAC,EACvB,KAAK,EACL,OAAO,EACP,UAAU,EACV,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,WAAW,EACX,aAAa,GACE,KAAI;AACnB,IAAA,MAAM,YAAY,GAAG,CAAC,KAA0C,KAAI;AAClE,QAAA,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;AAClC,IAAA,CAAC;AACD,IAAA,MAAM,iBAAiB,GAA+C,CACpE,KAAK,KACH;QACF,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,aAAa,GAAG,KAAK,CAAC;AACxB,IAAA,CAAC;IACD,MAAM,YAAY,GAAG,OAAO,GAAGA,2CAAkB,GAAGC,+BAAiB;IACrE,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,EAAE,QAAQ,CAAC;AAEjD,IAAA,QACEC,eAAA,CAAA,OAAA,EAAA,EAAA,aAAA,EACc,gBAAgB,EAC5B,SAAS,EAAEC,uBAAW,CACpBC,uBAAM,CAAC,QAAQ,EACf,QAAQ,GAAGA,uBAAM,CAAC,QAAQ,GAAG,SAAS,CACvC,EAAA,QAAA,EAAA,CAEDC,yCACc,gBAAgB,EAC5B,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAAA,CAClB,EACFA,eAAC,YAAY,EAAA,EAAA,aAAA,EACC,kBAAkB,EAC9B,SAAS,EAAED,uBAAM,CAAC,eAAe,iBACrB,MAAM,EAClB,IAAI,EAAE,SAAS,EAAA,CACf,EACFF,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEE,uBAAM,CAAC,cAAc,EAAA,aAAA,EAAc,qBAAqB,EAAA,QAAA,EAAA,CACtEF,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEE,uBAAM,CAAC,SAAS,EAAA,aAAA,EAAc,gBAAgB,EAAA,QAAA,EAAA,CAC5DC,wCAAkB,eAAe,EAAC,SAAS,EAAEC,yBAAU,CAAC,YAAY,EAAA,QAAA,EACjE,KAAK,GACD,EACN,WAAW,KACVD,2BACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAED,uBAAM,CAAC,MAAM,EACxB,OAAO,EAAE,iBAAiB,EAAA,aAAA,EACd,iBAAiB,EAAA,QAAA,EAE7BC,cAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EACc,sBAAsB,EAClC,SAAS,EAAEC,yBAAU,CAAC,YAAY,EAAA,QAAA,EAEjC,WAAW,EAAA,CACP,EAAA,CACA,CACV,CAAA,EAAA,CACG,EAEL,QAAQ,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,KAC9BD,wCACc,mBAAmB,EAC/B,SAAS,EAAEF,uBAAW,CAACC,uBAAM,CAAC,QAAQ,EAAEE,yBAAU,CAAC,eAAe,CAAC,YAElE,QAAQ,EAAA,CACJ,CACR,CAAA,EAAA,CACG,CAAA,EAAA,CACA;AAEZ;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
var css_248z = ".Checkbox-module_checkbox__PIXrC {\n display: flex;\n align-items: center;\n cursor: pointer;\n padding: 8px 0;\n gap: 12px;\n}\n\n.Checkbox-module_checkbox__PIXrC input {\n position: absolute;\n width: 1px;\n height: 1px;\n clip-path: inset(50%);\n}\n\n.Checkbox-module_checkboxControl__LINlA {\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n}\n\n.Checkbox-module_disabled__DZku2 {\n cursor: not-allowed;\n color: var(--text-disabled-color);\n}\n";
|
|
2
|
-
var styles = {"checkbox":"Checkbox-module_checkbox__PIXrC","checkboxControl":"Checkbox-module_checkboxControl__LINlA","disabled":"Checkbox-module_disabled__DZku2"};
|
|
1
|
+
var css_248z = ".Checkbox-module_checkbox__PIXrC {\n display: flex;\n align-items: center;\n cursor: pointer;\n padding: 8px 0;\n gap: 12px;\n}\n\n.Checkbox-module_checkbox__PIXrC input {\n position: absolute;\n width: 1px;\n height: 1px;\n clip-path: inset(50%);\n}\n\n.Checkbox-module_checkboxControl__LINlA {\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n}\n\n.Checkbox-module_labelGroupWrap__S5yei {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.Checkbox-module_hintText__chlIf {\n width: fit-content;\n color: var(--text-secondary);\n}\n\n.Checkbox-module_disabled__DZku2 {\n cursor: not-allowed;\n color: var(--text-disabled-color);\n}\n.Checkbox-module_labelWrap__wXwTk {\n display: flex;\n gap: 4px;\n flex-wrap: wrap;\n}\n.Checkbox-module_action__kP-ng {\n border: 0;\n padding: 0;\n background: transparent;\n color: var(--text-accent);\n font: inherit;\n cursor: pointer;\n}\n";
|
|
2
|
+
var styles = {"checkbox":"Checkbox-module_checkbox__PIXrC","checkboxControl":"Checkbox-module_checkboxControl__LINlA","labelGroupWrap":"Checkbox-module_labelGroupWrap__S5yei","hintText":"Checkbox-module_hintText__chlIf","disabled":"Checkbox-module_disabled__DZku2","labelWrap":"Checkbox-module_labelWrap__wXwTk","action":"Checkbox-module_action__kP-ng"};
|
|
3
3
|
function styleInject(css, options) {
|
|
4
4
|
if (typeof document === 'undefined') return;
|
|
5
5
|
const head = document.head || document.getElementsByTagName('head')[0];
|
|
@@ -14,13 +14,18 @@ const getIconColor = (checked, disabled) => {
|
|
|
14
14
|
}
|
|
15
15
|
return "var(--icon-tertiary)";
|
|
16
16
|
};
|
|
17
|
-
const Checkbox = ({ label, checked, setChecked, disabled = false, }) => {
|
|
17
|
+
const Checkbox = ({ label, checked, setChecked, disabled = false, hintText, actionLabel, onActionClick, }) => {
|
|
18
18
|
const handleChange = (event) => {
|
|
19
19
|
setChecked(event.target.checked);
|
|
20
20
|
};
|
|
21
|
+
const handleActionClick = (event) => {
|
|
22
|
+
event.preventDefault();
|
|
23
|
+
event.stopPropagation();
|
|
24
|
+
onActionClick?.(event);
|
|
25
|
+
};
|
|
21
26
|
const CheckboxIcon = checked ? CheckboxEmptyFilledIcon : CheckboxEmptyIcon;
|
|
22
27
|
const iconColor = getIconColor(checked, disabled);
|
|
23
|
-
return (jsxs("label", { "data-testid": "Checkbox_LABEL", className: joinClasses(styles.checkbox, disabled ? styles.disabled : undefined), children: [jsx("input", { "data-testid": "Checkbox_INPUT", type: "checkbox", checked: checked, onChange: handleChange, disabled: disabled }), jsx(CheckboxIcon, { "data-testid": "Checkbox_CONTROL", className: styles.checkboxControl, "aria-hidden": "true", fill: iconColor }), jsx("span", { "data-testid": "Checkbox_TEXT", className: typography.body2Regular, children: label })] }));
|
|
28
|
+
return (jsxs("label", { "data-testid": "Checkbox_LABEL", className: joinClasses(styles.checkbox, disabled ? styles.disabled : undefined), children: [jsx("input", { "data-testid": "Checkbox_INPUT", type: "checkbox", checked: checked, onChange: handleChange, disabled: disabled }), jsx(CheckboxIcon, { "data-testid": "Checkbox_CONTROL", className: styles.checkboxControl, "aria-hidden": "true", fill: iconColor }), jsxs("div", { className: styles.labelGroupWrap, "data-testid": "Checkbox_LABEL_WRAP", children: [jsxs("div", { className: styles.labelWrap, "data-testid": "Checkbox_LABEL", children: [jsx("span", { "data-testid": "Checkbox_TEXT", className: typography.body2Regular, children: label }), actionLabel && (jsx("button", { type: "button", className: styles.action, onClick: handleActionClick, "data-testid": "Checkbox_ACTION", children: jsx("span", { "data-testid": "Checkbox_ACTION_TEXT", className: typography.body2Regular, children: actionLabel }) }))] }), hintText && hintText.length > 0 && (jsx("span", { "data-testid": "CheckboxHint_TEXT", className: joinClasses(styles.hintText, typography.caption1Regular), children: hintText }))] })] }));
|
|
24
29
|
};
|
|
25
30
|
|
|
26
31
|
export { Checkbox };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/baseComponents/Checkbox/index.tsx"],"sourcesContent":[null],"names":["CheckboxFilledIcon","_jsxs","_jsx"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/baseComponents/Checkbox/index.tsx"],"sourcesContent":[null],"names":["CheckboxFilledIcon","_jsxs","_jsx"],"mappings":";;;;;;;AAiBA,MAAM,YAAY,GAAG,CAAC,OAAgB,EAAE,QAAiB,KAAI;IAC3D,IAAI,QAAQ,EAAE;AACZ,QAAA,OAAO,4BAA4B;IACrC;IACA,IAAI,OAAO,EAAE;AACX,QAAA,OAAO,0BAA0B;IACnC;AACA,IAAA,OAAO,sBAAsB;AAC/B,CAAC;MAEY,QAAQ,GAAG,CAAC,EACvB,KAAK,EACL,OAAO,EACP,UAAU,EACV,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,WAAW,EACX,aAAa,GACE,KAAI;AACnB,IAAA,MAAM,YAAY,GAAG,CAAC,KAA0C,KAAI;AAClE,QAAA,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;AAClC,IAAA,CAAC;AACD,IAAA,MAAM,iBAAiB,GAA+C,CACpE,KAAK,KACH;QACF,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,aAAa,GAAG,KAAK,CAAC;AACxB,IAAA,CAAC;IACD,MAAM,YAAY,GAAG,OAAO,GAAGA,uBAAkB,GAAG,iBAAiB;IACrE,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,EAAE,QAAQ,CAAC;AAEjD,IAAA,QACEC,IAAA,CAAA,OAAA,EAAA,EAAA,aAAA,EACc,gBAAgB,EAC5B,SAAS,EAAE,WAAW,CACpB,MAAM,CAAC,QAAQ,EACf,QAAQ,GAAG,MAAM,CAAC,QAAQ,GAAG,SAAS,CACvC,EAAA,QAAA,EAAA,CAEDC,8BACc,gBAAgB,EAC5B,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAAA,CAClB,EACFA,IAAC,YAAY,EAAA,EAAA,aAAA,EACC,kBAAkB,EAC9B,SAAS,EAAE,MAAM,CAAC,eAAe,iBACrB,MAAM,EAClB,IAAI,EAAE,SAAS,EAAA,CACf,EACFD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,cAAc,EAAA,aAAA,EAAc,qBAAqB,EAAA,QAAA,EAAA,CACtEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,SAAS,EAAA,aAAA,EAAc,gBAAgB,EAAA,QAAA,EAAA,CAC5DC,6BAAkB,eAAe,EAAC,SAAS,EAAE,UAAU,CAAC,YAAY,EAAA,QAAA,EACjE,KAAK,GACD,EACN,WAAW,KACVA,gBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,MAAM,EACxB,OAAO,EAAE,iBAAiB,EAAA,aAAA,EACd,iBAAiB,EAAA,QAAA,EAE7BA,GAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EACc,sBAAsB,EAClC,SAAS,EAAE,UAAU,CAAC,YAAY,EAAA,QAAA,EAEjC,WAAW,EAAA,CACP,EAAA,CACA,CACV,CAAA,EAAA,CACG,EAEL,QAAQ,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,KAC9BA,6BACc,mBAAmB,EAC/B,SAAS,EAAE,WAAW,CAAC,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,eAAe,CAAC,YAElE,QAAQ,EAAA,CACJ,CACR,CAAA,EAAA,CACG,CAAA,EAAA,CACA;AAEZ;;;;"}
|
|
@@ -5,8 +5,11 @@ interface ICheckboxProps {
|
|
|
5
5
|
checked: boolean;
|
|
6
6
|
setChecked: (checked: boolean) => void;
|
|
7
7
|
disabled?: boolean;
|
|
8
|
+
hintText?: string;
|
|
9
|
+
actionLabel?: string;
|
|
10
|
+
onActionClick?: react__default.MouseEventHandler<HTMLButtonElement>;
|
|
8
11
|
}
|
|
9
|
-
declare const Checkbox: ({ label, checked, setChecked, disabled, }: ICheckboxProps) => react__default.JSX.Element;
|
|
12
|
+
declare const Checkbox: ({ label, checked, setChecked, disabled, hintText, actionLabel, onActionClick, }: ICheckboxProps) => react__default.JSX.Element;
|
|
10
13
|
|
|
11
14
|
export { Checkbox };
|
|
12
15
|
export type { ICheckboxProps };
|