@thecb/components 4.3.1 → 4.3.2

package/.tool-versions

@@ -1 +1 @@
-nodejs 15.5.1
+nodejs 15.5.0

package/dist/index.cjs.js

@@ -40360,6 +40360,88 @@ var fallbackValues$A = {
   activeTabHover: activeTabHover
 };
 
+var Tab = function Tab(_ref) {
+  var label = _ref.label,
+      activeTab = _ref.activeTab,
+      setActiveTab = _ref.setActiveTab;
+
+  var onClick = function onClick() {
+    setActiveTab(label);
+  };
+
+  var className = "tab-list-item";
+
+  if (activeTab === label) {
+    className += " tab-list-active";
+  }
+
+  return /*#__PURE__*/React__default.createElement(Box, {
+    className: className,
+    onClick: onClick,
+    margin: "0 0 -1px 0",
+    padding: "0.5rem 0.75rem",
+    background: activeTab === label ? WHITE : GRECIAN_GREY,
+    extraStyles: "cursor: pointer; flex-grow: 1; text-align: center; ".concat(activeTab === label ? "list-style: none;" : "")
+  }, /*#__PURE__*/React__default.createElement(Text$1, null, label));
+};
+
+var HORIZONTAL = "horizontal";
+
+var Tabs = function Tabs(_ref) {
+  var tabsConfig = _ref.tabsConfig,
+      tabsDisplayMode = _ref.tabsDisplayMode;
+
+  var _useState = React.useState(tabsConfig.tabs[0].label),
+      _useState2 = _slicedToArray(_useState, 2),
+      activeTab = _useState2[0],
+      toggleActiveTab = _useState2[1];
+
+  var createTabs = function createTabs(tabConfig, activeTab) {
+    return tabConfig.tabs.map(function (tab) {
+      return /*#__PURE__*/React__default.createElement(Tab, {
+        activeTab: activeTab,
+        key: tab.label,
+        label: tab.label,
+        setActiveTab: function setActiveTab() {
+          return toggleActiveTab(tab.label);
+        }
+      });
+    });
+  };
+
+  var showHorozontal = function showHorozontal(tabsConfig, activeTab) {
+    return /*#__PURE__*/React__default.createElement(Cluster, {
+      justify: "space-around"
+    }, createTabs(tabsConfig, activeTab));
+  };
+
+  var showVertical = function showVertical(tabsConfig, activeTab) {
+    return /*#__PURE__*/React__default.createElement(Stack, null, createTabs(tabsConfig, activeTab));
+  };
+
+  return /*#__PURE__*/React__default.createElement(Box, {
+    className: "tabs"
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    className: "tab-list"
+  }, tabsDisplayMode == HORIZONTAL ? showHorozontal(tabsConfig, activeTab) : showVertical(tabsConfig, activeTab)), /*#__PURE__*/React__default.createElement(Box, {
+    className: "tab-content"
+  }, /*#__PURE__*/React__default.createElement(Box, null, tabsConfig.tabs.map(function (tab) {
+    if (tab.label !== activeTab) return undefined;
+    return tab.content;
+  }))));
+};
+
+var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$A);
+
+var activeTabBackground$1 = "#FFFFFF";
+var activeTabAccent$1 = "#15749D";
+var activeTabHover$1 = "#B8D5E1";
+var fallbackValues$B = {
+  activeTabBackground: activeTabBackground$1,
+  activeTabAccent: activeTabAccent$1,
+  activeTabHover: activeTabHover$1
+};
+
 var TabSidebar = function TabSidebar(_ref) {
   var links = _ref.links,
       isMobile = _ref.isMobile,
@@ -40410,7 +40492,7 @@ var TabSidebar = function TabSidebar(_ref) {
   })));
 };
 
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$A);
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$B);
 
 var backgroundColor$9 = {
   "default": "#ffffff",
@@ -40444,7 +40526,7 @@ var accessibilityColor = {
   "default": "#3181E3",
   footer: "#3181E3"
 };
-var fallbackValues$B = {
+var fallbackValues$C = {
   backgroundColor: backgroundColor$9,
   linkColor: linkColor$5,
   border: border$2,
@@ -40506,7 +40588,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
   }, link));
 };
 
-var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$B, "default");
+var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$C, "default");
 
 var TermsAndConditions = function TermsAndConditions(_ref) {
   var onCheck = _ref.onCheck,
@@ -40581,7 +40663,7 @@ var fontColor$1 = WHITE;
 var textAlign$1 = "left";
 var headerBackgroundColor = BRIGHT_GREY;
 var imageBackgroundColor = MATISSE_BLUE;
-var fallbackValues$C = {
+var fallbackValues$D = {
   fontWeight: fontWeight$9,
   fontColor: fontColor$1,
   textAlign: textAlign$1,
@@ -40634,7 +40716,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
   })))));
 };
 
-var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$C));
+var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$D));
 
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
@@ -40682,7 +40764,7 @@ var WorkflowTile = function WorkflowTile(_ref) {
 };
 
 var pageBackground = "#F6F6F9";
-var fallbackValues$D = {
+var fallbackValues$E = {
   pageBackground: pageBackground
 };
 
@@ -40729,7 +40811,7 @@ var CenterSingle = function CenterSingle(_ref) {
   })));
 };
 
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$D));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$E));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -40771,7 +40853,7 @@ var CenterStack = function CenterStack(_ref) {
   })));
 };
 
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$D));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$E));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -40811,7 +40893,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
   })));
 };
 
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$D));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$E));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -40865,7 +40947,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
   })));
 };
 
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$D));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$E));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -40936,7 +41018,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
   })));
 };
 
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$D));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$E));
 
 
 
@@ -41084,6 +41166,7 @@ exports.SuccessfulIcon = SuccessfulIcon;
 exports.Switcher = Switcher;
 exports.TabSidebar = TabSidebar$1;
 exports.TableListItem = TableListItem;
+exports.Tabs = Tabs$1;
 exports.TermsAndConditions = TermsAndConditions;
 exports.TermsAndConditionsModal = TermsAndConditionsModal$1;
 exports.Text = Text$1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.3.1",
+  "version": "4.3.2",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/molecules/index.js

@@ -25,6 +25,7 @@ export { default as RegistrationForm } from "./registration-form";
 export { default as ResetConfirmationForm } from "./reset-confirmation-form";
 export { default as ResetPasswordForm } from "./reset-password-form";
 export { default as ResetPasswordSuccess } from "./reset-password-success";
+export { default as Tabs } from "./tabs";
 export { default as TabSidebar } from "./tab-sidebar";
 export { default as TermsAndConditions } from "./terms-and-conditions";
 export { default as TermsAndConditionsModal } from "./terms-and-conditions-modal";