Merge branch 'main' into simplify-call-to-actions

src/qiskit_sphinx_theme/assets/styles/_footer.scss

@@ -1,28 +1,29 @@
-footer .helpful-container {
+.qiskit-analytics-container {
   display: inline-flex;
   border-top: 1px solid var(--color-background-border);
   border-bottom: 1px solid var(--color-background-border);
   color: var(--color-foreground-secondary);
-}
 
-footer .helpful-container .helpful-question,
-footer .helpful-container .was-helpful-thank-you {
-  padding: 0.625rem 1.25rem 0.625rem 1.25rem;
-}
+  margin-bottom: 1rem;
 
-#was-helpful-thank-you {
-  visibility: hidden;
-}
+  div,
+  a {
+    padding: 0.625rem 1.25rem 0.625rem 1.25rem;
+  }
+
+  a {
+    color: var(--qiskit-color-purple);
+    cursor: pointer;
+    text-decoration: none;
+
+    &:hover {
+      background-color: var(--qiskit-color-purple);
+      color: #ffffff;
+    }
+  }
 
-.helpful-container .helpful-question.yes-link,
-.helpful-container .helpful-question.no-link {
-  color: var(--qiskit-color-purple);
-  cursor: pointer;
-  text-decoration: none;
 }
 
-.helpful-container .helpful-question.yes-link:hover,
-.helpful-container .helpful-question.no-link:hover {
-  background-color: var(--qiskit-color-purple);
-  color: #ffffff;
+#qiskit-analytics-thank-you {
+  visibility: hidden;
 }

src/qiskit_sphinx_theme/theme/qiskit-sphinx-theme/custom_templates/footer_analytics.html

@@ -1,16 +1,14 @@
 {% if analytics_enabled %}
   <script>
     function userFeedbackClicked(ctaType) {
-      document.getElementById('was-helpful-thank-you').style.visibility = 'visible';
+      document.getElementById('qiskit-analytics-thank-you').style.visibility = 'visible';
       window.trackCta(`Helpful - ${ctaType}`);
     }
   </script>
-    <hr class="helpful-hr hr-top" />
-    <div class="helpful-container">
-      <div class="helpful-question">Was this page helpful?</div>
-      <a class="helpful-question yes-link" onclick="userFeedbackClicked('yes')">Yes</a>
-      <a class="helpful-question no-link" onclick="userFeedbackClicked('no')">No</a>
-      <div class="was-helpful-thank-you" id="was-helpful-thank-you">Thank you!</div>
+    <div class="qiskit-analytics-container">
+      <div>Was this page helpful?</div>
+      <a onclick="userFeedbackClicked('yes')">Yes</a>
+      <a onclick="userFeedbackClicked('no')">No</a>
+      <div id="qiskit-analytics-thank-you">Thank you!</div>
     </div>
-    <hr class="helpful-hr hr-bottom"/>
 {% endif %}

tests/js/snapshots.test.js

@@ -236,7 +236,7 @@ test.describe("footer", () => {
 
   test("says 'thank you' when analytics clicked", async ({ page }) => {
     await page.goto("");
-    const yesOption = page.locator("a.helpful-question.yes-link");
+    const yesOption = page.locator("div.qiskit-analytics-container a").first();
 
     // First, check that we change the color of the buttons when hovering.
     await yesOption.hover();
@@ -247,7 +247,7 @@ test.describe("footer", () => {
 
     // Then, check the screenshot when clicking.
     await yesOption.click();
-    const analytics = page.locator("div.helpful-container");
+    const analytics = page.locator("div.qiskit-analytics-container");
     await expect(analytics).toHaveScreenshot();
   });
 });