From 535ee2b2a706ac282d8f9ff069b8b1c92cc63ca4 Mon Sep 17 00:00:00 2001
From: Brian Fenton <brian@brianfenton.us>
Date: Thu, 12 Jul 2018 15:07:49 -0500
Subject: [PATCH] Adding hand cursor to FAQ headings, and ability to address
 answers via URL hash (#10260)

* Turning H2s into anchors to add hand cursor and to create addressable page fragments
adding ref to target individual entries
adding scroll handler to make sure expanded result is in view.

* combining click handler directives as per CR

* changing question display to always render, then hide via CSS, vs only render when state changes.

* updating pug template to include heading in each URL fragment

* simplifying logic & moving to vue-bootstrap accordion since multiple open panels is not required

* adding pointer cursor to FAQ headings

* moving initial hash checking to data prop instead of mounted so it does not trigger oddities on on hash change (re-mount)

* using new pug HTML for bootstrap collapse

* removing extraneous markup

* updating styling to match existing page

* removing fancier than necessary markup, and attendant styles

* using more standard event property
---
 website/client/components/static/faq.vue | 50 +++++++++++++++++-------
 1 file changed, 35 insertions(+), 15 deletions(-)

diff --git a/website/client/components/static/faq.vue b/website/client/components/static/faq.vue
index a26e1260cd..e2ce08aa0c 100644
--- a/website/client/components/static/faq.vue
+++ b/website/client/components/static/faq.vue
@@ -1,18 +1,36 @@
 <template lang="pug">
-  .container-fluid
+  .container-fluid(role="tablist")
     .row
       .col-12.col-md-6.offset-md-3
-        h1 {{ $t('frequentlyAskedQuestions') }}
-        .faq-question(v-for='(heading, index) in headings')
-          h2.accordion(@click='setActivePage(heading)') {{ $t(`faqQuestion${index}`) }}
-          div(v-if='pageState[heading]', v-markdown="$t('webFaqAnswer' + index, replacements)")
+        h1#faq-heading {{ $t('frequentlyAskedQuestions') }}
+        .faq-question(v-for='(heading, index) in headings', :key="index")
+          h2(role="tab", v-b-toggle="heading", @click="handleClick($event)", variant="info") {{ $t(`faqQuestion${index}`) }}
+          b-collapse(:id="heading", :visible="isVisible(heading)", accordion="faq", role="tabpanel")
+            div.card-body(v-markdown="$t('webFaqAnswer' + index, replacements)")
         hr
         p(v-markdown="$t('webFaqStillNeedHelp')")
 </template>
 
 <style lang='scss' scoped>
-  .faq-question {
-    margin-bottom: 1em;
+  .card-body {
+      margin-bottom: 1em;
+  }
+
+  .faq-question h2 {
+    cursor: pointer;
+  }
+
+  .faq-question .card-body {
+    padding: 0;
+  }
+
+  .static-wrapper .faq-question h2 {
+    margin: 0 0 16px 0;
+  }
+
+  .faq-question a {
+    text-decoration: none;
+    color: #4F2A93;
   }
 
   @media only screen and (max-width: 768px) {
@@ -25,6 +43,7 @@
 <script>
   // @TODO:  env.EMAILS.TECH_ASSISTANCE_EMAIL
   const TECH_ASSISTANCE_EMAIL = 'admin@habitica.com';
+
   import markdownDirective from 'client/directives/markdown';
 
   export default {
@@ -48,19 +67,15 @@
         'world-boss',
       ];
 
-      let pageState = {};
-      for (let index in headings) {
-        let heading = headings[index];
-        pageState[heading] = false;
-      }
+      const hash = window.location.hash.replace('#', '');
 
       return  {
-        pageState,
         headings,
         replacements: {
           techAssistanceEmail: TECH_ASSISTANCE_EMAIL,
           wikiTechAssistanceEmail: `mailto:${TECH_ASSISTANCE_EMAIL}`,
         },
+        visible: hash && headings.includes(hash) ? hash : null,
         // @TODO webFaqStillNeedHelp: {
         // linkStart: '[',
         // linkEnd: '](/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a)',
@@ -69,8 +84,13 @@
       };
     },
     methods: {
-      setActivePage (page) {
-        this.pageState[page] = !this.pageState[page];
+      isVisible (heading) {
+        return this.visible && this.visible === heading;
+      },
+      handleClick (e) {
+        if (!e) return;
+        const heading = e.target.nextElementSibling.id;
+        history.pushState({}, heading, `#${heading}`);
       },
     },
   };