Add link target="" support to components that display menus. (#384)

dpc-sdp · Aug 14, 2019 · 93e7d02 · 93e7d02
1 parent f6e7a5e
commit 93e7d02
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 9 deletions.
diff --git a/packages/components/Atoms/Global/mixins/parentlinks.js b/packages/components/Atoms/Global/mixins/parentlinks.js
@@ -66,13 +66,15 @@ const parentlinks = {
         return branch.map(item => {
           let newitem = {
             text: item.text,
-            url: item.url
+            url: item.url,
+            target: item.target
           }
           if (item.children) {
             newitem.children = this.generateParentLinks(item.children)
             newitem.children.unshift({
               text: item.text,
-              url: item.url
+              url: item.url,
+              target: item.target
             })
           }
           return newitem

diff --git a/packages/components/Molecules/Sitemap/SitemapMenu.vue b/packages/components/Molecules/Sitemap/SitemapMenu.vue
@@ -1,7 +1,7 @@
 <template>
   <ul class="rpl-sitemap-menu__list" :class="'rpl-sitemap-menu__list--depth-' + depth">
     <li class="rpl-sitemap-menu__list-item" v-for="(list, index) in menu" :key="index">
-      <rpl-link class="rpl-sitemap-menu__link" :class="'rpl-sitemap-menu__link--depth-' + depth" :href="list.url">{{ list.text }}</rpl-link>
+      <rpl-link class="rpl-sitemap-menu__link" :class="'rpl-sitemap-menu__link--depth-' + depth" :href="list.url" :target="list.target">{{ list.text }}</rpl-link>
       <rpl-sitemap-menu v-if="list.children" :menu="list.children" :depth="depth + 1"></rpl-sitemap-menu>
     </li>
   </ul>

diff --git a/packages/components/Organisms/SiteFooter/FooterNavigation.vue b/packages/components/Organisms/SiteFooter/FooterNavigation.vue
@@ -3,13 +3,13 @@
     <template v-for="(item, index) in nav">
       <li class="rpl-footer-nav__menu-item" :class="{'rpl-footer-nav__menu-item--parent': item.children}" :key="index" >
         <h2 class="rpl-footer-nav__heading" @click="toggle(item, index, $event)">
-          <rpl-link :href="item.url">{{ item.text }}</rpl-link>
+          <rpl-link :href="item.url" :target="item.target">{{ item.text }}</rpl-link>
           <rpl-icon :symbol="visibleItemIndex == index ? 'up' : 'down'" color="secondary" size="m" v-if="(minimize && item.children)" />
         </h2>
         <transition name="rpl-accordion">
           <ul class="rpl-footer-nav__submenu-item" v-if="item.children" v-show="(!minimize || visibleItemIndex == index)">
             <li v-for="(child, cIndex) in item.children" :key="cIndex">
-              <rpl-link :href="child.url">{{ child.text }}</rpl-link>
+              <rpl-link :href="child.url" :target="child.target">{{ child.text }}</rpl-link>
             </li>
           </ul>
         </transition>

diff --git a/packages/components/Organisms/SiteFooter/LinksAndCopyright.vue b/packages/components/Organisms/SiteFooter/LinksAndCopyright.vue
@@ -2,7 +2,7 @@
   <div class="rpl-links-and-copyright">
     <ul class="rpl-links-and-copyright__links">
       <li v-for="(link, index) in links" :key="index">
-        <rpl-link :href="link.url">{{ link.text }}</rpl-link>
+        <rpl-link :href="link.url" :target="link.target">{{ link.text }}</rpl-link>
       </li>
     </ul>
     <div class="rpl-links-and-copyright__copyright" v-html="copyright">

diff --git a/packages/components/Organisms/SiteHeader/menu.vue b/packages/components/Organisms/SiteHeader/menu.vue
@@ -27,7 +27,7 @@
               <rpl-icon symbol="left" color="white" />
               <span class="rpl-visually-hidden">Close {{ title }} and return to </span><span>{{ backTitle }}</span>
             </button>
-            <rpl-link v-if="showMenuHeading && parent" class="rpl-menu__heading" :class="{ 'rpl-menu__heading--horizontal-sub' : (!isVerticalLayout && depth > 1) }" :href="parent.url">{{ parent.text }}</rpl-link>
+            <rpl-link v-if="showMenuHeading && parent" class="rpl-menu__heading" :class="{ 'rpl-menu__heading--horizontal-sub' : (!isVerticalLayout && depth > 1) }" :href="parent.url" :target="parent.target">{{ parent.text }}</rpl-link>
           </div>
           <ul class="rpl-menu__items" :class="{ 'rpl-menu__items--root': isRoot }">
             <li
@@ -44,6 +44,7 @@
                 v-if="!list.children"
                 class="rpl-menu__item-link"
                 :href="list.url"
+                :target="list.target"
                 @focus="onItemFocus"
               >
                 {{ list.text }}
@@ -533,7 +534,7 @@ export default {
 
   .rpl-menu--vertical,
   .rpl-menu--horizontal-floating-wrapper,
-  .rpl-menu--horizontal .rpl-menu--subs, {
+  .rpl-menu--horizontal .rpl-menu--subs {
     .rpl-menu__item {
       border-top: $rpl-menu-item-border;
 

diff --git a/packages/components/Organisms/SiteSectionNavigation/menu.vue b/packages/components/Organisms/SiteSectionNavigation/menu.vue
@@ -2,7 +2,7 @@
   <transition name="section" @enter="start" @after-enter="end" @before-leave="start" @after-leave="end">
     <ul v-show="open" :data-depth="depth" class="rpl-section-menu">
       <li v-for="(link, index) in menu" :key="index" class="rpl-section-menu__item rpl-section-menu__item--parent" :class="{'rpl-section-menu__item--active': menuItemOpen[index]}">
-        <rpl-link v-if="!link.children" :href="link.url" class="rpl-section-menu__item-link">{{ link.text }}</rpl-link>
+        <rpl-link v-if="!link.children" :href="link.url" :target="link.target" class="rpl-section-menu__item-link">{{ link.text }}</rpl-link>
         <button
           v-else
           class="rpl-section-menu__item-link rpl-section-menu__item-link--parent"