@thecb/components 10.1.0-beta.0 → 10.1.1-beta.0

package/package.json

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

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

@@ -68,6 +68,7 @@ const ButtonWithAction = forwardRef(
       text,
       textWrap = false,
       isLoading = false,
+      disabled = false,
       loadingColor = "white",
       dataQa = null,
       textExtraStyles,
@@ -132,8 +133,9 @@ const ButtonWithAction = forwardRef(
         hoverStyles={hoverStyles}
         activeStyles={activeStyles}
         disabledStyles={disabledStyles}
+        aria-disabled={disabled}
         as="button"
-        onClick={isLoading ? undefined : action}
+        onClick={isLoading || disabled ? undefined : action}
         borderRadius="2px"
         theme={themeContext}
         extraStyles={`margin: 0.5rem; ${extraStyles}`}

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

@@ -18,12 +18,15 @@ const variants = {
 const defaultValue = "primary";
 const groupId = "props";
 
+const buttonHandler = () => console.log("Button selected");
+
 export const buttonWithAction = () => (
   <ButtonWithAction
     variant={select(variantsLabel, variants, defaultValue, groupId)}
     text={text("text", "button", "props")}
     isLoading={boolean("isLoading", false, "props")}
-    action={text("action", undefined, "props")}
+    action={text("action", buttonHandler, "props")}
+    disabled={boolean("disabled", false, "props")}
   />
 );
 

package/src/components/atoms/button-with-link/ButtonWithLink.js

@@ -57,7 +57,11 @@ const ButtonWithLink = ({
         text-decoration: none; }`}
       dataQa={dataQa}
     >
-      <ButtonWithAction {...otherProps} extraStyles={extraStyles} />
+      <ButtonWithAction
+        {...otherProps}
+        disabled={disabled}
+        extraStyles={extraStyles}
+      />
     </ButtonWithLinkWrapper>
   );
 };

package/src/components/atoms/checkbox/Checkbox.js

@@ -7,7 +7,7 @@ import Box from "../layouts/Box";
 import Text from "../text";
 import { themeComponent } from "../../../util/themeUtils";
 
-const CheckboxContainer = styled.span`
+const CheckboxContainer = styled.div`
   display: inline-block;
   vertical-align: middle;
 `;

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

@@ -147,7 +147,13 @@ const FormInput = ({
             >
               {labelTextWhenNoError}
             </Text>
-            {helperModal()}
+            <Text
+              color={themeValues.linkColor}
+              variant="pS"
+              weight={themeValues.fontWeight}
+            >
+              {helperModal()}
+            </Text>
           </Cluster>
         ) : (
           <Box padding="0" minWidth="100%">

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

@@ -107,6 +107,21 @@ export const BoxWrapper = styled(
           : ``}
       `}
   }
+  
+  &[aria-disabled="true"] {
+    ${({ disabledStyles, as }) =>
+      css`
+        ${disabledStyles}
+        ${as === "button"
+          ? `        > * > span {
+          ${disabledStyles}
+          border: none;
+          outline: none;
+          box-shadow: none;
+        }`
+          : ``}
+      `}
+  }
 
   & * {
     color: ${({ color }) => color};