@thecb/components 8.3.1-beta.8 → 8.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "8.3.1-beta.8",
+  "version": "8.3.1",
   "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,9 @@ 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 = "/",
-  matchesCurrentRoute = false,
   disabled = false,
   fileLink = false,
   extraStyles,
@@ -20,7 +18,6 @@ const ButtonWithLink = ({
   const ButtonWithLinkWrapper = ({
     children,
     url,
-    matchesCurrentRoute,
     disabled,
     newTab,
     dataQa,
@@ -42,7 +39,6 @@ const ButtonWithLink = ({
     ) : (
       <InternalLink
         to={url}
-        matchesCurrentRoute={matchesCurrentRoute}
         tabIndex="-1"
         dataQa={dataQa}
         extraStyles={extraStyles}

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, INFO_BLUE} from "../../../constants/colors";
+import { ROYAL_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.
@@ -24,7 +24,6 @@ export const StyledInternalLink = styled(
   font-size: ${({ fontSize }) => fontSize};
   font-family: ${({ fontFamily }) => fontFamily};
   margin: ${({ margin }) => margin};
-  background-color: ${({ matchesCurrentRoute }) => matchesCurrentRoute ? INFO_BLUE : 'transparent'};
 
   &:hover {
     color: ${({ hoverColor }) => hoverColor};

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

@@ -1,12 +1,12 @@
 import {
   SAPPHIRE_BLUE,
   PEACOCK_BLUE,
-  MATISSE_BLUE,
+  MATISSE_BLUE
 } from "../../../constants/colors";
 
 const fontFamily = {
   primary: "Public Sans",
-  secondary: "Open Sans",
+  secondary: "Open Sans"
 };
 
 const hoverColor = SAPPHIRE_BLUE;
@@ -17,5 +17,5 @@ export const fallbackValues = {
   fontFamily,
   hoverColor,
   activeColor,
-  externalLinkColor,
+  externalLinkColor
 };

package/src/constants/colors.d.ts

@@ -0,0 +1,127 @@
+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

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

package/src/index.d.ts

@@ -1,2 +1,4 @@
+import * as constants from "./constants";
 export * from "./components";
 export * from "./types/common";
+export { constants };