@thecb/components 4.0.9 → 4.0.10

package/dist/index.cjs.js

@@ -6119,15 +6119,17 @@ var Text = function Text(_ref) {
       extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
       hoverStyles = _ref.hoverStyles,
       onClick = _ref.onClick,
+      as = _ref.as,
       dataQa = _ref.dataQa,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, ["themeValues", "weight", "color", "extraStyles", "hoverStyles", "onClick", "dataQa", "children"]);
+      rest = _objectWithoutProperties(_ref, ["themeValues", "weight", "color", "extraStyles", "hoverStyles", "onClick", "as", "dataQa", "children"]);
 
   return /*#__PURE__*/React__default.createElement(TextSpan, _extends({
     fontSize: themeValues.fontSize,
     weight: weight,
     color: color,
     fontFamily: themeValues.fontFamily,
+    as: as,
     extraStyles: extraStyles,
     hoverStyles: hoverStyles,
     onClick: onClick,
@@ -12630,7 +12632,7 @@ var ButtonWithAction = function ButtonWithAction(_ref) {
       children = _ref.children;
   var themeContext = React.useContext(styled.ThemeContext);
   var themeValues = createThemeValues(themeContext, fallbackValues$1, "Button", variant);
-  var loadingExtraStyles = "".concat(extraStyles, "; padding-top: 0.75rem; padding-bottom: 0.75rem;");
+  var loadingExtraStyles = "".concat(extraStyles, "; padding-top: 0.75rem; padding-bottom: 0.75rem; height: ").concat(themeContext.isMobile ? "50px" : "57px", " ");
   var hoverStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.hoverBackgroundColor, ";\n    border-color: ").concat(themeValues.hoverBorderColor, ";\n    color: ").concat(themeValues.hoverColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n  ");
   var activeStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.activeBackgroundColor, ";\n    border-color: ").concat(themeValues.activeBorderColor, ";\n    color: ").concat(themeValues.activeColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n  ");
   var disabledStyles = "\n    background-clor: #6E727E;\n    border-color: #6E727E;\n    color: #FFFFFF;\n    &:focus {\n      box-shadow: 0 0 10px #6E727E;\n      outline: none;\n    }\n  ";
@@ -14337,7 +14339,7 @@ var Heading = function Heading(_ref) {
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? "h1" : _ref$variant,
       _ref$as = _ref.as,
-      as = _ref$as === void 0 ? "h1" : _ref$as,
+      as = _ref$as === void 0 ? variant : _ref$as,
       dataQa = _ref.dataQa,
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"]);
@@ -18196,7 +18198,8 @@ var Paragraph = function Paragraph(_ref) {
       extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
       dataQa = _ref.dataQa,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, ["themeValues", "weight", "color", "margin", "extraStyles", "dataQa", "children"]);
+      as = _ref.as,
+      rest = _objectWithoutProperties(_ref, ["themeValues", "weight", "color", "margin", "extraStyles", "dataQa", "children", "as"]);
 
   return /*#__PURE__*/React__default.createElement(ParagraphText, _extends({
     weight: weight,
@@ -18204,6 +18207,7 @@ var Paragraph = function Paragraph(_ref) {
     margin: margin,
     fontFamily: themeValues.fontFamily,
     fontSize: themeValues.fontSize,
+    as: as,
     extraStyles: extraStyles,
     "data-qa": dataQa
   }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
@@ -33411,7 +33415,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     variant: "h6",
     weight: FONT_WEIGHT_SEMIBOLD,
     color: themeValues.titleColor,
-    "aria-level": "3"
+    as: "h6"
   }, title), /*#__PURE__*/React__default.createElement(Motion, {
     variants: icon,
     style: {
@@ -33555,8 +33559,7 @@ var EditableList = function EditableList(_ref) {
     variant: "pL",
     weight: titleWeight,
     color: CHARADE_GREY,
-    extraStyles: "letter-spacing: 0.29px;",
-    "aria-level": "3"
+    extraStyles: "letter-spacing: 0.29px;"
   }, title)), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     borderRadius: "4px",
@@ -33799,8 +33802,7 @@ var TableListItem = function TableListItem(_ref) {
     isMobile: isMobile
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS",
-    color: CHARADE_GREY,
-    "aria-level": "3"
+    color: CHARADE_GREY
   }, title)), /*#__PURE__*/React__default.createElement(TableItemValue, {
     isMobile: isMobile
   }, /*#__PURE__*/React__default.createElement(Text$1, {
@@ -36983,11 +36985,10 @@ var TitleModule = function TitleModule(_ref) {
     variant: "h6",
     weight: FONT_WEIGHT_SEMIBOLD,
     color: titleColor,
-    "aria-level": "2"
+    as: "h2"
   }, title), /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS",
-    color: subtitleColor,
-    "aria-level": "3"
+    color: subtitleColor
   }, subtitle)));
 };
 
@@ -38416,8 +38417,7 @@ var RadioSection = function RadioSection(_ref) {
       padding: section.titleIcon ? "0 0 0 8px" : "0"
     }, /*#__PURE__*/React__default.createElement(Text$1, {
       variant: "p",
-      color: CHARADE_GREY,
-      "aria-level": "3"
+      color: CHARADE_GREY
     }, section.title))), section.rightIcons && /*#__PURE__*/React__default.createElement(Cluster, {
       childGap: "0.5rem"
     }, section.rightIcons.map(function (icon) {
@@ -39050,7 +39050,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
     weight: themeValues.fontWeight,
     color: themeValues.fontColor,
     textAlign: themeValues.textAlign,
-    "aria-level": "3"
+    as: "h5"
   }, heading)), !isMobile && /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     background: themeValues.imageBackgroundColor

package/package.json

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

package/src/components/atoms/button-with-action/ButtonWithAction.js

@@ -82,7 +82,9 @@ const ButtonWithAction = ({
     "Button",
     variant
   );
-  const loadingExtraStyles = `${extraStyles}; padding-top: 0.75rem; padding-bottom: 0.75rem;`;
+  const loadingExtraStyles = `${extraStyles}; padding-top: 0.75rem; padding-bottom: 0.75rem; height: ${
+    themeContext.isMobile ? "50px" : "57px"
+  } `;
   const hoverStyles = `
     outline: none;
     background-color: ${themeValues.hoverBackgroundColor};

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

@@ -15,7 +15,7 @@ const Heading = ({
   extraStyles = ``,
   className,
   variant = "h1",
-  as = "h1",
+  as = variant,
   dataQa,
   children,
   ...rest

package/src/components/atoms/paragraph/Paragraph.js

@@ -14,6 +14,7 @@ const Paragraph = ({
   extraStyles = ``,
   dataQa,
   children,
+  as,
   ...rest
 }) => (
   <ParagraphText
@@ -22,6 +23,7 @@ const Paragraph = ({
     margin={margin}
     fontFamily={themeValues.fontFamily}
     fontSize={themeValues.fontSize}
+    as={as}
     extraStyles={extraStyles}
     data-qa={dataQa}
     {...rest}

package/src/components/atoms/text/Text.js

@@ -13,6 +13,7 @@ const Text = ({
   extraStyles = ``,
   hoverStyles,
   onClick,
+  as,
   dataQa,
   children,
   ...rest
@@ -22,6 +23,7 @@ const Text = ({
     weight={weight}
     color={color}
     fontFamily={themeValues.fontFamily}
+    as={as}
     extraStyles={extraStyles}
     hoverStyles={hoverStyles}
     onClick={onClick}

package/src/components/molecules/collapsible-section/CollapsibleSection.js

@@ -86,7 +86,7 @@ const CollapsibleSection = ({
                 variant="h6"
                 weight={FONT_WEIGHT_SEMIBOLD}
                 color={themeValues.titleColor}
-                aria-level="3"
+                as="h6"
               >
                 {title}
               </Heading>

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

@@ -43,7 +43,6 @@ const EditableList = ({
             weight={titleWeight}
             color={CHARADE_GREY}
             extraStyles="letter-spacing: 0.29px;"
-            aria-level="3"
           >
             {title}
           </Paragraph>

package/src/components/molecules/editable-table/TableListItem.js

@@ -29,7 +29,7 @@ const TableListItem = ({
     <ItemWrapper>
       <EditableTableListItem isMobile={isMobile}>
         <TableItemKey isMobile={isMobile}>
-          <Text variant="pS" color={CHARADE_GREY} aria-level="3">
+          <Text variant="pS" color={CHARADE_GREY}>
             {title}
           </Text>
         </TableItemKey>

package/src/components/molecules/obligation/modules/TitleModule.js

@@ -11,11 +11,11 @@ const TitleModule = ({ title, subtitle, titleColor, subtitleColor }) => (
         variant="h6"
         weight={FONT_WEIGHT_SEMIBOLD}
         color={titleColor}
-        aria-level="2"
+        as="h2"
       >
         {title}
       </Heading>
-      <Text variant="pS" color={subtitleColor} aria-level="3">
+      <Text variant="pS" color={subtitleColor}>
         {subtitle}
       </Text>
     </Stack>

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

@@ -168,7 +168,7 @@ const RadioSection = ({
                         <Cluster align="center">{section.titleIcon}</Cluster>
                       )}
                       <Box padding={section.titleIcon ? "0 0 0 8px" : "0"}>
-                        <Text variant="p" color={CHARADE_GREY} aria-level="3">
+                        <Text variant="p" color={CHARADE_GREY}>
                           {section.title}
                         </Text>
                       </Box>

package/src/components/molecules/welcome-module/WelcomeModule.js

@@ -30,7 +30,7 @@ const WelcomeModule = ({ heading, isMobile, themeValues }) => {
             weight={themeValues.fontWeight}
             color={themeValues.fontColor}
             textAlign={themeValues.textAlign}
-            aria-level="3"
+            as="h5"
           >
             {heading}
           </Heading>