[SDPA-6264] - Fix wysiwyg button target not being set (#1221)

* SDPA-6264 - Wire up 'target' attribute for WYSIWYG buttons * SDPA-6264 - update markup-transpiler test snapshot * SDPA-6264 - Refactor markup-transpiler button handling * SDPA-6264 - Fix internal links not opening in new tab
dpc-sdp · Jul 26, 2022 · f55710f · f55710f
1 parent 5c1cd2a
commit f55710f
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 2 deletions.
diff --git a/packages/components/Atoms/Button/index.vue b/packages/components/Atoms/Button/index.vue
@@ -2,6 +2,7 @@
   <rpl-link
     v-if="href"
     :href="href"
+    :target="target"
     class="rpl-button"
     :class="{
       'rpl-button--primary': (theme === 'primary'),
@@ -37,6 +38,10 @@ export default {
      * The URL destination of when button is clicked.
      */
     href: String,
+    /**
+     * The button target, e.g. _blank, _parent
+     */
+    target: String,
     /**
      * Button theme or colour styling e.g. primary, secondary.
      */

diff --git a/packages/components/Atoms/Link/Link.vue b/packages/components/Atoms/Link/Link.vue
@@ -69,7 +69,7 @@ export default {
     }
   },
   created: function () {
-    if (!isAnchorLink(this.href) && isRelativeUrl(this.href)) {
+    if (!isAnchorLink(this.href) && !this.linkTarget && isRelativeUrl(this.href)) {
       this.isNuxtLink = this.rplOptions.nuxt
     }
   }

diff --git a/packages/ripple-nuxt-tide/lib/config/markup-plugins.js b/packages/ripple-nuxt-tide/lib/config/markup-plugins.js
@@ -18,12 +18,17 @@ const pluginButton = function () {
   this.find('.button').map((i, el) => {
     const $button = this.find(el)
     const buttonHref = $button.attr('href')
+    const buttonTarget = $button.attr('target') ? $button.attr('target') : ''
     const buttonText = $button.text()
     let theme = 'primary'
     if ($button.hasClass('button--secondary')) {
       theme = 'secondary'
     }
-    const button = `<rpl-button href="${buttonHref}" theme="${theme}">${buttonText}</rpl-button>`
+    const button = `<rpl-button
+      href="${buttonHref}"
+      ${buttonTarget ? 'target="' + buttonTarget + '"' : ''}
+      theme="${theme}"
+    >${buttonText}</rpl-button>`
     return $button.replaceWith(button)
   })
 }

diff --git a/packages/ripple-nuxt-tide/test/unit/__fixtures__/markup-transpiler.html b/packages/ripple-nuxt-tide/test/unit/__fixtures__/markup-transpiler.html
@@ -84,6 +84,8 @@ <h2>This is a heading 2</h2>
 <!-- pluginButton -->
 <p><a class="button" href="Primary-button-link">Primary button text</a></p>
 <p><a class="button button--secondary" href="Secondary-button-link">Secondary button text</a></p>
+<p><a class="button" target="_blank" href="Primary-button-link-opens-in-new-tab">Primary button text - opens in new tab</a></p>
+<p><a class="button button--secondary" target="_blank" href="Secondary-button-link-opens-in-new-tab">Secondary button text - opens in new tab</a></p>
 
 <!-- Embedded image -->
 <article

diff --git a/packages/ripple-nuxt-tide/test/unit/__snapshots__/markup-transpiler.test.js.snap b/packages/ripple-nuxt-tide/test/unit/__snapshots__/markup-transpiler.test.js.snap
@@ -48,6 +48,8 @@ exports[`Markup transpiler should able transpile html into vue template with plu
 <!-- pluginButton -->
 <p><rpl-button href=\\"Primary-button-link\\" theme=\\"primary\\">Primary button text</rpl-button></p>
 <p><rpl-button href=\\"Secondary-button-link\\" theme=\\"secondary\\">Secondary button text</rpl-button></p>
+<p><rpl-button href=\\"Primary-button-link-opens-in-new-tab\\" target=\\"_blank\\" theme=\\"primary\\">Primary button text - opens in new tab</rpl-button></p>
+<p><rpl-button href=\\"Secondary-button-link-opens-in-new-tab\\" target=\\"_blank\\" theme=\\"secondary\\">Secondary button text - opens in new tab</rpl-button></p>
 
 <!-- Embedded image -->
 <article class=\\"embedded-entity embedded-entity--media embedded-entity--media--image\\">
@@ -162,6 +164,8 @@ exports[`Markup transpiler should get same HTML with no plugins 1`] = `
 <!-- pluginButton -->
 <p><a class=\\"button\\" href=\\"Primary-button-link\\">Primary button text</a></p>
 <p><a class=\\"button button--secondary\\" href=\\"Secondary-button-link\\">Secondary button text</a></p>
+<p><a class=\\"button\\" target=\\"_blank\\" href=\\"Primary-button-link-opens-in-new-tab\\">Primary button text - opens in new tab</a></p>
+<p><a class=\\"button button--secondary\\" target=\\"_blank\\" href=\\"Secondary-button-link-opens-in-new-tab\\">Secondary button text - opens in new tab</a></p>
 
 <!-- Embedded image -->
 <article class=\\"embedded-entity embedded-entity--media embedded-entity--media--image\\">