@thecb/components 8.3.1-beta.3 → 8.3.1-beta.5

package/package.json

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

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

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import styled from "styled-components";
-import { Link } from "react-router-dom";
-import { ROYAL_BLUE } from "../../../constants/colors";
+import { Link, useMatch } from "react-router-dom";
+import { ROYAL_BLUE, INFO_BLUE} from "../../../constants/colors";
 /*
   The extracting of props and the disabling of the eslint rule is to stop React from complaining about
   unrecognized DOM attributes.
@@ -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} match={match} ref={ref} />
+    }
   )
 )`
   display: flex;
@@ -24,6 +28,7 @@ export const StyledInternalLink = styled(
   font-size: ${({ fontSize }) => fontSize};
   font-family: ${({ fontFamily }) => fontFamily};
   margin: ${({ margin }) => margin};
+  background-color: ${({ match }) => match ? INFO_BLUE : 'transparent'};
 
   &:hover {
     color: ${({ hoverColor }) => hoverColor};