Merge pull request #4 from nih-sparc/IconCard

Icon card

Author: egauzens

src/App.vue

@@ -52,7 +52,14 @@
       @click="openNotificationWithIcon">
       Show Notification with Icon
     </el-button>
-
+    <el-col>
+        <el-row>
+          <icon-card
+            :title="iconCardData.title"
+            :icons="iconCardData.icons"
+          />
+        </el-row>
+      </el-col>
     <el-table
       :data="tableData"
       :default-sort = "{prop: 'name', order: 'descending'}"
@@ -249,9 +256,87 @@
   import Pagination from './components/Pagination.vue'
   import PaginationMenu from './components/PaginationMenu.vue'
   import BreadcrumbTrail from './components/BreadcrumbTrail.vue'
+  import IconCard from './components/IconCard.vue'
   import { ref } from 'vue'
   import { successMessage, infoMessage, failMessage, informationNotification, iconInformationNotification } from "../utils/notificationMessages"
 
+
+  const iconCardData={
+     title:'Browse Data By Category',
+     icons: [{
+      title: 'Bladder',
+      image: 'https://via.placeholder.com/736',
+      linkComponent: 'router-link',
+      href: '/bladder'
+    },
+    {
+      title: 'Colon',
+      image: 'https://via.placeholder.com/736',
+      linkComponent: 'router-link',
+      href: '/colon'
+    },
+    {
+      title: 'Esophogus',
+      image: 'https://via.placeholder.com/736',
+      linkComponent: 'router-link',
+      href: '/esophogus'
+    },
+    {
+      title: 'Female Reproductive System',
+      image: 'https://via.placeholder.com/736',
+      linkComponent: 'router-link',
+      href: '/female-reproductive-system'
+    },
+    {
+      title: 'Heart',
+      image: 'https://via.placeholder.com/736',
+      linkComponent: 'router-link',
+      href: '/heart'
+    },
+    {
+      title: 'Kidney',
+      image: 'https://via.placeholder.com/736',
+      linkComponent: 'router-link',
+      href: '/kidney'
+    },
+    {
+      title: 'Liver',
+      image: 'https://via.placeholder.com/736',
+      linkComponent: 'router-link',
+      href: '/liver'
+    },
+    {
+      title: 'Lungs',
+      image: 'https://via.placeholder.com/736',
+      linkComponent: 'router-link',
+      href: '/lungs'
+    },
+    {
+      title: 'Male Reproductive System',
+      image: 'https://via.placeholder.com/736',
+      linkComponent: 'router-link',
+      href: '/male-reproductive-system'
+    },
+    {
+      title: 'Small Intestine',
+      image: 'https://via.placeholder.com/736',
+      linkComponent: 'router-link',
+      href: '/small-intestine'
+    },
+    {
+      title: 'Spleen',
+      image: 'https://via.placeholder.com/736',
+      linkComponent: 'router-link',
+      href: '/spleen'
+    },
+    {
+      title: 'Stomach',
+      image: 'https://via.placeholder.com/736',
+      linkComponent: 'router-link',
+      href: '/stomach'
+    }]
+  }
+
   const tableData = [{
     "id": 37,
     "sourceDatasetId": 344,
@@ -752,7 +837,8 @@
       DropdownMultiselect,
       Pagination,
       PaginationMenu,
-      BreadcrumbTrail
+      BreadcrumbTrail,
+      IconCard
     },
     name: 'App',
     setup() {
@@ -818,7 +904,8 @@
         pageSize,
         pageCount,
         selectedPage,
-        breadcrumbs
+        breadcrumbs,
+        iconCardData
       }
     },
     methods: {

src/components/IconCard.vue

@@ -0,0 +1,93 @@
+<template>
+    <div class="icon-card">
+      <h2>{{title}}</h2>
+      <div class="data-wrap">
+        <component
+          v-for="icon in icons"
+          :is="icon.linkComponent"
+          class="icon-card__item"
+          :to="icon.href"
+          :key="icon.title"
+        >
+          <img
+            :src="icon.image"
+            :alt="`Icon for ${icon.title} category`"
+          />
+          <p class="mb-0 mt-8">
+            {{ icon.title }}
+          </p>
+        </component>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: 'IconCard',
+  
+    props: {
+      icons: {
+        type: Array,
+        required: true
+      },
+      title: {
+        type: String,
+        default: ''
+      }
+    },
+  }
+  </script>
+  
+  <style lang="scss" scoped>
+  @import '../assets/_variables.scss';
+  
+  .icon-card {
+    text-align: center;
+    padding: 3em 0 4em;
+    background-color: $background;
+  }
+  h2 {
+    margin-bottom: 1.5625em;
+  }
+  .data-wrap {
+    align-items: flex-start;
+    flex-wrap: wrap;
+    display: flex;
+    justify-content: center;
+    @media (min-width: 768px) {
+      padding-left: 0.4375rem;
+      padding-right: 0.4375rem;
+    }
+  }
+  .icon-card__item {
+    color: #000;
+    margin: 1rem 2rem;
+    text-decoration: none;
+    width: 12%;
+    min-width: 70px;
+    &:hover,
+    &:focus {
+      opacity: 0.9;
+    }
+    img {
+      background: #fff;
+      border-radius: 50%;
+      display: block;
+      height: auto;
+      margin-bottom: 8px;
+      width: 100%;
+      @media (min-width: 768px) {
+        height: 100%;
+      }
+    }
+    p {
+      font-size: 1em;
+      font-weight: 700;
+      color: $darkBlue;
+      cursor: pointer;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+  </style>

src/components/index.js

@@ -10,6 +10,7 @@ import DropdownMultiselect from './DropdownMultiselect/DropdownMultiselect.vue'
 import Pagination from './Pagination.vue'
 import PaginationMenu from './PaginationMenu.vue'
 import BreadCrumbTrail from './BreadcrumbTrail.vue'
+import IconCard from '.IconCard.vue'
 
 export default {
   install(app) {
@@ -22,5 +23,6 @@ export default {
     app.component('Pagination', Pagination);
     app.component('PaginationMenu', PaginationMenu);
     app.component('BreadCrumbTrail', BreadCrumbTrail);
+    app.component('IconCard', IconCard)
   },
 };