@thecb/components 8.3.1-beta.7 → 8.3.1-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "8.3.1-beta.7",
+  "version": "8.3.1-beta.9",
   "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 { useMatch } from "react-router-dom";
 
 const ButtonWithLink = ({
   url = "/",
+  matchesCurrentRoute = false,
   disabled = false,
   fileLink = false,
   extraStyles,
@@ -19,13 +20,12 @@ const ButtonWithLink = ({
   const ButtonWithLinkWrapper = ({
     children,
     url,
+    matchesCurrentRoute,
     disabled,
     newTab,
     dataQa,
     extraStyles
   }) => {
-    let match = useMatch(url);
-    console.log("🚀 ~ file: ButtonWithLink.js:32 ~ match:", match)
     if (disabled) {
       return safeChildren(children, <span />);
     }
@@ -42,7 +42,7 @@ const ButtonWithLink = ({
     ) : (
       <InternalLink
         to={url}
-        match={match}
+        matchesCurrentRoute={matchesCurrentRoute}
         tabIndex="-1"
         dataQa={dataQa}
         extraStyles={extraStyles}
@@ -54,6 +54,7 @@ const ButtonWithLink = ({
 
   return (
     <ButtonWithLinkWrapper
+      matchesCurrentRoute={matchesCurrentRoute}
       url={url}
       disabled={disabled}
       newTab={newTab}

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

@@ -24,7 +24,7 @@ export const StyledInternalLink = styled(
   font-size: ${({ fontSize }) => fontSize};
   font-family: ${({ fontFamily }) => fontFamily};
   margin: ${({ margin }) => margin};
-  background-color: ${({ match }) => match ? INFO_BLUE : 'transparent'};
+  background-color: ${({ matchesCurrentRoute }) => matchesCurrentRoute ? INFO_BLUE : 'transparent'};
 
   &:hover {
     color: ${({ hoverColor }) => hoverColor};