krl-alfred 2.18.22 → 2.18.23
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/ListGroup/ListGroup.js +1 -1
- package/dist/components/ListGroup/ListGroup.styled.d.ts +2 -0
- package/dist/components/ListGroup/ListGroup.styled.js +5 -3
- package/dist/components/OtpInput/OtpInput.styled.js +1 -1
- package/dist/components/ProductCardCheckbox/ProductCardCheckbox.js +7 -2
- package/dist/components/ProductCardCheckbox/ProductCardCheckbox.styled.d.ts +15 -0
- package/dist/components/ProductCardCheckbox/ProductCardCheckbox.styled.js +14 -3
- package/dist/components/ProductCardRadio/ProductCardRadio.js +8 -2
- package/dist/components/ProductCardRadio/ProductCardRadio.styled.d.ts +17 -0
- package/dist/components/ProductCardRadio/ProductCardRadio.styled.js +16 -3
- package/dist/components/RadioButton/RadioButton.js +3 -0
- package/dist/components/RadioButton/layouts/basic/Basic.d.ts +1 -1
- package/dist/components/RadioButton/layouts/basic/Basic.js +17 -3
- package/dist/components/RadioButton/layouts/basic/Basic.styled.d.ts +4 -0
- package/dist/components/RadioButton/layouts/basic/Basic.styled.js +8 -4
- package/dist/components/RadioButton/layouts/boxed/Boxed.d.ts +1 -1
- package/dist/components/RadioButton/layouts/boxed/Boxed.js +13 -3
- package/dist/components/RadioButton/layouts/boxed/Boxed.styled.d.ts +7 -0
- package/dist/components/RadioButton/layouts/boxed/Boxed.styled.js +11 -4
- package/dist/components/RadioButton/layouts/boxedMd/BoxedMd.d.ts +4 -0
- package/dist/components/RadioButton/layouts/boxedMd/BoxedMd.js +37 -0
- package/dist/components/RadioButton/layouts/boxedMd/BoxedMd.styled.d.ts +6 -0
- package/dist/components/RadioButton/layouts/boxedMd/BoxedMd.styled.js +46 -0
- package/dist/components/RadioButton/layouts/boxedMd/index.d.ts +1 -0
- package/dist/components/RadioButton/layouts/boxedMd/index.js +8 -0
- package/dist/components/RadioButton/layouts/boxedSm/BoxedSm.d.ts +1 -1
- package/dist/components/RadioButton/layouts/boxedSm/BoxedSm.js +14 -3
- package/dist/components/RadioButton/layouts/boxedSm/BoxedSm.styled.d.ts +3 -0
- package/dist/components/RadioButton/layouts/boxedSm/BoxedSm.styled.js +7 -4
- package/dist/components/RadioButton/layouts/color/Color.js +7 -1
- package/dist/components/RadioButton/layouts/color/Color.styled.d.ts +2 -0
- package/dist/components/RadioButton/layouts/color/Color.styled.js +5 -3
- package/dist/components/RadioButton/layouts/horizontal/Horizontal.js +12 -2
- package/dist/components/RadioButton/layouts/horizontal/Horizontal.styled.d.ts +17 -8
- package/dist/components/RadioButton/layouts/horizontal/Horizontal.styled.js +16 -3
- package/dist/components/RadioButton/props.d.ts +4 -0
- package/dist/components/RadioButton/props.js +4 -1
- package/dist/components/RadioButton/stories/RadioButton.stories.d.ts +61 -0
- package/dist/components/RadioButton/stories/RadioButton.stories.js +52 -4
- package/dist/components/RadioGroup/RadioGroup.d.ts +1 -1
- package/dist/components/RadioGroup/RadioGroup.js +5 -4
- package/dist/components/RadioGroup/RadioGroup.styled.d.ts +6 -0
- package/dist/components/RadioGroup/RadioGroup.styled.js +13 -3
- package/dist/components/RadioGroup/props.d.ts +13 -0
- package/dist/components/RadioGroup/props.js +7 -2
- package/dist/components/RadioGroup/stories/RadioGroup.stories.d.ts +129 -1
- package/dist/components/RadioGroup/stories/RadioGroup.stories.js +103 -1
- package/package.json +1 -1
|
@@ -20,6 +20,6 @@ var ListGroup_styled_1 = require("./ListGroup.styled");
|
|
|
20
20
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
21
21
|
var ListGroup = function (_a) {
|
|
22
22
|
var _b = _a.data, data = _b === void 0 ? props_1.ListGroupDefault.data : _b;
|
|
23
|
-
return ((0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupStyled, { children: data === null || data === void 0 ? void 0 : data.map(function (item, key) { return ((0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupItem, { children: (0, jsx_runtime_1.jsxs)(ListGroup_styled_1.ListGroupItemButton, __assign({ "$isActive": item.isActive, onClick: item.onClick, "$hasNotification": item.hasNotification }, { children: [item.icon && ((0, jsx_runtime_1.jsx)(
|
|
23
|
+
return ((0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupStyled, { children: data === null || data === void 0 ? void 0 : data.map(function (item, key) { return ((0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupItem, { children: (0, jsx_runtime_1.jsxs)(ListGroup_styled_1.ListGroupItemButton, __assign({ "$isActive": item.isActive, onClick: item.onClick, "$hasNotification": item.hasNotification }, { children: [item.icon && ((0, jsx_runtime_1.jsx)(ListGroup_styled_1.ItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: item.icon }) })), (0, jsx_runtime_1.jsx)(ListGroup_styled_1.ItemTitle, { children: item.title })] })) }, key)); }) }));
|
|
24
24
|
};
|
|
25
25
|
exports.default = ListGroup;
|
|
@@ -2,4 +2,6 @@
|
|
|
2
2
|
import { ListGroupStyledProps } from "./props";
|
|
3
3
|
export declare const ListGroupStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, keyof ListGroupStyledProps> & ListGroupStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, keyof ListGroupStyledProps> & ListGroupStyledProps, never>>> & string;
|
|
4
4
|
export declare const ListGroupItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof ListGroupStyledProps> & ListGroupStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof ListGroupStyledProps> & ListGroupStyledProps, never>>> & string;
|
|
5
|
+
export declare const ItemIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
6
|
+
export declare const ItemTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
5
7
|
export declare const ListGroupItemButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof ListGroupStyledProps> & ListGroupStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof ListGroupStyledProps> & ListGroupStyledProps, never>>> & string;
|
|
@@ -7,9 +7,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.ListGroupItemButton = exports.ListGroupItem = exports.ListGroupStyled = void 0;
|
|
10
|
+
exports.ListGroupItemButton = exports.ItemTitle = exports.ItemIcon = exports.ListGroupItem = exports.ListGroupStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.ListGroupStyled = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n padding: 0;\n margin: 0;\n"], ["\n display: block;\n padding: 0;\n margin: 0;\n"])));
|
|
13
13
|
exports.ListGroupItem = styled_components_1.default.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: 0;\n margin: 0; \n display: block;\n + li {\n margin-top: 1rem;\n }\n"], ["\n padding: 0;\n margin: 0; \n display: block;\n + li {\n margin-top: 1rem;\n }\n"])));
|
|
14
|
-
exports.
|
|
15
|
-
|
|
14
|
+
exports.ItemIcon = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 1.5rem;\n min-width: 1.5rem;\n height: 1.5rem;\n margin-right: 0.75rem;\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n width: 1.5rem;\n min-width: 1.5rem;\n height: 1.5rem;\n margin-right: 0.75rem;\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
|
|
15
|
+
exports.ItemTitle = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
16
|
+
exports.ListGroupItemButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding: 0 1.5rem;\n margin: 0;\n height: 67px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n border-radius: 0.5rem;\n background-color: ", ";\n cursor: pointer;\n color: ", ";\n border: 0;\n width: 100%;\n position: relative;\n outline: none;\n font:var(--title-bold-16-19);\n transition: all .2s ease;\n &:before{\n content: \"\";\n position: absolute;\n inset: 0;\n user-select: none;\n pointer-events: none;\n border-radius: inherit;\n border: ", ";\n }\n ", "\n ", "\n"], ["\n padding: 0 1.5rem;\n margin: 0;\n height: 67px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n border-radius: 0.5rem;\n background-color: ", ";\n cursor: pointer;\n color: ", ";\n border: 0;\n width: 100%;\n position: relative;\n outline: none;\n font:var(--title-bold-16-19);\n transition: all .2s ease;\n &:before{\n content: \"\";\n position: absolute;\n inset: 0;\n user-select: none;\n pointer-events: none;\n border-radius: inherit;\n border: ", ";\n }\n ", "\n ", "\n"])), function (props) { return props.$isActive ? "#fff" : "var(--dark-opacity-3)"; }, function (props) { return props.$isActive ? "var(--primary)" : "var(--dark)"; }, function (props) { return props.$isActive ? "2px solid var(--primary)" : "none"; }, function (props) { return !props.$isActive && "\n &:hover{\n background-color: var(--primary-opacity-5);\n color: var(--primary);\n }\n "; }, function (props) { return props.$hasNotification && "\n \n &:after{\n content: \"\";\n position: absolute;\n right : 1.5rem;\n top:50%;\n transform:translateY(-50%);\n width:16px;\n height:16px;\n background-color:var(--primary);\n border-radius:50%;\n }\n "; });
|
|
17
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.OtpError = exports.OtpSpan = exports.OtpSpanWrapper = exports.OtpInputWrapper = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.OtpInputWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n \n input {\n background-color: transparent;\n border: none;\n caret-color: transparent;\n cursor: default;\n height: 0;\n opacity: 0;\n outline: none;\n width: 0;\n z-index: 0;\n }\n"], ["\n display: flex;\n flex-direction: column;\n \n input {\n background-color: transparent;\n border: none;\n caret-color: transparent;\n cursor: default;\n height: 0;\n opacity: 0;\n outline: none;\n width: 0;\n z-index: 0;\n }\n"])));
|
|
13
|
-
exports.OtpSpanWrapper = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: inline-flex;\n gap: 18.33px;\n
|
|
13
|
+
exports.OtpSpanWrapper = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: inline-flex;\n gap: 18.33px;\n justify-content: center;\n"], ["\n display: inline-flex;\n gap: 18.33px;\n justify-content: center;\n"])));
|
|
14
14
|
exports.OtpSpan = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border: none;\n width: 48px !important;\n height: 48px;\n border-bottom: 2px solid ", ";\n text-align: center;\n color: ", ";\n font: var(--headline-semi-bold-40-48);\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n\n @keyframes blink-caret {\n from,\n to {\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n }\n\n ", "\n"], ["\n border: none;\n width: 48px !important;\n height: 48px;\n border-bottom: 2px solid ", ";\n text-align: center;\n color: ", ";\n font: var(--headline-semi-bold-40-48);\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n\n @keyframes blink-caret {\n from,\n to {\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n }\n\n ", "\n"])), function (props) { return props.hasError ? 'var(--red)' : 'var(--dark-opacity-10)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; }, function (_a) {
|
|
15
15
|
var active = _a.active, hasError = _a.hasError;
|
|
16
16
|
return active &&
|
|
@@ -18,12 +18,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
18
18
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
19
|
var props_1 = require("./props");
|
|
20
20
|
var ProductCardCheckbox_styled_1 = require("./ProductCardCheckbox.styled");
|
|
21
|
-
var classnames_1 = __importDefault(require("classnames"));
|
|
22
21
|
var Checkbox_1 = __importDefault(require("../Checkbox"));
|
|
23
22
|
var Badges_1 = __importDefault(require("../Badges"));
|
|
24
23
|
var Tooltip_1 = __importDefault(require("../Tooltip"));
|
|
25
24
|
var ProductCardCheckbox = function (_a) {
|
|
26
25
|
var _b = _a.hasCheckbox, hasCheckbox = _b === void 0 ? props_1.ProductCardCheckboxDefault.hasCheckbox : _b, _c = _a.title, title = _c === void 0 ? props_1.ProductCardCheckboxDefault.title : _c, _d = _a.content, content = _d === void 0 ? props_1.ProductCardCheckboxDefault.content : _d, _e = _a.checkboxId, checkboxId = _e === void 0 ? props_1.ProductCardCheckboxDefault.checkboxId : _e, _f = _a.size, size = _f === void 0 ? props_1.ProductCardCheckboxDefault.size : _f, _g = _a.productCardOnChange, productCardOnChange = _g === void 0 ? props_1.ProductCardCheckboxDefault.productCardOnChange : _g, _h = _a.disabled, disabled = _h === void 0 ? props_1.ProductCardCheckboxDefault.disabled : _h, _j = _a.value, value = _j === void 0 ? props_1.ProductCardCheckboxDefault.value : _j, _k = _a.name, name = _k === void 0 ? props_1.ProductCardCheckboxDefault.name : _k, _l = _a.isContentOffset, isContentOffset = _l === void 0 ? props_1.ProductCardCheckboxDefault.isContentOffset : _l, _m = _a.checked, checked = _m === void 0 ? props_1.ProductCardCheckboxDefault.checked : _m, _o = _a.image, image = _o === void 0 ? props_1.ProductCardCheckboxDefault.image : _o, _p = _a.hasBadge, hasBadge = _p === void 0 ? props_1.ProductCardCheckboxDefault.hasBadge : _p, _q = _a.badgeText, badgeText = _q === void 0 ? props_1.ProductCardCheckboxDefault.badgeText : _q, _r = _a.badgeVariant, badgeVariant = _r === void 0 ? props_1.ProductCardCheckboxDefault.badgeVariant : _r, _s = _a.infoText, infoText = _s === void 0 ? props_1.ProductCardCheckboxDefault.infoText : _s, _t = _a.infoTitle, infoTitle = _t === void 0 ? props_1.ProductCardCheckboxDefault.infoTitle : _t, _u = _a.popupWidth, popupWidth = _u === void 0 ? props_1.ProductCardCheckboxDefault.popupWidth : _u, valid = _a.valid;
|
|
27
|
-
|
|
26
|
+
var styledProps = {
|
|
27
|
+
disabled: disabled,
|
|
28
|
+
$isContentOffset: isContentOffset,
|
|
29
|
+
$size: size,
|
|
30
|
+
$hasBadge: hasBadge,
|
|
31
|
+
};
|
|
32
|
+
return ((0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.ProductCardCheckboxStyled, __assign({ htmlFor: checkboxId }, styledProps, { children: (0, jsx_runtime_1.jsxs)(ProductCardCheckbox_styled_1.ProductCardInner, __assign({}, styledProps, { children: [hasBadge && ((0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.BadgeWrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { title: badgeText, layout: "text", variant: badgeVariant }) })), (0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.ProductCardCheckboxContent, __assign({ "$hidden": !hasCheckbox }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: checkboxId, size: size === "large" ? "medium" : "small", label: "", onChange: productCardOnChange, value: value, checked: checked, name: name, disabled: disabled, valid: valid }) })), image && ((0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.ProductCardImg, { children: image })), (0, jsx_runtime_1.jsxs)(ProductCardCheckbox_styled_1.ProductCardText, { children: [(0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.ProductCardTitle, __assign({}, styledProps, { children: title })), (0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.TooltipWrapper, { children: (infoText || infoTitle) && ((0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.InputIcon, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "topRight", popupWidth: popupWidth, popupRight: "-23px", iconWidth: "24px", iconHeight: "24px", title: infoTitle }, { children: (0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.PopupText, { dangerouslySetInnerHTML: { __html: infoText } }) })) })) })] }), content && ((0, jsx_runtime_1.jsxs)(ProductCardCheckbox_styled_1.ProductCardContent, __assign({ htmlFor: "notSelect_".concat(checkboxId) }, styledProps, { children: [(0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.HiddenInput, { id: "notSelect_".concat(checkboxId), readOnly: true, tabIndex: -1 }), content] })))] })) })));
|
|
28
33
|
};
|
|
29
34
|
exports.default = ProductCardCheckbox;
|
|
@@ -1,3 +1,18 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { ProductCardCheckboxStyledProps } from "./props";
|
|
3
|
+
export declare const BadgeWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
4
|
+
export declare const ProductCardCheckboxContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hidden"> & {
|
|
5
|
+
$hidden?: boolean;
|
|
6
|
+
}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hidden"> & {
|
|
7
|
+
$hidden?: boolean;
|
|
8
|
+
}, never>>> & string;
|
|
9
|
+
export declare const ProductCardImg: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
10
|
+
export declare const ProductCardText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
11
|
+
export declare const ProductCardTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardCheckboxStyledProps> & ProductCardCheckboxStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardCheckboxStyledProps> & ProductCardCheckboxStyledProps, never>>> & string;
|
|
12
|
+
export declare const TooltipWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
13
|
+
export declare const InputIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
14
|
+
export declare const PopupText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
15
|
+
export declare const ProductCardContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof ProductCardCheckboxStyledProps> & ProductCardCheckboxStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof ProductCardCheckboxStyledProps> & ProductCardCheckboxStyledProps, never>>> & string;
|
|
16
|
+
export declare const HiddenInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>> & string;
|
|
17
|
+
export declare const ProductCardInner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardCheckboxStyledProps> & ProductCardCheckboxStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardCheckboxStyledProps> & ProductCardCheckboxStyledProps, never>>> & string;
|
|
3
18
|
export declare const ProductCardCheckboxStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof ProductCardCheckboxStyledProps> & ProductCardCheckboxStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof ProductCardCheckboxStyledProps> & ProductCardCheckboxStyledProps, never>>> & string;
|
|
@@ -7,8 +7,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.ProductCardCheckboxStyled = void 0;
|
|
10
|
+
exports.ProductCardCheckboxStyled = exports.ProductCardInner = exports.HiddenInput = exports.ProductCardContent = exports.PopupText = exports.InputIcon = exports.TooltipWrapper = exports.ProductCardTitle = exports.ProductCardText = exports.ProductCardImg = exports.ProductCardCheckboxContent = exports.BadgeWrapper = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.
|
|
14
|
-
|
|
13
|
+
exports.BadgeWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin: 0 auto 1rem 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n text-align: right;\n height: 17px;\n\n > * {\n vertical-align: super;\n display: inline-block;\n }\n"], ["\n margin: 0 auto 1rem 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n text-align: right;\n height: 17px;\n\n > * {\n vertical-align: super;\n display: inline-block;\n }\n"])));
|
|
14
|
+
exports.ProductCardCheckboxContent = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n ", "\n\n > label > div {\n margin-right: 24px;\n\n @media only screen and ", " {\n margin-right: 8px;\n width: 16px;\n height: 16px;\n }\n }\n"], ["\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n ", "\n\n > label > div {\n margin-right: 24px;\n\n @media only screen and ", " {\n margin-right: 8px;\n width: 16px;\n height: 16px;\n }\n }\n"])), function (props) { return props.$hidden && "display: none;"; }, devices_1.devices.md);
|
|
15
|
+
exports.ProductCardImg = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n box-sizing: border-box;\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n"], ["\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n box-sizing: border-box;\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n"])));
|
|
16
|
+
exports.ProductCardText = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
17
|
+
exports.ProductCardTitle = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n min-height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n font: ", ";\n\n @media only screen and ", " {\n font: var(--body-semi-bold-14-17);\n }\n"], ["\n min-height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n font: ", ";\n\n @media only screen and ", " {\n font: var(--body-semi-bold-14-17);\n }\n"])), function (props) { return props.$size === "small" ? "var(--body-semi-bold-14-17)" : "var(--title-semi-bold-16-19)"; }, devices_1.devices.md);
|
|
18
|
+
exports.TooltipWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n user-select: initial !important;\n pointer-events: initial !important;\n padding-left: 1rem;\n"], ["\n user-select: initial !important;\n pointer-events: initial !important;\n padding-left: 1rem;\n"])));
|
|
19
|
+
exports.InputIcon = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject([""], [""])));
|
|
20
|
+
exports.PopupText = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font: var(--caption-medium-12-15);\n\n a {\n color: var(--primary);\n }\n"], ["\n font: var(--caption-medium-12-15);\n\n a {\n color: var(--primary);\n }\n"])));
|
|
21
|
+
exports.ProductCardContent = styled_components_1.default.label(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n margin: 1.5rem auto 0 ", ";\n grid-column-start: 1;\n grid-column-end: 4;\n width: ", ";\n cursor: initial;\n\n @media only screen and ", " {\n margin: 1rem auto 0 0 !important;\n width: 100% !important;\n }\n"], ["\n margin: 1.5rem auto 0 ", ";\n grid-column-start: 1;\n grid-column-end: 4;\n width: ", ";\n cursor: initial;\n\n @media only screen and ", " {\n margin: 1rem auto 0 0 !important;\n width: 100% !important;\n }\n"])), function (props) { return props.$isContentOffset ? '128px' : '0'; }, function (props) { return props.$isContentOffset ? 'calc(100% - 128px)' : '100%'; }, devices_1.devices.md);
|
|
22
|
+
exports.HiddenInput = styled_components_1.default.input(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
|
|
23
|
+
exports.ProductCardInner = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n border: 1px solid var(--dark-opacity-10);\n border-radius: 0.5rem;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n\n @media only screen and ", " {\n padding: 1rem;\n }\n\n ", "\n"], ["\n border: 1px solid var(--dark-opacity-10);\n border-radius: 0.5rem;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n\n @media only screen and ", " {\n padding: 1rem;\n }\n\n ", "\n"])), devices_1.devices.md, function (props) { return props.$size === "small" && "\n padding: 1rem;\n\n ".concat(exports.ProductCardCheckboxContent, " > label > div {\n margin-right: 8px;\n width: 16px;\n height: 16px;\n }\n\n ").concat(exports.ProductCardTitle, " {\n font: var(--body-semi-bold-14-17);\n }\n\n ").concat(exports.ProductCardContent, " {\n margin: 1rem auto 0 0;\n }\n "); });
|
|
24
|
+
exports.ProductCardCheckboxStyled = styled_components_1.default.label(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: block;\n max-width: 634px;\n\n ", "\n"], ["\n display: block;\n max-width: 634px;\n\n ", "\n"])), function (props) { return props.disabled ? "\n user-select:none;\n pointer-events:none;\n " : "\n cursor: pointer;\n "; });
|
|
25
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
|
|
@@ -18,12 +18,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
18
18
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
19
|
var props_1 = require("./props");
|
|
20
20
|
var ProductCardRadio_styled_1 = require("./ProductCardRadio.styled");
|
|
21
|
-
var classnames_1 = __importDefault(require("classnames"));
|
|
22
21
|
var RadioButton_1 = __importDefault(require("../RadioButton"));
|
|
23
22
|
var Badges_1 = __importDefault(require("../Badges"));
|
|
24
23
|
var Tooltip_1 = __importDefault(require("../Tooltip"));
|
|
25
24
|
var ProductCardRadio = function (_a) {
|
|
26
25
|
var _b = _a.hasRadio, hasRadio = _b === void 0 ? props_1.ProductCardRadioDefault.hasRadio : _b, _c = _a.title, title = _c === void 0 ? props_1.ProductCardRadioDefault.title : _c, _d = _a.description, description = _d === void 0 ? props_1.ProductCardRadioDefault.description : _d, _e = _a.content, content = _e === void 0 ? props_1.ProductCardRadioDefault.content : _e, _f = _a.radioId, radioId = _f === void 0 ? props_1.ProductCardRadioDefault.radioId : _f, _g = _a.size, size = _g === void 0 ? props_1.ProductCardRadioDefault.size : _g, _h = _a.productCardOnChange, productCardOnChange = _h === void 0 ? props_1.ProductCardRadioDefault.productCardOnChange : _h, _j = _a.disabled, disabled = _j === void 0 ? props_1.ProductCardRadioDefault.disabled : _j, _k = _a.value, value = _k === void 0 ? props_1.ProductCardRadioDefault.value : _k, _l = _a.name, name = _l === void 0 ? props_1.ProductCardRadioDefault.name : _l, _m = _a.isContentOffset, isContentOffset = _m === void 0 ? props_1.ProductCardRadioDefault.isContentOffset : _m, _o = _a.checked, checked = _o === void 0 ? props_1.ProductCardRadioDefault.checked : _o, _p = _a.image, image = _p === void 0 ? props_1.ProductCardRadioDefault.image : _p, _q = _a.hasBadge, hasBadge = _q === void 0 ? props_1.ProductCardRadioDefault.hasBadge : _q, _r = _a.badgeText, badgeText = _r === void 0 ? props_1.ProductCardRadioDefault.badgeText : _r, _s = _a.badgeVariant, badgeVariant = _s === void 0 ? props_1.ProductCardRadioDefault.badgeVariant : _s, _t = _a.infoText, infoText = _t === void 0 ? props_1.ProductCardRadioDefault.infoText : _t, _u = _a.infoTitle, infoTitle = _u === void 0 ? props_1.ProductCardRadioDefault.infoTitle : _u, _v = _a.popupWidth, popupWidth = _v === void 0 ? props_1.ProductCardRadioDefault.popupWidth : _v, valid = _a.valid;
|
|
27
|
-
|
|
26
|
+
var styledProps = {
|
|
27
|
+
disabled: disabled,
|
|
28
|
+
$isContentOffset: isContentOffset,
|
|
29
|
+
$size: size,
|
|
30
|
+
$hasBadge: hasBadge,
|
|
31
|
+
$checked: checked,
|
|
32
|
+
};
|
|
33
|
+
return ((0, jsx_runtime_1.jsx)(ProductCardRadio_styled_1.ProductCardRadioStyled, __assign({ htmlFor: radioId }, styledProps, { children: (0, jsx_runtime_1.jsxs)(ProductCardRadio_styled_1.ProductCardInner, __assign({}, styledProps, { children: [hasBadge && ((0, jsx_runtime_1.jsx)(ProductCardRadio_styled_1.BadgeWrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { title: badgeText, layout: "text", variant: badgeVariant }) })), (0, jsx_runtime_1.jsx)(ProductCardRadio_styled_1.ProductCardRadioContent, __assign({ "$hidden": !hasRadio }, { children: (0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: radioId, size: size === "large" ? "medium" : "small", label: "", onChange: productCardOnChange, value: value, checked: checked, name: name, disabled: disabled, valid: valid }) })), image && ((0, jsx_runtime_1.jsx)(ProductCardRadio_styled_1.ProductCardImg, { children: image })), (0, jsx_runtime_1.jsxs)(ProductCardRadio_styled_1.ProductCardText, { children: [(0, jsx_runtime_1.jsxs)(ProductCardRadio_styled_1.ProductCardHeadWrapper, { children: [(0, jsx_runtime_1.jsx)(ProductCardRadio_styled_1.ProductCardTitle, __assign({}, styledProps, { children: title })), description && (0, jsx_runtime_1.jsx)(ProductCardRadio_styled_1.ProductCardDesc, { children: description })] }), (0, jsx_runtime_1.jsx)(ProductCardRadio_styled_1.TooltipWrapper, { children: (infoText || infoTitle) && ((0, jsx_runtime_1.jsx)(ProductCardRadio_styled_1.InputIcon, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "topRight", popupWidth: popupWidth, popupRight: "-23px", iconWidth: "24px", iconHeight: "24px", title: infoTitle }, { children: (0, jsx_runtime_1.jsx)(ProductCardRadio_styled_1.PopupText, { dangerouslySetInnerHTML: { __html: infoText } }) })) })) })] }), content && ((0, jsx_runtime_1.jsxs)(ProductCardRadio_styled_1.ProductCardContent, __assign({ htmlFor: "notSelect_".concat(radioId) }, styledProps, { children: [(0, jsx_runtime_1.jsx)(ProductCardRadio_styled_1.HiddenInput, { id: "notSelect_".concat(radioId), readOnly: true, tabIndex: -1 }), content] })))] })) })));
|
|
28
34
|
};
|
|
29
35
|
exports.default = ProductCardRadio;
|
|
@@ -1,3 +1,20 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { ProductCardRadioStyledProps } from "./props";
|
|
3
|
+
export declare const BadgeWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
4
|
+
export declare const ProductCardRadioContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hidden"> & {
|
|
5
|
+
$hidden?: boolean;
|
|
6
|
+
}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hidden"> & {
|
|
7
|
+
$hidden?: boolean;
|
|
8
|
+
}, never>>> & string;
|
|
9
|
+
export declare const ProductCardImg: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
10
|
+
export declare const ProductCardText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
11
|
+
export declare const ProductCardHeadWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
12
|
+
export declare const ProductCardTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof ProductCardRadioStyledProps> & ProductCardRadioStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof ProductCardRadioStyledProps> & ProductCardRadioStyledProps, never>>> & string;
|
|
13
|
+
export declare const ProductCardDesc: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
|
|
14
|
+
export declare const TooltipWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
15
|
+
export declare const InputIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
16
|
+
export declare const PopupText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
17
|
+
export declare const ProductCardContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof ProductCardRadioStyledProps> & ProductCardRadioStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof ProductCardRadioStyledProps> & ProductCardRadioStyledProps, never>>> & string;
|
|
18
|
+
export declare const HiddenInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>> & string;
|
|
19
|
+
export declare const ProductCardInner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardRadioStyledProps> & ProductCardRadioStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardRadioStyledProps> & ProductCardRadioStyledProps, never>>> & string;
|
|
3
20
|
export declare const ProductCardRadioStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof ProductCardRadioStyledProps> & ProductCardRadioStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof ProductCardRadioStyledProps> & ProductCardRadioStyledProps, never>>> & string;
|
|
@@ -7,8 +7,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.ProductCardRadioStyled = void 0;
|
|
10
|
+
exports.ProductCardRadioStyled = exports.ProductCardInner = exports.HiddenInput = exports.ProductCardContent = exports.PopupText = exports.InputIcon = exports.TooltipWrapper = exports.ProductCardDesc = exports.ProductCardTitle = exports.ProductCardHeadWrapper = exports.ProductCardText = exports.ProductCardImg = exports.ProductCardRadioContent = exports.BadgeWrapper = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.
|
|
14
|
-
|
|
13
|
+
exports.BadgeWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin: 0 auto 1rem 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n text-align: right;\n height: 17px;\n\n > * {\n vertical-align: super;\n display: inline-block;\n }\n"], ["\n margin: 0 auto 1rem 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n text-align: right;\n height: 17px;\n\n > * {\n vertical-align: super;\n display: inline-block;\n }\n"])));
|
|
14
|
+
exports.ProductCardRadioContent = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n ", "\n\n > label > div {\n margin-right: 24px;\n\n @media only screen and ", " {\n margin-right: 8px;\n width: 16px;\n height: 16px;\n }\n }\n"], ["\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n ", "\n\n > label > div {\n margin-right: 24px;\n\n @media only screen and ", " {\n margin-right: 8px;\n width: 16px;\n height: 16px;\n }\n }\n"])), function (props) { return props.$hidden && "display: none;"; }, devices_1.devices.md);
|
|
15
|
+
exports.ProductCardImg = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n box-sizing: border-box;\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n"], ["\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n box-sizing: border-box;\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n"])));
|
|
16
|
+
exports.ProductCardText = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
17
|
+
exports.ProductCardHeadWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject([""], [""])));
|
|
18
|
+
exports.ProductCardTitle = styled_components_1.default.strong(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n font: ", ";\n\n @media only screen and ", " {\n font: var(--body-semi-bold-14-17);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n font: ", ";\n\n @media only screen and ", " {\n font: var(--body-semi-bold-14-17);\n }\n"])), function (props) { return props.$size === "small" ? "var(--body-semi-bold-14-17)" : "var(--title-semi-bold-16-19)"; }, devices_1.devices.md);
|
|
19
|
+
exports.ProductCardDesc = styled_components_1.default.p(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin: 0.25rem 0 0 0;\n font: var(--body-regular-14-17);\n color: var(--dark-opacity-50);\n"], ["\n margin: 0.25rem 0 0 0;\n font: var(--body-regular-14-17);\n color: var(--dark-opacity-50);\n"])));
|
|
20
|
+
exports.TooltipWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n user-select: initial !important;\n pointer-events: initial !important;\n padding-left: 1rem;\n"], ["\n user-select: initial !important;\n pointer-events: initial !important;\n padding-left: 1rem;\n"])));
|
|
21
|
+
exports.InputIcon = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject([""], [""])));
|
|
22
|
+
exports.PopupText = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n font: var(--caption-medium-12-15);\n\n a {\n color: var(--primary);\n }\n"], ["\n font: var(--caption-medium-12-15);\n\n a {\n color: var(--primary);\n }\n"])));
|
|
23
|
+
exports.ProductCardContent = styled_components_1.default.label(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n margin: 1.5rem auto 0 ", ";\n grid-column-start: 1;\n grid-column-end: 4;\n width: ", ";\n cursor: initial;\n\n @media only screen and ", " {\n margin: 1rem auto 0 0 !important;\n width: 100% !important;\n }\n"], ["\n margin: 1.5rem auto 0 ", ";\n grid-column-start: 1;\n grid-column-end: 4;\n width: ", ";\n cursor: initial;\n\n @media only screen and ", " {\n margin: 1rem auto 0 0 !important;\n width: 100% !important;\n }\n"])), function (props) { return props.$isContentOffset ? '128px' : '0'; }, function (props) { return props.$isContentOffset ? 'calc(100% - 128px)' : '100%'; }, devices_1.devices.md);
|
|
24
|
+
exports.HiddenInput = styled_components_1.default.input(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
|
|
25
|
+
exports.ProductCardInner = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n border: ", ";\n border-radius: 0.5rem;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n\n @media only screen and ", " {\n padding: 1rem;\n }\n\n ", "\n"], ["\n border: ", ";\n border-radius: 0.5rem;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n\n @media only screen and ", " {\n padding: 1rem;\n }\n\n ", "\n"])), function (props) { return props.$checked ? "2px solid var(--primary)" : "1px solid var(--dark-opacity-10)"; }, devices_1.devices.md, function (props) { return props.$size === "small" && "\n padding: 1rem;\n\n ".concat(exports.ProductCardRadioContent, " > label > div {\n margin-right: 8px;\n width: 16px;\n height: 16px;\n }\n\n ").concat(exports.ProductCardTitle, " {\n font: var(--body-semi-bold-14-17);\n }\n\n ").concat(exports.ProductCardContent, " {\n margin: 1rem auto 0 0;\n }\n "); });
|
|
26
|
+
exports.ProductCardRadioStyled = styled_components_1.default.label(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n display: block;\n max-width: 634px;\n\n ", "\n"], ["\n display: block;\n max-width: 634px;\n\n ", "\n"])), function (props) { return props.disabled ? "\n user-select:none;\n pointer-events:none;\n " : "\n cursor: pointer;\n "; });
|
|
27
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
|
|
@@ -18,6 +18,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
18
18
|
var Basic_1 = __importDefault(require("./layouts/basic/Basic"));
|
|
19
19
|
var Boxed_1 = __importDefault(require("./layouts/boxed/Boxed"));
|
|
20
20
|
var BoxedSm_1 = __importDefault(require("./layouts/boxedSm/BoxedSm"));
|
|
21
|
+
var BoxedMd_1 = __importDefault(require("./layouts/boxedMd/BoxedMd"));
|
|
21
22
|
var boxedWithIcon_1 = __importDefault(require("./layouts/boxedWithIcon"));
|
|
22
23
|
var horizontal_1 = __importDefault(require("./layouts/horizontal"));
|
|
23
24
|
var Color_1 = __importDefault(require("./layouts/color/Color"));
|
|
@@ -29,6 +30,8 @@ var RadioButton = function (props) {
|
|
|
29
30
|
return (0, jsx_runtime_1.jsx)(Boxed_1.default, __assign({}, props));
|
|
30
31
|
case 'boxedSm':
|
|
31
32
|
return (0, jsx_runtime_1.jsx)(BoxedSm_1.default, __assign({}, props));
|
|
33
|
+
case 'boxedMd':
|
|
34
|
+
return (0, jsx_runtime_1.jsx)(BoxedMd_1.default, __assign({}, props));
|
|
32
35
|
case 'boxedWithIcon':
|
|
33
36
|
return (0, jsx_runtime_1.jsx)(boxedWithIcon_1.default, __assign({}, props));
|
|
34
37
|
case 'horizontal':
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { RadioButtonProps } from "./../../props";
|
|
3
|
-
declare const Basic: ({ value, checked, onChange, onClick, name, id, label, disabled, size, description, valid, labelOffset, hasNoneClick, color, alignment, textSize, verticalAlign, isWrapText, readOnly }: RadioButtonProps) => React.JSX.Element;
|
|
3
|
+
declare const Basic: ({ value, checked, onChange, onClick, name, id, label, disabled, size, description, valid, labelOffset, hasNoneClick, color, alignment, textSize, verticalAlign, isWrapText, readOnly, showIndicator, }: RadioButtonProps) => React.JSX.Element;
|
|
4
4
|
export default Basic;
|
|
@@ -16,11 +16,25 @@ var react_1 = require("react");
|
|
|
16
16
|
var props_1 = require("./../../props");
|
|
17
17
|
var Basic_styled_1 = require("./Basic.styled");
|
|
18
18
|
var Basic = function (_a) {
|
|
19
|
-
var value = _a.value, checked = _a.checked, onChange = _a.onChange, onClick = _a.onClick, name = _a.name, _b = _a.id, id = _b === void 0 ? props_1.BasicDefault.id : _b, label = _a.label, disabled = _a.disabled, _c = _a.size, size = _c === void 0 ? props_1.BasicDefault.size : _c, description = _a.description, _d = _a.valid, valid = _d === void 0 ? props_1.BasicDefault.valid : _d, _e = _a.labelOffset, labelOffset = _e === void 0 ? props_1.BasicDefault.labelOffset : _e, _f = _a.hasNoneClick, hasNoneClick = _f === void 0 ? props_1.BasicDefault.hasNoneClick : _f, _g = _a.color, color = _g === void 0 ? props_1.BasicDefault.color : _g, _h = _a.alignment, alignment = _h === void 0 ? props_1.BasicDefault.alignment : _h, _j = _a.textSize, textSize = _j === void 0 ? props_1.BasicDefault.textSize : _j, _k = _a.verticalAlign, verticalAlign = _k === void 0 ? props_1.BasicDefault.verticalAlign : _k, isWrapText = _a.isWrapText, readOnly = _a.readOnly;
|
|
20
|
-
var
|
|
19
|
+
var value = _a.value, checked = _a.checked, onChange = _a.onChange, onClick = _a.onClick, name = _a.name, _b = _a.id, id = _b === void 0 ? props_1.BasicDefault.id : _b, label = _a.label, disabled = _a.disabled, _c = _a.size, size = _c === void 0 ? props_1.BasicDefault.size : _c, description = _a.description, _d = _a.valid, valid = _d === void 0 ? props_1.BasicDefault.valid : _d, _e = _a.labelOffset, labelOffset = _e === void 0 ? props_1.BasicDefault.labelOffset : _e, _f = _a.hasNoneClick, hasNoneClick = _f === void 0 ? props_1.BasicDefault.hasNoneClick : _f, _g = _a.color, color = _g === void 0 ? props_1.BasicDefault.color : _g, _h = _a.alignment, alignment = _h === void 0 ? props_1.BasicDefault.alignment : _h, _j = _a.textSize, textSize = _j === void 0 ? props_1.BasicDefault.textSize : _j, _k = _a.verticalAlign, verticalAlign = _k === void 0 ? props_1.BasicDefault.verticalAlign : _k, isWrapText = _a.isWrapText, readOnly = _a.readOnly, _l = _a.showIndicator, showIndicator = _l === void 0 ? true : _l;
|
|
20
|
+
var _m = (0, react_1.useState)(color), inputColor = _m[0], setInputColor = _m[1];
|
|
21
21
|
(0, react_1.useEffect)(function () {
|
|
22
22
|
setInputColor(window.getComputedStyle(document.body).getPropertyValue('--primary'));
|
|
23
23
|
});
|
|
24
|
-
|
|
24
|
+
var styledProps = {
|
|
25
|
+
$disabled: disabled,
|
|
26
|
+
$checked: checked,
|
|
27
|
+
$size: size,
|
|
28
|
+
$valid: valid,
|
|
29
|
+
$labelOffset: labelOffset,
|
|
30
|
+
$hasNoneClick: hasNoneClick,
|
|
31
|
+
$isWrapText: isWrapText,
|
|
32
|
+
$readOnly: readOnly,
|
|
33
|
+
$color: inputColor,
|
|
34
|
+
$alignment: alignment,
|
|
35
|
+
$textSize: textSize,
|
|
36
|
+
$verticalAlign: verticalAlign,
|
|
37
|
+
};
|
|
38
|
+
return ((0, jsx_runtime_1.jsxs)(Basic_styled_1.BasicStyled, __assign({ htmlFor: id }, styledProps, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "radio", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, onClick: onClick }), showIndicator && (0, jsx_runtime_1.jsx)(Basic_styled_1.Indicator, __assign({}, styledProps)), (label || description) && ((0, jsx_runtime_1.jsxs)(Basic_styled_1.LabelsWrapper, __assign({}, styledProps, { children: [label && ((0, jsx_runtime_1.jsx)(Basic_styled_1.LabelText, __assign({ htmlFor: id }, styledProps, { children: label }))), description && ((0, jsx_runtime_1.jsx)(Basic_styled_1.DescriptionText, __assign({ htmlFor: id }, { children: description })))] })))] })));
|
|
25
39
|
};
|
|
26
40
|
exports.default = Basic;
|
|
@@ -1,3 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { RadioButtonStyledProps } from "./../../props";
|
|
3
|
+
export declare const Indicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never>>> & string;
|
|
4
|
+
export declare const LabelsWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never>>> & string;
|
|
5
|
+
export declare const LabelText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never>>> & string;
|
|
6
|
+
export declare const DescriptionText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>> & string;
|
|
3
7
|
export declare const BasicStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never>>> & string;
|
|
@@ -7,12 +7,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.BasicStyled = void 0;
|
|
10
|
+
exports.BasicStyled = exports.DescriptionText = exports.LabelText = exports.LabelsWrapper = exports.Indicator = void 0;
|
|
11
11
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
12
12
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
13
13
|
var Icon_1 = __importDefault(require("../../../Icon/Icon"));
|
|
14
14
|
var svgToBase64_1 = __importDefault(require("./../../../../utils/svgToBase64"));
|
|
15
|
-
exports.
|
|
15
|
+
exports.Indicator = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex: 0 0 auto;\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: relative;\n margin: ", " ", " 0 0;\n width: ", ";\n height: ", ";\n"], ["\n flex: 0 0 auto;\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: relative;\n margin: ", " ", " 0 0;\n width: ", ";\n height: ", ";\n"])), function (props) { return props.$disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#C2C3CE", name: "RadioButtonElementDisabled" })) : (props.$valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#9763F6", name: "RadioButtonElementUnchecked" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#FF1F1F", name: "RadioButtonElementInvalid" }))); }, function (props) { return props.$alignment === "vertical" ? "0.5rem" : props.$verticalAlign === "flex-start" ? "1px" : 0; }, function (props) { return props.$labelOffset; }, function (props) {
|
|
16
16
|
switch (props.$size) {
|
|
17
17
|
case 'xsmall':
|
|
18
18
|
return "16px";
|
|
@@ -34,7 +34,9 @@ exports.BasicStyled = styled_components_1.default.label(templateObject_1 || (tem
|
|
|
34
34
|
default:
|
|
35
35
|
return "16px";
|
|
36
36
|
}
|
|
37
|
-
}
|
|
37
|
+
});
|
|
38
|
+
exports.LabelsWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n display: grid;\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n padding: ", ";\n color: ", ";\n ", "\n"], ["\n position: relative;\n display: grid;\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n padding: ", ";\n color: ", ";\n ", "\n"])), function (props) { return (props.$disabled ? "not-allowed" : "pointer"); }, function (props) { return props.$verticalAlign === "flex-start" ? "5px 0 0 0" : "0"; }, function (props) { return props.$valid ? 'var(--dark)' : 'var(--red)'; }, function (props) { return !props.$isWrapText && "\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n display: -webkit-inline-box;\n "; });
|
|
39
|
+
exports.LabelText = styled_components_1.default.label(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n cursor: inherit;\n font: ", ";\n"], ["\n display: block;\n cursor: inherit;\n font: ", ";\n"])), function (props) {
|
|
38
40
|
switch (props.$textSize) {
|
|
39
41
|
case 'small':
|
|
40
42
|
return "var(--body-medium-13-16)";
|
|
@@ -46,4 +48,6 @@ exports.BasicStyled = styled_components_1.default.label(templateObject_1 || (tem
|
|
|
46
48
|
return "var(--body-medium-14-17)";
|
|
47
49
|
}
|
|
48
50
|
});
|
|
49
|
-
var
|
|
51
|
+
exports.DescriptionText = styled_components_1.default.label(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: block;\n margin: 0;\n cursor: inherit;\n font: var(--body-medium-14-17);\n color: var(--grey-50);\n"], ["\n display: block;\n margin: 0;\n cursor: inherit;\n font: var(--body-medium-14-17);\n color: var(--grey-50);\n"])));
|
|
52
|
+
exports.BasicStyled = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items:", ";\n justify-content: ", ";\n cursor: pointer;\n ", "\n ", "\n input[type=\"radio\"] {\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked ~ ", " {\n background-image:url('", "');\n }\n }\n"], ["\n position: relative;\n display: flex;\n align-items:", ";\n justify-content: ", ";\n cursor: pointer;\n ", "\n ", "\n input[type=\"radio\"] {\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked ~ ", " {\n background-image:url('", "');\n }\n }\n"])), function (props) { return props.$verticalAlign; }, function (props) { return props.$alignment === "vertical" ? "center" : "flex-start"; }, function (props) { return props.$alignment === "vertical" && "\n flex-direction: column-reverse;\n text-align: center;\n "; }, function (props) { return props.$hasNoneClick && "\n user-select:none;\n pointer-events:none;\n "; }, exports.Indicator, function (props) { return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "".concat(props.$color), name: "RadioButtonElementChecked" })); });
|
|
53
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { RadioButtonProps } from "./../../props";
|
|
3
|
-
declare const Boxed: ({ value, checked, onChange, onClick, name, label, disabled, description, image, hasBadge, badgeText, badgeVariant, labelSm, readOnly, id, size, valid, labelOffset, textSize, color }: RadioButtonProps) => React.JSX.Element;
|
|
3
|
+
declare const Boxed: ({ value, checked, onChange, onClick, name, label, disabled, description, image, hasBadge, badgeText, badgeVariant, labelSm, readOnly, id, size, valid, labelOffset, textSize, color, showIndicator, }: RadioButtonProps) => React.JSX.Element;
|
|
4
4
|
export default Boxed;
|
|
@@ -20,11 +20,21 @@ var props_1 = require("./../../props");
|
|
|
20
20
|
var Boxed_styled_1 = require("./Boxed.styled");
|
|
21
21
|
var Badges_1 = __importDefault(require("../../../Badges"));
|
|
22
22
|
var Boxed = function (_a) {
|
|
23
|
-
var value = _a.value, checked = _a.checked, onChange = _a.onChange, onClick = _a.onClick, name = _a.name, label = _a.label, disabled = _a.disabled, description = _a.description, image = _a.image, hasBadge = _a.hasBadge, badgeText = _a.badgeText, badgeVariant = _a.badgeVariant, labelSm = _a.labelSm, readOnly = _a.readOnly, _b = _a.id, id = _b === void 0 ? props_1.BoxedDefault.id : _b, _c = _a.size, size = _c === void 0 ? props_1.BoxedDefault.size : _c, _d = _a.valid, valid = _d === void 0 ? props_1.BoxedDefault.valid : _d, _e = _a.labelOffset, labelOffset = _e === void 0 ? props_1.BoxedDefault.labelOffset : _e, _f = _a.textSize, textSize = _f === void 0 ? props_1.BoxedDefault.textSize : _f, _g = _a.color, color = _g === void 0 ? props_1.BoxedDefault.color : _g;
|
|
24
|
-
var
|
|
23
|
+
var value = _a.value, checked = _a.checked, onChange = _a.onChange, onClick = _a.onClick, name = _a.name, label = _a.label, disabled = _a.disabled, description = _a.description, image = _a.image, hasBadge = _a.hasBadge, badgeText = _a.badgeText, badgeVariant = _a.badgeVariant, labelSm = _a.labelSm, readOnly = _a.readOnly, _b = _a.id, id = _b === void 0 ? props_1.BoxedDefault.id : _b, _c = _a.size, size = _c === void 0 ? props_1.BoxedDefault.size : _c, _d = _a.valid, valid = _d === void 0 ? props_1.BoxedDefault.valid : _d, _e = _a.labelOffset, labelOffset = _e === void 0 ? props_1.BoxedDefault.labelOffset : _e, _f = _a.textSize, textSize = _f === void 0 ? props_1.BoxedDefault.textSize : _f, _g = _a.color, color = _g === void 0 ? props_1.BoxedDefault.color : _g, _h = _a.showIndicator, showIndicator = _h === void 0 ? true : _h;
|
|
24
|
+
var _j = (0, react_1.useState)(color), inputColor = _j[0], setInputColor = _j[1];
|
|
25
25
|
(0, react_1.useEffect)(function () {
|
|
26
26
|
setInputColor(window.getComputedStyle(document.body).getPropertyValue('--primary'));
|
|
27
27
|
});
|
|
28
|
-
|
|
28
|
+
var styledProps = {
|
|
29
|
+
$disabled: disabled,
|
|
30
|
+
$checked: checked,
|
|
31
|
+
$size: size,
|
|
32
|
+
$valid: valid,
|
|
33
|
+
$labelOffset: labelOffset,
|
|
34
|
+
$readOnly: readOnly,
|
|
35
|
+
$color: inputColor,
|
|
36
|
+
$textSize: textSize,
|
|
37
|
+
};
|
|
38
|
+
return ((0, jsx_runtime_1.jsxs)(Boxed_styled_1.BoxedStyled, __assign({ htmlFor: id }, styledProps, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "radio", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, onClick: onClick, readOnly: readOnly }), showIndicator && (0, jsx_runtime_1.jsx)(Boxed_styled_1.Indicator, __assign({}, styledProps)), (label || description || image) && ((0, jsx_runtime_1.jsxs)(Boxed_styled_1.LabelsWrapper, __assign({}, styledProps, { children: [label && ((0, jsx_runtime_1.jsxs)(Boxed_styled_1.LabelText, __assign({ htmlFor: id }, { children: [label, labelSm && (0, jsx_runtime_1.jsx)(Boxed_styled_1.LabelSm, { children: labelSm })] }))), description && ((0, jsx_runtime_1.jsx)(Boxed_styled_1.DescriptionText, __assign({ htmlFor: id }, { children: description }))), image && ((0, jsx_runtime_1.jsx)(Boxed_styled_1.ImageLabel, __assign({ htmlFor: id }, { children: image })))] }))), hasBadge && ((0, jsx_runtime_1.jsx)(Boxed_styled_1.BoxedBadgesWrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { title: badgeText, layout: "belt", variant: badgeVariant, hasResponsive: true }) }))] })));
|
|
29
39
|
};
|
|
30
40
|
exports.default = Boxed;
|
|
@@ -1,3 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { RadioButtonStyledProps } from "./../../props";
|
|
3
|
+
export declare const Indicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never>>> & string;
|
|
4
|
+
export declare const LabelsWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never>>> & string;
|
|
5
|
+
export declare const LabelText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>> & string;
|
|
6
|
+
export declare const LabelSm: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
|
|
7
|
+
export declare const DescriptionText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>> & string;
|
|
8
|
+
export declare const ImageLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>> & string;
|
|
9
|
+
export declare const BoxedBadgesWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
3
10
|
export declare const BoxedStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof RadioButtonStyledProps> & RadioButtonStyledProps, never>>> & string;
|
|
@@ -7,13 +7,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.BoxedStyled = void 0;
|
|
10
|
+
exports.BoxedStyled = exports.BoxedBadgesWrapper = exports.ImageLabel = exports.DescriptionText = exports.LabelSm = exports.LabelText = exports.LabelsWrapper = exports.Indicator = void 0;
|
|
11
11
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
12
12
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
13
13
|
var Icon_1 = __importDefault(require("../../../Icon/Icon"));
|
|
14
14
|
var svgToBase64_1 = __importDefault(require("./../../../../utils/svgToBase64"));
|
|
15
15
|
var devices_1 = require("../../../../constants/devices");
|
|
16
|
-
exports.
|
|
16
|
+
exports.Indicator = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: absolute;\n left: 12px;\n top: 12px;\n margin: ", ";\n width: ", ";\n height: ", ";\n"], ["\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: absolute;\n left: 12px;\n top: 12px;\n margin: ", ";\n width: ", ";\n height: ", ";\n"])), function (props) { return props.$disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementDisabled" })) : (props.$valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementUnchecked" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementInvalid" }))); }, function (props) { return (props.$size === "small" ? "0 8px 0 0" : "0 16px 0 0"); }, function (props) {
|
|
17
17
|
switch (props.$size) {
|
|
18
18
|
case 'small':
|
|
19
19
|
return "16px";
|
|
@@ -31,5 +31,12 @@ exports.BoxedStyled = styled_components_1.default.label(templateObject_1 || (tem
|
|
|
31
31
|
default:
|
|
32
32
|
return "16px";
|
|
33
33
|
}
|
|
34
|
-
}
|
|
35
|
-
var
|
|
34
|
+
});
|
|
35
|
+
exports.LabelsWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n row-gap: 4px;\n cursor: ", ";\n margin: 0;\n color: ", ";\n padding: 0;\n display: grid;\n text-align: center;\n position: relative;\n\n @media only screen and ", " {\n row-gap: 4px;\n }\n"], ["\n row-gap: 4px;\n cursor: ", ";\n margin: 0;\n color: ", ";\n padding: 0;\n display: grid;\n text-align: center;\n position: relative;\n\n @media only screen and ", " {\n row-gap: 4px;\n }\n"])), function (props) { return (props.$disabled ? "not-allowed" : "pointer"); }, function (props) { return props.$valid ? 'var(--dark)' : 'var(--red)'; }, devices_1.devices.lg);
|
|
36
|
+
exports.LabelText = styled_components_1.default.label(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n margin: 0 0 4px 0;\n vertical-align: middle;\n cursor: pointer;\n font:var(--title-bold-16-19);\n\n @media only screen and ", " {\n margin: 0;\n }\n"], ["\n display: block;\n margin: 0 0 4px 0;\n vertical-align: middle;\n cursor: pointer;\n font:var(--title-bold-16-19);\n\n @media only screen and ", " {\n margin: 0;\n }\n"])), devices_1.devices.lg);
|
|
37
|
+
exports.LabelSm = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font:var(--body-regular-14-17);\n margin-left: 0.25rem;\n"], ["\n font:var(--body-regular-14-17);\n margin-left: 0.25rem;\n"])));
|
|
38
|
+
exports.DescriptionText = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: block;\n vertical-align: middle;\n margin: 0;\n cursor: pointer;\n font:var(--body-regular-14-17);\n\n @media only screen and ", " {\n margin: 0 0 0 4px;\n }\n"], ["\n display: block;\n vertical-align: middle;\n margin: 0;\n cursor: pointer;\n font:var(--body-regular-14-17);\n\n @media only screen and ", " {\n margin: 0 0 0 4px;\n }\n"])), devices_1.devices.lg);
|
|
39
|
+
exports.ImageLabel = styled_components_1.default.label(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: block;\n cursor: pointer;\n"], ["\n display: block;\n cursor: pointer;\n"])));
|
|
40
|
+
exports.BoxedBadgesWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: absolute;\n right: -9px;\n top: -8px;\n transform: rotate(90deg);\n\n @media only screen and ", " {\n right: -6px;\n top: -6px;\n }\n"], ["\n position: absolute;\n right: -9px;\n top: -8px;\n transform: rotate(90deg);\n\n @media only screen and ", " {\n right: -6px;\n top: -6px;\n }\n"])), devices_1.devices.lg);
|
|
41
|
+
exports.BoxedStyled = styled_components_1.default.label(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n border: 1px solid var(--dark-opacity-10);\n position: relative;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 128px;\n cursor: ", ";\n\n @media only screen and ", " {\n height: 69px;\n }\n\n input[type=\"radio\"] {\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked ~ ", " {\n background-image:url('", "');\n }\n\n &:checked ", " {\n ~ ", " {\n &:before {\n content: \"\";\n position: absolute;\n inset: -1px;\n border-radius: 0.5rem;\n user-select: none;\n pointer-events: none;\n }\n }\n }\n\n &:checked {\n ~ ", " {\n &:before {\n border: 2px solid var(--primary) !important;\n }\n }\n }\n\n ", "\n }\n"], ["\n border: 1px solid var(--dark-opacity-10);\n position: relative;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 128px;\n cursor: ", ";\n\n @media only screen and ", " {\n height: 69px;\n }\n\n input[type=\"radio\"] {\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked ~ ", " {\n background-image:url('", "');\n }\n\n &:checked ", " {\n ~ ", " {\n &:before {\n content: \"\";\n position: absolute;\n inset: -1px;\n border-radius: 0.5rem;\n user-select: none;\n pointer-events: none;\n }\n }\n }\n\n &:checked {\n ~ ", " {\n &:before {\n border: 2px solid var(--primary) !important;\n }\n }\n }\n\n ", "\n }\n"])), function (props) { return (props.$disabled ? "not-allowed" : "pointer"); }, devices_1.devices.lg, exports.Indicator, function (props) { return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "".concat(props.$color), name: "RadioButtonElementChecked" })); }, function (props) { return !props.$readOnly && " , &:hover"; }, exports.LabelsWrapper, exports.LabelsWrapper, function (props) { return !props.$readOnly && " \n &:hover {\n ~ ".concat(exports.LabelsWrapper, " {\n &:before {\n border: 1px solid var(--primary-hover);\n }\n }\n }\n "); });
|
|
42
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { RadioButtonProps } from "./../../props";
|
|
3
|
+
declare const BoxedMd: ({ value, checked, onChange, onClick, name, label, disabled, description, image, readOnly, id, size, valid, labelOffset, textSize, color, showIndicator, }: RadioButtonProps) => import("react").JSX.Element;
|
|
4
|
+
export default BoxedMd;
|