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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "8.3.1-beta.5",
+  "version": "8.3.1-beta.7",
   "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

@@ -4,11 +4,10 @@ import { URL_TEST } from "../../../constants/regex_constants";
 import { InternalLink, ExternalLink } from "../link";
 import { safeChildren } from "../../../util/general";
 import ButtonWithAction from "../button-with-action";
+import { useMatch } from "react-router-dom";
 
 const ButtonWithLink = ({
   url = "/",
-  active = false,
-  activeBackgroundColor = undefined,
   disabled = false,
   fileLink = false,
   extraStyles,
@@ -20,13 +19,13 @@ const ButtonWithLink = ({
   const ButtonWithLinkWrapper = ({
     children,
     url,
-    active,
-    activeBackgroundColor,
     disabled,
     newTab,
     dataQa,
     extraStyles
   }) => {
+    let match = useMatch(url);
+    console.log("🚀 ~ file: ButtonWithLink.js:32 ~ match:", match)
     if (disabled) {
       return safeChildren(children, <span />);
     }
@@ -43,8 +42,7 @@ const ButtonWithLink = ({
     ) : (
       <InternalLink
         to={url}
-        active={active}
-        activeBackgroundColor={activeBackgroundColor}
+        match={match}
         tabIndex="-1"
         dataQa={dataQa}
         extraStyles={extraStyles}
@@ -57,8 +55,6 @@ const ButtonWithLink = ({
   return (
     <ButtonWithLinkWrapper
       url={url}
-      active={active}
-      activeBackgroundColor={activeBackgroundColor}
       disabled={disabled}
       newTab={newTab}
       extraStyles={`${linkExtraStyles} text-decoration: none; &:hover {

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

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
 import styled from "styled-components";
-import { Link, useMatch } from "react-router-dom";
+import { Link } 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
@@ -13,11 +13,7 @@ export const StyledInternalLink = styled(
     (
       { hoverColor, activeColor, active, color, extrastyles, ...props },
       ref
-    ) => {
-      let match = useMatch();
-      console.log("🚀 ~ file: InternalLink.styled.js:18 ~ match:", match);
-      return <Link {...props} match={match} ref={ref} />
-    }
+    ) => <Link {...props} ref={ref} />
   )
 )`
   display: flex;
@@ -43,7 +39,6 @@ export const StyledInternalLink = styled(
   &:active {
     text-decoration: underline;
     color: ${({ activeColor }) => activeColor};
-    background-color: ${({ activeBackgroundColor }) => activeBackgroundColor ? activeBackgroundColor : 'transparent'};
   }
 
   ${({ extrastyles }) => extrastyles}

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

@@ -1,7 +1,6 @@
 import {
   SAPPHIRE_BLUE,
   PEACOCK_BLUE,
-  INFO_BLUE,
   MATISSE_BLUE,
 } from "../../../constants/colors";
 
@@ -12,13 +11,11 @@ const fontFamily = {
 
 const hoverColor = SAPPHIRE_BLUE;
 const activeColor = PEACOCK_BLUE;
-const activeBackgroundColor = INFO_BLUE;
 const externalLinkColor = MATISSE_BLUE;
 
 export const fallbackValues = {
   fontFamily,
   hoverColor,
   activeColor,
-  activeBackgroundColor,
   externalLinkColor,
 };