Add first version of roadmap

app/javascript/components/Roadmap/PostList.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+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>;
+}
+
+const PostList = ({ posts, boards }: Props) => (
+  <div className="postList">
+    {posts.map((post, i) => (
+      <PostListItem
+        title={post.title}
+        boardName={boards.find(board => board.id === post.board_id).name}
+
+        key={i}
+      />
+    ))}
+  </div>
+);
+
+export default PostList;

app/javascript/components/Roadmap/PostListByPostStatus.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+import PostList from './PostList';
+
+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>;
+  boards: Array<IBoard>;
+}
+
+const PostListByPostStatus = ({ postStatus, posts, boards }: Props) => (
+  <div className="roadmapColumn" style={{borderColor: postStatus.color}}>
+    <div className="columnHeader" style={{borderBottomColor: postStatus.color}}>
+      <div className="dot" style={{backgroundColor: postStatus.color}}></div>
+      <div className="columnTitle">{postStatus.name}</div>
+    </div>
+    <div className="scrollContainer">
+      <PostList
+        posts={posts}
+        boards={boards}
+      />
+    </div>
+  </div>
+);
+
+export default PostListByPostStatus;

app/javascript/components/Roadmap/PostListItem.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+import '../../stylesheets/components/Roadmap/PostListItem.scss';
+
+interface Props {
+  title: string;
+  boardName: string;
+}
+
+const PostListItem = ({title, boardName}: Props) => (
+  <a href="#" className="postLink">
+    <div className="postListItem">
+      <div className="postTitle">{title}</div>
+      <div className="postBoard">{boardName}</div>
+    </div>
+  </a>
+);
+
+export default PostListItem;

app/javascript/components/Roadmap/Roadmap.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+import PostListByPostStatus from './PostListByPostStatus';
+
+import IPostStatus from '../../interfaces/IPostStatus';
+import IPost from '../../interfaces/IPost';
+import IBoard from '../../interfaces/IBoard';
+
+import '../../stylesheets/components/Roadmap/Roadmap.scss';
+
+interface Props {
+  postStatuses: Array<IPostStatus>;
+  posts: Array<IPost>;
+  boards: Array<IBoard>;
+}
+
+class Roadmap extends React.Component<Props> {
+  render () {
+    const { postStatuses, posts, boards } = this.props;
+
+    return (
+      <div className="roadmapColumns">
+        {postStatuses.map((postStatus, i) => (
+          <PostListByPostStatus
+            postStatus={postStatus}
+            posts={posts.filter(post => post.post_status_id === postStatus.id)}
+            boards={boards}
+
+            key={i}
+          />
+        ))}
+      </div>
+    );
+  }
+}
+
+export default Roadmap;