krl-alfred 1.65.0 → 1.67.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/Agreement/Agreement.styled.js +1 -1
- package/dist/components/Assurance/Assurance.js +19 -0
- package/dist/components/Assurance/Assurance.styled.js +19 -0
- package/dist/components/Assurance/index.js +8 -0
- package/dist/components/Assurance/props.js +2 -0
- package/dist/components/Assurance/stories/Assurance.stories.js +34 -0
- package/dist/components/Carousel/Carousel.styled.js +1 -1
- package/dist/components/ContentBox/ContentBox.js +20 -0
- package/dist/components/ContentBox/ContentBox.styled.js +22 -0
- package/dist/components/ContentBox/index.js +8 -0
- package/dist/components/ContentBox/props.js +4 -0
- package/dist/components/ContentBox/stories/ContentBox.stories.js +22 -0
- package/dist/components/Icon/PoweredByQnbLogo.js +5 -5
- package/dist/components/Icon/Tamamlarsin.js +40 -0
- package/dist/components/Icon/index.js +7 -1
- package/dist/components/ListGroup/ListGroup.js +12 -0
- package/dist/components/ListGroup/ListGroup.styled.js +15 -0
- package/dist/components/ListGroup/index.js +8 -0
- package/dist/components/ListGroup/props.js +2 -0
- package/dist/components/ListGroup/stories/ListGroup.stories.js +31 -0
- package/dist/components/ProductCard/ProductCard.styled.js +1 -1
- package/dist/components/ProductCard/layouts/Standart.js +1 -1
- package/dist/components/SearchBox/SearchBox.styled.js +1 -1
- package/dist/components/SelectBox/SelectBox.styled.js +1 -6
- package/dist/components/SelectBox/stories/SelectBox.stories.js +3 -4
- package/dist/components/Tooltip/Tooltip.js +22 -0
- package/dist/components/Tooltip/Tooltip.styled.js +17 -0
- package/dist/components/Tooltip/index.js +8 -0
- package/dist/components/Tooltip/props.js +2 -0
- package/dist/components/Tooltip/stories/Tooltip.stories.js +33 -0
- package/dist/components/ValueProposition/layouts/horizontal/Horizontal.styled.js +2 -2
- package/dist/components/ValueProposition/layouts/horizontal/index.js +1 -1
- package/dist/components/ValueProposition/layouts/squareSm/SquareSm.styled.js +1 -1
- package/dist/index.js +9 -1
- package/dist/jsons/ListGroup.json +26 -0
- package/package.json +1 -1
|
@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.AgreementStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.AgreementStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-bottom: 24px;\n\n .agreement {\n padding: ", ";\n border-radius: 8px;\n border: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n .top {\n align-items: center;\n gap: 8px;\n display: flex;\n box-sizing: border-box;\n width: 100%;\n\n .icon {\n cursor: pointer;\n }\n\n .title {\n width: 100%;\n color: ", ";\n }\n }\n\n .content {\n margin-top: 16px;\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-5);\n padding: 8px 16px;\n max-height: 88px;\n box-sizing: border-box;\n overflow-y: auto;\n -ms-overflow-style: none;\n scrollbar-width: none;\n color: var(--dark);\n\n div:not(.text) {\n margin: 0 auto;\n }\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n }\n\n .error {\n margin-top: 8px;\n display: flex;\n align-items: center;\n\n p {\n margin: 0;\n color: var(--red);\n }\n\n svg {\n margin-right: 8px;\n }\n }\n
|
|
12
|
+
exports.AgreementStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-bottom: 24px;\n\n .agreement {\n padding: ", ";\n border-radius: 8px;\n border: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n .top {\n align-items: center;\n gap: 8px;\n display: flex;\n box-sizing: border-box;\n width: 100%;\n\n .icon {\n cursor: pointer;\n }\n\n .title {\n width: 100%;\n color: ", ";\n }\n }\n\n .content {\n margin-top: 16px;\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-5);\n padding: 8px 16px;\n max-height: 88px;\n box-sizing: border-box;\n overflow-y: auto;\n -ms-overflow-style: none;\n scrollbar-width: none;\n color: var(--dark);\n\n div:not(.text) {\n margin: 0 auto;\n }\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n }\n\n .error {\n margin-top: 8px;\n display: flex;\n align-items: center;\n\n p {\n margin: 0 !important;\n color: var(--red);\n }\n\n svg {\n margin-right: 8px;\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin-bottom: 24px;\n\n .agreement {\n padding: ", ";\n border-radius: 8px;\n border: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n .top {\n align-items: center;\n gap: 8px;\n display: flex;\n box-sizing: border-box;\n width: 100%;\n\n .icon {\n cursor: pointer;\n }\n\n .title {\n width: 100%;\n color: ", ";\n }\n }\n\n .content {\n margin-top: 16px;\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-5);\n padding: 8px 16px;\n max-height: 88px;\n box-sizing: border-box;\n overflow-y: auto;\n -ms-overflow-style: none;\n scrollbar-width: none;\n color: var(--dark);\n\n div:not(.text) {\n margin: 0 auto;\n }\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n }\n\n .error {\n margin-top: 8px;\n display: flex;\n align-items: center;\n\n p {\n margin: 0 !important;\n color: var(--red);\n }\n\n svg {\n margin-right: 8px;\n }\n }\n"])), function (props) { return props.hasError ? "15px" : "16px"; }, function (props) { return props.hasError ? "2px solid var(--red)" : "1px solid var(--dark-opacity-5)"; }, function (props) { return props.hasError ? ' var(--red)' : ' var(--dark)'; });
|
|
13
13
|
var templateObject_1;
|
|
@@ -0,0 +1,19 @@
|
|
|
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
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
|
+
var Assurance_styled_1 = require("./Assurance.styled");
|
|
8
|
+
var Checkbox_1 = __importDefault(require("../Checkbox"));
|
|
9
|
+
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
10
|
+
var Tooltip_1 = __importDefault(require("../Tooltip"));
|
|
11
|
+
var Assurance = function (props) {
|
|
12
|
+
var priceText = props.priceText, onChange = props.onChange, width = props.width, isMobile = props.isMobile;
|
|
13
|
+
var AssuranceText = function () {
|
|
14
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h1", { className: "body-extra-bold-13-16", children: "Tamamlars\u0131n %100\u2019e Tamamlay\u0131c\u0131 Ek G\u00FCvence Paketi " }), (0, jsx_runtime_1.jsx)("p", { className: "caption-medium-11-13", children: "Tamamlars\u0131n, kira s\u00FCreniz boyunca cihaz\u0131n\u0131za ek g\u00FCvence sa\u011Flar. Ek g\u00FCvence kapsam\u0131nda cihaz\u0131n\u0131z de\u011Fi\u015Ftirilir veya \u00FCcretsiz onar\u0131l\u0131r. Ek g\u00FCvenceli kiralamalarda kira s\u00FCrenizi uzat\u0131rken, yeni kira s\u00FCresine ait ek g\u00FCvenceniz otomatik olarak sepete eklenir. Ek g\u00FCvencesiz yap\u0131lan kiralamalarda, s\u00FCre uzat\u0131m\u0131 s\u0131ras\u0131nda sonradan ek g\u00FCvence eklenemez." }), (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsx)("li", { className: "caption-medium-11-13", children: "D\u00FC\u015Fme, \u00E7arpma gibi kazalarda olu\u015Fan hasarlar" }), (0, jsx_runtime_1.jsx)("li", { className: "caption-medium-11-13", children: "S\u0131v\u0131 temas\u0131" }), (0, jsx_runtime_1.jsx)("li", { className: "caption-medium-11-13", children: "Ekran vb par\u00E7a k\u0131r\u0131lmalar\u0131" }), (0, jsx_runtime_1.jsx)("li", { className: "caption-medium-11-13", children: "\u00C7izilmeler" }), (0, jsx_runtime_1.jsx)("li", { className: "caption-medium-11-13", children: "Kutu hasarlar\u0131" }), (0, jsx_runtime_1.jsx)("li", { className: "caption-medium-11-13", children: "K\u0131sa devre, voltaj nedeniyle olu\u015Fabilecek sorunlar" }), (0, jsx_runtime_1.jsx)("li", { className: "caption-medium-11-13", children: "Hatal\u0131 aksesuar kullan\u0131m\u0131 sorunlar\u0131" })] }), (0, jsx_runtime_1.jsxs)("p", { className: "caption-medium-11-13", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Uyar\u0131:" }), " Kay\u0131p, \u00E7al\u0131nma, kas\u0131tl\u0131 zarar verme, onar\u0131lamaz duruma getirme, cihaz\u0131n kutusunu kaybetme gibi durumlarda ve 5.000 TL\u2019yi a\u015Fan hasarlarda ek g\u00FCvence paketi ge\u00E7erli de\u011Fildir."] })] }));
|
|
15
|
+
};
|
|
16
|
+
return ((0, jsx_runtime_1.jsxs)(Assurance_styled_1.AssuranceStyled, { width: width, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { onChange: onChange, size: "medium" }) }), (0, jsx_runtime_1.jsxs)(Assurance_styled_1.InnerWrapper, { children: [(0, jsx_runtime_1.jsx)(Assurance_styled_1.Logo, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Tamamlarsin", width: isMobile ? "116px" : "64.51px", height: isMobile ? "13.25px" : "7.37px" }) }), (0, jsx_runtime_1.jsxs)(Assurance_styled_1.DescriptionWrapper, { children: [(0, jsx_runtime_1.jsxs)(Assurance_styled_1.Description, { className: "caption-semi-bold-12-15", children: ["Hasar g\u00FCvenceni %100\u2019e", (0, jsx_runtime_1.jsx)("br", {}), "tamamlars\u0131n! ", (0, jsx_runtime_1.jsx)("b", { className: "body-extra-bold-13-16", children: priceText })] }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { hasClickAction: true, popupWidth: "351px", iconWidth: "24px", iconHeight: "24px", children: (0, jsx_runtime_1.jsx)(Assurance_styled_1.TooltipDescription, { children: (0, jsx_runtime_1.jsx)(AssuranceText, {}) }) })] })] })] }));
|
|
17
|
+
};
|
|
18
|
+
Assurance.defaultProps = {};
|
|
19
|
+
exports.default = Assurance;
|
|
@@ -0,0 +1,19 @@
|
|
|
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.TooltipDescription = exports.Description = exports.Logo = exports.DescriptionWrapper = exports.InnerWrapper = exports.AssuranceStyled = void 0;
|
|
11
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
+
var devices_1 = require("../../constants/devices");
|
|
13
|
+
exports.AssuranceStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 1.5rem;\n background: var(--primary-opacity-5);\n border-radius: 8px;\n width: ", ";\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n @media only screen and ", " {\n padding: 1rem;\n align-items: flex-start;\n }\n"], ["\n padding: 1.5rem;\n background: var(--primary-opacity-5);\n border-radius: 8px;\n width: ", ";\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n @media only screen and ", " {\n padding: 1rem;\n align-items: flex-start;\n }\n"])), function (props) { return props.width ? props.width : "466px"; }, devices_1.devices.md);
|
|
14
|
+
exports.InnerWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n @media only screen and ", " {\n grid-template-columns: 1fr;\n }\n"], ["\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n @media only screen and ", " {\n grid-template-columns: 1fr;\n }\n"])), devices_1.devices.md);
|
|
15
|
+
exports.DescriptionWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n @media only screen and ", " {\n margin-top: 18px;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n @media only screen and ", " {\n margin-top: 18px;\n }\n"])), devices_1.devices.md);
|
|
16
|
+
exports.Logo = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: white;\n width: 80px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n svg{\n display: block;\n }\n @media only screen and ", " {\n display: block;\n background-color: transparent;\n width: auto;\n height: auto;\n border: 0;\n border-radius: 0;\n margin-top: 6px;\n }\n"], ["\n background-color: white;\n width: 80px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n svg{\n display: block;\n }\n @media only screen and ", " {\n display: block;\n background-color: transparent;\n width: auto;\n height: auto;\n border: 0;\n border-radius: 0;\n margin-top: 6px;\n }\n"])), devices_1.devices.md);
|
|
17
|
+
exports.Description = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-left: 1.5rem;\n @media only screen and ", " {\n margin-left: 0;\n }\n\n b {\n\n }\n"], ["\n margin-left: 1.5rem;\n @media only screen and ", " {\n margin-left: 0;\n }\n\n b {\n\n }\n"])), devices_1.devices.md);
|
|
18
|
+
exports.TooltipDescription = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n > h1 {\n width: 100%;\n }\n\n > p {\n margin-bottom: 8px;\n > strong{\n font-style: italic;\n }\n }\n > ul {\n > li {\n \n }\n }\n"], ["\n > h1 {\n width: 100%;\n }\n\n > p {\n margin-bottom: 8px;\n > strong{\n font-style: italic;\n }\n }\n > ul {\n > li {\n \n }\n }\n"])));
|
|
19
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
@@ -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 Assurance_1 = require("./Assurance");
|
|
8
|
+
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Assurance_1).default; } });
|
|
@@ -0,0 +1,34 @@
|
|
|
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 Assurance_1 = __importDefault(require("../Assurance"));
|
|
20
|
+
exports.default = {
|
|
21
|
+
title: 'Components/Assurance',
|
|
22
|
+
//component: (props) => <div style={{margin : "15rem 0 0 11rem", display:"block"}}><Assurance {...props}/></div>,
|
|
23
|
+
component: function (props) { return (0, jsx_runtime_1.jsx)("div", { style: { margin: "15rem 0 0 0", display: "block" }, children: (0, jsx_runtime_1.jsx)(Assurance_1.default, __assign({}, props)) }); },
|
|
24
|
+
tags: ['autodocs'],
|
|
25
|
+
argTypes: {}
|
|
26
|
+
};
|
|
27
|
+
exports.Default = {
|
|
28
|
+
args: {
|
|
29
|
+
priceText: '+115 TL',
|
|
30
|
+
onChange: function (e) { return console.log(e.target.checked); },
|
|
31
|
+
isMobile: false,
|
|
32
|
+
//width : "90%",
|
|
33
|
+
},
|
|
34
|
+
};
|
|
@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.CarouselStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.CarouselStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-width: 100%;\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 \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 @media only screen and ", " {\n display: none;\n }\n }\n .slick-prev, .slick-next{\n display: none !important;\n }\n"], ["\n max-width: 100%;\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 \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 @media only screen and ", " {\n display: none;\n }\n }\n .slick-prev, .slick-next{\n display: none !important;\n }\n"])), devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg);
|
|
13
|
+
exports.CarouselStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-width: 100%;\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 > * {\n display: block !important;\n }\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 \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 @media only screen and ", " {\n display: none;\n }\n }\n .slick-prev, .slick-next{\n display: none !important;\n }\n"], ["\n max-width: 100%;\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 > * {\n display: block !important;\n }\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 \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 @media only screen and ", " {\n display: none;\n }\n }\n .slick-prev, .slick-next{\n display: none !important;\n }\n"])), 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;
|
|
@@ -0,0 +1,20 @@
|
|
|
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 ContentBox_styled_1 = require("./ContentBox.styled");
|
|
16
|
+
var ContentBox = function (props) {
|
|
17
|
+
return ((0, jsx_runtime_1.jsx)(ContentBox_styled_1.ContentBoxStyled, __assign({}, props, { children: props.children })));
|
|
18
|
+
};
|
|
19
|
+
ContentBox.defaultProps = {};
|
|
20
|
+
exports.default = ContentBox;
|
|
@@ -0,0 +1,22 @@
|
|
|
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.ContentBoxStyled = void 0;
|
|
11
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
+
exports.ContentBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: ", ";\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-10);\n background: #fff;\n"], ["\n padding: ", ";\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-10);\n background: #fff;\n"])), function (props) {
|
|
13
|
+
switch (props.size) {
|
|
14
|
+
case 'small':
|
|
15
|
+
return "1.5rem";
|
|
16
|
+
case 'medium':
|
|
17
|
+
return "2rem";
|
|
18
|
+
default:
|
|
19
|
+
return "1.5rem";
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
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 ContentBox_1 = require("./ContentBox");
|
|
8
|
+
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ContentBox_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 jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
+
var ContentBox_1 = __importDefault(require("../ContentBox"));
|
|
9
|
+
var props_1 = require("../props");
|
|
10
|
+
exports.default = {
|
|
11
|
+
title: 'Components/ContentBox',
|
|
12
|
+
component: ContentBox_1.default,
|
|
13
|
+
tags: ['autodocs'],
|
|
14
|
+
argTypes: {
|
|
15
|
+
size: { control: 'select', options: props_1.sizes },
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
exports.Default = {
|
|
19
|
+
args: {
|
|
20
|
+
children: (0, jsx_runtime_1.jsx)("div", { children: "Content Box Children" })
|
|
21
|
+
},
|
|
22
|
+
};
|