@thecb/components 3.5.12-beta.1 → 3.5.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "3.5.12-beta.1",
+  "version": "3.5.14",
   "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

@@ -1,5 +1,5 @@
 import React, { useState, useContext } from "react";
-import styled, { ThemeContext } from "styled-components";
+import styled, { ThemeContext, css } from "styled-components";
 import { FormattedInput } from "formatted-input";
 import { fallbackValues } from "./FormLayouts.theme.js";
 import { themeComponent } from "../../../util/themeUtils";
@@ -15,7 +15,7 @@ const InputField = styled.input`
         ? ERROR_COLOR
         : themeValues.borderColor};
   border-radius: 2px;
-  height: 48px;
+  height: ${({ customHeight }) => (customHeight ? customHeight : "48px")};
   width: 100%;
   padding: 1rem;
   min-width: 100px;
@@ -38,6 +38,11 @@ const InputField = styled.input`
   &:focus {
     border: 1px solid ${MATISSE_BLUE};
   }
+
+  ${({ extraStyles }) =>
+    css`
+      ${extraStyles}
+    `}
 `;
 
 // eslint-disable-next-line no-unused-vars
@@ -50,7 +55,7 @@ const FormattedInputField = styled(({ showErrors, ...props }) => (
         ? ERROR_COLOR
         : themeValues.borderColor};
   border-radius: 2px;
-  height: 48px;
+  height: ${({ customHeight }) => (customHeight ? customHeight : "48px")};
   width: 100%;
   padding: 1rem;
   min-width: 100px;
@@ -68,6 +73,11 @@ const FormattedInputField = styled(({ showErrors, ...props }) => (
   &:focus {
     border: 1px solid ${MATISSE_BLUE};
   }
+
+  ${({ extraStyles }) =>
+    css`
+      ${extraStyles}
+    `}
 `;
 
 const FormInput = ({
@@ -83,6 +93,8 @@ const FormInput = ({
   decorator,
   themeValues,
   background,
+  customHeight,
+  extraStyles,
   ...props
 }) => {
   const [showPassword, setShowPassword] = useState(false);
@@ -168,6 +180,8 @@ const FormInput = ({
             showErrors={showErrors}
             data-qa={labelTextWhenNoError}
             themeValues={themeValues}
+            customHeight={customHeight}
+            extraStyles={extraStyles}
             {...props}
           />
         ) : (
@@ -183,6 +197,8 @@ const FormInput = ({
             data-qa={labelTextWhenNoError}
             themeValues={themeValues}
             background={background}
+            customHeight={customHeight}
+            extraStyles={extraStyles}
             {...props}
           />
         )}

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

@@ -122,12 +122,12 @@ const RadioSection = ({
                       : themeValues.headingBackgroundColor
                   }
                   onClick={
-                    isMobile && supportsTouch
+                    (isMobile && supportsTouch) || section.disabled
                       ? noop
                       : () => toggleOpenSection(section.id)
                   }
                   onTouchEnd={
-                    isMobile && supportsTouch
+                    (isMobile && supportsTouch) || !section.disabled
                       ? () => toggleOpenSection(section.id)
                       : noop
                   }
@@ -155,7 +155,11 @@ const RadioSection = ({
                             name={section.id}
                             radioOn={openSection === section.id}
                             radioFocused={focused === section.id}
-                            toggleRadio={() => toggleOpenSection(section.id)}
+                            toggleRadio={
+                              section.disabled
+                                ? noop
+                                : () => toggleOpenSection(section.id)
+                            }
                             tabIndex="-1"
                           />
                         </Box>