@thecb/components 9.1.4 → 9.1.5

package/package.json

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

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,
@@ -385,27 +413,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/constants/colors.js

@@ -56,6 +56,7 @@ const INFO_BLUE = "#E4F4FD";
 const CORNFLOWER_BLUE = "#EBEFFB";
 const HOVER_LIGHT_BLUE = "#EFFAFF";
 const MATISSE_BLUE = "#15749D";
+const MATISSE_BLUE_DARK = "#105C7D";
 const ROYAL_BLUE = "#3181E3";
 const ROYAL_BLUE_VIVID = "#3B5BDB";
 const ASTRAL_BLUE = "#3176AA";
@@ -192,6 +193,7 @@ export {
   BOSTON_BLUE,
   HOVER_LIGHT_BLUE,
   MATISSE_BLUE,
+  MATISSE_BLUE_DARK,
   ROYAL_BLUE,
   ROYAL_BLUE_VIVID,
   ASTRAL_BLUE,