@thecb/components 2.2.0

package/src/components/atoms/text/Text.js

@@ -0,0 +1,37 @@
+import React from "react";
+import { fallbackValues } from "./Text.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+import { FIREFLY_GREY } from "../../../constants/colors";
+import { TextSpan } from "./Text.styled";
+import { safeChildren } from "../../../util/general";
+
+const Text = ({
+  themeValues,
+  weight = FONT_WEIGHT_REGULAR,
+  color = FIREFLY_GREY,
+  extraStyles = ``,
+  hoverStyles,
+  focusStyles,
+  onClick,
+  dataQa,
+  children,
+  ...rest
+}) => (
+  <TextSpan
+    fontSize={themeValues.fontSize}
+    weight={weight}
+    color={color}
+    fontFamily={themeValues.fontFamily}
+    extraStyles={extraStyles}
+    hoverStyles={hoverStyles}
+    focusStyles={focusStyles}
+    onClick={onClick}
+    data-qa={dataQa}
+    {...rest}
+  >
+    {safeChildren(children, <span />)}
+  </TextSpan>
+);
+
+export default themeComponent(Text, "Text", fallbackValues, "p");

package/src/components/atoms/text/Text.styled.js

@@ -0,0 +1,32 @@
+import styled, { css } from "styled-components";
+
+export const TextSpan = styled.span`
+  --font-size: ${({ fontSize }) => fontSize};
+  font-size: var(--font-size);
+  line-height: calc(1.5 * var(--font-size));
+  font-weight: ${({ weight }) => weight};
+  font-family: ${({ fontFamily }) => fontFamily};
+  color: ${({ color }) => color};
+
+  &:hover {
+    ${({ hoverStyles }) =>
+      css`
+        ${hoverStyles}
+      `}
+  }
+
+  &:focus {
+    ${({ focusStyles }) =>
+      css`
+        ${focusStyles}
+      `}
+  }
+
+  ${({ disabled, disabledStyles }) =>
+    disabled &&
+    css`
+      ${disabledStyles}
+    `}
+
+  ${({ extraStyles }) => extraStyles}
+`;

package/src/components/atoms/text/Text.theme.js

@@ -0,0 +1,22 @@
+const fontFamily = {
+  primary: "Public Sans",
+  secondary: "Open Sans"
+};
+
+// Text uses the same variants as paragraph
+// Use a Paragraph if you want a block level element
+// Use a Text if you want an inline element
+
+const fontSize = {
+  p: "1rem",
+  pL: "1.125rem",
+  pS: "0.875rem",
+  pXS: "0.75rem",
+  pXXS: "0.65rem",
+  pXL: "1.5rem"
+};
+
+export const fallbackValues = {
+  fontFamily,
+  fontSize
+};

package/src/components/atoms/text/index.js

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

package/src/components/atoms/toggle-switch/ToggleSwitch.js

@@ -0,0 +1,212 @@
+import React from "react";
+import styled from "styled-components";
+import posed from "react-pose";
+import { fallbackValues } from "./ToggleSwitch.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import Heading from "../heading";
+import { Box, Center, Cover, Cluster } from "../layouts";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+import { CHARADE_GREY } from "../../../constants/colors";
+
+const HiddenToggleSwitchBox = styled.input`
+  opacity: 0;
+  position: absolute;
+  cursor: ${({ disabled }) => (disabled ? "auto" : "pointer")};
+  height: 24px;
+  width: 50px;
+  ${({ isMobile }) => (isMobile ? `transform: scale(0.75)` : ``)}
+`;
+
+const VisibleSwitchComponent = styled.label`
+  width: 48px;
+  height: 24px;
+  border-radius: 48px;
+  border: none;
+  position: relative;
+  box-sizing: border-box;
+  cursor: ${({ disabled }) => (disabled ? "auto" : "pointer")};
+  display: inline-block;
+
+  &:hover {
+    box-shadow: ${({ disabled }) =>
+      disabled ? "none" : "0px 2px 5px 0px rgba(0, 0, 0, 0.5) !important"};
+  }
+
+  &:focus {
+    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
+  }
+
+  ${({ isMobile }) => (isMobile ? `transform: scale(0.75)` : ``)}
+`;
+
+const ToggleSwitchMiddleRingComponent = styled.div`
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border: none;
+  border-radius: 50%;
+  box-sizing: border-box;
+`;
+
+const ToggleSwitchInnerRingComponent = styled.div`
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  top: 3px;
+  left: 3px;
+  right: 3px;
+  bottom: 3px;
+  border-radius: 50%;
+  box-sizing: border-box;
+`;
+
+const ToggleSwitch = ({
+  isOn = false,
+  onToggle = noop,
+  disabled = false,
+  name = "",
+  label = null,
+  labelLeft = false,
+  themeValues,
+  isMobile,
+  dataQa
+}) => {
+  const ToggleSwitchInnerRing = posed(ToggleSwitchInnerRingComponent)({
+    off: {
+      backgroundColor: themeValues.offBackground,
+      transition: {
+        ease: "easeOut"
+      }
+    },
+    on: {
+      backgroundColor: themeValues.onBackground,
+      transition: {
+        ease: "easeIn"
+      }
+    },
+    disabled: {
+      backgroundColor: themeValues.disabledBackground
+    }
+  });
+
+  const ToggleSwitchMiddleRing = posed(ToggleSwitchMiddleRingComponent)({
+    off: {
+      backgroundColor: themeValues.white,
+      left: "2px",
+      top: "2px",
+      bottom: "2px",
+      right: "24px",
+      transition: {
+        ease: "backIn"
+      }
+    },
+    on: {
+      backgroundColor: themeValues.white,
+      right: "2px",
+      top: "2px",
+      bottom: "2px",
+      left: "24px",
+      transition: {
+        ease: "backIn"
+      }
+    },
+    disabled: {
+      backgroundColor: themeValues.white,
+      left: "2px",
+      top: "2px",
+      bottom: "2px",
+      right: "24px"
+    }
+  });
+
+  const VisibleSwitch = posed(VisibleSwitchComponent)({
+    focusable: true,
+    hoverable: true,
+    pressable: true,
+    focus: {
+      outline: "0px ridge rgba(170, 50, 220, 0)",
+      boxShadow: "0px 2px 5px 0px rgba(0,0,0,0.5)"
+    },
+    hover: {
+      boxShadow: "0px 2px 5px 0px rgba(0,0,0,0.5)"
+    },
+    off: {
+      backgroundColor: themeValues.offBackground,
+      transition: {
+        ease: "easeOut"
+      }
+    },
+    on: {
+      backgroundColor: themeValues.onBackground,
+      transition: {
+        ease: "easeIn"
+      }
+    },
+    disabled: {
+      backgroundColor: themeValues.disabledBackground
+    }
+  });
+
+  const handleKeyDown = e => {
+    if (e.keyCode === 13) {
+      onToggle();
+    }
+  };
+
+  return (
+    <Box
+      padding="0"
+      extraStyles={
+        labelLeft ? themeValues.leftLabelStyles : themeValues.rightLabelStyles
+      }
+      focusStyles={`outline: ${themeValues.onBackground} auto 5px`}
+    >
+      <Center>
+        <Cluster justify="stretch" align="center">
+          <Cover minHeight="100%" singleChild>
+            <Box
+              minWidth="100%"
+              padding="0"
+              extraStyles={`display: flex; align-items: center;`}
+              dataQa={dataQa}
+            >
+              <HiddenToggleSwitchBox
+                checked={isOn}
+                onChange={disabled ? noop : onToggle}
+                disabled={disabled}
+                id={`#toggle-${name}`}
+                isMobile={isMobile}
+              />
+              <VisibleSwitch
+                name={name}
+                htmlFor={`#toggle-${name}`}
+                onClick={disabled ? noop : onToggle}
+                onKeyDown={disabled ? noop : handleKeyDown}
+                pose={disabled ? "disabled" : isOn ? "on" : "off"}
+                tabIndex={disabled ? -1 : 0}
+                disabled={disabled}
+                isMobile={isMobile}
+              >
+                <ToggleSwitchMiddleRing>
+                  <ToggleSwitchInnerRing />
+                </ToggleSwitchMiddleRing>
+              </VisibleSwitch>
+            </Box>
+          </Cover>
+          {label && (
+            <Heading
+              variant={"h4"}
+              weight={FONT_WEIGHT_SEMIBOLD}
+              extraStyles={`margin: 0 0.5rem; position: relative; bottom: 1px; display: inline-block;`}
+              color={CHARADE_GREY}
+            >
+              {label}
+            </Heading>
+          )}
+        </Cluster>
+      </Center>
+    </Box>
+  );
+};
+
+export default themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues);

package/src/components/atoms/toggle-switch/ToggleSwitch.theme.js

@@ -0,0 +1,36 @@
+import {
+  WHITE,
+  REGENT_GREY,
+  IRON_GREY,
+  MATISSE_BLUE
+} from "../../../constants/colors";
+
+const onBackground = `${MATISSE_BLUE}`;
+const disabledBackground = `${IRON_GREY}`;
+const white = `${WHITE}`;
+const offBackground = `${REGENT_GREY}`;
+
+const labelStyles = `
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+`;
+
+const rightLabelStyles = `
+  ${labelStyles}
+  flex-direction: row;
+`;
+
+const leftLabelStyles = `
+  ${labelStyles}
+  flex-direction: row-reverse;
+`;
+
+export const fallbackValues = {
+  onBackground,
+  disabledBackground,
+  white,
+  offBackground,
+  rightLabelStyles,
+  leftLabelStyles
+};

package/src/components/atoms/toggle-switch/index.js

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

package/src/components/index.js

@@ -0,0 +1,3 @@
+export * from "./atoms";
+export * from "./molecules";
+export * from "./templates";

package/src/components/molecules/address-form/AddressForm.js

@@ -0,0 +1,110 @@
+import React, { useEffect } from "react";
+import { required, hasLength } from "redux-freeform";
+import StateProvinceDropdown from "../../atoms/state-province-dropdown";
+// import CountryDropdown from "../../atoms/country-dropdown";
+import { zipFormat } from "../../../util/formats";
+import {
+  FormInput,
+  FormContainer,
+  FormInputColumn
+} from "../../atoms/form-layouts";
+
+const AddressForm = ({
+  variant = "default",
+  fields,
+  actions,
+  clearOnDismount,
+  showErrors,
+  handleSubmit
+}) => {
+  if (clearOnDismount) {
+    useEffect(() => () => actions.form.clear(), []);
+  }
+
+  const street1ErrorMessages = {
+    [required.error]: "Street is required"
+  };
+  const cityErrorMessages = {
+    [required.error]: "City is required"
+  };
+  const zipErrorMessages = {
+    [required.error]: "Zip code is required",
+    [hasLength.error]: "Zip code must be 5 or 9 digits"
+  };
+  const stateProvinceErrorMessages = {
+    [required.error]: "State or Province is required"
+  };
+  // const countryErrorMessages = {
+  //   [required.error]: "Country is required"
+  // };
+
+  const isUS = fields.country.rawValue === "US";
+
+  return (
+    <FormContainer variant={variant} role="form" aria-label="Address">
+      <FormInputColumn>
+        {/* <CountryDropdown
+          labelTextWhenNoError="Country"
+          errorMessages={countryErrorMessages}
+          field={fields.country}
+          onChange={value => {
+            actions.fields.country.set(value);
+            // temporary measure to not dirty fields until
+            // we can write a reset function for fields
+            if (fields.stateProvince.rawValue) {
+              actions.fields.stateProvince.set("");
+            }
+            if (fields.zip.rawValue) {
+              actions.fields.zip.set("");
+            }
+          }}
+          showErrors={showErrors}
+        /> */}
+        <FormInput
+          labelTextWhenNoError="Address"
+          errorMessages={street1ErrorMessages}
+          field={fields.street1}
+          fieldActions={actions.fields.street1}
+          showErrors={showErrors}
+          onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+        />
+        <FormInput
+          labelTextWhenNoError="Apt, Suite, Unit, Floor, etc. (Optional)"
+          field={fields.street2}
+          fieldActions={actions.fields.street2}
+          showErrors={showErrors}
+          onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+        />
+        <FormInput
+          labelTextWhenNoError="City"
+          errorMessages={cityErrorMessages}
+          field={fields.city}
+          fieldActions={actions.fields.city}
+          showErrors={showErrors}
+          onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+        />
+        <StateProvinceDropdown
+          labelTextWhenNoError={isUS ? "State" : "State or Province"}
+          errorMessages={stateProvinceErrorMessages}
+          countryCode={fields.country.rawValue}
+          field={fields.stateProvince}
+          fieldActions={actions.fields.stateProvince}
+          showErrors={showErrors}
+          onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+        />
+        <FormInput
+          isNum={isUS}
+          formatter={isUS ? zipFormat : null}
+          labelTextWhenNoError="Zip code"
+          errorMessages={zipErrorMessages}
+          field={fields.zip}
+          fieldActions={actions.fields.zip}
+          showErrors={showErrors}
+          onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+        />
+      </FormInputColumn>
+    </FormContainer>
+  );
+};
+
+export default AddressForm;

package/src/components/molecules/address-form/AddressForm.state.js

@@ -0,0 +1,52 @@
+import {
+  createFormState,
+  required,
+  onlyIntegers,
+  hasLength,
+  validateWhen,
+  matchesRegex
+} from "redux-freeform";
+
+//TODO: Will make zip code able to have more than 5 digits once we add in the FormattedInput because it will have issues with format of 60606-1111.
+
+const formConfig = {
+  street1: {
+    validators: [required()]
+  },
+  street2: {
+    validators: []
+  },
+  city: {
+    validators: [required()]
+  },
+  stateProvince: {
+    validators: [required()]
+  },
+  country: {
+    defaultValue: "US",
+    validators: [required()]
+  },
+  zip: {
+    validators: [
+      required(),
+      validateWhen(
+        validateWhen(hasLength(5, 5), hasLength(0, 5)),
+        matchesRegex("US"),
+        "country"
+      ),
+      validateWhen(
+        validateWhen(hasLength(9, 9), hasLength(6, 9)),
+        matchesRegex("US"),
+        "country"
+      )
+    ],
+    constraints: [
+      validateWhen(onlyIntegers(), matchesRegex("US"), "country"),
+      validateWhen(hasLength(0, 9), matchesRegex("US"), "country")
+    ]
+  }
+};
+
+export const { reducer, mapStateToProps, mapDispatchToProps } = createFormState(
+  formConfig
+);

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

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

package/src/components/molecules/change-password-form/ChangePasswordForm.js

@@ -0,0 +1,92 @@
+import React, { useEffect } from "react";
+import {
+  required,
+  hasLength,
+  matchesField,
+  hasNumber,
+  hasLowercaseLetter,
+  hasUppercaseLetter,
+  hasSpecialCharacter
+} from "redux-freeform";
+import {
+  FormInput,
+  FormContainer,
+  FormInputColumn
+} from "../../atoms/form-layouts";
+import { Box, Cluster } from "../../atoms/layouts";
+import PasswordRequirements from "../../atoms/password-requirements";
+
+const ChangePasswordForm = ({
+  clearOnDismount,
+  fields,
+  actions,
+  handleSubmit,
+  showErrors,
+  isMobile
+}) => {
+  if (clearOnDismount) {
+    useEffect(() => () => actions.form.clear(), []);
+  }
+
+  const currentPasswordErrorMessages = {
+    [required.error]: "Current Password is required"
+  };
+  const newPasswordErrorMessages = {
+    [required.error]: "New Password field is required.",
+    [hasLength.error]: "Your new password must have at least 8 characters",
+    [hasNumber.error]: "Your new password must contain at least one number",
+    [hasLowercaseLetter.error]:
+      "Your new password must contain at least one lowercase letter",
+    [hasUppercaseLetter.error]:
+      "Your new password must contain at least one uppercase letter",
+    [hasSpecialCharacter.error]:
+      "Your new password must contain at least one special character (!@#$%^&*.?)"
+  };
+  const confirmNewPasswordErrorMessages = {
+    [matchesField.error]: "Confirm password must match your new password"
+  };
+
+  return (
+    <FormContainer role="form" aria-label="Change password">
+      <FormInputColumn>
+        <FormInput
+          labelTextWhenNoError="Current password"
+          errorMessages={currentPasswordErrorMessages}
+          field={fields.currentPassword}
+          fieldActions={actions.fields.currentPassword}
+          showErrors={showErrors}
+          onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          type="password"
+        />
+        <FormInput
+          labelTextWhenNoError="New password"
+          errorMessages={newPasswordErrorMessages}
+          field={fields.newPassword}
+          fieldActions={actions.fields.newPassword}
+          showErrors={showErrors}
+          onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          type="password"
+        />
+        <FormInput
+          labelTextWhenNoError="Confirm password"
+          errorMessages={confirmNewPasswordErrorMessages}
+          field={fields.confirmNewPassword}
+          fieldActions={actions.fields.confirmNewPassword}
+          showErrors={showErrors}
+          onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          type="password"
+        />
+      </FormInputColumn>
+      <Box padding={isMobile ? "1rem 0 0" : "1.5rem 0 0"}>
+        <Cluster justify="center" align="center">
+          <PasswordRequirements
+            password={fields.newPassword}
+            isMobile={isMobile}
+          />
+        </Cluster>
+      </Box>
+    </FormContainer>
+  );
+};
+
+export default ChangePasswordForm;

package/src/components/molecules/change-password-form/ChangePasswordForm.state.js

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

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

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