@thecb/components 9.2.0-beta.12 → 9.2.0-beta.13

package/package.json

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

package/src/components/atoms/form-select/FormSelect.js

@@ -21,8 +21,10 @@ const FormSelect = ({
   disabled,
   themeValues,
   hasTitles = false,
-  autocompleteValue, // browser autofill value, like country-name or address-level1 for state
-  smoothScroll = true // whether the browser should animate scroll to selected item on first open
+  autocompleteValue, // browser autofill value, like country-name
+  smoothScroll = true, // whether the browser should animate scroll to selected item on first open
+  dataQa = null,
+  widthFitOptions = false
 }) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -41,7 +43,12 @@ const FormSelect = ({
   });
 
   return (
-    <SelectContainer ref={dropdownRef} disabled={disabled}>
+    <SelectContainer
+      ref={dropdownRef}
+      disabled={disabled}
+      aria-disabled={disabled}
+      data-qa={dataQa}
+    >
       <Box padding="0" minWidth="100%">
         <Cluster justify="space-between" align="center">
           <Text
@@ -67,6 +74,7 @@ const FormSelect = ({
           "error message"
         )}
         maxHeight={dropdownMaxHeight}
+        widthFitOptions={widthFitOptions}
         hasTitles={hasTitles}
         placeholder={options[0] ? options[0].text : ""}
         options={options}
@@ -76,6 +84,9 @@ const FormSelect = ({
         isError={
           (field.hasErrors && field.dirty) || (field.hasErrors && showErrors)
         }
+        ariaInvalid={
+          (field.hasErrors && field.dirty) || (field.hasErrors && showErrors)
+        }
         onSelect={
           onChange ? value => onChange(value) : value => fieldActions.set(value)
         }
@@ -84,24 +95,27 @@ const FormSelect = ({
         autocompleteValue={autocompleteValue}
         smoothScroll={smoothScroll}
       />
-      <Stack direction="row" justify="space-between" aria-live="polite">
-        {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (
-          <Text
-            color={ERROR_COLOR}
-            variant="pXS"
-            weight={themeValues.fontWeight}
-            extraStyles={`word-break: break-word;
-                font-family: Public Sans;
-                &::first-letter {
-                  text-transform: uppercase;
-                }`}
-            id={createIdFromString(labelTextWhenNoError, "error message")}
-          >
-            {errorMessages[field.errors[0]]}
-          </Text>
-        ) : (
-          <Text extraStyles={`height: ${themeValues.lineHeight};`} />
-        )}
+      <Stack direction="row" justify="space-between">
+        <Text
+          color={ERROR_COLOR}
+          variant="pXS"
+          weight={themeValues.fontWeight}
+          extraStyles={`
+            word-break: break-word;
+            font-family: Public Sans;
+            &::first-letter {
+              text-transform: uppercase;
+            }
+          `}
+          id={createIdFromString(labelTextWhenNoError, "error message")}
+          aria-live="polite"
+          aria-atomic={true}
+          data-qa={createIdFromString(labelTextWhenNoError, "error message")}
+        >
+          {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors)
+            ? errorMessages[field.errors[0]]
+            : ""}
+        </Text>
       </Stack>
     </SelectContainer>
   );

package/src/components/molecules/radio-section/radio-button/RadioButton.js

@@ -24,19 +24,21 @@ const RadioButton = ({
   const buttonBorder = {
     onFocused: {
       borderColor: themeValues.activeColor,
-      boxShadow: `0px 0px 4px 0px ${themeValues.activeColor}`
+      outline: `3px solid ${themeValues.activeColor}`,
+      outlineOffset: "2px"
     },
     offFocused: {
       borderColor: themeValues.activeColor,
-      boxShadow: `0px 0px 4px 0px ${themeValues.activeColor}`
+      outline: `3px solid ${themeValues.activeColor}`,
+      outlineOffset: "2px"
     },
     on: {
       borderColor: themeValues.activeColor,
-      boxShadow: "0px 0px 0px 0px #FFFFFF"
+      outline: "0"
     },
     off: {
       borderColor: themeValues.inactiveColor,
-      boxShadow: "0px 0px 0px 0px #FFFFFF"
+      outline: "0"
     }
   };
 
@@ -97,7 +99,7 @@ const RadioButton = ({
         borderWidth="1px"
         borderStyle="solid"
         borderRadius="12px"
-        margin="4px 14px 4px 4px"
+        margin="6px 14px 6px 6px"
         height="24px"
         width="24px"
         variants={buttonBorder}

package/src/components/molecules/radio-section/radio-button/RadioButton.theme.js

@@ -1,7 +1,7 @@
-import { MATISSE_BLUE, GREY_CHATEAU } from "../../../../constants/colors";
+import { MATISSE_BLUE, STORM_GREY } from "../../../../constants/colors";
 
 const activeColor = `${MATISSE_BLUE}`;
-const inactiveColor = `${GREY_CHATEAU}`;
+const inactiveColor = `${STORM_GREY}`;
 
 export const fallbackValues = {
   activeColor,

package/src/components/molecules/toast-notification/ToastNotification.js

@@ -12,6 +12,7 @@ import {
   WHITE
 } from "../../../constants/colors";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+import { generateShadows } from "../../../util/generateShadows";
 
 const VARIANTS = {
   SUCCESS: "success",
@@ -37,7 +38,7 @@ const ToastNotification = ({
         ? backgroundColor
         : variant === VARIANTS.SUCCESS
         ? HINT_GREEN
-        : variant === "error"
+        : variant === VARIANTS.ERROR
         ? ERROR_BACKGROUND_COLOR
         : WHITE
     }
@@ -47,9 +48,7 @@ const ToastNotification = ({
     tabIndex={toastOpen ? "-1" : "0"}
     padding="0rem 1rem"
     borderRadius="4px"
-    boxShadow="0px 4px 4px rgba(41, 42, 51, 0.15),
-      0px 1px 7px rgba(41, 42, 51, 0.2),
-      0px 7px 12px rgba(41, 42, 51, 0.15)"
+    boxShadow={generateShadows().standard.base}
     extraStyles={`
       display: ${toastOpen ? "block" : "none"};
       position: fixed; bottom: 4rem; left: 4rem;
@@ -58,8 +57,8 @@ const ToastNotification = ({
     `}
   >
     <Cluster align="center" childGap={childGap}>
-      {variant === "success" && <SuccessfulIconMedium />}
-      {variant === "error" && <ErroredIcon />}
+      {variant === VARIANTS.SUCCESS && <SuccessfulIconMedium />}
+      {variant === VARIANTS.ERROR && <ErroredIcon />}
       <Box padding="1rem 0" maxWidth={maxWidth}>
         <Paragraph
           weight={FONT_WEIGHT_SEMIBOLD}