#288 Replace <ArticleItem> with more reusable card components
List items part of the 2nd planned PR for <https://g0v.hackmd.io/h8rP0TOGTh2Clxi_Oi_QKw?view|`ArticleListPage` component revamp> <https://github.com/cofacts/rumors-site/issues/286|#286> .
Originally, `<ArticleItem>` component is shared across all list pages including `/articles` , `/hoax-for-you`, `/replies` and `/search`; however, in each of these lists, the item looks different in mockup (see below).
Original implementation adds a lot of props to `<ArticleItem>` and is not accurately reflecting to all these different visuals. This PR replaces monolithic `<ArticleItem>` with atomic, reusable components of these components.
*Spec in Figma*
*In <https://www.figma.com/file/zpD45j8nqDB2XfA6m2QskO/Cofacts-website?node-id=428%3A37|`/articles`>, <https://www.figma.com/file/zpD45j8nqDB2XfA6m2QskO/Cofacts-website?node-id=428%3A37|`/hoax-for-you`> and <https://www.figma.com/file/zpD45j8nqDB2XfA6m2QskO/Cofacts-website?node-id=585%3A273|searching articles in `/search`>*
<https://user-images.githubusercontent.com/108608/92329007-38afe180-f097-11ea-81f4-8367c7a850e4.png|image>
*In <https://www.figma.com/file/zpD45j8nqDB2XfA6m2QskO/Cofacts-website?node-id=79%3A9|`/replies`>*
<https://user-images.githubusercontent.com/108608/92329021-511ffc00-f097-11ea-8068-fb13aa4c409c.png|image>
*<https://www.figma.com/file/zpD45j8nqDB2XfA6m2QskO/Cofacts-website?node-id=432%3A2727|Searching replies in `/replies`>*
<https://user-images.githubusercontent.com/108608/92329078-bd9afb00-f097-11ea-9580-a567d1b11b68.png|image>
*<https://www.figma.com/file/zpD45j8nqDB2XfA6m2QskO/Cofacts-website?node-id=585%3A524|The "articles also used this reply" dialog>*
<https://user-images.githubusercontent.com/108608/92329092-cbe91700-f097-11ea-9b62-a6317d47879b.png|image>
*Refactor*
• decompose `components/ListPageDisplays/ArticleItem` into `ListPageCards`, `ListPageCard` and original `ReplyItem`
• `ListPageCards`: the list container for all card items
• `ListPageCard`: basic card look, with RWD paddings matching the mockup
<https://user-images.githubusercontent.com/108608/92329404-dc01f600-f099-11ea-89b0-10cf0d97ec75.png|image>
• `ArticleCard`: the article card shared across `/articles`, `/hoax-for-you` and `/search`, built upon `ListPageCard`
<https://user-images.githubusercontent.com/108608/92329418-ef14c600-f099-11ea-83df-2f06fb875a88.png|image>
• `ReplyItem`: article reply item within each article card in `/replies` page. This component already exists, but its props are simplified in this PR.
<https://user-images.githubusercontent.com/108608/92329441-0ce22b00-f09a-11ea-89cf-621c42f7d041.png|image>
• adding `page` prop to `ArticlePageLayout`
• The ultimate goal is to split `ArticlePageLayout` into each page components like `/articles`, `/hoax-for-you` and `/search`
• However, this PR has already collected too much changes, removing `ArticlePageLayout` in this PR will be very difficult to review.
• Therefore I added `page` prop to differentiate pages in `ArticlePageLayout`. This will help us splitting logic into respective pages in the future PR.
• Introduce `<ReplyCountInfo>` for reply info with reply stats
• It's only used in 2 places. However its calculation is a bit complicated, thus we are turning it into a component.
*Others*
• Lists 25 items per page (fixes <https://github.com/cofacts/rumors-site/issues/307|#307>)