@thecb/components 8.4.10-beta.4 → 8.4.10

package/package.json

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

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

@@ -218,7 +218,7 @@ const FormInput = ({
             themeValues={themeValues}
             $customHeight={customHeight}
             $extraStyles={extraStyles}
-            autocomplete={autocomplete}
+            autoComplete={autocomplete}
             {...props}
           />
         ) : (
@@ -244,12 +244,12 @@ const FormInput = ({
             background={background}
             $customHeight={customHeight}
             $extraStyles={extraStyles}
-            autocomplete={autocomplete}
+            autoComplete={autocomplete}
             {...props}
           />
         )}
       </Box>
-      <Stack direction="row" justify="space-between">
+      <Stack direction="row" justify="space-between" aria-live="polite">
         {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (
           <Text
             color={ERROR_COLOR}

package/src/components/atoms/radio-button-with-label/RadioButtonWithLabel.js

@@ -57,30 +57,45 @@ const RadioButtonWithLabel = ({
   ariaInvalid,
   themeValues,
   index,
-  handleChange = noop // optional, for custom event handling in ingesting app
-}) => (
-  <InputAndLabelContainer
-    align="center"
-    childGap="0.5rem"
-    activeColor={themeValues.activeColor}
-  >
-    <HiddenRadioInput
-      aria-invalid={ariaInvalid}
-      style={{ marginTop: 0 }}
-      type="radio"
-      name={groupName}
-      id={id}
-      value={value}
-      onChange={e => {
-        setValue(e.target.value);
-        handleChange(e);
-      }}
-      defaultChecked={index === 0}
-    />
-    <Text
-      as="label"
-      htmlFor={id}
-      extraStyles={`
+  handleChange = noop, // optional, for custom event handling in ingesting app
+  field,
+  config
+}) => {
+  const getDefaultChecked = (value, idx) => {
+    const selectionExistsInConfig = config
+      .map(c => c.value)
+      .includes(field.rawValue);
+
+    if (selectionExistsInConfig) {
+      // if exists, selection comes from the redux-freeform state
+      return field.rawValue === value;
+    }
+    // fallback to first option as default selection
+    return idx === 0;
+  };
+  return (
+    <InputAndLabelContainer
+      align="center"
+      childGap="0.5rem"
+      activeColor={themeValues.activeColor}
+    >
+      <HiddenRadioInput
+        aria-invalid={ariaInvalid}
+        style={{ marginTop: 0 }}
+        type="radio"
+        name={groupName}
+        id={id}
+        value={value}
+        onChange={e => {
+          setValue(e.target.value);
+          handleChange(e);
+        }}
+        defaultChecked={getDefaultChecked(value, index)}
+      />
+      <Text
+        as="label"
+        htmlFor={id}
+        extraStyles={`
           font-size: 1rem;
           display: flex; 
           width: 100%;
@@ -88,15 +103,16 @@ const RadioButtonWithLabel = ({
             cursor: pointer;
           }
         `}
-    >
-      <Circle
-        activeColor={themeValues.activeColor}
-        inactiveBorderColor={themeValues.inactiveBorderColor}
-      />
-      {labelText}
-    </Text>
-  </InputAndLabelContainer>
-);
+      >
+        <Circle
+          activeColor={themeValues.activeColor}
+          inactiveBorderColor={themeValues.inactiveBorderColor}
+        />
+        {labelText}
+      </Text>
+    </InputAndLabelContainer>
+  );
+};
 
 export default themeComponent(
   RadioButtonWithLabel,

package/src/components/atoms/solid-divider/SolidDivider.js

@@ -3,14 +3,14 @@ import { fallbackValues } from "./SolidDivider.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import { Box } from "../layouts";
 
-const SolidDivider = ({ themeValues }) => (
+const SolidDivider = ({ borderColor, borderSize, themeValues }) => (
   <Box
     padding="0"
     minWidth="100%"
     minHeight="1px"
-    borderColor={themeValues.borderColor}
-    borderSize={themeValues.borderSize}
-    borderWidthOverride={`0px 0px ${themeValues.borderSize} 0px`}
+    borderColor={borderColor || themeValues.borderColor}
+    borderSize={borderSize || themeValues.borderSize}
+    borderWidthOverride={`0px 0px ${borderSize || themeValues.borderSize} 0px`}
   />
 );
 

package/src/components/molecules/email-form/EmailForm.js

@@ -46,7 +46,7 @@ const EmailForm = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           isEmail
-          autocomplete="email"
+          autoComplete="email"
         />
         {showWalletCheckbox && (
           <Checkbox

package/src/components/molecules/module/Module.js

@@ -16,16 +16,18 @@ import { Box, Cluster } from "../../atoms/layouts";
 */
 
 const Module = ({
+  variant = "default",
+  as,
+  disabled,
   heading,
+  rightTitleContent,
+  titleID = "",
   spacing = "1rem",
   padding = "0",
+  margin = "0",
   spacingBottom = "2.5rem",
-  themeValues,
-  variant = "default",
   fontSize,
-  as,
-  titleID = "",
-  rightTitleContent,
+  themeValues,
   children
 }) => {
   const themedFontSize =
@@ -38,6 +40,7 @@ const Module = ({
   const themedElemType =
     variant === "small" ? "h6" : variant === "default" ? "h5" : "h2";
   const computedElemType = as || themedElemType;
+  const disabledStyles = "opacity: 0.40;";
   const headingText = (
     <Title
       weight={themeValues.fontWeight}
@@ -53,7 +56,12 @@ const Module = ({
   );
 
   return (
-    <Fragment>
+    <Box
+      aria-disabled={disabled}
+      extraStyles={disabled && disabledStyles}
+      padding="0"
+      role={"group"}
+    >
       {heading && !rightTitleContent && headingText}
       {heading && rightTitleContent && (
         <Cluster justify="space-between" align="center" nowrap>
@@ -61,7 +69,7 @@ const Module = ({
           {rightTitleContent}
         </Cluster>
       )}
-      <Box padding={`0 0 ${spacingBottom}`}>
+      <Box padding={`0 0 ${spacingBottom}`} extraStyles={`margin: ${margin}`}>
         <Box
           padding={padding}
           background={themeValues.backgroundColor}
@@ -71,7 +79,7 @@ const Module = ({
           {children}
         </Box>
       </Box>
-    </Fragment>
+    </Box>
   );
 };
 

package/src/components/molecules/radio-group/RadioGroup.js

@@ -48,6 +48,8 @@ const RadioGroup = ({
             groupName={groupName}
             setValue={setValue}
             handleChange={handleChange}
+            field={field}
+            config={config}
             aria-invalid={field.dirty && field.hasErrors}
           />
         ))}

package/src/components/molecules/radio-group/RadioGroup.stories.js

@@ -27,7 +27,7 @@ export const radioGroup = () => (
     config={config}
     groupName="radio-button-group"
     field={{
-      rawValue: "Hello World",
+      rawValue: "bar",
       dirty: false
     }}
     fieldActions={{

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

@@ -42,6 +42,7 @@ const RadioSection = ({
   staggeredAnimation = false,
   initiallyOpen = true,
   openHeight = "auto",
+  containerStyles = "",
   ariaDescribedBy
 }) => {
   const handleKeyDown = (id, e) => {
@@ -98,6 +99,7 @@ const RadioSection = ({
       padding="1px"
       border={`1px solid ${themeValues.borderColor}`}
       borderRadius="4px"
+      extraStyles={containerStyles}
     >
       <Stack childGap="0">
         {sections

package/src/constants/colors.js

@@ -36,6 +36,7 @@ const GRECIAN_GREY = "#E5E7EC"; // CBS-200
 const BLACK_SQUEEZE = "#EAF2F7";
 const GREY_CHATEAU = "#959CA8"; // CBS-500
 const COOL_GREY_05 = "#fbfcfd"; // CBS-050
+const MANATEE_GREY = "#878E9B"; // CB-60 (cool)
 // BLUE
 const CLOUDBURST_BLUE = "#26395c";
 const ZODIAC_BLUE = "#14284b";
@@ -171,6 +172,7 @@ export {
   CHARADE_GREY,
   GRECIAN_GREY,
   COOL_GREY_05,
+  MANATEE_GREY,
   BLACK_SQUEEZE,
   GREY_CHATEAU,
   CLOUDBURST_BLUE,

package/src/types/common/Field.ts

@@ -1,5 +1,5 @@
 export default interface Field {
-  hasErrors?: boolean;
-  dirty?: boolean;
-  rawValue?: string;
+  hasErrors: boolean;
+  dirty: boolean;
+  rawValue: string;
 }