@thecb/components 5.6.5 → 5.6.6

package/package.json

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

package/src/components/atoms/form-layouts/FormInput.js

@@ -15,7 +15,7 @@ const InputField = styled.input`
         ? ERROR_COLOR
         : themeValues.borderColor};
   border-radius: 2px;
-  height: ${({ customHeight }) => (customHeight ? customHeight : "48px")};
+  height: ${({ $customHeight }) => ($customHeight ? $customHeight : "48px")};
   width: 100%;
   padding: 1rem;
   min-width: 100px;
@@ -47,9 +47,9 @@ const InputField = styled.input`
       background-color: #f7f7f7;
     `}
 
-  ${({ extraStyles }) =>
+  ${({ $extraStyles }) =>
     css`
-      ${extraStyles}
+      ${$extraStyles}
     `}
 `;
 
@@ -63,7 +63,7 @@ const FormattedInputField = styled(({ showErrors, themeValues, ...props }) => (
         ? ERROR_COLOR
         : themeValues.borderColor};
   border-radius: 2px;
-  height: ${({ customHeight }) => (customHeight ? customHeight : "48px")};
+  height: ${({ $customHeight }) => ($customHeight ? $customHeight : "48px")};
   width: 100%;
   padding: 1rem;
   min-width: 100px;
@@ -199,8 +199,8 @@ const FormInput = ({
             showErrors={showErrors}
             data-qa={labelTextWhenNoError}
             themeValues={themeValues}
-            customHeight={customHeight}
-            extraStyles={extraStyles}
+            $customHeight={customHeight}
+            $extraStyles={extraStyles}
             {...props}
           />
         ) : (
@@ -216,8 +216,8 @@ const FormInput = ({
             data-qa={labelTextWhenNoError}
             themeValues={themeValues}
             background={background}
-            customHeight={customHeight}
-            extraStyles={extraStyles}
+            $customHeight={customHeight}
+            $extraStyles={extraStyles}
             {...props}
           />
         )}

package/src/components/atoms/layouts/Cluster.js

@@ -29,10 +29,10 @@ const Cluster = ({
   <ClusterWrapper
     overflow={overflow}
     {...rest}
-    justifySelf={justifySelf}
-    alignSelf={alignSelf}
-    flexGrow={flexGrow}
-    extraStyles={extraStyles}
+    $justifySelf={justifySelf}
+    $alignSelf={alignSelf}
+    $flexGrow={flexGrow}
+    $extraStyles={extraStyles}
   >
     <ClusterInnerWrapper
       justify={justify}

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

@@ -7,10 +7,10 @@ export const ClusterWrapper = styled(({ overflow, ...props }) => (
 ))`
   overflow: ${({ overflow }) => (overflow ? "visible" : "hidden")};
   box-sizing: border-box;
-  justify-self: ${({ justifySelf }) => justifySelf};
-  align-self: ${({ alignSelf }) => alignSelf};
-  flex-grow: ${({ flexGrow }) => flexGrow};
-  ${({ extraStyles }) => extraStyles};
+  justify-self: ${({ $justifySelf }) => $justifySelf};
+  align-self: ${({ $alignSelf }) => $alignSelf};
+  flex-grow: ${({ $flexGrow }) => $flexGrow};
+  ${({ $extraStyles }) => $extraStyles};
 `;
 
 export const ClusterInnerWrapper = styled.div`

package/src/components/atoms/nav-footer/NavFooter.stories.js

@@ -23,7 +23,7 @@ export const navFooter = () => (
   <NavFooter
     leftContent={<Left />}
     rightContent={<Right />}
-    headerHeight={text("headerHeight", "105px", "props")}
+    $headerHeight={text("headerHeight", "105px", "props")}
     backgroundColor={select("activeColor", colors, "white", "props")}
     footerPadding={text("footerPadding", "1.5rem 1rem", "props")}
     isMobile={boolean("isMobile", false, "props")}

package/src/components/molecules/tabs/Tabs.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, Fragment } from "react";
 import { Stack, Box, Cluster } from "../../atoms/layouts";
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./Tabs.theme";
@@ -46,9 +46,9 @@ const Tabs = ({
       </Box>
       <Box className="tab-content">
         <Box>
-          {tabsConfig.tabs.map(tab => {
+          {tabsConfig.tabs.map((tab, idx) => {
             if (tab.label !== activeTab) return undefined;
-            return tab.content;
+            return <Fragment key={idx}>{tab.content}</Fragment>;
           })}
         </Box>
       </Box>