krl-alfred 1.81.1 → 1.81.2
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/ProductCardCheckbox/ProductCardCheckbox.js +3 -2
- package/dist/components/ProductCardCheckbox/ProductCardCheckbox.styled.js +1 -1
- package/dist/components/ProductCardCheckbox/props.js +1 -0
- package/dist/components/ProductCardCheckbox/stories/ProductCardCheckbox.stories.js +2 -1
- package/package.json +1 -1
|
@@ -20,8 +20,9 @@ var ProductCardCheckbox_styled_1 = require("./ProductCardCheckbox.styled");
|
|
|
20
20
|
var classnames_1 = __importDefault(require("classnames"));
|
|
21
21
|
var Checkbox_1 = __importDefault(require("../Checkbox"));
|
|
22
22
|
var Badges_1 = __importDefault(require("../Badges"));
|
|
23
|
+
var Tooltip_1 = __importDefault(require("../Tooltip"));
|
|
23
24
|
var ProductCardCheckbox = function (_a) {
|
|
24
|
-
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, valid = _a.valid;
|
|
25
|
-
return ((0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.ProductCardCheckboxStyled, __assign({ htmlFor: checkboxId, disabled: disabled, "$isContentOffset": isContentOffset, "$size": size, "$hasBadge": hasBadge }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardInner" }, { children: [hasBadge && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "badgeWrapper" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { title: badgeText, layout: "text", variant: badgeVariant }) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)({ "hidden": !hasCheckbox }, "productCardCheckboxContent") }, { 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)("div", __assign({ className: "productCardImg" }, { children: image }))), (0, jsx_runtime_1.
|
|
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, valid = _a.valid;
|
|
26
|
+
return ((0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.ProductCardCheckboxStyled, __assign({ htmlFor: checkboxId, disabled: disabled, "$isContentOffset": isContentOffset, "$size": size, "$hasBadge": hasBadge }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardInner" }, { children: [hasBadge && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "badgeWrapper" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { title: badgeText, layout: "text", variant: badgeVariant }) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)({ "hidden": !hasCheckbox }, "productCardCheckboxContent") }, { 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)("div", __assign({ className: "productCardImg" }, { children: image }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardText" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardTitle" }, { children: title })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "tooltipWrapper" }, { children: infoText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "topRight", popupWidth: "160px", popupRight: "-10px", iconWidth: "24px", iconHeight: "24px" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "popupText", dangerouslySetInnerHTML: { __html: infoText } }) })) }))) }))] })), content && (0, jsx_runtime_1.jsxs)("label", __assign({ htmlFor: "notSelect_".concat(checkboxId), className: "productCardContent" }, { children: [(0, jsx_runtime_1.jsx)("input", { id: "notSelect_".concat(checkboxId), style: { display: "none" } }), content] }))] })) })));
|
|
26
27
|
};
|
|
27
28
|
exports.default = ProductCardCheckbox;
|
|
@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.ProductCardCheckboxStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.ProductCardCheckboxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n max-width: 634px;\n ", "\n .productCardInner {\n
|
|
13
|
+
exports.ProductCardCheckboxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n max-width: 634px;\n\n ", "\n .productCardInner {\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 @media only screen and ", " {\n padding: 24px 16px;\n }\n\n .badgeWrapper {\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\n .productCardCheckboxContent {\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n\n &:is(.hidden) {\n display: none;\n }\n\n .indicator {\n margin-right: 24px;\n @media only screen and ", " {\n margin-right: 8px;\n width: 16px;\n height: 16px;\n }\n }\n }\n\n .productCardImg {\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\n .productCardText {\n display: flex;\n align-items: center;\n justify-content: space-between;\n .productCardTitle {\n min-height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n font: var(--title-semi-bold-16-19);\n @media only screen and ", " {\n font: var(--body-semi-bold-14-17);\n }\n }\n .tooltipWrapper{\n user-select: initial !important;\n pointer-events: initial !important;\n padding-left: 1rem;\n @media only screen and ", " {\n svg{\n width: 1rem;\n height: 1rem;\n }\n }\n }\n }\n\n .productCardContent {\n margin: 1.5rem auto 0 ", ";\n grid-column-start: 1;\n grid-column-end: 4;\n width: ", ";\n cursor: initial;\n @media only screen and ", " {\n margin: 1rem auto 0 0 !important;\n width: 100% !important;\n }\n }\n }\n\n ", "\n"], ["\n display: block;\n max-width: 634px;\n\n ", "\n .productCardInner {\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 @media only screen and ", " {\n padding: 24px 16px;\n }\n\n .badgeWrapper {\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\n .productCardCheckboxContent {\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n\n &:is(.hidden) {\n display: none;\n }\n\n .indicator {\n margin-right: 24px;\n @media only screen and ", " {\n margin-right: 8px;\n width: 16px;\n height: 16px;\n }\n }\n }\n\n .productCardImg {\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\n .productCardText {\n display: flex;\n align-items: center;\n justify-content: space-between;\n .productCardTitle {\n min-height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n font: var(--title-semi-bold-16-19);\n @media only screen and ", " {\n font: var(--body-semi-bold-14-17);\n }\n }\n .tooltipWrapper{\n user-select: initial !important;\n pointer-events: initial !important;\n padding-left: 1rem;\n @media only screen and ", " {\n svg{\n width: 1rem;\n height: 1rem;\n }\n }\n }\n }\n\n .productCardContent {\n margin: 1.5rem auto 0 ", ";\n grid-column-start: 1;\n grid-column-end: 4;\n width: ", ";\n cursor: initial;\n @media only screen and ", " {\n margin: 1rem auto 0 0 !important;\n width: 100% !important;\n }\n }\n }\n\n ", "\n"])), function (props) { return props.disabled ? "\n user-select:none;\n pointer-events:none;\n " : "\n cursor: pointer;\n "; }, devices_1.devices.md, devices_1.devices.md, devices_1.devices.md, devices_1.devices.md, function (props) { return props.$isContentOffset ? '128px' : '0'; }, function (props) { return props.$isContentOffset ? 'calc(100% - 128px)' : '100%'; }, devices_1.devices.md, function (props) { return props.$size === "small" && "\n .productCardInner{\n padding: ".concat(props.$hasBadge ? "16px" : "24px 16px", ";\n .productCardCheckboxContent {\n .indicator {\n margin-right: 8px;\n width: 16px;\n height: 16px;\n }\n }\n \n .productCardImg {\n \n }\n .productCardTitle {\n font: var(--body-semi-bold-14-17);\n }\n .productCardContent{\n margin: 1rem auto 0 0;\n }\n }\n "); });
|
|
14
14
|
var templateObject_1;
|