@thecb/components 4.3.0 → 4.3.3

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;