@thecb/components 11.4.1-beta.0 → 11.4.1-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.4.1-beta.0",
+  "version": "11.4.1-beta.2",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

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

@@ -149,7 +149,6 @@ const FormTextarea = ({
             (field.dirty && field.hasErrors) || (field.hasErrors && showErrors)
           }
           onChange={e => setValue(e.target.value)}
-          onBlur={e => handleOnBlur(e.target.value)}
           value={field.rawValue}
           field={field}
           showErrors={showErrors}

package/src/components/atoms/tab/Tab.js

@@ -18,13 +18,13 @@ const Tab = ({ label, activeTab, setActiveTab }) => {
       className={className}
       onClick={onClick}
       margin="0 0 -1px 0"
-      padding="0.5rem 0.75rem"
+      padding="1rem 0.75rem"
       background={activeTab === label ? WHITE : GRECIAN_GREY}
       extraStyles={`cursor: pointer; flex-grow: 1; text-align: center; ${
         activeTab === label ? `list-style: none;` : ``
       }`}
     >
-      <Text>{label}</Text>
+      <Text weight="600">{label}</Text>
     </Box>
   );
 };

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

@@ -6,7 +6,14 @@ import Tab from "../../atoms/tab";
 
 const HORIZONTAL = "horizontal";
 
-const Tabs = ({ tabsConfig, tabsDisplayMode = HORIZONTAL, ...props }) => {
+const Tabs = ({
+  tabsConfig,
+  tabsDisplayMode = HORIZONTAL,
+  tabsPadding = "0",
+  contentPadding = "0",
+  extraStyles = "",
+  ...props
+}) => {
   const [activeTab, toggleActiveTab] = useState(
     tabsConfig.tabs[0]?.label || null
   );
@@ -47,14 +54,14 @@ const Tabs = ({ tabsConfig, tabsDisplayMode = HORIZONTAL, ...props }) => {
   };
 
   return (
-    <Box className="tabs" {...props}>
-      <Box className="tab-list">
+    <Box className="tabs" padding="0" extraStyles={extraStyles} {...props}>
+      <Box className="tab-list" padding={tabsPadding}>
         {tabsDisplayMode == HORIZONTAL
           ? showHorizontal(tabsConfig, activeTab)
           : showVertical(tabsConfig, activeTab)}
       </Box>
-      <Box className="tab-content">
-        <Box>
+      <Box className="tab-content" padding={contentPadding}>
+        <Box padding="0">
           {tabsConfig.tabs.map((tab, idx) => {
             if (tab.label !== activeTab) return undefined;
             return <Fragment key={idx}>{tab.content}</Fragment>;