@thecb/components 11.11.0-beta.4 → 11.11.0-beta.7

package/package.json

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

package/src/components/atoms/card-type/CardType.js

@@ -34,11 +34,19 @@ const cardBrands = {
   }
 };
 
+const normalizeType = type => {
+  if (!type) return undefined;
+  const lower = type.toLowerCase();
+  if (lower === "mastercard") return "master_card";
+  return lower;
+};
+
 const CardType = ({ type, size = "small" }) => {
+  const normalizedType = normalizeType(type);
   const { label, [size]: IconComponent } =
-    cardBrands[type] || cardBrands.default;
+    cardBrands[normalizedType] || cardBrands.default;
   return (
-    <span role="img" aria-label={label}>
+    <span>
       <IconComponent />
     </span>
   );

package/src/components/atoms/dropdown/Dropdown.js

@@ -13,7 +13,6 @@ import "core-js/proposals/relative-indexing-method";
 
 import {
   ERROR_COLOR,
-  GREY_CHATEAU,
   MINESHAFT_GREY,
   STORM_GREY,
   WHITE
@@ -35,7 +34,7 @@ const IconWrapper = styled.div`
 
 const DropdownContentWrapper = styled.div`
   transform-origin: 0 0;
-  border: 1px solid ${GREY_CHATEAU};
+  border: 1px solid ${STORM_GREY};
   border-radius: 2px;
   background-color: ${WHITE};
   padding: 8px 0 8px;
@@ -349,7 +348,7 @@ const Dropdown = ({
             ? ERROR_COLOR
             : isOpen
             ? themeValues.selectedColor
-            : GREY_CHATEAU
+            : STORM_GREY
         }
         dataQa={placeholder}
         extraStyles={

package/src/components/atoms/dropdown/DropdownIcon.js

@@ -2,6 +2,7 @@ import React from "react";
 
 const DropdownIcon = () => (
   <svg
+    aria-hidden="true"
     version="1.2"
     xmlns="http://www.w3.org/2000/svg"
     overflow="visible"

package/src/components/atoms/dropdown/DropdownIconV2.js

@@ -7,6 +7,7 @@ const DropdownIconV2 = ({
   ...props
 }) => (
   <svg
+    aria-hidden="true"
     width={width}
     height={height}
     viewBox={`0 0 ${width} ${height}`}

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

@@ -5,6 +5,7 @@ import { fallbackValues } from "./FormLayouts.theme.js";
 import { themeComponent } from "../../../util/themeUtils";
 import { createIdFromString } from "../../../util/general.js";
 import Text from "../text";
+import ButtonWithAction from "../button-with-action";
 import { Box, Cluster, Stack } from "../layouts";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 import { ERROR_COLOR, ROYAL_BLUE } from "../../../constants/colors";
@@ -171,7 +172,7 @@ const FormInput = ({
           </Cluster>
         ) : (
           <Box padding="0" minWidth="100%">
-            <Cluster justify="space-between" align="center">
+            <Cluster justify="space-between" align="center" overflow>
               {labelDisplayOverride ? (
                 labelDisplayOverride
               ) : (
@@ -191,22 +192,14 @@ const FormInput = ({
                 </Text>
               )}
               {type === "password" && (
-                <Text
-                  variant={labelTextVariant}
-                  color={themeValues.linkColor}
-                  weight={themeValues.fontWeight}
-                  hoverStyles={themeValues.hoverFocusStyles}
-                  extraStyles={`text-decoration: underline; cursor: pointer; &:focus { outline-offset: -2px; }`}
-                  onClick={() => setShowPassword(!showPassword)}
-                  tabIndex="0"
+                <ButtonWithAction
+                  variant="smallGhost"
+                  text={showPassword ? "Hide" : "Show"}
+                  action={() => setShowPassword(!showPassword)}
                   aria-label={showPassword ? "Hide Password" : "Show password"}
-                  aria-live="polite"
-                  onKeyPress={e =>
-                    e.key === "Enter" && setShowPassword(!showPassword)
-                  }
-                >
-                  {showPassword ? "Hide" : "Show"}
-                </Text>
+                  extraStyles={`margin: 0; min-width: auto;`}
+                  textExtraStyles={`color: ${themeValues.linkColor};`}
+                />
               )}
               {isMobile && decorator && (
                 <Box padding="0 0 0 auto">{decorator}</Box>

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.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,5 +1,5 @@
-import React, { Fragment } from "react";
-import styled from "styled-components";
+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";
@@ -15,7 +15,7 @@ export const CreditCardWrapper = styled.div`
 
 export const CCIconWrapper = styled.div`
   margin-right: 16px;
-  width: 30px;
+  width: 36px;
   height: auto;
   display: flex;
 `;
@@ -27,16 +27,18 @@ const FormattedCreditCard = ({
   expireDate,
   expirationStatus,
   themeValues
-}) => (
+}) => {
+  const { isMobile } = useContext(ThemeContext);
+  return (
   <CreditCardWrapper>
     <CCIconWrapper>
-      <CardType type={type} />
+      <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;`}
@@ -53,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.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/AmExSmallIcon.js

@@ -8,6 +8,8 @@ const AmExSmallIcon = () => {
       viewBox="0 0 24 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label="American Express"
     >
       <g clipPath="url(#clip0_3693_1095)">
         <g clipPath="url(#clip1_3693_1095)">

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

@@ -8,6 +8,8 @@ const DiscoverSmallIcon = () => {
       viewBox="0 0 24 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label="Discover"
     >
       <g clipPath="url(#clip0_3818_267)">
         <path

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

@@ -9,7 +9,7 @@ const GenericCardLarge = () => {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       role="img"
-      aria-label="Card Payment"
+      aria-label="Credit card"
     >
       <rect width="36" height="24" rx="2" fill="#15749D" />
       <path

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

@@ -8,6 +8,8 @@ const GenericSmallIcon = () => {
       viewBox="0 0 24 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label="Credit card"
     >
       <rect width="24" height="16" rx="2" fill="#15749D" />
       <path

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

@@ -8,6 +8,8 @@ const MasterCardSmallIcon = () => {
       viewBox="0 0 24 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label="Mastercard"
     >
       <rect width="24" height="16" rx="1" fill="#F6F6F9" />
       <path

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

@@ -8,6 +8,8 @@ const VisaSmallIcon = () => {
       viewBox="0 0 24 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label="Visa"
     >
       <path
         fillRule="evenodd"

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/components/molecules/forgot-password-form/ForgotPasswordForm.js

@@ -15,7 +15,8 @@ const ForgotPasswordForm = ({
   }
   const EmailErrorMessages = {
     [required.error]: "Email address is required",
-    [isProbablyEmail.error]: "Email address is not valid"
+    [isProbablyEmail.error]:
+      "Please enter a valid email address in the format user@example.com"
   };
 
   return (

package/src/components/molecules/login-form/LoginForm.js

@@ -15,7 +15,8 @@ const LoginForm = ({
   }
   const emailErrorMessages = {
     [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"
   };
   const passwordErrorMessages = {
     [required.error]: "Password is required"

package/src/components/molecules/radio-section/InnerRadioSection.js

@@ -69,8 +69,8 @@ const InnerRadioSection = ({
   `;
 
   const RightIcon = styled.img`
-    height: ${({ isMobile }) => (isMobile ? "14px" : "18px")};
-    width: ${({ isMobile }) => (isMobile ? "22px" : "28px")};
+    height: ${({ isMobile }) => (isMobile ? "16px" : "24px")};
+    width: ${({ isMobile }) => (isMobile ? "24px" : "36px")};
     ${({ fade }) => fade && "opacity: 0.4;"}
     transition: opacity 0.3s ease;
   `;
@@ -159,7 +159,7 @@ const InnerRadioSection = ({
               <Box padding={section.titleIcon ? "0 0 0 8px" : "0"}>
                 <Text
                   as="label"
-                  htmlFor={`radio-input-${idString(section)}`}
+                  htmlFor={`radio-${idString(section)}`}
                   color={CHARADE_GREY}
                 >
                   {section.title}

package/src/components/molecules/radio-section/RadioSection.stories.js

@@ -0,0 +1,142 @@
+import React, { useState } from "react";
+import RadioSection from "./RadioSection";
+import { Box } from "../../atoms/layouts";
+
+const PaymentMethodSections = () => {
+  const [openSection, setOpenSection] = useState("");
+  return (
+    <RadioSection
+      toggleOpenSection={setOpenSection}
+      openSection={openSection}
+      isSectionRequired={true}
+      sections={[
+        {
+          id: "checking-1234",
+          title: "Checking Account ending in 1234",
+          content: (
+            <Box padding="1rem">
+              <p>Checking account payment details would appear here.</p>
+            </Box>
+          ),
+          required: true,
+          dataQa: "Checking Account"
+        },
+        {
+          id: "savings-5678",
+          title: "Savings Account ending in 5678",
+          content: (
+            <Box padding="1rem">
+              <p>Savings account payment details would appear here.</p>
+            </Box>
+          ),
+          required: true,
+          dataQa: "Savings Account"
+        },
+        {
+          id: "card-4321",
+          title: "Card ending in 4321",
+          content: (
+            <Box padding="1rem">
+              <p>Credit card payment details would appear here.</p>
+            </Box>
+          ),
+          required: true,
+          dataQa: "Credit Card"
+        }
+      ]}
+    />
+  );
+};
+
+const BasicSections = () => {
+  const [openSection, setOpenSection] = useState("");
+  return (
+    <RadioSection
+      toggleOpenSection={setOpenSection}
+      openSection={openSection}
+      sections={[
+        {
+          id: "section-a",
+          title: "Section A",
+          content: (
+            <Box padding="1rem">
+              <p>Content for section A</p>
+            </Box>
+          )
+        },
+        {
+          id: "section-b",
+          title: "Section B",
+          content: (
+            <Box padding="1rem">
+              <p>Content for section B</p>
+            </Box>
+          )
+        },
+        {
+          id: "section-c",
+          title: "Section C",
+          content: (
+            <Box padding="1rem">
+              <p>Content for section C</p>
+            </Box>
+          )
+        }
+      ]}
+    />
+  );
+};
+
+const WithDisabledSection = () => {
+  const [openSection, setOpenSection] = useState("");
+  return (
+    <RadioSection
+      toggleOpenSection={setOpenSection}
+      openSection={openSection}
+      sections={[
+        {
+          id: "enabled-section",
+          title: "Enabled Option",
+          content: (
+            <Box padding="1rem">
+              <p>This option is selectable.</p>
+            </Box>
+          )
+        },
+        {
+          id: "disabled-section",
+          title: "Disabled Option",
+          disabled: true,
+          content: (
+            <Box padding="1rem">
+              <p>This option is disabled.</p>
+            </Box>
+          )
+        }
+      ]}
+    />
+  );
+};
+
+const meta = {
+  title: "Molecules/RadioSection",
+  component: RadioSection,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"]
+};
+
+export default meta;
+
+export const PaymentMethods = {
+  render: () => <PaymentMethodSections />
+};
+
+export const Basic = {
+  render: () => <BasicSections />
+};
+
+export const Disabled = {
+  render: () => <WithDisabledSection />
+};