@thecb/components 4.2.9 → 4.3.2

package/.tool-versions

@@ -1 +1 @@
-nodejs 10.15.3
+nodejs 15.5.0

package/dist/index.cjs.js

@@ -6471,7 +6471,7 @@ var Center = function Center(_ref) {
 };
 
 function _templateObject2$2() {
-  var data = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  display: flex;\n  flex-wrap: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  margin: calc(", " / 2 * -1);\n  min-height: ", ";\n  min-width: ", ";\n\n  > * {\n    margin: calc(", " / 2);\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  display: flex;\n  flex-wrap: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  margin: calc(", " / 2 * -1);\n  min-height: ", ";\n  min-width: ", ";\n  > * {\n    margin: calc(", " / 2);\n  }\n"]);
 
   _templateObject2$2 = function _templateObject2() {
     return data;
@@ -39763,11 +39763,11 @@ var formConfig$7 = {
     constraints: [validateWhen(onlyIntegers(), matchesRegex("US"), "country"), validateWhen(hasLength(0, 9), matchesRegex("US"), "country")]
   }
 };
-var formState = createFormState(formConfig$7);
-console.log("form state is", formState);
-var reducer$7 = formState.reducer,
-    mapStateToProps$8 = formState.mapStateToProps,
-    mapDispatchToProps$7 = formState.mapDispatchToProps;
+
+var _createFormState$7 = createFormState(formConfig$7),
+    reducer$7 = _createFormState$7.reducer,
+    mapStateToProps$8 = _createFormState$7.mapStateToProps,
+    mapDispatchToProps$7 = _createFormState$7.mapDispatchToProps;
 
 PaymentFormCard.reducer = reducer$7;
 PaymentFormCard.mapStateToProps = mapStateToProps$8;
@@ -39827,10 +39827,10 @@ var formConfig$8 = {
   }
 };
 
-var _createFormState$7 = createFormState(formConfig$8),
-    reducer$8 = _createFormState$7.reducer,
-    mapStateToProps$9 = _createFormState$7.mapStateToProps,
-    mapDispatchToProps$8 = _createFormState$7.mapDispatchToProps;
+var _createFormState$8 = createFormState(formConfig$8),
+    reducer$8 = _createFormState$8.reducer,
+    mapStateToProps$9 = _createFormState$8.mapStateToProps,
+    mapDispatchToProps$8 = _createFormState$8.mapDispatchToProps;
 
 PhoneForm.reducer = reducer$8;
 PhoneForm.mapStateToProps = mapStateToProps$9;
@@ -40172,10 +40172,10 @@ var formConfig$9 = {
   }
 };
 
-var _createFormState$8 = createFormState(formConfig$9),
-    reducer$9 = _createFormState$8.reducer,
-    mapStateToProps$a = _createFormState$8.mapStateToProps,
-    mapDispatchToProps$9 = _createFormState$8.mapDispatchToProps;
+var _createFormState$9 = createFormState(formConfig$9),
+    reducer$9 = _createFormState$9.reducer,
+    mapStateToProps$a = _createFormState$9.mapStateToProps,
+    mapDispatchToProps$9 = _createFormState$9.mapDispatchToProps;
 
 RegistrationForm.reducer = reducer$9;
 RegistrationForm.mapStateToProps = mapStateToProps$a;
@@ -40293,10 +40293,10 @@ var formConfig$a = {
   }
 };
 
-var _createFormState$9 = createFormState(formConfig$a),
-    reducer$a = _createFormState$9.reducer,
-    mapStateToProps$b = _createFormState$9.mapStateToProps,
-    mapDispatchToProps$a = _createFormState$9.mapDispatchToProps;
+var _createFormState$a = createFormState(formConfig$a),
+    reducer$a = _createFormState$a.reducer,
+    mapStateToProps$b = _createFormState$a.mapStateToProps,
+    mapDispatchToProps$a = _createFormState$a.mapDispatchToProps;
 
 ResetPasswordForm.reducer = reducer$a;
 ResetPasswordForm.mapStateToProps = mapStateToProps$b;
@@ -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.2.9",
+  "version": "4.3.2",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/layouts/Cluster.styled.js

@@ -22,7 +22,6 @@ export const ClusterInnerWrapper = styled.div`
   margin: calc(${({ childGap }) => childGap} / 2 * -1);
   min-height: ${({ minHeight }) => minHeight};
   min-width: ${({ minWidth }) => minWidth};
-
   > * {
     margin: calc(${({ childGap }) => childGap} / 2);
   }

package/src/components/atoms/tab/Tab.js

@@ -0,0 +1,32 @@
+import React from "react";
+import Text from "../text";
+import { WHITE, GRECIAN_GREY } from "../../../constants/colors";
+import { Box } from "../../atoms/layouts";
+
+const Tab = ({ label, activeTab, setActiveTab }) => {
+  const onClick = () => {
+    setActiveTab(label);
+  };
+
+  let className = "tab-list-item";
+  if (activeTab === label) {
+    className += " tab-list-active";
+  }
+
+  return (
+    <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; ${
+        activeTab === label ? `list-style: none;` : ``
+      }`}
+    >
+      <Text>{label}</Text>
+    </Box>
+  );
+};
+
+export default Tab;

package/src/components/atoms/tab/Tab.stories.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+import Tab from "./Tab";
+import page from "../../../../.storybook/page";
+
+export const tab = () => (
+  <Tab label={"Test"} onClick={() => console.log("test")} />
+);
+
+const story = page({
+  title: "Components|Atoms/Tab",
+  Component: Tab
+});
+
+export default story;

package/src/components/atoms/tab/Tab.theme.js

@@ -0,0 +1,26 @@
+const fontFamily = {
+  p: "Public Sans",
+  pL: "Public Sans",
+  pS: "Public Sans",
+  pXS: "Public Sans",
+  pXXS: "Public Sans",
+  pXL: "Public Sans"
+};
+
+// Text uses the same variants as paragraph
+// Use a Paragraph if you want a block level element
+// Use a Text if you want an inline element
+
+const fontSize = {
+  p: "1rem",
+  pL: "1.125rem",
+  pS: "0.875rem",
+  pXS: "0.75rem",
+  pXXS: "0.65rem",
+  pXL: "1.5rem"
+};
+
+export const fallbackValues = {
+  fontFamily,
+  fontSize
+};

package/src/components/atoms/tab/index.js

@@ -0,0 +1,3 @@
+import Tab from "./Tab";
+
+export default Tab;

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";

package/src/components/molecules/payment-form-card/PaymentFormCard.state.js

@@ -54,7 +54,6 @@ const formConfig = {
   }
 };
 
-const formState = createFormState(formConfig);
-console.log("form state is", formState);
-
-export const { reducer, mapStateToProps, mapDispatchToProps } = formState;
+export const { reducer, mapStateToProps, mapDispatchToProps } = createFormState(
+  formConfig
+);

package/src/components/molecules/tabs/Tabs.js

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+import { Stack, Box, Cluster } from "../../atoms/layouts";
+import { themeComponent } from "../../../util/themeUtils";
+import { fallbackValues } from "./Tabs.theme";
+import Tab from "../../atoms/tab";
+
+const HORIZONTAL = "horizontal";
+
+const Tabs = ({
+  tabsConfig,
+  tabsDisplayMode // can be either HORIZONTAL or VERTICAL
+}) => {
+  const [activeTab, toggleActiveTab] = useState(tabsConfig.tabs[0].label);
+
+  const createTabs = (tabConfig, activeTab) => {
+    return tabConfig.tabs.map(tab => {
+      return (
+        <Tab
+          activeTab={activeTab}
+          key={tab.label}
+          label={tab.label}
+          setActiveTab={() => toggleActiveTab(tab.label)}
+        />
+      );
+    });
+  };
+
+  const showHorozontal = (tabsConfig, activeTab) => {
+    return (
+      <Cluster justify={"space-around"}>
+        {createTabs(tabsConfig, activeTab)}
+      </Cluster>
+    );
+  };
+
+  const showVertical = (tabsConfig, activeTab) => {
+    return <Stack>{createTabs(tabsConfig, activeTab)}</Stack>;
+  };
+
+  return (
+    <Box className="tabs">
+      <Box className="tab-list">
+        {tabsDisplayMode == HORIZONTAL
+          ? showHorozontal(tabsConfig, activeTab)
+          : showVertical(tabsConfig, activeTab)}
+      </Box>
+      <Box className="tab-content">
+        <Box>
+          {tabsConfig.tabs.map(tab => {
+            if (tab.label !== activeTab) return undefined;
+            return tab.content;
+          })}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default themeComponent(Tabs, "NavigationTab", fallbackValues);

package/src/components/molecules/tabs/Tabs.stories.js

@@ -0,0 +1,241 @@
+import React from "react";
+import { createStore } from "redux";
+import Tabs from "./Tabs";
+
+import page from "../../../../.storybook/page";
+import Text from "../../atoms/text";
+
+import { createFormState, onlyIntegers, required } from "redux-freeform";
+import DisplayBox from "../../atoms/display-box";
+import { Box } from "../../atoms/layouts";
+
+// Including commented out configs as a preliminary work for
+// https://citybase.atlassian.net/browse/KCORE-2973
+// https://citybase.atlassian.net/browse/KCORE-2974
+// https://citybase.atlassian.net/browse/KCORE-2975
+
+const ButtonTest = () => (
+  <DisplayBox>
+    <Text>Test Button Clicks</Text>
+    <Box>
+      <button onClick={() => console.log("BUTTON TEST;")}>Click me</button>
+    </Box>
+  </DisplayBox>
+);
+
+//const creditCardFormConfig = {
+//  amount: {
+//    defaultValue: "100.00",
+//    validators: [required()]
+//  }
+//};
+
+const checkFormConfig = {
+  amount: {
+    defaultValue: "100.00",
+    validators: [required()]
+  },
+  name: {
+    validators: [required()]
+  },
+  accountNumber: {
+    validators: [onlyIntegers()]
+  },
+  routingNumber: {
+    validators: [onlyIntegers()]
+  },
+  checkType: {
+    defaultValue: "Personal"
+  }
+};
+
+//const cashFormConfig = {
+//  amount: {
+//    defaultValue: "100.00",
+//    validators: [required()]
+//  }
+//};
+//
+//const MyCreditCardForm = ({ actions, fields }) => {
+//  return (
+//    <div>
+//      {fields.amount.hasErrors && fields.amount.errors.includes(required.error)
+//        ? "Amount"
+//        : "Amount"}
+//      <input
+//        value={fields.amount.rawValue}
+//        onChange={evt => actions.fields.amount.set(evt.target.value)}
+//        type="text"
+//      />
+//    </div>
+//  );
+//};
+
+const MyCheckForm = ({ actions, fields }) => (
+  <div>
+    {fields.amount.hasErrors && fields.amount.errors.includes(required.error)
+      ? "AmountError"
+      : "Amount"}
+    <input
+      value={fields.amount.rawValue}
+      onChange={evt => actions.fields.amount.set(evt.target.value)}
+      type="text"
+    />
+    {fields.name.hasErrors && fields.name.errors.includes(required.error)
+      ? "Name Error"
+      : "Name"}
+    <input
+      value={fields.name.rawValue}
+      onChange={evt => actions.fields.name.set(evt.target.value)}
+      type="text"
+    />
+    {fields.accountNumber.hasErrors &&
+    fields.accountNumber.errors.includes(required.error)
+      ? "Account Number Error"
+      : "Account Number"}
+    <input
+      value={fields.accountNumber.rawValue}
+      onChange={evt => actions.fields.accountNumber.set(evt.target.value)}
+      type="text"
+    />
+    {fields.routingNumber.hasErrors &&
+    fields.routingNumber.errors.includes(required.error)
+      ? "Routing Number Error"
+      : "Routing Number"}
+    <input
+      value={fields.routingNumber.rawValue}
+      onChange={evt => actions.fields.routingNumber.set(evt.target.value)}
+      type="text"
+    />
+    {fields.checkType.hasErrors &&
+    fields.checkType.errors.includes(required.error)
+      ? "Check Type Error"
+      : "Check Type"}
+    <input
+      value={fields.checkType.rawValue}
+      onChange={evt => actions.fields.checkType.set(evt.target.value)}
+      type="text"
+    />
+  </div>
+);
+
+//const MyCashForm = ({ actions, fields }) => (
+//  <div>
+//    {fields.amount.hasErrors && fields.amount.errors.includes(required.error)
+//      ? "Amount Error"
+//      : "Amount"}
+//    <input
+//      value={fields.amount.rawValue}
+//      onChange={evt => actions.fields.amount.set(evt.target.value)}
+//      type="text"
+//    />
+//  </div>
+//);
+
+//const {
+//  reducer: cardReducer,
+//  mapStateToProps: cardMapStateToProps,
+//  mapDispatchToProps: cardMapDispatchToProps
+//} = createFormState(creditCardFormConfig);
+
+const {
+  reducer: checkReducer,
+  mapStateToProps: checkMapStateToProps,
+  mapDispatchToProps: checkMapDispatchToProps
+} = createFormState(checkFormConfig);
+
+//const {
+//  reducer: cashReducer,
+//  mapStateToProps: cashMapStateToProps,
+//  mapDispatchToProps: cashMapDispatchToProps
+//} = createFormState(cashFormConfig);
+
+//const cardStore = createStore(
+//  cardReducer,
+//  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+//);
+
+const checkStore = createStore(
+  checkReducer,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+);
+
+//const cashStore = createStore(
+//  cashReducer,
+//  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+//);
+
+//const tabsConfig = {
+//  tabs: [
+//    {
+//      label: 'Credit Card',
+//      active: true,
+//      content: MyCreditCardForm(
+//        {...cardMapStateToProps(cardStore.getState())},
+//        {...cardMapDispatchToProps(cardStore.dispatch)}
+//      )
+//    },
+//    {
+//      label: 'Check',
+//      active: true,
+//      content: MyCheckForm(
+//        {...checkMapStateToProps(checkStore.getState())},
+//        {...checkMapDispatchToProps(checkStore.dispatch)}
+//      )
+//    },
+//    {
+//      true: 'Cash',
+//      active: true,
+//      content: MyCashForm(
+//        {...cashMapStateToProps(cashStore.getState())},
+//        {...cashMapDispatchToProps(cashStore.dispatch)}
+//      )
+//    }
+//  ]
+//};
+
+const LOREM = `
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum.
+`;
+
+const tabsConfig = {
+  tabs: [
+    {
+      label: "Credit Card",
+      active: true,
+      content: <Text>{LOREM}</Text>
+    },
+    {
+      label: "Check",
+      active: true,
+      content: MyCheckForm(
+        { ...checkMapStateToProps(checkStore.getState()) },
+        { ...checkMapDispatchToProps(checkStore.dispatch) }
+      )
+    },
+    {
+      label: "Cash",
+      active: true,
+      content: <ButtonTest></ButtonTest>
+    }
+  ]
+};
+
+const HORIZONTAL = "horizontal";
+
+export const tabs = () => (
+  <Tabs tabsConfig={tabsConfig} tabsDisplayMode={HORIZONTAL} />
+);
+
+const story = page({
+  title: "Components|Molecules/Tabs",
+  Component: Tabs
+});
+
+export default story;

package/src/components/molecules/tabs/Tabs.theme.js

@@ -0,0 +1,9 @@
+const activeTabBackground = "#FFFFFF";
+const activeTabAccent = "#15749D";
+const activeTabHover = "#B8D5E1";
+
+export const fallbackValues = {
+  activeTabBackground,
+  activeTabAccent,
+  activeTabHover
+};

package/src/components/molecules/tabs/index.js

@@ -0,0 +1,3 @@
+import Tabs from "./Tabs";
+
+export default Tabs;