@thecb/components 7.9.0-beta.2 → 7.10.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.9.0-beta.2",
+  "version": "7.10.0-beta.0",
   "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.theme.js

@@ -1,12 +1,7 @@
-import {
-  WHITE,
-  TRANSPARENT,
-  SAPPHIRE_BLUE,
-  PEACOCK_BLUE,
-  MATISSE_BLUE,
-  RASPBERRY,
-  ERROR_COLOR
-} from "../../../constants/colors";
+/*
+  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
+*/
 
 const padding = {
   primary: "0.75rem 1.5rem",
@@ -24,18 +19,18 @@ const padding = {
 };
 
 const color = {
-  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"
 };
 
 const fontSizeVariant = {
@@ -99,123 +94,123 @@ const minWidth = {
 };
 
 const 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"
 };
 
 const 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"
 };
 
 const 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"
 };
 
 const 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"
 };
 
 const 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"
 };
 
 const 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"
 };
 
 const 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"
 };
 
 const 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"
 };
 
 export const fallbackValues = {

package/src/components/atoms/line-item/LineItem.js

@@ -4,13 +4,7 @@ import Paragraph from "../paragraph";
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./LineItem.theme";
 
-const LineItem = ({
-  description,
-  subDescription,
-  amount,
-  themeValues,
-  displayQuantity = null
-}) => (
+const LineItem = ({ description, subDescription, amount, themeValues }) => (
   <Cluster nowrap justify="space-between" align="start">
     <Stack childGap="0px">
       <Paragraph
@@ -23,14 +17,6 @@ const LineItem = ({
         {subDescription}
       </Paragraph>
     </Stack>
-    {!!displayQuantity && (
-      <Paragraph
-        variant={themeValues.paragraphVariant}
-        weight={themeValues.weightTitle}
-      >
-        {`x${displayQuantity}`}
-      </Paragraph>
-    )}
     <Paragraph
       variant={themeValues.paragraphVariant}
       weight="600"

package/src/components/atoms/line-item/LineItem.stories.js

@@ -17,12 +17,3 @@ export const lineItem = () => (
     amount={text("amount", "$4.00", "props")}
   />
 );
-
-export const lineItemWithQuantity = () => (
-  <LineItem
-    description={text("description", "Foo", "props")}
-    subDescription={text("subDescription", "Bar", "props")}
-    amount={text("amount", "$4.00", "props")}
-    displayQuantity={2}
-  />
-);

package/src/components/molecules/workflow-tile/WorkflowTile.js

@@ -12,13 +12,16 @@ import {
 } from "../../../constants/colors";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 import ButtonWithLink from "../../atoms/button-with-link";
+import ButtonWithAction from "../../atoms/button-with-action";
 import { Box, Stack } from "../../atoms/layouts";
 const WorkflowTile = ({
   workflowName = "Test Workflow",
   workflowDescription = "Link your benefit plan",
   workflowActionName = "Search",
   slug,
-  buttonVariant = "primary"
+  buttonVariant = "primary",
+  selectWorkflowAction,
+  navigate
 }) => (
   <Box
     background={WHITE}
@@ -48,19 +51,37 @@ const WorkflowTile = ({
         borderColor={GRECIAN_GREY}
         borderWidthOverride="2px 0 0 0"
       >
-        <ButtonWithLink
-          variant={buttonVariant}
-          primary={buttonVariant == "primary"}
-          primaryBG={MATISSE_BLUE}
-          fontWeight={FONT_WEIGHT_SEMIBOLD}
-          fontSize={"1.125rem"}
-          text={workflowActionName}
-          minWidth={"100%"}
-          url={`/service/${slug}`}
-          extraStyles={`width: 100%; margin: 0;`}
-          linkExtraStyles={`justify-content: center;`}
-          dataQa={slug}
-        />
+        {selectWorkflowAction ? (
+          <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={() => {
+              selectWorkflowAction(slug);
+              navigate(`/service/${slug}`);
+            }}
+          />
+        ) : (
+          <ButtonWithLink
+            variant={buttonVariant}
+            primary={buttonVariant == "primary"}
+            primaryBG={MATISSE_BLUE}
+            fontWeight={FONT_WEIGHT_SEMIBOLD}
+            fontSize={"1.125rem"}
+            text={workflowActionName}
+            minWidth={"100%"}
+            url={`/service/${slug}`}
+            extraStyles={`width: 100%; margin: 0;`}
+            linkExtraStyles={`justify-content: center;`}
+            dataQa={slug}
+          />
+        )}
       </Box>
     </Stack>
   </Box>

package/src/constants/colors.js

@@ -54,8 +54,6 @@ const HOVER_LIGHT_BLUE = "#EFFAFF";
 const MATISSE_BLUE = "#15749D";
 const ROYAL_BLUE = "#3181E3";
 const ASTRAL_BLUE = "#3176AA";
-const SAPPHIRE_BLUE = "#116285";
-const PEACOCK_BLUE = "#0E506D";
 // GREEN
 const FOREST_GREEN = "#19b03F";
 const MEADOW_GREEN = "#16C98D";
@@ -78,7 +76,6 @@ const RED = "#FF0000";
 const CRIMSON_RED = "#ED1C24";
 const THUNDERBIRD_RED = "#C3191F";
 const RAZZMATAZZ_RED = "#D11053";
-const RASPBERRY = "#ED125F";
 const FANTASY_RED = "#FCF4F4";
 const COSMOS_RED = "#FFD0D3";
 const BLUSH_RED = "#FFF0F5";
@@ -164,8 +161,6 @@ export {
   MATISSE_BLUE,
   ROYAL_BLUE,
   ASTRAL_BLUE,
-  SAPPHIRE_BLUE,
-  PEACOCK_BLUE,
   FOREST_GREEN,
   MEADOW_GREEN,
   POLAR_GREEN,
@@ -187,7 +182,6 @@ export {
   FANTASY_RED,
   COSMOS_RED,
   BLUSH_RED,
-  RASPBERRY,
   ALERT_COLORS,
   ERROR_COLOR
 };