@thecb/components 10.12.4 → 10.12.5-beta.0

package/package.json

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

package/src/components/atoms/card/CardText.js

@@ -11,7 +11,6 @@ import Paragraph from "../paragraph";
 import Stack from "../layouts/Stack";
 import Title from "../title";
 import IconQuitLarge from "../../atoms/icons/IconQuitLarge";
-import { Cluster } from "../layouts";
 
 export const CardText = ({
   showQuitLink,
@@ -28,7 +27,7 @@ export const CardText = ({
     <Box padding={padding}>
       <Cover>
         <Stack>
-          <Cluster justify="space-between" align="center" overflow={true}>
+          <Box padding="0">
             {titleText && (
               <Title
                 as={titleAs}
@@ -47,12 +46,12 @@ export const CardText = ({
                 role="button"
                 tabIndex={0}
                 aria-label={`Close Card: ${titleText}`}
-                extraStyles="cursor: pointer;"
+                extraStyles="position: absolute; top: 0.5rem; right: 0.5rem; cursor: pointer;"
               >
                 <IconQuitLarge />
               </Box>
             )}
-          </Cluster>
+          </Box>
           <Paragraph as={textAs} color={themeValues.textColor}>
             {text}
           </Paragraph>

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

@@ -16,7 +16,6 @@ const CheckboxLabelContainer = styled.label`
   display: flex;
   align-items: center;
   column-gap: 1rem;
-  cursor: pointer;
 `;
 
 const CheckboxIcon = styled.svg`
@@ -107,8 +106,6 @@ const Checkbox = forwardRef(
       labelledById,
       dataQa = null,
       checkboxExtraStyles,
-      hasIconOverride = false,
-      icon: Icon,
       ...rest
     },
     ref
@@ -135,13 +132,7 @@ const Checkbox = forwardRef(
         onKeyDown={e => handleClick(e, onChange)}
         hiddenStyles={hidden}
         background={themeValues.backgroundColor}
-        extraStyles={`
-          :focus {
-            outline: 0;
-          }
-          ${extraStyles}; 
-          margin: ${checkboxMargin};
-        `}
+        extraStyles={`outline: none; ${extraStyles}; margin: ${checkboxMargin};`}
         {...rest}
       >
         <CheckboxLabelContainer data-qa={dataQa}>
@@ -173,18 +164,14 @@ const Checkbox = forwardRef(
               focusedStyles={themeValues.focusedStyles}
               checkboxExtraStyles={checkboxExtraStyles}
             >
-              {hasIconOverride ? (
-                <Icon />
-              ) : (
-                <CheckboxIcon
-                  viewBox="0 0 24 24"
-                  disabled={disabled}
-                  disabledCheckColor={themeValues.disabledCheckColor}
-                  checkColor={themeValues.checkColor}
-                >
-                  <polyline points="20 6 9 17 4 12" />
-                </CheckboxIcon>
-              )}
+              <CheckboxIcon
+                viewBox="0 0 24 24"
+                disabled={disabled}
+                disabledCheckColor={themeValues.disabledCheckColor}
+                checkColor={themeValues.checkColor}
+              >
+                <polyline points="20 6 9 17 4 12" />
+              </CheckboxIcon>
             </StyledCheckbox>
           </CheckboxContainer>
           {title && (

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { text, select, boolean } from "@storybook/addon-knobs";
 import Checkbox from "./Checkbox";
 import page from "../../../../.storybook/page";
@@ -10,22 +10,18 @@ const variants = {
 const defaultValue = "default";
 const groupId = "props";
 
-export const checkbox = () => {
-  const [checked, setChecked] = useState(false);
-  return (
-    <Checkbox
-      variant={select(variantsLabel, variants, defaultValue, groupId)}
-      title={text("title", "Checkbox", "props")}
-      name={text("name", "Checkbox", "props")}
-      checked={checked}
-      error={boolean("error", false, "props")}
-      disabled={boolean("disabled", false, "props")}
-      focused={boolean("focused", false, "props")}
-      labelledById={text("labelledById", undefined, "props")}
-      onChange={() => setChecked(!checked)}
-    />
-  );
-};
+export const checkbox = () => (
+  <Checkbox
+    variant={select(variantsLabel, variants, defaultValue, groupId)}
+    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")}
+    labelledById={text("labelledById", undefined, "props")}
+  />
+);
 
 const story = page({
   title: "Components|Atoms/Checkbox",

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

@@ -6,8 +6,7 @@ import {
   MATISSE_BLUE,
   RED,
   CHARADE_GREY,
-  STORM_GREY,
-  ROYAL_BLUE
+  STORM_GREY
 } from "../../../constants/colors";
 
 const backgroundColor = { default: `${TRANSPARENT}` };
@@ -19,10 +18,7 @@ const disabledCheckColor = { default: `${WHITE};` };
 const checkColor = { default: `${WHITE};` };
 const errorStyles = { default: `border: 1px solid ${RED};` };
 const focusedStyles = {
-  default: `
-    outline: 3px solid ${ROYAL_BLUE}; 
-    outline-offset: 3px;
-  `
+  default: `box-shadow: 0 0 5px 0 ${MATISSE_BLUE};`
 };
 const disabledCheckedStyles = {
   default: `

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

@@ -52,9 +52,7 @@ import {
   DisabledPaymentMethodsAddIcon,
   ReversalNeededIcon,
   OverageIcon,
-  ShortageIcon,
-  PersonIcon,
-  PaymentStatusIcon
+  ShortageIcon
 } from "./index";
 
 const story = page({
@@ -116,5 +114,3 @@ export const successfulIcon = () => <SuccessfulIcon />;
 export const trashIconV2 = () => <TrashIconV2 />;
 export const verifiedEmailIcon = () => <VerifiedEmailIcon />;
 export const voidedIcon = () => <VoidedIcon />;
-export const personIcon = () => <PersonIcon />;
-export const paymentStatusIcon = () => <PaymentStatusIcon />;

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

@@ -99,8 +99,6 @@ import OverageIcon from "./OverageIcon";
 import ShortageIcon from "./ShortageIcon";
 import NoResultsIcon from "./NoResultsIcon";
 import AgencyIcon from "./AgencyIcon";
-import PersonIcon from "./PersonIcon";
-import PaymentStatusIcon from "./PaymentStatusIcon";
 
 export {
   AccountsIcon,
@@ -203,7 +201,5 @@ export {
   OverageIcon,
   ShortageIcon,
   NoResultsIcon,
-  AgencyIcon,
-  PersonIcon,
-  PaymentStatusIcon
+  AgencyIcon
 };

package/src/components/molecules/multiple-select-filter/MultipleSelectFilter.js

@@ -16,9 +16,7 @@ const MultipleSelectFilter = ({
   actions,
   autocompleteValue,
   btnContentOverride,
-  btnExtraStyles,
   disabled,
-  dropdownExtraStyles,
   extraStyles,
   fields,
   filterLabel,
@@ -31,29 +29,27 @@ const MultipleSelectFilter = ({
   options,
   placeholder = "Search",
   searchable = true,
+  selectedOptions,
+  setSelectedOptions,
   themeValues,
   truncateBtnTextWidth = "15rem"
 }) => {
   const [opened, setOpened] = useState(false);
-  const [selectedOptions, setSelectedOptions] = useState([]);
   const [appliedOptions, setAppliedOptions] = useState([]);
-  const openedRef = useRef(opened);
 
-  const handleOnClose = () => {
-    if (openedRef.current) {
-      setOpened(false);
-      actions.fields.searchTerm.set("");
-    }
+  const handleClickOutsideContainer = () => {
+    setOpened(false);
+    actions.fields.searchTerm.set("");
+    onApply(selectedOptions);
   };
-  const containerRef = useOutsideClickHook(() => handleOnClose());
+  const containerRef = useOutsideClickHook(() => handleClickOutsideContainer());
   const dropdownRef = useRef(null);
   const filterButtonRef = useRef(null);
   const applyFilterButtonRef = useRef(null);
   const filterDropdownID = `${name}-filter-dropdown`;
-  const listGroupID = `${name}-list-group`;
+  const checkboxListID = `${name}-checkbox-list`;
 
   useEffect(() => {
-    openedRef.current = opened;
     if (!opened) {
       onApply(selectedOptions);
       setAppliedOptions(selectedOptions);
@@ -81,7 +77,9 @@ const MultipleSelectFilter = ({
           filterButtonRef.current &&
           filterButtonRef.current.contains(event.target))
       ) {
-        handleOnClose();
+        setOpened(false);
+        actions.fields.searchTerm.set("");
+        onApply(selectedOptions);
       }
     };
     document.addEventListener("keydown", handleKeyDown);
@@ -100,20 +98,14 @@ const MultipleSelectFilter = ({
           setOpened(!opened);
         }}
         opened={opened}
-        backgroundHoverColor={
-          appliedOptions?.length
-            ? themeValues.secondaryHoverColor
-            : themeValues.primaryHoverColor
-        }
         backgroundColor={
-          appliedOptions?.length
+          opened
+            ? themeValues.primaryColor
+            : selectedOptions?.length
             ? themeValues.secondaryColor
-            : themeValues.primaryColor
-        }
-        textColor={appliedOptions?.length ? WHITE : CHARADE_GREY}
-        textHoverColor={
-          opened && !appliedOptions?.length ? CHARADE_GREY : WHITE
+            : WHITE
         }
+        contentColor={!opened && selectedOptions?.length ? WHITE : CHARADE_GREY}
         name={name}
         filterDropdownID={filterDropdownID}
         hasIcon={hasIcon}
@@ -121,15 +113,12 @@ const MultipleSelectFilter = ({
         truncateBtnTextWidth={truncateBtnTextWidth}
         filterLabel={filterLabel}
         selectedOptions={selectedOptions}
-        extraStyles={btnExtraStyles}
       ></FilterButton>
       <FilterDropdown
         id={filterDropdownID}
         ref={dropdownRef}
-        ariaOwns={listGroupID}
-        ariaControls={listGroupID}
+        ariaOwns={checkboxListID}
         opened={opened}
-        extraStyles={dropdownExtraStyles}
       >
         <SearchBox
           showSearchBox={searchable && options?.length > 8}
@@ -140,7 +129,7 @@ const MultipleSelectFilter = ({
           disabled={disabled}
         ></SearchBox>
         <FilterableList
-          id={listGroupID}
+          id={checkboxListID}
           options={options}
           appliedOptions={appliedOptions}
           themeValues={themeValues}
@@ -162,20 +151,23 @@ const MultipleSelectFilter = ({
         >
           <ActionLinkButton
             action={() => {
+              setOpened(false);
               setSelectedOptions([]);
-              handleOnClose();
+              actions.fields.searchTerm.set("");
               onClear();
             }}
             text="Clear"
             dataQa={`${name}-clear-filters`}
-            ariaLabel={"Clear all filters"}
           ></ActionLinkButton>
           <ActionLinkButton
             ref={applyFilterButtonRef}
-            action={() => handleOnClose()}
+            action={() => {
+              setOpened(false);
+              actions.fields.searchTerm.set("");
+              onApply(selectedOptions);
+            }}
             text="Apply"
             dataQa={`${name}-apply-filters`}
-            ariaLabel={"Apply all filters"}
           ></ActionLinkButton>
         </Box>
       </FilterDropdown>

package/src/components/molecules/multiple-select-filter/MultipleSelectFilter.stories.js

@@ -41,6 +41,8 @@ const items = [
 ];
 
 const FormWrapper = props => {
+  const [selectedItems, setSelectedItems] = useState([]);
+
   return (
     <MultipleSelectFilter
       autocompleteValue={props.autocompleteValue}
@@ -53,8 +55,8 @@ const FormWrapper = props => {
       placeholder={"Find an agency"}
       fields={props.fields}
       actions={props.actions}
-      btnExtraStyles={props.btnExtraStyles}
-      dropdownExtraStyles={props.dropdownExtraStyles}
+      selectedOptions={selectedItems}
+      setSelectedOptions={setSelectedItems}
     />
   );
 };

package/src/components/molecules/multiple-select-filter/MultipleSelectFilter.styled.js

@@ -5,9 +5,9 @@ import ButtonWithAction from "../../atoms/button-with-action";
 
 const StyledFilterContainer = styled(Box)`
   position: relative;
-  overflow: visible;
   box-sizing: border-box;
   padding: 0;
+  ${({ extraStyles }) => extraStyles}
 `;
 
 export const FilterContainer = forwardRef((props, ref) => (
@@ -18,7 +18,7 @@ const StyledFilterDropdown = styled(Box)`
   position: absolute;
   top: calc(100% + 0.5rem);
   left: 0;
-  width: 18.4rem;
+  width: 100%;
   background-color: white;
   z-index: 1000;
   border-radius: 0.25rem;
@@ -39,23 +39,15 @@ const FilterButton = styled(ButtonWithAction)`
   padding: 0.5rem;
   border-radius: 0.25rem;
   box-shadow: 0px 1px 2px 0px rgba(41, 42, 51, 0.1);
-  ${({ opened, textColor, textHoverColor }) => `
-    color: ${opened ? textHoverColor : textColor};
-    :hover,
-    :active,
-    :focus {
-      color: ${textHoverColor};
-      > * {
-        color: ${textHoverColor};
-      }
-    }
+  ${({ textColor }) => `
+    color: ${textColor};
   `}
-  ${({ opened, backgroundColor, backgroundHoverColor }) => `
-    background-color: ${opened ? backgroundHoverColor : backgroundColor};  
+  ${({ backgroundColor }) => `
+    background-color: ${backgroundColor};
     :hover,
     :active,
     :focus {
-      background-color: ${backgroundHoverColor};
+      background-color: ${backgroundColor};
     }
   `}
 `;

package/src/components/molecules/multiple-select-filter/MultipleSelectFilter.theme.js

@@ -1,13 +1,9 @@
-import { INFO_BLUE, MATISSE_BLUE, WHITE } from "../../../constants/colors";
+import { INFO_BLUE, MATISSE_BLUE } from "../../../constants/colors";
 
-const primaryColor = WHITE;
-const primaryHoverColor = INFO_BLUE;
+const primaryColor = INFO_BLUE;
 const secondaryColor = MATISSE_BLUE;
-const secondaryHoverColor = "#115D7E";
 
 export const fallbackValues = {
   primaryColor,
-  primaryHoverColor,
-  secondaryColor,
-  secondaryHoverColor
+  secondaryColor
 };

package/src/components/molecules/multiple-select-filter/__private__/ActionLinkButton.js

@@ -2,26 +2,23 @@ import React, { forwardRef } from "react";
 import { ButtonWithAction } from "../../../atoms";
 import { FONT_WEIGHT_REGULAR } from "../../../../constants/style_constants";
 
-const ActionLinkButton = forwardRef(
-  ({ action, text, dataQa, ariaLabel }, ref) => {
-    return (
-      <ButtonWithAction
-        ref={ref}
-        action={action}
-        variant="tertiary"
-        extraStyles={`
+const ActionLinkButton = forwardRef(({ action, text, dataQa }, ref) => {
+  return (
+    <ButtonWithAction
+      ref={ref}
+      action={action}
+      variant="tertiary"
+      extraStyles={`
         padding: 0.2rem; 
         margin: 0.5rem; 
         min-height: auto; 
         min-width: auto;
       `}
-        textExtraStyles={`font-weight: ${FONT_WEIGHT_REGULAR};`}
-        text={text}
-        dataQa={dataQa}
-        aria-label={ariaLabel}
-      ></ButtonWithAction>
-    );
-  }
-);
+      textExtraStyles={`font-weight: ${FONT_WEIGHT_REGULAR};`}
+      text={text}
+      dataQa={dataQa}
+    ></ButtonWithAction>
+  );
+});
 
 export default ActionLinkButton;

package/src/components/molecules/multiple-select-filter/__private__/FilterButton.js

@@ -11,27 +11,17 @@ const FilterButton = forwardRef(
       action = noop,
       opened,
       backgroundColor,
-      backgroundHoverColor,
-      textColor,
-      textHoverColor,
+      contentColor,
       name,
       filterDropdownID,
       hasIcon = false,
       icon: Icon,
       truncateBtnTextWidth,
       filterLabel,
-      selectedOptions,
-      extraStyles
+      selectedOptions
     },
     ref
   ) => {
-    const btnTextFilterDescription = selectedOptions?.length
-      ? `${filterLabel ? `${filterLabel}: ` : ""}${selectedOptions[0].name}`
-      : `${filterLabel ? filterLabel : ""}`;
-    const btnTextItemsDescription =
-      selectedOptions?.length && selectedOptions?.length > 1
-        ? `, +${selectedOptions?.length - 1} More`
-        : "";
     return (
       <StyledFilterButton
         ref={ref}
@@ -41,13 +31,7 @@ const FilterButton = forwardRef(
         aria-expanded={opened}
         aria-controls={filterDropdownID}
         backgroundColor={backgroundColor}
-        backgroundHoverColor={backgroundHoverColor}
-        textColor={textColor}
-        textHoverColor={textHoverColor}
-        opened={opened}
         dataQa={`${name}-filter-button`}
-        extraStyles={extraStyles}
-        aria-label={`${filterLabel} Filter: ${btnTextFilterDescription} ${btnTextItemsDescription}`}
         contentOverride
       >
         {btnContentOverride ? (
@@ -58,7 +42,7 @@ const FilterButton = forwardRef(
             style={{ display: "flex", flexDirection: "row" }}
             intrinsic
           >
-            {hasIcon && <Icon color={opened ? textHoverColor : textColor} />}
+            {hasIcon && <Icon color={contentColor} />}
             <Center
               as="span"
               style={{
@@ -70,7 +54,7 @@ const FilterButton = forwardRef(
             >
               <Text
                 variant="pS"
-                color={opened ? textHoverColor : textColor}
+                color={contentColor}
                 extraStyles={`
                   white-space: nowrap;
                   overflow: hidden;
@@ -78,13 +62,19 @@ const FilterButton = forwardRef(
                   ${truncateBtnTextWidth && `max-width:` + truncateBtnTextWidth}
                 `}
               >
-                {btnTextFilterDescription}
+                {selectedOptions?.length
+                  ? `${filterLabel ? filterLabel + ": " : ""}${
+                      selectedOptions[0].name
+                    }`
+                  : `${filterLabel ? filterLabel : ""}`}
               </Text>
-              <Text color={opened ? textHoverColor : textColor} variant="pS">
-                {btnTextItemsDescription}
+              <Text color={contentColor} variant="pS">
+                {selectedOptions?.length && selectedOptions?.length > 1
+                  ? `, +${selectedOptions?.length - 1} More`
+                  : ""}
               </Text>
             </Center>
-            <DropdownIconV2 color={opened ? textHoverColor : textColor} />
+            <DropdownIconV2 color={contentColor} />
           </Center>
         )}
       </StyledFilterButton>

package/src/components/molecules/multiple-select-filter/__private__/FilterDropdown.js

@@ -1,27 +1,23 @@
 import React, { forwardRef } from "react";
 import { FilterDropdownContainer } from "../MultipleSelectFilter.styled";
 
-const FilterDropdown = forwardRef(
-  ({ id, ariaOwns, ariaControls, opened, extraStyles, children }, ref) => {
-    return (
-      <>
-        {opened && (
-          <FilterDropdownContainer
-            ref={ref}
-            id={id}
-            role="combobox"
-            aria-expanded={opened}
-            aria-haspopup="listbox"
-            aria-owns={ariaOwns}
-            aria-controls={ariaControls}
-            extraStyles={extraStyles}
-          >
-            {children}
-          </FilterDropdownContainer>
-        )}
-      </>
-    );
-  }
-);
+const FilterDropdown = forwardRef(({ id, ariaOwns, opened, children }, ref) => {
+  return (
+    <>
+      {opened && (
+        <FilterDropdownContainer
+          ref={ref}
+          id={id}
+          role="combobox"
+          aria-expanded={opened}
+          aria-haspopup="listbox"
+          aria-owns={ariaOwns}
+        >
+          {children}
+        </FilterDropdownContainer>
+      )}
+    </>
+  );
+});
 
 export default FilterDropdown;