qpp-style 9.45.3 → 9.45.5

package/components/Footer/FooterTooltip.jsx

@@ -0,0 +1,61 @@
+/* eslint-disable react/prop-types */
+import React, { useState } from "react";
+
+export default function FooterTooltip({ triggerContent, tooltipContent }) {
+  const [isHidden, setIsHidden] = useState(true);
+  const ariaHidden = isHidden ? "true" : "false";
+  const tooltipButtonStyles = {
+    position: "relative",
+    background: "transparent",
+    border: "none",
+    display: "inline-block",
+  };
+  const triangleStyles = {
+    position: "absolute",
+    top: "100%",
+    left: "50%",
+    translate: "-50% 0",
+    border: "6px solid transparent",
+    borderTop: "6px solid rgb(51,51,51)",
+    width: "6px",
+    height: "6px",
+  };
+  const tooltipStyles = isHidden
+    ? {
+        display: "none",
+      }
+    : {
+        position: "absolute",
+        bottom: "calc(100% + 6px)",
+        left: "50%",
+        width: "300px",
+        padding: "8px",
+        borderRadius: "4px",
+        fontSize: "0.9rem",
+        backgroundColor: "rgb(51,51,51)",
+        color: "rgb(255,255,255)",
+        maxWidth: "max-content",
+        translate: "-50% 0",
+      };
+  console.log(ariaHidden);
+  return (
+    <span className="qpp-tooltip-wrapper" style={{ position: "relative" }}>
+      <button
+        role="tooltip"
+        className="qpp-tooltip"
+        type="button"
+        style={tooltipButtonStyles}
+        onMouseEnter={() => setIsHidden(false)}
+        onMouseLeave={() => setIsHidden(true)}
+        onFocus={() => setIsHidden(false)}
+        onBlur={() => setIsHidden(true)}
+      >
+        {triggerContent}
+        <span style={tooltipStyles}>
+          {tooltipContent}
+          <div style={triangleStyles} />
+        </span>
+      </button>
+    </span>
+  );
+}

package/components/Footer/FooterUI.jsx

@@ -1,12 +1,10 @@
 import React from "react";
-import InfoTip from "../Infotip/Infotip";
 import Subscribe from "./Subscribe";
 import SocialLinks from "./SocialLinks";
 import pjson from "../../package.json";
 import { OpenInNewIcon } from "../../lib/SvgComponents";
+import FooterTooltip from "./FooterTooltip";
 
-const infoTipLabel =
-  "When dialing 711, you will automatically be connected to a TRS Communications Assistant who will relay your conversation to the help desk agent with strict confidentiality.";
 const { version: buildVersion } = pjson;
 const FooterUI = () => (
   <>
@@ -94,20 +92,21 @@ const FooterUI = () => (
               <p className="contact-title">Phone:</p>
               <p>Monday - Friday 8 a.m - 8 p.m ET</p>
               <p>
-                1-866-288-8292 (TRS: 711)
-                <span id="info-tip" className="footer-trs-infotip">
-                  <InfoTip
-                    aria-labelledby="footer-trs-infotip"
-                    ariaLabel="TRS Communications Assistant Information"
-                    label={infoTipLabel}
-                  />
-                </span>
+                <a href="tel:+18662888292">
+                  <b className="sr-only">Contact CMS Phone</b>
+                  <b className="sr-only">Monday - Friday 8 a.m - 8 p.m ET</b>
+                  1-866-288-8292
+                </a>{" "}
+                <FooterTooltip
+                  triggerContent="(TRS: 711)"
+                  tooltipContent="TRS Communications Assistant Information When dialing 711, you will automatically be connected to a TRS Communications Assistant who will relay your conversation to the help desk agent with strict confidentiality."
+                />
               </p>
 
               <p className="contact-title">Email:</p>
               <p>
                 <a
-                  aria-label="QPP@cms.hhs.gov"
+                  aria-label="Contact CMS Email: QPP@cms.hhs.gov"
                   href="mailto:QPP@cms.hhs.gov"
                   className="email-link"
                 >