@thecb/components 2.2.0

package/src/components/molecules/payment-button-bar/PaymentButtonBar.js

@@ -0,0 +1,80 @@
+import React, { useContext, Fragment } from "react";
+import { ThemeContext } from "styled-components";
+
+import ButtonWithLink from "../../atoms/button-with-link";
+import ButtonWithAction from "../../atoms/button-with-action";
+import { Box, Cluster } from "../../atoms/layouts";
+import SolidDivider from "../../atoms/solid-divider";
+
+const PaymentButtonBar = ({
+  forwardButtonText = "Next",
+  forwardButtonAction,
+  forwardButtonLoading,
+  backButtonAction,
+  cancelURL,
+  cancelText = "Cancel",
+  redirectURL,
+  redirectText = "Return"
+}) => {
+  const { isMobile } = useContext(ThemeContext);
+
+  const backButton = !!cancelURL ? (
+    <ButtonWithLink
+      text={cancelText}
+      url={cancelURL}
+      variant="secondary"
+      extraStyles={isMobile && "flex-grow: 1"}
+      dataQa={cancelText}
+    />
+  ) : (
+    backButtonAction && (
+      <ButtonWithAction
+        text="Back"
+        variant="secondary"
+        action={backButtonAction}
+        extraStyles={isMobile && "flex-grow: 1"}
+        dataQa="Back"
+      />
+    )
+  );
+
+  const forwardButton = !!redirectURL ? (
+    <ButtonWithLink
+      url={redirectURL}
+      text={redirectText}
+      variant="primary"
+      extraStyles={isMobile && "flex-grow: 1"}
+      dataQa={redirectText}
+    />
+  ) : (
+    forwardButtonAction && (
+      <ButtonWithAction
+        text={forwardButtonText}
+        variant="primary"
+        action={forwardButtonAction}
+        isLoading={forwardButtonLoading}
+        extraStyles={isMobile && "flex-grow: 1"}
+        dataQa={forwardButtonText}
+      />
+    )
+  );
+
+  return (
+    <Fragment>
+      <Box padding="1.25rem 0" />
+      <SolidDivider />
+      <Box padding="2.5rem 0 3.125rem 0">
+        <Cluster
+          justify={!!backButton ? "space-between" : "flex-end"}
+          align="center"
+          childGap="0.75rem"
+        >
+          {backButton}
+          {forwardButton}
+        </Cluster>
+      </Box>
+    </Fragment>
+  );
+};
+
+export default PaymentButtonBar;

package/src/components/molecules/payment-button-bar/index.js

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

package/src/components/molecules/payment-details/PaymentDetails.js

@@ -0,0 +1,158 @@
+import React, { useState, Fragment } from "react";
+import { Stack, Cluster, Box, Motion } from "../../atoms/layouts";
+import { fallbackValues } from "./PaymentDetails.theme";
+
+import { displayCurrency } from "../../../util/general";
+import { themeComponent } from "../../../util/themeUtils";
+import CollapsibleSection from "../collapsible-section";
+
+import LabeledAmount from "../../atoms/labeled-amount";
+import LineItem from "../../atoms/line-item";
+import Heading from "../../atoms/heading";
+import SolidDivider from "../../atoms/solid-divider";
+
+const PaymentDetailsContent = ({
+  lineItemElems,
+  feeElems,
+  subtotal,
+  total,
+  themeValues
+}) => (
+  <Stack>
+    {lineItemElems}
+    <SolidDivider />
+    <Box padding="0.5rem 0">
+      <LabeledAmount
+        variant={themeValues.labeledAmountSubtotal}
+        label="Subtotal"
+        amount={displayCurrency(subtotal)}
+      />
+      {feeElems}
+    </Box>
+    <SolidDivider />
+    <LabeledAmount
+      variant={themeValues.labeledAmountTotal}
+      label="Total"
+      amount={displayCurrency(total)}
+    />
+  </Stack>
+);
+
+const Collapsible = ({ content, title, supportsTouch, isOpen, setIsOpen }) => (
+  <CollapsibleSection
+    isMobile={true}
+    supportsTouch={supportsTouch}
+    isOpen={isOpen}
+    title={title}
+    initiallyOpen={false}
+    toggleSection={() => setIsOpen(!isOpen)}
+    customTitle={true}
+  >
+    <Motion
+      variants={{
+        open: { opacity: 1 },
+        closed: { opacity: 0 }
+      }}
+      positionTransition
+      initial={"closed"}
+    >
+      {content}
+    </Motion>
+  </CollapsibleSection>
+);
+
+const NonCollapsible = ({ title, content }) => (
+  <Stack>
+    {title}
+    {content}
+  </Stack>
+);
+
+const PaymentDetails = ({
+  lineItems: _lineItems,
+  fees: _fees,
+  subtotal,
+  total,
+  hideTitle = false,
+  titleText = "Payment Details",
+  initiallyOpen = false,
+  collapsibleOnMobile = true,
+  isMobile,
+  supportsTouch,
+  themeValues
+}) => {
+  const [isOpen, setIsOpen] = useState(initiallyOpen);
+  const fees = _fees
+    .filter(fee => fee.amount > 0)
+    .map(({ amount, ...rest }) => ({
+      ...rest,
+      amount: displayCurrency(amount)
+    }));
+  const lineItems = _lineItems.map(({ amount, ...rest }) => ({
+    ...rest,
+    amount: displayCurrency(amount)
+  }));
+  const isCollapsible = isMobile && collapsibleOnMobile;
+  const lineItemElems = lineItems.map((item, id) => (
+    <LineItem key={id} variant={themeValues.lineItem} {...item} />
+  ));
+  const feeElems = fees.map(fee => (
+    <Fragment key={fee.label}>
+      <Box padding="0.25rem 0" />
+      <LabeledAmount
+        key={fee.label}
+        variant={themeValues.labeledAmountSubtotal}
+        {...fee}
+      />
+    </Fragment>
+  ));
+  const content = isCollapsible ? (
+    <Stack>
+      <SolidDivider />
+      <PaymentDetailsContent
+        {...{ lineItemElems, feeElems, subtotal, total, themeValues }}
+      />
+    </Stack>
+  ) : (
+    <PaymentDetailsContent
+      {...{ lineItemElems, feeElems, subtotal, total, themeValues }}
+    />
+  );
+  const title = hideTitle ? (
+    <Fragment />
+  ) : isCollapsible ? (
+    <Box width="100%" padding="none">
+      <Cluster justify="space-between" align="center">
+        <Heading variant="h6" weight="700">
+          {titleText}
+        </Heading>
+        {displayCurrency(total)}
+      </Cluster>
+    </Box>
+  ) : (
+    <Heading variant="h3" weight="700" margin="1rem 0 0 0">
+      {titleText}
+    </Heading>
+  );
+  return isCollapsible ? (
+    <Collapsible
+      {...{
+        title,
+        content,
+        isOpen,
+        setIsOpen,
+        isMobile,
+        supportsTouch
+      }}
+    />
+  ) : (
+    <NonCollapsible {...{ title, content }} />
+  );
+};
+
+export default themeComponent(
+  PaymentDetails,
+  "PaymentDetails",
+  fallbackValues,
+  "default"
+);

package/src/components/molecules/payment-details/PaymentDetails.theme.js

@@ -0,0 +1,11 @@
+const backgroundColor = { default: "transparent", small: "transparent" };
+const lineItem = { default: "default", small: "small" };
+const labeledAmountSubtotal = { default: "pL", small: "p" };
+const labeledAmountTotal = { default: "h6", small: "pL" };
+
+export const fallbackValues = {
+  backgroundColor,
+  lineItem,
+  labeledAmountSubtotal,
+  labeledAmountTotal
+};

package/src/components/molecules/payment-details/index.js

@@ -0,0 +1 @@
+export { default } from "./PaymentDetails";

package/src/components/molecules/phone-form/PhoneForm.js

@@ -0,0 +1,44 @@
+import React, { useEffect } from "react";
+import { phoneFormats, formatDelimiter } from "../../../util/formats";
+import { required, hasLength } from "redux-freeform";
+import { createFormat } from "formatted-input";
+import {
+  FormInput,
+  FormContainer,
+  FormInputColumn
+} from "../../atoms/form-layouts";
+
+const PhoneForm = ({
+  variant = "default",
+  fields,
+  actions,
+  clearOnDismount,
+  showErrors,
+  handleSubmit
+}) => {
+  if (clearOnDismount) {
+    useEffect(() => () => actions.form.clear(), []);
+  }
+  const phoneErrorMessage = {
+    [required.error]: "Phone number is required",
+    [hasLength.error]: "Phone number must be 10 digits"
+  };
+
+  return (
+    <FormContainer variant={variant} role="form" aria-label="Phone number">
+      <FormInputColumn>
+        <FormInput
+          labelTextWhenNoError="Phone number"
+          errorMessages={phoneErrorMessage}
+          field={fields.phone}
+          fieldActions={actions.fields.phone}
+          showErrors={showErrors}
+          formatter={createFormat(phoneFormats, formatDelimiter)}
+          onKeyUp={e => e.key === "Enter" && handleSubmit(e)}
+        />
+      </FormInputColumn>
+    </FormContainer>
+  );
+};
+
+export default PhoneForm;

package/src/components/molecules/phone-form/PhoneForm.state.js

@@ -0,0 +1,17 @@
+import {
+  createFormState,
+  required,
+  onlyIntegers,
+  hasLength
+} from "redux-freeform";
+
+const formConfig = {
+  phone: {
+    validators: [required(), hasLength(10, 10)],
+    constraints: [onlyIntegers(), hasLength(0, 10)]
+  }
+};
+
+export const { reducer, mapStateToProps, mapDispatchToProps } = createFormState(
+  formConfig
+);

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

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

package/src/components/molecules/radio-section/RadioSection.js

@@ -0,0 +1,205 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import { themeComponent } from "../../../util/themeUtils";
+import { fallbackValues } from "./RadioSection.theme";
+import { AnimatePresence } from "framer-motion";
+import RadioButton from "../../atoms/radio-button";
+import { Box, Cluster, Stack, Motion } from "../../atoms/layouts";
+import { noop } from "../../../util/general";
+import Text from "../../atoms/text";
+import { CHARADE_GREY } from "../../../constants/colors";
+/*
+  Takes an array of section objects, each object should look like:
+    {
+      title: <React Component(s)>,
+      id: <String> "identifier of section",
+      disabled: boolean,
+      dataQa: string,
+      content: <React Component(s)> e.g.: <Box><Stack>cool content stuff</Stack></Box> (any collection of components will work)
+    }
+  
+  Also takes an "openSection" which should equal the id of the section that should be open
+  And a toggleOpenSection. RadioSection will call this function with the id of the section
+  that it is in. It is up to the user to store the open section value in state up from the component
+  using a useState() hook, or reducer.
+
+  The section itself comes with some motion to open/close. To add more motion to the content,
+  wrap your content with a Motion layout primitive and provide appropriate props.
+
+*/
+
+const RadioSection = ({
+  themeValues,
+  isMobile,
+  supportsTouch,
+  sections = [],
+  openSection = "",
+  toggleOpenSection,
+  staggeredAnimation = false,
+  initiallyOpen = true,
+  openHeight = "auto"
+}) => {
+  const handleKeyDown = (id, e) => {
+    if (e?.keyCode === 13) {
+      toggleOpenSection(id);
+    }
+  };
+
+  const wrapper = {
+    open: {
+      height: openHeight,
+      opacity: 1,
+      transition: {
+        duration: 0.3,
+        ease: [0.04, 0.62, 0.23, 0.98],
+        staggerChildren: staggeredAnimation ? 0.15 : 0
+      }
+    },
+    closed: {
+      height: 0,
+      opacity: 0,
+      transition: {
+        duration: 0.3,
+        ease: [0.04, 0.62, 0.23, 0.98],
+        staggerChildren: staggeredAnimation ? 0.15 : 0,
+        staggerDirection: -1
+      }
+    }
+  };
+
+  const borderStyles = `
+    border-width: 0 0 1px 0;
+    border-color: ${themeValues.borderColor};
+    border-style: solid;
+    border-radius: 0px;
+    transform-origin: 100% 0;
+
+    &:last-child {
+      border-width: 0;
+    }
+  `;
+
+  const RightIcon = styled.img`
+    height: ${({ isMobile }) => (isMobile ? "14px" : "18px")};
+    width: ${({ isMobile }) => (isMobile ? "22px" : "28px")};
+    ${({ fade }) => fade && "opacity: 0.4;"}
+    transition: opacity 0.3s ease;
+  `;
+
+  const [focused, setFocused] = useState(null);
+
+  return (
+    <Box
+      padding="1px"
+      border={`1px solid ${themeValues.borderColor}`}
+      borderRadius="4px"
+    >
+      <Stack childGap="0">
+        {sections
+          .filter(section => !section.hidden)
+          .map(section => (
+            <Motion
+              tabIndex="0"
+              onKeyDown={e => handleKeyDown(section.id, e)}
+              onFocus={() => setFocused(section.id)}
+              onBlur={() => setFocused(null)}
+              focusStyles={themeValues.focusStyles}
+              animate={openSection === section.id ? "open" : "closed"}
+              initial={initiallyOpen ? "open" : "closed"}
+              key={`item-${section.id}`}
+              extraStyles={borderStyles}
+            >
+              <Stack childGap="0">
+                <Box
+                  padding={
+                    section.hideRadioButton
+                      ? "1.5rem"
+                      : "1.25rem 1.5rem 1.25rem 1.25rem"
+                  }
+                  background={
+                    section.disabled
+                      ? themeValues.headingDisabledColor
+                      : themeValues.headingBackgroundColor
+                  }
+                  onClick={
+                    isMobile && supportsTouch
+                      ? noop
+                      : () => toggleOpenSection(section.id)
+                  }
+                  onTouchEnd={
+                    isMobile && supportsTouch
+                      ? () => toggleOpenSection(section.id)
+                      : noop
+                  }
+                  key={`header-${section.id}`}
+                  borderSize="0px"
+                  borderColor={themeValues.borderColor}
+                  borderWidthOverride={
+                    openSection === section.id && !!section.content
+                      ? `0px 0px 1px 0px`
+                      : ``
+                  }
+                  extraStyles={!section.disabled ? "cursor: pointer;" : ""}
+                  dataQa={section.dataQa ? section.dataQa : section.id}
+                >
+                  <Cluster
+                    justify="space-between"
+                    align="center"
+                    childGap="0.5rem"
+                  >
+                    <Cluster justify="flex-start" align="center">
+                      {!section.hideRadioButton && (
+                        <Box padding="0">
+                          <RadioButton
+                            name={section.id}
+                            radioOn={openSection === section.id}
+                            radioFocused={focused === section.id}
+                            toggleRadio={() => toggleOpenSection(section.id)}
+                            tabIndex="-1"
+                          />
+                        </Box>
+                      )}
+                      <Text variant="p" color={CHARADE_GREY} aria-level="3">
+                        {section.title}
+                      </Text>
+                    </Cluster>
+                    {section.rightIcons && (
+                      <Cluster childGap="0.5rem">
+                        {section.rightIcons.map(icon => (
+                          <RightIcon
+                            src={icon.img}
+                            key={icon.img}
+                            fade={!icon.enabled}
+                            isMobile={isMobile}
+                          />
+                        ))}
+                      </Cluster>
+                    )}
+                  </Cluster>
+                </Box>
+                <AnimatePresence initial={false}>
+                  {openSection === section.id && (
+                    <Motion
+                      key={`content-${section.id}`}
+                      padding="0"
+                      background={themeValues.bodyBackgroundColor}
+                      layoutTransition
+                      initial="closed"
+                      animate="open"
+                      exit="closed"
+                      variants={wrapper}
+                      extraStyles={`transform-origin: 100% 0;`}
+                    >
+                      {section.content}
+                    </Motion>
+                  )}
+                </AnimatePresence>
+              </Stack>
+            </Motion>
+          ))}
+      </Stack>
+    </Box>
+  );
+};
+
+export default themeComponent(RadioSection, "RadioSection", fallbackValues);

package/src/components/molecules/radio-section/RadioSection.theme.js

@@ -0,0 +1,15 @@
+import { WHITE, GREY_CHATEAU, ATHENS_GREY } from "../../../constants/colors";
+
+const headingBackgroundColor = `${WHITE}`;
+const headingDisabledColor = `${ATHENS_GREY}`;
+const bodyBackgroundColor = "#eeeeee";
+const borderColor = `${GREY_CHATEAU}`;
+const focusStyles = `outline: none;`;
+
+export const fallbackValues = {
+  headingBackgroundColor,
+  headingDisabledColor,
+  bodyBackgroundColor,
+  borderColor,
+  focusStyles
+};

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

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

package/src/components/molecules/registration-form/RegistrationForm.js

@@ -0,0 +1,104 @@
+import React, { useEffect } from "react";
+import {
+  required,
+  hasLength,
+  matchesField,
+  hasNumber,
+  hasLowercaseLetter,
+  hasUppercaseLetter,
+  hasSpecialCharacter,
+  isProbablyEmail
+} from "redux-freeform";
+import PasswordRequirements from "../../atoms/password-requirements";
+import { Box } from "../../atoms/layouts";
+import { FormInput, FormInputColumn } from "../../atoms/form-layouts";
+
+const RegistrationForm = ({
+  clearOnDismount,
+  fields,
+  actions,
+  handleSubmit,
+  showErrors,
+  isMobile
+}) => {
+  if (clearOnDismount) {
+    useEffect(() => () => actions.form.clear(), []);
+  }
+  const firstNameErrorMessages = {
+    [required.error]: "First name is required"
+  };
+  const lastNameErrorMessages = {
+    [required.error]: "Last name is required"
+  };
+  const emailErrorMessages = {
+    [required.error]: "Email is required",
+    [isProbablyEmail.error]: "Invalid email address"
+  };
+  const passwordErrorMessages = {
+    [required.error]: "Password is required",
+    [hasLength.error]: "Password must have at least 8 characters",
+    [hasNumber.error]: "Password must contain at least one number",
+    [hasLowercaseLetter.error]:
+      "Password must contain at least one lowercase letter",
+    [hasUppercaseLetter.error]:
+      "Password must contain at least one uppercase letter",
+    [hasSpecialCharacter.error]:
+      "Password must contain at least one special character (!@#$%^&*.?)"
+  };
+  const confirmPasswordErrorMessages = {
+    [matchesField.error]: "Confirm password must match password"
+  };
+
+  return (
+    <FormInputColumn role="form" aria-label="Registration">
+      <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)}
+      />
+      <FormInput
+        labelTextWhenNoError="Email address"
+        errorMessages={emailErrorMessages}
+        field={fields.email}
+        fieldActions={actions.fields.email}
+        showErrors={showErrors}
+        onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+        type="email"
+      />
+      <FormInput
+        labelTextWhenNoError="Password"
+        errorMessages={passwordErrorMessages}
+        field={fields.password}
+        fieldActions={actions.fields.password}
+        showErrors={showErrors}
+        onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+        type="password"
+      />
+      <FormInput
+        labelTextWhenNoError="Confirm password"
+        errorMessages={confirmPasswordErrorMessages}
+        field={fields.confirmPassword}
+        fieldActions={actions.fields.confirmPassword}
+        showErrors={showErrors}
+        onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+        type="password"
+      />
+      <Box padding={isMobile ? "0" : "0.5rem 0 0"}>
+        <PasswordRequirements password={fields.password} isMobile={isMobile} />
+      </Box>
+    </FormInputColumn>
+  );
+};
+
+export default RegistrationForm;