krl-alfred 1.83.0 → 1.83.2
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/DescriptionCard/DescriptionCard.js +8 -2
- package/dist/components/DescriptionCard/props.js +2 -1
- package/dist/components/DescriptionCard/stories/DescriptionCard.stories.js +1 -0
- package/dist/components/Icon/iconList/StarfullSmall.js +1 -1
- package/dist/components/ReviewBlock/ReviewBlock.styled.js +2 -2
- package/dist/components/Tabs/TabItem.js +5 -1
- package/dist/components/Tabs/Tabs.js +12 -1
- package/dist/components/VideoCard/VideoCard.styled.js +1 -1
- package/dist/i18n/locales/turkish.json +1 -1
- package/package.json +1 -1
|
@@ -22,8 +22,14 @@ var OptionMenu_1 = __importDefault(require("../OptionMenu"));
|
|
|
22
22
|
var AccordionItem_1 = __importDefault(require("./AccordionItem"));
|
|
23
23
|
var Button_1 = __importDefault(require("./../Button"));
|
|
24
24
|
var DescriptionCard = function (_a) {
|
|
25
|
-
var _b = _a.title, title = _b === void 0 ? props_1.DescriptionCardDefault.title : _b, _c = _a.headerButtonText, headerButtonText = _c === void 0 ? props_1.DescriptionCardDefault.headerButtonText : _c, _d = _a.hasHeaderDropdown, hasHeaderDropdown = _d === void 0 ? props_1.DescriptionCardDefault.hasHeaderDropdown : _d, _e = _a.list, list = _e === void 0 ? props_1.DescriptionCardDefault.list : _e, _f = _a.hasBadge, hasBadge = _f === void 0 ? props_1.DescriptionCardDefault.hasBadge : _f, _g = _a.badgeText, badgeText = _g === void 0 ? props_1.DescriptionCardDefault.badgeText : _g, _h = _a.hasHeader, hasHeader = _h === void 0 ? props_1.DescriptionCardDefault.hasHeader : _h, _j = _a.hasRounded, hasRounded = _j === void 0 ? props_1.DescriptionCardDefault.hasRounded : _j, _k = _a.hasBorder, hasBorder = _k === void 0 ? props_1.DescriptionCardDefault.hasBorder : _k, _l = _a.headerImage, headerImage = _l === void 0 ? props_1.DescriptionCardDefault.headerImage : _l, _m = _a.dropdownList, dropdownList = _m === void 0 ? props_1.DescriptionCardDefault.dropdownList : _m, _o = _a.dropdownWidth, dropdownWidth = _o === void 0 ? props_1.DescriptionCardDefault.dropdownWidth : _o, _p = _a.accordionList, accordionList = _p === void 0 ? props_1.DescriptionCardDefault.accordionList : _p, _q = _a.boxSize, boxSize = _q === void 0 ? props_1.DescriptionCardDefault.boxSize : _q, _r = _a.hasHeaderButton, hasHeaderButton = _r === void 0 ? props_1.DescriptionCardDefault.hasHeaderButton : _r, _s = _a.headerButtonWidth, headerButtonWidth = _s === void 0 ? props_1.DescriptionCardDefault.headerButtonWidth : _s, _t = _a.hasHeaderPrimaryButton, hasHeaderPrimaryButton = _t === void 0 ? props_1.DescriptionCardDefault.hasHeaderPrimaryButton : _t, _u = _a.headerPrimaryButtonAction, headerPrimaryButtonAction = _u === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonAction : _u, _v = _a.headerPrimaryButtonText, headerPrimaryButtonText = _v === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonText : _v, headerButtonAction = _a.headerButtonAction;
|
|
26
|
-
return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardStyled, __assign({ "$hasRounded": hasRounded, "$hasBorder": hasBorder }, { children: [hasHeader && ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardHeaderStyled, __assign({ "$headerImage": headerImage }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [headerImage && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderImageWrapperStyled, { children: headerImage })), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleStyled, { children: title }), hasBadge && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.BadgeWrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: badgeText }) }))] }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "rightFrame" }, { children: [hasHeaderPrimaryButton && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: headerPrimaryButtonAction, size: "xsmall", variant: "primary" }, { children: headerPrimaryButtonText })) })), hasHeaderButton && ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DropdownWrapper, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: headerButtonWidth, onClick: headerButtonAction, size: "xsmall", variant: "inverted", icon: hasHeaderDropdown ? "ArrowSmallDown" : null }, { children: headerButtonText })), hasHeaderDropdown && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubMenu, { children: (0, jsx_runtime_1.jsx)(OptionMenu_1.default, { hasActiveItem: false, data: dropdownList, rowLength: 20, gridItemWidth: dropdownWidth }) }))] }))] }))] }))), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.ListStyled, __assign({ "$boxSize": boxSize }, { children: list.map(function (listItem, key) {
|
|
25
|
+
var _b = _a.title, title = _b === void 0 ? props_1.DescriptionCardDefault.title : _b, _c = _a.headerButtonText, headerButtonText = _c === void 0 ? props_1.DescriptionCardDefault.headerButtonText : _c, _d = _a.hasHeaderDropdown, hasHeaderDropdown = _d === void 0 ? props_1.DescriptionCardDefault.hasHeaderDropdown : _d, _e = _a.list, list = _e === void 0 ? props_1.DescriptionCardDefault.list : _e, _f = _a.hasBadge, hasBadge = _f === void 0 ? props_1.DescriptionCardDefault.hasBadge : _f, _g = _a.badgeText, badgeText = _g === void 0 ? props_1.DescriptionCardDefault.badgeText : _g, _h = _a.hasHeader, hasHeader = _h === void 0 ? props_1.DescriptionCardDefault.hasHeader : _h, _j = _a.hasRounded, hasRounded = _j === void 0 ? props_1.DescriptionCardDefault.hasRounded : _j, _k = _a.hasBorder, hasBorder = _k === void 0 ? props_1.DescriptionCardDefault.hasBorder : _k, _l = _a.headerImage, headerImage = _l === void 0 ? props_1.DescriptionCardDefault.headerImage : _l, _m = _a.dropdownList, dropdownList = _m === void 0 ? props_1.DescriptionCardDefault.dropdownList : _m, _o = _a.dropdownWidth, dropdownWidth = _o === void 0 ? props_1.DescriptionCardDefault.dropdownWidth : _o, _p = _a.accordionList, accordionList = _p === void 0 ? props_1.DescriptionCardDefault.accordionList : _p, _q = _a.boxSize, boxSize = _q === void 0 ? props_1.DescriptionCardDefault.boxSize : _q, _r = _a.hasHeaderButton, hasHeaderButton = _r === void 0 ? props_1.DescriptionCardDefault.hasHeaderButton : _r, _s = _a.headerButtonWidth, headerButtonWidth = _s === void 0 ? props_1.DescriptionCardDefault.headerButtonWidth : _s, _t = _a.hasHeaderPrimaryButton, hasHeaderPrimaryButton = _t === void 0 ? props_1.DescriptionCardDefault.hasHeaderPrimaryButton : _t, _u = _a.headerPrimaryButtonAction, headerPrimaryButtonAction = _u === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonAction : _u, _v = _a.headerPrimaryButtonText, headerPrimaryButtonText = _v === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonText : _v, headerButtonAction = _a.headerButtonAction, _w = _a.customColumnSpan, customColumnSpan = _w === void 0 ? props_1.DescriptionCardDefault.customColumnSpan : _w;
|
|
26
|
+
return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardStyled, __assign({ "$hasRounded": hasRounded, "$hasBorder": hasBorder }, { children: [hasHeader && ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardHeaderStyled, __assign({ "$headerImage": headerImage }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [headerImage && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderImageWrapperStyled, { children: headerImage })), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleStyled, { children: title }), hasBadge && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.BadgeWrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: badgeText }) }))] }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "rightFrame" }, { children: [hasHeaderPrimaryButton && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: headerPrimaryButtonAction, size: "xsmall", variant: "primary" }, { children: headerPrimaryButtonText })) })), hasHeaderButton && ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DropdownWrapper, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: headerButtonWidth, onClick: headerButtonAction, size: "xsmall", variant: "inverted", icon: hasHeaderDropdown ? "ArrowSmallDown" : null }, { children: headerButtonText })), hasHeaderDropdown && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubMenu, { children: (0, jsx_runtime_1.jsx)(OptionMenu_1.default, { hasActiveItem: false, data: dropdownList, rowLength: 20, gridItemWidth: dropdownWidth }) }))] }))] }))] }))), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.ListStyled, __assign({ "$boxSize": boxSize }, { children: list.map(function (listItem, key) {
|
|
27
|
+
var _a;
|
|
28
|
+
var span = (_a = customColumnSpan[key]) !== null && _a !== void 0 ? _a : 1;
|
|
29
|
+
return ((0, jsx_runtime_1.jsxs)("li", __assign({ style: {
|
|
30
|
+
gridColumn: "span ".concat(span)
|
|
31
|
+
} }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "displayTitle" }, { children: listItem.title })), (0, jsx_runtime_1.jsx)("span", __assign({ className: "displayValue" }, { children: listItem.display || "-" }))] }), key));
|
|
32
|
+
}) })), (accordionList === null || accordionList === void 0 ? void 0 : accordionList.length) > 0 && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.AccordionListWrapper, { children: accordionList === null || accordionList === void 0 ? void 0 : accordionList.map(function (item, key) {
|
|
27
33
|
return (0, jsx_runtime_1.jsx)(AccordionItem_1.default, { data: item }, key);
|
|
28
34
|
}) }))] })));
|
|
29
35
|
};
|
|
@@ -20,5 +20,6 @@ exports.DescriptionCardDefault = {
|
|
|
20
20
|
headerButtonWidth: null,
|
|
21
21
|
hasHeaderPrimaryButton: false,
|
|
22
22
|
headerPrimaryButtonAction: null,
|
|
23
|
-
headerPrimaryButtonText: "Header Primary Button Text"
|
|
23
|
+
headerPrimaryButtonText: "Header Primary Button Text",
|
|
24
|
+
customColumnSpan: {}
|
|
24
25
|
};
|
|
@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
38
|
var React = __importStar(require("react"));
|
|
39
|
-
var SvgStarfullSmall = function (props) { return ((0, jsx_runtime_1.
|
|
39
|
+
var SvgStarfullSmall = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("g", __assign({ clipPath: "url(#clip0_33915_135572)" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M7.73186 13.029C7.8955 12.9251 8.1045 12.9251 8.26814 13.029L11.9271 15.3538C12.3029 15.5925 12.7797 15.2582 12.6834 14.8236L11.6946 10.3626C11.6558 10.1878 11.7135 10.0056 11.8458 9.88495L15.1596 6.8631C15.4812 6.56988 15.3006 6.03432 14.8672 5.99563L10.5531 5.61047C10.3659 5.59376 10.2039 5.47351 10.1337 5.2992L8.46381 1.15191C8.29564 0.734246 7.70436 0.734248 7.53619 1.15191L5.86629 5.2992C5.7961 5.47351 5.63411 5.59376 5.44694 5.61047L1.13281 5.99563C0.699376 6.03432 0.518827 6.56988 0.840369 6.8631L4.15416 9.88495C4.28646 10.0056 4.34415 10.1878 4.3054 10.3626L3.31659 14.8236C3.22025 15.2582 3.69715 15.5925 4.07287 15.3538L7.73186 13.029Z", fill: "currentColor" }) })), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", __assign({ id: "clip0_33915_135572" }, { children: (0, jsx_runtime_1.jsx)("rect", { width: 16, height: 16, fill: "white" }) })) })] }))); };
|
|
40
40
|
exports.default = SvgStarfullSmall;
|
|
@@ -12,7 +12,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
|
|
|
12
12
|
exports.ReviewCard = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: white;\n padding: 1.5rem;\n border-radius: 0.5rem;\n border: 1px solid var(--grey-10);\n"], ["\n background: white;\n padding: 1.5rem;\n border-radius: 0.5rem;\n border: 1px solid var(--grey-10);\n"])));
|
|
13
13
|
exports.Header = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: ", ";\n border-bottom: 1px solid var(--dark-opacity-10);\n padding-bottom: 1rem;\n margin-bottom: 1rem;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: ", ";\n border-bottom: 1px solid var(--dark-opacity-10);\n padding-bottom: 1rem;\n margin-bottom: 1rem;\n"])), function (props) { return props.$hasDropdown || props.$hasApproveButton ? "center" : "flex-end"; });
|
|
14
14
|
exports.CustomerName = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font: var(--body-semi-bold-13-16);\n color: var(--dark-opacity-50);\n margin-top: 1rem;\n"], ["\n font: var(--body-semi-bold-13-16);\n color: var(--dark-opacity-50);\n margin-top: 1rem;\n"])));
|
|
15
|
-
exports.Date = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font: var(--
|
|
15
|
+
exports.Date = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font: var(--caption-semi-bold-12-15);\n color: var(--dark-opacity-50);\n margin-top: 1rem;\n text-align: end;\n"], ["\n font: var(--caption-semi-bold-12-15);\n color: var(--dark-opacity-50);\n margin-top: 1rem;\n text-align: end;\n"])));
|
|
16
16
|
exports.PlatformReview = styled_components_1.default.p(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font: var(--body-regular-14-20);\n color: var(--grey-90);\n margin: 16px 0;\n"], ["\n font: var(--body-regular-14-20);\n color: var(--grey-90);\n margin: 16px 0;\n"])));
|
|
17
17
|
exports.ProductReviewBlock = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n + div{\n margin-top: 1.5rem;\n }\n"], ["\n + div{\n margin-top: 1.5rem;\n }\n"])));
|
|
18
18
|
exports.ProductWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-top: 0;\n display: flex;\n gap: 1rem;\n align-items: center;\n margin-bottom: 1rem;\n"], ["\n margin-top: 0;\n display: flex;\n gap: 1rem;\n align-items: center;\n margin-bottom: 1rem;\n"])));
|
|
@@ -23,7 +23,7 @@ exports.ProductQuestion = styled_components_1.default.div(templateObject_11 || (
|
|
|
23
23
|
exports.ProductAnswer = styled_components_1.default.p(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n font: var(--body-medium-14-17);\n color: var(--dark-opacity-75);\n margin: 0;\n"], ["\n font: var(--body-medium-14-17);\n color: var(--dark-opacity-75);\n margin: 0;\n"])));
|
|
24
24
|
exports.Tags = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n margin-top: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n margin-top: 1rem;\n"])));
|
|
25
25
|
exports.TextLinkWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n font: var(--body-bold-14-17);\n"], ["\n font: var(--body-bold-14-17);\n"])));
|
|
26
|
-
exports.StarsWrapper = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n display: flex;\n flex-direction: row;\n\n .filleds {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n position: absolute;\n inset: 0;\n left: 0;\n overflow: hidden;\n white-space: nowrap;\n color: var(--yellowDark);\n z-index: 1;\n }\n\n .notFilleds {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n color: var(--dark-opacity-10);\n z-index: 0;\n }\n"], ["\n position: relative;\n width: fit-content;\n display: flex;\n flex-direction: row;\n\n .filleds {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n position: absolute;\n inset: 0;\n left: 0;\n overflow: hidden;\n white-space: nowrap;\n color: var(--yellowDark);\n z-index: 1;\n }\n\n .notFilleds {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n color: var(--dark-opacity-10);\n z-index: 0;\n }\n"])));
|
|
26
|
+
exports.StarsWrapper = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n display: flex;\n flex-direction: row;\n\n .filleds {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n position: absolute;\n inset: 0;\n left: 0;\n overflow: hidden;\n white-space: nowrap;\n color: var(--yellowDark);\n z-index: 1;\n column-gap: 2px;\n }\n\n .notFilleds {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n color: var(--dark-opacity-10);\n z-index: 0;\n column-gap: 2px;\n }\n"], ["\n position: relative;\n width: fit-content;\n display: flex;\n flex-direction: row;\n\n .filleds {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n position: absolute;\n inset: 0;\n left: 0;\n overflow: hidden;\n white-space: nowrap;\n color: var(--yellowDark);\n z-index: 1;\n column-gap: 2px;\n }\n\n .notFilleds {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n color: var(--dark-opacity-10);\n z-index: 0;\n column-gap: 2px;\n }\n"])));
|
|
27
27
|
exports.DropdownWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n margin-left: 1rem;\n"], ["\n margin-left: 1rem;\n"])));
|
|
28
28
|
exports.DropdownToggleButton = styled_components_1.default.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n box-sizing: border-box;\n position: relative;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n border-radius: 0;\n padding: 0;\n cursor: pointer;\n transition: all .2s;\n outline: none;\n border:0;\n background: none;\n color: var(--primary);\n"], ["\n box-sizing: border-box;\n position: relative;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n border-radius: 0;\n padding: 0;\n cursor: pointer;\n transition: all .2s;\n outline: none;\n border:0;\n background: none;\n color: var(--primary);\n"])));
|
|
29
29
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
@@ -10,12 +10,16 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
};
|
|
11
11
|
return __assign.apply(this, arguments);
|
|
12
12
|
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
13
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
17
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
15
18
|
var props_1 = require("./props");
|
|
16
19
|
var react_1 = require("react");
|
|
17
20
|
var TabContext_1 = require("./TabContext");
|
|
18
21
|
var Tabs_styled_1 = require("./Tabs.styled");
|
|
22
|
+
var classnames_1 = __importDefault(require("classnames"));
|
|
19
23
|
var TabItem = function (_a) {
|
|
20
24
|
var _b = _a.isActive, isActive = _b === void 0 ? props_1.TabItemDefault.isActive : _b, _c = _a.hasAutoFlex, hasAutoFlex = _c === void 0 ? props_1.TabsDefault.hasAutoFlex : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? props_1.TabItemDefault.isDisabled : _d, _e = _a.title, title = _e === void 0 ? props_1.TabItemDefault.title : _e, _f = _a.children, children = _f === void 0 ? props_1.TabItemDefault.children : _f, _g = _a.key, key = _g === void 0 ? props_1.TabItemDefault.key : _g, _h = _a.onClick, onClick = _h === void 0 ? props_1.TabItemDefault.onClick : _h;
|
|
21
25
|
var _j = (0, react_1.useContext)(TabContext_1.TabsContext), onActivate = _j.onActivate, setActiveContent = _j.setActiveContent;
|
|
@@ -33,6 +37,6 @@ var TabItem = function (_a) {
|
|
|
33
37
|
if (isActive)
|
|
34
38
|
setActiveContent(children);
|
|
35
39
|
}, [isActive, children]);
|
|
36
|
-
return ((0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemStyled, __assign({ "$isDisabled": isDisabled, "$hasAutoFlex": hasAutoFlex }, { children: (0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemTitleStyled, __assign({ "$isActive": isActive, "$hasAutoFlex": hasAutoFlex, onClick: onClickTab }, { children: title })) }), key));
|
|
40
|
+
return ((0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemStyled, __assign({ className: (0, classnames_1.default)("customTabItem", { isActive: isActive }), "$isDisabled": isDisabled, "$hasAutoFlex": hasAutoFlex }, { children: (0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemTitleStyled, __assign({ "$isActive": isActive, "$hasAutoFlex": hasAutoFlex, onClick: onClickTab }, { children: title })) }), key));
|
|
37
41
|
};
|
|
38
42
|
exports.default = TabItem;
|
|
@@ -66,7 +66,18 @@ var Tabs = function (_a) {
|
|
|
66
66
|
setActiveContent: setActiveContent,
|
|
67
67
|
};
|
|
68
68
|
}, [tabActiveIndex, activeIndex]);
|
|
69
|
-
|
|
69
|
+
(0, react_1.useEffect)(function () {
|
|
70
|
+
var _a, _b, _c;
|
|
71
|
+
if (window && typeof window !== "undefined") {
|
|
72
|
+
var elem = (_a = window === null || window === void 0 ? void 0 : window.document) === null || _a === void 0 ? void 0 : _a.querySelector(".tabHeader");
|
|
73
|
+
var activeItem = (_b = window === null || window === void 0 ? void 0 : window.document) === null || _b === void 0 ? void 0 : _b.querySelector(".customTabItem.isActive");
|
|
74
|
+
if (activeItem && elem) {
|
|
75
|
+
//activeItem.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
|
|
76
|
+
elem.scrollLeft = (activeItem === null || activeItem === void 0 ? void 0 : activeItem.offsetLeft) - (window.innerWidth / 2) + (((_c = activeItem === null || activeItem === void 0 ? void 0 : activeItem.getBoundingClientRect()) === null || _c === void 0 ? void 0 : _c.width) / 2);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
return ((0, jsx_runtime_1.jsxs)(Tabs_styled_1.TabsStyled, { children: [(0, jsx_runtime_1.jsx)(Tabs_styled_1.TabHeaderStyled, __assign({ "$hasAutoFlex": hasAutoFlex, className: "tabHeader" }, { children: children === null || children === void 0 ? void 0 : children.map(function (child, index) { return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)(TabContext_1.TabsContext.Provider, __assign({ value: getTabsContext(index) }, { children: child
|
|
70
81
|
? // cloneElement is needed for backward compatibility with custom
|
|
71
82
|
// styled components that rely on active. We should reassess
|
|
72
83
|
// if it is still necessary in our next major release.
|
|
@@ -11,5 +11,5 @@ exports.Title = exports.VideoWrapper = exports.VideoCardStyled = void 0;
|
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.VideoCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n padding: 1.5rem;\n transition: all .2s ease;\n cursor: pointer;\n &:hover{\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n"], ["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n padding: 1.5rem;\n transition: all .2s ease;\n cursor: pointer;\n &:hover{\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n"])));
|
|
13
13
|
exports.VideoWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n video{\n display: block;\n width: 100%;\n height: 371px;\n object-fit: cover;\n position: relative;\n overflow: hidden;\n border-radius: 0.5rem;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n video{\n display: block;\n width: 100%;\n height: 371px;\n object-fit: cover;\n position: relative;\n overflow: hidden;\n border-radius: 0.5rem;\n }\n"])));
|
|
14
|
-
exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-top: 1.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n
|
|
14
|
+
exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-top: 1.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n font : var(--title-bold-16-19);\n"], ["\n margin-top: 1.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n font : var(--title-bold-16-19);\n"])));
|
|
15
15
|
var templateObject_1, templateObject_2, templateObject_3;
|