feature/Extract list item to component

Author: LewisYoul

app/assets/stylesheets/list-item.scss

@@ -0,0 +1,9 @@
+@import './variables.scss';
+
+.list-item {
+  &--wrapper {
+    border: 1px solid $color-light;
+    border-radius: 5px;
+    margin: 16px 0px;
+  }
+}

app/assets/stylesheets/snippets.scss

@@ -18,12 +18,6 @@
       text-decoration-color: $color-primary;
     }
 
-    &--wrapper {
-      border: 1px solid $color-light;
-      border-radius: 5px;
-      margin: 16px 0px;
-    }
-
     &--title-wrapper {
       display: flex;
       align-items: center;

app/javascript/list-item.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="list-item--wrapper">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

app/javascript/packs/snippet_app.js

@@ -72,7 +72,7 @@ import NewSnippet from '../new-snippet.vue'
 import NewSnippetButton from '../new-snippet-button.vue'
 import Popover from '../popover.vue';
 import Sidebar from '../sidebar.vue'
-import SnippetListItem from '../snippet-list-item.vue'
+import ListItem from '../list-item.vue'
 import Snipt from '../snipt.vue'
 import SnippetPreview from '../snippet-preview.vue'
 import SnippetShow from '../snippet-show.vue'
@@ -103,13 +103,13 @@ document.addEventListener('DOMContentLoaded', () => {
         FoldersShow,
         FolderRow,
         Home,
+        ListItem,
         Modal,
         NewSnippet,
         NewSnippetButton,
         Popover,
         Snipt,
         Sidebar,
-        SnippetListItem,
         SnippetPreview,
         SnippetShow,
         Tab,

app/javascript/snippet-list-item.vue

@@ -10,7 +10,7 @@
       </action-snippet>
     </modal>
 
-    <div class="snippets--list-item--wrapper">
+    <list-item>
       <a class="snippets--list-item" :href="snippetPath">
         <div class="snippets--list-item--title-wrapper">
           <span class="snippets--list-item--title-link">{{ snippet.description }}</span>
@@ -39,15 +39,16 @@
           </div>
         </div>
       </a>
-    </div>
+    </list-item>
   </div>
 </template>
 
 <script>
+import ActionSnippet from './action-snippet';
+import ListItem from './list-item';
+import Modal from './modal';
 import MoreButton from './more-button';
 import Popover from './popover';
-import Modal from './modal';
-import ActionSnippet from './action-snippet';
 
 import snippetsMixin from './mixins/snippetsMixin';
 import foldersMixin from './mixins/foldersMixin';
@@ -56,7 +57,7 @@ import { EventBus } from './event-bus.js';
 import { store } from './store';
 
 export default {
-  components: { MoreButton, ActionSnippet, Modal, Popover },
+  components: { MoreButton, ListItem, ActionSnippet, Modal, Popover },
 
   mixins: [snippetsMixin, foldersMixin],
 

app/javascript/snipt.vue

@@ -59,6 +59,7 @@ export default {
     &--header {
       padding: 16px;
       border-radius: 2px;
+      border-bottom: 1px solid lightgray;
 
       &:hover {
         cursor: pointer;
@@ -68,8 +69,9 @@ export default {
       &-active {
         @extend .tabs--header;
 
-        text-decoration: underline;
-        text-decoration-color: #3AAFA9;
+        // text-decoration: underline;
+        // text-decoration-color: #3AAFA9;
+        border-bottom: 2px solid #3AAFA9;
       }
     }
   }

app/javascript/tabs.vue

@@ -17,24 +17,22 @@
     </tab>
     <tab name="<%= @followers.size %> Followers">
       <% @followers.each_with_index do |follower, index| %>
-        <% if index > 0 %>
-          <div class="horizontal-line"></div>
-        <% end %>
-        <a href="<%= user_path(follower)%>" class="follow--container">
-          <user-preview :user="<%= follower.serialize.to_json %>"></user-preview>
-          <span class="follow--description"><%= follower.description %></span>
-        </a>
+        <list-item>
+          <a href="<%= user_path(follower)%>" class="follow--container">
+            <user-preview :user="<%= follower.serialize.to_json %>"></user-preview>
+            <span class="follow--description"><%= follower.description %></span>
+          </a>
+        </list-item>
       <% end %>
     </tab>
     <tab name="<%= @following.size %> Following">
       <% @following.each_with_index do |following_user, index| %>
-        <% if index > 0 %>
-          <div class="horizontal-line"></div>
-        <% end %>
-        <a href="<%= user_path(following_user)%>" class="follow--container">
-          <user-preview :user="<%= following_user.serialize.to_json %>"></user-preview>
-          <span class="follow--description"><%= following_user.description %></span>
-        </a>
+        <list-item>
+          <a href="<%= user_path(following_user)%>" class="follow--container">
+            <user-preview :user="<%= following_user.serialize.to_json %>"></user-preview>
+            <span class="follow--description"><%= following_user.description %></span>
+          </a>
+        </list-item>
       <% end %>
     </tab>
   </tabs>