@thecb/components 2.2.0

package/src/components/molecules/collapsible-section/CollapsibleSection.js

@@ -0,0 +1,126 @@
+import React from "react";
+import { fallbackValues } from "./CollapsibleSection.theme";
+import { AnimatePresence } from "framer-motion";
+import { themeComponent } from "../../../util/themeUtils";
+import Heading from "../../atoms/heading";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+import { Box, Cluster, Stack, Motion } from "../../atoms/layouts";
+import { IconChevron } from "../../../deprecated/icons";
+import { noop } from "../../../util/general";
+
+const CollapsibleSection = ({
+  isOpen,
+  toggleSection,
+  themeValues,
+  isMobile,
+  supportsTouch,
+  title,
+  initiallyOpen = true,
+  openHeight = "auto",
+  children,
+  customTitle = false
+}) => {
+  const handleKeyDown = e => {
+    if (e.keyCode === 13) {
+      toggleSection();
+    }
+  };
+
+  const numChildren = typeof children === "Array" ? children.length : 1;
+
+  const wrapper = {
+    open: {
+      height: openHeight,
+      transition: {
+        duration: 0.3,
+        ease: [0.04, 0.62, 0.23, 0.98],
+        staggerChildren: 0.15
+      }
+    },
+    closed: {
+      height: 0,
+      transition: {
+        duration: 0.3,
+        ease: [0.04, 0.62, 0.23, 0.98],
+        staggerChildren: 0.15,
+        staggerDirection: -1,
+        delay: numChildren * 0.35
+      }
+    }
+  };
+
+  const icon = {
+    open: {
+      rotate: "90deg"
+    },
+    closed: {
+      rotate: "0deg"
+    }
+  };
+
+  return (
+    <Motion
+      padding="0"
+      tabIndex="0"
+      onKeyDown={handleKeyDown}
+      focusStyles={themeValues.focusStyles}
+      animate={isOpen ? "open" : "closed"}
+      positionTransition
+    >
+      <Stack childGap={isOpen ? "0.5rem" : "0rem"}>
+        <Box
+          padding="0"
+          background={themeValues.headingBackgroundColor}
+          onClick={isMobile && supportsTouch ? noop : toggleSection}
+          onTouchEnd={isMobile && supportsTouch ? toggleSection : noop}
+          key="header"
+        >
+          <Cluster justify="space-between" align="center">
+            {customTitle ? (
+              <Box width="calc(100% - 36px)" padding="0px">
+                {title}
+              </Box>
+            ) : (
+              <Heading
+                variant="h6"
+                weight={FONT_WEIGHT_SEMIBOLD}
+                color={themeValues.titleColor}
+                aria-level="3"
+              >
+                {title}
+              </Heading>
+            )}
+            <Motion
+              variants={icon}
+              style={{ display: "flex", alignItems: "center" }}
+            >
+              <IconChevron />
+            </Motion>
+          </Cluster>
+        </Box>
+        <AnimatePresence initial={false}>
+          {isOpen && (
+            <Motion
+              padding="0"
+              background={themeValues.bodyBackgroundColor}
+              key="content"
+              positionTransition
+              initial={initiallyOpen ? "open" : "closed"}
+              exit="closed"
+              variants={wrapper}
+              extraStyles={`transform-origin: 100% 0; overflow-y: hidden;`}
+            >
+              {children}
+            </Motion>
+          )}
+        </AnimatePresence>
+      </Stack>
+    </Motion>
+  );
+};
+
+export default themeComponent(
+  CollapsibleSection,
+  "CollapsibleSection",
+  fallbackValues
+);

package/src/components/molecules/collapsible-section/CollapsibleSection.theme.js

@@ -0,0 +1,11 @@
+const titleColor = "#292A33";
+const headingBackgroundColor = "transparent";
+const bodyBackgroundColor = "transparent";
+const focusStyles = `outline: none;`;
+
+export const fallbackValues = {
+  titleColor,
+  headingBackgroundColor,
+  bodyBackgroundColor,
+  focusStyles
+};

package/src/components/molecules/collapsible-section/index.js

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

package/src/components/molecules/edit-name-form/EditNameForm.js

@@ -0,0 +1,51 @@
+import React, { useEffect } from "react";
+import { required } from "redux-freeform";
+import {
+  FormInput,
+  FormContainer,
+  FormInputColumn
+} from "../../atoms/form-layouts";
+
+const EditNameForm = ({
+  fields,
+  actions,
+  clearOnDismount,
+  showErrors,
+  handleSubmit
+}) => {
+  if (clearOnDismount) {
+    useEffect(() => () => actions.form.clear(), []);
+  }
+
+  const firstNameErrorMessages = {
+    [required.error]: "First name is required"
+  };
+  const lastNameErrorMessages = {
+    [required.error]: "Last name is required"
+  };
+
+  return (
+    <FormContainer role="form" aria-label="Edit name">
+      <FormInputColumn>
+        <FormInput
+          labelTextWhenNoError="First Name"
+          errorMessages={firstNameErrorMessages}
+          field={fields.firstName}
+          fieldActions={actions.fields.firstName}
+          showErrors={showErrors}
+          onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+        />
+        <FormInput
+          labelTextWhenNoError="Last Name"
+          errorMessages={lastNameErrorMessages}
+          field={fields.lastName}
+          fieldActions={actions.fields.lastName}
+          showErrors={showErrors}
+          onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+        />
+      </FormInputColumn>
+    </FormContainer>
+  );
+};
+
+export default EditNameForm;

package/src/components/molecules/edit-name-form/EditNameForm.state.js

@@ -0,0 +1,14 @@
+import { createFormState, required } from "redux-freeform";
+
+const formConfig = {
+  firstName: {
+    validators: [required()]
+  },
+  lastName: {
+    validators: [required()]
+  }
+};
+
+export const { reducer, mapStateToProps, mapDispatchToProps } = createFormState(
+  formConfig
+);

package/src/components/molecules/edit-name-form/index.js

@@ -0,0 +1,11 @@
+import EditNameForm from "./EditNameForm";
+import {
+  reducer,
+  mapStateToProps,
+  mapDispatchToProps,
+} from "./EditNameForm.state";
+
+EditNameForm.reducer = reducer;
+EditNameForm.mapStateToProps = mapStateToProps;
+EditNameForm.mapDispatchToProps = mapDispatchToProps;
+export default EditNameForm;

package/src/components/molecules/email-form/EmailForm.js

@@ -0,0 +1,55 @@
+import React, { useEffect } from "react";
+import { required, matchesField, isProbablyEmail } from "redux-freeform";
+import {
+  FormInput,
+  FormContainer,
+  FormInputColumn
+} from "../../atoms/form-layouts";
+
+const EmailForm = ({
+  variant = "default",
+  clearOnDismount,
+  fields,
+  actions,
+  showErrors,
+  handleSubmit
+}) => {
+  if (clearOnDismount) {
+    useEffect(() => () => actions.form.clear(), []);
+  }
+  const emailFieldErrorMessages = {
+    [required.error]: "Email is required",
+    [isProbablyEmail.error]: "Invalid email address"
+  };
+  const confirmEmailFieldErrorMessages = {
+    [matchesField.error]: "Confirm email must match email",
+    [required.error]: "Confirm email must match email"
+  };
+
+  return (
+    <FormContainer variant={variant} role="form" aria-label="Email">
+      <FormInputColumn>
+        <FormInput
+          labelTextWhenNoError="Email"
+          errorMessages={emailFieldErrorMessages}
+          type="email"
+          field={fields.email}
+          fieldActions={actions.fields.email}
+          showErrors={showErrors}
+          onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+        />
+        <FormInput
+          labelTextWhenNoError="Confirm email"
+          errorMessages={confirmEmailFieldErrorMessages}
+          type="email"
+          field={fields.confirmEmail}
+          fieldActions={actions.fields.confirmEmail}
+          showErrors={showErrors}
+          onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+        />
+      </FormInputColumn>
+    </FormContainer>
+  );
+};
+
+export default EmailForm;

package/src/components/molecules/email-form/EmailForm.state.js

@@ -0,0 +1,19 @@
+import {
+  createFormState,
+  required,
+  matchesField,
+  isProbablyEmail
+} from "redux-freeform";
+
+const formConfig = {
+  email: {
+    validators: [required(), isProbablyEmail()]
+  },
+  confirmEmail: {
+    validators: [required(), matchesField("email")]
+  }
+};
+
+export const { reducer, mapStateToProps, mapDispatchToProps } = createFormState(
+  formConfig
+);

package/src/components/molecules/email-form/index.js

@@ -0,0 +1,11 @@
+import EmailForm from "./EmailForm";
+import {
+  reducer,
+  mapStateToProps,
+  mapDispatchToProps,
+} from "./EmailForm.state";
+
+EmailForm.reducer = reducer;
+EmailForm.mapStateToProps = mapStateToProps;
+EmailForm.mapDispatchToProps = mapDispatchToProps;
+export default EmailForm;

package/src/components/molecules/forgot-password-form/ForgotPasswordForm.js

@@ -0,0 +1,32 @@
+import React, { useEffect } from "react";
+import { required, isProbablyEmail } from "redux-freeform";
+import { FormInput } from "../../atoms/form-layouts";
+
+const ForgotPasswordForm = ({
+  fields,
+  actions,
+  clearOnDismount,
+  showErrors,
+  handleSubmit
+}) => {
+  if (clearOnDismount) {
+    useEffect(() => () => actions.form.clear(), []);
+  }
+  const EmailErrorMessages = {
+    [required.error]: "Email is required",
+    [isProbablyEmail.error]: "Email is not valid"
+  };
+
+  return (
+    <FormInput
+      labelTextWhenNoError="Email"
+      errorMessages={EmailErrorMessages}
+      field={fields.email}
+      fieldActions={actions.fields.email}
+      showErrors={showErrors}
+      onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+    />
+  );
+};
+
+export default ForgotPasswordForm;

package/src/components/molecules/forgot-password-form/ForgotPasswordForm.state.js

@@ -0,0 +1,11 @@
+import { createFormState, required, isProbablyEmail } from "redux-freeform";
+
+const formConfig = {
+  email: {
+    validators: [required(), isProbablyEmail()]
+  }
+};
+
+export const { reducer, mapStateToProps, mapDispatchToProps } = createFormState(
+  formConfig
+);

package/src/components/molecules/forgot-password-form/index.js

@@ -0,0 +1,11 @@
+import ForgotPasswordForm from "./ForgotPasswordForm";
+import {
+  reducer,
+  mapStateToProps,
+  mapDispatchToProps,
+} from "./ForgotPasswordForm.state";
+
+ForgotPasswordForm.reducer = reducer;
+ForgotPasswordForm.mapStateToProps = mapStateToProps;
+ForgotPasswordForm.mapDispatchToProps = mapDispatchToProps;
+export default ForgotPasswordForm;

package/src/components/molecules/highlight-tab-row/HighlightTabRow.js

@@ -0,0 +1,62 @@
+import React from "react";
+
+import { repeat } from "ramda";
+import { Reel, Box } from "../../atoms/layouts";
+import Text from "../../atoms/text";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+
+const HighlightTabRow = ({ tabs, highlightIndex, themeValues, isMobile }) => {
+  const itemsAfterIndex = tabs.slice(highlightIndex).length - 1;
+  const itemsBeforeIndex = tabs.slice(0, highlightIndex).length;
+  const boxesBefore =
+    itemsAfterIndex > itemsBeforeIndex && isMobile
+      ? itemsAfterIndex - itemsBeforeIndex
+      : 0;
+  const boxesAfter =
+    itemsAfterIndex < itemsBeforeIndex && isMobile
+      ? itemsBeforeIndex - itemsAfterIndex
+      : 0;
+  return (
+    <Box
+      padding="0"
+      background={themeValues.backgroundColor}
+      margin="0"
+      boxShadow="0px 0px 4px 0px rgb(110, 114, 126)"
+      role="region"
+      aria-label="Payment step"
+    >
+      <Reel
+        padding="0"
+        childGap="3rem"
+        childWidth="12rem"
+        justifyContent="space-evenly"
+        disableScroll
+      >
+        {repeat(<Box />, boxesBefore)}
+        {tabs.map((t, i) => (
+          <Box
+            key={t}
+            borderSize="3px"
+            borderColor={
+              highlightIndex == i ? themeValues.textColor : "transparent"
+            }
+            borderWidthOverride="0 0 3px 0"
+          >
+            <Text
+              variant="p"
+              textAlign="center"
+              color={themeValues.textColor}
+              weight={FONT_WEIGHT_SEMIBOLD}
+              extraStyles="display: block; white-space: nowrap;"
+            >
+              {t}
+            </Text>
+          </Box>
+        ))}
+        {repeat(<Box />, boxesAfter)}
+      </Reel>
+    </Box>
+  );
+};
+
+export default HighlightTabRow;

package/src/components/molecules/highlight-tab-row/HighlightTabRow.theme.js

@@ -0,0 +1,7 @@
+const textColor = "#ffffff";
+const backgroundColor = "#182848";
+
+export const fallbackValues = {
+  textColor,
+  backgroundColor
+};

package/src/components/molecules/highlight-tab-row/index.js

@@ -0,0 +1,8 @@
+import { memo } from "react";
+import HighlightTabRow from "./HighlightTabRow";
+import { themeComponent } from "../../../util/themeUtils";
+import { fallbackValues } from "./HighlightTabRow.theme";
+
+export default memo(
+  themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues)
+);

package/src/components/molecules/index.js

@@ -0,0 +1,24 @@
+export { default as AddressForm } from "./address-form";
+export { default as ChangePasswordForm } from "./change-password-form";
+export { default as CollapsibleSection } from "./collapsible-section";
+export { default as EditNameForm } from "./edit-name-form";
+export { default as EmailForm } from "./email-form";
+export { default as ForgotPasswordForm } from "./forgot-password-form";
+export { default as HighlightTabRow } from "./highlight-tab-row";
+export { default as LoginForm } from "./login-form";
+export { default as Modal } from "./modal";
+export { default as Module } from "./module";
+export * from "./nav-menu";
+export { default as Obligation } from "./obligation";
+export { default as PaymentButtonBar } from "./payment-button-bar";
+export { default as PaymentDetails } from "./payment-details";
+export { default as PhoneForm } from "./phone-form";
+export { default as RadioSection } from "./radio-section";
+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 TabSidebar } from "./tab-sidebar";
+export { default as TermsAndConditions } from "./terms-and-conditions";
+export { default as TermsAndConditionsModal } from "./terms-and-conditions-modal";
+export { default as WorkflowTile } from "./workflow-tile";

package/src/components/molecules/login-form/LoginForm.js

@@ -0,0 +1,46 @@
+import React, { useEffect } from "react";
+import { required, isProbablyEmail } from "redux-freeform";
+import { FormInput, FormInputColumn } from "../../atoms/form-layouts";
+
+const LoginForm = ({
+  clearOnDismount,
+  fields,
+  actions,
+  showErrors,
+  handleSubmit
+}) => {
+  if (clearOnDismount) {
+    useEffect(() => () => actions.form.clear(), []);
+  }
+  const emailErrorMessages = {
+    [required.error]: "Email is required",
+    [isProbablyEmail.error]: "Invalid email address"
+  };
+  const passwordErrorMessages = {
+    [required.error]: "Password is required"
+  };
+  return (
+    <FormInputColumn role="form" aria-label="Login">
+      <FormInput
+        labelTextWhenNoError="Email"
+        errorMessages={emailErrorMessages}
+        type="email"
+        field={fields.email}
+        fieldActions={actions.fields.email}
+        showErrors={showErrors}
+        onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+      />
+      <FormInput
+        labelTextWhenNoError="Password"
+        errorMessages={passwordErrorMessages}
+        type="password"
+        field={fields.password}
+        fieldActions={actions.fields.password}
+        showErrors={showErrors}
+        onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+      />
+    </FormInputColumn>
+  );
+};
+
+export default LoginForm;

package/src/components/molecules/login-form/LoginForm.state.js

@@ -0,0 +1,14 @@
+import { createFormState, required, isProbablyEmail } from "redux-freeform";
+
+const formConfig = {
+  email: {
+    validators: [required(), isProbablyEmail()]
+  },
+  password: {
+    validators: [required()]
+  }
+};
+
+export const { reducer, mapStateToProps, mapDispatchToProps } = createFormState(
+  formConfig
+);

package/src/components/molecules/login-form/index.js

@@ -0,0 +1,11 @@
+import LoginForm from "./LoginForm";
+import {
+  reducer,
+  mapStateToProps,
+  mapDispatchToProps,
+} from "./LoginForm.state";
+
+LoginForm.reducer = reducer;
+LoginForm.mapStateToProps = mapStateToProps;
+LoginForm.mapDispatchToProps = mapDispatchToProps;
+export default LoginForm;