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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.2.4-beta.7",
+  "version": "10.2.4-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-action/ButtonWithAction.stories.js

@@ -13,6 +13,7 @@ const variants = {
   ghost: "ghost",
   smallGhost: "smallGhost",
   danger: "danger",
+  disabled: "disabled",
   None: undefined
 };
 const defaultValue = "primary";

package/src/components/atoms/button-with-action/ButtonWithAction.theme.js

@@ -3,9 +3,11 @@ import {
   TRANSPARENT,
   SAPPHIRE_BLUE,
   PEACOCK_BLUE,
+  MANATEE_GREY,
   MATISSE_BLUE,
   RASPBERRY,
-  ERROR_COLOR
+  ERROR_COLOR,
+  GRECIAN_GREY
 } from "../../../constants/colors";
 
 const padding = {
@@ -20,7 +22,9 @@ const padding = {
   danger: "0.75rem 1.5rem",
   dangerSecondary: "0.75rem 1.5rem",
   whiteSecondary: "0.75rem 2rem",
-  whitePrimary: "1.125rem 0.75rem"
+  whitePrimary: "1.125rem 0.75rem",
+  disabled: "0.75rem 1.5rem",
+  smallDisabled: "0.75rem 1rem"
 };
 
 const color = {
@@ -35,7 +39,9 @@ const color = {
   danger: WHITE,
   dangerSecondary: ERROR_COLOR,
   whiteSecondary: WHITE,
-  whitePrimary: WHITE
+  whitePrimary: WHITE,
+  disabled: MANATEE_GREY,
+  smallDisabled: MANATEE_GREY
 };
 
 const fontSizeVariant = {
@@ -50,7 +56,9 @@ const fontSizeVariant = {
   danger: "pS",
   dangerSecondary: "pS",
   whiteSecondary: "pS",
-  whitePrimary: "pS"
+  whitePrimary: "pS",
+  disabled: "pS",
+  smallDisabled: "pS"
 };
 
 const fontWeight = {
@@ -65,7 +73,9 @@ const fontWeight = {
   danger: "600",
   dangerSecondary: "600",
   whiteSecondary: "600",
-  whitePrimary: "600"
+  whitePrimary: "600",
+  disabled: "600",
+  smallDisabled: "600"
 };
 
 const height = {
@@ -80,7 +90,9 @@ const height = {
   danger: "3rem",
   dangerSecondary: "3rem",
   whiteSecondary: "3rem",
-  whitePrimary: "auto"
+  whitePrimary: "auto",
+  disabled: "3rem",
+  smallDisabled: "2.5rem"
 };
 
 const minWidth = {
@@ -95,7 +107,9 @@ const minWidth = {
   danger: "130px",
   dangerSecondary: "157px",
   whiteSecondary: "160px",
-  whitePrimary: "130px"
+  whitePrimary: "130px",
+  disabled: "130px",
+  smallDisabled: "100px"
 };
 
 const backgroundColor = {
@@ -110,7 +124,9 @@ const backgroundColor = {
   danger: RASPBERRY,
   dangerSecondary: TRANSPARENT,
   whiteSecondary: TRANSPARENT,
-  whitePrimary: TRANSPARENT
+  whitePrimary: TRANSPARENT,
+  disabled: GRECIAN_GREY,
+  smallDisabled: GRECIAN_GREY
 };
 
 const border = {
@@ -125,7 +141,9 @@ const border = {
   danger: "2px solid " + RASPBERRY,
   dangerSecondary: "2px solid " + ERROR_COLOR,
   whiteSecondary: "2px solid " + WHITE,
-  whitePrimary: "2px solid " + TRANSPARENT
+  whitePrimary: "2px solid " + TRANSPARENT,
+  disabled: "2px solid " + MANATEE_GREY,
+  smallDisabled: "2px solid " + MANATEE_GREY
 };
 
 const hoverBackgroundColor = {
@@ -140,7 +158,9 @@ const hoverBackgroundColor = {
   danger: "#BA002C",
   dangerSecondary: "#FAE7EE",
   whiteSecondary: TRANSPARENT,
-  whitePrimary: TRANSPARENT
+  whitePrimary: TRANSPARENT,
+  disabled: TRANSPARENT,
+  smallDisabled: TRANSPARENT
 };
 
 const hoverBorderColor = {
@@ -155,7 +175,9 @@ const hoverBorderColor = {
   danger: "#BA002C",
   dangerSecondary: "#B10541",
   whiteSecondary: "2px solid " + TRANSPARENT,
-  whitePrimary: "2px solid " + TRANSPARENT
+  whitePrimary: "2px solid " + TRANSPARENT,
+  disabled: MANATEE_GREY,
+  smallDisabled: MANATEE_GREY
 };
 
 const hoverColor = {
@@ -170,7 +192,9 @@ const hoverColor = {
   danger: WHITE,
   dangerSecondary: "#B10541",
   whiteSecondary: WHITE,
-  whitePrimary: WHITE
+  whitePrimary: WHITE,
+  disabled: MANATEE_GREY,
+  smallDisabled: MANATEE_GREY
 };
 
 const activeBackgroundColor = {
@@ -185,7 +209,9 @@ const activeBackgroundColor = {
   danger: "#870000",
   dangerSecondary: "#FAE7EE",
   whiteSecondary: TRANSPARENT,
-  whitePrimary: TRANSPARENT
+  whitePrimary: TRANSPARENT,
+  disabled: TRANSPARENT,
+  smallDisabled: TRANSPARENT
 };
 
 const activeBorderColor = {
@@ -200,7 +226,9 @@ const activeBorderColor = {
   danger: "#870000",
   dangerSecondary: "#910029",
   whiteSecondary: "2px solid " + TRANSPARENT,
-  whitePrimary: "2px solid " + TRANSPARENT
+  whitePrimary: "2px solid " + TRANSPARENT,
+  disabled: TRANSPARENT,
+  smallDisabled: TRANSPARENT
 };
 
 const activeColor = {
@@ -215,7 +243,9 @@ const activeColor = {
   danger: WHITE,
   dangerSecondary: "#910029",
   whiteSecondary: WHITE,
-  whitePrimary: WHITE
+  whitePrimary: WHITE,
+  disabled: MANATEE_GREY,
+  smallDisabled: MANATEE_GREY
 };
 
 export const fallbackValues = {

package/src/components/molecules/link-card/LinkCard.theme.js

@@ -3,16 +3,17 @@ import {
   LINK_WATER,
   MOON_RAKER,
   ROYAL_BLUE_VIVID,
-  MANATEE_GREY
+  MANATEE_GREY,
+  ATHENS_GREY
 } from "../../../constants/colors";
 
 const activeBackgroundColor = {
   primary: `${CORNFLOWER_BLUE}`,
-  disabled: `transparent`
+  disabled: `${ATHENS_GREY}`
 };
 const backgroundColor = {
   primary: `${LINK_WATER}`,
-  disabled: `transparent`
+  disabled: `${ATHENS_GREY}`
 };
 const borderColor = {
   primary: `${MOON_RAKER}`,
@@ -24,8 +25,8 @@ const color = {
 };
 
 export const fallbackValues = {
-  activeBackgroundColor: activeBackgroundColor,
-  backgroundColor: backgroundColor,
-  borderColor: borderColor,
-  color: color
+  activeBackgroundColor,
+  backgroundColor,
+  borderColor,
+  color
 };