@thecb/components 8.3.0-beta.0 → 8.4.0-beta.0

package/package.json

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

package/src/components/atoms/badge/Badge.js

@@ -21,6 +21,7 @@ const StyledBadge = styled(Text)`
   font-weight: 400;
   line-height: 150%; /* 15px */
   letter-spacing: 0.2px;
+  white-space: nowrap;
 
   @media screen and (min-width: 1049px) {
     font-size: 12px;

package/src/components/atoms/badge/Badge.theme.js

@@ -4,7 +4,7 @@ import {
   HINT_GREEN,
   INFO_BLUE,
   MATISSE_BLUE,
-  ROYAL_BLUE,
+  ROYAL_BLUE_VIVID,
   SEA_GREEN,
   ZEST_ORANGE
 } from "../../../constants/colors";
@@ -19,7 +19,7 @@ const background = {
 const color = {
   info: `${MATISSE_BLUE}`,
   warn: `${ZEST_ORANGE}`,
-  primary: `${ROYAL_BLUE}`,
+  primary: `${ROYAL_BLUE_VIVID}`,
   success: `${SEA_GREEN}`
 };
 

package/src/components/atoms/form-layouts/index.d.ts

@@ -1,13 +1,17 @@
 import React from "react";
 import Expand from "../../../util/expand";
-import { ErrorMessage, Field, FieldActions } from "../../../types/common";
+import {
+  ErrorMessageDictionary,
+  Field,
+  FieldActions
+} from "../../../types/common";
 
 export interface FormInputProps {
   extraStyles?: string;
   field?: Field;
   fieldActions?: FieldActions;
   disabled?: boolean;
-  errorMessages?: ErrorMessage[];
+  errorMessages?: ErrorMessageDictionary;
   helperModal?: boolean;
   isEmail?: boolean;
   isNum?: boolean;

package/src/components/atoms/form-select/index.d.ts

@@ -1,20 +1,20 @@
 import React from "react";
 import Expand from "../../../util/expand";
-import { ErrorMessage, Field, FieldActions } from "../../../types/common";
-
-interface Option {
-  text?: string;
-  value?: string | number;
-}
+import {
+  ErrorMessageDictionary,
+  Field,
+  FieldActions,
+  FormSelectOption
+} from "../../../types/common";
 
 export interface FormSelectProps {
   disabled?: boolean;
   dropdownMaxHeight?: string;
   labelTextWhenNoError?: string;
-  options?: Option[];
+  options?: FormSelectOption[];
   fieldActions?: FieldActions;
   showErrors?: boolean;
-  errorMessages?: ErrorMessage[];
+  errorMessages?: ErrorMessageDictionary;
   field?: Field;
 }
 

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

@@ -0,0 +1,41 @@
+import React from "react";
+import { ROYAL_BLUE_VIVID } from "../../../constants/colors";
+
+const ArrowRightIcon = ({ color = ROYAL_BLUE_VIVID }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.17828 4.15501C8.98314 4.35015 8.983 4.66649 9.17796 4.8618L13.475 9.16659H3.83337C3.55723 9.16659 3.33337 9.39044 3.33337 9.66659V10.3333C3.33337 10.6094 3.55723 10.8333 3.83337 10.8333H13.475L9.17796 15.138C8.983 15.3333 8.98314 15.6497 9.17828 15.8448L9.64649 16.313C9.84175 16.5083 10.1583 16.5083 10.3536 16.313L16.3132 10.3535C16.5084 10.1582 16.5084 9.84163 16.3132 9.64637L10.3536 3.6868C10.1583 3.49154 9.84175 3.49154 9.64649 3.68681L9.17828 4.15501Z"
+        fill={color}
+      />
+      <mask
+        id="mask0_6329_1483"
+        style={{ maskType: "luminance" }}
+        maskUnits="userSpaceOnUse"
+        x="3"
+        y="3"
+        width="14"
+        height="14"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M9.17828 4.15501C8.98314 4.35015 8.983 4.66649 9.17796 4.8618L13.475 9.16659H3.83337C3.55723 9.16659 3.33337 9.39044 3.33337 9.66659V10.3333C3.33337 10.6094 3.55723 10.8333 3.83337 10.8333H13.475L9.17796 15.138C8.983 15.3333 8.98314 15.6497 9.17828 15.8448L9.64649 16.313C9.84175 16.5083 10.1583 16.5083 10.3536 16.313L16.3132 10.3535C16.5084 10.1582 16.5084 9.84163 16.3132 9.64637L10.3536 3.6868C10.1583 3.49154 9.84175 3.49154 9.64649 3.68681L9.17828 4.15501Z"
+          fill="white"
+        />
+      </mask>
+      <g mask="url(#mask0_6329_1483)">
+        <rect width="20" height="20" fill={color} />
+      </g>
+    </svg>
+  );
+};
+export default ArrowRightIcon;

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

@@ -0,0 +1,22 @@
+import React from "react";
+import { ROYAL_BLUE_VIVID } from "../../../constants/colors";
+
+const PlusCircleIcon = ({ color = ROYAL_BLUE_VIVID }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10 1.25C5.16751 1.25 1.25 5.16751 1.25 10C1.25 14.8325 5.16751 18.75 10 18.75C14.8325 18.75 18.75 14.8325 18.75 10C18.75 5.16751 14.8325 1.25 10 1.25ZM2.75 10C2.75 5.99594 5.99594 2.75 10 2.75C14.0041 2.75 17.25 5.99594 17.25 10C17.25 14.0041 14.0041 17.25 10 17.25C5.99594 17.25 2.75 14.0041 2.75 10ZM10.75 9.25V5.25H9.25V9.25H5.25V10.75H9.25V14.75H10.75V10.75H14.75V9.25H10.75Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+export default PlusCircleIcon;

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

@@ -75,6 +75,7 @@ import XCircleIconSmall from "./XCircleIconSmall";
 import SuccessfulIconSmall from "./SuccessfulIconSmall";
 import ArrowLeftCircleIconSmall from "./ArrowLeftCircleIconSmall";
 import ArrowRightCircleIconSmall from "./ArrowRightCircleIconSmall";
+import ArrowRightIcon from "./ArrowRightIcon";
 import ArrowUpCircleIconSmall from "./ArrowUpCircleIconSmall";
 import ArrowDownCircleIconSmall from "./ArrowDownCircleIconSmall";
 import SuccessfulIconMedium from "./SuccessfulIconMedium";
@@ -83,6 +84,7 @@ import RefundIconMedium from "./RefundIconMedium";
 import ArrowLeftCircleIconMedium from "./ArrowLeftCircleIconMedium";
 import ChargebackIconMedium from "./ChargebackIconMedium";
 import ChargebackReversalIconMedium from "./ChargebackReversalIconMedium";
+import PlusCircleIcon from "./PlusCircleIcon";
 
 export {
   AccountsIcon,
@@ -162,6 +164,7 @@ export {
   SuccessfulIconSmall,
   ArrowLeftCircleIconSmall,
   ArrowRightCircleIconSmall,
+  ArrowRightIcon,
   ArrowUpCircleIconSmall,
   ArrowDownCircleIconSmall,
   SuccessfulIconMedium,
@@ -169,5 +172,6 @@ export {
   RefundIconMedium,
   ArrowLeftCircleIconMedium,
   ChargebackIconMedium,
-  ChargebackReversalIconMedium
+  ChargebackReversalIconMedium,
+  PlusCircleIcon
 };

package/src/components/molecules/index.js

@@ -11,6 +11,7 @@ export { default as FooterWithSubfooter } from "./footer-with-subfooter";
 export { default as ForgotPasswordForm } from "./forgot-password-form";
 export { default as HighlightTabRow } from "./highlight-tab-row";
 export { iconsMap as ObligationIcons } from "./obligation/icons";
+export { default as LinkCard } from "./link-card";
 export { default as LoginForm } from "./login-form";
 export { default as Modal } from "./modal";
 export { default as Module } from "./module";

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

@@ -0,0 +1,128 @@
+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/Text";
+import { ROYAL_BLUE_VIVID } from "../../../constants/colors";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+import { Box, Stack } from "../../atoms/layouts";
+import Badge from "../../atoms/badge/Badge";
+import { PlusCircleIcon, AutopayIcon, ArrowRightIcon } from "../../atoms/icons";
+import { themeComponent } from "../../../util/themeUtils";
+import { fallbackValues } from "./LinkCard.theme";
+
+const LinkCard = ({
+  variant = "default",
+  workflowName = "Test Workflow",
+  workflowDescription = "Link your benefit plan",
+  workflowActionName = "Find",
+  themeValues,
+  slug
+}) => {
+  const navigate = useNavigate();
+
+  return (
+    <Box
+      background="#FEFEFE" // --grays-cool-gray-00
+      border="1px solid #C4CEF4;" // --primary-color-primary-30
+      padding={0}
+      borderRadius="8px"
+      dataQa={`link-card-${workflowDescription}`}
+      hoverStyles={`
+        border-radius: 8px;
+        cursor: pointer;
+        border: 1px solid ${ROYAL_BLUE_VIVID};
+        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: ${ROYAL_BLUE_VIVID};}
+      `}
+      extraStyles="display: flex;
+        width: 288px; 
+        min-width: 240px; 
+        max-width: 288px; 
+        min-height: 141px; 
+        padding: 16px 24px; 
+        flex-direction: column; 
+        align-items: flex-start; 
+        gap: 40px; 
+        flex-shrink: 0; 
+        align-self: stretch;"
+      onClick={() => {
+        // @TODO replace with something valid like navigate
+        console.log("attempting navigation...");
+        // window.location.pathname = `/service/${slug}`;
+        navigate(`/service/${slug}`);
+      }}
+    >
+      <Stack childGap={0} bottomItem={3} fullHeight>
+        <Box padding={"1rem 1rem 0 1rem"}>
+          <Heading
+            variant="h6"
+            weight={FONT_WEIGHT_SEMIBOLD}
+            color={themeValues.color}
+            margin={"0 0 0.5rem 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%;"
+          >
+            {workflowName}
+          </Heading>
+        </Box>
+        <Box padding={"0 1rem 1rem"} 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;"
+          >
+            {workflowDescription}
+          </Paragraph>
+        </Box>
+        <Box
+          background="transparent"
+          borderWidthOverride="0 0 0 0"
+          padding="1.5rem 0 1.5rem 1rem"
+        >
+          <Stack direction="row" justify="space-between">
+            <Box
+              background="transparent"
+              borderWidthOverride="0 0 0 0"
+              padding="0"
+            >
+              <Badge label="Autopay Available" Icon={AutopayIcon} />
+            </Box>
+            <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>
+        </Box>
+      </Stack>
+    </Box>
+  );
+};
+
+export default themeComponent(LinkCard, "LinkCard", fallbackValues, "default");

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

@@ -0,0 +1,26 @@
+import React from "react";
+import LinkCard from "./LinkCard";
+import page from "../../../../.storybook/page";
+import { text } from "@storybook/addon-knobs";
+
+const groupId = "props";
+
+export const linkCard = () => (
+  <LinkCard
+    workflowName={text("workflowName", "Workflow Name", "props")}
+    workflowDescription={text(
+      "workflowDescription",
+      "Workflow description",
+      groupId
+    )}
+    workflowActionName={text("workflowActionName", "Find", "props")}
+    slug={text("slug", "animal-care-and-control", "props")}
+  />
+);
+
+const story = page({
+  title: "Components|Molecules/LinkCard",
+  Component: LinkCard
+});
+
+export default story;

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

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

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

@@ -0,0 +1,14 @@
+import React, { HTMLAttributes } from "react";
+import Expand from "../../../util/expand";
+
+export interface LinkCardProps {
+  variant?: string; // "default" is only one
+  workflowName?: string; // title
+  workflowDescription?: string; // beneath title
+  workflowActionName: "Find" | "Pay";
+  slug: string; // path segment of button on click (/service/${slug})
+  themeValues?: any;
+}
+
+export const LinkCard: React.FC<Expand<LinkCardProps> &
+  HTMLAttributes<HTMLElement>>;

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

@@ -0,0 +1,3 @@
+import LinkCard from "./LinkCard";
+
+export default LinkCard;

package/src/constants/colors.js

@@ -40,7 +40,6 @@ const COOL_GREY_05 = "#fbfcfd"; // CBS-050
 const CLOUDBURST_BLUE = "#26395c";
 const ZODIAC_BLUE = "#14284b";
 const CONGRESS_BLUE = "#005095";
-const ROYAL_BLUE = "#3B5BDB";
 const SCIENCE_BLUE = "#0074D9";
 const MARINER_BLUE = "#2E75D2";
 const CURIOUS_BLUE = "#27A9E1";
@@ -55,7 +54,8 @@ const INFO_BLUE = "#E4F4FD";
 const CORNFLOWER_BLUE = "#EBEFFB";
 const HOVER_LIGHT_BLUE = "#EFFAFF";
 const MATISSE_BLUE = "#15749D";
-
+const ROYAL_BLUE = "#3181E3";
+const ROYAL_BLUE_VIVID = "#3B5BDB";
 const ASTRAL_BLUE = "#3176AA";
 const SAPPHIRE_BLUE = "#116285";
 const PEACOCK_BLUE = "#0E506D";
@@ -188,6 +188,7 @@ export {
   HOVER_LIGHT_BLUE,
   MATISSE_BLUE,
   ROYAL_BLUE,
+  ROYAL_BLUE_VIVID,
   ASTRAL_BLUE,
   SAPPHIRE_BLUE,
   PEACOCK_BLUE,

package/src/index.d.ts

@@ -1 +1,2 @@
 export * from "./components";
+export * from "./types/common";

package/src/types/common/ErrorMessageDictionary.ts

@@ -0,0 +1,3 @@
+export default interface ErrorMessageDictionary {
+  [fieldName: string]: string;
+}

package/src/types/common/FieldActions.ts

@@ -4,24 +4,24 @@ import ReduxAction from "./ReduxAction";
  * These types should be moved to and referenced from redux-freeform if it implements TypeScript
  */
 
-type ValidatorFn = (value: string) => boolean;
+export type ValidatorFn = (value: string) => boolean;
 
-interface FieldActionPayload {
+export interface FieldActionPayload {
   fieldName: string;
   value?: string;
   validator?: ValidatorFn;
 }
 
-type SetAction = ReduxAction<"field/SET", FieldActionPayload>;
-type AddValidatorAction = ReduxAction<
+export type SetAction = ReduxAction<"field/SET", FieldActionPayload>;
+export type AddValidatorAction = ReduxAction<
   "field/ADD_VALIDATOR",
   FieldActionPayload
 >;
-type RemoveValidatorAction = ReduxAction<
+export type RemoveValidatorAction = ReduxAction<
   "field/REMOVE_VALIDATOR",
   FieldActionPayload
 >;
-type ClearAction = ReduxAction<"field/CLEAR">;
+export type ClearAction = ReduxAction<"field/CLEAR">;
 
 export default interface FieldActions {
   set?: (fieldName: string) => (value: string) => SetAction;

package/src/types/common/FormSelectOption.ts

@@ -0,0 +1,4 @@
+export default interface FormSelectOption {
+  text?: string;
+  value?: string;
+}

package/src/types/common/index.ts

@@ -1,4 +1,6 @@
 export { default as Field } from "./Field";
 export { default as ReduxAction } from "./ReduxAction";
 export { default as FieldActions } from "./FieldActions";
-export { default as ErrorMessage } from "./ErrorMessage";
+export { default as FormSelectOption } from "./FormSelectOption";
+export { default as ErrorMessageDictionary } from "./ErrorMessageDictionary";
+export * from "./FieldActions";

package/src/types/common/ErrorMessage.ts

@@ -1,3 +0,0 @@
-export default interface ErrorMessage {
-  [fieldName: string]: string;
-}