krl-alfred 2.23.9 → 2.23.10
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.d.ts +1 -1
- package/dist/components/ProductCardCheckbox/ProductCardCheckbox.js +5 -2
- package/dist/components/ProductCardCheckbox/ProductCardCheckbox.styled.d.ts +4 -0
- package/dist/components/ProductCardCheckbox/ProductCardCheckbox.styled.js +16 -12
- package/dist/components/ProductCardCheckbox/props.d.ts +12 -0
- package/dist/components/ProductCardCheckbox/props.js +5 -0
- package/dist/components/ProductCardCheckbox/stories/ProductCardCheckbox.stories.d.ts +27 -0
- package/dist/components/ProductCardCheckbox/stories/ProductCardCheckbox.stories.js +9 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { ProductCardCheckboxProps } from "./props";
|
|
2
2
|
import React from "react";
|
|
3
|
-
declare const ProductCardCheckbox: ({ hasCheckbox, title, content, checkboxId, size, productCardOnChange, disabled, value, name, isContentOffset, checked, image, hasBadge, badgeText, badgeVariant, infoText, infoTitle, popupWidth, valid, }: ProductCardCheckboxProps) => React.JSX.Element;
|
|
3
|
+
declare const ProductCardCheckbox: ({ hasCheckbox, title, content, checkboxId, size, productCardOnChange, disabled, value, name, isContentOffset, checked, image, hasBadge, badgeText, badgeVariant, infoText, infoTitle, popupWidth, valid, isShowDropdown, dropdownList, dropdownWidth, dropdownRight, dropdownTop, }: ProductCardCheckboxProps) => React.JSX.Element;
|
|
4
4
|
export default ProductCardCheckbox;
|
|
@@ -21,14 +21,17 @@ var ProductCardCheckbox_styled_1 = require("./ProductCardCheckbox.styled");
|
|
|
21
21
|
var Checkbox_1 = __importDefault(require("../Checkbox"));
|
|
22
22
|
var Badges_1 = __importDefault(require("../Badges"));
|
|
23
23
|
var Tooltip_1 = __importDefault(require("../Tooltip"));
|
|
24
|
+
var Dropdown_1 = __importDefault(require("../Dropdown"));
|
|
25
|
+
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
24
26
|
var ProductCardCheckbox = function (_a) {
|
|
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
|
+
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, _v = _a.isShowDropdown, isShowDropdown = _v === void 0 ? props_1.ProductCardCheckboxDefault.isShowDropdown : _v, _w = _a.dropdownList, dropdownList = _w === void 0 ? props_1.ProductCardCheckboxDefault.dropdownList : _w, _x = _a.dropdownWidth, dropdownWidth = _x === void 0 ? props_1.ProductCardCheckboxDefault.dropdownWidth : _x, _y = _a.dropdownRight, dropdownRight = _y === void 0 ? props_1.ProductCardCheckboxDefault.dropdownRight : _y, _z = _a.dropdownTop, dropdownTop = _z === void 0 ? props_1.ProductCardCheckboxDefault.dropdownTop : _z;
|
|
26
28
|
var styledProps = {
|
|
27
29
|
disabled: disabled,
|
|
28
30
|
$isContentOffset: isContentOffset,
|
|
29
31
|
$size: size,
|
|
30
32
|
$hasBadge: hasBadge,
|
|
33
|
+
$hasCheckbox: hasCheckbox,
|
|
31
34
|
};
|
|
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] })))] })) })));
|
|
35
|
+
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.jsxs)(ProductCardCheckbox_styled_1.ProductCardWrapper, __assign({ "$hasCheckbox": hasCheckbox }, { children: [(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, labelOffset: size === "large" ? "1.5rem" : "0.5rem" }) })), 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.jsxs)(ProductCardCheckbox_styled_1.ProductCardTitleActionsWrapper, { children: [(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 } }) })) })) }), isShowDropdown && (dropdownList === null || dropdownList === void 0 ? void 0 : dropdownList.length) ? ((0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(Dropdown_1.default, { size: "small", list: dropdownList, isShowTopChevron: false, Toggle: function () { return ((0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.DropdownToggleButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "MoreCircle" }) })); }, childrenVariant: "primary", right: dropdownRight, width: dropdownWidth, top: dropdownTop }) })) : null] })] })] })), 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] })))] })) })));
|
|
33
36
|
};
|
|
34
37
|
exports.default = ProductCardCheckbox;
|
|
@@ -6,10 +6,14 @@ export declare const ProductCardCheckboxContent: import("styled-components/dist/
|
|
|
6
6
|
}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hidden"> & {
|
|
7
7
|
$hidden?: boolean;
|
|
8
8
|
}, never>>> & string;
|
|
9
|
+
export declare const ProductCardWrapper: 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;
|
|
9
10
|
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
11
|
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;
|
|
12
|
+
export declare const ProductCardTitleActionsWrapper: 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
13
|
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
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 DropdownWrapper: 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 DropdownToggleButton: 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;
|
|
13
17
|
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
18
|
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
19
|
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;
|
|
@@ -7,19 +7,23 @@ 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 = exports.ProductCardInner = exports.HiddenInput = exports.ProductCardContent = exports.PopupText = exports.InputIcon = exports.TooltipWrapper = exports.ProductCardTitle = exports.ProductCardText = exports.ProductCardImg = exports.ProductCardCheckboxContent = exports.BadgeWrapper = void 0;
|
|
10
|
+
exports.ProductCardCheckboxStyled = exports.ProductCardInner = exports.HiddenInput = exports.ProductCardContent = exports.PopupText = exports.InputIcon = exports.DropdownToggleButton = exports.DropdownWrapper = exports.TooltipWrapper = exports.ProductCardTitle = exports.ProductCardTitleActionsWrapper = exports.ProductCardText = exports.ProductCardImg = exports.ProductCardWrapper = 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
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
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.
|
|
16
|
-
exports.
|
|
17
|
-
exports.
|
|
18
|
-
exports.
|
|
19
|
-
exports.
|
|
20
|
-
exports.
|
|
21
|
-
exports.
|
|
22
|
-
exports.
|
|
23
|
-
exports.
|
|
24
|
-
exports.
|
|
25
|
-
|
|
15
|
+
exports.ProductCardWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: ", ";\n"], ["\n display: grid;\n grid-template-columns: ", ";\n"])), function (props) { return (props.$hasCheckbox ? 'auto auto 1fr' : 'auto 1fr'); });
|
|
16
|
+
exports.ProductCardImg = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __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.375rem;\n width: calc(100% - 0.75rem);\n height: calc(100% - 0.75rem);\n object-fit: cover;\n object-position: center center;\n border-radius: 0.5rem;\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.375rem;\n width: calc(100% - 0.75rem);\n height: calc(100% - 0.75rem);\n object-fit: cover;\n object-position: center center;\n border-radius: 0.5rem;\n }\n"])));
|
|
17
|
+
exports.ProductCardText = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __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"])));
|
|
18
|
+
exports.ProductCardTitleActionsWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
19
|
+
exports.ProductCardTitle = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __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);
|
|
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.DropdownWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n padding-left: 1rem;\n"], ["\n padding-left: 1rem;\n"])));
|
|
22
|
+
exports.DropdownToggleButton = styled_components_1.default.span(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n box-sizing: border-box;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 0;\n padding: 0;\n cursor: pointer;\n transition: all .2s;\n outline: none;\n border: 0;\n background: none;\n color: var(--primary);\n"], ["\n box-sizing: border-box;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 0;\n padding: 0;\n cursor: pointer;\n transition: all .2s;\n outline: none;\n border: 0;\n background: none;\n color: var(--primary);\n"])));
|
|
23
|
+
exports.InputIcon = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject([""], [""])));
|
|
24
|
+
exports.PopupText = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __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"])));
|
|
25
|
+
exports.ProductCardContent = styled_components_1.default.label(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n margin: 1.5rem auto 0 ", ";\n display: block;\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 display: block;\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);
|
|
26
|
+
exports.HiddenInput = styled_components_1.default.input(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
|
|
27
|
+
exports.ProductCardInner = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n border: 1px solid var(--dark-opacity-10);\n border-radius: 0.5rem;\n padding: 24px;\n background-color: white;\n display: block;\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 display: block;\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 "); });
|
|
28
|
+
exports.ProductCardCheckboxStyled = styled_components_1.default.label(templateObject_16 || (templateObject_16 = __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 "; });
|
|
29
|
+
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, templateObject_15, templateObject_16;
|
|
@@ -22,6 +22,17 @@ interface ProductCardCheckbox {
|
|
|
22
22
|
infoTitle?: string;
|
|
23
23
|
popupWidth?: string;
|
|
24
24
|
image?: React.ReactNode;
|
|
25
|
+
/** Dropdown menu */
|
|
26
|
+
isShowDropdown?: boolean;
|
|
27
|
+
dropdownList?: Array<{
|
|
28
|
+
title?: string;
|
|
29
|
+
icon?: any;
|
|
30
|
+
slug?: string;
|
|
31
|
+
onClick?: (e?: any) => void;
|
|
32
|
+
}>;
|
|
33
|
+
dropdownWidth?: string;
|
|
34
|
+
dropdownRight?: string;
|
|
35
|
+
dropdownTop?: string;
|
|
25
36
|
}
|
|
26
37
|
export declare const ProductCardCheckboxDefault: ProductCardCheckbox;
|
|
27
38
|
export interface ProductCardCheckboxStyledProps {
|
|
@@ -29,6 +40,7 @@ export interface ProductCardCheckboxStyledProps {
|
|
|
29
40
|
$size?: SIZES;
|
|
30
41
|
$isContentOffset?: boolean;
|
|
31
42
|
$hasBadge?: boolean;
|
|
43
|
+
$hasCheckbox?: boolean;
|
|
32
44
|
}
|
|
33
45
|
export type ProductCardCheckboxProps = typeof ProductCardCheckboxDefault;
|
|
34
46
|
export {};
|
|
@@ -24,6 +24,12 @@ declare const _default: {
|
|
|
24
24
|
checked: {
|
|
25
25
|
control: string;
|
|
26
26
|
};
|
|
27
|
+
isShowDropdown: {
|
|
28
|
+
control: string;
|
|
29
|
+
};
|
|
30
|
+
dropdownWidth: {
|
|
31
|
+
control: string;
|
|
32
|
+
};
|
|
27
33
|
};
|
|
28
34
|
};
|
|
29
35
|
export default _default;
|
|
@@ -196,3 +202,24 @@ export declare const WithContentOffset: {
|
|
|
196
202
|
infoText: string;
|
|
197
203
|
};
|
|
198
204
|
};
|
|
205
|
+
export declare const WithDropdown: {
|
|
206
|
+
args: {
|
|
207
|
+
isShowDropdown: boolean;
|
|
208
|
+
dropdownWidth: string;
|
|
209
|
+
checkboxId: string;
|
|
210
|
+
dropdownList: {
|
|
211
|
+
title: string;
|
|
212
|
+
onClick: () => void;
|
|
213
|
+
}[];
|
|
214
|
+
title: string;
|
|
215
|
+
content: string;
|
|
216
|
+
valid: boolean;
|
|
217
|
+
productCardOnChange: () => void;
|
|
218
|
+
image: React.JSX.Element;
|
|
219
|
+
hasCheckbox: boolean;
|
|
220
|
+
size: string;
|
|
221
|
+
hasBadge: boolean;
|
|
222
|
+
badgeVariant: string;
|
|
223
|
+
infoText: string;
|
|
224
|
+
};
|
|
225
|
+
};
|
|
@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
14
14
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.WithContentOffset = exports.Invalid = exports.WithInfoText = exports.Large = exports.Small = exports.WithoutImage = exports.WithoutBadge = exports.WithoutCheckbox = exports.Disabled = exports.Checked = exports.Default = void 0;
|
|
17
|
+
exports.WithDropdown = exports.WithContentOffset = exports.Invalid = exports.WithInfoText = exports.Large = exports.Small = exports.WithoutImage = exports.WithoutBadge = exports.WithoutCheckbox = exports.Disabled = exports.Checked = exports.Default = void 0;
|
|
18
18
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
19
|
var ProductCardCheckbox_1 = __importDefault(require("../ProductCardCheckbox"));
|
|
20
20
|
var props_1 = require("../props");
|
|
@@ -44,6 +44,8 @@ exports.default = {
|
|
|
44
44
|
hasCheckbox: { control: 'boolean' },
|
|
45
45
|
hasBadge: { control: 'boolean' },
|
|
46
46
|
checked: { control: 'boolean' },
|
|
47
|
+
isShowDropdown: { control: 'boolean' },
|
|
48
|
+
dropdownWidth: { control: 'text' },
|
|
47
49
|
}
|
|
48
50
|
};
|
|
49
51
|
exports.Default = {
|
|
@@ -79,3 +81,9 @@ exports.Invalid = {
|
|
|
79
81
|
exports.WithContentOffset = {
|
|
80
82
|
args: __assign(__assign({}, defaultArgs), { isContentOffset: true, checkboxId: "checkbox_offset" }),
|
|
81
83
|
};
|
|
84
|
+
exports.WithDropdown = {
|
|
85
|
+
args: __assign(__assign({}, defaultArgs), { isShowDropdown: true, dropdownWidth: "220px", checkboxId: "checkbox_with_dropdown", dropdownList: [
|
|
86
|
+
{ title: "Özel 1", onClick: function () { return console.log("dropdown 1"); } },
|
|
87
|
+
{ title: "Özel 2", onClick: function () { return console.log("dropdown 2"); } },
|
|
88
|
+
] }),
|
|
89
|
+
};
|