Merge branch 'master' of https://github.com/clay/clay-starter into code-component-youtube

Author: jeanrodriguez

.github/PULL_REQUEST_TEMPLATE/Pull_Request_Template.md

@@ -0,0 +1,13 @@
+## What does this PR do?
+
+[Issue/Story](LINK_TO_STORY)
+
+### Why are we doing this? Any context or related work?
+
+#### Where should a reviewer start?
+
+### Manual testing steps?
+
+##### Screenshots
+
+### Additional Context

app/components/article/schema.yaml

@@ -61,6 +61,7 @@ content:
       - image
       - code-sample
       - youtube
+      - list
 
 ledeUrl:
   _label: Lede Image URL

app/components/list/bootstrap.yml

@@ -0,0 +1,5 @@
+_components:
+  list:
+    items: []
+    sass: ''
+    listType: ''

app/components/list/model.js

@@ -0,0 +1,31 @@
+'use strict';
+
+const striptags = require('striptags'),
+  { has, isFieldEmpty } = require('../../services/universal/utils'),
+  { render } = require('../../services/universal/styles'),
+  { toSmartText } = require('../../services/universal/sanitize');
+
+module.exports.save = function (uri, data) {
+  const allowedTags = ['strong', 'em', 's', 'a', 'span'];
+
+  data.listType = data.orderedList ? 'ol' : 'ul';
+
+  if (has(data.items)) {
+    data.items.forEach((item) => {
+      item.text = toSmartText(striptags(item.text, allowedTags));
+    });
+  }
+
+  if (isFieldEmpty(data.sass)) {
+    delete data.css;
+
+    return data;
+  } else {
+    return render(uri, data.sass)
+      .then((css) => {
+        data.css = css;
+
+        return data;
+      });
+  }
+};

app/components/list/schema.yml

@@ -0,0 +1,51 @@
+_description: |
+  A simple and semantic list of text items which can take custom styling.
+
+items:
+  _label: List Items
+  _has:
+    input: complex-list
+    props:
+      - prop: text
+        _label: Text
+        _has:
+          input: wysiwyg
+          styled: true
+          buttons:
+            - bold
+            - italic
+            - strike
+            - link
+          validate:
+            required: true
+
+orderedList:
+  _label: Ordered List
+  _has:
+    input: checkbox
+    help: Select when the list items have a strict order. E.g. ranked items, or steps in a process
+
+customIndicator:
+  _label: Use Custom Indicator
+  _has:
+    input: checkbox
+    help: Use a custom list item indicator instead of the browser's default. This can be targeted in per-instance styles using '&.custom-indicator ul .text-list-item:before'
+
+sass:
+  _label: Custom Styles
+  _has:
+    input: codemirror
+    mode: text/x-scss
+    help: Custom styles for this specific component, can be written in CSS/SASS.
+
+_groups:
+  settings:
+    fields:
+      - items (List Items)
+      - orderedList (Settings)
+      - customIndicator (Settings)
+      - sass (Settings)
+    _placeholder:
+      text: New List
+      height: 30px
+      ifEmpty: items

app/components/list/template.hbs

@@ -0,0 +1,11 @@
+<div data-uri="{{ default _ref _self }}" class="list {{ if customIndicator 'custom-indicator' }}" data-editable="settings">
+  <{{listType}} class="list-items">
+    {{#each items}}
+      <li class="list-item"><span>{{{ text }}}</span></li>
+    {{/each}}
+  </{{listType}}>
+
+  {{#if css}}
+    <style>{{{ css }}}</style>
+  {{/if}}
+</div>

app/package-lock.json

@@ -47,6 +47,8 @@
     "jsonp-client": "^1.1.1",
     "lodash": "^4.17.5",
     "moment": "^2.24.0",
+    "postcss-csso": "^3.0.0",
+    "postcss-safe-parser": "^4.0.1",
     "prismjs": "^1.15.0",
     "speakingurl": "^14.0.1",
     "striptags": "^3.1.1",

app/package.json

@@ -0,0 +1,20 @@
+'use strict';
+
+const postcss = require('postcss'),
+  nested = require('postcss-nested'),
+  safe = require('postcss-safe-parser'),
+  csso = require('postcss-csso'),
+  simpleVars = require('postcss-simple-vars');
+
+/**
+ * render scoped css using postcss
+ * @param {string} uri uri of component
+ * @param {string} styles custom style
+ * @returns {string} css scoped style
+ */
+function render(uri, styles) {
+  return postcss([nested, simpleVars, csso]).process(`[data-uri="${uri}"] { ${styles} }`, { parser: safe })
+    .then((result) => result.css);
+}
+
+module.exports.render = render;

app/services/universal/styles.js

@@ -0,0 +1,57 @@
+@import '_default/common/_vars.css';
+
+$helvetica-full-stack: 16px / 1 Helvetica, sans-serif;
+$custom-indicator-red: #ec2c00;
+
+.list {
+    clear: both;
+    font: $helvetica-full-stack;
+    margin: 15px 0;
+    position: relative;
+
+      & .list-items {
+        counter-reset: listitem;
+        margin: 0;
+      }
+
+      & .list-item {
+        counter-increment: listitem;
+        padding: 0 0 5px;
+      }
+
+      &.custom-indicator {
+        clear: none;
+      }
+
+      &.custom-indicator .list-items {
+        padding: 0;
+      }
+
+      &.custom-indicator .list-item {
+        align-items: baseline;
+        display: flex;
+        list-style-type: none;
+        position: relative;
+      }
+
+      &.custom-indicator .list-item:before {
+        flex: 0 0 auto;
+        margin: 0 12px 0 22px;
+      }
+
+      &.custom-indicator ul .list-item:before {
+        background-color: $custom-indicator-red;
+        border-radius: 50%;
+        content: '';
+        height: 6px;
+        position: relative;
+        top: -3px;
+        width: 6px;
+      }
+
+      &.custom-indicator ol .list-item:before {
+        color: $custom-indicator-red;
+        content: counter(listitem) '.';
+        font-weight: 700;
+      }
+  }

app/styleguides/_default/components/list.css

@@ -38,8 +38,8 @@ $helvetica-stack: Helvetica, sans-serif;
     opacity: 0;
     padding: 2px 0 0 5px;
     position: absolute;
-    transition: opacity 150ms ease;
     -moz-transition: opacity 150ms ease;
     -webkit-transition: opacity 150ms ease;
+    transition: opacity 150ms ease;
   }
 }

app/styleguides/_default/components/subheader.css

@@ -54,7 +54,7 @@ html {
 
   & > .page-header,
   & > .top {
-    margin: 0 auto;
+    margin: 20px auto;
     width: $wrapperMaxWidth;
   }
 
@@ -75,22 +75,28 @@ html {
     & > .bottom,
     & > .wrapper {
       padding: 0 20px;
+      width: 600px;
     }
   }
 }
 
 @media screen and (min-width: 768px) and (max-width: 1179.9px) {
-  .layout > .wrapper,
-  .layout > .bottom {
-    padding: 0 7vw;
-  }
+  .layout{
+    & > .wrapper,
+    & > .bottom {
+      padding: 0 7vw;
+    }
 
-  .layout > .secondary > *:not(.ad) {
-    margin: 0 7vw;
-  }
+    & > .top {
+      margin: 20px 50px;
+    }
 
-  .layout > .wrapper {
-    max-width: 720px;
+    & > .secondary > *:not(.ad) {
+      margin: 0 7vw;
+    }
+    & > .wrapper {
+      min-width: 600px;
+    }
   }
 }