@thecb/components 3.5.12-beta.0 → 3.5.13

package/package.json

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

package/src/components/atoms/alert/Alert.js

@@ -8,21 +8,19 @@ import { themeComponent } from "../../../util/themeUtils";
 const Alert = ({
   heading,
   text,
-  textOverride,
   variant,
   children,
   height,
   onLinkClick,
-  padding = "0.5rem",
   showQuitLink = true,
   themeValues
 }) => {
   const Icon = AlertIcons[variant];
   return (
     <Box
-      padding={padding}
+      padding="0.5rem"
       width="100%"
-      minHeight={height && parseInt(height) < 100 ? height : "100px"}
+      minHeight="100px"
       height={height ? height : "auto"}
       background={themeValues.background}
       borderRadius="4px"
@@ -39,21 +37,17 @@ const Alert = ({
         </Box>
         <Box padding="0">
           <Sidebar onRight width="24px" childGap="0rem">
-            <Box padding={`${padding} 1rem`}>
+            <Box padding="1rem">
               <Cluster justify="flex-start" align="center">
-                {textOverride ? (
-                  textOverride
-                ) : (
-                  <Stack fullHeight childGap="0.25rem">
-                    <Text variant="p" color={themeValues.text} weight="600">
-                      {heading}
-                    </Text>
-                    <Text variant="pS" color={themeValues.text}>
-                      {text}
-                    </Text>
-                    {children}
-                  </Stack>
-                )}
+                <Stack fullHeight childGap="0.25rem">
+                  <Text variant="p" color={themeValues.text} weight="600">
+                    {heading}
+                  </Text>
+                  <Text variant="pS" color={themeValues.text}>
+                    {text}
+                  </Text>
+                  {children}
+                </Stack>
               </Cluster>
             </Box>
             <Cluster justify="flex-end" align="flex-start">

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>