Merge pull request #3 from nih-sparc/Breadcrumb

Breadcrumb

Author: egauzens

package.json

@@ -22,7 +22,8 @@
     "@carbon/grid": "^11.20.0",
     "element-plus": "^2.4.2",
     "ramda": "^0.29.1",
-    "vue": "^3.3.4"
+    "vue": "^3.3.4",
+    "vue-router":"^4.2.5"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "7.5.1",

src/App.vue

@@ -9,6 +9,11 @@
 
   <main>
     <SparcLogo></SparcLogo>
+    <breadcrumb-trail
+        :breadcrumb="breadcrumbs"
+        link-component="router-link"
+        title="Level 3 this should be truncated "
+      />
     <div class="tooltip">
       <sparc-tooltip v-for="dir in tooltipDirs" :key="dir" :placement="dir">
         <template v-slot:data>
@@ -243,6 +248,7 @@
   import DropdownMultiselect from './components/DropdownMultiselect/DropdownMultiselect.vue'
   import Pagination from './components/Pagination.vue'
   import PaginationMenu from './components/PaginationMenu.vue'
+  import BreadcrumbTrail from './components/BreadcrumbTrail.vue'
   import { ref } from 'vue'
   import { successMessage, infoMessage, failMessage, informationNotification, iconInformationNotification } from "../utils/notificationMessages"
 
@@ -729,7 +735,13 @@
       value: 'Option5',
       label: 'Option5'
     }]
-
+    const breadcrumbs= [{
+        label: "Home",
+        to: "/home"
+      }, {
+        label: "Level 2",
+        to: "/#"
+      }]
   export default {
     components: {
       HelloWorld,
@@ -739,7 +751,8 @@
       SparcRadio,
       DropdownMultiselect,
       Pagination,
-      PaginationMenu
+      PaginationMenu,
+      BreadcrumbTrail
     },
     name: 'App',
     setup() {
@@ -804,7 +817,8 @@
         options,
         pageSize,
         pageCount,
-        selectedPage
+        selectedPage,
+        breadcrumbs
       }
     },
     methods: {
@@ -838,13 +852,16 @@
 </script>
 
 <style scoped lang="scss">
+
 header {
   line-height: 1.5;
 }
 
 .logo {
   display: block;
   margin: 0 auto 2rem;
+  height: 100px;
+  width:100px;
 }
 
 .tooltip {

src/components/BreadcrumbTrail.vue

@@ -0,0 +1,84 @@
+<template>
+    <div class="design-system-component-breadcrumb">
+      <div v-for="item in breadcrumb" :key="item.label" class="breadcrumb-link">
+        <template v-if="linkComponent === 'nuxt-link' || linkComponent === 'router-link'">
+          <component :is="linkComponent" :to="item.to">
+            {{ item.label }}
+          </component>
+        </template>
+        <template v-else>
+          <component :is="linkComponent" :href="item.to">
+            {{ item.label }}
+          </component>
+        </template>
+        <span class="arrow">
+          &gt;
+        </span>
+      </div>
+      <span class="title">{{ formatTitle(title) }}</span>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: 'BreadcrumbTrail',
+  
+    props: {
+      breadcrumb: {
+        type: Array,
+        default: () => []
+      },
+      title: {
+        type: String,
+        default: ''
+      },
+      linkComponent: {
+        type: String,
+        default: 'nuxt-link'
+      }
+    },
+  
+    methods: {
+      /**
+       * Formats breadcrumb length
+       * 32 characters max
+       * Truncation should occur at the end of a
+       * word and not part way through a word.
+       * @param {String} breadcrumb
+       */
+      formatTitle: function(title) {
+        const truncated = title.replace(/^(.{32}[^\s]*).*/, '$1')
+        return truncated.length === title.length
+          ? title
+          : `${truncated}...`
+      }
+    }
+  }
+  </script>
+  
+  <style lang="scss">
+  @import '../assets/_variables.scss';
+  .design-system-component-breadcrumb {
+    align-items: flex-start;
+    background: $lineColor2;
+    color: $darkBlue;
+    display: flex;
+    font-size: 0.875rem;
+    margin-top: 0;
+    padding: 0.5rem 2.5rem;
+    .breadcrumb-link {
+      align-items: center;
+      display: flex;
+      flex-shrink: 0;
+    }
+    a {
+      font-weight: 500;
+      text-decoration: none;
+      color: $darkBlue;
+    }
+    .arrow {
+      margin: 0 0.5rem;
+      transform: translateY(-1px);
+    }
+  }
+  </style>

src/components/index.js

@@ -9,6 +9,7 @@ import SparcRadio from './SparcRadio.vue';
 import DropdownMultiselect from './DropdownMultiselect/DropdownMultiselect.vue'
 import Pagination from './Pagination.vue'
 import PaginationMenu from './PaginationMenu.vue'
+import BreadCrumbTrail from './BreadcrumbTrail.vue'
 
 export default {
   install(app) {
@@ -20,5 +21,6 @@ export default {
     app.component('DropdownMultiselect', DropdownMultiselect);
     app.component('Pagination', Pagination);
     app.component('PaginationMenu', PaginationMenu);
+    app.component('BreadCrumbTrail', BreadCrumbTrail);
   },
 };

src/main.js

@@ -2,8 +2,13 @@ import './assets/styles.scss'
 
 import { createApp } from 'vue'
 import ElementPlus from 'element-plus'
+import {createRouter, createWebHashHistory} from 'vue-router'
 import App from './App.vue'
 
 const app = createApp(App)
+const routes = []
+const router = createRouter({history:createWebHashHistory(), routes})
+
+app.use(router)
 app.use(ElementPlus)
 app.mount('#app')