@thecb/components 11.9.0 → 11.10.0-beta.1

package/package.json

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

@@ -34,9 +34,17 @@ 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}>
       <IconComponent />

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

@@ -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;
 `;
@@ -30,13 +30,13 @@ const FormattedCreditCard = ({
 }) => (
   <CreditCardWrapper>
     <CCIconWrapper>
-      <CardType type={type} />
+      <CardType type={type} size="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;`}

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/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;
   `;