@thecb/components 9.1.7-beta.0 → 9.1.7-beta.2

package/package.json

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

package/src/components/atoms/alert/Alert.js

@@ -4,7 +4,7 @@ import { Box, Center, Cluster, Stack, Cover, Sidebar } from "../layouts";
 import Text from "../text";
 import { fallbackValues } from "./Alert.theme";
 import { themeComponent } from "../../../util/themeUtils";
-import { generateShadows } from "../../../util/generateShadows";
+import { generateShadows } from "../../../util/colorUtils";
 
 const Alert = ({
   heading,

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

@@ -16,10 +16,12 @@ import {
   GREY_CHATEAU,
   MINESHAFT_GREY,
   STORM_GREY,
+  TRANSPARENT,
   WHITE
 } from "../../../constants/colors";
 import { fallbackValues } from "./Dropdown.theme";
 import { themeComponent } from "../../../util/themeUtils";
+import { addOpacity } from "../../../util/colorUtils";
 
 const IconWrapper = styled.div`
   position: absolute;
@@ -57,50 +59,66 @@ const DropdownContentWrapper = styled.div`
 const DropdownItemWrapper = styled.li`
   text-align: start;
   border-width: 2px;
-  border-color: transparent;
+  border-style: solid;
+  border-color: ${({ selected, themeValues }) =>
+    selected
+      ? addOpacity(themeValues.selectedColor, 0.2, 0, 0, 0)
+      : TRANSPARENT};
   box-shadow: none;
-  padding: 1rem;
   box-sizing: border-box;
   width: 100%;
   list-style: none;
   cursor: ${({ disabled }) => (disabled ? "default" : "pointer")};
 
   &:hover {
-    border-color: themeValues.selectedColor;
-  }
-  &:focus {
-    outline: none;
-    border-color: themeValues.selectedColor;
-  }
-`;
-// ${({ selected, themeValues }) =>
-// selected ? themeValues.selectedColor : TRANSPARENT};
-const DropdownItemBorder = styled.div`
-  background-color: ${({ selected, themeValues }) =>
-    selected ? themeValues.selectedColor : WHITE};
-  border-width: 2px;
-  border-color: white;
-  width: 100%;
-
-  &:hover {
-    background-color: ${({ selected, disabled, themeValues }) =>
+    background: ${({ selected, disabled, themeValues }) =>
       selected
-        ? themeValues.selectedColor
+        ? addOpacity(themeValues.selectedColor, 0.2, 0, 0, 0)
         : disabled
         ? WHITE
         : themeValues.hoverColor};
+    > * {
+      background: ${({ selected, disabled, themeValues }) =>
+        selected
+          ? addOpacity(themeValues.selectedColor, 0.2, 0, 0, 0)
+          : disabled
+          ? WHITE
+          : themeValues.hoverColor};
+      border-color: ${({ selected, themeValues }) =>
+        selected
+          ? addOpacity(themeValues.selectedColor, 0.2, 0, 0, 0)
+          : themeValues.hoverColor};
+    }
   }
   &:focus {
-    background-color: ${({ selected, disabled, themeValues }) =>
-      selected
-        ? themeValues.selectedColor
-        : disabled
-        ? WHITE
-        : themeValues.hoverColor};
     outline: none;
+    background: ${({ selected, themeValues }) =>
+      selected ? addOpacity(themeValues.selectedColor, 0.2, 0, 0, 0) : ""};
+    border-color: ${({ selected, themeValues }) =>
+      selected ? TRANSPARENT : themeValues.selectedColor};
+    > * {
+      background: ${({ selected, disabled, themeValues }) =>
+        selected
+          ? addOpacity(themeValues.selectedColor, 0.2, 0, 0, 0)
+          : 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,
@@ -400,7 +418,11 @@ const Dropdown = ({
                     role="option"
                     onFocus={() => setFocusedRef(optionRefs.current[i])}
                   >
-                    <DropdownItemBorder selected={choice.value === value}>
+                    <DropdownItemBorder
+                      disabled={disabledValues.includes(choice.value)}
+                      selected={choice.value === value}
+                      themeValues={themeValues}
+                    >
                       <Text
                         variant="p"
                         color={

package/src/components/molecules/terms-and-conditions/TermsAndConditionsControlV2.js

@@ -8,7 +8,7 @@ import {
   CHARADE_GREY,
   ERROR_COLOR
 } from "../../../constants/colors";
-import { generateShadows } from "../../../util/generateShadows";
+import { generateShadows } from "../../../util/colorUtils";
 import useScrollTo from "../../../util/useScrollTo";
 
 const TermsAndConditionsControlV2 = ({

package/src/util/{generateShadows.js → colorUtils.js}

@@ -58,3 +58,9 @@ export const generateShadows = (baseColorRGB = "rgb(41, 42, 51)") => {
     overlay
   };
 };
+
+export const addOpacity = (color, opacity, r, g, b) => {
+  const rgba = `rgba(${r}, ${g}, ${b}, ${opacity})`;
+
+  return `linear-gradient(0deg, ${rgba}, ${rgba}), linear-gradient(0deg, ${color}, ${color});`;
+};