Added content tab card

Author: egauzens

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sparc-design-system-components-2",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "private": false,
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -239,10 +239,27 @@
       :selected="selectedPage"
       @select-page="onPaginationChange"
     />      
-    <pagination-menu 
+    <pagination-menu
+      class="mb-24"
       :page-size="pageSize"
       @update-page-size="updatePageSize"
     />
+    <content-tab-card
+      :tabs="contentTabCard.tabs"
+      :active-tab-id="contentTabCard.activeTabId"
+      @tab-changed="tabChanged"
+    >
+      <div
+        v-for="tab in contentTabCard.tabs"
+        :key="tab.id"
+      >
+        <div
+          v-show="contentTabCard.activeTabId === tab.id" 
+        >
+          Content for {{tab.label}} goes here!
+        </div>
+      </div>
+    </content-tab-card>
   </main>
 </template>
 
@@ -257,6 +274,7 @@
   import PaginationMenu from './components/PaginationMenu.vue'
   import BreadcrumbTrail from './components/BreadcrumbTrail.vue'
   import IconCard from './components/IconCard.vue'
+  import ContentTabCard from './components/ContentTabCard.vue'
   import { ref } from 'vue'
   import { successMessage, infoMessage, failMessage, informationNotification, iconInformationNotification } from "../utils/notificationMessages"
 
@@ -826,7 +844,24 @@
       }, {
         label: "Level 2",
         to: "/#"
-      }]
+      }
+    ]
+    const contentTabCard = {
+      tabs: [{
+        label: 'Team Information', 
+        id: 'Team Information'
+      },
+      {
+        label: 'Diseases', 
+        id: 'Diseases'
+      },
+      {
+        label: 'Datasets', 
+        id: 'Datasets',
+        href: '/#'
+      }],
+      activeTabId: "Team Information"
+    }
   export default {
     components: {
       HelloWorld,
@@ -838,7 +873,8 @@
       Pagination,
       PaginationMenu,
       BreadcrumbTrail,
-      IconCard
+      IconCard,
+      ContentTabCard
     },
     name: 'App',
     setup() {
@@ -882,6 +918,7 @@
       const pageSize= ref(10)
       const pageCount= ref(100)
       const selectedPage = ref(3)
+      const tabCard = ref(contentTabCard)
 
       return {
         dropdownMultiselectTooltip,
@@ -905,7 +942,8 @@
         pageCount,
         selectedPage,
         breadcrumbs,
-        iconCardData
+        iconCardData,
+        contentTabCard: tabCard
       }
     },
     methods: {
@@ -934,6 +972,9 @@
         this.pageSize = limit === 'View All' ?  100 : limit
         this.pageCount = limit === 'View All' ?  100 : limit
       },
+      tabChanged(newTab) {
+        this.contentTabCard.activeTabId = newTab.id
+      },
     }
   }
 </script>

src/components/ContentTabCard.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="card-container">
+    <span :class="[tabStyle, 'link-container']" v-for="tab in tabs" :key="tab.label">
+      <!-- Expect this to be either nuxt-link or router-link -->
+      <component v-if="linkComponent"
+        :is="linkComponent"
+        :to="{ query: queryParams(tab.id) }"
+        v-on:click="$emit('tab-changed', tab)"
+        :class="[{ active: tab.id === activeTabId }, tabStyle, tabClass, 'tab-link p-16']"
+      >
+        {{ tab.label }}
+      </component>
+      <a v-else-if="tab.href"
+        :class="[{ active: tab.id === activeTabId }, tabStyle, tabClass, 'tab-link p-16']"
+        :href="tab.href"
+        target="_blank"    
+      >
+        {{ tab.label }}
+      </a>
+      <a
+        v-else
+        :class="[{ active: tab.id === activeTabId }, tabStyle, tabClass, 'tab-link p-16']"
+        @click.prevent="$emit('tab-changed', tab)"
+      >
+        {{ tab.label }}
+      </a>
+    </span>
+    <div class="content mt-16 p-16">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ContentTabCard',
+  props: {
+    tabs: {
+      type: Array,
+      required: true
+    },
+    linkComponent: {
+      type: String
+    },
+    activeTabId: {
+      type: String,
+      required: true
+    },
+    routeName: {
+      type: String,
+      default: 'tab'
+    },
+    tabStyle: {
+      type: String,
+      default: 'style1'
+    }
+  },
+  computed: {
+    tabClass: function() {
+      switch(this.tabStyle) {
+        case 'style1':
+          return 'tab2'
+        case 'style2':
+          return 'tab4'
+        case 'style3':
+          return 'body1'
+        default:
+          return ''
+      }
+    }
+  },
+  methods: {
+    queryParams(tabId) {
+      return { ...this.$route.query, [this.routeName]: tabId }
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../assets/_variables.scss';
+.style1 {
+  line-height: normal;
+}
+.tab-link {
+  text-decoration: none;
+  flex-wrap: nowrap;
+  border: 1px solid $lineColor1;
+  cursor: pointer;
+  &:hover, &.active {
+    &.style1, &.style3 {
+      border: 1px solid $purple;
+      border-bottom: .125em solid $purple;
+      color: $purple;
+      background-color: #f9f2fc;
+      font-weight: 500;
+    }
+    &.style2 {
+      border-bottom: .125em solid white;
+      font-weight: 500;
+    }
+  } 
+}
+.content {
+  border: 1px solid $lineColor1;
+  background-color: white;
+  overflow: auto;
+}
+.tab-link {
+  background-color: white;
+}
+.card-container {
+  line-height: normal;
+}
+</style>

src/components/index.js

@@ -11,6 +11,7 @@ import Pagination from './Pagination.vue'
 import PaginationMenu from './PaginationMenu.vue'
 import Breadcrumb from './BreadcrumbTrail.vue'
 import IconCard from './IconCard.vue'
+import ContentTabCard from './ContentTabCard.vue'
 
 export default {
   install(app) {
@@ -24,5 +25,6 @@ export default {
     app.component('PaginationMenu', PaginationMenu);
     app.component('Breadcrumb', Breadcrumb);
     app.component('IconCard', IconCard)
+    app.component('ContentTabCard', ContentTabCard)
   },
 };