@thecb/components 8.4.0-beta.2 → 8.4.0-beta.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "8.4.0-beta.2",
+  "version": "8.4.0-beta.21",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/icons/ArrowRightIcon.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { ROYAL_BLUE_VIVID } from "../../../constants/colors";
 
-const ArrowRightIcon = ({ color = ROYAL_BLUE_VIVID }) => {
+const ArrowRightIcon = ({ color = ROYAL_BLUE_VIVID, labeledBy = "" }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -9,6 +9,7 @@ const ArrowRightIcon = ({ color = ROYAL_BLUE_VIVID }) => {
       height="20"
       viewBox="0 0 20 20"
       fill="none"
+      aria-labeledBy={labeledBy}
     >
       <path
         fillRule="evenodd"

package/src/components/atoms/icons/PlusCircleIcon.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { ROYAL_BLUE_VIVID } from "../../../constants/colors";
 
-const PlusCircleIcon = ({ color = ROYAL_BLUE_VIVID }) => {
+const PlusCircleIcon = ({ color = ROYAL_BLUE_VIVID, labeledBy = "" }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -9,6 +9,7 @@ const PlusCircleIcon = ({ color = ROYAL_BLUE_VIVID }) => {
       height="20"
       viewBox="0 0 20 20"
       fill="none"
+      aria-labelledby={labeledBy}
     >
       <path
         fillRule="evenodd"

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

@@ -1,11 +1,17 @@
+import {
+  SAPPHIRE_BLUE,
+  PEACOCK_BLUE,
+  MATISSE_BLUE
+} from "../../../constants/colors";
+
 const fontFamily = {
   primary: "Public Sans",
   secondary: "Open Sans"
 };
 
-const hoverColor = "#116285";
-const activeColor = "#0E506D";
-const externalLinkColor = "#15749D";
+const hoverColor = SAPPHIRE_BLUE;
+const activeColor = PEACOCK_BLUE;
+const externalLinkColor = MATISSE_BLUE;
 
 export const fallbackValues = {
   fontFamily,

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

@@ -1,125 +1,78 @@
-import React from "react";
-import { useNavigate } from "react-router-dom";
-import Heading from "../../atoms/heading";
-import Paragraph from "../../atoms/paragraph";
-// import { Text } from "../../atoms/text";
-// import { ROYAL_BLUE_VIVID } from "../../../constants/colors";
+import React, { useContext } from "react";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 import { Box, Stack } from "../../atoms/layouts";
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./LinkCard.theme";
-// import PlusCircleIcon from "../../atoms/icons/PlusCircleIcon";
-// import ArrowRightIcon from "../../atoms/icons/ArrowRightIcon";
+import { ThemeContext } from "styled-components";
+import * as Styled from "./LinkCard.styled";
 
 const LinkCard = ({
-  variant = "default",
   title = "Test Workflow",
   subtitle = "Link your benefit plan",
   themeValues,
-  path,
   showLeft,
   leftContent,
   showRight,
-  rightContent
+  rightContent,
+  onClick,
+  extraStyles = "",
+  extraHoverStyles = "",
+  extraActiveStyles = ""
 }) => {
-  const navigate = useNavigate();
-  const activeHoverStyles = `
-    border-radius: 8px;
-    cursor: pointer;
-    border: 1px solid ${themeValues.color};
-    background: var(--primary-color-primary-10, #EBEFFB);
-    /* Primitives/New Shadow/3-Pressed-New */
-    box-shadow: 0px 0px 0px 0px rgba(41, 42, 51, 0.10), 0px 5px 11px 0px rgba(41, 42, 51, 0.10), 0px 4px 19px 0px rgba(41, 42, 51, 0.09), 0px 27px 26px 0px rgba(41, 42, 51, 0.05), 0px 56px 31px 0px rgba(41, 42, 51, 0.01), 0px 80px 33px 0px rgba(41, 42, 51, 0.00);
-    .show-on-hover {color: ${themeValues.color};}
-  `;
+  const { isMobile } = useContext(ThemeContext);
 
   return (
-    <Box
-      background="#FEFEFE" // --grays-cool-gray-00
-      border="1px solid #C4CEF4;" // --primary-color-primary-30
+    <Styled.Container
+      border={`1px solid ${themeValues.background};`}
       borderRadius="8px"
       dataQa={`link-card-${title}`}
       width="100%"
-      maxWidth="288px"
-      minWidth="240px"
+      maxWidth={isMobile ? "100%" : "288px"}
+      minWidth={isMobile ? "240px" : "288px"}
       minHeight="141px"
-      padding="16px 24px"
-      extraStyles="
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 40px;
-        flex-shrink: 0;
-        align-self: stretch;"
-      hoverStyles={activeHoverStyles}
-      activeStyles={activeHoverStyles}
-      onClick={() => {
-        navigate(path);
-      }}
+      padding="24px"
+      extraStyles={extraStyles}
+      hoverStyles={extraHoverStyles}
+      activeStyles={extraActiveStyles}
+      onClick={onClick}
     >
-      <Stack childGap={0} bottomItem={3} fullHeight>
-        <Box padding={"1rem 1rem 0 1rem"}>
-          <Heading
+      <Stack
+        childGap={0}
+        bottomItem={3}
+        justify="space-between"
+        style={{ width: "100%" }}
+        fullHeight
+      >
+        <Box padding={0} width="100%">
+          <Styled.Title
             variant="h6"
             weight={FONT_WEIGHT_SEMIBOLD}
             color={themeValues.color}
             margin={0}
-            extraStyles="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; align-self: stretch; overflow: hidden; text-overflow: ellipsis; font-family: Public Sans; font-size: 16px; font-style: normal; font-weight: 600; line-height: 150%;"
           >
             {title}
-          </Heading>
+          </Styled.Title>
         </Box>
-        <Box padding={"0 1rem 40px"} /* minHeight={"4.25rem"}*/>
-          <Paragraph
-            variant="pS"
-            color={themeValues.color}
-            extraStyles="overflow: hidden;
-              text-overflow: ellipsis;
-              display: -webkit-box;
-              -webkit-box-orient: vertical;
-              -webkit-line-clamp: 2;
-              align-self: stretch;
-
-              /* CB Standard/Desktop/D - P Small - Regular */
-              font-family: Public Sans;
-              font-size: 14px;
-              font-style: normal;
-              font-weight: 400;
-              line-height: 150%; /* 21px */
-              letter-spacing: 0.14px;"
-          >
+        <Box padding={"0 0 40px"} width="100%">
+          <Styled.Subtitle variant="pS" color={themeValues.color}>
             {subtitle}
-          </Paragraph>
+          </Styled.Subtitle>
         </Box>
         <Box
           background="transparent"
           borderWidthOverride="0 0 0 0"
-          padding="0 1rem 1rem 1rem"
+          padding="0"
+          width="100%"
         >
-          <Stack direction="row" justify="space-between">
+          <Styled.Footer direction="row" childGap="6px" justify="space-between">
+            {/* To keep rightContent aligned right, use an empty Box as leftContent if none is provided */}
+            {showLeft && !leftContent && <Box />}
             {showLeft && leftContent}
             {showRight && rightContent}
-
-            {/* <Stack direction="row" childGap="6px">
-              <Text
-                variant="pS"
-                color={themeValues.color}
-                extraStyles="text-align: right; color: transparent;"
-                className="show-on-hover"
-              >
-                {workflowActionName}
-              </Text>
-              {workflowActionName === "Find" && (
-                <PlusCircleIcon color={themeValues.color} />
-              )}
-              {workflowActionName === "Pay" && (
-                <ArrowRightIcon color={themeValues.color} />
-              )}
-            </Stack> */}
-          </Stack>
+          </Styled.Footer>
         </Box>
       </Stack>
-    </Box>
+    </Styled.Container>
   );
 };
 

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

@@ -8,7 +8,7 @@ import { text } from "@storybook/addon-knobs";
 import Badge from "../../atoms/badge/Badge";
 import PlusCircleIcon from "../../atoms/icons/PlusCircleIcon";
 import AutopayIcon from "../../atoms/icons/AutopayIcon";
-import { ROYAL_BLUE_VIVID } from "../../../constants/colors";
+import { ROYAL_BLUE_VIVID, CORNFLOWER_BLUE } from "../../../constants/colors";
 
 const groupId = "props";
 
@@ -37,6 +37,12 @@ export const linkCard = () => (
         <PlusCircleIcon color={ROYAL_BLUE_VIVID} />
       </Stack>
     }
+    extraHoverStyles={`
+      .show-on-hover {color: ${ROYAL_BLUE_VIVID};}
+    `}
+    extraActiveStyles={`
+      background-color: ${CORNFLOWER_BLUE};
+    `}
   />
 );
 

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

@@ -0,0 +1,70 @@
+import styled from "styled-components";
+import Heading from "../../atoms/heading";
+import Paragraph from "../../atoms/paragraph";
+import Stack from "../../atoms/layouts/Stack";
+import { Box } from "../../atoms/layouts";
+import {
+  ROYAL_BLUE_VIVID,
+  LINK_WATER,
+  MOON_RAKER
+} from "../../../constants/colors";
+
+export const Container = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  gap: 40px;
+  flex-shrink: 0;
+  align-self: stretch;
+  border-radius: 8px;
+
+  &:hover,
+  &:active {
+    cursor: pointer;
+    box-shadow: 0px 0px 0px 0px rgba(41, 42, 51, 0.1),
+      0px 5px 11px 0px rgba(41, 42, 51, 0.1),
+      0px 4px 19px 0px rgba(41, 42, 51, 0.09),
+      0px 27px 26px 0px rgba(41, 42, 51, 0.05),
+      0px 56px 31px 0px rgba(41, 42, 51, 0.01),
+      0px 80px 33px 0px rgba(41, 42, 51, 0);
+  }
+
+  &:hover:not(:active) {
+    border: 1px solid ${MOON_RAKER};
+    background-color: ${LINK_WATER};
+  }
+
+  &:active {
+    border: 1px solid ${ROYAL_BLUE_VIVID};
+  }
+`;
+
+export const Title = styled(Heading)`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  align-self: stretch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 16px;
+  line-height: 150%;
+  background-color: transparent;
+`;
+
+export const Subtitle = styled(Paragraph)`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  align-self: stretch;
+  font-size: 14px;
+  line-height: 150 %;
+  letter-spacing: 0.14px;
+`;
+
+export const Footer = styled(Stack)`
+  align-items: center;
+  width: 100%;
+`;

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

@@ -1,7 +1,7 @@
-import { ROYAL_BLUE_VIVID, WHITE } from "../../../constants/colors";
+import { ROYAL_BLUE_VIVID, MOON_RAKER } from "../../../constants/colors";
 
-const background = { default: `${WHITE}` };
-const color = { default: `${ROYAL_BLUE_VIVID}` };
+const background = { default: MOON_RAKER };
+const color = { default: ROYAL_BLUE_VIVID };
 
 export const fallbackValues = {
   background,

package/src/components/molecules/link-card/index.d.ts

@@ -5,12 +5,15 @@ export interface LinkCardProps {
   variant?: string; // "default" is only one
   title?: string; // title
   subtitle?: string; // beneath title
-  slug: string; // path segment of button on click (/service/${slug})
   themeValues?: any;
   showLeft?: boolean;
   leftContent?: JSX.Element;
   showRight?: boolean;
   rightContent?: JSX.Element;
+  onClick: () => void;
+  extraHoverStyles?: string;
+  extraStyles?: string;
+  extraActiveStyles?: string;
 }
 
 export const LinkCard: React.FC<Expand<LinkCardProps> &

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/colors.js

@@ -6,7 +6,7 @@ to the one generated by name-that-color.
 */
 const BLACK = "#000000";
 const TRANSPARENT = "transparent";
-// WHITE
+const LINK_WATER = "#FEFEFE";
 const WHITE = "#FFFFFF";
 const SOLITUDE_WHITE = "#EBEDF1";
 const SEASHELL_WHITE = "#F1F1F1";
@@ -45,6 +45,7 @@ const MARINER_BLUE = "#2E75D2";
 const CURIOUS_BLUE = "#27A9E1";
 const SELAGO_BLUE = "#F2F8FD";
 const ONAHAU_BLUE = "#D1ECFF";
+const MOON_RAKER = "#C4CEF4";
 const PICKLED_BLUE = "#2C3E50";
 const CERULEAN_BLUE = "#0D8DC4";
 const FOAM_BLUE = "#EFF4FD";
@@ -143,6 +144,7 @@ export {
   BLACK,
   TRANSPARENT,
   WHITE,
+  LINK_WATER,
   SOLITUDE_WHITE,
   SEASHELL_WHITE,
   ALABASTER_WHITE,
@@ -180,6 +182,7 @@ export {
   CURIOUS_BLUE,
   SELAGO_BLUE,
   ONAHAU_BLUE,
+  MOON_RAKER,
   PICKLED_BLUE,
   CERULEAN_BLUE,
   FOAM_BLUE,

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 };