krl-alfred 1.76.38 → 1.76.40
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/ActionButton/ActionButton.js +1 -1
- package/dist/components/CircleProgress/CircleProgress.js +2 -2
- package/dist/components/ColorPalette/ColorPalette.js +3 -14
- package/dist/components/ColorPalette/ColorPalette.styled.js +7 -5
- package/dist/components/InfoBox/InfoBox.js +3 -1
- package/dist/components/ProductCardHorizontal/ProductCardHorizontal.js +25 -0
- package/dist/components/ProductCardHorizontal/ProductCardHorizontal.styled.js +14 -0
- package/dist/components/ProductCardHorizontal/index.js +8 -0
- package/dist/components/ProductCardHorizontal/props.js +2 -0
- package/dist/components/ProductCardHorizontal/stories/ProductCardHorizontal.stories.js +38 -0
- package/dist/components/ProductCardVertical/ProductCardVertical.js +1 -1
- package/dist/components/ProductCardVertical/ProductCardVertical.styled.js +1 -1
- package/dist/components/ProductCardVertical/stories/ProductCardVertical.stories.js +0 -1
- package/dist/components/ShoppingCartProduct/ShoppingCartProduct.js +1 -1
- package/dist/components/ShoppingCartProduct/ShoppingCartProduct.styled.js +1 -1
- package/dist/components/Typography/Typography.js +2 -2
- package/dist/components/Typography/Typography.styled.js +2 -2
- package/dist/index.js +3 -1
- package/package.json +1 -1
|
@@ -45,7 +45,7 @@ var ActionButton = function (props) {
|
|
|
45
45
|
(0, react_1.useEffect)(function () {
|
|
46
46
|
count();
|
|
47
47
|
}, [props.date]);
|
|
48
|
-
return ((0, jsx_runtime_1.jsxs)(ActionButton_styled_1.ActionButtonStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "top" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: props.iconStrokeWidth, name: props.icon, color: "var(--primary)", width: "45px", height: "45px" }) })), (0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: props.title }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "bottom" }, { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "timer" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: days })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('day') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: hours.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('hour') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots
|
|
48
|
+
return ((0, jsx_runtime_1.jsxs)(ActionButton_styled_1.ActionButtonStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "top" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: props.iconStrokeWidth, name: props.icon, color: "var(--primary)", width: "45px", height: "45px" }) })), (0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: props.title }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "bottom" }, { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "timer" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: days })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('day') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: hours.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('hour') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: minutes.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('minute') }))] }))] })), (0, jsx_runtime_1.jsx)(Button_1.default, { iconStrokeWidth: "3px", size: "xsmall", width: "32px", icon: "ArrowMediumRight", variant: "primary" })] })] }))] })));
|
|
49
49
|
};
|
|
50
50
|
ActionButton.defaultProps = {
|
|
51
51
|
title: "Title",
|
|
@@ -16,10 +16,10 @@ var CircleProgress_styled_1 = require("./CircleProgress.styled");
|
|
|
16
16
|
var react_circular_progressbar_1 = require("react-circular-progressbar");
|
|
17
17
|
var CircleProgress = function (props) {
|
|
18
18
|
var currentStep = props.steps.find(function (p) { return p.index === props.activeStep; });
|
|
19
|
-
return (0, jsx_runtime_1.jsxs)(CircleProgress_styled_1.CircleProgressStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: (0, jsx_runtime_1.jsx)(react_circular_progressbar_1.CircularProgressbarWithChildren, __assign({ styles: (0, react_circular_progressbar_1.buildStyles)({
|
|
19
|
+
return ((0, jsx_runtime_1.jsxs)(CircleProgress_styled_1.CircleProgressStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: (0, jsx_runtime_1.jsx)(react_circular_progressbar_1.CircularProgressbarWithChildren, __assign({ styles: (0, react_circular_progressbar_1.buildStyles)({
|
|
20
20
|
pathColor: "var(--primary)",
|
|
21
21
|
trailColor: "var(--dark-opacity-5)"
|
|
22
|
-
}), strokeWidth: 12, value: props.activeStep / props.steps.length * 100 }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(0, jsx_runtime_1.jsxs)("span", { children: [props.activeStep, "/"] }), props.steps.length] })) })) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "info" }, { children: [(0, jsx_runtime_1.jsx)("h1", { children: currentStep === null || currentStep === void 0 ? void 0 : currentStep.text }), (0, jsx_runtime_1.jsx)("p", { children: currentStep === null || currentStep === void 0 ? void 0 : currentStep.textSm })] }))] }));
|
|
22
|
+
}), strokeWidth: 12, value: props.activeStep / props.steps.length * 100 }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(0, jsx_runtime_1.jsxs)("span", { children: [props.activeStep, "/"] }), props.steps.length] })) })) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "info" }, { children: [(0, jsx_runtime_1.jsx)("h1", { children: currentStep === null || currentStep === void 0 ? void 0 : currentStep.text }), (0, jsx_runtime_1.jsx)("p", { children: currentStep === null || currentStep === void 0 ? void 0 : currentStep.textSm })] }))] })));
|
|
23
23
|
};
|
|
24
24
|
CircleProgress.defaultProps = {
|
|
25
25
|
steps: [],
|
|
@@ -1,15 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
4
|
};
|
|
@@ -22,14 +11,14 @@ var ColorPalette = function (props) {
|
|
|
22
11
|
var _b = _a.gradient, gradient = _b === void 0 ? props.gradient : _b, _c = _a.data, data = _c === void 0 ? props.data : _c;
|
|
23
12
|
return ((0, jsx_runtime_1.jsxs)(ColorPalette_styled_1.ColorItem, { children: [(0, jsx_runtime_1.jsx)(ColorPalette_styled_1.Bg, { gradient: gradient, data: data }), (0, jsx_runtime_1.jsx)(ColorPalette_styled_1.Text, { children: Object.entries(data).map(function (_a) {
|
|
24
13
|
var key4 = _a[0], value4 = _a[1];
|
|
25
|
-
return ((0, jsx_runtime_1.jsxs)(ColorPalette_styled_1.ValueListWrapper, { children: [(0, jsx_runtime_1.jsx)(ColorPalette_styled_1.Title,
|
|
14
|
+
return ((0, jsx_runtime_1.jsxs)(ColorPalette_styled_1.ValueListWrapper, { children: [(0, jsx_runtime_1.jsx)(ColorPalette_styled_1.Title, { children: key4 }), (0, jsx_runtime_1.jsx)(ColorPalette_styled_1.Value, { children: value4 })] }, key4));
|
|
26
15
|
}) })] }));
|
|
27
16
|
};
|
|
28
17
|
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: colors_json_1.default.map(function (value, key) {
|
|
29
18
|
var _a;
|
|
30
|
-
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(
|
|
19
|
+
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ColorPalette_styled_1.TitleXl, { children: value.name }), (0, jsx_runtime_1.jsx)("div", { children: (_a = value === null || value === void 0 ? void 0 : value.children) === null || _a === void 0 ? void 0 : _a.map(function (value2, key2) {
|
|
31
20
|
var _a;
|
|
32
|
-
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(
|
|
21
|
+
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ColorPalette_styled_1.TitleLg, { children: value2.name }), (0, jsx_runtime_1.jsx)(ColorPalette_styled_1.ColorPaletteStyled, { children: (_a = value2 === null || value2 === void 0 ? void 0 : value2.variants) === null || _a === void 0 ? void 0 : _a.map(function (value3, key3) {
|
|
33
22
|
return ((0, jsx_runtime_1.jsx)(Item, { gradient: value3 === null || value3 === void 0 ? void 0 : value3.gradient, data: value3.data }, key3));
|
|
34
23
|
}) })] }, key2));
|
|
35
24
|
}) })] }, key));
|
|
@@ -7,7 +7,7 @@ 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.ValueListWrapper = exports.Value = exports.Title = exports.Text = exports.Bg = exports.ColorItem = exports.ColorPaletteStyled = void 0;
|
|
10
|
+
exports.ValueListWrapper = exports.Value = exports.TitleLg = exports.TitleXl = exports.Title = exports.Text = exports.Bg = exports.ColorItem = exports.ColorPaletteStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.ColorPaletteStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(6, 1fr);\n gap: 15px;\n margin-bottom: 3rem;\n @media (max-width: 1200px) {\n grid-template-columns: repeat(3, 1fr);\n }\n @media (max-width: 768px) {\n grid-template-columns: repeat(2, 1fr);\n }\n @media (max-width: 576px) {\n grid-template-columns: repeat(1, 1fr);\n }\n"], ["\n display: grid;\n grid-template-columns: repeat(6, 1fr);\n gap: 15px;\n margin-bottom: 3rem;\n @media (max-width: 1200px) {\n grid-template-columns: repeat(3, 1fr);\n }\n @media (max-width: 768px) {\n grid-template-columns: repeat(2, 1fr);\n }\n @media (max-width: 576px) {\n grid-template-columns: repeat(1, 1fr);\n }\n"])));
|
|
13
13
|
exports.ColorItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border: 1px solid var(--dark-opacity-10);\n display: block;\n border-radius: 16px;\n position: relative;\n overflow: hidden;\n"], ["\n border: 1px solid var(--dark-opacity-10);\n display: block;\n border-radius: 16px;\n position: relative;\n overflow: hidden;\n"])));
|
|
@@ -18,7 +18,9 @@ exports.Bg = styled_components_1.default.div(templateObject_3 || (templateObject
|
|
|
18
18
|
: props.data.hex;
|
|
19
19
|
});
|
|
20
20
|
exports.Text = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 16px;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 22px;\n"], ["\n padding: 16px;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 22px;\n"])));
|
|
21
|
-
exports.Title = styled_components_1.default.strong(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: block;\n margin-bottom: 3px;\n text-transform: uppercase;\n color: var(--dark);\n"], ["\n display: block;\n margin-bottom: 3px;\n text-transform: uppercase;\n color: var(--dark);\n"])));
|
|
22
|
-
exports.
|
|
23
|
-
exports.
|
|
24
|
-
|
|
21
|
+
exports.Title = styled_components_1.default.strong(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: block;\n margin-bottom: 3px;\n text-transform: uppercase;\n color: var(--dark);\n font: var(--caption-bold-12-15);\n"], ["\n display: block;\n margin-bottom: 3px;\n text-transform: uppercase;\n color: var(--dark);\n font: var(--caption-bold-12-15);\n"])));
|
|
22
|
+
exports.TitleXl = styled_components_1.default.h1(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font: var(--headline-bold-24-29);\n display: block;\n"], ["\n font: var(--headline-bold-24-29);\n display: block;\n"])));
|
|
23
|
+
exports.TitleLg = styled_components_1.default.h2(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n font: var(--headline-medium-18-22);\n display: block;\n"], ["\n font: var(--headline-medium-18-22);\n display: block;\n"])));
|
|
24
|
+
exports.Value = styled_components_1.default.strong(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: block;\n color: var(--dark-opacity-50);\n font: var(--caption-regular-12-15);\n"], ["\n display: block;\n color: var(--dark-opacity-50);\n font: var(--caption-regular-12-15);\n"])));
|
|
25
|
+
exports.ValueListWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: block;\n &:first-child {\n grid-column: span 2;\n }\n"], ["\n display: block;\n &:first-child {\n grid-column: span 2;\n }\n"])));
|
|
26
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
|
@@ -18,6 +18,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
18
18
|
var react_1 = require("react");
|
|
19
19
|
var InfoBox_styled_1 = require("./InfoBox.styled");
|
|
20
20
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
21
|
+
var react_i18next_1 = require("react-i18next");
|
|
21
22
|
var InfoBox = function (props) {
|
|
22
23
|
var title = props.title, description = props.description, radius = props.radius, size = props.size;
|
|
23
24
|
var descriptionRef = (0, react_1.useRef)(null);
|
|
@@ -25,6 +26,7 @@ var InfoBox = function (props) {
|
|
|
25
26
|
var _a = (0, react_1.useState)(false), alert = _a[0], setAlert = _a[1];
|
|
26
27
|
var _b = (0, react_1.useState)(0), alertLeft = _b[0], setAlertLeft = _b[1];
|
|
27
28
|
var _c = (0, react_1.useState)(0), alertTop = _c[0], setAlertTop = _c[1];
|
|
29
|
+
var t = (0, react_i18next_1.useTranslation)().t;
|
|
28
30
|
(0, react_1.useEffect)(function () {
|
|
29
31
|
if (alert) {
|
|
30
32
|
setTimeout(function () {
|
|
@@ -53,7 +55,7 @@ var InfoBox = function (props) {
|
|
|
53
55
|
}
|
|
54
56
|
});
|
|
55
57
|
}, []);
|
|
56
|
-
return ((0, jsx_runtime_1.jsxs)(InfoBox_styled_1.InfoBoxStyled, __assign({ radius: radius }, { children: [(0, jsx_runtime_1.jsx)(InfoBox_styled_1.IconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", strokeWidth: "2px", name: "InfoSquare", width: "24px", height: "24px" }) }), (0, jsx_runtime_1.jsxs)(InfoBox_styled_1.TextWrapper, { children: [title && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Title, { dangerouslySetInnerHTML: { __html: title } }), description && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Description, { "$size": size, ref: descriptionRef, dangerouslySetInnerHTML: { __html: description } }), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.AlertStyled, __assign({ "$visible": alert, "$alertLeft": alertLeft, "$alertTop": alertTop }, { children:
|
|
58
|
+
return ((0, jsx_runtime_1.jsxs)(InfoBox_styled_1.InfoBoxStyled, __assign({ radius: radius }, { children: [(0, jsx_runtime_1.jsx)(InfoBox_styled_1.IconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", strokeWidth: "2px", name: "InfoSquare", width: "24px", height: "24px" }) }), (0, jsx_runtime_1.jsxs)(InfoBox_styled_1.TextWrapper, { children: [title && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Title, { dangerouslySetInnerHTML: { __html: title } }), description && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Description, { "$size": size, ref: descriptionRef, dangerouslySetInnerHTML: { __html: description } }), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.AlertStyled, __assign({ "$visible": alert, "$alertLeft": alertLeft, "$alertTop": alertTop }, { children: t('copied') })), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Input, { ref: inputRef, id: "infoBoxInput" })] })] })));
|
|
57
59
|
};
|
|
58
60
|
InfoBox.defaultProps = {
|
|
59
61
|
size: "small"
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
15
|
+
var ProductCardHorizontal_styled_1 = require("./ProductCardHorizontal.styled");
|
|
16
|
+
var ProductCardHorizontal = function (props) {
|
|
17
|
+
var image = props.image, title = props.title, description = props.description, price = props.price, period = props.period;
|
|
18
|
+
var LinkComponent = function (_a) {
|
|
19
|
+
var item = _a.item, children = _a.children;
|
|
20
|
+
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: children })));
|
|
21
|
+
};
|
|
22
|
+
return ((0, jsx_runtime_1.jsx)(ProductCardHorizontal_styled_1.ProductCardHorizontalStyled, { children: (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: props }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "horizontalWrapper" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: image })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: title })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "description" }, { children: description })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "priceContent" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: price })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(period) }))] }))] }))] })) })) }));
|
|
23
|
+
};
|
|
24
|
+
ProductCardHorizontal.defaultProps = {};
|
|
25
|
+
exports.default = ProductCardHorizontal;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
7
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
|
+
};
|
|
9
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
+
exports.ProductCardHorizontalStyled = void 0;
|
|
11
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
+
var devices_1 = require("../../constants/devices");
|
|
13
|
+
exports.ProductCardHorizontalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: var(--dark);\n padding: 0.5rem;\n transition: all .2s ease;\n border-radius: 8px;\n\n &:hover {\n background: var(--dark-opacity-3);\n }\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .horizontalWrapper {\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n\n .img {\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n width: 142px;\n height: 88px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n @media only screen and ", " {\n margin-right: 0.5rem;\n width: 71px;\n height: 50px;\n box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n border: 0;\n }\n\n > * {\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n display: block;\n }\n }\n .title{\n display: block;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font: var(--title-semi-bold-16-19);\n @media only screen and ", " {\n font: var(--caption-semi-bold-12-15);\n }\n }\n\n .description {\n color: var(--grey-50);\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font:var(--body-medium-14-17);\n @media only screen and ", " {\n display: none;\n }\n }\n\n .priceContent {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 4px;\n font:var(--body-extra-bold-14-17);\n @media only screen and ", " {\n font: var(--caption-extra-bold-12-15);\n }\n }\n\n .period {\n font:var(--body-regular-13-16);\n @media only screen and ", " {\n font: var(--caption-regular-12-15);\n }\n }\n }\n }\n"], ["\n color: var(--dark);\n padding: 0.5rem;\n transition: all .2s ease;\n border-radius: 8px;\n\n &:hover {\n background: var(--dark-opacity-3);\n }\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .horizontalWrapper {\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n\n .img {\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n width: 142px;\n height: 88px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n @media only screen and ", " {\n margin-right: 0.5rem;\n width: 71px;\n height: 50px;\n box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n border: 0;\n }\n\n > * {\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n display: block;\n }\n }\n .title{\n display: block;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font: var(--title-semi-bold-16-19);\n @media only screen and ", " {\n font: var(--caption-semi-bold-12-15);\n }\n }\n\n .description {\n color: var(--grey-50);\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font:var(--body-medium-14-17);\n @media only screen and ", " {\n display: none;\n }\n }\n\n .priceContent {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 4px;\n font:var(--body-extra-bold-14-17);\n @media only screen and ", " {\n font: var(--caption-extra-bold-12-15);\n }\n }\n\n .period {\n font:var(--body-regular-13-16);\n @media only screen and ", " {\n font: var(--caption-regular-12-15);\n }\n }\n }\n }\n"])), devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm);
|
|
14
|
+
var templateObject_1;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var ProductCardHorizontal_1 = require("./ProductCardHorizontal");
|
|
8
|
+
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ProductCardHorizontal_1).default; } });
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.Default = void 0;
|
|
18
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
|
+
var ProductCardHorizontal_1 = __importDefault(require("../ProductCardHorizontal"));
|
|
20
|
+
exports.default = {
|
|
21
|
+
title: 'Components/ProductCard/ProductCard Horizontal',
|
|
22
|
+
component: ProductCardHorizontal_1.default,
|
|
23
|
+
tags: ['autodocs'],
|
|
24
|
+
argTypes: {}
|
|
25
|
+
};
|
|
26
|
+
exports.Default = {
|
|
27
|
+
args: {
|
|
28
|
+
title: "Apple İpad Air WİFİ 64GB (2020)",
|
|
29
|
+
description: "50Q9900 50'' 126 Ekran QLED Smart 4K Ultra HD TV",
|
|
30
|
+
price: "12.545,24 TL",
|
|
31
|
+
component: function (_a) {
|
|
32
|
+
var children = _a.children;
|
|
33
|
+
return (0, jsx_runtime_1.jsx)("a", __assign({ href: "test" }, { children: children }));
|
|
34
|
+
},
|
|
35
|
+
period: "hafta",
|
|
36
|
+
image: (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" })
|
|
37
|
+
},
|
|
38
|
+
};
|
|
@@ -37,7 +37,7 @@ var ProductCardVertical = function (props) {
|
|
|
37
37
|
var item = _a.item, children = _a.children;
|
|
38
38
|
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: children })));
|
|
39
39
|
};
|
|
40
|
-
return ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.ProductCardVerticalStyled, __assign({ "$isResponsive": props.isResponsive, "$discountRate": props.discountRate }, other, { children: (0, jsx_runtime_1.jsxs)(LinkComponent, __assign({ item: props }, { children: [hasDiscount && (0, jsx_runtime_1.jsx)("div", __assign({ className: "cartBadge" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { size: "medium", left: (isResponsive ? '16px' : '8px'), top: (isResponsive ? '16px' : '8px'), title: t("discount") }) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: image })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardContent" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle" }, { children: title })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "productCardDescription" }, { children: description })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardPriceContent" }, { children: [discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discountRate" }, { children: ["%", discountRate] })), (0, jsx_runtime_1.jsxs)("div", { children: [oldPrice && discountRate > 0 && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "oldPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: oldPrice })), (0, jsx_runtime_1.
|
|
40
|
+
return ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.ProductCardVerticalStyled, __assign({ "$isResponsive": props.isResponsive, "$discountRate": props.discountRate }, other, { children: (0, jsx_runtime_1.jsxs)(LinkComponent, __assign({ item: props }, { children: [hasDiscount && (0, jsx_runtime_1.jsx)("div", __assign({ className: "cartBadge" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { size: "medium", left: (isResponsive ? '16px' : '8px'), top: (isResponsive ? '16px' : '8px'), title: t("discount") }) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: image })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardContent" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle" }, { children: title })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "productCardDescription" }, { children: description })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardPriceContent" }, { children: [discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discountRate" }, { children: ["%", discountRate] })), (0, jsx_runtime_1.jsxs)("div", { children: [oldPrice && discountRate > 0 && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "oldPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: oldPrice })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(oldPricePeriod) }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "newPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: price })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(period) }))] }))] })] }))] }))] })) })));
|
|
41
41
|
};
|
|
42
42
|
ProductCardVertical.propTypes = {
|
|
43
43
|
isResponsive: prop_types_1.default.bool,
|
|
@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.ProductCardVerticalStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.ProductCardVerticalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-shadow: 0 6px 30px 0 #EAE9F0;\n border-radius: 0.5rem;\n min-width: 240px;\n padding: 1rem;\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n .cartBadge{\n position: absolute;\n left: 8px;\n top: 8px;\n z-index: 2;\n }\n a {\n text-decoration: none;\n color: inherit;\n }\n\n &:hover {\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n\n .img {\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n background: #FFF;\n position: relative;\n overflow: hidden;\n height: 150px;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n > * {\n width: 100%;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n *{ \n height: calc(100% - 0.5rem) !important;\n aspect-ratio: 1 / 1 !important;\n }\n }\n .productCardContent{ \n padding: 1rem 0 0.5rem 0;\n .productCardTitle{\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 38px;\n word-break: break-word;\n font: var(--title-bold-16-19);\n }\n .productCardDescription{\n display: block;\n margin-top: 0.5rem;\n color: var(--grey-40);\n margin-bottom: 1.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 34px;\n word-break: break-word;\n font: var(--body-medium-14-17);\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n height: 36px;\n grid-template-columns: ", ";\n\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 8px;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font: var(--body-extra-bold-13-16);\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right:
|
|
13
|
+
exports.ProductCardVerticalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-shadow: 0 6px 30px 0 #EAE9F0;\n border-radius: 0.5rem;\n min-width: 240px;\n padding: 1rem;\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n .cartBadge{\n position: absolute;\n left: 8px;\n top: 8px;\n z-index: 2;\n }\n a {\n text-decoration: none;\n color: inherit;\n }\n\n &:hover {\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n\n .img {\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n background: #FFF;\n position: relative;\n overflow: hidden;\n height: 150px;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n > * {\n width: 100%;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n *{ \n height: calc(100% - 0.5rem) !important;\n aspect-ratio: 1 / 1 !important;\n }\n }\n .productCardContent{ \n padding: 1rem 0 0.5rem 0;\n .productCardTitle{\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 38px;\n word-break: break-word;\n font: var(--title-bold-16-19);\n }\n .productCardDescription{\n display: block;\n margin-top: 0.5rem;\n color: var(--grey-40);\n margin-bottom: 1.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 34px;\n word-break: break-word;\n font: var(--body-medium-14-17);\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n height: 36px;\n grid-template-columns: ", ";\n\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 8px;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font: var(--body-extra-bold-13-16);\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 4px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n .price, .period {\n text-decoration: line-through;\n }\n .price{\n font: var(--caption-semi-bold-12-15);\n }\n .period{\n font:var(--caption-regular-12-15);\n }\n }\n\n .newPrice {\n .price{\n font: var(--body-extra-bold-14-17);\n }\n .period{\n font: var(--body-regular-13-16);\n }\n }\n }\n }\n\n ", "\n"], ["\n box-shadow: 0 6px 30px 0 #EAE9F0;\n border-radius: 0.5rem;\n min-width: 240px;\n padding: 1rem;\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n .cartBadge{\n position: absolute;\n left: 8px;\n top: 8px;\n z-index: 2;\n }\n a {\n text-decoration: none;\n color: inherit;\n }\n\n &:hover {\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n\n .img {\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n background: #FFF;\n position: relative;\n overflow: hidden;\n height: 150px;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n > * {\n width: 100%;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n *{ \n height: calc(100% - 0.5rem) !important;\n aspect-ratio: 1 / 1 !important;\n }\n }\n .productCardContent{ \n padding: 1rem 0 0.5rem 0;\n .productCardTitle{\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 38px;\n word-break: break-word;\n font: var(--title-bold-16-19);\n }\n .productCardDescription{\n display: block;\n margin-top: 0.5rem;\n color: var(--grey-40);\n margin-bottom: 1.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 34px;\n word-break: break-word;\n font: var(--body-medium-14-17);\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n height: 36px;\n grid-template-columns: ", ";\n\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 8px;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font: var(--body-extra-bold-13-16);\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 4px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n .price, .period {\n text-decoration: line-through;\n }\n .price{\n font: var(--caption-semi-bold-12-15);\n }\n .period{\n font:var(--caption-regular-12-15);\n }\n }\n\n .newPrice {\n .price{\n font: var(--body-extra-bold-14-17);\n }\n .period{\n font: var(--body-regular-13-16);\n }\n }\n }\n }\n\n ", "\n"])), function (props) { return props.$discountRate ? 'center' : 'end'; }, function (props) { return props.$discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.$isResponsive && "\n @media only screen and ".concat(devices_1.devices.sm, " {\n padding: 1.5rem;\n .cartBadge{\n left: 16px;\n top: 16px;\n }\n .img {\n height: 215px;\n }\n .productCardContent{\n padding: 1.5rem 0 0.5rem 0;\n .productCardTitle{\n height: 44px;\n font: var(--headline-bold-18-22);\n }\n .productCardDescription{\n margin-bottom: 1.5rem;\n height: 37px;\n font: var(--title-medium-16-19);\n }\n .productCardPriceContent{\n height: 48px;\n .discountRate{\n width: 65px;\n height: 48px;\n font: var(--title-extra-bold-16-19);\n }\n \n .oldPrice {\n .price{\n font: var(--body-semi-bold-13-16);\n }\n }\n .newPrice {\n .price{\n font: var(--title-extra-bold-16-19);\n }\n .period{\n font: var(--body-regular-14-17);\n }\n }\n }\n }\n }\n "); });
|
|
14
14
|
var templateObject_1;
|
|
@@ -24,7 +24,7 @@ var ShoppingCartProduct = function (props) {
|
|
|
24
24
|
var item = _a.item, children = _a.children;
|
|
25
25
|
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: children })));
|
|
26
26
|
};
|
|
27
|
-
return ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ShoppingCartProductStyled, __assign({ "$discountRate": props.discountRate, "$hasDisableActions": props.hasDisableActions }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "inner" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: props }, { children: props.image })) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "text" }, { children: (0, jsx_runtime_1.jsxs)(LinkComponent, __assign({ item: props }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle" }, { children: props.title })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardPriceContent" }, { children: [props.discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discountRate" }, { children: ["%", props.discountRate] })), (0, jsx_runtime_1.jsxs)("div", { children: [props.oldPrice && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "oldPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: props.oldPrice })), props.oldPricePeriod && (0, jsx_runtime_1.
|
|
27
|
+
return ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ShoppingCartProductStyled, __assign({ "$discountRate": props.discountRate, "$hasDisableActions": props.hasDisableActions }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "inner" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: props }, { children: props.image })) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "text" }, { children: (0, jsx_runtime_1.jsxs)(LinkComponent, __assign({ item: props }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle" }, { children: props.title })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardPriceContent" }, { children: [props.discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discountRate" }, { children: ["%", props.discountRate] })), (0, jsx_runtime_1.jsxs)("div", { children: [props.oldPrice && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "oldPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: props.oldPrice })), props.oldPricePeriod && (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(props.oldPricePeriod) }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "newPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: props.price })), props.period && (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(props.period) }))] }))] })] })), (0, jsx_runtime_1.jsxs)("p", __assign({ className: "productCardDeliveryText" }, { children: [props.deliveryDangerText &&
|
|
28
28
|
(0, jsx_runtime_1.jsx)("span", __assign({ className: "productCardDeliveryDanger" }, { children: props.deliveryDangerText })), props.deliveryText] }))] })) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "actions" }, { children: [!props.hasDisableActions && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading || props.hasError, onClick: props.onIncrement, className: "actionButton" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall", width: "16px", height: "16px" }), props.hasError && (0, jsx_runtime_1.jsx)("div", __assign({ className: "popup" }, { children: props.errorText }))] }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "quantity" }, { children: props.hasLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) : props.quantity })), !props.hasDisableActions && (props.hasRemove ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, onClick: props.onRemove, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Delete", width: "16px", height: "16px" }) }))) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, onClick: props.onDecrement, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "NegativeSmall", width: "16px", height: "16px" }) }))))] }))] })), props.hasInsurance && ((0, jsx_runtime_1.jsxs)("div", __assign({ onClick: !props.hasLoading && props.toggleInsurance, className: "insurance" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "insuranceImg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: "Tamamlarsin", width: "80px", height: "9.14px" }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [props.insuranceText, props.insurancePrice && (0, jsx_runtime_1.jsxs)("p", __assign({ className: "price" }, { children: [props.insurancePrice, (0, jsx_runtime_1.jsx)("span", __assign({ className: "quantity" }, { children: props.insuranceQuantity }))] }))] })), props.hasInsuranceActions && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "actions" }, { children: props.hasInsuranceTooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupRight: "-16px", hasClickAction: props.hasInsuranceTooltipClickAction, popupWidth: props.insuranceTooltipWidth, position: "bottomRight" }, { children: props.insuranceTooltipText }))) : (props.insurancePrice ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Delete", width: "16px", height: "16px" }) }))) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRight", width: "24px", height: "24px" }) })))) })))] })))] })));
|
|
29
29
|
};
|
|
30
30
|
ShoppingCartProduct.defaultProps = {
|
|
@@ -9,6 +9,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.ActionButton = exports.ShoppingCartProductStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.ShoppingCartProductStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n a {\n text-decoration: none;\n color: inherit;\n } \n\n .inner {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n position: relative;\n z-index: 5;\n .img {\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n }\n .text{\n padding-right: 0.5rem;\n .productCardTitle {\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 19px;\n word-break: break-word;\n margin-bottom: 0.5rem;\n font:var(--title-semi-bold-16-19);\n &:hover{\n color: var(--primary-hover);\n }\n }\n\n .productCardDeliveryText {\n margin-top: 0.5rem;\n margin-bottom: 0;\n color: var(--grey-40);\n display: block;\n overflow: hidden;\n font:var(--body-medium-13-16);\n .productCardDeliveryDanger{\n display: block;\n color: var(--red);\n }\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n grid-template-columns: ", ";\n\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 8px;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font:var(--body-extra-bold-13-16);\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right:
|
|
12
|
+
exports.ShoppingCartProductStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n a {\n text-decoration: none;\n color: inherit;\n } \n\n .inner {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n position: relative;\n z-index: 5;\n .img {\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n }\n .text{\n padding-right: 0.5rem;\n .productCardTitle {\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 19px;\n word-break: break-word;\n margin-bottom: 0.5rem;\n font:var(--title-semi-bold-16-19);\n &:hover{\n color: var(--primary-hover);\n }\n }\n\n .productCardDeliveryText {\n margin-top: 0.5rem;\n margin-bottom: 0;\n color: var(--grey-40);\n display: block;\n overflow: hidden;\n font:var(--body-medium-13-16);\n .productCardDeliveryDanger{\n display: block;\n color: var(--red);\n }\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n grid-template-columns: ", ";\n\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 8px;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font:var(--body-extra-bold-13-16);\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 4px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n\n .price {\n text-decoration: line-through;\n font:var(--caption-semi-bold-12-15);\n }\n\n .period {\n text-decoration: line-through;\n font:var(--caption-regular-12-15);\n }\n }\n\n .newPrice {\n .price {\n font:var(--body-extra-bold-14-17);\n }\n .period {\n font:var(--body-regular-13-16);\n }\n }\n }\n }\n .actions{\n width: 32px;\n height: 92px;\n background-color: var(--dark-opacity-3);\n border-radius: 0.5rem;\n text-align: center;\n display: grid;\n align-content: ", ";\n justify-content: center;\n padding: 4px 0;\n .quantity{\n color: ", ";\n font:var(--body-extra-bold-13-16);\n > div{\n margin: 0 auto;\n }\n }\n }\n }\n .insurance{\n position: relative;\n margin-top: 1.5rem;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n padding-right: 4px;\n &:before{\n content: \"\";\n position: absolute;\n left: 47px;\n bottom: 100%;\n width: 1px;\n background-color: var(--dark-opacity-5);\n height: 40px;\n }\n .insuranceImg{\n width: 96px;\n height: 40px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .text{\n display: block;\n font:var(--caption-semi-bold-12-15);\n .price{\n display: block;\n margin: 0;\n font:var(--caption-extra-bold-12-15);\n .quantity{\n display: inline-block;\n margin-left: 0.5rem;\n }\n }\n }\n .actions{\n width: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n"], ["\n\n a {\n text-decoration: none;\n color: inherit;\n } \n\n .inner {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n position: relative;\n z-index: 5;\n .img {\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n }\n .text{\n padding-right: 0.5rem;\n .productCardTitle {\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 19px;\n word-break: break-word;\n margin-bottom: 0.5rem;\n font:var(--title-semi-bold-16-19);\n &:hover{\n color: var(--primary-hover);\n }\n }\n\n .productCardDeliveryText {\n margin-top: 0.5rem;\n margin-bottom: 0;\n color: var(--grey-40);\n display: block;\n overflow: hidden;\n font:var(--body-medium-13-16);\n .productCardDeliveryDanger{\n display: block;\n color: var(--red);\n }\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n grid-template-columns: ", ";\n\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 8px;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font:var(--body-extra-bold-13-16);\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 4px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n\n .price {\n text-decoration: line-through;\n font:var(--caption-semi-bold-12-15);\n }\n\n .period {\n text-decoration: line-through;\n font:var(--caption-regular-12-15);\n }\n }\n\n .newPrice {\n .price {\n font:var(--body-extra-bold-14-17);\n }\n .period {\n font:var(--body-regular-13-16);\n }\n }\n }\n }\n .actions{\n width: 32px;\n height: 92px;\n background-color: var(--dark-opacity-3);\n border-radius: 0.5rem;\n text-align: center;\n display: grid;\n align-content: ", ";\n justify-content: center;\n padding: 4px 0;\n .quantity{\n color: ", ";\n font:var(--body-extra-bold-13-16);\n > div{\n margin: 0 auto;\n }\n }\n }\n }\n .insurance{\n position: relative;\n margin-top: 1.5rem;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n padding-right: 4px;\n &:before{\n content: \"\";\n position: absolute;\n left: 47px;\n bottom: 100%;\n width: 1px;\n background-color: var(--dark-opacity-5);\n height: 40px;\n }\n .insuranceImg{\n width: 96px;\n height: 40px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .text{\n display: block;\n font:var(--caption-semi-bold-12-15);\n .price{\n display: block;\n margin: 0;\n font:var(--caption-extra-bold-12-15);\n .quantity{\n display: inline-block;\n margin-left: 0.5rem;\n }\n }\n }\n .actions{\n width: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n"])), function (props) { return props.$discountRate ? 'center' : 'end'; }, function (props) { return props.$discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.$hasDisableActions ? 'center' : 'space-between'; }, function (props) { return props.$hasDisableActions ? 'var(--grey-50)' : 'var(--dark)'; });
|
|
13
13
|
exports.ActionButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border:0;\n padding: 0;\n outline: none;\n box-shadow: none;\n width: 24px;\n height: 24px;\n background: white;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all .1s ease;\n cursor: pointer;\n position: relative;\n color : var(--primary);\n /*&:hover{\n .popup{\n opacity: 1;\n }\n }*/\n &:disabled{\n cursor: no-drop;\n }\n .popup{\n position: absolute;\n width: 139px;\n padding: 10px;\n border-radius: 0.5rem;\n background-color: var(--red);\n z-index: 99999;\n box-sizing: border-box;\n right: calc(100% + 11px);\n top: -8px;\n color: white;\n //opacity: 0;\n opacity: 1;\n user-select: none;\n pointer-events: none;\n transition: all .1s ease;\n text-align: center;\n font:var(--caption-semi-bold-12-15);\n &:before {\n content: '';\n position: absolute;\n top: 14px;\n left: calc(100% - 7px);\n transform: rotate(45deg);\n background-color: var(--red);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n }\n }\n &:hover{\n background-color : var(--primary);\n color : white;\n }\n"], ["\n border:0;\n padding: 0;\n outline: none;\n box-shadow: none;\n width: 24px;\n height: 24px;\n background: white;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all .1s ease;\n cursor: pointer;\n position: relative;\n color : var(--primary);\n /*&:hover{\n .popup{\n opacity: 1;\n }\n }*/\n &:disabled{\n cursor: no-drop;\n }\n .popup{\n position: absolute;\n width: 139px;\n padding: 10px;\n border-radius: 0.5rem;\n background-color: var(--red);\n z-index: 99999;\n box-sizing: border-box;\n right: calc(100% + 11px);\n top: -8px;\n color: white;\n //opacity: 0;\n opacity: 1;\n user-select: none;\n pointer-events: none;\n transition: all .1s ease;\n text-align: center;\n font:var(--caption-semi-bold-12-15);\n &:before {\n content: '';\n position: absolute;\n top: 14px;\n left: calc(100% - 7px);\n transform: rotate(45deg);\n background-color: var(--red);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n }\n }\n &:hover{\n background-color : var(--primary);\n color : white;\n }\n"])));
|
|
14
14
|
var templateObject_1, templateObject_2;
|
|
@@ -20,8 +20,8 @@ var typography_json_1 = __importDefault(require("./../../jsons/typography.json")
|
|
|
20
20
|
var props_1 = require("./props");
|
|
21
21
|
var Typography = function (props) {
|
|
22
22
|
return typography_json_1.default.map(function (value, key) {
|
|
23
|
-
return ((0, jsx_runtime_1.jsxs)(Typography_styled_1.TypographyStyled, { children: [(0, jsx_runtime_1.jsx)(Typography_styled_1.Thead, { children: (0, jsx_runtime_1.jsxs)(Typography_styled_1.Tr, { children: [(0, jsx_runtime_1.jsxs)(Typography_styled_1.Th, __assign({ width: 350
|
|
24
|
-
return ((0, jsx_runtime_1.jsxs)(Typography_styled_1.Tr, { children: [(0, jsx_runtime_1.jsxs)(Typography_styled_1.Td, { children: [" ", (0, jsx_runtime_1.jsxs)(Typography_styled_1.LeftTitle,
|
|
23
|
+
return ((0, jsx_runtime_1.jsxs)(Typography_styled_1.TypographyStyled, { children: [(0, jsx_runtime_1.jsx)(Typography_styled_1.Thead, { children: (0, jsx_runtime_1.jsxs)(Typography_styled_1.Tr, { children: [(0, jsx_runtime_1.jsxs)(Typography_styled_1.Th, __assign({ width: 350 }, { children: [" ", value.name, " "] })), props_1.weights.map(function (weight, wKey) { return (0, jsx_runtime_1.jsxs)(Typography_styled_1.Th, __assign({ width: 190 }, { children: [" ", weight.title, " "] }), wKey); })] }) }), (0, jsx_runtime_1.jsx)(Typography_styled_1.Tbody, { children: value.variants.map(function (value2, key2) {
|
|
24
|
+
return ((0, jsx_runtime_1.jsxs)(Typography_styled_1.Tr, { children: [(0, jsx_runtime_1.jsxs)(Typography_styled_1.Td, { children: [" ", (0, jsx_runtime_1.jsxs)(Typography_styled_1.LeftTitle, { children: [" ", value2.name, " "] }), " "] }), props_1.weights.map(function (weight, wKey) { return (0, jsx_runtime_1.jsxs)(Typography_styled_1.Td, __assign({ className: value2.class.replace("{{weight}}", weight.class) }, { children: [" ", value2.text, " "] }), wKey); })] }, key2));
|
|
25
25
|
}) })] }, key));
|
|
26
26
|
});
|
|
27
27
|
};
|
|
@@ -10,8 +10,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.Tbody = exports.Thead = exports.Tr = exports.Td = exports.Th = exports.LeftTitle = exports.TypographyStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.TypographyStyled = styled_components_1.default.table(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: table;\n width: 100%;\n padding-bottom: 160px;\n text-align: left;\n"], ["\n display: table;\n width: 100%;\n padding-bottom: 160px;\n text-align: left;\n"])));
|
|
13
|
-
exports.LeftTitle = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: var(--grey-50);\n"], ["\n color: var(--grey-50);\n"])));
|
|
14
|
-
exports.Th = styled_components_1.default.th(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding-bottom: 88px;\n width: ", "px;\n"], ["\n padding-bottom: 88px;\n width: ", "px;\n"])), function (props) { return props === null || props === void 0 ? void 0 : props.width; });
|
|
13
|
+
exports.LeftTitle = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: var(--grey-50);\n font: var(--headline-semi-bold-24-29);\n"], ["\n color: var(--grey-50);\n font: var(--headline-semi-bold-24-29);\n"])));
|
|
14
|
+
exports.Th = styled_components_1.default.th(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding-bottom: 88px;\n width: ", "px;\n font: var(--headline-black-32-39);\n"], ["\n padding-bottom: 88px;\n width: ", "px;\n font: var(--headline-black-32-39);\n"])), function (props) { return props === null || props === void 0 ? void 0 : props.width; });
|
|
15
15
|
exports.Td = styled_components_1.default.td(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding-bottom: 11px;\n"], ["\n padding-bottom: 11px;\n"])));
|
|
16
16
|
exports.Tr = styled_components_1.default.tr(templateObject_5 || (templateObject_5 = __makeTemplateObject([""], [""])));
|
|
17
17
|
exports.Thead = styled_components_1.default.thead(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""])));
|
package/dist/index.js
CHANGED
|
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.ProductCardVertical = exports.BannerCard = exports.AutocompleteInput = exports.Slider = exports.InstallmentBox = exports.AddressCard = exports.ReviewCard = exports.trLocale = exports.enLocale = exports.initi18n = exports.initReactI18next = exports.CampaignCard = exports.Dropdown = exports.InlineProgress = exports.Loader = exports.ShoppingCartProduct = exports.CouponCode = exports.InfoBox = exports.ContentBox = exports.ListGroup = exports.InsuranceBox = exports.Tooltip = exports.TextLink = exports.SelectBox = exports.Badges = exports.Carousel = exports.SuggestBox = exports.Toast = exports.Banner = exports.Accordion = exports.Divider = exports.SearchBox = exports.ValueProposition = exports.Textarea = exports.ActionButton = exports.RadioButton = exports.Icon = exports.Agreement = exports.Alert = exports.Stepper = exports.ProductCard = exports.OtpInput = exports.Modal = exports.Input = exports.CircleProgress = exports.Checkbox = exports.CategoryMenu = exports.Breadcrumbs = exports.Button = void 0;
|
|
6
|
+
exports.ProductCardHorizontal = exports.ProductCardVertical = exports.BannerCard = exports.AutocompleteInput = exports.Slider = exports.InstallmentBox = exports.AddressCard = exports.ReviewCard = exports.trLocale = exports.enLocale = exports.initi18n = exports.initReactI18next = exports.CampaignCard = exports.Dropdown = exports.InlineProgress = exports.Loader = exports.ShoppingCartProduct = exports.CouponCode = exports.InfoBox = exports.ContentBox = exports.ListGroup = exports.InsuranceBox = exports.Tooltip = exports.TextLink = exports.SelectBox = exports.Badges = exports.Carousel = exports.SuggestBox = exports.Toast = exports.Banner = exports.Accordion = exports.Divider = exports.SearchBox = exports.ValueProposition = exports.Textarea = exports.ActionButton = exports.RadioButton = exports.Icon = exports.Agreement = exports.Alert = exports.Stepper = exports.ProductCard = exports.OtpInput = exports.Modal = exports.Input = exports.CircleProgress = exports.Checkbox = exports.CategoryMenu = exports.Breadcrumbs = exports.Button = void 0;
|
|
7
7
|
var Button_1 = __importDefault(require("./components/Button"));
|
|
8
8
|
exports.Button = Button_1.default;
|
|
9
9
|
var Breadcrumbs_1 = __importDefault(require("./components/Breadcrumbs"));
|
|
@@ -102,3 +102,5 @@ var ProductCardVertical_1 = __importDefault(require("./components/ProductCardVer
|
|
|
102
102
|
exports.ProductCardVertical = ProductCardVertical_1.default;
|
|
103
103
|
var react_slick_1 = __importDefault(require("react-slick"));
|
|
104
104
|
exports.Slider = react_slick_1.default;
|
|
105
|
+
var ProductCardHorizontal_1 = __importDefault(require("./components/ProductCardHorizontal"));
|
|
106
|
+
exports.ProductCardHorizontal = ProductCardHorizontal_1.default;
|