@thecb/components 2.2.0

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

@@ -0,0 +1,40 @@
+import {
+  createFormState,
+  required,
+  matchesField,
+  hasLength,
+  hasNumber,
+  hasLowercaseLetter,
+  hasUppercaseLetter,
+  hasSpecialCharacter,
+  isProbablyEmail
+} from "redux-freeform";
+
+const formConfig = {
+  firstName: {
+    validators: [required()]
+  },
+  lastName: {
+    validators: [required()]
+  },
+  email: {
+    validators: [required(), isProbablyEmail()]
+  },
+  password: {
+    validators: [
+      required(),
+      hasLength(8, 100),
+      hasNumber(),
+      hasLowercaseLetter(),
+      hasUppercaseLetter(),
+      hasSpecialCharacter()
+    ]
+  },
+  confirmPassword: {
+    validators: [required(), matchesField("password")]
+  }
+};
+
+export const { reducer, mapStateToProps, mapDispatchToProps } = createFormState(
+  formConfig
+);

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

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

package/src/components/molecules/reset-confirmation-form/ResetConfirmationForm.js

@@ -0,0 +1,56 @@
+import React, { useContext } from "react";
+import { ThemeContext } from "styled-components";
+import Heading from "../../atoms/heading";
+import Paragraph from "../../atoms/paragraph";
+import { Box, Cluster } from "../../atoms/layouts";
+import { GRECIAN_GREY, CHARADE_GREY, WHITE } from "../../../constants/colors";
+import ButtonWithLink from "../../atoms/button-with-link";
+import { ForgotPasswordIcon } from "../../atoms/icons";
+import withWindowSize from "../../withWindowSize";
+import { FormContainer, FormInputColumn } from "../../atoms/form-layouts";
+
+const ResetConfirmationForm = () => {
+  const { isMobile } = useContext(ThemeContext);
+
+  return (
+    <Box
+      padding="0"
+      width={isMobile ? `auto` : `576px`}
+      borderRadius="4px"
+      background={WHITE}
+      boxShadow="0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
+    >
+      <Box background={GRECIAN_GREY} minWidth="100%" padding="0.5rem">
+        <Cluster justify="center" align="center">
+          <ForgotPasswordIcon />
+        </Cluster>
+      </Box>
+      <FormContainer role="form" aria-label="Reset password confirmation">
+        <FormInputColumn childGap="0.5rem">
+          <Box padding="0">
+            <Heading color={CHARADE_GREY} variant="h5" weight="600">
+              Password reset link sent
+            </Heading>
+          </Box>
+          <Box padding="0">
+            <Paragraph variant="p" color={CHARADE_GREY}>
+              Your password link was sent successfully. Check your email for a
+              reset password link.
+            </Paragraph>
+          </Box>
+        </FormInputColumn>
+        <Box padding={isMobile ? "1rem 0 0" : "1.5rem 0 0"}>
+          <Cluster justify="center" align="center">
+            <ButtonWithLink
+              url="/login"
+              text="Back to Login"
+              variant="primary"
+              extraStyles={`width: 100%;`}
+            />
+          </Cluster>
+        </Box>
+      </FormContainer>
+    </Box>
+  );
+};
+export default withWindowSize(ResetConfirmationForm);

package/src/components/molecules/reset-confirmation-form/index.js

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

package/src/components/molecules/reset-password-form/ResetPasswordForm.js

@@ -0,0 +1,67 @@
+import React, { useEffect } from "react";
+import {
+  required,
+  hasLength,
+  matchesField,
+  hasNumber,
+  hasLowercaseLetter,
+  hasUppercaseLetter,
+  hasSpecialCharacter
+} from "redux-freeform";
+import PasswordRequirements from "../../atoms/password-requirements";
+import { Box } from "../../atoms/layouts";
+import { FormInput, FormInputColumn } from "../../atoms/form-layouts";
+const ResetPasswordForm = ({
+  handleSubmit,
+  clearOnDismount,
+  fields,
+  actions,
+  showErrors,
+  isMobile
+}) => {
+  if (clearOnDismount) {
+    useEffect(() => () => actions.form.clear(), []);
+  }
+  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="Reset password">
+      <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 ResetPasswordForm;

package/src/components/molecules/reset-password-form/ResetPasswordForm.state.js

@@ -0,0 +1,30 @@
+import {
+  createFormState,
+  required,
+  matchesField,
+  hasLength,
+  hasNumber,
+  hasLowercaseLetter,
+  hasUppercaseLetter,
+  hasSpecialCharacter
+} from "redux-freeform";
+
+const formConfig = {
+  password: {
+    validators: [
+      required(),
+      hasLength(8, 100),
+      hasNumber(),
+      hasLowercaseLetter(),
+      hasUppercaseLetter(),
+      hasSpecialCharacter()
+    ]
+  },
+  confirmPassword: {
+    validators: [required(), matchesField("password")]
+  }
+};
+
+export const { reducer, mapStateToProps, mapDispatchToProps } = createFormState(
+  formConfig
+);

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

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

package/src/components/molecules/reset-password-success/ResetPasswordSuccess.js

@@ -0,0 +1,55 @@
+import React, { useContext } from "react";
+import { ThemeContext } from "styled-components";
+import Heading from "../../atoms/heading";
+import Paragraph from "../../atoms/paragraph";
+import { Box, Cluster } from "../../atoms/layouts";
+import { GRECIAN_GREY, CHARADE_GREY, WHITE } from "../../../constants/colors";
+import ButtonWithLink from "../../atoms/button-with-link";
+import { ForgotPasswordIcon } from "../../atoms/icons";
+import withWindowSize from "../../withWindowSize";
+import { FormContainer, FormInputColumn } from "../../atoms/form-layouts";
+
+const ResetConfirmationForm = () => {
+  const { isMobile } = useContext(ThemeContext);
+
+  return (
+    <Box
+      padding="0"
+      width={isMobile ? `auto` : `576px`}
+      borderRadius="4px"
+      background={WHITE}
+      boxShadow="0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
+    >
+      <Box background={GRECIAN_GREY} minWidth="100%" padding="0.5rem">
+        <Cluster justify="center" align="center">
+          <ForgotPasswordIcon />
+        </Cluster>
+      </Box>
+      <FormContainer role="form" aria-label="Reset password success">
+        <FormInputColumn childGap="0.5rem">
+          <Box padding="0">
+            <Heading color={CHARADE_GREY} variant="h5" weight="600">
+              Password reset successful
+            </Heading>
+          </Box>
+          <Box padding="0">
+            <Paragraph variant="p" color={CHARADE_GREY}>
+              You can now log in using your new password
+            </Paragraph>
+          </Box>
+          <Box padding={isMobile ? "0.5rem 0 0" : "1rem 0 0"}>
+            <Cluster justify="center" align="center">
+              <ButtonWithLink
+                url="/login"
+                text="Log in"
+                variant="primary"
+                extraStyles={`width: 100%;`}
+              />
+            </Cluster>
+          </Box>
+        </FormInputColumn>
+      </FormContainer>
+    </Box>
+  );
+};
+export default withWindowSize(ResetConfirmationForm);

package/src/components/molecules/reset-password-success/index.js

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

package/src/components/molecules/tab-sidebar/TabSidebar.js

@@ -0,0 +1,92 @@
+import React from "react";
+import { Box, Switcher, Cluster } from "../../atoms/layouts";
+import {
+  BRIGHT_GREY,
+  GHOST_GREY,
+  ATHENS_GREY,
+  TRANSPARENT
+} from "../../../constants/colors";
+import Text from "../../atoms/text";
+import { InternalLink } from "../../atoms/link";
+import {
+  FONT_WEIGHT_BOLD,
+  FONT_WEIGHT_REGULAR
+} from "../../../constants/style_constants";
+import { themeComponent } from "../../../util/themeUtils";
+import { fallbackValues } from "./TabSidebar.theme";
+
+const TabSidebar = ({ links, isMobile, themeValues }) => (
+  <Box
+    padding="0"
+    background={ATHENS_GREY}
+    minHeight="100%"
+    role="region"
+    aria-label="Profile tabs"
+    boxShadow={isMobile && `inset 0px -1px 0px 0px rgb(202, 206, 216)`}
+  >
+    <Switcher
+      breakpoint="20rem"
+      childGap="0.1px"
+      padding="0"
+      extraStyles={!isMobile && `overflow: visible;`}
+    >
+      {links.map(({ route, text, active, icon }, index) => (
+        <InternalLink
+          to={route}
+          key={`${route}-${index}`}
+          hoverStyles={
+            active
+              ? `> * {background-color: ${themeValues.activeTabHover};}`
+              : `> * {background-color: rgba(8, 27, 43, 0.05);}`
+          }
+        >
+          <Box
+            padding={isMobile ? "6px 4px" : "18px 16px"}
+            background={
+              active ? themeValues.activeTabBackground : "transparent"
+            }
+            borderSize={active ? "3px" : "1px"}
+            borderColor={active ? themeValues.activeTabAccent : TRANSPARENT}
+            borderWidthOverride="0 0 3px 0"
+            boxShadow={
+              active
+                ? `0px 2px 4px 0px ${GHOST_GREY}, 0px 2px 9px 1px ${GHOST_GREY}`
+                : `0px 2px 4px 0px ${TRANSPARENT}, 0px 2px 9px 1px ${TRANSPARENT}`
+            }
+            minWidth="100%"
+            borderRadius="4px 4px 0 0"
+          >
+            <Box
+              padding="0"
+              minWidth="100%"
+              extraStyles={
+                isMobile ? `text-align: center;` : `text-align: left;`
+              }
+            >
+              <Cluster
+                justify={isMobile ? "center" : "flex-start"}
+                align="center"
+              >
+                {icon}
+                <Text
+                  variant={isMobile ? "pXXS" : "pS"}
+                  weight={active ? FONT_WEIGHT_BOLD : FONT_WEIGHT_REGULAR}
+                  color={active ? themeValues.activeTabAccent : BRIGHT_GREY}
+                  extraStyles={`text-transform: uppercase; ${
+                    isMobile
+                      ? `width: 100%; padding-top: 4px;`
+                      : `padding-left: 8px;`
+                  }`}
+                >
+                  {text}
+                </Text>
+              </Cluster>
+            </Box>
+          </Box>
+        </InternalLink>
+      ))}
+    </Switcher>
+  </Box>
+);
+
+export default themeComponent(TabSidebar, "ProfileTab", fallbackValues);

package/src/components/molecules/tab-sidebar/TabSidebar.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/tab-sidebar/index.js

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

package/src/components/molecules/terms-and-conditions/TermsAndConditions.js

@@ -0,0 +1,73 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import Checkbox from "../../atoms/checkbox";
+import Text from "../../atoms/text";
+import { Box, Stack } from "../../atoms/layouts";
+import DisplayBox from "../../atoms/display-box";
+import { FONT_WEIGHT_BOLD } from "../../../constants/style_constants";
+import TermsAndConditionsModal from "../../molecules/terms-and-conditions-modal";
+
+const CheckboxWrapper = styled.div`
+  outline: none;
+`;
+
+const ModalWrapper = styled.div``;
+
+const TermsAndConditions = ({
+  onCheck,
+  isChecked,
+  html,
+  terms,
+  error = false
+}) => {
+  const [showTerms, toggleShowTerms] = useState(false);
+  const [checkboxFocused, focusCheckbox] = useState(false);
+
+  const handleClick = (e, func) => {
+    if (e?.keyCode === 13) {
+      func();
+    }
+  };
+
+  return (
+    <DisplayBox>
+      <Stack direction="row">
+        <CheckboxWrapper
+          tabIndex="0"
+          onFocus={() => focusCheckbox(true)}
+          onBlur={() => focusCheckbox(false)}
+          onKeyDown={e => handleClick(e, onCheck)}
+        >
+          <Checkbox
+            name="terms"
+            error={error}
+            checked={isChecked}
+            onChange={onCheck}
+            focused={checkboxFocused}
+          />
+        </CheckboxWrapper>
+        <Stack>
+          <Text variant="p" fontWeight={FONT_WEIGHT_BOLD}>
+            Terms and Conditions
+          </Text>
+          <Box padding="0">{html}</Box>
+          {terms && (
+            <ModalWrapper
+              tabIndex="0"
+              onKeyDown={e => handleClick(e, () => toggleShowTerms(!showTerms))}
+            >
+              <TermsAndConditionsModal
+                link="Learn More"
+                terms={terms}
+                isOpen={showTerms}
+                toggleOpen={toggleShowTerms}
+              />
+            </ModalWrapper>
+          )}
+        </Stack>
+      </Stack>
+    </DisplayBox>
+  );
+};
+
+export default TermsAndConditions;

package/src/components/molecules/terms-and-conditions/index.js

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

package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.js

@@ -0,0 +1,64 @@
+import React from "react";
+import Modal from "../modal";
+import Text from "../../atoms/text";
+import { Box } from "../../atoms/layouts";
+import { fallbackValues } from "./TermsAndConditionsModal.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const TermsAndConditionsModal = ({
+  link,
+  title = "Terms & Conditions",
+  isOpen,
+  toggleOpen,
+  toggleAccepted,
+  acceptText,
+  terms,
+  variant,
+  themeValues
+}) => (
+  <Modal
+    ModalLink={() => (
+      <Text
+        variant={variant === "default" ? "pS" : "pXS"}
+        onClick={() => toggleOpen(true)}
+        color={themeValues.linkColor}
+        weight={themeValues.fontWeight}
+        hoverStyles={themeValues.modalLinkHoverFocus}
+        focusStyles={themeValues.modalLinkHoverFocus}
+        extraStyles={`cursor: pointer;`}
+        tabIndex="0"
+        onKeyPress={e => e.key === "Enter" && toggleOpen(true)}
+      >
+        {link}
+      </Text>
+    )}
+    modalOpen={isOpen}
+    hideModal={() => toggleOpen(false)}
+    showModal={() => toggleOpen(true)}
+    modalHeaderText={title}
+    modalBodyText={
+      <Box
+        background={themeValues.backgroundColor}
+        border={`1px solid ${themeValues.border}`}
+        borderRadius="3px"
+        extraStyles="overflow: scroll; max-height: 20rem;"
+      >
+        <Text variant="p">{terms}</Text>
+      </Box>
+    }
+    defaultWrapper={false}
+    onlyCloseButton={!acceptText}
+    continueButtonText={acceptText}
+    continueAction={() => {
+      toggleAccepted(true);
+      toggleOpen(false);
+    }}
+  />
+);
+
+export default themeComponent(
+  TermsAndConditionsModal,
+  "TermsAndConditionsModal",
+  fallbackValues,
+  "default"
+);

package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.theme.js

@@ -0,0 +1,28 @@
+import {
+  FONT_WEIGHT_REGULAR,
+  FONT_WEIGHT_SEMIBOLD
+} from "../../../constants/style_constants";
+
+const backgroundColor = { default: "#ffffff", footer: "#ffffff" };
+const linkColor = { default: "#357fb8", footer: "#ffffff" };
+const border = { default: "#cdcdcd", footer: "#cdcdcd" };
+const fontSize = { default: "1rem", footer: "0.875rem" };
+const lineHeight = { default: "1.5rem", footer: "1.25rem" };
+const fontWeight = {
+  default: FONT_WEIGHT_REGULAR,
+  footer: FONT_WEIGHT_SEMIBOLD
+};
+const modalLinkHoverFocus = {
+  default: ``,
+  footer: `outline: none; text-decoration: underline;`
+};
+
+export const fallbackValues = {
+  backgroundColor,
+  linkColor,
+  border,
+  fontSize,
+  lineHeight,
+  fontWeight,
+  modalLinkHoverFocus
+};

package/src/components/molecules/terms-and-conditions-modal/index.js

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

package/src/components/molecules/workflow-tile/WorkflowTile.js

@@ -0,0 +1,58 @@
+import React from "react";
+import Heading from "../../atoms/heading";
+import Paragraph from "../../atoms/paragraph";
+import {
+  MATISSE_BLUE,
+  CHARADE_GREY,
+  STORM_GREY,
+  WHITE,
+  GHOST_GREY,
+  GRECIAN_GREY
+} from "../../../constants/colors";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+import ButtonWithLink from "../../atoms/button-with-link";
+import { Box, Stack } from "../../atoms/layouts";
+const WorkflowTile = ({
+  workflowName = "Test Workflow",
+  workflowDescription,
+  slug
+}) => (
+  <Box
+    background={WHITE}
+    boxShadow={`0px 0px 5px 0px ${GHOST_GREY}`}
+    padding={0}
+  >
+    <Stack childGap={0} bottomItem={3} fullHeight>
+      <Box padding={"1rem 1rem 0 1rem"}>
+        <Heading
+          variant="h6"
+          weight={FONT_WEIGHT_SEMIBOLD}
+          color={CHARADE_GREY}
+          margin={"0 0 0.5rem 0"}
+        >
+          {workflowName}
+        </Heading>
+      </Box>
+      <Box padding={"0 1rem 1rem 1rem"} minHeight={"4.25rem"}>
+        <Paragraph variant="pS" color={STORM_GREY}>
+          {workflowDescription || `Link your benefit plan`}
+        </Paragraph>
+      </Box>
+      <Box padding={"1.5rem 1rem"} background={GRECIAN_GREY}>
+        <ButtonWithLink
+          primary
+          primaryBG={MATISSE_BLUE}
+          fontWeight={FONT_WEIGHT_SEMIBOLD}
+          fontSize={"1.125rem"}
+          borderRadius={"0px"}
+          text={"Link Benefits"}
+          minWidth={"100%"}
+          url={`/service/${slug}`}
+          extraStyles={`width: 100%;`}
+        />
+      </Box>
+    </Stack>
+  </Box>
+);
+
+export default WorkflowTile;

package/src/components/molecules/workflow-tile/index.js

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