@thecb/components 4.1.10 → 4.1.12-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.1.10",
+  "version": "4.1.12-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -48,7 +48,7 @@
     "prettier": "^1.19.1",
     "pretty-quick": "^2.0.1",
     "react-redux": "^7.2.0",
-    "react-router-dom": "6.0.0-alpha.3",
+    "react-router-dom": "^5.2.0",
     "redux": "^4.0.5",
     "rollup": "^1.21.4",
     "rollup-plugin-babel": "^4.3.3",

package/src/components/atoms/form-layouts/FormLayouts.theme.js

@@ -1,5 +1,5 @@
 import {
-  FIREFLY_GREY,
+  CHARADE_GREY,
   MATISSE_BLUE,
   WHITE,
   SEASHELL_WHITE,
@@ -23,7 +23,7 @@ const inputBackgroundColor = {
   disabled: `${SEASHELL_WHITE}`
 };
 const color = { default: `${MINESHAFT_GREY}`, disabled: `${DUSTY_GREY}` };
-const labelColor = { default: `${FIREFLY_GREY}`, disabled: `${FIREFLY_GREY}` };
+const labelColor = { default: `${CHARADE_GREY}`, disabled: `${CHARADE_GREY}` };
 const borderColor = { default: `${GREY_CHATEAU}`, disabled: `${GREY_CHATEAU}` };
 const lineHeight = { default: "1rem", disabled: "1rem" };
 const fontSize = { default: "0.875rem", disabled: "0.875rem" };

package/src/components/atoms/form-select/FormSelect.js

@@ -1,8 +1,11 @@
 import React, { useState, useRef, useEffect } from "react";
 import Dropdown from "../dropdown";
 import Text from "../text";
-import { STORM_GREY } from "../../../constants/colors";
+import { ERROR_COLOR } from "../../../constants/colors";
 import { SelectContainer, SelectLabel } from "./FormSelect.styled";
+import { fallbackValues } from "./FormSelect.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import { Box, Cluster } from "../layouts";
 
 const FormSelect = ({
   fieldActions,
@@ -12,7 +15,9 @@ const FormSelect = ({
   field,
   showErrors,
   onChange,
-  dropdownMaxHeight
+  dropdownMaxHeight,
+  disabledValues,
+  themeValues
 }) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -32,33 +37,63 @@ const FormSelect = ({
 
   return (
     <SelectContainer ref={dropdownRef}>
-      <Text
-        variant="pS"
-        color={STORM_GREY}
-        weight="400"
-        extraStyles={`margin-bottom: 4px;`}
-      >
-        {labelTextWhenNoError}
-      </Text>
+      <Box padding="0" minWidth="100%">
+        <Cluster justify="space-between" align="center">
+          <Text
+            as="label"
+            variant="pS"
+            color={themeValues.labelColor}
+            weight={themeValues.fontWeight}
+            extraStyles={`word-break: break-word;
+              font-family: Public Sans;
+              &::first-letter {
+                text-transform: uppercase;
+              }`}
+          >
+            {labelTextWhenNoError}
+          </Text>
+        </Cluster>
+      </Box>
       <Dropdown
         maxHeight={dropdownMaxHeight}
         placeholder={options[0] ? options[0].text : ""}
         options={options}
         value={field.rawValue}
+        disabledValues={disabledValues}
         isOpen={open}
-        isError={false}
+        isError={
+          (field.hasErrors && field.dirty) || (field.hasErrors && showErrors)
+        }
         onSelect={
           onChange ? value => onChange(value) : value => fieldActions.set(value)
         }
         onClick={() => setOpen(!open)}
       />
       <SelectLabel field={field} showErrors={showErrors}>
-        {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors)
-          ? errorMessages[field.errors[0]]
-          : null}
+        {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (
+          <Text
+            color={ERROR_COLOR}
+            variant="pXS"
+            weight={themeValues.fontWeight}
+            extraStyles={`word-break: break-word;
+                font-family: Public Sans;
+                &::first-letter {
+                  text-transform: uppercase;
+                }`}
+          >
+            {errorMessages[field.errors[0]]}
+          </Text>
+        ) : (
+          <Text extraStyles={`height: ${themeValues.lineHeight};`} />
+        )}
       </SelectLabel>
     </SelectContainer>
   );
 };
 
-export default FormSelect;
+export default themeComponent(
+  FormSelect,
+  "FormSelect",
+  fallbackValues,
+  "default"
+);

package/src/components/atoms/form-select/FormSelect.stories.js

@@ -1,6 +1,5 @@
 import React from "react";
 import { connect } from "react-redux";
-import { boolean } from "@storybook/addon-knobs";
 import { createFormState, required } from "redux-freeform";
 
 import FormSelect from "./FormSelect";
@@ -18,7 +17,8 @@ const options = [
   { value: "", text: "choose name" },
   { value: "foo", text: "foo" },
   { value: "bar", text: "bar" },
-  { value: "baz", text: "baz" }
+  { value: "baz", text: "baz" },
+  { value: "disabled", text: "disabled" }
 ];
 
 const story = page({
@@ -32,10 +32,12 @@ const story = page({
 
 const FormWrapper = ({ fields, actions }) => (
   <FormSelect
+    labelTextWhenNoError="Form Select"
     errorMessages={errorMessages}
     options={options}
     field={fields.thing}
     fieldActions={actions.fields.thing}
+    disabledValues={["disabled"]}
   />
 );
 

package/src/components/atoms/form-select/FormSelect.styled.js

@@ -1,10 +1,6 @@
 import styled from "styled-components";
 import {
-  MINESHAFT_GREY,
   STORM_GREY,
-  WHITE,
-  SEASHELL_WHITE,
-  DUSTY_GREY,
   GHOST_GREY,
   ERROR_COLOR,
   MATISSE_BLUE
@@ -17,6 +13,9 @@ export const SelectContainer = styled.div`
   flex-direction: column;
   justify-content: space-between;
   align-items: flex-start;
+  > * + * {
+    margin-top: 0.25rem;
+  }
 `;
 
 export const SelectLabel = styled.label`
@@ -53,8 +52,9 @@ export const SelectField = styled.select`
   font-family: Public Sans;
   line-height: 2rem;
   font-weight: ${FONT_WEIGHT_REGULAR};
-  background-color: ${({ disabled }) => (disabled ? SEASHELL_WHITE : WHITE)};
-  color: ${({ disabled }) => (disabled ? DUSTY_GREY : MINESHAFT_GREY)};
+  background-color: ${({ themeValues }) =>
+    themeValues.inputBackgroundColor && themeValues.inputBackgroundColor};
+  color: ${({ themeValues }) => themeValues.color && themeValues.color};
   box-shadow: none;
 
   &:focus {

package/src/components/atoms/form-select/FormSelect.theme.js

@@ -0,0 +1,52 @@
+import {
+  CHARADE_GREY,
+  MATISSE_BLUE,
+  WHITE,
+  SEASHELL_WHITE,
+  MINESHAFT_GREY,
+  DUSTY_GREY,
+  GREY_CHATEAU,
+  ATHENS_GREY
+} from "../../../constants/colors";
+import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+
+const linkColor = { default: `${MATISSE_BLUE}`, disabled: `${MATISSE_BLUE}` };
+const formBackgroundColor = {
+  default: `${WHITE}`,
+  disabled: `${WHITE}`,
+  checkout: `${ATHENS_GREY}`,
+  collapsible: `${ATHENS_GREY}`
+};
+
+const inputBackgroundColor = {
+  default: `${WHITE}`,
+  disabled: `${SEASHELL_WHITE}`
+};
+const color = { default: `${MINESHAFT_GREY}`, disabled: `${DUSTY_GREY}` };
+const labelColor = { default: `${CHARADE_GREY}`, disabled: `${CHARADE_GREY}` };
+const borderColor = { default: `${GREY_CHATEAU}`, disabled: `${GREY_CHATEAU}` };
+const lineHeight = { default: "1rem", disabled: "1rem" };
+const fontSize = { default: "0.875rem", disabled: "0.875rem" };
+const errorFontSize = { default: "0.75rem", disabled: "0.75rem" };
+const fontWeight = {
+  default: `${FONT_WEIGHT_REGULAR}`,
+  disabled: `${FONT_WEIGHT_REGULAR}`
+};
+const hoverFocusStyles = {
+  default: `color: #0E506D; outline: none; text-decoration: underline;  `,
+  disabled: `color: #6E727E;`
+};
+
+export const fallbackValues = {
+  linkColor,
+  formBackgroundColor,
+  inputBackgroundColor,
+  color,
+  labelColor,
+  borderColor,
+  lineHeight,
+  fontSize,
+  errorFontSize,
+  fontWeight,
+  hoverFocusStyles
+};

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

@@ -3,7 +3,7 @@ import { required, hasLength } from "redux-freeform";
 import styled from "styled-components";
 import StateProvinceDropdown from "../../atoms/state-province-dropdown";
 import Checkbox from "../../atoms/checkbox";
-// import CountryDropdown from "../../atoms/country-dropdown";
+import CountryDropdown from "../../atoms/country-dropdown";
 import { zipFormat } from "../../../util/formats";
 import { noop } from "../../../util/general";
 import {
@@ -51,16 +51,16 @@ const AddressForm = ({
   const stateProvinceErrorMessages = {
     [required.error]: "State or Province is required"
   };
-  // const countryErrorMessages = {
-  //   [required.error]: "Country 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
+        <CountryDropdown
           labelTextWhenNoError="Country"
           errorMessages={countryErrorMessages}
           field={fields.country}
@@ -76,7 +76,7 @@ const AddressForm = ({
             }
           }}
           showErrors={showErrors}
-        /> */}
+        />
         <FormInput
           labelTextWhenNoError="Address"
           errorMessages={street1ErrorMessages}

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

@@ -16,7 +16,8 @@ const PaymentButtonBar = ({
   cancelURL,
   cancelText = "Cancel",
   redirectURL,
-  redirectText = "Return"
+  redirectText = "Return",
+  buttonFlexOverride
 }) => {
   const { isMobile } = useContext(ThemeContext);
 
@@ -68,7 +69,13 @@ const PaymentButtonBar = ({
       <SolidDivider />
       <Box padding="2.5rem 0 3.125rem 0">
         <Cluster
-          justify={!!backButton ? "space-between" : "flex-end"}
+          justify={
+            buttonFlexOverride
+              ? buttonFlexOverride
+              : !!backButton
+              ? "space-between"
+              : "flex-end"
+          }
           align="center"
           childGap="0.75rem"
         >

package/src/components/molecules/payment-form-card/PaymentFormCard.js

@@ -2,8 +2,13 @@ import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import { required, hasLength, matchesRegex } from "redux-freeform";
 import Checkbox from "../../atoms/checkbox";
+import CountryDropdown from "../../atoms/country-dropdown";
 import { checkCardBrand, noop } from "../../../util/general";
-import { expirationDateFormat, creditCardFormat } from "../../../util/formats";
+import {
+  expirationDateFormat,
+  creditCardFormat,
+  zipFormat
+} from "../../../util/formats";
 import {
   FormInput,
   FormInputColumn,
@@ -36,6 +41,9 @@ const zipCodeErrors = {
   [required.error]: "Zip code is required",
   [hasLength.error]: "Zip code is invalid"
 };
+const countryErrorMessages = {
+  [required.error]: "Country is required"
+};
 
 const PaymentFormCard = ({
   variant = "default",
@@ -61,9 +69,26 @@ const PaymentFormCard = ({
       return () => actions.form.clear();
     }
   }, []);
+  const isUS = fields.country.rawValue === "US";
   return (
     <FormContainer variant={variant} role="form" aria-label="Card payment">
       <FormInputColumn>
+        {!hideZipCode && (
+          <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.zipCode.rawValue) {
+                actions.fields.zipCode.set("");
+              }
+            }}
+            showErrors={showErrors}
+          />
+        )}
         <FormInput
           labelTextWhenNoError="Name on card"
           errorMessages={nameOnCardErrors}
@@ -111,6 +136,8 @@ const PaymentFormCard = ({
             width={isMobile ? "100%" : "50%"}
           >
             <FormInput
+              isNum={isUS}
+              formatter={isUS ? zipFormat : null}
               labelTextWhenNoError="Zip code"
               errorMessages={zipCodeErrors}
               field={fields.zipCode}

package/src/components/molecules/payment-form-card/PaymentFormCard.state.js

@@ -3,12 +3,17 @@ import {
   required,
   onlyIntegers,
   hasLength,
-  matchesRegex
+  matchesRegex,
+  validateWhen
 } 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 = {
+  country: {
+    defaultValue: "US",
+    validators: [required()]
+  },
   nameOnCard: {
     validators: [required()]
   },
@@ -29,8 +34,23 @@ const formConfig = {
     constraints: [onlyIntegers(), hasLength(0, 4)]
   },
   zipCode: {
-    validators: [required(), hasLength(5, 5)],
-    constraints: [onlyIntegers(), hasLength(0, 5)]
+    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")
+    ]
   }
 };