@thecb/components 8.3.1-beta.2 → 8.3.1-beta.4

package/package.json

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

package/src/components/atoms/button-with-link/ButtonWithLink.js

@@ -8,6 +8,7 @@ import ButtonWithAction from "../button-with-action";
 const ButtonWithLink = ({
   url = "/",
   active = false,
+  activeBackgroundColor = undefined,
   disabled = false,
   fileLink = false,
   extraStyles,
@@ -20,6 +21,7 @@ const ButtonWithLink = ({
     children,
     url,
     active,
+    activeBackgroundColor,
     disabled,
     newTab,
     dataQa,

package/src/components/atoms/link/InternalLink.styled.js

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
 import styled from "styled-components";
-import { Link } from "react-router-dom";
+import { Link, useMatch } from "react-router-dom";
 import { ROYAL_BLUE } from "../../../constants/colors";
 /*
   The extracting of props and the disabling of the eslint rule is to stop React from complaining about
@@ -13,7 +13,11 @@ export const StyledInternalLink = styled(
     (
       { hoverColor, activeColor, active, color, extrastyles, ...props },
       ref
-    ) => <Link {...props} ref={ref} />
+    ) => {
+      let match = useMatch();
+      console.log("🚀 ~ file: InternalLink.styled.js:18 ~ match:", match);
+      return <Link {...props} ref={ref} />
+    }
   )
 )`
   display: flex;
@@ -25,6 +29,8 @@ export const StyledInternalLink = styled(
   font-family: ${({ fontFamily }) => fontFamily};
   margin: ${({ margin }) => margin};
 
+  background-color: ${match} ? 'lightblue' : 'transparent',
+
   &:hover {
     color: ${({ hoverColor }) => hoverColor};
     text-decoration: underline;

package/src/components/atoms/link/Link.theme.js

@@ -1,19 +1,24 @@
-import { colors } from "../../../constants";
+import {
+  SAPPHIRE_BLUE,
+  PEACOCK_BLUE,
+  INFO_BLUE,
+  MATISSE_BLUE,
+} from "../../../constants/colors";
 
 const fontFamily = {
   primary: "Public Sans",
-  secondary: "Open Sans"
+  secondary: "Open Sans",
 };
 
-const hoverColor = "#116285";
-const activeColor = "#0E506D";
-const activeBackgroundColor = colors.INFO_BLUE;
-const externalLinkColor = "#15749D";
+const hoverColor = SAPPHIRE_BLUE;
+const activeColor = PEACOCK_BLUE;
+const activeBackgroundColor = INFO_BLUE;
+const externalLinkColor = MATISSE_BLUE;
 
 export const fallbackValues = {
   fontFamily,
   hoverColor,
   activeColor,
   activeBackgroundColor,
-  externalLinkColor
+  externalLinkColor,
 };