@thecb/components 8.3.0 → 8.4.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "8.3.0",
+  "version": "8.4.0-beta.1",
   "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/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,140 @@
+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 = "Link an account",
+  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}
+            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 0"} 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="0 1rem 1rem 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">
+              {workflowActionName === "Link an account" && (
+                <>
+                  <Text
+                    variant="pS"
+                    color={themeValues.color}
+                    extraStyles="text-align: right; color: transparent;"
+                    className="show-on-hover"
+                  >
+                    Find
+                  </Text>
+                  <PlusCircleIcon color={themeValues.color} />
+                </>
+              )}
+              {workflowActionName === "Pay now" && (
+                <>
+                  <Text
+                    variant="pS"
+                    color={themeValues.color}
+                    extraStyles="text-align: right; color: transparent;"
+                    className="show-on-hover"
+                  >
+                    Pay
+                  </Text>
+                  <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", "Link an account", "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;