@thecb/components 11.9.2-beta.1 → 11.9.2-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.9.2-beta.1",
+  "version": "11.9.2-beta.2",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/form-layouts/FormInput.js

@@ -148,7 +148,7 @@ const FormInput = ({
     <Stack childGap="0.25rem">
       <Box padding="0">
         {helperModal ? (
-          <Cluster justify="space-between" align="center">
+          <Cluster justify="space-between" align="center" overflow>
             {labelDisplayOverride ? (
               labelDisplayOverride
             ) : (

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; font-size: .75rem;`}
-        >{`Autopay On`}</Text>
+          extraStyles={`font-style: italic;`}
+        >{`Autopay Enabled`}</Text>
       )}
     </Stack>
   </BankItemWrapper>

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

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

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

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

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

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

package/src/components/molecules/email-form/EmailForm.js

@@ -34,7 +34,8 @@ const EmailForm = ({
   );
   const emailFieldErrorMessages = {
     [required.error]: "Email address is required",
-    [isProbablyEmail.error]: "Invalid email address"
+    [isProbablyEmail.error]:
+      "Please enter a valid email address in the format user@example.com"
   };
 
   return (

package/src/components/molecules/email-form/EmailForm.stories.js

@@ -0,0 +1,210 @@
+import React from "react";
+import EmailForm from "./EmailForm";
+import { connect, Provider } from "react-redux";
+import { createStore } from "redux";
+import { createFormState, isProbablyEmail } from "redux-freeform";
+import { noop } from "../../../util/general";
+import { fn } from "@storybook/test";
+
+const formConfig = {
+  email: {
+    validators: [isProbablyEmail()]
+  }
+};
+
+const { mapStateToProps, mapDispatchToProps, reducer } = createFormState(
+  formConfig
+);
+
+const store = createStore(
+  reducer,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+);
+
+const FormWrapper = props => <EmailForm {...props} />;
+
+const ConnectedEmailForm = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(FormWrapper);
+
+export default {
+  title: "Molecules/EmailForm",
+  component: ConnectedEmailForm,
+  tags: ["!autodocs"],
+  parameters: {
+    layout: "centered"
+  },
+  args: {
+    variant: "default",
+    clearOnDismount: undefined,
+    fields: undefined,
+    actions: undefined,
+    showErrors: false,
+    guestCheckout: false,
+    handleSubmit: noop,
+    showWalletCheckbox: false,
+    saveToWallet: noop,
+    walletCheckboxMarked: false,
+    isRequired: false
+  },
+  argTypes: {
+    variant: {
+      description: "Form container variant.",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "default" }
+      }
+    },
+    fields: {
+      description:
+        "Field data, usually generated with [redux-freeform](https://github.com/CityBaseInc/redux-freeform).",
+      control: { type: "object" },
+      table: {
+        type: { summary: "object" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    actions: {
+      description:
+        "Field actions, usually generated with [redux-freeform](https://github.com/CityBaseInc/redux-freeform).",
+      control: { type: "object" },
+      table: {
+        type: { summary: "object" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    clearOnDismount: {
+      description:
+        "If `true`, `actions.form.clear()` will be called when the component unmounts.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    showErrors: {
+      description: "Show form field errors.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    guestCheckout: {
+      description:
+        "If `true`, displays a message about creating a wallet later for faster checkout.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    handleSubmit: {
+      description:
+        "Function called when the `Enter` key is pressed on the email input (via `onKeyDown` prop passed to `FormInput` component).",
+      control: { type: "object" },
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    showWalletCheckbox: {
+      description:
+        "If `true`, displays a checkbox to save the email address to wallet.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    saveToWallet: {
+      description: "Function called when the wallet checkbox is toggled.",
+      control: { type: "object" },
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    walletCheckboxMarked: {
+      description: "Whether the wallet checkbox is checked.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    isRequired: {
+      description: "If `true`, the email field becomes required.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    }
+  },
+  decorators: [
+    Story => (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    )
+  ]
+};
+
+export const Basic = args => <ConnectedEmailForm {...args} />;
+
+export const ShowErrors = {
+  args: {
+    showErrors: true
+  },
+  render: args => <ConnectedEmailForm {...args} />
+};
+
+export const GuestCheckout = {
+  args: {
+    guestCheckout: true
+  },
+  render: args => <ConnectedEmailForm {...args} />
+};
+
+export const WithWalletCheckbox = {
+  args: {
+    showWalletCheckbox: true,
+    saveToWallet: fn()
+  },
+  render: args => <ConnectedEmailForm {...args} />
+};
+
+export const Required = {
+  args: {
+    isRequired: true
+  },
+  render: args => <ConnectedEmailForm {...args} />
+};
+
+export const RequiredWithErrors = {
+  args: {
+    isRequired: true,
+    showErrors: true
+  },
+  render: args => <ConnectedEmailForm {...args} />
+};
+
+export const GuestCheckoutWithWallet = {
+  args: {
+    guestCheckout: true,
+    showWalletCheckbox: true,
+    saveToWallet: fn(),
+    walletCheckboxMarked: true
+  },
+  render: args => <ConnectedEmailForm {...args} />
+};
+
+export const HandleSubmit = {
+  args: {
+    handleSubmit: fn()
+  },
+  render: args => <ConnectedEmailForm {...args} />
+};

package/src/util/formats.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { createFormat } from "formatted-input";
 import Text from "../components/atoms/text";
-import { ASH_GREY, FIRE_YELLOW, STORM_GREY } from "../constants/colors";
+import { ASH_GREY, FIRE_YELLOW } from "../constants/colors";
 export const formatDelimiter = "_";
 
 export const phoneFormats = [
@@ -101,8 +101,7 @@ export const renderCardStatus = (
         <Text
           as={as}
           variant="pXS"
-          fontSize=".75rem"
-          color={STORM_GREY}
+          color={ASH_GREY}
           extraStyles={`text-align: ${textAlign}; margin: ${textMargin};`}
         >
           Exp Date {expireDate}
@@ -113,7 +112,6 @@ export const renderCardStatus = (
         <Text
           as={as}
           variant="pXS"
-          fontSize=".75rem"
           color={FIRE_YELLOW}
           extraStyles={`text-align: ${textAlign}; margin: ${textMargin};`}
         >
@@ -125,8 +123,7 @@ export const renderCardStatus = (
         <Text
           as={as}
           variant="pXS"
-          fontSize=".75rem"
-          color={STORM_GREY}
+          color={ASH_GREY}
           extraStyles={`text-align: ${textAlign}; margin: ${textMargin};`}
         >
           Expired