@trafilea/afrodita-components 6.4.2 → 6.4.4

package/build/index.d.ts

@@ -3032,11 +3032,13 @@ interface TabProps {
 }
 interface TabsProps {
     backgroundColor?: string;
+    selectedBorderColor?: string;
+    fixedBorderColor?: string;
     initialSelected?: string;
     tabsMaxWidth?: string;
     tabs: TabProps[];
 }
-declare const Tabs: ({ backgroundColor, tabs, initialSelected, tabsMaxWidth, }: TabsProps) => JSX.Element | null;
+declare const Tabs: ({ backgroundColor, selectedBorderColor, fixedBorderColor, tabs, initialSelected, tabsMaxWidth, }: TabsProps) => JSX.Element | null;
 
 interface CategoryTagProps {
     text: string;

package/build/index.esm.js

@@ -18819,21 +18819,24 @@ var Tab = function (_a) {
 var templateObject_1$b;
 
 var Container$6 = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
-var TabList = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 0 25px;\n"], ["\n  background-color: ", ";\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 0 25px;\n"])), function (_a) {
+var TabList = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 0 25px;\n  ", ";\n"], ["\n  background-color: ", ";\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 0 25px;\n  ", ";\n"])), function (_a) {
     var backgroundColor = _a.backgroundColor;
     return backgroundColor;
+}, function (_a) {
+    var borderColor = _a.borderColor;
+    return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
 });
 var TabContent = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
 var TabSeparator = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  color: var(--colors-shades-white-color);\n  font-family: initial;\n  font-size: 40px;\n  line-height: 69px;\n  padding: 0 25px;\n"], ["\n  color: var(--colors-shades-white-color);\n  font-family: initial;\n  font-size: 40px;\n  line-height: 69px;\n  padding: 0 25px;\n"])));
 var Tabs = function (_a) {
     var _b;
-    var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'var(--colors-pallete-primary-color)' : _c, tabs = _a.tabs, initialSelected = _a.initialSelected, tabsMaxWidth = _a.tabsMaxWidth;
-    var _d = useState(initialSelected), selectedTab = _d[0], setSelectedTab = _d[1];
+    var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'var(--colors-pallete-primary-color)' : _c, _d = _a.selectedBorderColor, selectedBorderColor = _d === void 0 ? 'var(--colors-pallete-primary-color)' : _d, _e = _a.fixedBorderColor, fixedBorderColor = _e === void 0 ? '' : _e, tabs = _a.tabs, initialSelected = _a.initialSelected, tabsMaxWidth = _a.tabsMaxWidth;
+    var _f = useState(initialSelected), selectedTab = _f[0], setSelectedTab = _f[1];
     if (!Array.isArray(tabs) || tabs.length === 0) {
         return null;
     }
     var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
-    return (jsxs$1(Container$6, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor }, { children: tabs.map(function (tab, index) { return (jsxs$1(React__default.Fragment, { children: [jsx$1(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth }, tab.title), index + 1 < tabs.length && jsx$1(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsx$1(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
+    return (jsxs$1(Container$6, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxs$1(React__default.Fragment, { children: [jsx$1(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsx$1(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsx$1(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
 };
 var templateObject_1$a, templateObject_2$7, templateObject_3$6, templateObject_4$5;