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
DTS-STN · Dec 20, 2023 · ed20e93 · ed20e93
1 parent cbdfd25
commit ed20e93
Show file tree

Hide file tree

Showing 6 changed files with 130 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;