@thecb/components 4.0.3 → 4.0.7-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.0.3",
+  "version": "4.0.7-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/form-layouts/FormLayouts.theme.js

@@ -1,5 +1,5 @@
 import {
-  STORM_GREY,
+  FIREFLY_GREY,
   MATISSE_BLUE,
   WHITE,
   SEASHELL_WHITE,
@@ -23,7 +23,7 @@ const inputBackgroundColor = {
   disabled: `${SEASHELL_WHITE}`
 };
 const color = { default: `${MINESHAFT_GREY}`, disabled: `${DUSTY_GREY}` };
-const labelColor = { default: `${STORM_GREY}`, disabled: `${STORM_GREY}` };
+const labelColor = { default: `${FIREFLY_GREY}`, disabled: `${FIREFLY_GREY}` };
 const borderColor = { default: `${GREY_CHATEAU}`, disabled: `${GREY_CHATEAU}` };
 const lineHeight = { default: "1rem", disabled: "1rem" };
 const fontSize = { default: "0.875rem", disabled: "0.875rem" };

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

@@ -2,9 +2,11 @@ import React from "react";
 import styled from "styled-components";
 import GenericCard from "../icons/GenericCard";
 import Text from "../text";
-import { Stack } from "../layouts";
+import Paragraph from "../paragraph";
+import { Box, Stack } from "../layouts";
 import { fallbackValues } from "./FormattedCreditCard.theme";
 import { themeComponent } from "../../../util/themeUtils";
+import { ASH_GREY } from "../../../constants/colors";
 
 export const CreditCardWrapper = styled.div`
   display: flex;
@@ -19,21 +21,33 @@ export const CCIconWrapper = styled.div`
   display: flex;
 `;
 
-const FormattedCreditCard = ({ lastFour, autoPay, themeValues }) => (
+const FormattedCreditCard = ({
+  lastFour,
+  autoPay,
+  expireDate,
+  themeValues
+}) => (
   <CreditCardWrapper>
     <CCIconWrapper>
       <GenericCard />
     </CCIconWrapper>
     <Stack childGap="0">
-      <Text
-        variant="p"
-        padding="0 0 0 8px"
-        color={themeValues.textColor}
-        textAlign="left"
-        extraStyles={`display: inline-block;`}
-      >
-        {`Card ending in ${lastFour}`}
-      </Text>
+      <Box padding="0">
+        <Text
+          variant="p"
+          padding="0 0 0 8px"
+          color={themeValues.textColor}
+          textAlign="left"
+          extraStyles={`display: inline-block;`}
+        >
+          {`Card ending in ${lastFour}`}
+        </Text>
+        {expireDate && (
+          <Paragraph variant="pXS" color={ASH_GREY} textAlign="left">
+            {`Exp ${expireDate}`}
+          </Paragraph>
+        )}
+      </Box>
       {autoPay && (
         <Text
           variant="p"

package/src/components/atoms/heading/Heading.js

@@ -15,12 +15,14 @@ const Heading = ({
   extraStyles = ``,
   className,
   variant = "h1",
+  as = "h1",
   dataQa,
   children,
   ...rest
 }) => (
   <HeadingText
-    as={variant}
+    variant={variant}
+    as={as}
     weight={weight}
     color={color}
     margin={margin}

package/src/components/atoms/labeled-amount/LabeledAmount.js

@@ -5,12 +5,13 @@ import { Stack } from "../layouts";
 import Heading from "../heading";
 import Paragraph from "../paragraph";
 
-const LabeledAmount = ({ variant = "pL", label, amount, themeValues }) => {
+const LabeledAmount = ({ variant = "pL", label, amount, themeValues, as }) => {
   const LabeledAmountText = variant === "h6" ? Heading : Paragraph;
   return (
     <Stack direction="row">
       <LabeledAmountText
         variant={variant}
+        as={as}
         weight={themeValues.fontWeight}
         extraStyles="text-align: start; flex: 3;"
       >
@@ -18,6 +19,7 @@ const LabeledAmount = ({ variant = "pL", label, amount, themeValues }) => {
       </LabeledAmountText>
       <LabeledAmountText
         variant={variant}
+        as={as}
         weight={themeValues.fontWeight}
         extraStyles="text-align: end; flex: 1;"
       >

package/src/components/atoms/layouts/Box.styled.js

@@ -27,8 +27,10 @@ export const BoxWrapper = styled(
     maxWidth,
     padding,
     hiddenStyles,
+    ariaControls,
+    ariaLabel,
     ...props
-  }) => <div {...props} />
+  }) => <div aria-controls={ariaControls} aria-label={ariaLabel} {...props} />
 )`
   position: relative;
   box-sizing: border-box;
@@ -106,11 +108,5 @@ export const BoxWrapper = styled(
     css`
       ${extraStyles}
     `}
-
-  ${({ hiddenStyles }) =>
-    hiddenStyles &&
-    css`
-      display: none;
-    `}
 `;
 /* eslint-enable no-unused-vars */

package/src/components/molecules/highlight-tab-row/HighlightTabRow.js

@@ -44,6 +44,7 @@ const HighlightTabRow = ({ tabs, highlightIndex, themeValues, isMobile }) => {
               highlightIndex == i ? themeValues.textColor : "transparent"
             }
             borderWidthOverride="0 0 3px 0"
+            extraStyles="text-align: center;"
           >
             <Text
               variant="p"

package/src/components/molecules/module/Module.js

@@ -16,12 +16,11 @@ const Module = ({
   <Fragment>
     {heading && (
       <Heading
-        variant={variant === "default" ? "h5" : "h3"}
+        variant={variant === "default" ? "h5" : "h2"}
         weight={themeValues.fontWeight}
         color={themeValues.fontColor}
         margin={`${spacing} 0 ${themeValues.titleSpacing} 0`}
         textAlign={themeValues.textAlign}
-        aria-level={variant === "default" ? "3" : "1"}
       >
         {heading}
       </Heading>

package/src/components/molecules/module/Module.theme.js

@@ -5,7 +5,7 @@ const fontWeight = { default: "600", largeTitle: "700" };
 const fontColor = { default: CHARADE_GREY, largeTitle: CHARADE_GREY };
 const lineHeight = { default: "2rem", largeTitle: "2rem" };
 const textAlign = { default: "left", largeTitle: "left" };
-const titleType = { default: "h5", largeTitle: "h3" };
+const titleType = { default: "h5", largeTitle: "h1" };
 const titleSpacing = { default: "0.5rem", largeTitle: "1.125rem" };
 const boxShadow = {
   default:

package/src/components/molecules/payment-details/PaymentDetails.js

@@ -31,6 +31,7 @@ const PaymentDetailsContent = ({
     </Box>
     <SolidDivider />
     <LabeledAmount
+      as="h2"
       variant={themeValues.labeledAmountTotal}
       label="Total"
       amount={displayCurrency(total)}
@@ -123,14 +124,14 @@ const PaymentDetails = ({
   ) : isCollapsible ? (
     <Box width="100%" padding="none">
       <Cluster justify="space-between" align="center">
-        <Heading variant="h6" weight="700">
+        <Heading variant="h5" weight="700" as="h1">
           {titleText}
         </Heading>
         {displayCurrency(total)}
       </Cluster>
     </Box>
   ) : (
-    <Heading variant="h3" weight="700" margin="1rem 0 0 0">
+    <Heading as="h1" variant="h3" weight="700" margin="1rem 0 0 0">
       {titleText}
     </Heading>
   );

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

@@ -181,6 +181,7 @@ const RadioSection = ({
                             key={icon.img}
                             fade={!icon.enabled}
                             isMobile={isMobile}
+                            alt={icon.altText}
                           />
                         ))}
                       </Cluster>