@thecb/components 12.0.0-beta.0 → 12.0.0-beta.2

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

@@ -0,0 +1,76 @@
+import React from "react";
+import FormSelect from "./FormSelect";
+import { connect, Provider } from "react-redux";
+import { createStore } from "redux";
+import { createFormState, required } from "redux-freeform";
+
+const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
+  example: {
+    validators: [required()]
+  }
+});
+
+const store = createStore(
+  reducer,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+);
+
+const errorMessages = {
+  [required.error]: "You must choose an option!"
+};
+
+const options = [
+  { value: "", text: "Choose an option" },
+  { value: "foo", text: "foo" },
+  { value: "bar", text: "bar" },
+  { value: "baz", text: "baz" },
+  { value: "disabled", text: "disabled" }
+];
+
+const FormWrapper = props => (
+  <FormSelect
+    {...props}
+    field={props.fields.example}
+    fieldActions={props.actions.fields.example}
+  />
+);
+
+const ConnectedFormSelect = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(FormWrapper);
+
+export default {
+  title: "Atoms/FormSelect",
+  component: ConnectedFormSelect,
+  tags: ["!autodocs"],
+  args: {
+    labelTextWhenNoError: "Form Select Example",
+    errorMessages: errorMessages,
+    options: options,
+    showErrors: false,
+    onChange: null,
+    dropdownMaxHeight: "600px",
+    disabledValues: ["disabled"],
+    disabled: false,
+    hasTitles: false,
+    autocompleteValue: "",
+    smoothScroll: true,
+    dataQa: "form-select-qa",
+    widthFitOptions: false,
+    isRequired: false
+  },
+  argTypes: {
+    fieldActions: { type: "object" },
+    field: { type: "object" }
+  },
+  decorators: [
+    Story => (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    )
+  ]
+};
+
+export const Basic = args => <ConnectedFormSelect {...args} />;

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

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import {
   GHOST_GREY,
   ERROR_COLOR,
-  MATISSE_BLUE
+  LUCKY_POINT
 } from "../../../constants/colors";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 
@@ -41,7 +41,7 @@ export const SelectField = styled.select`
   box-shadow: none;
 
   &:focus {
-    border: 1px solid ${MATISSE_BLUE};
+    border: 1px solid ${LUCKY_POINT};
   }
 `;
 

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

@@ -6,11 +6,14 @@ import {
   MINESHAFT_GREY,
   DUSTY_GREY,
   GREY_CHATEAU,
-  ATHENS_GREY
+  ATHENS_GREY,
+  LUCKY_POINT,
+  LUCKY_POINT_DARK,
+  HAWKES_BLUE
 } from "../../../constants/colors";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 
-const linkColor = { default: `${MATISSE_BLUE}`, disabled: `${MATISSE_BLUE}` };
+const linkColor = { default: `${LUCKY_POINT}`, disabled: `${LUCKY_POINT}` };
 const formBackgroundColor = {
   default: `${WHITE}`,
   disabled: `${WHITE}`,
@@ -33,7 +36,7 @@ const fontWeight = {
   disabled: `${FONT_WEIGHT_REGULAR}`
 };
 const hoverFocusStyles = {
-  default: `color: #0E506D; outline: none; text-decoration: underline;  `,
+  default: `color: ${LUCKY_POINT_DARK}; outline: none; text-decoration: underline;  `,
   disabled: `color: #6D717E;`
 };
 

package/src/components/atoms/form-select/index.d.ts

@@ -24,6 +24,9 @@ export interface FormSelectProps {
   smoothScroll?: boolean;
   dataQa?: string | null;
   widthFitOptions?: boolean;
+  isRequired?: boolean;
+  labelTextVariant?: string;
+  errorLabelTextVariant?: string;
 }
 
 export const FormSelect: React.FC<Expand<FormSelectProps> &

package/src/components/atoms/formatted-address/FormattedAddress.mdx

@@ -0,0 +1,13 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as FormattedAddressStories from './FormattedAddress.stories.js';
+
+<Meta of={FormattedAddressStories} />
+
+<Title />
+
+FormattedAddress is a composition of Box and Text components to help create consistent formatting of addresses. The outer padding and text color are themeable.
+
+<Story />
+
+<Controls />

package/src/components/atoms/formatted-address/FormattedAddress.stories.js

@@ -0,0 +1,138 @@
+import FormattedAddress from "./FormattedAddress";
+import React from "react";
+
+const meta = {
+  title: "Atoms/FormattedAddress",
+  component: FormattedAddress,
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  tags: ["!autodocs"],
+  args: {
+    street1: undefined,
+    city: undefined,
+    stateProvince: undefined,
+    country: undefined,
+    zip: undefined,
+    street2: null,
+    name: null,
+    themeValues: undefined,
+    qaPrefix: "address"
+  },
+  argTypes: {
+    street1: {
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    street2: {
+      description: "Optional",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: null }
+      }
+    },
+    city: {
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    stateProvince: {
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    country: {
+      description: "Optional",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    zip: {
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    name: {
+      description: "Optional",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: null }
+      }
+    },
+    qaPrefix: {
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "address" }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const Basic = {
+  args: {
+    street1: "363 W. Erie St.",
+    city: "Chicago",
+    stateProvince: "IL",
+    zip: "60654"
+  }
+};
+
+export const WithName = {
+  args: {
+    street1: "363 W. Erie St.",
+    city: "Chicago",
+    stateProvince: "IL",
+    zip: "60654",
+    name: "John Doe"
+  }
+};
+
+export const WithStreet2 = {
+  args: {
+    street1: "363 W. Erie St.",
+    city: "Chicago",
+    stateProvince: "IL",
+    zip: "60654",
+    street2: "Floor 7"
+  }
+};
+
+export const WithCountry = {
+  args: {
+    street1: "363 W. Erie St.",
+    city: "Chicago",
+    stateProvince: "IL",
+    zip: "60654",
+    country: "USA"
+  }
+};
+
+export const WithAllProps = {
+  args: {
+    name: "John Doe",
+    street1: "363 W. Erie St.",
+    street2: "Floor 7",
+    city: "Chicago",
+    stateProvince: "IL",
+    zip: "60654",
+    country: "USA",
+    qaPrefix: "all-props"
+  }
+};

package/src/components/atoms/formatted-bank-account/FormattedBankAccount.js

@@ -50,8 +50,8 @@ const FormattedBankAccount = ({
         <Text
           variant="p"
           color={themeValues.autopayTextColor}
-          extraStyles={`font-style: italic;`}
-        >{`Autopay Enabled`}</Text>
+          extraStyles={`font-style: italic; font-size: .75rem;`}
+        >{`Autopay On`}</Text>
       )}
     </Stack>
   </BankItemWrapper>

package/src/components/atoms/formatted-bank-account/FormattedBankAccount.mdx

@@ -0,0 +1,17 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as FormattedBankAccountStories from './FormattedBankAccount.stories.js';
+
+<Meta of={FormattedBankAccountStories} />
+
+<Title />
+
+The FormattedBankAccount is a simple component that takes bank account information and presents it in a standard way that can be reused throughout applications. The component requires:
+
+- lastFour (last four of the account number),
+- accountType (one of CHECKING or SAVINGS),
+- autoPay (boolean, whether an autopay is associated with the account)
+
+<div style={{ marginBottom: "2em"}}>
+    <Story />
+</div>

package/src/components/atoms/formatted-bank-account/FormattedBankAccount.stories.js

@@ -0,0 +1,57 @@
+import FormattedBankAccount from "./FormattedBankAccount";
+
+const meta = {
+  title: "Atoms/FormattedBankAccount",
+  component: FormattedBankAccount,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    lastFour: "9456",
+    accountType: "CHECKING",
+    autoPay: false
+  },
+  argTypes: {
+    lastFour: {
+      description: "The last four digits of the bank account number",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    accountType: {
+      description: "The type of bank account - either CHECKING or SAVINGS",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    autoPay: {
+      description: "Whether the bank account is being used for autopay",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const FormattedCheckingAccount = {};
+
+export const FormattedSavingsAccount = {
+  args: {
+    lastFour: "5139",
+    accountType: "SAVINGS"
+  }
+};
+
+export const AccountWithAutopay = {
+  args: {
+    lastFour: "7291",
+    accountType: "CHECKING",
+    autoPay: true
+  }
+};

package/src/components/atoms/formatted-bank-account/FormattedBankAccount.theme.js

@@ -1,7 +1,7 @@
-import { CHARADE_GREY, REGENT_GREY } from "../../../constants/colors";
+import { CHARADE_GREY, SEA_GREEN } from "../../../constants/colors";
 
 const textColor = `${CHARADE_GREY}`;
-const autopayTextColor = `${REGENT_GREY}`;
+const autopayTextColor = `${SEA_GREEN}`;
 
 export const fallbackValues = {
   textColor,

package/src/components/atoms/formatted-credit-card/FormattedCreditCard.js

@@ -1,6 +1,6 @@
-import React, { Fragment } from "react";
-import styled from "styled-components";
-import GenericCard from "../icons/GenericCard";
+import React, { Fragment, useContext } from "react";
+import styled, { ThemeContext } from "styled-components";
+import CardType from "../card-type";
 import Text from "../text";
 import { Box, Stack } from "../layouts";
 import { fallbackValues } from "./FormattedCreditCard.theme";
@@ -15,27 +15,30 @@ export const CreditCardWrapper = styled.div`
 
 export const CCIconWrapper = styled.div`
   margin-right: 16px;
-  width: 30px;
+  width: 36px;
   height: auto;
   display: flex;
 `;
 
 const FormattedCreditCard = ({
   lastFour,
+  type,
   autoPay,
   expireDate,
   expirationStatus,
   themeValues
-}) => (
+}) => {
+  const { isMobile } = useContext(ThemeContext);
+  return (
   <CreditCardWrapper>
     <CCIconWrapper>
-      <GenericCard />
+      <CardType type={type} size={isMobile ? "small" : "large"} />
     </CCIconWrapper>
     <Stack childGap="0">
       <Box padding="0">
         <Text
           variant="p"
-          padding="0 0 0 8px"
+          padding="0"
           color={themeValues.textColor}
           textAlign="left"
           extraStyles={`display: inline-block;`}
@@ -52,12 +55,13 @@ const FormattedCreditCard = ({
         <Text
           variant="p"
           color={themeValues.autopayTextColor}
-          extraStyles={`font-style: italic;`}
-        >{`Autopay Enabled`}</Text>
+          extraStyles={`font-style: italic; font-size: .75rem;`}
+        >{`Autopay On`}</Text>
       )}
     </Stack>
   </CreditCardWrapper>
-);
+  );
+};
 export default themeComponent(
   FormattedCreditCard,
   "FormattedCreditCard",

package/src/components/atoms/formatted-credit-card/FormattedCreditCard.mdx

@@ -0,0 +1,40 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as FormattedCreditCardStories from './FormattedCreditCard.stories.js';
+
+<Meta of={FormattedCreditCardStories} />
+
+<Title />
+
+The FormattedCreditCard is a simple component that takes credit card information and presents it in a standard way that can be reused throughout applications. The component requires:
+
+- lastFour (last four of the account number),
+- autoPay (boolean, whether an autopay is associated with the account)
+- expirationStatus (one of ACTIVE, EXPIRING_SOON, EXPIRED)
+- expireDate (date of card expiration in MM/YY)
+
+The expirationStatus of a card is typically managed by the application consuming this component. That status can either be received from an API call, or generated using logic in a utility function. Navigate uses the following utility function to attach a status to credit cards:
+
+```
+export const getCardExpirationStatus = card => {
+  const ACTIVE = "ACTIVE";
+  const EXPIRING_SOON = "EXPIRING_SOON";
+  const EXPIRED = "EXPIRED";
+
+  const { expiryMonth, expiryYear } = card;
+  const today = dayjs();
+  const expiration = dayjs(`20${expiryYear}-${expiryMonth}`);
+  const cardExpirationStatus = expiration.diff(today, "months");
+
+  return cardExpirationStatus >= 1
+    ? ACTIVE
+    : cardExpirationStatus === 0
+    ? EXPIRING_SOON
+    : EXPIRED;
+};
+```
+The text for a card's expiration status and date is generated by the `renderCardStatus` function in the formats.js file of this library.
+
+<div style={{ marginBottom: "2em"}}>
+    <Story />
+</div>

package/src/components/atoms/formatted-credit-card/FormattedCreditCard.stories.js

@@ -0,0 +1,74 @@
+import FormattedCreditCard from "./FormattedCreditCard";
+
+const meta = {
+  title: "Atoms/FormattedCreditCard",
+  component: FormattedCreditCard,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    lastFour: "1003",
+    autoPay: false,
+    expirationDate: undefined,
+    expirationStatus: undefined
+  },
+  argTypes: {
+    lastFour: {
+      description: "The last four digits of the credit card number",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    autoPay: {
+      description: "Whether the bank account is being used for autopay",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    expirationDate: {
+      description: "The expiration date of the credit card",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    expirationStatus: {
+      description:
+        "Whether a card will expire soon, one of ACTIVE, EXPIRING_SOON, or EXPIRED",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const ActiveCreditCard = {
+  args: {
+    autoPay: true,
+    expireDate: "10/29",
+    expirationStatus: "ACTIVE"
+  }
+};
+
+export const ExpiringSoonCreditCard = {
+  args: {
+    lastFour: "2613",
+    expireDate: "12/24",
+    expirationStatus: "EXPIRING_SOON",
+    autoPay: true
+  }
+};
+
+export const ExpiredCreditCard = {
+  args: {
+    lastFour: "8054",
+    expireDate: "01/24",
+    expirationStatus: "EXPIRED"
+  }
+};

package/src/components/atoms/formatted-credit-card/FormattedCreditCard.theme.js

@@ -1,7 +1,7 @@
-import { CHARADE_GREY, REGENT_GREY } from "../../../constants/colors";
+import { CHARADE_GREY, SEA_GREEN } from "../../../constants/colors";
 
 const textColor = `${CHARADE_GREY}`;
-const autopayTextColor = `${REGENT_GREY}`;
+const autopayTextColor = `${SEA_GREEN}`;
 
 export const fallbackValues = {
   textColor,

package/src/components/atoms/icons/AgencyIcon.js

@@ -0,0 +1,24 @@
+import React from "react";
+
+const AgencyIcon = ({ color = "#292A33", ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="21"
+    viewBox="0 0 20 21"
+    fill="none"
+    {...props}
+  >
+    <g id="Agency / Agency - S">
+      <path
+        id="Icon - Agency"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.5625 4.375H3.875L3.875 16.625H9.5625V7.875V7V4.375ZM10.4375 7.875V16.625H16.125V7.875H10.4375ZM10.4375 7H16.125C16.6082 7 17 7.39175 17 7.875V16.625C17 17.1082 16.6082 17.5 16.125 17.5H10.4375H9.5625H3.875C3.39175 17.5 3 17.1082 3 16.625V4.375C3 3.89175 3.39175 3.5 3.875 3.5H9.5625C10.0457 3.5 10.4375 3.89175 10.4375 4.375V7ZM8.46875 6.5625H4.96875V7.4375H8.46875V6.5625ZM4.96875 8.3125H8.46875V9.1875H4.96875V8.3125ZM8.46875 10.0625H4.96875V10.9375H8.46875V10.0625ZM4.96875 11.8125H8.46875V12.6875H4.96875V11.8125ZM4.96875 13.5625H8.46875V14.4375H4.96875V13.5625ZM11.5312 10.0625H15.0312V10.9375H11.5312V10.0625ZM11.5312 11.8125H15.0312V12.6875H11.5312V11.8125ZM15.0312 13.5625H11.5312V14.4375H15.0312V13.5625Z"
+        fill={color}
+      />
+    </g>
+  </svg>
+);
+
+export default AgencyIcon;

package/src/components/atoms/icons/AmExLargeIcon.js

@@ -0,0 +1,54 @@
+import React from "react";
+
+const AmExLargeIcon = () => {
+  return (
+    <svg
+      width="36"
+      height="24"
+      viewBox="0 0 36 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label="American Express"
+    >
+      <g clipPath="url(#clip0_amex_large)">
+        <g clipPath="url(#clip1_amex_large)">
+          <path
+            d="M32.868 21.376L31.204 19.52L29.4761 21.376H26.084H18.788V12.736H15.396L19.62 3.072H23.7161L25.188 6.4V3.072H30.3079L31.204 5.568L32.1 3.072H36.004V1.6C36.004 0.704 35.2999 0 34.404 0H0.0999999C-0.795999 0 -1.5 0.704 -1.5 1.6V22.4C-1.5 23.296 -0.795999 24 0.0999999 24H34.404C35.2999 24 36.004 23.296 36.004 22.4V21.376H32.868Z"
+            fill="#0071CE"
+          />
+          <path
+            d="M33.3161 20.352H36.004L32.484 16.576L36.004 12.864H33.38L31.14 15.296L28.9639 12.864H26.2759L29.86 16.64L26.2759 20.352H28.9L31.14 17.92L33.3161 20.352Z"
+            fill="#0071CE"
+          />
+          <path
+            d="M21.9878 18.624V17.472H26.2118V15.744H21.9878V14.592H26.2759V12.864H19.9398V20.352H26.2759V18.624H21.9878Z"
+            fill="#0071CE"
+          />
+          <path
+            d="M34.02 11.776H35.94V4.224L32.868 4.288L31.204 8.96L29.4761 4.288H26.2759V11.776H28.3241V6.528L30.244 11.776H32.036L34.02 6.528V11.776Z"
+            fill="#0071CE"
+          />
+          <path
+            d="M23.012 4.28796H20.388L17.06 11.776H19.2999L19.94 10.304H23.396L24.036 11.776H26.34L23.012 4.28796ZM20.6439 8.57596L21.6679 6.14396L22.692 8.57596H20.6439Z"
+            fill="#0071CE"
+          />
+          <path
+            d="M34.148 16.3839L36.004 18.432V14.3359L34.148 16.3839Z"
+            fill="#0071CE"
+          />
+        </g>
+      </g>
+      <defs>
+        <clipPath id="clip0_amex_large">
+          <rect width="36" height="24" rx="1.5" fill="white" />
+        </clipPath>
+        <clipPath id="clip1_amex_large">
+          <rect width="36" height="24" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default AmExLargeIcon;