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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.10.4-beta.0",
+  "version": "11.10.4-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

@@ -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; 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

@@ -55,8 +55,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/editable-list/EditableList.js

@@ -23,6 +23,7 @@ const EditableList = ({
   titleWeight = "400",
   canAdd = true,
   addItem,
+  addItemDestination,
   removeItem,
   editItem,
   itemName,
@@ -168,6 +169,8 @@ 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/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