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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.1.5-beta.0",
+  "version": "9.1.7-beta.0",
   "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,10 +55,8 @@ const DropdownContentWrapper = styled.div`
 `;
 
 const DropdownItemWrapper = styled.li`
-  background-color: ${({ selected, themeValues }) =>
-    selected ? themeValues.selectedColor : WHITE};
   text-align: start;
-  border-width: 0px;
+  border-width: 2px;
   border-color: transparent;
   box-shadow: none;
   padding: 1rem;
@@ -67,6 +65,23 @@ const DropdownItemWrapper = styled.li`
   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 }) =>
       selected
@@ -385,27 +400,29 @@ 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;`}
-                    >
-                      {choice.text}
-                    </Text>
+                    <DropdownItemBorder selected={choice.value === value}>
+                      <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/line-item/LineItem.js

@@ -25,7 +25,7 @@ const LineItem = ({
 
   const visibleCustomAttrs = customAttributes
     ?.filter(
-      attr => visibleFields.includes(attr.key) && attr.key !== "description"
+      attr => visibleFields?.includes(attr.key) && attr.key !== "description"
     )
     ?.map(attr => (
       <Paragraph variant="pS" weight="400" key={attr.key} color={STORM_GREY}>