Merge pull request #555 from ineedsubstance/component/dashboard/my-la…

…test

New component for My Latest content

content-types/services.yml

@@ -50,4 +50,3 @@ attributes:
   - type: quote
     id: service-quote
     name: Service Quote
-

lib/routes/data/styles.js

@@ -0,0 +1,66 @@
+'use strict';
+
+/*
+ * Sample Data for Styles Route
+ *
+ * @returns {object} - Object containing sample data to use when rendering samples in the Style Guide
+ */
+
+module.exports = {
+  tableData: {
+    name: 'My Latest',
+    headers: [
+      'content',
+      'last edited',
+      'actions',
+      ' ',
+    ],
+    body: [
+      [
+        'Conversation API',
+        'Tue Nov 15 2016 11:09:03 GMT+0000 (UTC)',
+        {
+          url: '/edit',
+          title: 'Edit Latest Revision',
+        },
+        'Draft',
+      ],
+      [
+        'Conversation Overview',
+        'Mon Nov 14 2016 03:22:12 GMT+0000 (UTC)',
+        {
+          url: '/edit',
+          title: 'Edit Latest Revision',
+        },
+        'Draft',
+      ],
+      [
+        'Python SDK',
+        'Fri Nov 11 2016 12:12:01 GMT+0000 (UTC)',
+        {
+          url: '/edit',
+          title: 'Edit Latest Revision',
+        },
+        'Draft',
+      ],
+      [
+        'News Intelligence',
+        'Wed Oct 26 2016 11:31:26 GMT+0000 (UTC)',
+        {
+          url: '/edit',
+          title: 'Edit Latest Revision',
+        },
+        'Approved',
+      ],
+      [
+        'Cognitive Head Hunter',
+        'Wed Oct 26 2016 18:42:40 GMT+0000 (UTC)',
+        {
+          url: '/edit',
+          title: 'Edit Latest Revision',
+        },
+        'Needs Approval',
+      ],
+    ],
+  },
+};

lib/routes/styles.js

@@ -7,6 +7,7 @@
  * @param {object} application - Express Application
  * @returns {object} - Configured Express Application
  */
+const data = require('./data/styles');
 const styles = application => {
   return new Promise(resolve => {
     const app = application;
@@ -17,7 +18,7 @@ const styles = application => {
      * @name /
      */
     app.get('/styles', (req, res) => {
-      res.render('styles', { pageTitle: 'Styles Page' });
+      res.render('styles', data);
     });
 
     resolve(app);

src/sass/_punchcard.scss

@@ -34,4 +34,5 @@
 // LAYOUTS
 @import 'partials/layouts/header';
 @import 'partials/layouts/login';
+@import 'partials/layouts/style-guide';
 //////////////////////////////

src/sass/partials/base/_base.scss

@@ -92,10 +92,9 @@
   }
 
   &--caption {
-    color: color('gray', 50);
-    font-size: .8em;
-    padding: 0 0 setting-get('rhythm') / 2;
-    text-align: right;
+    @include h1;
+    margin: 0 0 setting-get('rhythm') / .5 0;
+    text-align: left;
   }
 
   &--thead {

src/sass/partials/layouts/_style-guide.scss

@@ -0,0 +1,12 @@
+._style-guide {
+  @include wrapper;
+
+  &--title {
+    @include h2;
+    border-bottom: 2px solid color('grey', 20);
+  }
+
+  &--group {
+    margin-bottom: setting-get('rhythm times four');
+  }
+}

views/components/table.html

@@ -0,0 +1,24 @@
+{% macro table(data) %}
+<table class="base--table">
+  {% if data.name %}
+  <caption class="base--caption">{{data.name}}</caption>
+  {% endif %}
+  <thead class="base--thead">
+    <tr class="base--tr">
+      {% for header in data.headers %}
+      <th class="base--th">{{header}}</th>
+      {% endfor %}
+    </tr>
+  </thead>
+  <tbody class="base--tbody">
+    {% for rows in data.body %}
+    <tr class="base--tr">
+      {% for header in data.headers %}
+      {% set row = rows[loop.index0] %}
+      <td data-th="{{header}}" class="base--td">{% if row.url and row.title %}<a href="{{row.url}}" class="base--link">{{row.title}}</a>{% else %}{{row}}{% endif %}</td>
+      {% endfor %}
+    </tr>
+    {% endfor %}
+  </tbody>
+</table>
+{% endmacro %}

views/styles.html

@@ -1,12 +1,8 @@
 {% extends "_donut.html" %}
 
-{% block pageTitle %}{{pageTitle}}{% endblock %}
-
-{% block pageHead %}
-  {{ super() }}
-{% endblock %}
-
 {% block main %}
+<div class="_style-guide">
+
   <section class="base--section">
     <header class="base--header">
       <h1 class="base--h1">Text</h1>
@@ -331,5 +327,12 @@ <h1 class="base--h2">Form elements</h1>
       </div>
     </form>
   </section>
-</main>
+
+  <section class="_style-guide--group">
+    <h2 class="_style-guide--title">Tabular Data</h2>
+    {% from "components/table.html" import table %}
+    {{table(tableData)}}
+  </section>
+
+</div>
 {% endblock %}