@thecb/components 7.10.0-beta.0 → 7.10.0

package/src/components/molecules/payment-form-card/PaymentFormCard.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useContext } from "react";
+import React, { useEffect, useContext, useState } from "react";
 import { ThemeContext } from "styled-components";
 import {
   required,
@@ -26,8 +26,10 @@ import {
   FormContainer,
   FormInputRow
 } from "../../atoms/form-layouts";
-import { Box } from "../../atoms/layouts";
+import { Box, Cluster, Cover } from "../../atoms/layouts";
 import withWindowSize from "../../withWindowSize";
+import TermsAndConditionsModal from "../terms-and-conditions-modal/TermsAndConditionsModal";
+import Text from "../../atoms/text";
 
 const PaymentFormCard = ({
   variant = "default",
@@ -40,9 +42,15 @@ const PaymentFormCard = ({
   showWalletCheckbox,
   saveToWallet,
   walletCheckboxMarked,
-  deniedCards
+  deniedCards,
+  termsContent,
+  termsTitle = "Terms & Conditions"
 }) => {
   const { isMobile } = useContext(ThemeContext);
+  const [termsModalOpen, setTermsModalOpen] = useState(false);
+  const showTerms = !!termsContent;
+  const showTermsLinkVariant = showWalletCheckbox ? "p" : "pS";
+
   useEffect(() => {
     if (deniedCards) {
       deniedCards.map(card =>
@@ -177,13 +185,32 @@ const PaymentFormCard = ({
             />
           </Box>
         )}
-        {showWalletCheckbox && (
-          <Checkbox
-            name="credit card checkbox"
-            title="Save credit card to wallet"
-            checked={walletCheckboxMarked}
-            onChange={saveToWallet}
-          />
+        {(showWalletCheckbox || showTerms) && (
+          <Cluster childGap={"4px"}>
+            {showWalletCheckbox && (
+              <Checkbox
+                name="credit card checkbox"
+                title="Save credit card to wallet."
+                checked={walletCheckboxMarked}
+                onChange={saveToWallet}
+              />
+            )}
+            {showTerms && (
+              <Cover singleChild>
+                <Cluster childGap={0}>
+                  <Text variant={showTermsLinkVariant}>View&nbsp;</Text>
+                  <TermsAndConditionsModal
+                    link={termsTitle}
+                    linkVariant={showTermsLinkVariant}
+                    terms={termsContent}
+                    title={termsTitle}
+                    isOpen={termsModalOpen}
+                    toggleOpen={setTermsModalOpen}
+                  />
+                </Cluster>
+              </Cover>
+            )}
+          </Cluster>
         )}
       </FormInputColumn>
     </FormContainer>

package/src/components/molecules/terms-and-conditions/TermsAndConditions.js

@@ -9,7 +9,8 @@ const TermsAndConditions = ({
   isChecked,
   html,
   terms,
-  error = false
+  error = false,
+  linkVariant
 }) => {
   const [showTerms, toggleShowTerms] = useState(false);
   return (
@@ -31,6 +32,7 @@ const TermsAndConditions = ({
                 terms={terms}
                 isOpen={showTerms}
                 toggleOpen={toggleShowTerms}
+                linkVariant={linkVariant}
               />
             )}
           </Stack>

package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.js

@@ -14,6 +14,7 @@ const TermsAndConditionsModal = ({
   acceptText,
   terms,
   variant,
+  linkVariant = "p",
   themeValues
 }) => (
   <Modal
@@ -42,14 +43,14 @@ const TermsAndConditionsModal = ({
     }}
   >
     <Text
-      variant={variant === "default" ? "pS" : "pXS"}
+      variant={linkVariant}
       onClick={() => toggleOpen(true)}
       onKeyPress={e => e.key === "Enter" && toggleOpen(true)}
       tabIndex="0"
       color={themeValues.linkColor}
       weight={themeValues.fontWeight}
       hoverStyles={themeValues.modalLinkHoverFocus}
-      extraStyles={`display: inline-block; width: fit-content;`}
+      extraStyles={`display: inline-block; width: fit-content; cursor: pointer`}
     >
       {link}
     </Text>

package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.stories.js

@@ -11,6 +11,15 @@ const variants = {
 };
 const groupId = "props";
 
+const linkVariants = {
+  p: "p",
+  pL: "pL",
+  pS: "pS",
+  pXS: "pXS",
+  pXXS: "pXXS",
+  pXL: "PXL"
+};
+
 export const termsAndConditionsModal = () => (
   <TermsAndConditionsModal
     link={text("text", "Show modal", groupId)}
@@ -21,6 +30,7 @@ export const termsAndConditionsModal = () => (
     acceptText={text("acceptText", "Accept", groupId)}
     terms={text("terms", "terms and conditions", groupId)}
     variant={select("variants", variants, "default", groupId)}
+    linkVariant={select("linkVariants", linkVariants, groupId)}
   />
 );
 

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

@@ -12,16 +12,13 @@ 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",
-  selectWorkflowAction,
-  navigate
+  buttonVariant = "primary"
 }) => (
   <Box
     background={WHITE}
@@ -51,37 +48,19 @@ const WorkflowTile = ({
         borderColor={GRECIAN_GREY}
         borderWidthOverride="2px 0 0 0"
       >
-        {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}
-          />
-        )}
+        <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,6 +54,8 @@ 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";
@@ -76,6 +78,7 @@ 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";
@@ -161,6 +164,8 @@ export {
   MATISSE_BLUE,
   ROYAL_BLUE,
   ASTRAL_BLUE,
+  SAPPHIRE_BLUE,
+  PEACOCK_BLUE,
   FOREST_GREEN,
   MEADOW_GREEN,
   POLAR_GREEN,
@@ -182,6 +187,7 @@ export {
   FANTASY_RED,
   COSMOS_RED,
   BLUSH_RED,
+  RASPBERRY,
   ALERT_COLORS,
   ERROR_COLOR
 };