@thecb/components 9.2.0-beta.9 → 9.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.2.0-beta.9",
+  "version": "9.2.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,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/components/molecules/popover/Popover.js

@@ -4,7 +4,7 @@ import Text from "../../atoms/text";
 import Paragraph from "../../atoms/paragraph";
 import { Box } from "../../atoms/layouts";
 import ButtonWithAction from "../../atoms/button-with-action";
-import { useOutsideClick } from "../../../util";
+import { useOutsideClick } from "../../../hooks";
 import { noop } from "../../../util/general";
 import { fallbackValues } from "./Popover.theme";
 

package/src/components/molecules/radio-section/radio-button/RadioButton.js

@@ -24,19 +24,21 @@ const RadioButton = ({
   const buttonBorder = {
     onFocused: {
       borderColor: themeValues.activeColor,
-      boxShadow: `0px 0px 4px 0px ${themeValues.activeColor}`
+      outline: `3px solid ${themeValues.activeColor}`,
+      outlineOffset: "2px"
     },
     offFocused: {
       borderColor: themeValues.activeColor,
-      boxShadow: `0px 0px 4px 0px ${themeValues.activeColor}`
+      outline: `3px solid ${themeValues.activeColor}`,
+      outlineOffset: "2px"
     },
     on: {
       borderColor: themeValues.activeColor,
-      boxShadow: "0px 0px 0px 0px #FFFFFF"
+      outline: "0"
     },
     off: {
       borderColor: themeValues.inactiveColor,
-      boxShadow: "0px 0px 0px 0px #FFFFFF"
+      outline: "0"
     }
   };
 
@@ -97,7 +99,7 @@ const RadioButton = ({
         borderWidth="1px"
         borderStyle="solid"
         borderRadius="12px"
-        margin="4px 14px 4px 4px"
+        margin="6px 14px 6px 6px"
         height="24px"
         width="24px"
         variants={buttonBorder}

package/src/components/molecules/radio-section/radio-button/RadioButton.theme.js

@@ -1,7 +1,7 @@
-import { MATISSE_BLUE, GREY_CHATEAU } from "../../../../constants/colors";
+import { MATISSE_BLUE, STORM_GREY } from "../../../../constants/colors";
 
 const activeColor = `${MATISSE_BLUE}`;
-const inactiveColor = `${GREY_CHATEAU}`;
+const inactiveColor = `${STORM_GREY}`;
 
 export const fallbackValues = {
   activeColor,

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

@@ -9,7 +9,7 @@ import {
   ERROR_COLOR
 } from "../../../constants/colors";
 import { generateShadows } from "../../../util/generateShadows";
-import useScrollTo from "../../../util/useScrollTo";
+import { useScrollTo } from "../../../hooks";
 
 const TermsAndConditionsControlV2 = ({
   showCheckbox = true,

package/src/components/molecules/toast-notification/ToastNotification.js

@@ -12,6 +12,7 @@ import {
   WHITE
 } from "../../../constants/colors";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+import { generateShadows } from "../../../util/generateShadows";
 
 const VARIANTS = {
   SUCCESS: "success",
@@ -37,7 +38,7 @@ const ToastNotification = ({
         ? backgroundColor
         : variant === VARIANTS.SUCCESS
         ? HINT_GREEN
-        : variant === "error"
+        : variant === VARIANTS.ERROR
         ? ERROR_BACKGROUND_COLOR
         : WHITE
     }
@@ -47,9 +48,7 @@ const ToastNotification = ({
     tabIndex={toastOpen ? "-1" : "0"}
     padding="0rem 1rem"
     borderRadius="4px"
-    boxShadow="0px 4px 4px rgba(41, 42, 51, 0.15),
-      0px 1px 7px rgba(41, 42, 51, 0.2),
-      0px 7px 12px rgba(41, 42, 51, 0.15)"
+    boxShadow={generateShadows().standard.base}
     extraStyles={`
       display: ${toastOpen ? "block" : "none"};
       position: fixed; bottom: 4rem; left: 4rem;
@@ -58,8 +57,8 @@ const ToastNotification = ({
     `}
   >
     <Cluster align="center" childGap={childGap}>
-      {variant === "success" && <SuccessfulIconMedium />}
-      {variant === "error" && <ErroredIcon />}
+      {variant === VARIANTS.SUCCESS && <SuccessfulIconMedium />}
+      {variant === VARIANTS.ERROR && <ErroredIcon />}
       <Box padding="1rem 0" maxWidth={maxWidth}>
         <Paragraph
           weight={FONT_WEIGHT_SEMIBOLD}

package/src/components/molecules/toast-notification/ToastNotification.stories.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import ToastNotification from "./ToastNotification";
 import page from "../../../../.storybook/page";
-import { useToastNotification } from "../../../util";
+import { useToastNotification } from "../../../hooks";
 import { ToastVariants } from "../../../types/common";
 
 export const toastNotificationSuccess = () => {
@@ -38,13 +38,13 @@ export const toastNotificationError = () => {
     toastVariant,
     toastMessage,
     showToast,
-    hideToast,
+    hideToast
   } = useToastNotification();
 
   useEffect(() => {
     showToast({
       message: "An error occurred",
-      variant: ToastVariants.ERROR,
+      variant: ToastVariants.ERROR
     });
   }, []);
 
@@ -61,7 +61,7 @@ toastNotificationError.storyName = "Error Toast";
 
 const story = page({
   title: "Components|Molecules/ToastNotification",
-  Component: ToastNotification,
+  Component: ToastNotification
 });
 
 export default story;

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";
@@ -193,6 +194,7 @@ export {
   BOSTON_BLUE,
   HOVER_LIGHT_BLUE,
   MATISSE_BLUE,
+  MATISSE_BLUE_DARK,
   ROYAL_BLUE,
   ROYAL_BLUE_VIVID,
   ASTRAL_BLUE,

package/src/hooks/index.js

@@ -0,0 +1,3 @@
+export { default as useOutsideClick } from "./use-outside-click";
+export { default as useScrollTo } from "./use-scroll-to";
+export { default as useToastNotification } from "./use-toast-notification";

package/src/{util/hooks → hooks}/use-toast-notification/index.d.ts

@@ -1,23 +1,23 @@
-import { ToastVariants } from "../../../types/common";
+import { ToastVariants } from "../../types/common";
 
-export interface UseToastProps {
+export interface UseToastOptions {
   timeout?: number;
 }
 
 export interface UseToastResult {
   isToastOpen: boolean;
-  toastVariant: "" | ToastVariants;
+  toastVariant: string | ToastVariants;
   toastMessage: string;
   showToast: ({
     message,
-    variant,
+    variant
   }: {
     message: string;
-    variant: ToastVariants;
+    variant: string | ToastVariants;
   }) => void;
   hideToast: () => void;
 }
 
 export default function useToastNotification(
-  props: UseToastProps
+  options?: UseToastOptions
 ): UseToastResult;

package/src/index.d.ts

@@ -1,5 +1,5 @@
 import * as constants from "./constants";
-import * as hooks from "./util/hooks";
+import * as hooks from "./hooks";
 export * from "./components";
 export * from "./types/common";
 export { constants, hooks };

package/src/index.js

@@ -1,4 +1,5 @@
 export * from "./components";
 import * as constants from "./constants";
 import * as util from "./util";
-export { constants, util };
+import * as hooks from "./hooks";
+export { constants, util, hooks };

package/src/types/common/ToastVariants.ts

@@ -1,6 +1,6 @@
 enum ToastVariants {
   ERROR = "error",
-  SUCCESS = "success",
+  SUCCESS = "success"
 }
 
 export default ToastVariants;

package/src/util/index.js

@@ -2,8 +2,8 @@ import * as formats from "./formats";
 import * as general from "./general";
 import * as theme from "./themeUtils";
 import useFocusInvalidInput from "./focusFirstInvalidInputHook";
-import useOutsideClick from "./useOutsideClick";
-import useToastNotification from "./hooks/use-toast-notification";
+import useOutsideClick from "../hooks/use-outside-click";
+import useToastNotification from "../hooks/use-toast-notification";
 
 export {
   formats,

package/src/util/hooks/index.js

@@ -1 +0,0 @@
-export { default as useToastNotification } from "./use-toast-notification";