From f274b4c298b62c047d264f2755d9880d7b8e1ccb Mon Sep 17 00:00:00 2001
From: Eric Gauzens <ericgauzens@hotmail.com>
Date: Fri, 29 Sep 2023 11:36:15 -0400
Subject: [PATCH 1/3] Updated content tab card style

---
 package.json                                  |  5 +-
 .../ContentTabCard/src/ContentTabCard.vue     | 48 +++++--------------
 .../contentTabCard/contentTabCard.stories.js  |  1 -
 .../contentTabCard/contentTabCard.stories.mdx |  1 -
 4 files changed, 14 insertions(+), 41 deletions(-)

diff --git a/package.json b/package.json
index 992bfb2f..a362bd14 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nih-sparc/sparc-design-system-components",
-  "version": "0.27.1",
+  "version": "0.27.2",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -61,9 +61,6 @@
     "vue-cli-plugin-storybook": "~1.3.0",
     "vue-template-compiler": "^2.6.11"
   },
-  "peerDependencies": {
-    "vue": "^2.6.11"
-  },
   "eslintConfig": {
     "root": true,
     "env": {
diff --git a/src/components/ContentTabCard/src/ContentTabCard.vue b/src/components/ContentTabCard/src/ContentTabCard.vue
index cf8122a3..4dd7ada4 100644
--- a/src/components/ContentTabCard/src/ContentTabCard.vue
+++ b/src/components/ContentTabCard/src/ContentTabCard.vue
@@ -1,19 +1,18 @@
 <template>
   <div>
-    <el-row :class="[tabStyle, 'tabs-container']">
-      <el-col class="tabs-column">
+    <div :class="[tabStyle]">
         <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) }"
             @click.native="$emit('tab-changed', tab)"
-            :class="[{ active: tab.id === activeTabId }, tabStyle, tabClass, 'tab-link px-8']"
+            :class="[{ active: tab.id === activeTabId }, tabStyle, tabClass, 'tab-link p-8']"
           >
             {{ tab.label }}
           </component>
           <a v-else-if="tab.href"
-            :class="[{ active: tab.id === activeTabId }, tabStyle, tabClass, 'tab-link px-8']"
+            :class="[{ active: tab.id === activeTabId }, tabStyle, tabClass, 'tab-link p-8']"
             :href="tab.href"
             target="_blank"    
           >
@@ -21,15 +20,14 @@
           </a>
           <a
             v-else
-            :class="[{ active: tab.id === activeTabId }, tabStyle, tabClass, 'tab-link px-8']"
+            :class="[{ active: tab.id === activeTabId }, tabStyle, tabClass, 'tab-link p-8']"
             @click.prevent="$emit('tab-changed', tab)"
           >
             {{ tab.label }}
           </a>
         </span>
-      </el-col>
-    </el-row>
-    <div class="content pt-16">
+    </div>
+    <div class="content mt-8 p-16">
       <slot />
     </div>
   </div>
@@ -84,26 +82,20 @@ export default {
 
 <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;
-  &.style1, &.style3 {
-    border-bottom: .125em solid $lineColor1;
-  }
-  &.style1, &.style2 {
-    margin-right: 2rem;
-    padding-bottom: .12em;
-  }
-  &.style3 {
-    margin-right: .5rem;
-    padding-bottom: .2em;
-  }
   &:hover, &.active {
     &.style1, &.style3 {
+      border: 1px solid $purple;
       border-bottom: .125em solid $purple;
       color: $purple;
+      background-color: #f9f2fc;
       font-weight: 500;
     }
     &.style2 {
@@ -112,22 +104,8 @@ export default {
     }
   } 
 }
-.tabs-column {
-  .link-container:last-child > .tab-link {
-    margin-right: 0;
-  }
-}
-.tabs-container {
-  display: block;
-  &.style1, &.style3 {
-    border-bottom: .125em solid $lineColor1;
-  }
-  &.style2 {
-    background-color: $darkBlue;
-    padding: 1.5rem;
-  }
-}
 .content {
+  border: 1px solid $lineColor1;
   overflow: auto;
 }
 </style>
diff --git a/src/stories/contentTabCard/contentTabCard.stories.js b/src/stories/contentTabCard/contentTabCard.stories.js
index 47a47435..5a4559d1 100644
--- a/src/stories/contentTabCard/contentTabCard.stories.js
+++ b/src/stories/contentTabCard/contentTabCard.stories.js
@@ -28,7 +28,6 @@ const createDemo = (contentTabCardItem) => {
         <div
           v-for="tab in tabs"
           :key="tab.id"
-          class="m-8"
         >
           <div
             v-show="activeTabId === tab.id" 
diff --git a/src/stories/contentTabCard/contentTabCard.stories.mdx b/src/stories/contentTabCard/contentTabCard.stories.mdx
index 15fcf47c..05192ad4 100644
--- a/src/stories/contentTabCard/contentTabCard.stories.mdx
+++ b/src/stories/contentTabCard/contentTabCard.stories.mdx
@@ -71,7 +71,6 @@ methods: {
   <div
     v-for="tab in tabs"
     :key="tab.id"
-    class="m-8"
   >
     <div
       v-show="activeTabId === tab.id" 

From e43a4f4f84825243ef2f409e743e6fc030759a8e Mon Sep 17 00:00:00 2001
From: Eric Gauzens <ericgauzens@hotmail.com>
Date: Fri, 29 Sep 2023 11:44:58 -0400
Subject: [PATCH 2/3] added back in peer dependency

---
 package.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/package.json b/package.json
index a362bd14..e010b3f1 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,9 @@
     "vue-cli-plugin-storybook": "~1.3.0",
     "vue-template-compiler": "^2.6.11"
   },
+  "peerDependencies": {
+    "vue": "^2.6.11"
+  },
   "eslintConfig": {
     "root": true,
     "env": {

From d9b28a634c6c4ec94c2e978232243f28c69cf90b Mon Sep 17 00:00:00 2001
From: Eric Gauzens <ericgauzens@hotmail.com>
Date: Fri, 29 Sep 2023 11:46:41 -0400
Subject: [PATCH 3/3] removed peer dependency

---
 package.json | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/package.json b/package.json
index e010b3f1..a362bd14 100644
--- a/package.json
+++ b/package.json
@@ -61,9 +61,6 @@
     "vue-cli-plugin-storybook": "~1.3.0",
     "vue-template-compiler": "^2.6.11"
   },
-  "peerDependencies": {
-    "vue": "^2.6.11"
-  },
   "eslintConfig": {
     "root": true,
     "env": {