Refactor stylesheets

app/javascript/components/Board/index.tsx

@@ -5,7 +5,7 @@ import PostList from './PostList';
 
 import IBoard from '../../interfaces/IBoard';
 
-import '../../stylesheets/components/Board/Board.scss';
+import '../../stylesheets/components/Board.scss';
 
 interface Props {
   board: IBoard;

app/javascript/components/Roadmap/PostList.tsx

@@ -5,8 +5,6 @@ import PostListItem from './PostListItem';
 import IPost from '../../interfaces/IPost';
 import IBoard from '../../interfaces/IBoard';
 
-import '../../stylesheets/components/Roadmap/PostList.scss';
-
 interface Props {
   posts: Array<IPost>;
   boards: Array<IBoard>;

app/javascript/components/Roadmap/PostListByPostStatus.tsx

@@ -6,8 +6,6 @@ import IPostStatus from '../../interfaces/IPostStatus';
 import IPost from '../../interfaces/IPost';
 import IBoard from '../../interfaces/IBoard';
 
-import '../../stylesheets/components/Roadmap/PostListByPostStatus.scss';
-
 interface Props {
   postStatus: IPostStatus;
   posts: Array<IPost>;

app/javascript/components/Roadmap/PostListItem.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
 
-import '../../stylesheets/components/Roadmap/PostListItem.scss';
-
 interface Props {
   title: string;
   boardName: string;

app/javascript/components/Roadmap/index.tsx

@@ -6,7 +6,7 @@ import IPostStatus from '../../interfaces/IPostStatus';
 import IPost from '../../interfaces/IPost';
 import IBoard from '../../interfaces/IBoard';
 
-import '../../stylesheets/components/Roadmap/Roadmap.scss';
+import '../../stylesheets/components/Roadmap.scss';
 
 interface Props {
   postStatuses: Array<IPostStatus>;

app/javascript/stylesheets/components/Board.scss

@@ -73,6 +73,7 @@
     .postLink {
       text-decoration: none;
       border-radius: 4px;
+      margin: 8px 0;
     }
     
     .postLink:hover {
@@ -86,46 +87,46 @@
       justify-content: space-between;
     
       height: 114px;
-      margin: 4px 0;
+      margin: 0;
       padding: 8px 4px;
-    }
+      
+      .postTitle {
+        color: black;
+        font-weight: 500;
+        font-size: 17px;
+      }
+      
+      .postDescription {
+        color: grey;
+        font-weight: 400;
+        font-size: 15px;
+      }
+      
+      .postDetails {
+        display: flex;
+      
+        color: black;
+        font-size: 16px;
+        text-transform: uppercase;
+        
+        .postDetailsComments {
+          margin-right: 16px;
+        }
+        
+        .postDetailsStatus {
+          display: flex;
+        }
+  
+        .dot {
+          width: 16px;
+          height: 16px;
+          border-radius: 100%;
     
-    .postTitle {
+          margin-top: auto;
-      color: black;
+          margin-bottom: auto;
-      font-weight: 500;
+          margin-right: 4px;
-      font-size: 18px;
+        }
-    }
+      }
-    
-    .postDescription {
-      color: grey;
-      font-weight: 400;
-      font-size: 15px;
-    }
-    
-    .postDetails {
-      display: flex;
-    
-      color: black;
-      font-size: 16px;
-      text-transform: uppercase;
-    }
-    
-    .postDetailsComments {
-      margin-right: 16px;
-    }
-    
-    .postDetailsStatus {
-      display: flex;
-    }
-    
-    .dot {
-      width: 16px;
-      height: 16px;
-      border-radius: 100%;
-
-      margin-top: auto;
-      margin-bottom: auto;
-      margin-right: 4px;
     }
   }
 }

app/javascript/stylesheets/components/Roadmap.scss

@@ -0,0 +1,87 @@
+.roadmapColumns {
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: wrap;
+
+  @media (max-width: 800px) {
+    .roadmapColumn {
+      width: 100%;
+    }
+  }
+  
+  @media (min-width: 801px) {
+    .roadmapColumn {
+      width: 32%;
+    }
+  }
+  
+  .roadmapColumn {
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 4px;
+  
+    margin: 8px 0;
+    padding: 8px;
+
+    .columnHeader {
+      display: flex;
+      align-items: center;
+    
+      padding-bottom: 4px;
+      border-bottom-style: solid;
+      border-bottom-width: 1px;
+      margin-bottom: 8px;
+    }
+    
+    .dot {
+      width: 16px;
+      height: 16px;
+      border-radius: 100%;
+    }
+    
+    .columnTitle {
+      margin: 0 8px;
+      font-weight: 700;
+    }
+    
+    .scrollContainer {
+      overflow-y: auto;
+      max-height: 350px;
+
+      .postList {
+        display: flex;
+        flex-direction: column;
+
+        .postLink {
+          text-decoration: none;
+          border-radius: 4px;
+        }
+        
+        .postLink:hover {
+          text-decoration: none;
+          background-color: #f5f5f5;
+        }
+        
+        .postListItem {
+          margin: 4px 0;
+          padding: 8px 4px;
+        }
+        
+        .postTitle {
+          color: black;
+          font-weight: 500;
+          font-size: 17px;
+        }
+        
+        .postBoard {
+          color: grey;
+          font-weight: 400;
+          font-size: 14px;
+          text-transform: uppercase;
+        }
+      }
+    }
+  }
+}

app/javascript/stylesheets/components/Roadmap/PostList.scss

@@ -1,4 +0,0 @@
-.postList {
-  display: flex;
-  flex-direction: column;
-}

app/javascript/stylesheets/components/Roadmap/PostListByPostStatus.scss

@@ -1,46 +0,0 @@
-@media (max-width: 800px) {
-  .roadmapColumn {
-    width: 100%;
-  }
-}
-
-@media (min-width: 801px) {
-  .roadmapColumn {
-    width: 32%;
-  }
-}
-
-.roadmapColumn {
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 4px;
-
-  margin: 8px 0;
-  padding: 8px;
-}
-
-.columnHeader {
-  display: flex;
-  align-items: center;
-
-  padding-bottom: 4px;
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  margin-bottom: 8px;
-}
-
-.dot {
-  width: 16px;
-  height: 16px;
-  border-radius: 100%;
-}
-
-.columnTitle {
-  margin: 0 8px;
-  font-weight: 700;
-}
-
-.scrollContainer {
-  overflow-y: auto;
-  max-height: 350px;
-}

app/javascript/stylesheets/components/Roadmap/PostListItem.scss

@@ -1,26 +0,0 @@
-.postLink {
-  text-decoration: none;
-  border-radius: 4px;
-}
-
-.postLink:hover {
-  text-decoration: none;
-  background-color: #f5f5f5;
-}
-
-.postListItem {
-  margin: 4px 0;
-  padding: 8px 4px;
-}
-
-.postTitle {
-  color: black;
-  font-weight: 500;
-  font-size: 17px;
-}
-
-.postBoard {
-  color: grey;
-  font-weight: 400;
-  font-size: 14px;
-}

app/javascript/stylesheets/components/Roadmap/Roadmap.scss

@@ -1,7 +0,0 @@
-.roadmapColumns {
-  display: flex;
-  flex: 1 1 auto;
-  justify-content: space-between;
-  align-items: flex-start;
-  flex-wrap: wrap;
-}

app/views/boards/show.html.erb

@@ -1,6 +1,6 @@
 <%=
   react_component(
-    'Board/Board',
+    'Board',
     {
       board: @board,
       isLoggedIn: user_signed_in?,

app/views/static_pages/roadmap.html.erb

@@ -2,7 +2,7 @@
 
 <%=
   react_component(
-    'Roadmap/Roadmap',
+    'Roadmap',
     {
       postStatuses: @post_statuses,
       posts: @posts,

spec/helpers/posts_helper_spec.rb

@@ -1,15 +0,0 @@
-require 'rails_helper'
-
-# Specs in this file have access to a helper object that includes
-# the PostsHelper. For example:
-#
-# describe PostsHelper do
-#   describe "string concat" do
-#     it "concats two strings with spaces" do
-#       expect(helper.concat_strings("this","that")).to eq("this that")
-#     end
-#   end
-# end
-RSpec.describe PostsHelper, type: :helper do
-  pending "add some examples to (or delete) #{__FILE__}"
-end

spec/system/roadmap_spec.rb

@@ -46,9 +46,9 @@ feature 'roadmap', type: :system, js: true do
     within roadmap_columns do
       expect(page).to have_selector(roadmap_column, count: 2)
       expect(page).to have_selector(column_header, count: 2)
-      expect(page).to have_content(post_status_1.name)
+      expect(page).to have_content(/#{post_status_1.name}/i)
-      expect(page).to have_content(post_status_2.name)
+      expect(page).to have_content(/#{post_status_2.name}/i)
-      expect(page).not_to have_content(post_status_3.name)
+      expect(page).not_to have_content(/#{post_status_3.name}/i)
     end
   end
 
@@ -57,9 +57,9 @@ feature 'roadmap', type: :system, js: true do
 
     within roadmap_columns do
       expect(page).to have_selector(post_link, count: 2)
-      expect(page).to have_content(post1.title)
+      expect(page).to have_content(/#{post1.title}/)
-      expect(page).to have_content(post2.title)
+      expect(page).to have_content(/#{post2.title}/)
-      expect(page).not_to have_content(post3.title)
+      expect(page).not_to have_content(/#{post3.title}/)
     end
   end
 
@@ -67,9 +67,9 @@ feature 'roadmap', type: :system, js: true do
     visit root_path
 
     within roadmap_columns do
-      expect(page).to have_content(post1.board.name)
+      expect(page).to have_content(/#{post1.board.name}/i)
-      expect(page).to have_content(post2.board.name)
+      expect(page).to have_content(/#{post2.board.name}/i)
-      expect(page).not_to have_content(post3.board.name)
+      expect(page).not_to have_content(/#{post3.board.name}/i)
     end
   end
 end