@thecb/components 10.12.3-beta.0 → 10.12.3

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

@@ -1,149 +1,241 @@
 import React from "react";
-import { Box, Center, Cover } from "../../atoms/layouts";
-import Tabs from "./Tabs";
-import { fn } from "@storybook/test";
-import PaymentFormCard from "../payment-form-card";
-import * as PaymentFormCardState from "../payment-form-card/PaymentFormCard.state";
-import { connect, Provider } from "react-redux";
 import { createStore } from "redux";
+import Tabs from "./Tabs";
 
-const store = createStore(
-  PaymentFormCardState.reducer,
-  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+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 ConnectedPaymentFormCard = connect(
-  PaymentFormCardState.mapStateToProps,
-  PaymentFormCardState.mapDispatchToProps
-)(PaymentFormCard);
+//const creditCardFormConfig = {
+//  amount: {
+//    defaultValue: "100.00",
+//    validators: [required()]
+//  }
+//};
 
-const meta = {
-  title: "Molecules/Tabs",
-  component: Tabs,
-  parameters: {
-    layout: "centered"
+const checkFormConfig = {
+  amount: {
+    defaultValue: "100.00",
+    validators: [required()]
   },
-  tags: ["!autodocs"],
-  args: {
-    tabsConfig: undefined,
-    tabsDisplayMode: undefined
+  name: {
+    validators: [required()]
   },
-  argTypes: {
-    tabsConfig: {
-      description:
-        "Object containing an array of tabs to show, along with their label, active state, and associated content",
-      table: {
-        type: { summary: "object" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    tabsDisplayMode: {
-      description:
-        "Whether to display tabs in horizontal or vertical configuration. Use 'horizontal' for horitzontal config. All other values will result in vertical configuration.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    }
+  accountNumber: {
+    validators: [onlyIntegers()]
   },
-  decorators: [
-    Story => (
-      <Provider store={store}>
-        <Story />
-      </Provider>
-    )
-  ]
-};
-
-export default meta;
-
-export const HoriztonalTabs = {
-  args: {
-    tabsConfig: {
-      tabs: [
-        {
-          label: "Credit Card",
-          active: true,
-          content: (
-            <ConnectedPaymentFormCard
-              variant="checkout"
-              hideTitle
-              hideZipCode
-              fields={{
-                ...PaymentFormCardState.mapStateToProps(store.getState())
-              }}
-              {...PaymentFormCardState.mapDispatchToProps(store.dispatch)}
-              fees={{
-                label: "Service Fee",
-                type: "FLAT",
-                value: 0
-              }}
-              showWalletCheckbox
-              saveToWallet={fn()}
-              walletCheckboxMarked
-              termsContent={"terms"}
-              termsTitle={"Terms and Conditions"}
-            />
-          )
-        },
-        {
-          label: "ACH Payment",
-          active: true,
-          content: (
-            <Box minWidth="500px" minHeight="400px">
-              <Center>
-                <Cover singleChild>ACH Payment Form</Cover>
-              </Center>
-            </Box>
-          )
-        }
-      ]
-    },
-    tabsDisplayMode: "horizontal"
+  routingNumber: {
+    validators: [onlyIntegers()]
+  },
+  checkType: {
+    defaultValue: "Personal"
   }
 };
 
-export const VerticalTabs = {
-  args: {
-    tabsConfig: {
-      tabs: [
-        {
-          label: "Credit Card",
-          active: true,
-          content: (
-            <ConnectedPaymentFormCard
-              variant="checkout"
-              hideTitle
-              hideZipCode
-              fields={{
-                ...PaymentFormCardState.mapStateToProps(store.getState())
-              }}
-              {...PaymentFormCardState.mapDispatchToProps(store.dispatch)}
-              fees={{
-                label: "Service Fee",
-                type: "FLAT",
-                value: 0
-              }}
-              showWalletCheckbox
-              saveToWallet={fn()}
-              walletCheckboxMarked
-              termsContent={"terms"}
-              termsTitle={"Terms and Conditions"}
-            />
-          )
-        },
-        {
-          label: "ACH Payment",
-          active: true,
-          content: (
-            <Box minWidth="500px" minHeight="400px">
-              <Center>
-                <Cover singleChild>ACH Payment Form</Cover>
-              </Center>
-            </Box>
-          )
-        }
-      ]
+//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/toast-notification/ToastNotification.stories.js

@@ -0,0 +1,105 @@
+import React, { useEffect } from "react";
+import ToastNotification from "./ToastNotification";
+import page from "../../../../.storybook/page";
+import { useToastNotification } from "../../../hooks";
+import { ToastVariants } from "../../../types/common";
+import { text } from "@storybook/addon-knobs";
+
+const groupId = "props";
+
+export const toastNotificationSuccess = () => {
+  const {
+    isToastOpen,
+    toastVariant,
+    toastMessage,
+    showToast,
+    hideToast
+  } = useToastNotification();
+
+  useEffect(() => {
+    showToast({
+      message: "Success!",
+      variant: ToastVariants.SUCCESS
+    });
+  }, []);
+
+  return (
+    <ToastNotification
+      variant={toastVariant}
+      message={toastMessage}
+      toastOpen={isToastOpen}
+      closeToastNotification={() => hideToast()}
+      role={text("role", "alert", groupId)}
+      minWidth={text("minWidth", null, groupId)}
+      maxWidth={text("maxWidth", null, groupId)}
+    />
+  );
+};
+
+toastNotificationSuccess.storyName = "Success Toast";
+
+export const toastNotificationError = () => {
+  const {
+    isToastOpen,
+    toastVariant,
+    toastMessage,
+    showToast,
+    hideToast
+  } = useToastNotification();
+
+  useEffect(() => {
+    showToast({
+      message: "An error occurred",
+      variant: ToastVariants.ERROR
+    });
+  }, []);
+
+  return (
+    <ToastNotification
+      variant={toastVariant}
+      message={toastMessage}
+      toastOpen={isToastOpen}
+      closeToastNotification={() => hideToast()}
+      role={text("role", "alert", groupId)}
+      minWidth={text("minWidth", null, groupId)}
+      maxWidth={text("maxWidth", null, groupId)}
+    />
+  );
+};
+toastNotificationError.storyName = "Error Toast";
+
+export const toastNotificationNoAutoHide = () => {
+  const {
+    isToastOpen,
+    toastMessage,
+    showToast,
+    hideToast
+  } = useToastNotification({ timeout: 0 });
+
+  useEffect(() => {
+    showToast({
+      message: "Success!",
+      variant: ToastVariants.SUCCESS
+    });
+  }, []);
+
+  return (
+    <ToastNotification
+      message={toastMessage}
+      toastOpen={isToastOpen}
+      closeToastNotification={() => hideToast()}
+      role={text("role", "alert", groupId)}
+      minWidth={text("minWidth", null, groupId)}
+      maxWidth={text("maxWidth", null, groupId)}
+    />
+  );
+};
+
+toastNotificationNoAutoHide.storyName = "No auto-hide";
+
+const story = page({
+  title: "Components|Molecules/ToastNotification",
+  Component: ToastNotification
+});
+
+export default story;

package/src/hooks/use-outside-click/index.js

@@ -18,12 +18,11 @@ const useOutsideClickHook = handler => {
       if (ref.current && !ref.current.contains(e.target)) {
         handler();
       }
+    };
 
-      document.addEventListener("click", handleOutsideClick, true);
-
-      return () => {
-        document.removeEventListener("click", handleOutsideClick, true);
-      };
+    document.addEventListener("click", handleOutsideClick, true);
+    return () => {
+      document.removeEventListener("click", handleOutsideClick, true);
     };
   }, [ref]);
 

package/src/util/index.js

@@ -4,7 +4,6 @@ import * as theme from "./themeUtils";
 import useFocusInvalidInput from "./focusFirstInvalidInputHook";
 import useOutsideClick from "../hooks/use-outside-click";
 import useToastNotification from "../hooks/use-toast-notification";
-import useLogoutTimers from "./idleTimerUtils";
 
 export {
   formats,
@@ -12,6 +11,5 @@ export {
   theme,
   useFocusInvalidInput,
   useOutsideClick,
-  useToastNotification,
-  useLogoutTimers
+  useToastNotification
 };

package/src/components/atoms/alert/Alert.mdx

@@ -1,19 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as AlertStories from './Alert.stories.js';
-
-<Meta of={AlertStories} />
-
-<Title />
-
-The Alert component is a fully accesible element to provide notifications to a user. Its features include:
-
-- Multiple types: info, warn, error, success
-- Ability to allow user to dismiss the alert
-- Default support of heading text, body text, and customizable children elements
-- Highly customizable content via textOverride
-- Accessibility props for aria-role, aria-atomic, and aria-live
-
-<div style={{ marginBottom: "2em"}}>
-    <Story />
-</div>

package/src/components/atoms/badge/Badge.mdx

@@ -1,27 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as BadgeStories from './Badge.stories.js';
-
-<Meta of={BadgeStories} />
-
-<Title />
-
-The Badge component is a small component used to provide information in the form of an icon and text string to users at a glance. Badges can be used in tables, as tags, in UI controls, or anywhere display of bite-sized information is needed.
-
-All themes use the same badge variants (and colors) as displayed here, but custom badges can be added to theme patterns in FCS if desired.
-
-Badges have these properties:
-
-- label (required)
-- Icon (optional)
-- variant (optional, default is "success")
-- iconOnLeft (optional, default is "true")
-
-Badge theme variants control *only* the background color of the badge and the color of its text. Icon color is either passed in as a prop to the Icon component (ideal), or controlled by the Icon themeing.
-
-Note: if using the second approach, it is possible for the color of badge text and icon to diverge, possibly in undersible ways, unless special variants are added to the Icon themes in the FCS theme patterns. See the "Payment History" badge - try changing the theme in storybook - for an example of this.
-
-
-<div style={{ marginBottom: "2em"}}>
-    <Story />
-</div>

package/src/components/atoms/breadcrumb/Breadcrumb.mdx

@@ -1,21 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as BreadcrumbStories from './Breadcrumb.stories.js';
-
-<Meta of={BreadcrumbStories} />
-
-<Title />
-
-Breadcrumb is a themeable component that generates a horizontal navigation with links separated by chevron icons.
-
-The component only takes on prop: `breadcrumbsList`, which must be an array of objects with the following properties:
-
-- `linkText`: string for the link's text
-- `linkDestination`: string or react-router path for the link's URL
-- `isActive`: boolean, changes the style and cursor of the link to represent the current page
-
-Breadcrumb uses the InternalLink component for each crumb, which uses the Link component from react-router-dom.
-
-<Story />
-
-<Controls />

package/src/components/atoms/button-with-link/ButtonWithLink.mdx

@@ -1,21 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as ButtonWithLinkStories from './ButtonWithLink.stories.js';
-
-<Meta of={ButtonWithLinkStories} />
-
-<Title />
-
-`ButtonWithLink` wraps a [ButtonWithAction](?path=/docs/atoms-buttonwithaction--docs) component with either a `ExternalLink` or `InternalLink` component, unless the `disabled` prop is `true`, then it returns just the disabled `ButtonWithAction`.
-
-Any additional props not specified in the component params will be passed down to the underlying `ButtonWithAction` component, including the `text` prop, which will be used as the text for the button.
-
-The underlying `ButtonWithAction` component is themeable, and the variant can be changed by passing a valid `variant` value to `ButtonWithLink`.
-
-`extraStyles` will be passed down to the `ButtonWithAction`, while `linkExtraStyles` are passed to the `ExternalLink` or `InternalLink` component.
-
-`fileLink` forces the use of the `ExternalLink` component, even if the value of `url` is not an full external link with a valid URL prefix like `http://`.
-
-<Story />
-
-<Controls />

package/src/components/atoms/card/Card.mdx

@@ -1,41 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as CardStories from './Card.stories.js';
-
-<Meta of={CardStories} />
-
-<Title />
-
-The Card component is a generic wrapper to create "cards" of information. A Card can contain a header, title, body text, images, and custom controls. Providing strings for header/title/body text as props results in default styling, but the component is very flexible and can be customized to display virtually any information.
-
-Cards can take these properties to display content:
-
-- headerText (optional)
-- titleText (optional)
-- text (optional)
-- imgSrc (optional)
-- Image (optional)
-- children
-
-In addition to the content props, Cards also offer certain props for controlling the style and display of provided information:
-
-- headerAs (optional, default "h2")
-- headerVariant (optional, default "small")
-- imgHeight (optional, default "150px")
-- imgObjectFit (optional, default "none")
-- imgAltText (required for proper accessibility)
-- titleVariant (optional, default "small")
-- padding (optioonal, default "24px")
-- width (optional min-width, default "276px")
-
-By default, the width prop is the Card's _minimum_ width. The card will scale to match its width to the width of its parent container. If you wish to cap the Card's with, use the extraStyles prop like so:
-
-```
-    <Card extraStyles={`& { max-width: 450px };`} />
-```
-
-When using a Card to display an image there are two options. Either provide a URL string using the imgSrc prop, or provide a React Component using the Image prop. These are mutually exclusive options -- an image provided using the Image prop will only be displayed if imgSrc is undefined.
-
-<div style={{ marginBottom: "2em"}}>
-    <Story />
-</div>