@thecb/components 4.2.8 → 4.3.1

package/.tool-versions

@@ -1 +1 @@
-nodejs 10.15.3
+nodejs 15.5.1

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;
@@ -34466,6 +34466,12 @@ const set$2 = fieldName => value => ({
 const CLEAR = "form/CLEAR";
 const clear = () => ({ type: CLEAR });
 
+const ADD_VALIDATOR = "field/ADD_VALIDATOR";
+const addValidator = fieldName => validator => ({
+  type: ADD_VALIDATOR,
+  payload: { fieldName, validator }
+});
+
 const createFormReducer = formConfig => (
   state = createInitialState(formConfig),
   action
@@ -34497,6 +34503,23 @@ const createFormReducer = formConfig => (
       });
     case CLEAR:
       return createInitialState(formConfig);
+    case ADD_VALIDATOR: 
+      const fieldWithOverride = action.payload.fieldName;
+      const newValidator = action.payload.validator;
+      
+      return produce(state, draftState => {
+        draftState[fieldWithOverride].validators.push(newValidator);
+        const fields = Object.entries(draftState);
+        for (let entry of fields) {
+          let fieldName = entry[0];
+          let field = entry[1];
+          let errors = computeErrors(fieldName, draftState);
+          let dirty = field.dirty;
+          draftState[fieldName].errors = errors;
+          draftState[fieldName].dirty = dirty;
+          draftState[fieldName].hasErrors = errors.length > 0;
+        }
+      });
     default:
       return state;
   }
@@ -34515,7 +34538,8 @@ const createMapDispatchToProps = formConfig => {
     const keys = Object.keys(formConfig);
     for (let fieldName of keys) {
       dispatchObj.fields[fieldName] = {
-        set: value => dispatch(set$2(fieldName)(value))
+        set: value => dispatch(set$2(fieldName)(value)),
+        addValidator: validator => dispatch(addValidator(fieldName)(validator))
       };
     }
     dispatchObj.form = { clear: () => dispatch(clear()) };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.2.8",
+  "version": "4.3.1",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -80,6 +80,6 @@
     "ramda": "^0.27.0",
     "react-aria-modal": "^4.0.0",
     "react-pose": "^4.0.10",
-    "redux-freeform": "^5.0.0"
+    "redux-freeform": "^5.0.1"
   }
 }

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