krl-alfred 1.72.10 → 1.72.12
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.
|
@@ -14,7 +14,7 @@ exports.AccordionContext = (0, react_1.createContext)({
|
|
|
14
14
|
setActive: function (index) { }
|
|
15
15
|
});
|
|
16
16
|
var Accordion = function (props) {
|
|
17
|
-
var title = props.title, data = props.data, activeIndex = props.activeIndex, showLink = props.showLink, linkText = props.linkText, linkOnClick = props.linkOnClick;
|
|
17
|
+
var title = props.title, data = props.data, activeIndex = props.activeIndex, showLink = props.showLink, linkText = props.linkText, linkOnClick = props.linkOnClick, collapseAll = props.collapseAll;
|
|
18
18
|
var _a = (0, react_1.useState)(0), active = _a[0], setActive = _a[1];
|
|
19
19
|
(0, react_1.useEffect)(function () {
|
|
20
20
|
setActive(activeIndex);
|
|
@@ -22,7 +22,7 @@ var Accordion = function (props) {
|
|
|
22
22
|
return ((0, jsx_runtime_1.jsxs)(Accordion_styled_1.AccordionStyled, { children: [title && (0, jsx_runtime_1.jsx)(Accordion_styled_1.AccordionTitle, { className: "title-bold-16-19", children: title }), (0, jsx_runtime_1.jsx)(Accordion_styled_1.Wrapper, { children: (0, jsx_runtime_1.jsx)(exports.AccordionContext.Provider, { value: {
|
|
23
23
|
active: active,
|
|
24
24
|
setActive: setActive
|
|
25
|
-
}, children: data === null || data === void 0 ? void 0 : data.map(function (item, key) { return ((0, jsx_runtime_1.jsx)(AccordionItem_1.default, { index: key, title: item.question, content: item.answer }, key)); }) }) }), showLink && ((0, jsx_runtime_1.jsx)(Accordion_styled_1.Footer, { className: "body-bold-14-17", children: (0, jsx_runtime_1.jsx)(TextLink_1.default, { onClick: linkOnClick, children: linkText }) }))] }));
|
|
25
|
+
}, children: data === null || data === void 0 ? void 0 : data.map(function (item, key) { return ((0, jsx_runtime_1.jsx)(AccordionItem_1.default, { collapseAll: collapseAll, index: key, title: item.question, content: item.answer }, key)); }) }) }), showLink && ((0, jsx_runtime_1.jsx)(Accordion_styled_1.Footer, { className: "body-bold-14-17", children: (0, jsx_runtime_1.jsx)(TextLink_1.default, { onClick: linkOnClick, children: linkText }) }))] }));
|
|
26
26
|
};
|
|
27
27
|
Accordion.defaultProps = {
|
|
28
28
|
activeIndex: 0,
|
|
@@ -9,14 +9,24 @@ var Accordion_styled_1 = require("./Accordion.styled");
|
|
|
9
9
|
var Accordion_1 = require("./Accordion");
|
|
10
10
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
11
11
|
var AccordionItem = function (props) {
|
|
12
|
-
var title = props.title, content = props.content, index = props.index;
|
|
12
|
+
var title = props.title, content = props.content, index = props.index, collapseAll = props.collapseAll;
|
|
13
13
|
var _a = (0, react_1.useContext)(Accordion_1.AccordionContext), active = _a.active, setActive = _a.setActive;
|
|
14
14
|
var _b = (0, react_1.useState)(0), height = _b[0], setHeight = _b[1];
|
|
15
15
|
var itemRef = (0, react_1.useRef)();
|
|
16
16
|
(0, react_1.useEffect)(function () {
|
|
17
17
|
var _a, _b;
|
|
18
|
-
setHeight(active === index ? (_b = (_a = itemRef === null || itemRef === void 0 ? void 0 : itemRef.current) === null || _a === void 0 ? void 0 : _a.children[0]) === null || _b === void 0 ? void 0 : _b.clientHeight : 0);
|
|
18
|
+
setHeight((active === index || activeItem) ? (_b = (_a = itemRef === null || itemRef === void 0 ? void 0 : itemRef.current) === null || _a === void 0 ? void 0 : _a.children[0]) === null || _b === void 0 ? void 0 : _b.clientHeight : 0);
|
|
19
19
|
});
|
|
20
|
-
|
|
20
|
+
var _c = (0, react_1.useState)(collapseAll ? true : false), activeItem = _c[0], setActiveItem = _c[1];
|
|
21
|
+
var handleCollapse = function () {
|
|
22
|
+
if (collapseAll) {
|
|
23
|
+
setActiveItem(!activeItem);
|
|
24
|
+
}
|
|
25
|
+
else {
|
|
26
|
+
setActive(active === index ? null : index);
|
|
27
|
+
setActiveItem(false);
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
return ((0, jsx_runtime_1.jsxs)(Accordion_styled_1.Item, { children: [(0, jsx_runtime_1.jsxs)(Accordion_styled_1.ItemTitle, { onClick: handleCollapse, className: "body-bold-14-17", children: [(0, jsx_runtime_1.jsx)("div", { children: title }), (0, jsx_runtime_1.jsxs)("div", { children: [" ", (0, jsx_runtime_1.jsx)(Icon_1.default, { name: (active === index || activeItem) ? 'NegativeSmall' : 'PlusSmall', width: "24px", height: "24px" }), " "] })] }), (0, jsx_runtime_1.jsx)(Accordion_styled_1.ItemContent, { ref: itemRef, style: { height: height }, active: (active === index || activeItem), className: "body-regular-14-17", children: (0, jsx_runtime_1.jsx)("div", { children: content }) })] }));
|
|
21
31
|
};
|
|
22
32
|
exports.default = AccordionItem;
|
|
@@ -10,13 +10,18 @@ exports.default = {
|
|
|
10
10
|
title: 'Components/Accordion',
|
|
11
11
|
component: Accordion_1.default,
|
|
12
12
|
tags: ['autodocs'],
|
|
13
|
-
argTypes: {
|
|
13
|
+
argTypes: {
|
|
14
|
+
collapseAll: { control: 'boolean' },
|
|
15
|
+
showLink: { control: 'boolean' },
|
|
16
|
+
}
|
|
14
17
|
};
|
|
15
18
|
exports.Default = {
|
|
16
19
|
args: {
|
|
17
20
|
title: "Merak Edebileceğin Sorulardan Bazıları",
|
|
18
21
|
data: faq_json_1.default,
|
|
19
22
|
showLink: false,
|
|
23
|
+
collapseAll: true,
|
|
24
|
+
activeIndex: null,
|
|
20
25
|
linkText: "Daha Fazla Soru Göster",
|
|
21
26
|
linkOnClick: function () { return console.log("test"); },
|
|
22
27
|
},
|
|
@@ -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 .slick-list {\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n position: relative;\n overflow: hidden;\n\n @media only screen and ", " {\n background: #f1f1f1;\n }\n }\n .slick-arrow{\n display: none !important;\n }\n\n @media only screen and ", " {\n .slick-active{\n box-shadow: 0 0.375rem 1.875rem 0 #EAE9F0;\n position: relative;\n z-index: 5;\n }\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: 0 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n border-radius: 0 0 8px 8px;\n height: 70px;\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 img {\n display: inline-block !important;\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: 0;\n text-align: center;\n height: 228px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: white;\n span {\n height: 174px !important;\n }\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 .slick-list {\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n position: relative;\n overflow: hidden;\n\n @media only screen and ", " {\n background: #f1f1f1;\n }\n }\n .slick-arrow{\n display: none !important;\n }\n\n @media only screen and ", " {\n .slick-active{\n box-shadow: 0 0.375rem 1.875rem 0 #EAE9F0;\n position: relative;\n z-index: 5;\n }\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: 0 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n border-radius: 0 0 8px 8px;\n height: 70px;\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 img {\n display: inline-block !important;\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: 0;\n text-align: center;\n height: 228px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: white;\n span {\n height: 174px !important;\n }\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, devices_1.devices.lg, devices_1.devices.lg);
|
|
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 .slick-list {\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n position: relative;\n overflow: hidden;\n\n @media only screen and ", " {\n background: #f1f1f1;\n }\n }\n .slick-arrow{\n display: none !important;\n }\n\n @media only screen and ", " {\n .slick-active{\n box-shadow: 0 0.375rem 1.875rem 0 #EAE9F0;\n position: relative;\n z-index: 5;\n }\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 max-width: 478px;\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: 0 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n border-radius: 0 0 8px 8px;\n height: 70px;\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 img {\n display: inline-block !important;\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: 0;\n text-align: center;\n height: 228px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: white;\n span {\n height: 174px !important;\n }\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 .slick-list {\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n position: relative;\n overflow: hidden;\n\n @media only screen and ", " {\n background: #f1f1f1;\n }\n }\n .slick-arrow{\n display: none !important;\n }\n\n @media only screen and ", " {\n .slick-active{\n box-shadow: 0 0.375rem 1.875rem 0 #EAE9F0;\n position: relative;\n z-index: 5;\n }\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 max-width: 478px;\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: 0 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n border-radius: 0 0 8px 8px;\n height: 70px;\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 img {\n display: inline-block !important;\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: 0;\n text-align: center;\n height: 228px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: white;\n span {\n height: 174px !important;\n }\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, devices_1.devices.lg, devices_1.devices.lg);
|
|
14
14
|
var templateObject_1;
|