clay · jeanrodriguez · Mar 19, 2019
diff --git a/app/components/content-feed/bootstrap.yml b/app/components/content-feed/bootstrap.yml
@@ -0,0 +1,7 @@
+_components:
+  content-feed:
+    showTimestamp: true
+    showByLine: true
+    feedColumn: ''
+    titleAlignment: ''
+    feedTitle: ''
diff --git a/app/components/content-feed/model.js b/app/components/content-feed/model.js
@@ -0,0 +1,13 @@
+'use strict';
+
+/**
+ * @todo remove data.articles after https://github.com/clay/clay-starter/issues/25
+ */
+module.exports.render = (uri, data) => {
+  data.articles = [{},{},{}];
+  return data;
+};
+
+module.exports.save = (ref, data) => {
+  return data;
+};
diff --git a/app/components/content-feed/schema.yml b/app/components/content-feed/schema.yml
@@ -0,0 +1,45 @@
+_description: |
+  A feed which shows most recent articles
+
+feedTitle:
+  _label: Feed Title
+  _has:
+    input: text
+
+titleAlignment:
+  _label: Title Text Alignment
+  _has:
+    input: radio
+    options:
+      - name: 'Left'
+        value: 'text-left'
+      - name: 'Center'
+        value: 'text-center'
+      - name: 'Right'
+        value: 'text-right'
+
+size:
+  _label: Size
+  _has:
+    input: text
+    type: number
+    help: This determines how many articles display per pages
+
+showByLine:
+  _label: Show ByLine?
+  _has:
+    input: checkbox
+
+showTimestamp:
+  _label: Show Timestamp?
+  _has:
+    input: checkbox
+
+_groups:
+  settings:
+    fields:
+      - feedTitle (Display)
+      - titleAlignment (Display)
+      - size (Display)
+      - showByLine (Display)
+      - showTimestamp (Display)
diff --git a/app/components/content-feed/template.hbs b/app/components/content-feed/template.hbs
@@ -0,0 +1,36 @@
+<section class="content-feed {{ componentVariation }}" data-uri="{{default _ref _self}}" data-track-type="article-list">
+  {{#if feedTitle}}
+    <h2 class="content-feed-heading {{ titleAlignment }}">{{ feedTitle }}</h2>
+  {{/if}}
+  <ol class="content-feed-list-wrapper grid-container">
+    {{~#each articles as |article|~}}
+      <li class="article-item grid-item">
+        <div class="article-item-wrap">
+          <div class="article-item-img-wrapper">
+            <picture>
+              <img class="article-item-img" alt="">
+            </picture>
+          </div>
+          {{#if ../showTimestamp}}
+            <div class="timestamp">
+              <time class="paginate-time">00/00/2019</time>
+            </div>
+          {{/if}}
+            <div class="main-article-content">
+              <a href="#article.canonicalUrl" class="link-text">
+                <span class="headline">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+              </a>
+            </div>
+          {{#if ../showByLine}}
+            <div class="byline">
+              By Authors
+            </div>
+          {{/if}}
+        </div>
+      </li>
+    {{~/each~}}
+  </ol>
+
+  <a href="?start=start" class="more-stories-button">More Stories</a>
+
+</section>
diff --git a/app/layouts/layout/schema.yml b/app/layouts/layout/schema.yml
@@ -33,6 +33,7 @@ main:
     page: true
     include:
       - article
+      - content-feed
 primary:
   _componentList:
     include: []

diff --git a/app/styleguides/_default/common/_vars.css b/app/styleguides/_default/common/_vars.css
@@ -3,7 +3,7 @@
 $serif-stack: Georgia, serif;
 $sans-serif-stack: Grotesk, sans-serif;
 $sans-serif-narrow-stack: GroteskNarrow, sans-serif;
-
+$helvetica-stack: Helvetica, sans-serif;
 
 /* Colors */
 
@@ -23,3 +23,7 @@ $wrapperMaxWidth: 600px;
 $sm: 768px;
 $md: 992px;
 $lg: 1180px;
+$min-sm: 320px;
+$max-sm: 480px;
+$min-md: 768px;
+$max-md: 1024px;
diff --git a/app/styleguides/_default/components/article.css b/app/styleguides/_default/components/article.css
@@ -10,7 +10,8 @@ $body-stack: Helvetica, serif;
 
 .article {
   counter-reset: annotated;
-  margin: 20px 0 0;
+  margin: 0 auto;
+  width: 600px;
 
   .article-header {
     margin: 0 0 20px;
@@ -110,6 +111,8 @@ $body-stack: Helvetica, serif;
 
 @media screen and (max-width: 767.9px) {
   .article {
+    width: auto;
+
     .lede-image-wrapper {
       margin: 0 0 24px;
     }
@@ -118,7 +121,6 @@ $body-stack: Helvetica, serif;
 
 @media screen and (min-width: 1180px) {
   .article {
-    margin: 0;
 
     .lede-wrapper {
       align-items: stretch;

diff --git a/app/styleguides/_default/components/content-feed.css b/app/styleguides/_default/components/content-feed.css
@@ -0,0 +1,196 @@
+@import "_default/common/_vars.css";
+
+$light-gray: #dbdbdb;
+$grey: #4a4a4a;
+$blue: #00bcf1;
+$byline-font: 14px/1.06 $helvetica-stack;
+$content-font: 31px/1.1 $helvetica-stack;
+$content-small-font: 21px/1.14 $helvetica-stack;
+$content-tablet-font: 26px/1.12 $helvetica-stack;
+$content-phone-font: 21px/1.12 $helvetica-stack;
+$timestamp-font: 12px/2 $helvetica-stack;
+$heading-font: bold 31px $helvetica-stack;
+$more-stories-button-font: bold 17px $helvetica-stack;
+
+.content-feed {
+  margin: 0 auto;
+  padding-top: 20px;
+  width: $lg;
+
+  .content-feed-list-wrapper {
+    padding: 0;
+  }
+
+  .content-feed-heading {
+    font: $heading-font;
+    letter-spacing: 3px;
+  }
+
+  & .content-feed-list-wrapper {
+    list-style-type: none;
+    margin: 0 0 40px;
+    padding: 0;
+  }
+
+  & .article-item {
+    border-bottom: 1px solid $light-gray;
+    display: flex;
+  }
+
+  & .timestamp {
+    color: $grey;
+    display: block;
+    font: $timestamp-font;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+  }
+
+  & .main-article-content {
+    font: $content-font;
+    margin: 5px 0 0;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+  }
+
+  & .link-text {
+    color: $black;
+    text-decoration: none;
+  }
+
+  & .link-text:after {
+    bottom: 0;
+    content: "";
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  & .link-text:focus {
+    outline: 0;
+  }
+
+  & .headline {
+    font-family: Georgia, serif;
+    font-weight: 700;
+  }
+
+  & .byline {
+    font: $byline-font;
+    letter-spacing: 0.08px;
+    margin: 6px 0 0;
+  }
+
+  & .article-item-img-wrapper {
+    float: right;
+    margin: 10px 0;
+  }
+
+  & .article-item-img {
+    background-color: $light-gray;
+    height: 146px;
+    width: 220px;
+  }
+
+  & .more-stories-button {
+    border: 1px solid $black;
+    border-radius: 3px;
+    color: $black;
+    display: block;
+    font: $more-stories-button-font;
+    height: 44px;
+    margin: 40px auto;
+    padding: 10px 0;
+    text-align: center;
+    text-decoration: none;
+    width: 320px;
+  }
+
+  & .more-stories-button:focus,
+  & .more-stories-button:hover {
+    color: $blue;
+  }
+
+  .text-center {
+    text-align: center;
+  }
+
+  .text-left {
+    text-align: left;
+  }
+
+  .text-right {
+    text-align: right;
+  }
+
+  .grid-container {
+    display: grid;
+    grid-gap: 5px;
+    grid-template-columns: auto;
+  }
+
+  .grid-item {
+    padding: 15px 0;
+  }
+
+  & .article-item-wrap {
+    color: $black;
+    margin: 20px 0;
+  }
+}
+
+@media (min-width: $min-sm) and (max-width: $max-sm) {
+  .content-feed {
+    width: 100%;
+
+    & .main-article-content {
+      font: $content-phone-font;
+      letter-spacing: 0.15px;
+      margin: 6px 0 0;
+    }
+    .grid-container {
+      grid-gap: 0;
+    }
+
+    .grid-item {
+      padding: 0;
+    }
+
+    .content-feed-heading {
+      text-align: center;
+    }
+
+    .article-item:first-of-type {
+      margin: 0;
+    }
+
+    & .article-item-img {
+      background-color: $light-gray;
+      height: 100px;
+      width: 100px;
+    }
+
+    & .more-stories-button {
+      width: auto;
+    }
+  }
+}
+
+@media (min-width: $min-md) and (max-width: $max-md) {
+  .content-feed {
+    width: 100%;
+
+    & .timestamp {
+      display: inline-block;
+      font: $timestamp-font;
+      letter-spacing: 1.8px;
+    }
+
+    & .main-article-content {
+      font: $content-tablet-font;
+      letter-spacing: 0.12px;
+      margin: 6px 0 0;
+    }
+
+  }
+}