[SDPAP-6370] Removed most changes from PR 1206, updated accordion tit…

…les to h3s (#1231) * revert: SDPAP-6370 Undo most changes from PR 1206, make accordion titles h3's
dpc-sdp · Aug 18, 2022 · a50e706 · a50e706
1 parent 75b0402
commit a50e706
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 93 deletions.
diff --git a/packages/components/Molecules/AnchorLinks/index.vue b/packages/components/Molecules/AnchorLinks/index.vue
@@ -7,25 +7,7 @@
       <ul v-if="links" class="rpl-anchor-links__items">
         <li v-for="(item, index) of links" :key="index" :class="['rpl-anchor-links__item', {'rpl-anchor-links__item--indent': (item.type && item.type === 'h3')}]">
           <rpl-icon v-if="(item.type && item.type === 'h3')" class="rpl-anchor-links__item--indent-icon" symbol="list_indent" size="1.05"/>
-          <a
-            v-if="item.index && item.index > 0"
-            @click="triggerComponent(item)"
-            :href="item.url"
-            class="rpl-link rpl-text-link rpl-text-link--underline"
-          >
-            <span class="rpl-link__inner">
-              <span class="rpl-text-label rpl-text-label--small rpl-text-label--small--underline">
-                <span>{{item.text}}</span>
-              </span>
-            </span>
-          </a>
-          <rpl-text-link
-            v-else
-            :url="item.url"
-            :text="item.text"
-            :underline="true"
-            size="small"
-          />
+          <rpl-text-link :url="item.url" :text="item.text" :underline="true" size="small"/>
         </li>
       </ul>
     </div>
@@ -36,7 +18,6 @@
 import { RplTextLink } from '@dpc-sdp/ripple-link'
 import { RplIcon } from '@dpc-sdp/ripple-icon'
 import rtl from '@dpc-sdp/ripple-global/mixins/rtl.js'
-import { RplAccordionEventBus } from '@dpc-sdp/ripple-accordion'
 
 export default {
   name: 'RplAnchorLinks',
@@ -48,14 +29,6 @@ export default {
   components: {
     RplTextLink,
     RplIcon
-  },
-  methods: {
-    triggerComponent: function (item) {
-      RplAccordionEventBus.$emit('open-panel', {
-        url: item.url,
-        index: item.index - 1 // post-render decode (0 index is falsy)
-      })
-    }
   }
 }
 </script>
@@ -148,32 +121,33 @@ export default {
       &--indent {
         display: flex;
         padding-left: $rpl-anchor-links-item-indent-padding-left;
+
         &-icon {
           margin-right: $rpl-anchor-links-item-indent-icon-marign-right;
         }
       }
     }
 
     &--rtl {
-     padding-right: $rpl-anchor-links-left-padding-xs;
-     border-right: $rpl-anchor-links-border;
-     border-left: 0;
+      padding-right: $rpl-anchor-links-left-padding-xs;
+      border-right: $rpl-anchor-links-border;
+      border-left: 0;
 
-     @include rpl_print {
-       border-right: 0;
-     }
+      @include rpl_print {
+        border-right: 0;
+      }
 
-     @include rpl_breakpoint('s') {
-       padding-right: $rpl-anchor-links-left-padding-s;
-     }
+      @include rpl_breakpoint('s') {
+        padding-right: $rpl-anchor-links-left-padding-s;
+      }
 
-     @include rpl_breakpoint('l') {
-       padding-left: 0;
-     }
+      @include rpl_breakpoint('l') {
+        padding-left: 0;
+      }
 
-     @include rpl_breakpoint('xl') {
-       padding-right: $rpl-anchor-links-left-padding-xl;
-     }
+      @include rpl_breakpoint('xl') {
+        padding-right: $rpl-anchor-links-left-padding-xl;
+      }
     }
   }
 </style>
diff --git a/packages/components/Organisms/Accordion/Accordion.vue b/packages/components/Organisms/Accordion/Accordion.vue
@@ -6,18 +6,14 @@
     </div>
     <component :is="isNumbered ? 'ol' : 'ul'" class="rpl-accordion__list">
       <li class="rpl-accordion__list-item" v-for="(accordion, index) in accordions" :key="index" :class="{'rpl-accordion__list-item--expanded': accordionIsOpen(index)}">
-        <h2 class="rpl-accordion__title" :class="{'rpl-accordion__title--expanded': accordionIsOpen(index)}">
+        <h3 class="rpl-accordion__title" :class="{'rpl-accordion__title--expanded': accordionIsOpen(index)}">
           <button @click="accordionClick(index)" class="rpl-accordion__button" :class="{'rpl-accordion__button--expanded': accordionIsOpen(index)}" :aria-expanded="accordionIsOpen(index).toString()" :aria-controls="accordionId(index)">
             <span v-if="isNumbered" aria-hidden="true" class="rpl-accordion__title-number">{{ (index + 1) }}</span>
             <span class="rpl-accordion__button-text" :class="{'rpl-accordion__button-text--rtl': isRtl()}">{{ accordion.title }}</span>
             <rpl-icon symbol="arrow_down_tertiary" color="primary" class="rpl-accordion__icon" :class="{'rpl-accordion__icon--expanded': accordionIsOpen(index)}"/>
           </button>
-        </h2>
-        <div
-          class="rpl-accordion__content"
-          :id="accordionId(index)"
-          :ref="accordionId(index)"
-        >
+        </h3>
+        <div class="rpl-accordion__content" :id="accordionId(index)" :ref="accordionId(index)">
           <rpl-markup class="rpl-accordion__content-inner" :html="accordion.content" />
         </div>
       </li>
@@ -32,7 +28,6 @@ import RplMarkup from '@dpc-sdp/ripple-markup'
 import Vue from 'vue'
 import { getAnchorLinkName } from '@dpc-sdp/ripple-global/utils/helpers.js'
 import rtl from '@dpc-sdp/ripple-global/mixins/rtl.js'
-import { RplAccordionEventBus } from './index.js'
 
 export default {
   name: 'RplAccordion',
@@ -58,15 +53,6 @@ export default {
     for (const index in this.accordions) {
       Vue.set(this.itemOpen, index, false)
     }
-    RplAccordionEventBus.$on('open-panel', (item) => {
-      // AnchorLinks can't narrow down to a single accordion, so check AnchorLinkName
-      if (item.url === `#${this.titleId}`) {
-        // Only open if closed
-        if (!this.accordionIsOpen(item.index)) {
-          this.accordionClick(item.index)
-        }
-      }
-    })
   },
   computed: {
     titleId () {

diff --git a/packages/components/Organisms/Accordion/accordion.scss b/packages/components/Organisms/Accordion/accordion.scss
@@ -58,12 +58,6 @@ $rpl-accordion-collapse-color: rpl_color('primary') !default;
 
   &__title-top {
     margin-top: 0;
-    // TODO: Lines below should be removed on merging of SDPA-1810.
-    @include rpl_mobile_padding;
-    @include rpl_breakpoint(m) {
-      padding-left: 0;
-      padding-right: 0;
-    }
   }
 
   &__list {

diff --git a/packages/components/Organisms/Accordion/index.js b/packages/components/Organisms/Accordion/index.js
@@ -1,9 +1,4 @@
-import Vue from 'vue'
 import RplAccordion from './Accordion.vue'
 
-// Event bus for handling external open trigger
-const RplAccordionEventBus = new Vue()
-export { RplAccordionEventBus }
 export { RplAccordion }
-
 export default RplAccordion
diff --git a/packages/ripple-nuxt-tide/lib/pages/Tide.vue b/packages/ripple-nuxt-tide/lib/pages/Tide.vue
@@ -194,35 +194,15 @@ export default {
               case 'rpl-markup':
                 if (component.data.html) {
                   let showSubHeading = false
-                  // field_node_display_headings == 'showH2AndH3' | 'showH2AndH3AndAccordionTitle'
-                  if (this.page.field_node_display_headings && this.page.field_node_display_headings.indexOf('showH2AndH3') !== -1) {
+                  if (this.page.field_node_display_headings && this.page.field_node_display_headings === 'showH2AndH3') {
                     showSubHeading = true
                   }
                   anchors.push(...anchorUtils.getAnchorLinks(component.data.html, showSubHeading))
                 }
                 break
               case 'rpl-accordion':
                 if (component.data.title) {
-                  // Add title of accordion set to anchors collection
-                  const url = `#${getAnchorLinkName(component.data.title)}`
-                  anchors.push({
-                    text: component.data.title,
-                    url: url,
-                    type: 'accordion'
-                  })
-
-                  // Add accordion triggers to anchors collection
-                  // field_node_display_headings == 'showH2AndAccordionTitle' | 'showH2AndH3AndAccordionTitle'
-                  if (this.page.field_node_display_headings && this.page.field_node_display_headings.indexOf('AccordionTitle') !== -1) {
-                    component.data.accordions.map((accordion, i) => {
-                      anchors.push({
-                        text: accordion.title,
-                        url: url,
-                        type: 'accordion',
-                        index: i + 1 // pre-render encode (0 index is falsy)
-                      })
-                    })
-                  }
+                  anchors.push({ text: component.data.title, url: `#${getAnchorLinkName(component.data.title)}` })
                 }
                 break
             }