krl-alfred 1.72.9 → 1.72.11
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/Accordion/Accordion.js +2 -2
- package/dist/components/Accordion/AccordionItem.js +13 -3
- package/dist/components/Accordion/stories/Accordion.stories.js +6 -1
- package/dist/components/InfoBox/InfoBox.js +2 -1
- package/dist/components/InfoBox/InfoBox.styled.js +1 -1
- package/package.json +1 -1
|
@@ -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
|
},
|
|
@@ -42,8 +42,9 @@ var InfoBox = function (props) {
|
|
|
42
42
|
(0, react_1.useEffect)(function () {
|
|
43
43
|
var _a, _b;
|
|
44
44
|
(_b = (_a = descriptionRef === null || descriptionRef === void 0 ? void 0 : descriptionRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('p')) === null || _b === void 0 ? void 0 : _b.forEach(function (el) {
|
|
45
|
+
var _a;
|
|
45
46
|
if (el) {
|
|
46
|
-
el.addEventListener("click", function (e) {
|
|
47
|
+
(_a = el === null || el === void 0 ? void 0 : el.querySelector('span')) === null || _a === void 0 ? void 0 : _a.addEventListener("click", function (e) {
|
|
47
48
|
var _a;
|
|
48
49
|
setAlertLeft((el === null || el === void 0 ? void 0 : el.offsetLeft) + (el === null || el === void 0 ? void 0 : el.offsetWidth));
|
|
49
50
|
setAlertTop(el === null || el === void 0 ? void 0 : el.offsetTop);
|
|
@@ -14,7 +14,7 @@ exports.InfoBoxStyled = styled_components_1.default.div(templateObject_1 || (tem
|
|
|
14
14
|
exports.IconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n margin-right: 1rem;\n svg{\n display: block;\n path[stroke]{\n stroke-width: 1.5;\n }\n }\n"], ["\n display: block;\n margin-right: 1rem;\n svg{\n display: block;\n path[stroke]{\n stroke-width: 1.5;\n }\n }\n"])));
|
|
15
15
|
exports.TextWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
16
16
|
exports.Title = styled_components_1.default.strong(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: block;\n margin: 0;\n"], ["\n display: block;\n margin: 0;\n"])));
|
|
17
|
-
exports.Description = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: block;\n margin: 0;\n b{\n font-weight: 700;\n }\n .bottom{\n p{\n font-weight: 700;\n color: var(--dark);\n
|
|
17
|
+
exports.Description = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: block;\n margin: 0;\n b{\n font-weight: 700;\n }\n .bottom{\n p{\n font-weight: 700;\n color: var(--dark);\n display: inline-block;\n margin: 0;\n position: relative;\n &:is(.block){\n display: none;\n @media only screen and ", " {\n display: block;\n }\n }\n &:nth-child(3){\n margin-left: 0.5rem;\n padding-left: 0.5rem;\n @media only screen and ", " {\n margin: 0;\n padding: 0;\n }\n &:before{\n content: \"\";\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 0;\n height: 9px;\n width: 1px;\n background-color: var(--dark);\n @media only screen and ", " {\n display: none;\n }\n }\n }\n span{\n color: var(--primary);\n cursor: pointer;\n }\n }\n }\n"], ["\n display: block;\n margin: 0;\n b{\n font-weight: 700;\n }\n .bottom{\n p{\n font-weight: 700;\n color: var(--dark);\n display: inline-block;\n margin: 0;\n position: relative;\n &:is(.block){\n display: none;\n @media only screen and ", " {\n display: block;\n }\n }\n &:nth-child(3){\n margin-left: 0.5rem;\n padding-left: 0.5rem;\n @media only screen and ", " {\n margin: 0;\n padding: 0;\n }\n &:before{\n content: \"\";\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 0;\n height: 9px;\n width: 1px;\n background-color: var(--dark);\n @media only screen and ", " {\n display: none;\n }\n }\n }\n span{\n color: var(--primary);\n cursor: pointer;\n }\n }\n }\n"])), devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm);
|
|
18
18
|
exports.AlertStyled = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n left: ", "px;\n top: ", "px;\n height: 28px;\n border-radius: 8px;\n background-color: white;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 1rem;\n user-select: none;\n pointer-events: none;\n transform: translateX(-100%) translateY(-100%);\n transition: opacity .4s ease;\n opacity: ", ";\n"], ["\n position: absolute;\n left: ", "px;\n top: ", "px;\n height: 28px;\n border-radius: 8px;\n background-color: white;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 1rem;\n user-select: none;\n pointer-events: none;\n transform: translateX(-100%) translateY(-100%);\n transition: opacity .4s ease;\n opacity: ", ";\n"])), function (props) { return props.alertLeft; }, function (props) { return props.alertTop - 5; }, function (props) { return props.visible ? '1' : '0'; });
|
|
19
19
|
exports.Input = styled_components_1.default.input(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n user-select: none;\n pointer-events: none;\n"], ["\n position: absolute;\n opacity: 0;\n user-select: none;\n pointer-events: none;\n"])));
|
|
20
20
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|