From ed20e9364657b6346ac12356ebd5221765532d38 Mon Sep 17 00:00:00 2001
From: Jordan Willis <31868510+will0684@users.noreply.github.com>
Date: Wed, 20 Dec 2023 14:52:38 -0500
Subject: [PATCH] Quote component accessibility (#952)

* on project pages, add separate query for articles

* create new ImageVerticalLineContent component for new oas article page

* create function to support multiple layouts for a single AEM fragment

* change new component name

* add support for spans in text-node-renderer

* modify article queries to support new composite text content fragment

* create new QuoteVerticalLineContent component and modify BasicTextWithImage to support field changes to model

* add new comopnent to FragmentRender

* add styles for new component

* increase border-radius
---
 .../fragment_renderer/FragmentRender.js       |  2 +
 .../fragment_components/BasicTextWithImage.js |  4 +-
 .../QuoteVerticalLineContent.js               | 32 +++++++++++
 .../benefitsNavigatorArticlesQuery.graphql    | 19 +++++++
 .../oasBenefitsEstimatorArticlesQuery.graphql | 19 +++++++
 styles/globals.css                            | 56 +++++++++++++++++++
 6 files changed, 130 insertions(+), 2 deletions(-)
 create mode 100644 components/fragment_renderer/fragment_components/QuoteVerticalLineContent.js

diff --git a/components/fragment_renderer/FragmentRender.js b/components/fragment_renderer/FragmentRender.js
index 24d0eb0707..bde9c01ac6 100644
--- a/components/fragment_renderer/FragmentRender.js
+++ b/components/fragment_renderer/FragmentRender.js
@@ -3,9 +3,11 @@ import TextWithImage from "./fragment_components/TextWithImage";
 import TextContent from "./fragment_components/TextContent";
 import Button from "./fragment_components/Button";
 import ArticleCTA from "./fragment_components/ArticleCTA";
+import QuoteVerticalLineContent from "./fragment_components/QuoteVerticalLineContent";
 
 const FRAGMENTS = {
   "SCLabs-Comp-Content-Image-v1": TextWithImage,
+  "SCLabs-Comp-Content-v1": QuoteVerticalLineContent,
   "SCLabs-Content-v1": TextContent,
   "SCLabs-Button-v1": Button,
   "SCLabs-Feature-v1": ArticleCTA,
diff --git a/components/fragment_renderer/fragment_components/BasicTextWithImage.js b/components/fragment_renderer/fragment_components/BasicTextWithImage.js
index 8c8ad2b5c6..ba164dbf7d 100644
--- a/components/fragment_renderer/fragment_components/BasicTextWithImage.js
+++ b/components/fragment_renderer/fragment_components/BasicTextWithImage.js
@@ -25,8 +25,8 @@ export default function BasicTextWithImage(props) {
         <TextRender
           data={
             props.locale === "en"
-              ? props.fragmentData.scLabContent.scContentEn.json
-              : props.fragmentData.scLabContent.scContentFr.json
+              ? props.fragmentData.scLabContent[0].scContentEn.json
+              : props.fragmentData.scLabContent[0].scContentFr.json
           }
           excludeH1={true}
         />
diff --git a/components/fragment_renderer/fragment_components/QuoteVerticalLineContent.js b/components/fragment_renderer/fragment_components/QuoteVerticalLineContent.js
new file mode 100644
index 0000000000..9aa5b36e76
--- /dev/null
+++ b/components/fragment_renderer/fragment_components/QuoteVerticalLineContent.js
@@ -0,0 +1,32 @@
+import TextRender from "../../text_node_renderer/TextRender";
+
+export default function QuoteVerticalLineContent(props) {
+  return (
+    <div className="layout-container grid grid-cols-12 gap-x-4 my-12">
+      <div className="col-span-12 xl:col-span-3">
+        <div className="speech-bubble">
+          <div className="speech-bubble-top">
+            <blockquote className="speech-bubble-quote">
+              <TextRender
+                data={
+                  props.locale === "en"
+                    ? props.fragmentData.scLabContent[0].scContentEn.json
+                    : props.fragmentData.scLabContent[0].scContentFr.json
+                }
+              />
+            </blockquote>
+          </div>
+        </div>
+      </div>
+      <div className="col-span-12 lg:col-span-7 xl:col-span-4 xxl:-ml-14 h-fit p-5 border-l-4 border-multi-blue-blue60f">
+        <TextRender
+          data={
+            props.locale === "en"
+              ? props.fragmentData.scLabContent[1].scContentEn.json
+              : props.fragmentData.scLabContent[1].scContentFr.json
+          }
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/graphql/queries/benefitsNavigatorArticlesQuery.graphql b/graphql/queries/benefitsNavigatorArticlesQuery.graphql
index 79222b3560..37a5f53987 100644
--- a/graphql/queries/benefitsNavigatorArticlesQuery.graphql
+++ b/graphql/queries/benefitsNavigatorArticlesQuery.graphql
@@ -69,6 +69,25 @@ query getBenefitsNavigatorArticles {
       scNoIndex
       scNoFollow
       scFragments {
+        ... on SclabsCompContentV1Model {
+            _model {
+                ... on ModelInfo {
+                    title
+                }
+            }
+            scId
+            scLabContent {
+                ... on SclabsContentV1Model {
+                    scContentEn {
+                        json
+                    }
+                    scContentFr {
+                        json
+                    }
+                }
+            }
+            scLabLayout
+        }
         ... on SclabsCompContentImageV1Model {
           _model {
             ... on ModelInfo {
diff --git a/graphql/queries/oasBenefitsEstimatorArticlesQuery.graphql b/graphql/queries/oasBenefitsEstimatorArticlesQuery.graphql
index 28c710cc18..0907bd4405 100644
--- a/graphql/queries/oasBenefitsEstimatorArticlesQuery.graphql
+++ b/graphql/queries/oasBenefitsEstimatorArticlesQuery.graphql
@@ -69,6 +69,25 @@ query getOASBenefitsEstimatorArticles {
       scNoIndex
       scNoFollow
       scFragments {
+        ... on SclabsCompContentV1Model {
+            _model {
+                ... on ModelInfo {
+                    title
+                }
+            }
+            scId
+            scLabContent {
+                ... on SclabsContentV1Model {
+                    scContentEn {
+                        json
+                    }
+                    scContentFr {
+                        json
+                    }
+                }
+            }
+            scLabLayout
+        }
         ... on SclabsCompContentImageV1Model {
           _model {
             ... on ModelInfo {
diff --git a/styles/globals.css b/styles/globals.css
index 78688ac48e..f8f3d57001 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -546,6 +546,62 @@ html {
   margin-top: 4rem;
 }
 
+/* Styles for QuoteVerticalLineContent */
+
+blockquote.speech-bubble-quote > p {
+  @apply text-white;
+  @apply font-display;
+  @apply text-p;
+  @apply leading-6;
+  @apply font-semibold;
+}
+
+.speech-bubble {
+  position: relative;
+  background: rgb(119, 136, 164);
+  border-radius: 0.6em;
+  padding: 4px;
+  max-width: 190px;
+  margin-bottom: 20px;
+  margin-top: 10px;
+  margin-left: 10px;
+}
+
+.speech-bubble-top {
+  background: rgb(78, 92, 125);
+  border-radius: 0.6em;
+  padding: 15px;
+  margin: auto;
+}
+
+.speech-bubble:after {
+  content: "";
+  position: absolute;
+  bottom: 5%;
+  left: 20%;
+  width: 0;
+  height: 0;
+  border: 20px solid transparent;
+  border-top-color: rgb(78, 92, 125);
+  border-bottom: 0;
+  margin-left: -20px;
+  margin-bottom: -20px;
+}
+
+.speech-bubble-top:after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 20%;
+  width: 0;
+  height: 0;
+  border: 20px solid transparent;
+  border-top-color: rgb(119, 136, 164);
+  border-bottom: 0;
+  margin-left: -20px;
+  margin-bottom: -20px;
+}
+
 @media (max-width: 850px) {
   .modal {
     padding: 20px;