@thecb/components 10.12.6 → 11.0.0

package/src/components/molecules/popover/Popover.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as PopoverStories from './Popover.stories.js';
+
+<Meta of={PopoverStories} />
+
+<Title />
+
+The Popover is a fully accessible widget to display additional information when a user hovers over a specified trigger element. The trigger can either be text supplied using the `triggerText` prop, or a custom Icon component supplied using the `icon` prop.
+
+The Popover can be positioned to appear anywhere around the trigger element using the position props. Content and style of the Popover are customizable.
+
+<Controls />
+
+<Story />

package/src/components/molecules/popover/Popover.stories.js

@@ -0,0 +1,220 @@
+import Popover from "./Popover";
+import AccountsAddIcon from "../../atoms/icons/AccountsAddIcon";
+import {
+  ATHENS_GREY,
+  CHARADE_GREY,
+  CURIOUS_BLUE,
+  ONAHAU_BLUE
+} from "../../../constants/colors";
+
+export default {
+  title: "Molecules/Popover",
+  component: Popover,
+  tags: ["!autodocs"],
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  args: {
+    triggerText: "",
+    content: "",
+    hasIcon: false,
+    icon: undefined,
+    iconHelpText: "",
+    popoverID: 0,
+    popoverFocus: false,
+    extraStyles: undefined,
+    textExtraStyles: undefined,
+    minWidth: "250px",
+    maxWidth: "300px",
+    height: "auto",
+    position: undefined,
+    arrowPosition: undefined,
+    arrowDirection: "down",
+    transform: "none",
+    buttonExtraStyles: undefined,
+    backgroundColor: "white",
+    borderColor: "rgba(255, 255, 255, 0.85)",
+    popoverExtraStyles: undefined
+  },
+  argTypes: {
+    triggerText: {
+      description:
+        "Text element that popover is anchored to. Only used if hasIcon is false.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    content: {
+      description: "Content of the popover",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    hasIcon: {
+      description:
+        "Whether an icon is the trigger for the popover, instead of text",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    icon: {
+      description:
+        "The icon component to display. Requires hasIcon to be true.",
+      table: {
+        type: { summary: "React Component" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    iconHelpText: {
+      description: "Accessible description of the icon",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    popoverID: {
+      description:
+        "ID value for popover. Use if displaying multiple popovers on the same page.",
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: 0 }
+      }
+    },
+    popoverFocus: {
+      description: "Whether focus should transfer to popover when it opens",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    extraStyles: {
+      description:
+        "Extra CSS styles to apply to the wrapper component around the trigger and popover",
+      table: {
+        type: { summary: "CSS string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    textExtraStyles: {
+      description: "Extra styles to apply to the text trigger of the popover",
+      table: {
+        type: { summary: "CSS string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    minWidth: {
+      description: "Minimum width of the popover component",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "250px" }
+      }
+    },
+    maxWidth: {
+      description: "Maximum width of the popover component",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "300px" }
+      }
+    },
+    height: {
+      description: "Height of the popover component. Default sizes to content.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "auto" }
+      }
+    },
+    position: {
+      description:
+        "Object containing values for top/right/bottom/left position of popover relative to trigger",
+      table: {
+        type: { summary: "Object" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    arrowPosition: {
+      description:
+        "Object containing values for arrowTop/arrowRight/arrowBottom/arrowLeft position of arrow on popover",
+      table: {
+        type: { summary: "Object" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    arrowDirection: {
+      description: "Direction the popover arrow points",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "down" }
+      }
+    },
+    transform: {
+      description: "CSS transform to apply to popover",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    buttonExtraStyles: {
+      description:
+        "Extra styles to apply to the button that wraps popover trigger",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    backgroundColor: {
+      description: "Background color of the popover",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "white" }
+      }
+    },
+    borderColor: {
+      description: "Color of the popover arrow",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "rgba(255, 255, 255, 0.85)" }
+      }
+    },
+    popoverExtraStyles: {
+      description: "Extra styles to apply to the popover",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  }
+};
+
+export const BasicPopover = {
+  args: {
+    triggerText: "Help",
+    content:
+      "Contact support at 1-800-CTY-VILL for help with your account balance."
+  }
+};
+
+export const IconPopover = {
+  args: {
+    hasIcon: true,
+    icon: AccountsAddIcon,
+    content: "Search for and add a new account to your profile",
+    transform: "skew(15deg, 15deg);"
+  }
+};
+
+export const UnderneathPopover = {
+  args: {
+    triggerText: "What's this?",
+    content: "Popovers can be positioned anywhere around the trigger",
+    position: { top: "50px", right: "50%", left: "50%" },
+    arrowPosition: { arrowRight: "85%", arrowBottom: "100%" },
+    height: "75px",
+    arrowDirection: "up",
+    backgroundColor: `${ONAHAU_BLUE}`,
+    borderColor: `${CURIOUS_BLUE}`
+  }
+};

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

@@ -0,0 +1,17 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as TabsStories from './Tabs.stories.js';
+
+<Meta of={TabsStories} />
+
+<Title />
+
+Currently used in POS, the Tabs component is a small widget that takes a configuration object and creates a tabbable toggle between arbitrary pieces of content.
+
+The example displays a form on one tab and basic text on the other, but there is no limit to the content that can be displayed inside of the tabs. Tabs can be stacked horizontally or vertically on top of the content.
+
+<Controls />
+
+<div style={{ marginBottom: "2em"}}>
+    <Story />
+</div>

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

@@ -1,241 +1,149 @@
 import React from "react";
-import { createStore } from "redux";
+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 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 store = createStore(
+  PaymentFormCardState.reducer,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );
 
-//const creditCardFormConfig = {
-//  amount: {
-//    defaultValue: "100.00",
-//    validators: [required()]
-//  }
-//};
+const ConnectedPaymentFormCard = connect(
+  PaymentFormCardState.mapStateToProps,
+  PaymentFormCardState.mapDispatchToProps
+)(PaymentFormCard);
 
-const checkFormConfig = {
-  amount: {
-    defaultValue: "100.00",
-    validators: [required()]
-  },
-  name: {
-    validators: [required()]
+const meta = {
+  title: "Molecules/Tabs",
+  component: Tabs,
+  parameters: {
+    layout: "centered"
   },
-  accountNumber: {
-    validators: [onlyIntegers()]
+  tags: ["!autodocs"],
+  args: {
+    tabsConfig: undefined,
+    tabsDisplayMode: undefined
   },
-  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>
+  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 }
+      }
     },
-    {
-      label: "Check",
-      active: true,
-      content: MyCheckForm(
-        { ...checkMapStateToProps(checkStore.getState()) },
-        { ...checkMapDispatchToProps(checkStore.dispatch) }
-      )
-    },
-    {
-      label: "Cash",
-      active: true,
-      content: <ButtonTest></ButtonTest>
+    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 }
+      }
     }
+  },
+  decorators: [
+    Story => (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    )
   ]
 };
 
-const HORIZONTAL = "horizontal";
-
-export const tabs = () => (
-  <Tabs tabsConfig={tabsConfig} tabsDisplayMode={HORIZONTAL} />
-);
-
-const story = page({
-  title: "Components|Molecules/Tabs",
-  Component: Tabs
-});
+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"
+  }
+};
 
-export default story;
+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>
+          )
+        }
+      ]
+    }
+  }
+};

package/src/components/molecules/toast-notification/Toast.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as ToastStories from './Toast.stories.js';
+
+<Meta of={ToastStories} />
+
+<Title />
+
+The Toast is a fully accessible widget used to notify users of state changes and other important information. The Toast comes with the ability to properly notify users of screen reading devices by using the `screenReaderMessage` and `showScreenReaderMessage` props. By default the message uses the `aria-live` behavior of "polite", which tells the assistive technology to wait for a lull to notify the user, such as when they finish typing or after another sentence is read.
+
+If you are using a toast mesasge to notify users about very important, time-sensitive information, you can change the value of the `ariaLive` prop to "assertive" to force the screen reader message to be read as soon as the toast notification is rendered on the page.
+
+<Controls />
+
+<Story />