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

@@ -1,20 +1,38 @@
 <template lang="pug">
-  .container-fluid
+  .container-fluid(role="tablist")
     .row
       .col-12.col-md-6.offset-md-3
-        h1 {{ $t('frequentlyAskedQuestions') }}
+        h1#faq-heading {{ $t('frequentlyAskedQuestions') }}
-        .faq-question(v-for='(heading, index) in headings')
+        .faq-question(v-for='(heading, index) in headings', :key="index")
-          h2.accordion(@click='setActivePage(heading)') {{ $t(`faqQuestion${index}`) }}
+          h2(role="tab", v-b-toggle="heading", @click="handleClick($event)", variant="info") {{ $t(`faqQuestion${index}`) }}
-          div(v-if='pageState[heading]', v-markdown="$t('webFaqAnswer' + index, replacements)")
+          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 {
+  .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) {
     .container-fluid {
       margin: auto;
@@ -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 = {};
+      const hash = window.location.hash.replace('#', '');
-      for (let index in headings) {
-        let heading = headings[index];
-        pageState[heading] = false;
-      }
 
       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) {
+      isVisible (heading) {
-        this.pageState[page] = !this.pageState[page];
+        return this.visible && this.visible === heading;
+      },
+      handleClick (e) {
+        if (!e) return;
+        const heading = e.target.nextElementSibling.id;
+        history.pushState({}, heading, `#${heading}`);
       },
     },
   };