@thecb/components 10.12.2-beta.0 → 10.12.2-beta.1

package/package.json

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

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

@@ -16,6 +16,7 @@ const CheckboxLabelContainer = styled.label`
   display: flex;
   align-items: center;
   column-gap: 1rem;
+  cursor: pointer;
 `;
 
 const CheckboxIcon = styled.svg`
@@ -134,7 +135,13 @@ const Checkbox = forwardRef(
         onKeyDown={e => handleClick(e, onChange)}
         hiddenStyles={hidden}
         background={themeValues.backgroundColor}
-        extraStyles={`outline: none; ${extraStyles}; margin: ${checkboxMargin};`}
+        extraStyles={`
+          :focus {
+            outline: 0;
+          }
+          ${extraStyles}; 
+          margin: ${checkboxMargin};
+        `}
         {...rest}
       >
         <CheckboxLabelContainer data-qa={dataQa}>

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { text, select, boolean } from "@storybook/addon-knobs";
 import Checkbox from "./Checkbox";
 import page from "../../../../.storybook/page";
@@ -10,18 +10,22 @@ const variants = {
 const defaultValue = "default";
 const groupId = "props";
 
-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")}
-  />
-);
+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)}
+    />
+  );
+};
 
 const story = page({
   title: "Components|Atoms/Checkbox",

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

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

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

@@ -2,8 +2,8 @@ import React from "react";
 import { CHARADE_GREY } from "../../../constants/colors";
 
 const PersonIcon = ({
-  width = "14",
-  height = "15",
+  width = "20",
+  height = "21",
   color = CHARADE_GREY,
   ...props
 }) => {
@@ -19,7 +19,7 @@ const PersonIcon = ({
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M12.25 1.8125H1.75C1.50838 1.8125 1.3125 2.00838 1.3125 2.25V12.75C1.3125 12.9916 1.50838 13.1875 1.75 13.1875H2.625V11.7778C2.625 9.89848 4.02411 8.375 5.75 8.375H8.25C9.97589 8.375 11.375 9.89848 11.375 11.7778V13.1875H12.25C12.4916 13.1875 12.6875 12.9916 12.6875 12.75V2.25C12.6875 2.00838 12.4916 1.8125 12.25 1.8125ZM1.75 14.5H2.625H11.375H12.25C13.2165 14.5 14 13.7165 14 12.75V2.25C14 1.2835 13.2165 0.5 12.25 0.5H1.75C0.783502 0.5 0 1.2835 0 2.25V12.75C0 13.7165 0.783502 14.5 1.75 14.5ZM7 7.5C8.20812 7.5 9.1875 6.52062 9.1875 5.3125C9.1875 4.10438 8.20812 3.125 7 3.125C5.79188 3.125 4.8125 4.10438 4.8125 5.3125C4.8125 6.52062 5.79188 7.5 7 7.5Z"
+        d="M15.25 4.8125H4.75C4.50838 4.8125 4.3125 5.00838 4.3125 5.25V15.75C4.3125 15.9916 4.50838 16.1875 4.75 16.1875H5.625V14.7778C5.625 12.8985 7.02411 11.375 8.75 11.375H11.25C12.9759 11.375 14.375 12.8985 14.375 14.7778V16.1875H15.25C15.4916 16.1875 15.6875 15.9916 15.6875 15.75V5.25C15.6875 5.00838 15.4916 4.8125 15.25 4.8125ZM4.75 17.5H5.625H14.375H15.25C16.2165 17.5 17 16.7165 17 15.75V5.25C17 4.2835 16.2165 3.5 15.25 3.5H4.75C3.7835 3.5 3 4.2835 3 5.25V15.75C3 16.7165 3.7835 17.5 4.75 17.5ZM10 10.5C11.2081 10.5 12.1875 9.52062 12.1875 8.3125C12.1875 7.10438 11.2081 6.125 10 6.125C8.79188 6.125 7.8125 7.10438 7.8125 8.3125C7.8125 9.52062 8.79188 10.5 10 10.5Z"
         fill={color}
       />
     </svg>

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

@@ -100,14 +100,20 @@ const MultipleSelectFilter = ({
           setOpened(!opened);
         }}
         opened={opened}
+        backgroundHoverColor={
+          appliedOptions?.length
+            ? themeValues.secondaryHoverColor
+            : themeValues.primaryHoverColor
+        }
         backgroundColor={
-          opened
-            ? themeValues.primaryColor
-            : selectedOptions?.length
+          appliedOptions?.length
             ? themeValues.secondaryColor
-            : WHITE
+            : themeValues.primaryColor
+        }
+        textColor={appliedOptions?.length ? WHITE : CHARADE_GREY}
+        textHoverColor={
+          opened && !appliedOptions?.length ? CHARADE_GREY : WHITE
         }
-        contentColor={!opened && selectedOptions?.length ? WHITE : CHARADE_GREY}
         name={name}
         filterDropdownID={filterDropdownID}
         hasIcon={hasIcon}

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

@@ -39,15 +39,23 @@ const FilterButton = styled(ButtonWithAction)`
   padding: 0.5rem;
   border-radius: 0.25rem;
   box-shadow: 0px 1px 2px 0px rgba(41, 42, 51, 0.1);
-  ${({ textColor }) => `
-    color: ${textColor};
+  ${({ opened, textColor, textHoverColor }) => `
+    color: ${opened ? textHoverColor : textColor};
+    :hover,
+    :active,
+    :focus {
+      color: ${textHoverColor};
+      > * {
+        color: ${textHoverColor};
+      }
+    }
   `}
-  ${({ backgroundColor }) => `
-    background-color: ${backgroundColor};
+  ${({ opened, backgroundColor, backgroundHoverColor }) => `
+    background-color: ${opened ? backgroundHoverColor : backgroundColor};  
     :hover,
     :active,
     :focus {
-      background-color: ${backgroundColor};
+      background-color: ${backgroundHoverColor};
     }
   `}
 `;

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

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

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

@@ -11,7 +11,9 @@ const FilterButton = forwardRef(
       action = noop,
       opened,
       backgroundColor,
-      contentColor,
+      backgroundHoverColor,
+      textColor,
+      textHoverColor,
       name,
       filterDropdownID,
       hasIcon = false,
@@ -39,6 +41,10 @@ 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}`}
@@ -52,7 +58,7 @@ const FilterButton = forwardRef(
             style={{ display: "flex", flexDirection: "row" }}
             intrinsic
           >
-            {hasIcon && <Icon color={contentColor} />}
+            {hasIcon && <Icon color={opened ? textHoverColor : textColor} />}
             <Center
               as="span"
               style={{
@@ -64,7 +70,7 @@ const FilterButton = forwardRef(
             >
               <Text
                 variant="pS"
-                color={contentColor}
+                color={opened ? textHoverColor : textColor}
                 extraStyles={`
                   white-space: nowrap;
                   overflow: hidden;
@@ -74,11 +80,11 @@ const FilterButton = forwardRef(
               >
                 {btnTextFilterDescription}
               </Text>
-              <Text color={contentColor} variant="pS">
+              <Text color={opened ? textHoverColor : textColor} variant="pS">
                 {btnTextItemsDescription}
               </Text>
             </Center>
-            <DropdownIconV2 color={contentColor} />
+            <DropdownIconV2 color={opened ? textHoverColor : textColor} />
           </Center>
         )}
       </StyledFilterButton>

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

@@ -51,7 +51,6 @@ const FilterableListItem = forwardRef(
           :active,
           :focus {
             background-color: ${themeValues.primaryColor};
-            outline-offset: -3px;
           }
           ${showDivider && dividerStyles}
           ${extraStyles}