Benefits Finder project page (#1067)

* create Benefits Finder page, article page, rewrites

* create BF project page and articles queries

* create simple unit and integration test and mockdata

* add default top margin to h3 in FragmentRender

* add ContextualAlert to BF page

* change homepage card order

* update BN mock data

* place ContextualAlert beneath heading

* update h3 to h2 to fix a11y heading order

__tests__/pages/benefits-finder.test.js

@@ -0,0 +1,21 @@
+import { render } from "@testing-library/react";
+import BenefitsFinderOverview from "../../pages/projects/benefits-finder/index";
+import {
+  dictionaryData,
+  experimentsData,
+  benefitsNavigatorUpdatesData,
+} from "../../__mocks__/mockStore";
+import { benefitsFinderMock } from "../../__mocks__/benefits-finder.mockdata.js";
+
+describe("Benefits Finder", () => {
+  it("renders without crashing", () => {
+    render(
+      <BenefitsFinderOverview
+        pageData={benefitsFinderMock.data.sclabsPageV1ByPath}
+        updatesData={benefitsNavigatorUpdatesData}
+        dictionary={dictionaryData.data.dictionaryV1List}
+        allProjects={experimentsData.data.scLabsPagev1List.items}
+      />
+    );
+  });
+});

components/molecules/ContextualAlert.js

@@ -50,12 +50,14 @@ export function ContextualAlert(props) {
         className={`overflow-auto border-l-6 ${alert_color} pl-[24px] py-[17px] leading-8`}
       >
         {asHtml ? (
-          <h3
-            className="leading-heading3 ml-1"
+          <h2
+            className="mt-0 text-h3 leading-heading3 ml-1"
             dangerouslySetInnerHTML={{ __html: message_heading }}
           />
         ) : (
-          <h3 className="leading-heading3 ml-1">{message_heading}</h3>
+          <h2 className="mt-0 text-h3 leading-heading3 ml-1">
+            {message_heading}
+          </h2>
         )}
         {asHtml ? (
           <div

components/text_node_renderer/nodes/Header.jsx

@@ -9,7 +9,7 @@ export default function Header(props) {
         <h2 className={props.index === 0 ? "mt-0" : ""}>{props.children}</h2>
       );
     case "h3":
-      return <h3>{props.children}</h3>;
+      return <h3 className="mt-12">{props.children}</h3>;
     case "h4":
       return <h4>{props.children}</h4>;
     case "h5":

cypress/e2e/benefits-finder.cy.js

@@ -0,0 +1,16 @@
+describe("Home Page", () => {
+  beforeEach(() => {
+    cy.visit("/en/projects/benefits-finder");
+    cy.injectAxe();
+  });
+
+  it("has no a11y violations", () => {
+    cy.checkA11y();
+  });
+
+  it("loads page",()=>{
+      cy.url().should('equal',Cypress.config().baseUrl+'/en/projects/benefits-finder')
+      cy.get('button.info').click()
+      cy.get('h2.modal-title').should('have.text','Beta')
+  })
+});

cypress/e2e/benefits-navigator.cy.js

@@ -14,7 +14,7 @@ describe("Home Page", () => {
         cy.get('h2.modal-title').should('have.text','Alpha')
     })
 
-    it("navigates to a project page", () => {
+    it("navigates to an article page", () => {
       cy.get("a[href*=difficulties-community]").click();
       cy.url().should(
         "equal",