@thecb/components 9.3.0-beta.1 → 9.3.0

package/package.json

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

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, forwardRef } from "react";
 import styled, { ThemeContext } from "styled-components";
 import posed from "react-pose";
 import { linear } from "@popmotion/easing";
@@ -60,32 +60,36 @@ const Spinner = ({ color, isMobile }) => (
   
 */
 
-const ButtonWithAction = ({
-  action = noop,
-  variant = "primary",
-  text,
-  textWrap = false,
-  isLoading = false,
-  loadingColor = "white",
-  dataQa = null,
-  textExtraStyles,
-  contentOverride = false,
-  extraStyles = "",
-  tabIndex,
-  children,
-  extraDisabledStyles,
-  ...rest
-}) => {
-  const themeContext = useContext(ThemeContext);
-  const themeValues = createThemeValues(
-    themeContext,
-    fallbackValues,
-    "Button",
-    variant
-  );
-  const { isMobile } = themeContext;
+const ButtonWithAction = forwardRef(
+  (
+    {
+      action = noop,
+      variant = "primary",
+      text,
+      textWrap = false,
+      isLoading = false,
+      loadingColor = "white",
+      dataQa = null,
+      textExtraStyles,
+      contentOverride = false,
+      extraStyles = "",
+      tabIndex,
+      children,
+      extraDisabledStyles,
+      ...rest
+    },
+    ref
+  ) => {
+    const themeContext = useContext(ThemeContext);
+    const themeValues = createThemeValues(
+      themeContext,
+      fallbackValues,
+      "Button",
+      variant
+    );
+    const { isMobile } = themeContext;
 
-  const hoverStyles = `
+    const hoverStyles = `
     outline: none;
     background-color: ${themeValues.hoverBackgroundColor};
     border-color: ${themeValues.hoverBorderColor};
@@ -95,7 +99,7 @@ const ButtonWithAction = ({
     };
     cursor: pointer;
   `;
-  const activeStyles = `
+    const activeStyles = `
     outline: none;
     background-color: ${themeValues.activeBackgroundColor};
     border-color: ${themeValues.activeBorderColor};
@@ -104,7 +108,7 @@ const ButtonWithAction = ({
       variant === "ghost" || variant === "smallGhost" ? "underline" : "none"
     };
   `;
-  const disabledStyles = `
+    const disabledStyles = `
     background-color: #6D717E;
     border-color: #6D717E;
     color: #FFFFFF;
@@ -116,47 +120,49 @@ const ButtonWithAction = ({
     ${extraDisabledStyles}
   `;
 
-  return (
-    <Box
-      variant={variant}
-      padding={themeValues.padding}
-      minHeight={themeValues.height}
-      minWidth={themeValues.minWidth}
-      background={themeValues.backgroundColor}
-      border={themeValues.border}
-      hoverStyles={hoverStyles}
-      activeStyles={activeStyles}
-      disabledStyles={disabledStyles}
-      as="button"
-      onClick={isLoading ? undefined : action}
-      borderRadius="2px"
-      theme={themeContext}
-      extraStyles={`margin: 0.5rem; ${extraStyles}`}
-      dataQa={dataQa}
-      tabIndex={tabIndex}
-      {...rest}
-    >
-      {contentOverride ? (
-        children
-      ) : (
-        <Center intrinsic>
-          {isLoading ? (
-            <Spinner color={loadingColor} isMobile={isMobile} />
-          ) : (
-            <Text
-              weight={themeValues.fontWeight}
-              variant={themeValues.fontSizeVariant}
-              color={themeValues.color}
-              textWrap={textWrap}
-              extraStyles={textExtraStyles}
-            >
-              {text}
-            </Text>
-          )}
-        </Center>
-      )}
-    </Box>
-  );
-};
+    return (
+      <Box
+        ref={ref}
+        variant={variant}
+        padding={themeValues.padding}
+        minHeight={themeValues.height}
+        minWidth={themeValues.minWidth}
+        background={themeValues.backgroundColor}
+        border={themeValues.border}
+        hoverStyles={hoverStyles}
+        activeStyles={activeStyles}
+        disabledStyles={disabledStyles}
+        as="button"
+        onClick={isLoading ? undefined : action}
+        borderRadius="2px"
+        theme={themeContext}
+        extraStyles={`margin: 0.5rem; ${extraStyles}`}
+        dataQa={dataQa}
+        tabIndex={tabIndex}
+        {...rest}
+      >
+        {contentOverride ? (
+          children
+        ) : (
+          <Center intrinsic>
+            {isLoading ? (
+              <Spinner color={loadingColor} isMobile={isMobile} />
+            ) : (
+              <Text
+                weight={themeValues.fontWeight}
+                variant={themeValues.fontSizeVariant}
+                color={themeValues.color}
+                textWrap={textWrap}
+                extraStyles={textExtraStyles}
+              >
+                {text}
+              </Text>
+            )}
+          </Center>
+        )}
+      </Box>
+    );
+  }
+);
 
 export default ButtonWithAction;

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

@@ -95,8 +95,8 @@ const Checkbox = ({
   checkboxMargin = "0 16px 0 0",
   extraStyles,
   textExtraStyles,
-  dataQa = null,
-  isRequired = false
+  labelledById,
+  dataQa = null
 }) => {
   const [focused, setFocused] = useState(false);
 
@@ -106,6 +106,10 @@ const Checkbox = ({
     }
   };
 
+  const titleId = title ? `checkboxlabel-${name}` : undefined;
+  const ariaLabelledById = labelledById ?? titleId;
+  const ariaLabel = ariaLabelledById ? undefined : name;
+
   return (
     <Box
       padding="0"
@@ -123,7 +127,8 @@ const Checkbox = ({
             id={`checkbox-${name}`}
             disabled={disabled}
             name={name}
-            aria-label={name}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledById}
             checked={checked}
             onChange={onChange}
             tabIndex="-1"
@@ -143,7 +148,6 @@ const Checkbox = ({
             disabledStyles={themeValues.disabledStyles}
             disabledCheckedStyles={themeValues.disabledCheckedStyles}
             focusedStyles={themeValues.focusedStyles}
-            aria-required={isRequired}
           >
             <CheckboxIcon
               viewBox="0 0 24 24"
@@ -157,6 +161,7 @@ const Checkbox = ({
         </CheckboxContainer>
         {title && (
           <Text
+            id={titleId}
             variant="p"
             weight={themeValues.textFontWeight}
             color={themeValues.textColor}

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

@@ -13,13 +13,13 @@ const groupId = "props";
 export const checkbox = () => (
   <Checkbox
     variant={select(variantsLabel, variants, defaultValue, groupId)}
-    title={text("title", "Checkbox Title", "props")}
-    name={text("name", "Checkbox Name", "props")}
+    title={text("title", "Checkbox", "props")}
+    name={text("name", "Checkbox", "props")}
     checked={boolean("checked", false, "props")}
     error={boolean("error", false, "props")}
     disabled={boolean("disabled", false, "props")}
     focused={boolean("focused", false, "props")}
-    isRequired={boolean("isRequired", true, "props")}
+    labelledById={text("labelledById", undefined, "props")}
   />
 );
 

package/src/components/atoms/country-dropdown/CountryDropdown.js

@@ -10,8 +10,8 @@ const CountryDropdown = ({
   fieldActions,
   showErrors,
   onChange,
-  dataQa = null,
-  isRequired = false
+  isRequired = false,
+  dataQa = null
 }) => (
   <FormSelect
     options={options}

package/src/components/atoms/country-dropdown/CountryDropdown.stories.js

@@ -30,7 +30,6 @@ const CountryFormWrapper = ({ fields, actions }) => (
       options={options}
       field={fields.country}
       fieldActions={actions.fields.country}
-      isRequired={true}
     />
   </Box>
 );

package/src/components/atoms/dropdown/Dropdown.js

@@ -12,11 +12,11 @@ import styled from "styled-components";
 import "core-js/proposals/relative-indexing-method";
 
 import {
-  WHITE,
+  ERROR_COLOR,
   GREY_CHATEAU,
-  STORM_GREY,
   MINESHAFT_GREY,
-  ERROR_COLOR
+  STORM_GREY,
+  WHITE
 } from "../../../constants/colors";
 import { fallbackValues } from "./Dropdown.theme";
 import { themeComponent } from "../../../util/themeUtils";
@@ -55,37 +55,65 @@ const DropdownContentWrapper = styled.div`
 `;
 
 const DropdownItemWrapper = styled.li`
-  background-color: ${({ selected, themeValues }) =>
-    selected ? themeValues.selectedColor : WHITE};
   text-align: start;
-  border-width: 0px;
-  border-color: transparent;
+  border-width: 2px;
+  border-style: solid;
+  border-color: ${({ selected, themeValues }) =>
+    selected ? themeValues.selectedColor : WHITE};
   box-shadow: none;
-  padding: 1rem;
   box-sizing: border-box;
   width: 100%;
   list-style: none;
   cursor: ${({ disabled }) => (disabled ? "default" : "pointer")};
 
   &:hover {
-    background-color: ${({ selected, disabled, themeValues }) =>
+    border-color: ${({ disabled, selected, themeValues }) =>
       selected
-        ? themeValues.selectedColor
+        ? themeValues.focusColor
         : disabled
         ? WHITE
         : themeValues.hoverColor};
+    > * {
+      background: ${({ selected, disabled, themeValues }) =>
+        selected
+          ? themeValues.focusColor
+          : disabled
+          ? WHITE
+          : themeValues.hoverColor};
+      border-color: ${({ selected, disabled, themeValues }) =>
+        selected
+          ? themeValues.focusColor
+          : disabled
+          ? WHITE
+          : themeValues.hoverColor};
+    }
   }
   &:focus {
-    background-color: ${({ selected, disabled, themeValues }) =>
-      selected
-        ? themeValues.selectedColor
-        : disabled
-        ? WHITE
-        : themeValues.hoverColor};
     outline: none;
+    border-color: ${({ themeValues }) => themeValues.selectedColor};
+    > * {
+      background: ${({ selected, disabled, themeValues }) =>
+        selected
+          ? themeValues.focusColor
+          : disabled
+          ? WHITE
+          : themeValues.hoverColor};
+      border-color: white;
+      outline: none;
+    }
   }
 `;
 
+const DropdownItemBorder = styled.div`
+  background: ${({ selected, themeValues }) =>
+    selected ? themeValues.selectedColor : WHITE};
+  border-color: ${({ selected, themeValues }) =>
+    selected ? themeValues.selectedColor : WHITE};
+  border-width: 2px;
+  border-style: solid;
+  padding: 12px;
+`;
+
 const Dropdown = ({
   placeholder,
   options,
@@ -108,7 +136,6 @@ const Dropdown = ({
   ariaInvalid = false,
   isRequired = false
 }) => {
-  const required = options.required || isRequired;
   const [inputValue, setInputValue] = useState("");
   const [optionsState, setOptionsState] = useState([]);
   const [filteredOptions, setFilteredOptions] = useState([]);
@@ -236,13 +263,15 @@ const Dropdown = ({
   useEffect(() => {
     if (autoEraseTypeAhead) {
       clearTimeout(timer);
-      setTimer(setTimeout(() => setInputValue(""), 3000));
+      setTimer(setTimeout(() => setInputValue(""), 20000));
     }
+
     setFilteredOptions(
       options.filter(
         option =>
-          option.value.toLowerCase().startsWith(inputValue.toLowerCase()) ||
-          option.text.toLowerCase().startsWith(inputValue.toLowerCase())
+          option?.value?.toLowerCase()?.indexOf(inputValue?.toLowerCase()) >=
+            0 ||
+          option.text?.toLowerCase()?.indexOf(inputValue?.toLowerCase()) >= 0
       )
     );
   }, [inputValue]);
@@ -298,8 +327,7 @@ const Dropdown = ({
         aria-labelledby={ariaLabelledby}
         aria-describedby={ariaDescribedby}
         aria-expanded={isOpen}
-        aria-required={required}
-        required={required}
+        aria-required={options.required}
         aria-invalid={ariaInvalid}
         background={isOpen ? themeValues.hoverColor : WHITE}
         borderRadius="2px"
@@ -331,6 +359,7 @@ const Dropdown = ({
         }}
         padding="12px"
         placeholder={getSelection()}
+        required={options.required || isRequired}
         role="combobox"
         themeValues={themeValues}
         title={hasTitles ? getSelection() : null}
@@ -338,7 +367,6 @@ const Dropdown = ({
         tabIndex={0}
         value={inputValue}
         width="100%"
-        disabled={disabledValues.includes(inputValue)}
       />
       <IconWrapper open={isOpen} onClick={onClick}>
         <DropdownIcon />
@@ -353,7 +381,6 @@ const Dropdown = ({
             tabIndex={0}
             role="listbox"
             id={`${ariaLabelledby}_listbox`}
-            required={required}
           >
             <Stack childGap="0" as="ul">
               {filteredOptions.map((choice, i) => {
@@ -389,27 +416,33 @@ const Dropdown = ({
                     role="option"
                     onFocus={() => setFocusedRef(optionRefs.current[i])}
                   >
-                    <Text
-                      variant="p"
-                      color={
-                        choice.value === value
-                          ? WHITE
-                          : disabledValues.includes(choice.value)
-                          ? STORM_GREY
-                          : MINESHAFT_GREY
-                      }
-                      extraStyles={`padding-left: 16px;
-                      cursor: ${
-                        disabledValues.includes(choice.value)
-                          ? "default"
-                          : "pointer"
-                      };
-                      white-space: nowrap;
-                      overflow: hidden;
-                      text-overflow: ellipsis;`}
+                    <DropdownItemBorder
+                      disabled={disabledValues.includes(choice.value)}
+                      selected={choice.value === value}
+                      themeValues={themeValues}
                     >
-                      {choice.text}
-                    </Text>
+                      <Text
+                        variant="p"
+                        color={
+                          choice.value === value
+                            ? WHITE
+                            : disabledValues.includes(choice.value)
+                            ? STORM_GREY
+                            : MINESHAFT_GREY
+                        }
+                        extraStyles={`padding-left: 16px;
+                        cursor: ${
+                          disabledValues.includes(choice.value)
+                            ? "default"
+                            : "pointer"
+                        };
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;`}
+                      >
+                        {choice.text}
+                      </Text>
+                    </DropdownItemBorder>
                   </DropdownItemWrapper>
                 );
               })}

package/src/components/atoms/dropdown/Dropdown.theme.js

@@ -1,9 +1,15 @@
-import { HOVER_LIGHT_BLUE, MATISSE_BLUE } from "../../../constants/colors";
+import {
+  HOVER_LIGHT_BLUE,
+  MATISSE_BLUE,
+  MATISSE_BLUE_DARK
+} from "../../../constants/colors";
 
 const selectedColor = `${MATISSE_BLUE}`;
 const hoverColor = `${HOVER_LIGHT_BLUE}`;
+const focusColor = `${MATISSE_BLUE_DARK}`;
 
 export const fallbackValues = {
   selectedColor,
-  hoverColor
+  hoverColor,
+  focusColor
 };

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

@@ -119,7 +119,6 @@ const FormInput = ({
   isRequired = false,
   ...props
 }) => {
-  const required = isRequired || props?.required;
   const [showPassword, setShowPassword] = useState(false);
   const { isMobile } = useContext(ThemeContext);
   const setValue = value => {
@@ -223,7 +222,7 @@ const FormInput = ({
             $extraStyles={extraStyles}
             data-qa={dataQa || labelTextWhenNoError}
             autoComplete={autocompleteValue}
-            required={required}
+            required={isRequired}
             {...props}
           />
         ) : (
@@ -250,7 +249,7 @@ const FormInput = ({
             $extraStyles={extraStyles}
             data-qa={dataQa || labelTextWhenNoError}
             autoComplete={autocompleteValue}
-            required={required}
+            required={isRequired}
             {...props}
           />
         )}

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

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import Dropdown from "../dropdown";
 import Text from "../text";
 import { ERROR_COLOR } from "../../../constants/colors";
@@ -29,20 +29,6 @@ const FormSelect = ({
 }) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
-  const required = options?.required || isRequired;
-
-  const labelId = useMemo(
-    () => labelTextWhenNoError => createIdFromString(labelTextWhenNoError),
-    [labelTextWhenNoError]
-  );
-
-  const descriptionId = useMemo(
-    () => (field, labelTextWhenNoError) =>
-      field.hasErrors && field.dirty
-        ? labelId(labelTextWhenNoError) + "error-message"
-        : "",
-    [field, labelTextWhenNoError]
-  );
 
   const handleClickAway = event => {
     if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -60,8 +46,8 @@ const FormSelect = ({
   return (
     <SelectContainer
       ref={dropdownRef}
-      aria-role="group"
       disabled={disabled}
+      aria-disabled={disabled}
       data-qa={dataQa}
     >
       <Box padding="0" minWidth="100%">
@@ -76,15 +62,18 @@ const FormSelect = ({
               &::first-letter {
                 text-transform: uppercase;
               }`}
-            id={labelId(labelTextWhenNoError)}
+            id={createIdFromString(labelTextWhenNoError)}
           >
             {labelTextWhenNoError}
           </Text>
         </Cluster>
       </Box>
       <Dropdown
-        ariaLabelledby={labelId(labelTextWhenNoError)}
-        ariaDescribedby={descriptionId(field, labelTextWhenNoError)}
+        ariaLabelledby={createIdFromString(labelTextWhenNoError)}
+        ariaDescribedby={createIdFromString(
+          labelTextWhenNoError,
+          "error message"
+        )}
         maxHeight={dropdownMaxHeight}
         widthFitOptions={widthFitOptions}
         hasTitles={hasTitles}
@@ -106,29 +95,31 @@ const FormSelect = ({
         disabled={disabled}
         autocompleteValue={autocompleteValue}
         smoothScroll={smoothScroll}
-        isRequired={required}
+        isRequired={isRequired}
       />
       <Stack direction="row" justify="space-between">
-        <Text
-          color={ERROR_COLOR}
-          variant="pXS"
-          weight={themeValues.fontWeight}
-          extraStyles={`
+        {(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")}
-          aria-live="polite"
-          aria-atomic={true}
-          data-qa={createIdFromString(labelTextWhenNoError, "error message")}
-        >
-          {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors)
-            ? errorMessages[field.errors[0]]
-            : ""}
-        </Text>
+            id={createIdFromString(labelTextWhenNoError, "error message")}
+            aria-live="polite"
+            aria-atomic={true}
+            data-qa={createIdFromString(labelTextWhenNoError, "error message")}
+          >
+            {errorMessages[field.errors[0]]}
+          </Text>
+        ) : (
+          <Text extraStyles={`height: ${themeValues.lineHeight};`} />
+        )}
       </Stack>
     </SelectContainer>
   );

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

@@ -12,7 +12,7 @@ const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
   }
 });
 const errorMessages = {
-  [required.error]: "This field is required."
+  [required.error]: "thing is required"
 };
 const options = [
   { value: "", text: "choose name" },
@@ -34,7 +34,7 @@ const story = page({
 const FormWrapper = props => (
   <FormSelect
     autocompleteValue={props.autocompleteValue}
-    labelTextWhenNoError="Form Select Label"
+    labelTextWhenNoError="Form Select"
     errorMessages={errorMessages}
     options={options}
     field={props.fields.thing}

package/src/components/atoms/icons/AccountNumberImage.js

@@ -7,6 +7,8 @@ const AccountNumberImage = () => {
       width="371"
       height="164"
       viewBox="0 0 371 164"
+      role="img"
+      aria-label="A check with the account number highlighted in the bottom center"
     >
       <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
         <g transform="translate(-364 -546)">

package/src/components/atoms/icons/BankIcon.js

@@ -8,6 +8,8 @@ export const BankIcon = () => {
       viewBox="0 0 28 18"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label="Check Payment"
     >
       <path
         d="M0 2.25C0 1.00736 1.04467 0 2.33333 0H25.6667C26.9553 0 28 1.00736 28 2.25V15.75C28 16.9926 26.9553 18 25.6667 18H2.33333C1.04467 18 0 16.9926 0 15.75V2.25Z"