@thecb/components 11.10.4-beta.2 → 11.10.5

package/package.json

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

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

@@ -55,8 +55,8 @@ 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>

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/molecules/editable-list/EditableList.js

@@ -23,7 +23,6 @@ const EditableList = ({
   titleWeight = "400",
   canAdd = true,
   addItem,
-  addItemDestination,
   removeItem,
   editItem,
   itemName,
@@ -169,8 +168,6 @@ const EditableList = ({
           <Box padding={items.length === 0 ? "0" : "1rem 0 0"}>
             <Placeholder
               text={addText}
-              isLink={!!addItemDestination}
-              destination={addItemDestination}
               action={addItem}
               dataQa={"Add " + qaPrefix}
               aria-label={addText}

package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.js

@@ -54,7 +54,7 @@ const TermsAndConditionsModal = ({
       weight={themeValues.fontWeight}
       hoverStyles={themeValues.modalLinkHoverFocus}
       textDecoration={themeValues.modalLinkTextDecoration}
-      extraStyles={`display: inline-block; width: fit-content; cursor: pointer`}
+      extraStyles={`display: inline-block; width: fit-content; cursor: pointer; min-height: 24px; line-height: 24px;`}
       role="button" // This should always be a "button" since it opens a modal
       className="modal-trigger"
     >

package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.stories.js

@@ -0,0 +1,110 @@
+import React from "react";
+import TermsAndConditionsModal from "./TermsAndConditionsModal";
+
+const TermsContent = () => (
+  <p>
+    By enrolling, you agree to the automatic payment terms. Payments will be
+    processed on the first of each month using your selected payment method. You
+    may cancel at any time by contacting support. See our{" "}
+    <a href="#">Privacy Policy</a> for more details.
+  </p>
+);
+
+const meta = {
+  title: "Molecules/TermsAndConditionsModal",
+  component: TermsAndConditionsModal,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    link: "Terms and Conditions",
+    title: "Terms and Conditions",
+    terms: <TermsContent />,
+    isOpen: false,
+    linkVariant: "p",
+    initialFocusSelector: "[name='Cancel']"
+  },
+  argTypes: {
+    link: {
+      description: "Text displayed for the modal trigger link",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "Terms and Conditions" }
+      }
+    },
+    title: {
+      description: "Title displayed in the modal header",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "Terms & Conditions" }
+      }
+    },
+    isOpen: {
+      description: "Whether the modal is currently open",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    acceptText: {
+      description:
+        "Text for the accept button. If omitted, only a close button is shown.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    linkVariant: {
+      description: "Text size variant for the trigger link",
+      control: "select",
+      options: ["p", "pL", "pS", "pXS", "pXXS", "pXL"],
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "p" }
+      }
+    },
+    initialFocusSelector: {
+      description: "CSS selector for the element that receives initial focus",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const Default = {};
+
+export const SmallVariant = {
+  args: {
+    linkVariant: "pS"
+  }
+};
+
+export const ExtraSmallVariant = {
+  args: {
+    linkVariant: "pXS"
+  }
+};
+
+export const LargeVariant = {
+  args: {
+    linkVariant: "pL"
+  }
+};
+
+export const WithAcceptButton = {
+  args: {
+    acceptText: "I Accept"
+  }
+};
+
+export const CustomLinkText = {
+  args: {
+    link: "Learn More",
+    linkVariant: "pS"
+  }
+};

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