Skip to content

Commit

Permalink
Add CTA To FragmentRender (#944)
Browse files Browse the repository at this point in the history
* create and add component for CTA in FragmentRender

* small component layout changes to support CTA

* change button class in globals.css to closer match ActionButton

* add alttext to image request in benefitsNavigatorArticlesQuery

* remove unused CTA on Benefits Navigator index page

* remove console.log

* replace inaccessible key prop from child Button in FragmentRender

* call isHTML to check CTA body content
  • Loading branch information
will0684 authored Dec 11, 2023
1 parent de4fc05 commit 3a1c9c6
Show file tree
Hide file tree
Showing 10 changed files with 86 additions and 66 deletions.
5 changes: 4 additions & 1 deletion components/design-system/CTA.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ export function CTA({
LinkProps,
containerClass = "",
}) {
// Check if body prop is HTML content
const isHTML = (str) => /<\/?[a-z][\s\S]*>/i.test(str);

return (
<div className="bg-multi-blue-blue2 p-3">
<div className={`flex flex-row ${containerClass}`}>
Expand All @@ -23,7 +26,7 @@ export function CTA({
<h3 className={`leading-[40px] text-multi-neutrals-grey100`}>
{heading}
</h3>
<p className="body">{body}</p>
{isHTML(body) ? body : <p className="body">{body}</p>}
<Button
styling="primary"
className="my-3"
Expand Down
2 changes: 2 additions & 0 deletions components/fragment_renderer/FragmentRender.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,13 @@ import { v4 as uuid } from "uuid";
import TextWithImage from "./fragment_components/TextWithImage";
import TextContent from "./fragment_components/TextContent";
import Button from "./fragment_components/Button";
import ArticleCTA from "./fragment_components/ArticleCTA";

const FRAGMENTS = {
"SCLabs-Comp-Content-Image-v1": TextWithImage,
"SCLabs-Content-v1": TextContent,
"SCLabs-Button-v1": Button,
"SCLabs-Feature-v1": ArticleCTA,
};

export default function FragmentRender(props) {
Expand Down
38 changes: 38 additions & 0 deletions components/fragment_renderer/fragment_components/ArticleCTA.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { CTA } from "../../design-system/CTA";
import TextRender from "../../text_node_renderer/TextRender";

export default function ArticleCTA(props) {
return (
<CTA
heading={
props.locale === "en"
? props.fragmentData.scTitleEn
: props.fragmentData.scTitleFr
}
body={
<TextRender
data={
props.locale === "en"
? props.fragmentData.scContentEn.json
: props.fragmentData.scContentFr.json
}
excludeH1={true}
/>
}
ButtonProps={{
id: props.fragmentData.scLabsButton[0].scId,
text:
props.locale === "en"
? props.fragmentData.scLabsButton[0].scTitleEn
: props.fragmentData.scLabsButton[0].scTitleFr,
href:
props.locale === "en"
? props.fragmentData.scLabsButton[0].scDestinationURLEn
: props.fragmentData.scLabsButton[0].scDestinationURLFr,
className:
"w-fit bg-[#26374A] mt-4 text-white visited:text-white hover:bg-[#1C578A] hover:no-underline hover:text-white active:bg-[#16446C]",
}}
containerClass="layout-container my-4"
/>
);
}
4 changes: 2 additions & 2 deletions components/fragment_renderer/fragment_components/Button.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ export default function Button(props) {
: "primary";

return (
<div className="grid grid-cols-12 gap-x-6 my-12">
<div className="layout-container grid grid-cols-12 gap-x-6 my-12">
<ActionButton
id={props.key}
id={props.fragmentData.scId}
style={style}
custom="col-span-12"
href={
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import TextRender from "../../text_node_renderer/TextRender";

export default function TextContent(props) {
return (
<div className="grid grid-cols-12 gap-x-6 my-12">
<div className="layout-container grid grid-cols-12 gap-x-6 my-12">
<div className="col-span-12 lg:col-span-7">
<TextRender
data={
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import TextRender from "../../text_node_renderer/TextRender";

export default function TextWithImage(props) {
return (
<div className="grid grid-cols-12 gap-x-6 my-12">
<div className="layout-container grid grid-cols-12 gap-x-6 my-12">
<div className="hidden lg:grid col-start-8 col-span-5 row-start-1 row-span-2">
<div className="flex justify-center">
<div className="h-auto">
Expand Down
2 changes: 2 additions & 0 deletions graphql/queries/benefitsNavigatorArticlesQuery.graphql
Original file line number Diff line number Diff line change
Expand Up @@ -249,6 +249,7 @@ query getBenefitsNavigatorArticles {
_publishUrl
}
}
scImageAltTextEn
scImageFr {
... on ImageRef {
_publishUrl
Expand All @@ -259,6 +260,7 @@ query getBenefitsNavigatorArticles {
_publishUrl
}
}
scImageAltTextFr
scFragments {
... on SclabsAlertV1Model {
_path
Expand Down
68 changes: 35 additions & 33 deletions pages/projects/benefits-navigator/[id].js
Original file line number Diff line number Diff line change
Expand Up @@ -37,39 +37,41 @@ export default function DynamicBenefitNavigatorPage(props) {
adobeAnalyticsUrl={props.adobeAnalyticsUrl}
locale={props.locale}
/>
<section className="layout-container mb-12">
<Heading
tabIndex="-1"
id="pageMainTitle"
title={
props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
}
/>
<div id="postedOnUpdatedOnSection" className="grid grid-cols-12">
<p
className={`col-span-6 sm:col-span-4 ${
props.locale === "en" ? "lg:col-span-2" : "lg:col-span-3"
} font-bold`}
>
{props.locale === "en"
? dictionary[9].scTermEn
: dictionary[9].scTermFr}
</p>
<p className="col-span-6 col-start-7 sm:col-start-5 lg:col-span-2 md:col-start-5 mt-0">
{pageData.scDateModifiedOverwrite}
</p>
<p
className={`row-start-2 col-span-6 sm:col-span-4 mt-0 ${
props.locale === "en" ? "lg:col-span-2" : "lg:col-span-3"
} font-bold`}
>
{props.locale === "en"
? dictionary[4].scTermEn
: dictionary[4].scTermFr}
</p>
<p className="row-start-2 col-span-6 col-start-7 sm:col-start-5 lg:col-span-2 md:col-start-5 mt-auto">
{pageData.scDateModifiedOverwrite}
</p>
<section className="mb-12">
<div className="layout-container">
<Heading
tabIndex="-1"
id="pageMainTitle"
title={
props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
}
/>
<div id="postedOnUpdatedOnSection" className="grid grid-cols-12">
<p
className={`col-span-6 sm:col-span-4 ${
props.locale === "en" ? "lg:col-span-2" : "lg:col-span-3"
} font-bold`}
>
{props.locale === "en"
? dictionary[9].scTermEn
: dictionary[9].scTermFr}
</p>
<p className="col-span-6 col-start-7 sm:col-start-5 lg:col-span-2 md:col-start-5 mt-0">
{pageData.scDateModifiedOverwrite}
</p>
<p
className={`row-start-2 col-span-6 sm:col-span-4 mt-0 ${
props.locale === "en" ? "lg:col-span-2" : "lg:col-span-3"
} font-bold`}
>
{props.locale === "en"
? dictionary[4].scTermEn
: dictionary[4].scTermFr}
</p>
<p className="row-start-2 col-span-6 col-start-7 sm:col-start-5 lg:col-span-2 md:col-start-5 mt-auto">
{pageData.scDateModifiedOverwrite}
</p>
</div>
</div>

{/* Main */}
Expand Down
27 changes: 0 additions & 27 deletions pages/projects/benefits-navigator/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -743,33 +743,6 @@ export default function BenefitsNavigatorOverview(props) {
{displayProjectUpdates}
</ul>
</div>

{/* <CTA
heading={
props.locale === "en"
? pageData.scFragments[6].scTitleEn
: pageData.scFragments[6].scTitleFr
}
body={
props.locale === "en"
? pageData.scFragments[6].scContentEn.json[0].content[0].value
: pageData.scFragments[6].scContentFr.json[0].content[0].value
}
ButtonProps={{
id: "cta-btn",
text:
props.locale === "en"
? pageData.scFragments[6].scLabsButton[0].scTitleEn
: pageData.scFragments[6].scLabsButton[0].scTitleFr,
href:
props.locale === "en"
? pageData.scFragments[6].scLabsButton[0].scDestinationURLEn
: pageData.scFragments[6].scLabsButton[0].scDestinationURLFr,
className:
"w-fit bg-[#26374A] mt-4 text-white visited:text-white hover:bg-[#1C578A] hover:no-underline hover:text-white active:bg-[#16446C]",
}}
containerClass="layout-container my-4"
/> */}
</Layout>
{props.adobeAnalyticsUrl ? (
<script type="text/javascript">_satellite.pageBottom()</script>
Expand Down
2 changes: 1 addition & 1 deletion styles/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -570,7 +570,7 @@ html {
}

.btn-primary {
@apply font-header font-normal text-multi-neutrals-white bg-multi-blue-blue70 rounded-[4px] px-[14px] py-[6px] text-btnother
@apply font-header font-normal text-multi-neutrals-white bg-multi-blue-blue70 px-[16px] py-[8px] text-btnother
}

.btn-link {
Expand Down

0 comments on commit 3a1c9c6

Please sign in to comment.