[SDPA-372] Add Topic and Tags to end of Landing Page. (#486)

dpc-sdp · Aug 21, 2019 · 2a15872 · 2a15872
1 parent f1c2307
commit 2a15872
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git a/packages/components/Atoms/MetaTag/index.vue b/packages/components/Atoms/MetaTag/index.vue
@@ -26,6 +26,8 @@ export default {
   @import "~@dpc-sdp/ripple-global/scss/settings";
   @import "~@dpc-sdp/ripple-global/scss/tools";
 
+  $rpl-meta-tag-ruleset: ('xxs', 1.2em, 'medium') !default;
+  $rpl-meta-tag-margin: 0 $rpl-space-2 $rpl-space-2 0 !default;
   $rpl-meta-tag-padding: $rpl-space-2 ($rpl-space * 5) !default;
   $rpl-meta-tag-border: 2px solid rpl-color('primary') !default;
   $rpl-meta-tag-border-radius: rem(40px) !default;
@@ -36,27 +38,30 @@ export default {
   .rpl-meta-tag {
     $root: &;
     display: inline-block;
+    margin: $rpl-meta-tag-margin;
 
     &__link {
+      @include rpl_text_color($rpl-meta-tag-text-color);
       display: inline-block;
       text-decoration: none;
       border: $rpl-meta-tag-border;
       border-radius: $rpl-meta-tag-border-radius;
       padding: $rpl-meta-tag-padding;
 
       #{$root}--dark & {
+        @include rpl_text_color($rpl-meta-tag-text-color);
         border-color: $rpl-meta-tag-dark-border-color;
         @include rpl_focus_dark;
       }
     }
 
     &__text {
-      @include rpl_typography_font('xxs', 1.2em, 'medium');
+      @include rpl_typography_ruleset($rpl-meta-tag-ruleset);
       @include rpl_text_color($rpl-meta-tag-text-color);
       text-transform: uppercase;
 
       #{$root}--dark & {
-        color: $rpl-meta-tag-dark-text-color;
+        @include rpl_text_color($rpl-meta-tag-dark-text-color);
       }
     }
   }

diff --git a/packages/ripple-nuxt-tide/modules/landing-page/pages/index.vue b/packages/ripple-nuxt-tide/modules/landing-page/pages/index.vue
@@ -13,17 +13,22 @@
         <component v-else :is="dComponent.component" v-bind="dComponent.data" :class="dComponent.class"></component>
       </rpl-col>
     </template>
+    <rpl-col v-if="page.field_show_topic_term_and_tags" cols="full">
+      <rpl-meta-tag v-for="(tag, index) in topicsAndTags" :key="index" :linkText="tag.text" :linkUrl="tag.url" />
+    </rpl-col>
   </rpl-row>
 </template>
 
 <script>
 import { RplRow, RplCol } from '@dpc-sdp/ripple-grid'
 import RplAnchorLinks from '@dpc-sdp/ripple-anchor-links'
+import RplMetaTag from '@dpc-sdp/ripple-meta-tag'
 
 export default {
   components: {
     RplAnchorLinks,
     RplRow,
+    RplMetaTag,
     RplCol
   },
   data () {
@@ -38,6 +43,24 @@ export default {
     anchorLinks: Array,
     sidebar: Boolean
   },
+  computed: {
+    topicsAndTags () {
+      if (this.page.field_show_topic_term_and_tags) {
+        let metaTags = []
+        if (this.page.field_topic) {
+          metaTags.push(this.page.field_topic)
+        }
+        if (this.page.field_tags) {
+          metaTags = metaTags.concat(this.page.field_tags)
+        }
+        return metaTags.map(tag => ({
+          text: tag.name,
+          url: (tag.path && tag.path.alias) ? tag.path.alias : ''
+        }))
+      }
+      return null
+    }
+  },
   created () {
     this.dynamicComponents = this.$tide.getDynamicComponents(this.page.appDComponents, this.sidebar)
   }