@thecb/components 7.9.0 → 7.10.0-beta.0

package/dist/index.esm.js

@@ -5007,9 +5007,7 @@ var INFO_BLUE = "#E4F4FD";
 var HOVER_LIGHT_BLUE = "#EFFAFF";
 var MATISSE_BLUE = "#15749D";
 var ROYAL_BLUE = "#3181E3";
-var ASTRAL_BLUE = "#3176AA";
-var SAPPHIRE_BLUE = "#116285";
-var PEACOCK_BLUE = "#0E506D"; // GREEN
+var ASTRAL_BLUE = "#3176AA"; // GREEN
 
 var FOREST_GREEN = "#19b03F";
 var MEADOW_GREEN = "#16C98D";
@@ -5032,7 +5030,6 @@ var RED = "#FF0000";
 var CRIMSON_RED = "#ED1C24";
 var THUNDERBIRD_RED = "#C3191F";
 var RAZZMATAZZ_RED = "#D11053";
-var RASPBERRY = "#ED125F";
 var FANTASY_RED = "#FCF4F4";
 var COSMOS_RED = "#FFD0D3";
 var BLUSH_RED = "#FFF0F5"; // Second level color constants
@@ -5117,8 +5114,6 @@ var colors = /*#__PURE__*/Object.freeze({
   MATISSE_BLUE: MATISSE_BLUE,
   ROYAL_BLUE: ROYAL_BLUE,
   ASTRAL_BLUE: ASTRAL_BLUE,
-  SAPPHIRE_BLUE: SAPPHIRE_BLUE,
-  PEACOCK_BLUE: PEACOCK_BLUE,
   FOREST_GREEN: FOREST_GREEN,
   MEADOW_GREEN: MEADOW_GREEN,
   POLAR_GREEN: POLAR_GREEN,
@@ -5140,7 +5135,6 @@ var colors = /*#__PURE__*/Object.freeze({
   FANTASY_RED: FANTASY_RED,
   COSMOS_RED: COSMOS_RED,
   BLUSH_RED: BLUSH_RED,
-  RASPBERRY: RASPBERRY,
   ALERT_COLORS: ALERT_COLORS,
   ERROR_COLOR: ERROR_COLOR
 });
@@ -12541,6 +12535,10 @@ var Reel = function Reel(_ref) {
   }), safeChildren(children, /*#__PURE__*/React.createElement(Fragment$1, null)));
 };
 
+/*
+  For now I'm using string values, eventually shared components library will have its own constants file
+  for colors/values that should be used here instead
+*/
 var padding = {
   primary: "0.75rem 1.5rem",
   secondary: "0.75rem 1.5rem",
@@ -12556,18 +12554,18 @@ var padding = {
   whitePrimary: "1.125rem 0.75rem"
 };
 var color$1 = {
-  primary: WHITE,
-  secondary: MATISSE_BLUE,
-  back: MATISSE_BLUE,
-  smallPrimary: WHITE,
-  smallSecondary: MATISSE_BLUE,
-  smallGhost: MATISSE_BLUE,
-  ghost: MATISSE_BLUE,
-  tertiary: MATISSE_BLUE,
-  danger: WHITE,
-  dangerSecondary: ERROR_COLOR,
-  whiteSecondary: WHITE,
-  whitePrimary: WHITE
+  primary: "#FFFFFF",
+  secondary: "#15749D",
+  back: "#15749D",
+  smallPrimary: "#FFFFFF",
+  smallSecondary: "#15749D",
+  smallGhost: "#15749D",
+  ghost: "#15749D",
+  tertiary: "#15749D",
+  danger: "#FFFFFF",
+  dangerSecondary: "#D11053",
+  whiteSecondary: "#FFFFFF",
+  whitePrimary: "#FFFFFF"
 };
 var fontSizeVariant = {
   primary: "pS",
@@ -12626,116 +12624,116 @@ var minWidth = {
   whitePrimary: "130px"
 };
 var backgroundColor = {
-  primary: MATISSE_BLUE,
-  secondary: TRANSPARENT,
-  back: TRANSPARENT,
-  smallPrimary: MATISSE_BLUE,
-  smallSecondary: TRANSPARENT,
-  smallGhost: TRANSPARENT,
-  ghost: TRANSPARENT,
-  tertiary: TRANSPARENT,
-  danger: RASPBERRY,
-  dangerSecondary: TRANSPARENT,
-  whiteSecondary: TRANSPARENT,
-  whitePrimary: TRANSPARENT
+  primary: "#15749D",
+  secondary: "transparent",
+  back: "transparent",
+  smallPrimary: "#15749D",
+  smallSecondary: "transparent",
+  smallGhost: "transparent",
+  ghost: "transparent",
+  tertiary: "transparent",
+  danger: "#ED125F",
+  dangerSecondary: "transparent",
+  whiteSecondary: "transparent",
+  whitePrimary: "transparent"
 };
 var border = {
-  primary: "2px solid " + MATISSE_BLUE,
-  secondary: "2px solid " + MATISSE_BLUE,
-  back: "2px solid " + MATISSE_BLUE,
-  smallPrimary: "2px solid " + MATISSE_BLUE,
-  smallSecondary: "2px solid " + MATISSE_BLUE,
+  primary: "2px solid #15749D",
+  secondary: "2px solid #15749D",
+  back: "2px solid #15749D",
+  smallPrimary: "2px solid #15749D",
+  smallSecondary: "2px solid #15749D",
   smallGhost: "none",
   ghost: "none",
   tertiary: "none",
-  danger: "2px solid " + RASPBERRY,
-  dangerSecondary: "2px solid " + ERROR_COLOR,
-  whiteSecondary: "2px solid " + WHITE,
-  whitePrimary: "2px solid " + TRANSPARENT
+  danger: "2px solid #ED125F",
+  dangerSecondary: "2px solid #D11053",
+  whiteSecondary: "2px solid white",
+  whitePrimary: "2px solid transparent"
 };
 var hoverBackgroundColor = {
-  primary: SAPPHIRE_BLUE,
+  primary: "#116285",
   secondary: "#DBEAF0",
-  back: TRANSPARENT,
-  smallPrimary: SAPPHIRE_BLUE,
+  back: "transparent",
+  smallPrimary: "#116285",
   smallSecondary: "#DBEAF0",
-  smallGhost: TRANSPARENT,
-  ghost: TRANSPARENT,
-  tertiary: TRANSPARENT,
+  smallGhost: "transparent",
+  ghost: "transparent",
+  tertiary: "transparent",
   danger: "#BA002C",
-  dangerSecondary: "#FAE7EE",
-  whiteSecondary: TRANSPARENT,
-  whitePrimary: TRANSPARENT
+  dangerSecondary: "transparent",
+  whiteSecondary: "transparent",
+  whitePrimary: "transparent"
 };
 var hoverBorderColor = {
-  primary: SAPPHIRE_BLUE,
-  secondary: MATISSE_BLUE,
+  primary: "#116285",
+  secondary: "#15749D",
   back: "#DCEAF1",
-  smallPrimary: SAPPHIRE_BLUE,
-  smallSecondary: MATISSE_BLUE,
-  smallGhost: TRANSPARENT,
-  ghost: TRANSPARENT,
-  tertiary: TRANSPARENT,
+  smallPrimary: "#116285",
+  smallSecondary: "#15749D",
+  smallGhost: "transparent",
+  ghost: "transparent",
+  tertiary: "transparent",
   danger: "#BA002C",
   dangerSecondary: "#B10541",
-  whiteSecondary: "2px solid " + TRANSPARENT,
-  whitePrimary: "2px solid " + TRANSPARENT
+  whiteSecondary: "2px solid transparent",
+  whitePrimary: "2px solid transparent"
 };
 var hoverColor = {
-  primary: WHITE,
-  secondary: SAPPHIRE_BLUE,
-  back: SAPPHIRE_BLUE,
-  smallPrimary: WHITE,
-  smallSecondary: SAPPHIRE_BLUE,
-  smallGhost: SAPPHIRE_BLUE,
-  ghost: SAPPHIRE_BLUE,
-  tertiary: SAPPHIRE_BLUE,
-  danger: WHITE,
+  primary: "#FFFFFF",
+  secondary: "#116285",
+  back: "#116285",
+  smallPrimary: "#FFFFFF",
+  smallSecondary: "#116285",
+  smallGhost: "#116285",
+  ghost: "#116285",
+  tertiary: "#116285",
+  danger: "#FFFFFF",
   dangerSecondary: "#B10541",
-  whiteSecondary: WHITE,
-  whitePrimary: WHITE
+  whiteSecondary: "#FFFFFF",
+  whitePrimary: "#FFFFFF"
 };
 var activeBackgroundColor = {
-  primary: PEACOCK_BLUE,
+  primary: "#0E506D",
   secondary: "#B8D5E1",
-  back: TRANSPARENT,
-  smallPrimary: PEACOCK_BLUE,
+  back: "transparent",
+  smallPrimary: "#0E506D",
   smallSecondary: "#B8D5E1",
-  smallGhost: TRANSPARENT,
-  ghost: TRANSPARENT,
-  tertiary: TRANSPARENT,
+  smallGhost: "transparent",
+  ghost: "transparent",
+  tertiary: "transparent",
   danger: "#870000",
-  dangerSecondary: "#FAE7EE",
-  whiteSecondary: TRANSPARENT,
-  whitePrimary: TRANSPARENT
+  dangerSecondary: "transparent",
+  whiteSecondary: "transparent",
+  whitePrimary: "transparent"
 };
 var activeBorderColor = {
-  primary: PEACOCK_BLUE,
-  secondary: MATISSE_BLUE,
-  back: PEACOCK_BLUE,
-  smallPrimary: PEACOCK_BLUE,
-  smallSecondary: MATISSE_BLUE,
-  smallGhost: TRANSPARENT,
-  ghost: TRANSPARENT,
-  tertiary: TRANSPARENT,
+  primary: "#0E506D",
+  secondary: "#15749D",
+  back: "#0E506D",
+  smallPrimary: "#0E506D",
+  smallSecondary: "#15749D",
+  smallGhost: "transparent",
+  ghost: "transparent",
+  tertiary: "transparent",
   danger: "#870000",
   dangerSecondary: "#910029",
-  whiteSecondary: "2px solid " + TRANSPARENT,
-  whitePrimary: "2px solid " + TRANSPARENT
+  whiteSecondary: "2px solid transparent",
+  whitePrimary: "2px solid transparent"
 };
 var activeColor = {
-  primary: WHITE,
-  secondary: MATISSE_BLUE,
-  back: PEACOCK_BLUE,
-  smallPrimary: WHITE,
-  smallSecondary: PEACOCK_BLUE,
-  smallGhost: PEACOCK_BLUE,
-  ghost: PEACOCK_BLUE,
-  tertiary: PEACOCK_BLUE,
-  danger: WHITE,
+  primary: "#FFFFFF",
+  secondary: "#15749D",
+  back: "#0E506D",
+  smallPrimary: "#FFFFFF",
+  smallSecondary: "#0E506D",
+  smallGhost: "#0E506D",
+  ghost: "#0E506D",
+  tertiary: "#0E506D",
+  danger: "#FFFFFF",
   dangerSecondary: "#910029",
-  whiteSecondary: WHITE,
-  whitePrimary: WHITE
+  whiteSecondary: "#FFFFFF",
+  whitePrimary: "#FFFFFF"
 };
 var fallbackValues$1 = {
   padding: padding,
@@ -25488,9 +25486,7 @@ var LineItem = function LineItem(_ref) {
   var description = _ref.description,
       subDescription = _ref.subDescription,
       amount = _ref.amount,
-      themeValues = _ref.themeValues,
-      _ref$displayQuantity = _ref.displayQuantity,
-      displayQuantity = _ref$displayQuantity === void 0 ? null : _ref$displayQuantity;
+      themeValues = _ref.themeValues;
   return /*#__PURE__*/React.createElement(Cluster, {
     nowrap: true,
     justify: "space-between",
@@ -25503,10 +25499,7 @@ var LineItem = function LineItem(_ref) {
   }, description), /*#__PURE__*/React.createElement(Paragraph$1, {
     variant: themeValues.paragraphVariant,
     weight: "400"
-  }, subDescription)), !!displayQuantity && /*#__PURE__*/React.createElement(Paragraph$1, {
-    variant: themeValues.paragraphVariant,
-    weight: themeValues.weightTitle
-  }, "x".concat(displayQuantity)), /*#__PURE__*/React.createElement(Paragraph$1, {
+  }, subDescription)), /*#__PURE__*/React.createElement(Paragraph$1, {
     variant: themeValues.paragraphVariant,
     weight: "600",
     extraStyles: "margin: 0; text-align: end; min-width: fit-content; padding-left: 32px;"
@@ -48581,7 +48574,9 @@ var WorkflowTile = function WorkflowTile(_ref) {
       workflowActionName = _ref$workflowActionNa === void 0 ? "Search" : _ref$workflowActionNa,
       slug = _ref.slug,
       _ref$buttonVariant = _ref.buttonVariant,
-      buttonVariant = _ref$buttonVariant === void 0 ? "primary" : _ref$buttonVariant;
+      buttonVariant = _ref$buttonVariant === void 0 ? "primary" : _ref$buttonVariant,
+      selectWorkflowAction = _ref.selectWorkflowAction,
+      navigate = _ref.navigate;
   return /*#__PURE__*/React.createElement(Box, {
     background: WHITE,
     boxShadow: "0px 0px 5px 0px ".concat(GHOST_GREY),
@@ -48609,7 +48604,21 @@ var WorkflowTile = function WorkflowTile(_ref) {
     background: ATHENS_GREY,
     borderColor: GRECIAN_GREY,
     borderWidthOverride: "2px 0 0 0"
-  }, /*#__PURE__*/React.createElement(ButtonWithLink, {
+  }, selectWorkflowAction ? /*#__PURE__*/React.createElement(ButtonWithAction, {
+    variant: buttonVariant,
+    primary: buttonVariant == "primary",
+    primaryBG: MATISSE_BLUE,
+    fontWeight: FONT_WEIGHT_SEMIBOLD,
+    fontSize: "1.125rem",
+    text: workflowActionName,
+    minWidth: "100%",
+    extraStyles: "width: 100%; margin: 0; text-align: center;",
+    dataQa: slug,
+    action: function action() {
+      selectWorkflowAction(slug);
+      navigate("/service/".concat(slug));
+    }
+  }) : /*#__PURE__*/React.createElement(ButtonWithLink, {
     variant: buttonVariant,
     primary: buttonVariant == "primary",
     primaryBG: MATISSE_BLUE,