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

package/package.json

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

@@ -7,6 +7,7 @@ import ButtonWithAction from "../button-with-action";
 
 const ButtonWithLink = ({
   url = "/",
+  active = false,
   disabled = false,
   fileLink = false,
   extraStyles,
@@ -18,6 +19,7 @@ const ButtonWithLink = ({
   const ButtonWithLinkWrapper = ({
     children,
     url,
+    active,
     disabled,
     newTab,
     dataQa,
@@ -39,6 +41,8 @@ const ButtonWithLink = ({
     ) : (
       <InternalLink
         to={url}
+        active={active}
+        activeBackgroundColor={activeBackgroundColor}
         tabIndex="-1"
         dataQa={dataQa}
         extraStyles={extraStyles}
@@ -51,6 +55,8 @@ 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

@@ -38,6 +38,7 @@ 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,21 +1,19 @@
-import {
-  SAPPHIRE_BLUE,
-  PEACOCK_BLUE,
-  MATISSE_BLUE,
-} from "../../../constants/colors";
+import { colors } from "../../../constants";
 
 const fontFamily = {
   primary: "Public Sans",
-  secondary: "Open Sans",
+  secondary: "Open Sans"
 };
 
-const hoverColor = SAPPHIRE_BLUE;
-const activeColor = PEACOCK_BLUE;
-const externalLinkColor = MATISSE_BLUE;
+const hoverColor = "#116285";
+const activeColor = "#0E506D";
+const activeBackgroundColor = colors.INFO_BLUE;
+const externalLinkColor = "#15749D";
 
 export const fallbackValues = {
   fontFamily,
   hoverColor,
   activeColor,
-  externalLinkColor,
+  activeBackgroundColor,
+  externalLinkColor
 };

package/src/index.d.ts

@@ -1,3 +1,2 @@
 export * from "./components";
 export * from "./types/common";
-export * from "./constants";

package/src/constants/colors.d.ts

@@ -1,120 +0,0 @@
-type Color = string;
-
-type ColorSet = {
-  background: Color;
-  border: Color;
-  iconBackground: Color;
-  iconFill: Color;
-};
-
-export const BLACK: Color; 
-export const TRANSPARENT:Color; 
-// WHITE
-export const WHITE: Color; 
-export const SOLITUDE_WHITE: Color; 
-export const SEASHELL_WHITE: Color; 
-export const ALABASTER_WHITE: Color; 
-export const AQUA_HAZE_WHITE: Color; 
-export const BLEACH_WHITE: Color; 
-export const CATSKILL_WHITE: Color; 
-export const HALF_COLONIAL_WHITE: Color; 
-// GREY
-export const ATHENS_GREY: Color; 
-export const ALTO_GREY: Color; 
-export const SILVER_GREY: Color; 
-export const PEWTER_GREY: Color; 
-export const ASH_GREY: Color; 
-export const IRON_GREY: Color; 
-export const GHOST_GREY: Color; 
-export const DUSTY_GREY: Color; 
-export const REGENT_GREY: Color; 
-export const STORM_GREY: Color; 
-export const TROUT_GREY: Color; 
-export const MINESHAFT_GREY: Color; 
-export const SOOT_GREY: Color; 
-export const FIREFLY_GREY: Color; 
-export const BRIGHT_GREY: Color; 
-export const CHARADE_GREY: Color; 
-export const GRECIAN_GREY: Color; 
-export const BLACK_SQUEEZE: Color; 
-export const GREY_CHATEAU: Color; 
-export const COOL_GREY_05: Color; 
-// BLUE
-export const CLOUDBURST_BLUE: Color; 
-export const ZODIAC_BLUE: Color; 
-export const CONGRESS_BLUE: Color; 
-export const SCIENCE_BLUE: Color; 
-export const MARINER_BLUE: Color; 
-export const CURIOUS_BLUE: Color; 
-export const SELAGO_BLUE: Color; 
-export const ONAHAU_BLUE: Color; 
-export const PICKLED_BLUE: Color; 
-export const CERULEAN_BLUE: Color; 
-export const FOAM_BLUE: Color; 
-export const CELLO_BLUE: Color; 
-export const BOSTON_BLUE: Color; 
-export const INFO_BLUE: Color; 
-export const CORNFLOWER_BLUE: Color; 
-export const HOVER_LIGHT_BLUE: Color; 
-export const MATISSE_BLUE: Color; 
-export const ROYAL_BLUE: Color; 
-export const ROYAL_BLUE_VIVID: Color; 
-export const ASTRAL_BLUE: Color; 
-export const SAPPHIRE_BLUE: Color; 
-export const PEACOCK_BLUE: Color; 
-// GREEN
-export const FOREST_GREEN: Color; 
-export const MEADOW_GREEN: Color; 
-export const POLAR_GREEN: Color; 
-export const ICE_GREEN: Color; 
-export const HAZE_GREEN: Color; 
-export const EMERALD_GREEN: Color; 
-export const HINT_GREEN: Color; 
-export const SEA_GREEN: Color; 
-// YELLOW
-export const SELECTIVE_YELLOW: Color; 
-export const MUSTARD_YELLOW: Color; 
-export const FIRE_YELLOW: Color; 
-// ORANGE
-export const CARROT_ORANGE: Color; 
-export const ZEST_ORANGE: Color; 
-export const APRICOT_ORANGE: Color; 
-// RED
-export const RED: Color; 
-export const CRIMSON_RED: Color; 
-export const THUNDERBIRD_RED: Color; 
-export const RAZZMATAZZ_RED: Color; 
-export const RASPBERRY: Color; 
-export const FANTASY_RED: Color; 
-export const COSMOS_RED: Color; 
-export const BLUSH_RED: Color; 
-
-export const ERROR_COLOR: Color;
-
-export const ALERT_COLORS: {
-  warn: ColorSet;
-  info: ColorSet;
-  error: ColorSet;
-  success: ColorSet;
-  text: Color;
-  link: Color;
-};
-
-export const PILL_COLORS: {
-  danger: {
-    background: Color;
-    text: Color;
-  };
-  neutral: {
-    background: Color;
-    text: Color;
-  };
-  success: {
-    background: Color;
-    text: Color;
-  };
-  warning: {
-    background: Color;
-    text: Color;
-  };
-};

package/src/constants/index.d.ts

@@ -1,3 +0,0 @@
-import * as colors from "./colors";
-
-export { colors };