feat(article): add a static article page

- add an article page with dummy data
- add click handlers and state logic for all buttons
- add report modal
- add comment overflow option menu

[Finishes #162380367]

.eslintrc.json

@@ -44,6 +44,13 @@
       "no-underscore-dangle": 0,
       "no-alert": 0,
       "no-lone-blocks": 0,
+      "jsx-a11y/label-has-associated-control": [ 2, {
+        "labelComponents": [],
+        "labelAttributes": [],
+        "controlComponents": [],
+        "depth": 3
+      }],
+      "jsx-a11y/label-has-for": 0,
       "jsx-quotes": 1,
       "react/display-name": [1, { "ignoreTranspilerName": false }],
       "react/forbid-prop-types": [1, { "forbid": ["any"] }],
@@ -53,7 +60,13 @@
       "react/jsx-indent-props": 0,
       "react/jsx-key": 1,
       "react/jsx-max-props-per-line": 0,
-      "react/jsx-no-bind": 1,
+      "react/jsx-no-bind": [ 1, {
+        "ignoreDOMComponents": false,
+        "ignoreRefs": false,
+        "allowArrowFunctions": false,
+        "allowFunctions": false,
+        "allowBind": true
+      }],
       "react/jsx-no-duplicate-props": 1,
       "react/jsx-no-literals": 0,
       "react/jsx-no-undef": 1,

.scss-lint.yml

@@ -139,6 +139,9 @@ linters:
 
   UrlQuotes:
     enabled: true
+
+  VendorPrefix:
+    enabled: false
 
   VendorPrefix:
     enabled: false

mockdata/samplebody.js

@@ -0,0 +1,39 @@
+export const body = 'Ronaldo, 23, has had a formidable year for his club, winning the Premier League and the Champions League, scoring 42 goals in the process. This trophy also completes a clean sweep of individual honours for the man from Madeira."It is an overwhelming moment for me, a very special moment," he said in his emotional acceptance speech at Zurich\'s Opera House last night after being presented the award by Pele. "I would like to say to my mother and my sister: you can set off the fireworks now". I want to thank my friends, my family and my team-mates. This is one of the most important moments in my life. I hope I can come back."';
+
+const comment = 'Lets just say that the text is really long and we are on our way to talk about it but then in the background, "I cant lie, I feel like John Wick with the stick"';
+
+export const articleSample = {
+  id: 1,
+  title: 'Ronaldo crowned world best',
+  category: 'Sport',
+  readTime: 120500,
+  createdAt: '2018-12-09T22:23:56.691Z',
+  imageUrl: 'https://images.unsplash.com/photo-1527871252447-4ce32da643c6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2689&q=80',
+  author: {
+    fullName: 'Habeeb Olawale',
+    avatarUrl: 'https://res.cloudinary.com/vivavalinor/image/upload/v1541446448/nql15siqfajqpsrudk7b.jpg'
+  },
+  comments: [{
+    id: 1,
+    date: '12 November, 2018',
+    body: comment,
+    author: {
+      fullName: 'Chris Akanmu',
+      avatarUrl: 'https://res.cloudinary.com/vivavalinor/image/upload/v1541446448/nql15siqfajqpsrudk7b.jpg'
+    }
+  }, {
+    id: 2,
+    date: '13 November, 2018',
+    body: comment,
+    author: {
+      fullName: 'Abiodun Abudu',
+      avatarUrl: 'https://res.cloudinary.com/vivavalinor/image/upload/v1541446448/nql15siqfajqpsrudk7b.jpg'
+    }
+  }]
+};
+
+export const sampleReportTypes = [
+  { id: 1, value: 'Plagiarism' },
+  { id: 2, value: 'Hate Speech' },
+  { id: 3, value: 'Rules Violation' }
+];