@thecb/components 4.0.2 → 4.0.3-beta-0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.0.2",
+  "version": "4.0.3-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/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/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>

package/.tool-versions

@@ -1 +0,0 @@
-nodejs 10.15.3