@thecb/components 11.11.1-beta.2 → 11.11.1

package/package.json

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

@@ -45,11 +45,7 @@ const CardType = ({ type, size = "small" }) => {
   const normalizedType = normalizeType(type);
   const { label, [size]: IconComponent } =
     cardBrands[normalizedType] || cardBrands.default;
-  return (
-    <span>
-      <IconComponent />
-    </span>
-  );
+  return <IconComponent />;
 };
 
 export default CardType;

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

@@ -2,8 +2,8 @@ import React from "react";
 import styled from "styled-components";
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./FormattedBankAccount.theme";
-import BankIcon from "../icons/BankIcon";
-import { Stack, Box } from "../layouts";
+import BankIconLarge from "../icons/BankIconLarge";
+import { Stack } from "../layouts";
 import Text from "../text";
 
 export const BankItemWrapper = styled.div`
@@ -11,6 +11,12 @@ export const BankItemWrapper = styled.div`
   justify-content: flex-start;
   align-items: center;
 `;
+export const BankIconWrapper = styled.div`
+  margin-right: 8px;
+  width: 36px;
+  height: auto;
+  display: flex;
+`;
 
 export const BankAccountText = styled.h4`
   color: ${({ color }) => color};
@@ -32,9 +38,9 @@ const FormattedBankAccount = ({
   themeValues
 }) => (
   <BankItemWrapper>
-    <Box padding="0.25rem 0 0 0" extraStyles={`margin-right: 1rem;`}>
-      <BankIcon />
-    </Box>
+    <BankIconWrapper>
+      <BankIconLarge />
+    </BankIconWrapper>
     <Stack childGap="0">
       {accountType === CHECKING && (
         <BankAccountText color={themeValues.textColor}>

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

@@ -14,7 +14,7 @@ export const CreditCardWrapper = styled.div`
 `;
 
 export const CCIconWrapper = styled.div`
-  margin-right: 16px;
+  margin-right: 8px;
   width: 36px;
   height: auto;
   display: flex;
@@ -30,36 +30,36 @@ const FormattedCreditCard = ({
 }) => {
   const { isMobile } = useContext(ThemeContext);
   return (
-  <CreditCardWrapper>
-    <CCIconWrapper>
-      <CardType type={type} size={isMobile ? "small" : "large"} />
-    </CCIconWrapper>
-    <Stack childGap="0">
-      <Box padding="0">
-        <Text
-          variant="p"
-          padding="0"
-          color={themeValues.textColor}
-          textAlign="left"
-          extraStyles={`display: inline-block;`}
-        >
-          {`Card ending in ${lastFour}`}
-        </Text>
-        {expireDate && (
-          <Fragment>
-            {renderCardStatus(expirationStatus, expireDate, "left", "p")}
-          </Fragment>
+    <CreditCardWrapper>
+      <CCIconWrapper>
+        <CardType type={type} size={isMobile ? "small" : "large"} />
+      </CCIconWrapper>
+      <Stack childGap="0">
+        <Box padding="0">
+          <Text
+            variant="p"
+            padding="0"
+            color={themeValues.textColor}
+            textAlign="left"
+            extraStyles={`display: inline-block;`}
+          >
+            {`Card ending in ${lastFour}`}
+          </Text>
+          {expireDate && (
+            <Fragment>
+              {renderCardStatus(expirationStatus, expireDate, "left", "p")}
+            </Fragment>
+          )}
+        </Box>
+        {autoPay && (
+          <Text
+            variant="p"
+            color={themeValues.autopayTextColor}
+            extraStyles={`font-style: italic; font-size: .75rem;`}
+          >{`Autopay On`}</Text>
         )}
-      </Box>
-      {autoPay && (
-        <Text
-          variant="p"
-          color={themeValues.autopayTextColor}
-          extraStyles={`font-style: italic; font-size: .75rem;`}
-        >{`Autopay On`}</Text>
-      )}
-    </Stack>
-  </CreditCardWrapper>
+      </Stack>
+    </CreditCardWrapper>
   );
 };
 export default themeComponent(

package/src/components/molecules/editable-list/EditableList.js

@@ -6,7 +6,6 @@ import {
 import { Box, Stack } from "../../atoms/layouts";
 import Placeholder from "../../atoms/placeholder";
 import ButtonWithAction from "../../atoms/button-with-action";
-import { InternalLink } from "../../atoms/link";
 import Text from "../../atoms/text";
 import Title from "../../atoms/title";
 import {
@@ -43,8 +42,7 @@ const EditableList = ({
   qaPrefix,
   ariaLabel,
   editItemAriaRole = "",
-  disablePlaceholder = false,
-  getEditHref = null
+  disablePlaceholder = false
 }) => {
   const addText = `Add a${
     itemName[0].match(/[aieouAIEOU]/) ? "n" : ""
@@ -152,25 +150,14 @@ const EditableList = ({
                       dataQa={qaPrefix + " Edit"}
                       key={`Edit ${item.id}`}
                     >
-                      {getEditHref ? (
-                        <InternalLink
-                          to={getEditHref(item)}
-                          fontWeight="400"
-                          extraStyles={`margin: 0.5rem; min-width: 0;`}
-                          aria-label={`Edit ${ariaLabel || itemName}`}
-                        >
-                          Edit
-                        </InternalLink>
-                      ) : (
-                        <ButtonWithAction
-                          variant="smallGhost"
-                          text="Edit"
-                          action={() => editItem(item.id)}
-                          extraStyles={`min-width: 0;`}
-                          aria-label={`Edit ${ariaLabel || itemName}`}
-                          role={editItemAriaRole}
-                        />
-                      )}
+                      <ButtonWithAction
+                        variant="smallGhost"
+                        text="Edit"
+                        action={() => editItem(item.id)}
+                        extraStyles={`min-width: 0;`}
+                        aria-label={`Edit ${ariaLabel || itemName}`}
+                        role={editItemAriaRole}
+                      />
                     </Box>
                   )}
                 </EditableListItemControls>

package/src/components/molecules/radio-section/radio-button/RadioButton.js

@@ -105,7 +105,7 @@ const RadioButton = ({
         borderWidth="1px"
         borderStyle="solid"
         borderRadius="12px"
-        margin="6px 14px 6px 6px"
+        margin="6px 8px 6px 6px"
         height="24px"
         width="24px"
         variants={buttonBorder}