feat(faq page formatting): made changes to the faq page adding tables…

… to applicable sections. rewrote e2e test that was failing (#151) * feat(faq page formatting): made changes to the items on the page adding tables to applicable sections * feat(faq page formatting): made changes to the items on the page adding tables to applicable sections * Empty-Commit * feat(faq page formatting): made changes to the items on the page adding tables to applicable sections * feat(faq page formatting): made changes to the items on the page adding tables to applicable sections * feat(faq page formatting): made changes to the items on the page adding tables to applicable sections * feat(faq page formatting): made changes to the items on the page adding tables to applicable sections * feat(faq page formatting): made changes to the items on the page adding tables to applicable sections * feat(faq page formatting): made changes to the items on the page adding tables to applicable sections --------- Co-authored-by: Adewale Sangobiyi <[email protected]> Co-authored-by: Adewale Sangobiyi <[email protected]> Co-authored-by: Adewale Sangobiyi <[email protected]> Co-authored-by: Adewale Sangobiyi <[email protected]> Co-authored-by: Adewale Sangobiyi <[email protected]>
Enterprise-CMCS · Oct 12, 2023 · b95e3e2 · b95e3e2
1 parent b70b584
commit b95e3e2
Show file tree

Hide file tree

Showing 6 changed files with 252 additions and 138 deletions.
diff --git a/src/services/ui/e2e/tests/home/index.spec.ts b/src/services/ui/e2e/tests/home/index.spec.ts
@@ -17,14 +17,12 @@ test("has title", async ({ page }) => {
   await expect(page).toHaveTitle(/CMS MAKO/);
 });
 
-test("see frequently asked questions header when in faq page", async ({
-  page,
-}) => {
+test("see frequently asked questions header when in faq page", async ({ page }) => {
   await page.goto("/");
-  await page.getByRole("link", { name: "FAQ" }).first().click();
-
-  const foundFaqHeading = await page
-    .getByRole("heading", { name: "Frequently Asked Questions" })
+  const popup = page.waitForEvent("popup");
+  await page.getByRole("link", { name: "FAQ", exact: true }).click();
+  const foundFaqHeading = await popup;
+  await foundFaqHeading.getByRole("heading", { name: "Frequently Asked Questions" })
     .isVisible();
   expect(foundFaqHeading).toBeTruthy();
 });

diff --git a/src/services/ui/src/components/Cards/CardWithTopBorder.tsx b/src/services/ui/src/components/Cards/CardWithTopBorder.tsx
@@ -1,4 +1,4 @@
-import {FC, ReactNode} from "react";
+import { FC, ReactNode } from "react";
 
 interface CardWithTopBorderProps {
   children: ReactNode;
@@ -7,16 +7,18 @@ export const CardWithTopBorder: FC<CardWithTopBorderProps> = ({
   children,
 }: CardWithTopBorderProps) => {
   return (
-    <div className="mb-4">
+    <div className="mb-4 sticky top-12">
       <div
-          style={{
-              background: "linear-gradient(90.11deg,#0071bc 49.91%,#02bfe7 66.06%)",
-              borderRadius: "3px 3px 0px 0px",
-              height: "8px",
-          }}
+        style={{
+          background: "linear-gradient(90.11deg,#0071bc 49.91%,#02bfe7 66.06%)",
+          borderRadius: "3px 3px 0px 0px",
+          height: "8px",
+        }}
         className="h-2 shadow-lg"
       />
-      <div className="border border-t-0 rounded-b-sm border-slate-300">{children}</div>
+      <div className="border border-t-0 rounded-b-sm border-slate-300">
+        {children}
+      </div>
     </div>
   );
 };
diff --git a/src/services/ui/src/components/Layout/index.tsx b/src/services/ui/src/components/Layout/index.tsx
@@ -8,6 +8,7 @@ import { Auth } from "aws-amplify";
 import { AwsCognitoOAuthOpts } from "@aws-amplify/auth/lib-esm/types";
 import { Footer } from "../Footer";
 import { UsaBanner } from "../UsaBanner";
+import { FAQ_TARGET } from "@/routes";
 
 const getLinks = (isAuthenticated: boolean) => {
   if (isAuthenticated) {
@@ -103,18 +104,17 @@ const ResponsiveNav = ({ isDesktop }: ResponsiveNavProps) => {
     isActive
       ? "underline underline-offset-4 decoration-4 hover:text-white/70"
       : "hover:text-white/70";
-
   if (prevMediaQuery !== isDesktop) {
     setPrevMediaQuery(isDesktop);
     setIsOpen(false);
   }
-
   if (isDesktop) {
     return (
       <>
         {getLinks(!!data.user).map((link) => (
           <NavLink
             to={link.link}
+            target={link.link === "/faq" ? FAQ_TARGET : undefined}
             key={link.name}
             className={setClassBasedOnNav}
           >
@@ -152,9 +152,9 @@ const ResponsiveNav = ({ isDesktop }: ResponsiveNavProps) => {
             {getLinks(!!data.user).map((link) => (
               <li key={link.link}>
                 <Link
-                  onClick={() => setIsOpen(false)}
                   className="block py-2 pl-3 pr-4 text-white rounded"
                   to={link.link}
+                  target={link.link === "/faq" ? FAQ_TARGET : undefined}
                 >
                   {link.name}
                 </Link>