krl-alfred 2.17.40 → 2.17.42
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/ProductCardHorizontalSm/ProductCardHorizontalSm.d.ts +1 -1
- package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.js +3 -2
- package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.styled.d.ts +1 -1
- package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.styled.js +7 -7
- package/dist/components/ProductCardHorizontalSm/props.d.ts +5 -0
- package/dist/components/ProductCardHorizontalSm/props.js +4 -0
- package/dist/components/ProductCardHorizontalSm/stories/ProductCardHorizontalSm.stories.d.ts +4 -0
- package/dist/components/ProductCardHorizontalSm/stories/ProductCardHorizontalSm.stories.js +6 -2
- package/dist/components/Tooltip/Tooltip.d.ts +1 -1
- package/dist/components/Tooltip/Tooltip.js +3 -3
- package/dist/components/Tooltip/Tooltip.styled.d.ts +3 -0
- package/dist/components/Tooltip/Tooltip.styled.js +10 -7
- package/dist/components/Tooltip/props.d.ts +4 -0
- package/dist/components/Tooltip/props.js +2 -0
- package/dist/components/Tooltip/stories/Tooltip.stories.d.ts +1 -0
- package/dist/components/Tooltip/stories/Tooltip.stories.js +1 -0
- package/package.json +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { ProductCardHorizontalSmProps } from "./props";
|
|
2
|
-
declare const ProductCardHorizontalSm: ({ title, price, priceSm, slug, period, image, component, hasImageBorder, imageWidth, imageHeight, infoPosition, hasButton, buttonVariant, buttonText, hasBorder, isSelected, hasTitleWrap, hasButtonRemoveMdDown, }: ProductCardHorizontalSmProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare const ProductCardHorizontalSm: ({ title, price, priceSm, slug, period, image, component, hasImageBorder, imageWidth, imageHeight, infoPosition, hasButton, buttonVariant, buttonText, hasBorder, isSelected, hasTitleWrap, hasButtonRemoveMdDown, hasBordeHover, hasTooltip, tooltipSelectorTitle, tooltipDescription, }: ProductCardHorizontalSmProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default ProductCardHorizontalSm;
|
|
@@ -19,12 +19,13 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
19
19
|
var props_1 = require("./props");
|
|
20
20
|
var ProductCardHorizontalSm_styled_1 = require("./ProductCardHorizontalSm.styled");
|
|
21
21
|
var Button_1 = __importDefault(require("../Button"));
|
|
22
|
+
var Tooltip_1 = __importDefault(require("../Tooltip"));
|
|
22
23
|
var ProductCardHorizontalSm = function (_a) {
|
|
23
|
-
var _b = _a.title, title = _b === void 0 ? props_1.ProductCardHorizontalSmDefault.title : _b, _c = _a.price, price = _c === void 0 ? props_1.ProductCardHorizontalSmDefault.price : _c, _d = _a.priceSm, priceSm = _d === void 0 ? props_1.ProductCardHorizontalSmDefault.priceSm : _d, _e = _a.slug, slug = _e === void 0 ? props_1.ProductCardHorizontalSmDefault.slug : _e, _f = _a.period, period = _f === void 0 ? props_1.ProductCardHorizontalSmDefault.period : _f, _g = _a.image, image = _g === void 0 ? props_1.ProductCardHorizontalSmDefault.image : _g, _h = _a.component, component = _h === void 0 ? props_1.ProductCardHorizontalSmDefault.component : _h, _j = _a.hasImageBorder, hasImageBorder = _j === void 0 ? props_1.ProductCardHorizontalSmDefault.hasImageBorder : _j, _k = _a.imageWidth, imageWidth = _k === void 0 ? props_1.ProductCardHorizontalSmDefault.imageWidth : _k, _l = _a.imageHeight, imageHeight = _l === void 0 ? props_1.ProductCardHorizontalSmDefault.imageHeight : _l, _m = _a.infoPosition, infoPosition = _m === void 0 ? props_1.ProductCardHorizontalSmDefault.infoPosition : _m, _o = _a.hasButton, hasButton = _o === void 0 ? props_1.ProductCardHorizontalSmDefault.hasButton : _o, _p = _a.buttonVariant, buttonVariant = _p === void 0 ? props_1.ProductCardHorizontalSmDefault.buttonVariant : _p, _q = _a.buttonText, buttonText = _q === void 0 ? props_1.ProductCardHorizontalSmDefault.buttonText : _q, _r = _a.hasBorder, hasBorder = _r === void 0 ? props_1.ProductCardHorizontalSmDefault.hasBorder : _r, _s = _a.isSelected, isSelected = _s === void 0 ? props_1.ProductCardHorizontalSmDefault.isSelected : _s, _t = _a.hasTitleWrap, hasTitleWrap = _t === void 0 ? props_1.ProductCardHorizontalSmDefault.hasTitleWrap : _t, _u = _a.hasButtonRemoveMdDown, hasButtonRemoveMdDown = _u === void 0 ? props_1.ProductCardHorizontalSmDefault.hasButtonRemoveMdDown : _u;
|
|
24
|
+
var _b = _a.title, title = _b === void 0 ? props_1.ProductCardHorizontalSmDefault.title : _b, _c = _a.price, price = _c === void 0 ? props_1.ProductCardHorizontalSmDefault.price : _c, _d = _a.priceSm, priceSm = _d === void 0 ? props_1.ProductCardHorizontalSmDefault.priceSm : _d, _e = _a.slug, slug = _e === void 0 ? props_1.ProductCardHorizontalSmDefault.slug : _e, _f = _a.period, period = _f === void 0 ? props_1.ProductCardHorizontalSmDefault.period : _f, _g = _a.image, image = _g === void 0 ? props_1.ProductCardHorizontalSmDefault.image : _g, _h = _a.component, component = _h === void 0 ? props_1.ProductCardHorizontalSmDefault.component : _h, _j = _a.hasImageBorder, hasImageBorder = _j === void 0 ? props_1.ProductCardHorizontalSmDefault.hasImageBorder : _j, _k = _a.imageWidth, imageWidth = _k === void 0 ? props_1.ProductCardHorizontalSmDefault.imageWidth : _k, _l = _a.imageHeight, imageHeight = _l === void 0 ? props_1.ProductCardHorizontalSmDefault.imageHeight : _l, _m = _a.infoPosition, infoPosition = _m === void 0 ? props_1.ProductCardHorizontalSmDefault.infoPosition : _m, _o = _a.hasButton, hasButton = _o === void 0 ? props_1.ProductCardHorizontalSmDefault.hasButton : _o, _p = _a.buttonVariant, buttonVariant = _p === void 0 ? props_1.ProductCardHorizontalSmDefault.buttonVariant : _p, _q = _a.buttonText, buttonText = _q === void 0 ? props_1.ProductCardHorizontalSmDefault.buttonText : _q, _r = _a.hasBorder, hasBorder = _r === void 0 ? props_1.ProductCardHorizontalSmDefault.hasBorder : _r, _s = _a.isSelected, isSelected = _s === void 0 ? props_1.ProductCardHorizontalSmDefault.isSelected : _s, _t = _a.hasTitleWrap, hasTitleWrap = _t === void 0 ? props_1.ProductCardHorizontalSmDefault.hasTitleWrap : _t, _u = _a.hasButtonRemoveMdDown, hasButtonRemoveMdDown = _u === void 0 ? props_1.ProductCardHorizontalSmDefault.hasButtonRemoveMdDown : _u, _v = _a.hasBordeHover, hasBordeHover = _v === void 0 ? props_1.ProductCardHorizontalSmDefault.hasBordeHover : _v, _w = _a.hasTooltip, hasTooltip = _w === void 0 ? props_1.ProductCardHorizontalSmDefault.hasTooltip : _w, _x = _a.tooltipSelectorTitle, tooltipSelectorTitle = _x === void 0 ? props_1.ProductCardHorizontalSmDefault.tooltipSelectorTitle : _x, _y = _a.tooltipDescription, tooltipDescription = _y === void 0 ? props_1.ProductCardHorizontalSmDefault.tooltipDescription : _y;
|
|
24
25
|
var LinkComponent = function (_a) {
|
|
25
26
|
var item = _a.item, children = _a.children;
|
|
26
27
|
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: children })));
|
|
27
28
|
};
|
|
28
|
-
return ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.ProductCardHorizontalSmStyled, __assign({ "$period": period, "$hasImageBorder": hasImageBorder, "$imageWidth": imageWidth, "$imageHeight": imageHeight, "$isSelected": isSelected }, { children: [hasBorder && (0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Border, { "$isSelected": isSelected }), (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: { component: component, slug: slug } }, { children: (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.HorizontalSmWrapper, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.ImgWrapper, { children: image }), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.TextWrapper, __assign({ "$period": period }, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Title, __assign({ "$hasTitleWrap": hasTitleWrap }, { children: title })), infoPosition === "left" && ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.PriceContent, __assign({ "$infoPosition": infoPosition }, { children: [(0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.Price, { children: [price, priceSm && (0, jsx_runtime_1.jsx)("small", { children: priceSm })] }), (0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Period, __assign({ "$infoPosition": infoPosition }, { children: period }))] })))] })), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.RightContentWrapper, __assign({ "$hasButtonRemoveMdDown": hasButtonRemoveMdDown }, { children: [infoPosition === "right" && ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.PriceContent, __assign({ "$infoPosition": infoPosition }, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Period, __assign({ "$infoPosition": infoPosition }, { children: period })), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.Price, { children: [price, priceSm && (0, jsx_runtime_1.jsx)("small", { children: priceSm })] })] }))), hasButton && ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ variant: buttonVariant, size: "xsmall" }, { children: buttonText })))] }))] }) }))] })));
|
|
29
|
+
return ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.ProductCardHorizontalSmStyled, __assign({ "$period": period, "$hasImageBorder": hasImageBorder, "$imageWidth": imageWidth, "$imageHeight": imageHeight, "$isSelected": isSelected, "$hasBordeHover": hasBordeHover }, { children: [hasBorder && (0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Border, { "$isSelected": isSelected, "$hasBordeHover": hasBordeHover }), (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: { component: component, slug: slug } }, { children: (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.HorizontalSmWrapper, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.ImgWrapper, __assign({ "$imageHeight": imageHeight, "$imageWidth": imageWidth }, { children: image })), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.TextWrapper, __assign({ "$period": period }, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Title, __assign({ "$hasTitleWrap": hasTitleWrap }, { children: title })), infoPosition === "left" && ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.PriceContent, __assign({ "$infoPosition": infoPosition }, { children: [(0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.Price, { children: [price, priceSm && (0, jsx_runtime_1.jsx)("small", { children: priceSm })] }), (0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Period, __assign({ "$infoPosition": infoPosition }, { children: period }))] })))] })), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.RightContentWrapper, __assign({ "$hasButtonRemoveMdDown": hasButtonRemoveMdDown }, { children: [infoPosition === "right" && ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.PriceContent, __assign({ "$infoPosition": infoPosition }, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Period, __assign({ "$infoPosition": infoPosition }, { children: period })), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.Price, { children: [price, priceSm && (0, jsx_runtime_1.jsx)("small", { children: priceSm })] })] }))), hasButton && ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ variant: buttonVariant, size: "xsmall" }, { children: buttonText }))), hasTooltip && ((0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ selectorTitle: tooltipSelectorTitle, popupWidth: "238px", position: "topRight", popupSize: "medium" }, { children: tooltipDescription })))] }))] }) }))] })));
|
|
29
30
|
};
|
|
30
31
|
exports.default = ProductCardHorizontalSm;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { ProductCardHorizontalSmStyledProps } from "./props";
|
|
3
3
|
export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, ProductCardHorizontalSmStyledProps>> & string;
|
|
4
|
-
export declare const ProductCardHorizontalSmStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ProductCardHorizontalSmStyledProps>> & string;
|
|
5
4
|
export declare const Border: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ProductCardHorizontalSmStyledProps>> & string;
|
|
5
|
+
export declare const ProductCardHorizontalSmStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ProductCardHorizontalSmStyledProps>> & string;
|
|
6
6
|
export declare const HorizontalSmWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
7
7
|
export declare const ImgWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ProductCardHorizontalSmStyledProps>> & string;
|
|
8
8
|
export declare const TextWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ProductCardHorizontalSmStyledProps>> & string;
|
|
@@ -7,17 +7,17 @@ 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.RightContentWrapper = exports.Period = exports.Price = exports.PriceContent = exports.TextWrapper = exports.ImgWrapper = exports.HorizontalSmWrapper = exports.
|
|
10
|
+
exports.RightContentWrapper = exports.Period = exports.Price = exports.PriceContent = exports.TextWrapper = exports.ImgWrapper = exports.HorizontalSmWrapper = exports.ProductCardHorizontalSmStyled = exports.Border = exports.Title = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
13
|
exports.Title = styled_components_1.default.strong(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font:var(--body-semi-bold-14-17);\n transition: all .2s ease;\n"], ["\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font:var(--body-semi-bold-14-17);\n transition: all .2s ease;\n"])), function (props) { return props.$hasTitleWrap ? '2' : '1'; });
|
|
14
|
-
exports.
|
|
15
|
-
exports.
|
|
16
|
-
exports.HorizontalSmWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n height: 66px;\n padding-right:
|
|
17
|
-
exports.ImgWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border: ", ";\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n
|
|
18
|
-
exports.TextWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n padding-right: ", ";\n"], ["\n padding-right: ", ";\n"])), function (props) { return props.$period ? "
|
|
14
|
+
exports.Border = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border: ", ";\n user-select: none;\n pointer-events: none;\n position: absolute;\n inset: 0;\n border-radius: inherit;\n"], ["\n border: ", ";\n user-select: none;\n pointer-events: none;\n position: absolute;\n inset: 0;\n border-radius: inherit;\n"])), function (props) { return props.$isSelected ? '2px solid var(--primary) !important' : '1px solid var(--grey-10)'; });
|
|
15
|
+
exports.ProductCardHorizontalSmStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: var(--dark);\n padding: 0 0.5rem;\n transition: all .2s ease;\n border-radius: 0.5rem;\n position: relative;\n ", "\n a {\n text-decoration: none;\n color: inherit;\n @media only screen and ", " {\n &:hover{\n ", " {\n color: var(--primary-hover);\n }\n }\n }\n &:active {\n ", "{\n color: var(--primary-hover);\n }\n }\n }\n \n"], ["\n color: var(--dark);\n padding: 0 0.5rem;\n transition: all .2s ease;\n border-radius: 0.5rem;\n position: relative;\n ", "\n a {\n text-decoration: none;\n color: inherit;\n @media only screen and ", " {\n &:hover{\n ", " {\n color: var(--primary-hover);\n }\n }\n }\n &:active {\n ", "{\n color: var(--primary-hover);\n }\n }\n }\n \n"])), function (props) { return props.$hasBordeHover && "\n cursor: pointer;\n &:hover {\n ".concat(exports.Border, " {\n border: 1px solid var(--primary);\n }\n }\n "); }, devices_1.devices.mdUp, exports.Title, exports.Title);
|
|
16
|
+
exports.HorizontalSmWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n height: 66px;\n padding-right: 0.5rem;\n"], ["\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n height: 66px;\n padding-right: 0.5rem;\n"])));
|
|
17
|
+
exports.ImgWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border: ", ";\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n img {\n vertical-align: middle !important;\n display: block !important;\n object-fit: cover !important;\n border-radius: 4px !important;\n }\n"], ["\n border: ", ";\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n img {\n vertical-align: middle !important;\n display: block !important;\n object-fit: cover !important;\n border-radius: 4px !important;\n }\n"])), function (props) { return props.$hasImageBorder ? '1px solid var(--dark-opacity-5)' : 'none'; }, function (props) { return props.$imageWidth ? props.$imageWidth : '71px'; }, function (props) { return props.$imageHeight ? props.$imageHeight : '50px'; });
|
|
18
|
+
exports.TextWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n padding-right: ", ";\n"], ["\n padding-right: ", ";\n"])), function (props) { return props.$period ? "1rem" : "0"; });
|
|
19
19
|
exports.PriceContent = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) { return (props === null || props === void 0 ? void 0 : props.$infoPosition) === 'left' ? "\n text-align: start;\n display: flex;\n align-items: flex-end;\n margin-top: 8px;\n " : "\n text-align: end;\n "; });
|
|
20
20
|
exports.Price = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: block;\n font:var(--title-extra-bold-16-19);\n small {\n font: var(--body-bold-14-17);\n }\n"], ["\n display: block;\n font:var(--title-extra-bold-16-19);\n small {\n font: var(--body-bold-14-17);\n }\n"])));
|
|
21
21
|
exports.Period = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: block;\n ", "\n font:var(--body-regular-14-17);\n"], ["\n display: block;\n ", "\n font:var(--body-regular-14-17);\n"])), function (props) { return (props === null || props === void 0 ? void 0 : props.$infoPosition) === 'left' ? "\n margin-bottom: 0;\n margin-left: 4px;\n " : "\n margin-bottom: 4px;\n "; });
|
|
22
|
-
exports.RightContentWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) { return props.$hasButtonRemoveMdDown ? "\n @media only screen and ".concat(devices_1.devices.lg, " {\n display: none;\n }\n ") : "\n display: block;\n "; });
|
|
22
|
+
exports.RightContentWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) { return props.$hasButtonRemoveMdDown ? "\n @media only screen and ".concat(devices_1.devices.lg, " {\n display: none;\n }\n ") : "\n display: block;\n @media only screen and ".concat(devices_1.devices.lg, " {\n button{\n padding: 0 !important;\n width: 65px !important;\n }\n }\n "); });
|
|
23
23
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
@@ -20,6 +20,10 @@ export interface ProductCardHorizontalSm {
|
|
|
20
20
|
isSelected?: boolean;
|
|
21
21
|
hasTitleWrap?: boolean;
|
|
22
22
|
hasButtonRemoveMdDown?: boolean;
|
|
23
|
+
hasBordeHover?: boolean;
|
|
24
|
+
hasTooltip?: boolean;
|
|
25
|
+
tooltipSelectorTitle?: string;
|
|
26
|
+
tooltipDescription?: React.ReactNode;
|
|
23
27
|
}
|
|
24
28
|
export interface ProductCardHorizontalSmStyledProps {
|
|
25
29
|
$period?: string;
|
|
@@ -31,6 +35,7 @@ export interface ProductCardHorizontalSmStyledProps {
|
|
|
31
35
|
$isSelected?: boolean;
|
|
32
36
|
$hasTitleWrap?: boolean;
|
|
33
37
|
$hasButtonRemoveMdDown?: boolean;
|
|
38
|
+
$hasBordeHover?: boolean;
|
|
34
39
|
}
|
|
35
40
|
export declare const ProductCardHorizontalSmDefault: ProductCardHorizontalSm;
|
|
36
41
|
export type ProductCardHorizontalSmProps = typeof ProductCardHorizontalSmDefault;
|
|
@@ -53,14 +53,18 @@ exports.Default = {
|
|
|
53
53
|
priceSm: ",24 TL",
|
|
54
54
|
component: function (_a) {
|
|
55
55
|
var children = _a.children;
|
|
56
|
-
return (0, jsx_runtime_1.jsx)("
|
|
56
|
+
return (0, jsx_runtime_1.jsx)("div", { children: children });
|
|
57
57
|
},
|
|
58
58
|
period: "hafta",
|
|
59
59
|
image: (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" }),
|
|
60
60
|
infoPosition: "left",
|
|
61
|
-
hasButton:
|
|
61
|
+
hasButton: false,
|
|
62
62
|
buttonVariant: "primary",
|
|
63
63
|
buttonText: "Kullan",
|
|
64
64
|
hasBorder: false,
|
|
65
|
+
hasBordeHover: false,
|
|
66
|
+
hasTooltip: true,
|
|
67
|
+
tooltipSelectorTitle: "Tooltip Title",
|
|
68
|
+
tooltipDescription: "Tooltip Description",
|
|
65
69
|
},
|
|
66
70
|
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { TooltipProps } from "./props";
|
|
2
|
-
declare const Tooltip: ({ iconWidth, iconHeight, children, title, popupWidth, hasClickAction, hasCloseOnOutsideClick, isOpen, position, popupSize, popupLeft, popupRight, id, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare const Tooltip: ({ iconWidth, iconHeight, children, title, popupWidth, hasClickAction, hasCloseOnOutsideClick, isOpen, position, popupSize, popupLeft, popupRight, id, selectorTitle, popupRightSm, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default Tooltip;
|
|
@@ -21,13 +21,13 @@ var Tooltip_styled_1 = require("./Tooltip.styled");
|
|
|
21
21
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
22
22
|
var useOnClickOutside_1 = __importDefault(require("../../hooks/useOnClickOutside"));
|
|
23
23
|
var Tooltip = function (_a) {
|
|
24
|
-
var _b = _a.iconWidth, iconWidth = _b === void 0 ? props_1.TooltipDefault.iconWidth : _b, _c = _a.iconHeight, iconHeight = _c === void 0 ? props_1.TooltipDefault.iconHeight : _c, _d = _a.children, children = _d === void 0 ? props_1.TooltipDefault.children : _d, _e = _a.title, title = _e === void 0 ? props_1.TooltipDefault.title : _e, _f = _a.popupWidth, popupWidth = _f === void 0 ? props_1.TooltipDefault.popupWidth : _f, _g = _a.hasClickAction, hasClickAction = _g === void 0 ? props_1.TooltipDefault.hasClickAction : _g, _h = _a.hasCloseOnOutsideClick, hasCloseOnOutsideClick = _h === void 0 ? props_1.TooltipDefault.hasCloseOnOutsideClick : _h, _j = _a.isOpen, isOpen = _j === void 0 ? props_1.TooltipDefault.isOpen : _j, _k = _a.position, position = _k === void 0 ? props_1.TooltipDefault.position : _k, _l = _a.popupSize, popupSize = _l === void 0 ? props_1.TooltipDefault.popupSize : _l, _m = _a.popupLeft, popupLeft = _m === void 0 ? props_1.TooltipDefault.popupLeft : _m, _o = _a.popupRight, popupRight = _o === void 0 ? props_1.TooltipDefault.popupRight : _o, _p = _a.id, id = _p === void 0 ? props_1.TooltipDefault.id : _p;
|
|
25
|
-
var
|
|
24
|
+
var _b = _a.iconWidth, iconWidth = _b === void 0 ? props_1.TooltipDefault.iconWidth : _b, _c = _a.iconHeight, iconHeight = _c === void 0 ? props_1.TooltipDefault.iconHeight : _c, _d = _a.children, children = _d === void 0 ? props_1.TooltipDefault.children : _d, _e = _a.title, title = _e === void 0 ? props_1.TooltipDefault.title : _e, _f = _a.popupWidth, popupWidth = _f === void 0 ? props_1.TooltipDefault.popupWidth : _f, _g = _a.hasClickAction, hasClickAction = _g === void 0 ? props_1.TooltipDefault.hasClickAction : _g, _h = _a.hasCloseOnOutsideClick, hasCloseOnOutsideClick = _h === void 0 ? props_1.TooltipDefault.hasCloseOnOutsideClick : _h, _j = _a.isOpen, isOpen = _j === void 0 ? props_1.TooltipDefault.isOpen : _j, _k = _a.position, position = _k === void 0 ? props_1.TooltipDefault.position : _k, _l = _a.popupSize, popupSize = _l === void 0 ? props_1.TooltipDefault.popupSize : _l, _m = _a.popupLeft, popupLeft = _m === void 0 ? props_1.TooltipDefault.popupLeft : _m, _o = _a.popupRight, popupRight = _o === void 0 ? props_1.TooltipDefault.popupRight : _o, _p = _a.id, id = _p === void 0 ? props_1.TooltipDefault.id : _p, _q = _a.selectorTitle, selectorTitle = _q === void 0 ? props_1.TooltipDefault.selectorTitle : _q, _r = _a.popupRightSm, popupRightSm = _r === void 0 ? props_1.TooltipDefault.popupRightSm : _r;
|
|
25
|
+
var _s = (0, react_1.useState)(isOpen), isOpenTooltip = _s[0], setIsOpenTooltip = _s[1];
|
|
26
26
|
(0, react_1.useEffect)(function () {
|
|
27
27
|
setIsOpenTooltip(isOpen);
|
|
28
28
|
}, [isOpen]);
|
|
29
29
|
var tooltipRef = (0, react_1.useRef)();
|
|
30
30
|
(0, useOnClickOutside_1.default)(tooltipRef, function () { return setIsOpenTooltip(false); }, hasCloseOnOutsideClick);
|
|
31
|
-
return ((0, jsx_runtime_1.jsxs)(Tooltip_styled_1.TooltipStyled, __assign({ id: id, ref: tooltipRef, "$hasClickAction": hasClickAction }, { children: [(0, jsx_runtime_1.
|
|
31
|
+
return ((0, jsx_runtime_1.jsxs)(Tooltip_styled_1.TooltipStyled, __assign({ id: id, ref: tooltipRef, "$hasClickAction": hasClickAction }, { children: [(0, jsx_runtime_1.jsxs)(Tooltip_styled_1.Selector, __assign({ "$isOpen": isOpenTooltip, "$position": position, "$hasClickAction": hasClickAction, onClick: function () { return setIsOpenTooltip(!isOpenTooltip); } }, { children: [(0, jsx_runtime_1.jsx)(Tooltip_styled_1.SelectorIconWrapper, __assign({ "$isOpen": isOpenTooltip, "$position": position, "$hasClickAction": hasClickAction }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: iconWidth === "16px" ? "InfoSquareSmall" : "InfoSquare", width: iconWidth, height: iconHeight }) })), selectorTitle && (0, jsx_runtime_1.jsx)(Tooltip_styled_1.SelectorTitle, { children: selectorTitle })] })), (0, jsx_runtime_1.jsx)(Tooltip_styled_1.PopupWrapper, __assign({ "$iconWidth": iconWidth }, { children: (0, jsx_runtime_1.jsxs)(Tooltip_styled_1.Popup, __assign({ "$popupSize": popupSize, "$position": position, "$popupWidth": popupWidth, "$isOpen": isOpenTooltip, "$hasClickAction": hasClickAction, "$popupLeft": popupLeft, "$popupRight": popupRight, "$popupRightSm": popupRightSm, className: "customPopup" }, { children: [title && (0, jsx_runtime_1.jsx)(Tooltip_styled_1.Title, { children: title }), children] })) }))] })));
|
|
32
32
|
};
|
|
33
33
|
exports.default = Tooltip;
|
|
@@ -2,5 +2,8 @@
|
|
|
2
2
|
import { TooltipStyledProps } from "./props";
|
|
3
3
|
export declare const TooltipStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TooltipStyledProps>> & string;
|
|
4
4
|
export declare const Selector: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TooltipStyledProps>> & string;
|
|
5
|
+
export declare const SelectorIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TooltipStyledProps>> & string;
|
|
6
|
+
export declare const SelectorTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, TooltipStyledProps>> & string;
|
|
5
7
|
export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, TooltipStyledProps>> & string;
|
|
6
8
|
export declare const Popup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TooltipStyledProps>> & string;
|
|
9
|
+
export declare const PopupWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TooltipStyledProps>> & string;
|
|
@@ -7,11 +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.Popup = exports.Title = exports.Selector = exports.TooltipStyled = void 0;
|
|
10
|
+
exports.PopupWrapper = exports.Popup = exports.Title = exports.SelectorTitle = exports.SelectorIconWrapper = exports.Selector = exports.TooltipStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.TooltipStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n position: relative;\n vertical-align: middle;\n color: var(--dark);\n ", "\n"], ["\n display: block;\n position: relative;\n vertical-align: middle;\n color: var(--dark);\n ", "\n"])), function (props) { return !props.$hasClickAction && "\n &:hover {\n
|
|
14
|
-
exports.Selector = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display:
|
|
13
|
+
exports.TooltipStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n position: relative;\n vertical-align: middle;\n color: var(--dark);\n ", "\n"], ["\n display: block;\n position: relative;\n vertical-align: middle;\n color: var(--dark);\n ", "\n"])), function (props) { return !props.$hasClickAction && "\n &:hover {\n ".concat(exports.Popup, " {\n opacity: 1;\n }\n :before{\n opacity:1;\n }\n }\n "); });
|
|
14
|
+
exports.Selector = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: ", ";\n position: relative;\n color: var(--primary);\n ", "\n"], ["\n display: flex;\n align-items: center;\n cursor: ", ";\n position: relative;\n color: var(--primary);\n ", "\n"])), function (props) { return props.$hasClickAction ? 'pointer' : 'initial'; }, function (props) { return (!props.$hasClickAction) ? "\n &:hover{\n ".concat(exports.SelectorIconWrapper, "{\n &:before{\n opacity: 1;\n }\n }\n }\n ") : null; });
|
|
15
|
+
exports.SelectorIconWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n &:before {\n content: '';\n position: absolute;\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n right: auto;\n transition: all 0.15s ease;\n background-color: var(--primary-opacity-10);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n opacity: ", ";\n ", ";\n }\n"], ["\n position: relative;\n &:before {\n content: '';\n position: absolute;\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n right: auto;\n transition: all 0.15s ease;\n background-color: var(--primary-opacity-10);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n opacity: ", ";\n ", ";\n }\n"])), function (props) { return (props.$hasClickAction && props.$isOpen) ? '1' : "0"; }, function (props) {
|
|
15
16
|
switch (props.$position) {
|
|
16
17
|
case 'bottomRight':
|
|
17
18
|
return "\n top: calc(100% + 4px);\n ";
|
|
@@ -29,8 +30,9 @@ exports.Selector = styled_components_1.default.div(templateObject_2 || (template
|
|
|
29
30
|
return "\n bottom: calc(100% + 4px);\n ";
|
|
30
31
|
}
|
|
31
32
|
});
|
|
32
|
-
exports.
|
|
33
|
-
exports.
|
|
33
|
+
exports.SelectorTitle = styled_components_1.default.strong(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-left: 0.5rem;\n font: var(--body-bold-14-17);\n color: var(--primary);\n"], ["\n margin-left: 0.5rem;\n font: var(--body-bold-14-17);\n color: var(--primary);\n"])));
|
|
34
|
+
exports.Title = styled_components_1.default.strong(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: block;\n margin-bottom: 0.5rem;\n font:var(--body-extra-bold-13-16);\n"], ["\n display: block;\n margin-bottom: 0.5rem;\n font:var(--body-extra-bold-13-16);\n"])));
|
|
35
|
+
exports.Popup = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n max-width: ", ";\n width: calc(100vw - 4.5rem);\n padding: ", ";\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n z-index: 99999;\n box-sizing: border-box;\n user-select: none;\n pointer-events: none;\n transition: all 0.15s ease;\n opacity: ", ";\n font:var(--caption-medium-11-13);\n ", ";\n\n @media only screen and ", " {\n left: auto;\n transform: none;\n right: ", " !important;\n }\n"], ["\n position: absolute;\n max-width: ", ";\n width: calc(100vw - 4.5rem);\n padding: ", ";\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n z-index: 99999;\n box-sizing: border-box;\n user-select: none;\n pointer-events: none;\n transition: all 0.15s ease;\n opacity: ", ";\n font:var(--caption-medium-11-13);\n ", ";\n\n @media only screen and ", " {\n left: auto;\n transform: none;\n right: ", " !important;\n }\n"])), function (props) { return props.$popupWidth ? props.$popupWidth : "151px"; }, function (props) {
|
|
34
36
|
switch (props.$popupSize) {
|
|
35
37
|
case 'small':
|
|
36
38
|
return "10px";
|
|
@@ -56,5 +58,6 @@ exports.Popup = styled_components_1.default.div(templateObject_4 || (templateObj
|
|
|
56
58
|
default:
|
|
57
59
|
return "\n left: 50%;\n bottom: calc(100% + 10px);\n transform: translateX(-50%);\n ";
|
|
58
60
|
}
|
|
59
|
-
}, devices_1.devices.xl, function (props) { return props.$popupRight || "-1.5rem"; });
|
|
60
|
-
|
|
61
|
+
}, devices_1.devices.xl, function (props) { return props.$popupRight || props.$popupRightSm || "-1.5rem"; });
|
|
62
|
+
exports.PopupWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n width: ", ";\n height: 100%;\n"], ["\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n width: ", ";\n height: 100%;\n"])), function (props) { return props.$iconWidth ? props.$iconWidth : "16px"; });
|
|
63
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
@@ -16,10 +16,14 @@ export interface Tooltip {
|
|
|
16
16
|
popupSize?: SIZE;
|
|
17
17
|
popupLeft?: string;
|
|
18
18
|
popupRight?: string;
|
|
19
|
+
popupRightSm?: string;
|
|
19
20
|
id?: string;
|
|
21
|
+
selectorTitle?: React.ReactNode;
|
|
20
22
|
}
|
|
21
23
|
export interface TooltipStyledProps {
|
|
24
|
+
$iconWidth?: string;
|
|
22
25
|
$popupRight?: string;
|
|
26
|
+
$popupRightSm?: string;
|
|
23
27
|
$hasClickAction?: boolean;
|
|
24
28
|
$isOpen?: boolean;
|
|
25
29
|
$position?: POSITION;
|