krl-alfred 1.63.1 → 1.64.0
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/Badges/Badges.js +33 -0
- package/dist/components/Badges/index.js +8 -0
- package/dist/components/Badges/layouts/belt/belt.styled.js +13 -0
- package/dist/components/Badges/layouts/belt/index.js +26 -0
- package/dist/components/Badges/layouts/dark/dark.styled.js +13 -0
- package/dist/components/Badges/layouts/dark/index.js +46 -0
- package/dist/components/Badges/props.js +5 -0
- package/dist/components/Badges/stories/Badges.stories.js +22 -0
- package/dist/components/Banner/Banner.styled.js +1 -1
- package/dist/components/Banner/layouts/layout1/index.js +2 -2
- package/dist/components/Carousel/Carousel.js +50 -0
- package/dist/components/Carousel/Carousel.styled.js +14 -0
- package/dist/components/Carousel/index.js +8 -0
- package/dist/components/Carousel/props.js +3 -0
- package/dist/components/Carousel/stories/Carousel.stories.js +22 -0
- package/dist/components/Icon/DarkBadge.js +40 -0
- package/dist/components/Icon/index.js +9 -3
- package/dist/components/ProductCard/ProductCard.styled.js +1 -1
- package/dist/components/ProductCard/layouts/Standart.js +2 -2
- package/dist/index.js +5 -1
- package/dist/jsons/carousel.js +15 -0
- package/package.json +1 -1
|
@@ -0,0 +1,33 @@
|
|
|
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
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
18
|
+
var belt_1 = __importDefault(require("./layouts/belt"));
|
|
19
|
+
var dark_1 = __importDefault(require("./layouts/dark"));
|
|
20
|
+
var Badges = function (props) {
|
|
21
|
+
switch (props.layout) {
|
|
22
|
+
case 'belt':
|
|
23
|
+
return (0, jsx_runtime_1.jsx)(belt_1.default, __assign({}, props));
|
|
24
|
+
case 'dark':
|
|
25
|
+
return (0, jsx_runtime_1.jsx)(dark_1.default, __assign({}, props));
|
|
26
|
+
default:
|
|
27
|
+
return (0, jsx_runtime_1.jsx)(belt_1.default, __assign({}, props));
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
Badges.defaultProps = {
|
|
31
|
+
title: "İndirimli"
|
|
32
|
+
};
|
|
33
|
+
exports.default = Badges;
|
|
@@ -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 Badges_1 = require("./Badges");
|
|
8
|
+
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Badges_1).default; } });
|
|
@@ -0,0 +1,13 @@
|
|
|
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.BadgesStyled = void 0;
|
|
11
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
+
exports.BadgesStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n z-index: 2;\n filter: drop-shadow(4px 4px 15px rgba(151,99,246,.5));\n svg{\n display: block;\n }\n .text{\n position: absolute;\n width: ", ";\n text-align: center;\n height: 16px;\n color: white;\n transform: rotate(-45deg);\n top: ", ";\n left: ", ";\n }\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n z-index: 2;\n filter: drop-shadow(4px 4px 15px rgba(151,99,246,.5));\n svg{\n display: block;\n }\n .text{\n position: absolute;\n width: ", ";\n text-align: center;\n height: 16px;\n color: white;\n transform: rotate(-45deg);\n top: ", ";\n left: ", ";\n }\n"])), function (props) { return props.left ? props.left : "9px"; }, function (props) { return props.top ? props.top : "12px"; }, function (props) { return props.size === "small" ? "60px" : "90px"; }, function (props) { return props.size === "small" ? "15px" : "27px"; }, function (props) { return props.size === "small" ? "-5px" : "-7px"; });
|
|
13
|
+
var templateObject_1;
|
|
@@ -0,0 +1,26 @@
|
|
|
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
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
18
|
+
var belt_styled_1 = require("./belt.styled");
|
|
19
|
+
var Icon_1 = __importDefault(require("../../../Icon/Icon"));
|
|
20
|
+
var classnames_1 = __importDefault(require("classnames"));
|
|
21
|
+
var Belt = function (props) {
|
|
22
|
+
var title = props.title, size = props.size;
|
|
23
|
+
return ((0, jsx_runtime_1.jsxs)(belt_styled_1.BadgesStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Rectangle", width: size === "small" ? "56px" : "90px", height: size === "small" ? "56px" : "90px" }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("text", (size === "small" ? "caption-bold-10-12" : "body-extra-bold-13-16")), children: title })] })));
|
|
24
|
+
};
|
|
25
|
+
Belt.defaultProps = {};
|
|
26
|
+
exports.default = Belt;
|
|
@@ -0,0 +1,13 @@
|
|
|
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.DarkStyled = void 0;
|
|
11
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
+
exports.DarkStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n left: ", ";\n top: ", ";\n z-index: 2;\n svg{\n display: block;\n }\n"], ["\n position: relative;\n left: ", ";\n top: ", ";\n z-index: 2;\n svg{\n display: block;\n }\n"])), function (props) { return props.left ? props.left : "0"; }, function (props) { return props.top ? props.top : "0"; });
|
|
13
|
+
var templateObject_1;
|
|
@@ -0,0 +1,46 @@
|
|
|
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
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
18
|
+
var react_1 = require("react");
|
|
19
|
+
var dark_styled_1 = require("./dark.styled");
|
|
20
|
+
var Icon_1 = __importDefault(require("../../../Icon/Icon"));
|
|
21
|
+
var Belt = function (props) {
|
|
22
|
+
var size = props.size;
|
|
23
|
+
var _a = (0, react_1.useState)("24px"), width = _a[0], setWidth = _a[1];
|
|
24
|
+
var _b = (0, react_1.useState)("24px"), height = _b[0], setHeight = _b[1];
|
|
25
|
+
(0, react_1.useEffect)(function () {
|
|
26
|
+
if (size === 'xsmall') {
|
|
27
|
+
setWidth("24px");
|
|
28
|
+
setHeight("24px");
|
|
29
|
+
}
|
|
30
|
+
else if (size === 'small') {
|
|
31
|
+
setWidth("40px");
|
|
32
|
+
setHeight("40px");
|
|
33
|
+
}
|
|
34
|
+
else if (size === 'medium') {
|
|
35
|
+
setWidth("56px");
|
|
36
|
+
setHeight("56px");
|
|
37
|
+
}
|
|
38
|
+
else if (size === 'large') {
|
|
39
|
+
setWidth("80px");
|
|
40
|
+
setHeight("80px");
|
|
41
|
+
}
|
|
42
|
+
}, [size]);
|
|
43
|
+
return ((0, jsx_runtime_1.jsx)(dark_styled_1.DarkStyled, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "DarkBadge", width: width, height: height }) })));
|
|
44
|
+
};
|
|
45
|
+
Belt.defaultProps = {};
|
|
46
|
+
exports.default = Belt;
|
|
@@ -0,0 +1,22 @@
|
|
|
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 Badges_1 = __importDefault(require("../Badges"));
|
|
8
|
+
var props_1 = require("../props");
|
|
9
|
+
exports.default = {
|
|
10
|
+
title: 'Components/Badges',
|
|
11
|
+
component: Badges_1.default,
|
|
12
|
+
tags: ['autodocs'],
|
|
13
|
+
argTypes: {
|
|
14
|
+
layout: { control: 'select', options: props_1.layouts },
|
|
15
|
+
size: { control: 'select', options: props_1.sizes },
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
exports.Default = {
|
|
19
|
+
args: {
|
|
20
|
+
title: "İndirimli",
|
|
21
|
+
},
|
|
22
|
+
};
|
|
@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.BannerStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.BannerStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-width: 1050px;\n margin: 0 auto;\n\n .swiper-wrapper {\n align-items: center;\n }\n\n .inner {\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n position: relative;\n overflow: hidden; \n }\n\n .item {\n padding: 0 5rem;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n height: 420px;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n\n .text {\n @media only screen and ", " {\n display: none;\n }\n\n .title {\n margin-bottom: 1.5rem;\n display: block;\n }\n\n .description {\n margin-top: 0;\n margin-bottom: 1.5rem;\n display: block;\n }\n }\n\n .textMobile {\n display: none;\n background-color: var(--primary-shades-dark);\n padding: 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n\n svg {\n path {\n stroke: white;\n }\n }\n\n b {\n display: block;\n }\n\n @media only screen and ", " {\n display: flex;\n }\n }\n\n .img {\n text-align: end;\n\n img {\n max-height: 100%;\n max-width: 100%;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 2.5rem 2.5rem 1rem;\n text-align: center;\n }\n }\n }\n\n .thumbnailSlider {\n margin-top: 3rem;\n display: flex;\n align-items: center;\n justify-content: center;\n @media only screen and ", " {\n display: none;\n }\n\n .thumbnailInner {\n justify-content: center;\n display: flex;\n align-items: center;\n margin: 0 2.5rem;\n\n .thumbnailItem {\n border: 1px solid var(--dark-opacity-10);\n height: 50px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 4px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n width: 70px;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n\n &:is(.active) {\n border-color: var(--primary);\n }\n\n > * {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n }\n }\n }\n\n .
|
|
13
|
+
exports.BannerStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-width: 1050px;\n margin: 0 auto;\n\n .swiper-wrapper {\n align-items: center;\n }\n\n .inner {\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n position: relative;\n overflow: hidden; \n }\n\n .item {\n padding: 0 5rem;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n height: 420px;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n\n .text {\n @media only screen and ", " {\n display: none;\n }\n\n .title {\n margin-bottom: 1.5rem;\n display: block;\n }\n\n .description {\n margin-top: 0;\n margin-bottom: 1.5rem;\n display: block;\n }\n }\n\n .textMobile {\n display: none;\n background-color: var(--primary-shades-dark);\n padding: 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n\n svg {\n path {\n stroke: white;\n }\n }\n\n b {\n display: block;\n }\n\n @media only screen and ", " {\n display: flex;\n }\n }\n\n .img {\n text-align: end;\n\n img {\n max-height: 100%;\n max-width: 100%;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 2.5rem 2.5rem 1rem;\n text-align: center;\n }\n }\n }\n\n .thumbnailSlider {\n margin-top: 3rem;\n display: flex;\n align-items: center;\n justify-content: center;\n @media only screen and ", " {\n display: none;\n }\n\n .thumbnailInner {\n justify-content: center;\n display: flex;\n align-items: center;\n margin: 0 2.5rem;\n\n .thumbnailItem {\n border: 1px solid var(--dark-opacity-10);\n height: 50px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 4px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n width: 70px;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n\n &:is(.active) {\n border-color: var(--primary);\n }\n\n > * {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n }\n }\n }\n\n .navigation {\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: 48px;\n height: 48px;\n box-shadow: 0 0 16px 0 white;\n border: 0;\n background-color: white;\n\n svg {\n path {\n stroke: var(--primary);\n }\n }\n\n &:hover {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n }\n"], ["\n max-width: 1050px;\n margin: 0 auto;\n\n .swiper-wrapper {\n align-items: center;\n }\n\n .inner {\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n position: relative;\n overflow: hidden; \n }\n\n .item {\n padding: 0 5rem;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n height: 420px;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n\n .text {\n @media only screen and ", " {\n display: none;\n }\n\n .title {\n margin-bottom: 1.5rem;\n display: block;\n }\n\n .description {\n margin-top: 0;\n margin-bottom: 1.5rem;\n display: block;\n }\n }\n\n .textMobile {\n display: none;\n background-color: var(--primary-shades-dark);\n padding: 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n\n svg {\n path {\n stroke: white;\n }\n }\n\n b {\n display: block;\n }\n\n @media only screen and ", " {\n display: flex;\n }\n }\n\n .img {\n text-align: end;\n\n img {\n max-height: 100%;\n max-width: 100%;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 2.5rem 2.5rem 1rem;\n text-align: center;\n }\n }\n }\n\n .thumbnailSlider {\n margin-top: 3rem;\n display: flex;\n align-items: center;\n justify-content: center;\n @media only screen and ", " {\n display: none;\n }\n\n .thumbnailInner {\n justify-content: center;\n display: flex;\n align-items: center;\n margin: 0 2.5rem;\n\n .thumbnailItem {\n border: 1px solid var(--dark-opacity-10);\n height: 50px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 4px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n width: 70px;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n\n &:is(.active) {\n border-color: var(--primary);\n }\n\n > * {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n }\n }\n }\n\n .navigation {\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: 48px;\n height: 48px;\n box-shadow: 0 0 16px 0 white;\n border: 0;\n background-color: white;\n\n svg {\n path {\n stroke: var(--primary);\n }\n }\n\n &:hover {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n }\n"])), devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg);
|
|
14
14
|
var templateObject_1;
|
|
@@ -39,9 +39,9 @@ var Index = function (props) {
|
|
|
39
39
|
sliderRef = slider;
|
|
40
40
|
}, children: data === null || data === void 0 ? void 0 : data.map(function (item, key) {
|
|
41
41
|
return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { className: "item", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text", children: [(item === null || item === void 0 ? void 0 : item.title) && (0, jsx_runtime_1.jsx)("strong", { className: "title headline-extra-bold-32-39", children: item === null || item === void 0 ? void 0 : item.title }), (item === null || item === void 0 ? void 0 : item.description) && (0, jsx_runtime_1.jsx)("p", { className: "description title-regular-16-19", children: item === null || item === void 0 ? void 0 : item.description }), (item === null || item === void 0 ? void 0 : item.buttonText) && (0, jsx_runtime_1.jsx)(Button_1.default, { size: "big", variant: "primary", onClick: item === null || item === void 0 ? void 0 : item.onClick, children: item === null || item === void 0 ? void 0 : item.buttonText })] }), (0, jsx_runtime_1.jsx)("div", { className: "img", children: item === null || item === void 0 ? void 0 : item.img }), (0, jsx_runtime_1.jsxs)("div", { className: "textMobile title-medium-16-19", onClick: item === null || item === void 0 ? void 0 : item.onClick, children: [(0, jsx_runtime_1.jsx)("div", { className: "titleSm", dangerouslySetInnerHTML: { __html: item === null || item === void 0 ? void 0 : item.shortDesc } }), (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRightBig" })] })] }) }, key));
|
|
42
|
-
}) })) }) }), props.showThumbnails && ((0, jsx_runtime_1.jsxs)("div", { className: "thumbnailSlider", children: [(0, jsx_runtime_1.jsx)("button", { className: "
|
|
42
|
+
}) })) }) }), props.showThumbnails && ((0, jsx_runtime_1.jsxs)("div", { className: "thumbnailSlider", children: [(0, jsx_runtime_1.jsx)("button", { className: "navigation prev", onClick: previous, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { width: "24px", height: "24px", name: "ArrowLeft" }) }), (0, jsx_runtime_1.jsx)("div", { className: "thumbnailInner", children: data.map(function (item, key) {
|
|
43
43
|
var _a;
|
|
44
44
|
return ((0, jsx_runtime_1.jsx)("div", { onClick: function () { return sliderRef.slickGoTo(key); }, className: (0, classnames_1.default)("thumbnailItem", (_a = {}, _a["active"] = key === activeSlide, _a)), children: item === null || item === void 0 ? void 0 : item.thumbnail }, key));
|
|
45
|
-
}) }), (0, jsx_runtime_1.jsx)("button", { className: "
|
|
45
|
+
}) }), (0, jsx_runtime_1.jsx)("button", { className: "navigation next", onClick: next, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { width: "24px", height: "24px", name: "ArrowRight" }) })] }))] }));
|
|
46
46
|
};
|
|
47
47
|
exports.default = Index;
|
|
@@ -0,0 +1,50 @@
|
|
|
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
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
18
|
+
var react_1 = require("react");
|
|
19
|
+
var Carousel_styled_1 = require("./Carousel.styled");
|
|
20
|
+
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
21
|
+
var classnames_1 = __importDefault(require("classnames"));
|
|
22
|
+
var react_slick_1 = __importDefault(require("react-slick"));
|
|
23
|
+
var Badges_1 = __importDefault(require("../Badges"));
|
|
24
|
+
var Carousel = function (props) {
|
|
25
|
+
var data = props.data, hasDiscount = props.hasDiscount;
|
|
26
|
+
var _a = (0, react_1.useState)(0), activeSlide = _a[0], setActiveSlide = _a[1];
|
|
27
|
+
var sliderRef = (0, react_1.useRef)(null);
|
|
28
|
+
var settings = {
|
|
29
|
+
dots: false,
|
|
30
|
+
infinite: false,
|
|
31
|
+
speed: 500,
|
|
32
|
+
slidesToShow: 1,
|
|
33
|
+
slidesToScroll: 1,
|
|
34
|
+
afterChange: function (index) { return setActiveSlide(index); }
|
|
35
|
+
};
|
|
36
|
+
var next = function () { return sliderRef.slickNext(); };
|
|
37
|
+
var previous = function () { return sliderRef.slickPrev(); };
|
|
38
|
+
return ((0, jsx_runtime_1.jsxs)(Carousel_styled_1.CarouselStyled, { children: [hasDiscount && (0, jsx_runtime_1.jsx)(Badges_1.default, { left: "-7px", top: "-7px", size: "medium", title: "\u0130ndirimli" }), (0, jsx_runtime_1.jsx)("div", { className: "inner", children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("button", { className: "navigation prev", onClick: previous, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { width: "16px", height: "16px", name: "ArrowSmallLeft" }) }), (0, jsx_runtime_1.jsx)(react_slick_1.default, __assign({}, settings, { ref: function (slider) {
|
|
39
|
+
sliderRef = slider;
|
|
40
|
+
}, children: data === null || data === void 0 ? void 0 : data.map(function (item, key) {
|
|
41
|
+
return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { className: "item", children: (0, jsx_runtime_1.jsx)("div", { className: "img", children: item === null || item === void 0 ? void 0 : item.img }) }) }, key));
|
|
42
|
+
}) })), (0, jsx_runtime_1.jsx)("button", { className: "navigation next", onClick: next, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { width: "16px", height: "16px", name: "ArrowSmallRight" }) })] }) }), props.showThumbnails && ((0, jsx_runtime_1.jsx)("div", { className: "thumbnailSlider", children: (0, jsx_runtime_1.jsx)("div", { className: "thumbnailInner", children: data.map(function (item, key) {
|
|
43
|
+
var _a;
|
|
44
|
+
return ((0, jsx_runtime_1.jsx)("div", { onClick: function () { return sliderRef.slickGoTo(key); }, className: (0, classnames_1.default)("thumbnailItem", (_a = {}, _a["active"] = key === activeSlide, _a)), children: item === null || item === void 0 ? void 0 : item.thumbnail }, key));
|
|
45
|
+
}) }) }))] }));
|
|
46
|
+
};
|
|
47
|
+
Carousel.defaultProps = {
|
|
48
|
+
showThumbnails: true
|
|
49
|
+
};
|
|
50
|
+
exports.default = Carousel;
|
|
@@ -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.CarouselStyled = void 0;
|
|
11
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
+
var devices_1 = require("../../constants/devices");
|
|
13
|
+
exports.CarouselStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-width: 456px;\n margin: 0 auto;\n box-sizing: border-box;\n position: relative;\n\n .inner {\n border-radius: 0.5rem;\n position: relative;\n border: 1px solid var(--dark-opacity-10);\n background: #fff;\n box-sizing: border-box;\n }\n\n .item {\n padding: 0 0;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n aspect-ratio: 1/1;\n box-sizing: border-box;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n .img {\n text-align: end;\n padding: 1rem;\n img {\n max-height: 100%;\n max-width: 100%;\n margin: 0 auto;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 2.5rem 2.5rem 1rem;\n text-align: center;\n }\n }\n }\n\n .thumbnailSlider {\n margin-top: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n @media only screen and ", " {\n display: none;\n }\n\n .thumbnailInner {\n justify-content: center;\n display: flex;\n align-items: center;\n margin: 0 0;\n gap: 0 1.5rem;\n @media only screen and ", " {\n gap: 0 1rem;\n }\n .thumbnailItem {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 0;\n max-width: 96px;\n aspect-ratio: 1/1;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n\n &:is(.active) {\n border-color: var(--primary);\n }\n\n > * {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n }\n }\n }\n }\n\n .navigation {\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n cursor: pointer;\n transition: all .2s;\n width: 32px;\n height: 32px;\n border: 1px solid var(--dark-opacity-10);\n background-color: #fff;\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%) translateX(-50%);\n z-index: 5;\n &:before{\n display: none;\n }\n &:is(.next){\n right: 0;\n left: auto;\n transform: translateY(-50%) translateX(50%);\n }\n &:is(.prev){\n \n }\n svg {\n path {\n stroke: var(--grey-40);\n }\n }\n }\n"], ["\n max-width: 456px;\n margin: 0 auto;\n box-sizing: border-box;\n position: relative;\n\n .inner {\n border-radius: 0.5rem;\n position: relative;\n border: 1px solid var(--dark-opacity-10);\n background: #fff;\n box-sizing: border-box;\n }\n\n .item {\n padding: 0 0;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n aspect-ratio: 1/1;\n box-sizing: border-box;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n .img {\n text-align: end;\n padding: 1rem;\n img {\n max-height: 100%;\n max-width: 100%;\n margin: 0 auto;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 2.5rem 2.5rem 1rem;\n text-align: center;\n }\n }\n }\n\n .thumbnailSlider {\n margin-top: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n @media only screen and ", " {\n display: none;\n }\n\n .thumbnailInner {\n justify-content: center;\n display: flex;\n align-items: center;\n margin: 0 0;\n gap: 0 1.5rem;\n @media only screen and ", " {\n gap: 0 1rem;\n }\n .thumbnailItem {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 0;\n max-width: 96px;\n aspect-ratio: 1/1;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n\n &:is(.active) {\n border-color: var(--primary);\n }\n\n > * {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n }\n }\n }\n }\n\n .navigation {\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n cursor: pointer;\n transition: all .2s;\n width: 32px;\n height: 32px;\n border: 1px solid var(--dark-opacity-10);\n background-color: #fff;\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%) translateX(-50%);\n z-index: 5;\n &:before{\n display: none;\n }\n &:is(.next){\n right: 0;\n left: auto;\n transform: translateY(-50%) translateX(50%);\n }\n &:is(.prev){\n \n }\n svg {\n path {\n stroke: var(--grey-40);\n }\n }\n }\n"])), devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg);
|
|
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 Carousel_1 = require("./Carousel");
|
|
8
|
+
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Carousel_1).default; } });
|
|
@@ -0,0 +1,22 @@
|
|
|
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 Carousel_1 = __importDefault(require("../Carousel"));
|
|
8
|
+
var carousel_1 = __importDefault(require("./../../../jsons/carousel"));
|
|
9
|
+
exports.default = {
|
|
10
|
+
title: 'Components/Carousel',
|
|
11
|
+
component: Carousel_1.default,
|
|
12
|
+
tags: ['autodocs'],
|
|
13
|
+
argTypes: {
|
|
14
|
+
hasDiscount: { control: 'boolean' },
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
exports.Default = {
|
|
18
|
+
args: {
|
|
19
|
+
data: carousel_1.default,
|
|
20
|
+
showThumbnails: true
|
|
21
|
+
},
|
|
22
|
+
};
|
|
@@ -0,0 +1,40 @@
|
|
|
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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
30
|
+
if (mod && mod.__esModule) return mod;
|
|
31
|
+
var result = {};
|
|
32
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
33
|
+
__setModuleDefault(result, mod);
|
|
34
|
+
return result;
|
|
35
|
+
};
|
|
36
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
|
+
var React = __importStar(require("react"));
|
|
39
|
+
var SvgDarkBadge = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 80, height: 80, viewBox: "0 0 80 80", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsxs)("g", { id: "Size=Large, Title=False, Type=Sad", children: [(0, jsx_runtime_1.jsx)("path", { id: "Vector", d: "M29.317 19.1666C29.317 19.1666 32.777 15.5577 39.9992 15.5577C47.2214 15.5577 51.0103 19.3177 51.0103 19.3177L51.4236 19.6199C51.4236 19.6199 55.6592 11.6333 52.5725 4.82217C50.2058 3.2555 45.9125 1.11328 39.9992 1.11328C34.3236 1.11328 30.1081 3.09773 27.6881 4.64439C24.3392 11.4622 28.8192 19.4466 28.8192 19.4466L29.317 19.1666Z", fill: "#242424" }), (0, jsx_runtime_1.jsx)("path", { id: "Vector_2", d: "M54.8623 6.61311L54.6712 6.42866C54.0187 5.83816 53.3194 5.30158 52.5801 4.82422C52.709 5.48644 52.929 6.44422 53.0646 7.57311C53.4601 10.8464 53.2512 14.7464 51.0179 19.3176C50.4846 20.4087 49.8712 21.5264 49.0845 22.6953C47.7334 24.6998 44.3401 29.002 40.2512 34.0398C37.2996 37.6693 34.3299 41.2842 31.3423 44.8842C24.0579 53.6687 17.349 61.6064 17.2157 61.7642C17.0813 61.9212 16.9935 62.1125 16.9621 62.3167C16.9307 62.5208 16.9569 62.7297 17.0379 62.9198L23.7046 78.4753C23.791 78.6748 23.9337 78.8448 24.1153 78.9644C24.2969 79.0839 24.5094 79.148 24.7268 79.1487C24.9052 79.1491 25.0812 79.1062 25.2394 79.0238C25.3977 78.9414 25.5337 78.8218 25.6357 78.6753C25.7512 78.5109 32.9801 68.1176 40.2334 57.682L49.1446 44.8576C52.4001 40.1687 54.7357 36.8042 54.9646 36.462C58.3379 31.4376 62.1579 26.2976 62.1579 20.8131C62.1579 15.3087 59.6357 10.3976 54.8623 6.61311Z", fill: "black" }), (0, jsx_runtime_1.jsx)("path", { id: "Vector_3", d: "M29.4531 47.1411L38.2642 60.5011L50.3709 43.0789L41.5287 32.4434C41.1065 32.9656 30.0731 46.3945 29.4531 47.1411Z", fill: "#242424" }), (0, jsx_runtime_1.jsx)("path", { id: "Vector_4", d: "M25.4289 6.41975L25.62 6.2353C25.6978 6.15975 26.4378 5.47308 27.7111 4.63086C27.5822 5.29308 27.3622 6.25086 27.2267 7.37975C26.8311 10.6531 27.04 14.5531 29.2734 19.1242C29.8067 20.2153 30.42 21.3331 31.2067 22.502C32.5578 24.5064 35.9511 28.8086 40.04 33.8464C42.9917 37.476 45.9613 41.0908 48.9489 44.6909C56.2334 53.4753 62.9422 61.4131 63.0756 61.5709C63.2084 61.7291 63.295 61.921 63.3255 62.1253C63.3561 62.3296 63.3296 62.5384 63.2489 62.7286L56.5822 78.2842C56.4958 78.4837 56.353 78.6536 56.1715 78.7732C55.9899 78.8928 55.7774 78.9569 55.56 78.9575C55.3815 78.9579 55.2056 78.9151 55.0474 78.8326C54.8891 78.7502 54.7531 78.6307 54.6511 78.4842C54.5356 78.3197 47.3067 67.9264 40.0534 57.4909L31.1422 44.6664C27.8867 39.9775 25.5511 36.6131 25.3222 36.2709C21.9489 31.2464 18.1289 26.1064 18.1289 20.622C18.1334 15.1175 20.6556 10.2042 25.4289 6.41975Z", fill: "black" })] }) }))); };
|
|
40
|
+
exports.default = SvgDarkBadge;
|
|
@@ -26,9 +26,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
26
26
|
};
|
|
27
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
28
|
exports.Call = exports.Calendar = exports.BuyBig = exports.Buy = exports.ButtonIcon = exports.Box = exports.Bookmark = exports.Bag3 = exports.Bag = exports.Bag2 = exports.Baby = exports.AskedQuestions = exports.ArrowUpSquare = exports.ArrowUpCircle = exports.ArrowUpBig = exports.ArrowUpAnimate = exports.ArrowUp = exports.ArrowSmallUp = exports.ArrowSmallRightStroke = exports.ArrowSmallRightBackground = exports.ArrowSmallRight = exports.ArrowSmallLeftStroke = exports.ArrowSmallLeftHover = exports.ArrowSmallLeft = exports.ArrowSmallDown = exports.ArrowShare = exports.ArrowRightSquare = exports.ArrowRightCircle = exports.ArrowRightBig = exports.ArrowRightAnimate = exports.ArrowRight = exports.ArrowPlusCircle = exports.ArrowMediumRight = exports.ArrowMedium = exports.ArrowLeftSquare = exports.ArrowLeftCircle = exports.ArrowLeftBig = exports.ArrowLeftAnimate = exports.ArrowLeft = exports.ArrowGo = exports.ArrowDownSquare = exports.ArrowDownCircle = exports.ArrowDownBig = exports.ArrowDownAnimate = exports.ArrowDown = exports.AgreementArrowUp = exports.AgreementArrowDown = exports.Again = exports.AddUser = exports.Activity = void 0;
|
|
29
|
-
exports.
|
|
30
|
-
exports.
|
|
31
|
-
exports.iconList = exports.Youtube = exports.Work = exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet = exports.VolumeUp = exports.VolumeOff = exports.VolumeDown = exports.Voice2 = exports.Voice = exports.Visa = exports.Video = exports.Upload = exports.Unlock = exports.TwoUser = exports.TwitterStroke = exports.Twitter = exports.Trash = exports.TimeSquare = exports.TimeCircle = exports.TickSquare = exports.TicketStar = exports.Ticket = exports.ThreeUser = exports.SwitchPassive = exports.Swap = exports.Steps = exports.Steps2 = exports.Steps1 = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.Show = exports.ShieldFail = exports.ShieldDone = exports.Setting = exports.Setting1 = exports.Send = exports.Search = exports.Scan = exports.Sandwatch = exports.Rectangle = void 0;
|
|
29
|
+
exports.InstagramNegative = exports.InfoSquare = exports.InfoCircle = exports.Image = exports.House = exports.Home = exports.Hide = exports.Heart = exports.Grid = exports.Graph = exports.Game = exports.Folder = exports.FilterUp = exports.FilterDown = exports.Filter2 = exports.Filter = exports.FacebookStroke = exports.Facebook = exports.ErrorIcon = exports.EditSquare = exports.Edit = exports.Download = exports.Document = exports.Discovery = exports.Discount = exports.Delete = exports.DarkBadge = exports.Danger = exports.CloseSquare = exports.CloseMiniHover = exports.Closemini = exports.CloseHover = exports.CloseBigHover = exports.CloseBig = exports.Close = exports.CheckMark = exports.CheckboxElementUncheck = exports.CheckboxElementInvalid = exports.CheckboxElementDisabled = exports.CheckboxElementChecked = exports.Chat = exports.Chart = exports.Category = exports.Cargo = exports.Cargo1 = exports.Campaign = exports.Camera = exports.CallSilent = exports.CallMissed = exports.Calling = void 0;
|
|
30
|
+
exports.RadioButtonElementInvalid = exports.RadioButtonElementDisabled = exports.RadioButtonElementChecked = exports.ProfilNamePassive = exports.ProfilName = exports.Profile = exports.PriceTag = exports.PoweredByQnbLogo = exports.Pointinghand = exports.PointFinger = exports.PlusSmall = exports.PlusBig = exports.Plus = exports.Play = exports.Password = exports.PaperUpload = exports.PaperPlus = exports.PaperNegative = exports.PaperFail = exports.PaperDownload = exports.Paper = exports.OrderProgressIcons = exports.NotificationSimpleSmall = exports.NotificationSimple = exports.Notification = exports.Notification1 = exports.NegativeSmall = exports.NegativeBig = exports.MoreSquare = exports.MoreCircle = exports.More = exports.Money = exports.Minus = exports.Message = exports.Mastercard = exports.Logout = exports.Login = exports.Lock = exports.Location = exports.Loading = exports.Live = exports.List = exports.LinkedinStroke = exports.LinkedIn = exports.LikeV1 = exports.Like = exports.Laptop = exports.Language2 = exports.KeyboardClose = exports.Keyboard = void 0;
|
|
31
|
+
exports.iconList = exports.Youtube = exports.Work = exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet = exports.VolumeUp = exports.VolumeOff = exports.VolumeDown = exports.Voice2 = exports.Voice = exports.Visa = exports.Video = exports.Upload = exports.Unlock = exports.TwoUser = exports.TwitterStroke = exports.Twitter = exports.Trash = exports.TimeSquare = exports.TimeCircle = exports.TickSquare = exports.TicketStar = exports.Ticket = exports.ThreeUser = exports.SwitchPassive = exports.Swap = exports.Steps = exports.Steps2 = exports.Steps1 = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.Show = exports.ShieldFail = exports.ShieldDone = exports.Setting = exports.Setting1 = exports.Send = exports.Search = exports.Scan = exports.Sandwatch = exports.Rectangle = exports.RadioButtonElementUnchecked = void 0;
|
|
32
32
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
33
33
|
var Activity_1 = __importDefault(require("./Activity"));
|
|
34
34
|
Object.defineProperty(exports, "Activity", { enumerable: true, get: function () { return Activity_1.default; } });
|
|
@@ -176,6 +176,8 @@ var CloseSquare_1 = __importDefault(require("./CloseSquare"));
|
|
|
176
176
|
Object.defineProperty(exports, "CloseSquare", { enumerable: true, get: function () { return CloseSquare_1.default; } });
|
|
177
177
|
var Danger_1 = __importDefault(require("./Danger"));
|
|
178
178
|
Object.defineProperty(exports, "Danger", { enumerable: true, get: function () { return Danger_1.default; } });
|
|
179
|
+
var DarkBadge_1 = __importDefault(require("./DarkBadge"));
|
|
180
|
+
Object.defineProperty(exports, "DarkBadge", { enumerable: true, get: function () { return DarkBadge_1.default; } });
|
|
179
181
|
var Delete_1 = __importDefault(require("./Delete"));
|
|
180
182
|
Object.defineProperty(exports, "Delete", { enumerable: true, get: function () { return Delete_1.default; } });
|
|
181
183
|
var Discount_1 = __importDefault(require("./Discount"));
|
|
@@ -709,6 +711,10 @@ exports.iconList = {
|
|
|
709
711
|
var props = __rest(_a, []);
|
|
710
712
|
return (0, jsx_runtime_1.jsx)(Danger_1.default, __assign({}, props));
|
|
711
713
|
},
|
|
714
|
+
DarkBadge: function (_a) {
|
|
715
|
+
var props = __rest(_a, []);
|
|
716
|
+
return (0, jsx_runtime_1.jsx)(DarkBadge_1.default, __assign({}, props));
|
|
717
|
+
},
|
|
712
718
|
Delete: function (_a) {
|
|
713
719
|
var props = __rest(_a, []);
|
|
714
720
|
return (0, jsx_runtime_1.jsx)(Delete_1.default, __assign({}, props));
|
|
@@ -11,6 +11,6 @@ exports.HorizontalStyled = exports.StandartStyled = exports.ChecklistStyled = vo
|
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
13
|
exports.ChecklistStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n max-width: 634px;\n ", "\n .ProductCardInner {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 8px;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n @media only screen and ", " {\n padding: 24px 16px;\n }\n .ProductCardCheckboxContent{\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n .indicator{ \n margin-right: 24px;\n @media only screen and ", " {\n margin-right: 8px;\n }\n }\n }\n .ProductCardImg {\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n @media only screen and ", " {\n margin-right: 16px;\n }\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n .ProductCardTitle{\n min-height: 66px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n }\n .ProductCardContent{ \n margin: 24px auto 0 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n }\n }\n"], ["\n display: block;\n max-width: 634px;\n ", "\n .ProductCardInner {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 8px;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n @media only screen and ", " {\n padding: 24px 16px;\n }\n .ProductCardCheckboxContent{\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n .indicator{ \n margin-right: 24px;\n @media only screen and ", " {\n margin-right: 8px;\n }\n }\n }\n .ProductCardImg {\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n @media only screen and ", " {\n margin-right: 16px;\n }\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n .ProductCardTitle{\n min-height: 66px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n }\n .ProductCardContent{ \n margin: 24px auto 0 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n }\n }\n"])), function (props) { return props.disabled ? "\n user-select:none;\n pointer-events:none;\n " : ""; }, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm);
|
|
14
|
-
exports.StandartStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __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 a{\n text-decoration: none;\n color: inherit;\n }\n &:hover{\n box-shadow: 0 6px 30px 0 #B8B8CD;\n }\n .
|
|
14
|
+
exports.StandartStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __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 a{\n text-decoration: none;\n color: inherit;\n }\n &:hover{\n box-shadow: 0 6px 30px 0 #B8B8CD;\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 padding-bottom: 71.2%;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n > * {\n width: 100%;\n display: block;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n }\n }\n .productCardContent{\n padding: 1rem ;\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: ", ";\n word-break: break-word;\n }\n .productCardDescription{\n display: block;\n margin-top: ", ";\n color: var(--grey-40);\n margin-bottom: ", ";\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: ", ";\n word-break: break-word;\n }\n .productCardPriceContent{\n display: grid;\n align-items: end;\n justify-content: flex-start;\n height: 36px;\n grid-template-columns: ", ";\n .discountRate{\n margin-right: 0.5rem;\n width: ", ";\n height: ", ";\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 }\n .oldPrice, .newPrice{\n display: flex;\n align-items: end;\n justify-content: flex-start;\n .price{\n margin-right: 2px;\n }\n }\n .oldPrice{\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n .price , .period {\n text-decoration: line-through;\n }\n }\n .newPrice{\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 a{\n text-decoration: none;\n color: inherit;\n }\n &:hover{\n box-shadow: 0 6px 30px 0 #B8B8CD;\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 padding-bottom: 71.2%;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n > * {\n width: 100%;\n display: block;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n }\n }\n .productCardContent{\n padding: 1rem ;\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: ", ";\n word-break: break-word;\n }\n .productCardDescription{\n display: block;\n margin-top: ", ";\n color: var(--grey-40);\n margin-bottom: ", ";\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: ", ";\n word-break: break-word;\n }\n .productCardPriceContent{\n display: grid;\n align-items: end;\n justify-content: flex-start;\n height: 36px;\n grid-template-columns: ", ";\n .discountRate{\n margin-right: 0.5rem;\n width: ", ";\n height: ", ";\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 }\n .oldPrice, .newPrice{\n display: flex;\n align-items: end;\n justify-content: flex-start;\n .price{\n margin-right: 2px;\n }\n }\n .oldPrice{\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n .price , .period {\n text-decoration: line-through;\n }\n }\n .newPrice{\n \n }\n }\n }\n"])), function (props) { return props.isMobile ? '58px' : '38px'; }, function (props) { return props.isMobile ? '1rem' : '0.5rem'; }, function (props) { return props.isMobile ? '2rem' : '1rem'; }, function (props) { return props.isMobile ? '49px' : '32px'; }, function (props) { return props.discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.isMobile ? '65px' : '48px'; }, function (props) { return props.isMobile ? '47px' : '36px'; });
|
|
15
15
|
exports.HorizontalStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: var(--dark);\n padding: 0.5rem;\n transition: all .2s ease;\n border-radius: 8px;\n &:hover{\n background: var(--dark-opacity-3);\n }\n a{\n text-decoration: none;\n color: inherit;\n }\n .horizontalWrapper{ \n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\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(--dark-opacity-5);\n border:0;\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 \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 }\n .priceContent{\n display: flex;\n align-items: end;\n justify-content: flex-start;\n .price{\n margin-right: 2px;\n }\n .period{\n \n }\n }\n }\n"], ["\n color: var(--dark);\n padding: 0.5rem;\n transition: all .2s ease;\n border-radius: 8px;\n &:hover{\n background: var(--dark-opacity-3);\n }\n a{\n text-decoration: none;\n color: inherit;\n }\n .horizontalWrapper{ \n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\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(--dark-opacity-5);\n border:0;\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 \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 }\n .priceContent{\n display: flex;\n align-items: end;\n justify-content: flex-start;\n .price{\n margin-right: 2px;\n }\n .period{\n \n }\n }\n }\n"])), devices_1.devices.sm);
|
|
16
16
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -16,14 +16,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
17
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
18
18
|
var ProductCard_styled_1 = require("../ProductCard.styled");
|
|
19
|
-
var Icon_1 = __importDefault(require("../../Icon/Icon"));
|
|
20
19
|
var classnames_1 = __importDefault(require("classnames"));
|
|
20
|
+
var Badges_1 = __importDefault(require("../../Badges"));
|
|
21
21
|
var Standart = function (props) {
|
|
22
22
|
var isMobile = props.isMobile, discountRate = props.discountRate, image = props.image, hasDiscount = props.hasDiscount, title = props.title, description = props.description, oldPrice = props.oldPrice, oldPricePeriod = props.oldPricePeriod, price = props.price, period = props.period;
|
|
23
23
|
var LinkComponent = function (_a) {
|
|
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", { href: item.slug, children: children }));
|
|
26
26
|
};
|
|
27
|
-
return ((0, jsx_runtime_1.jsx)(ProductCard_styled_1.StandartStyled, __assign({}, props, { children: (0, jsx_runtime_1.jsxs)(LinkComponent, { item: props, children: [hasDiscount && (
|
|
27
|
+
return ((0, jsx_runtime_1.jsx)(ProductCard_styled_1.StandartStyled, __assign({}, props, { children: (0, jsx_runtime_1.jsxs)(LinkComponent, { item: props, children: [hasDiscount && (0, jsx_runtime_1.jsx)(Badges_1.default, { size: "medium", title: "\u0130ndirimli" }), (0, jsx_runtime_1.jsx)("div", { className: "img", children: image }), (0, jsx_runtime_1.jsxs)("div", { className: "productCardContent", children: [(0, jsx_runtime_1.jsx)("strong", { className: (0, classnames_1.default)('productCardTitle', (isMobile ? 'headline-bold-24-29' : 'title-bold-16-19')), children: title }), (0, jsx_runtime_1.jsx)("p", { className: (0, classnames_1.default)('productCardDescription', (isMobile ? 'headline-medium-20-24' : 'body-medium-14-17')), children: description }), (0, jsx_runtime_1.jsxs)("div", { className: "productCardPriceContent", children: [discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('discountRate', (isMobile ? 'title-extra-bold-16-19' : 'body-extra-bold-13-16')), children: ["%", discountRate] }), (0, jsx_runtime_1.jsxs)("div", { children: [oldPrice && discountRate > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('oldPrice'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('price', (isMobile ? 'title-semi-bold-16-19' : 'caption-semi-bold-12-15')), children: oldPrice }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('period', (isMobile ? 'body-regular-14-17' : 'caption-regular-12-15')), children: ["/ ", oldPricePeriod] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "newPrice", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('price', (isMobile ? 'headline-extra-bold-20-24' : 'body-extra-bold-14-17')), children: price }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('period', (isMobile ? 'headline-regular-18-22' : 'body-regular-13-16')), children: ["/ ", period] })] })] })] })] })] }) })));
|
|
28
28
|
};
|
|
29
29
|
exports.default = Standart;
|
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.SuggestBox = exports.Toast = exports.Banner = exports.Footer = 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.Spinner = exports.Button = void 0;
|
|
6
|
+
exports.Badges = exports.Carousel = exports.SuggestBox = exports.Toast = exports.Banner = exports.Footer = 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.Spinner = exports.Button = void 0;
|
|
7
7
|
var Button_1 = __importDefault(require("./components/Button"));
|
|
8
8
|
exports.Button = Button_1.default;
|
|
9
9
|
var Spinner_1 = __importDefault(require("./components/Spinner"));
|
|
@@ -54,3 +54,7 @@ var Toast_1 = __importDefault(require("./components/Toast"));
|
|
|
54
54
|
exports.Toast = Toast_1.default;
|
|
55
55
|
var SuggestBox_1 = __importDefault(require("./components/SuggestBox"));
|
|
56
56
|
exports.SuggestBox = SuggestBox_1.default;
|
|
57
|
+
var Carousel_1 = __importDefault(require("./components/Carousel"));
|
|
58
|
+
exports.Carousel = Carousel_1.default;
|
|
59
|
+
var Badges_1 = __importDefault(require("./components/Badges"));
|
|
60
|
+
exports.Badges = Badges_1.default;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
|
+
exports.default = [
|
|
5
|
+
{
|
|
6
|
+
thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/APPLEWATCHSERIES745MM_1.jpg" }),
|
|
7
|
+
img: (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/APPLEWATCHSERIES745MM_1.jpg", height: "260px" }),
|
|
8
|
+
alt: "Apple Watch Series 7 45 mm Ak\u0131ll\u0131 Saat",
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/APPLEWATCHSERIES745MM_1.jpg" }),
|
|
12
|
+
img: (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/APPLEWATCHSERIES745MM_1.jpg", height: "260px" }),
|
|
13
|
+
alt: "Apple Watch Series 7 45 mm Ak\u0131ll\u0131 Saat",
|
|
14
|
+
},
|
|
15
|
+
];
|