add valid message to publish pane (#446)

* added valid message

* valid messaging

services/pane.js

@@ -76,6 +76,18 @@ function open(header, innerEl, modifier) {
   return paneWrapper;
 }
 
+/**
+ * create validation messages
+ * note: right now this solely displays valid,
+ * it will display warnings in the future
+ * @returns {Element}
+ */
+function createPublishValidation() {
+  var valid = exports.getTemplate('.publish-valid-template');
+
+  return valid;
+}
+
 /**
  * create messages for the publish pane, depending on the state
  * @param {object} res
@@ -161,7 +173,8 @@ function openPublish() {
     el;
 
   return state.get().then(function (res) {
-    // append message and actions to the doc fragment
+    // append validation, message, and actions to the doc fragment
+    innerEl.appendChild(createPublishValidation());
     innerEl.appendChild(createPublishMessages(res));
     innerEl.appendChild(createPublishActions(res));
 

styleguide/pane.scss

@@ -105,8 +105,8 @@ $easeOutExpo: cubic-bezier(.190, 1.000, .220, 1.000);
 
 .kiln-toolbar-pane .messages {
   p {
-    margin: 0 0 10px;
     color: $black-50;
+    margin: 0 0 10px;
   }
 }
 
@@ -244,3 +244,39 @@ $easeOutExpo: cubic-bezier(.190, 1.000, .220, 1.000);
 .kiln-toolbar-pane .publish-error .description.ayb {
   padding-top: 20px;
 }
+
+/* validation ok */
+
+.kiln-toolbar-pane .publish-valid {
+  align-items: center;
+  display: flex;
+  margin-bottom: 15px;
+  padding-bottom: 30px;
+  position: relative;
+  width: 100%;
+}
+
+.kiln-toolbar-pane .publish-valid:after {
+  border-bottom: 1px solid #f4f4f4;
+  bottom: 0;
+  content: '';
+  left: -20px;
+  position: absolute;
+  width: calc(100% + 40px);
+}
+
+.kiln-toolbar-pane .publish-valid-icon {
+  margin-right: 16px;
+}
+
+.publish-valid-icon svg {
+  display: inline-block;
+  fill: $green;
+  height: 24px;
+  width: 24px;
+}
+
+.publish-valid-message {
+  color: $green;
+  margin: 4px 0; // vertically center with the icon (24px - 16px)
+}

template.nunjucks

@@ -17,23 +17,23 @@
       data-site-assetpath="{{ site.assetPath }}"
       data-components="{{ _components }}">
       <div class="kiln-toolbar-inner">
-        <button class="user-icon">{% include 'public/media/components/clay-kiln/user-icon.svg' ignore missing %}</button>
+        <button class="user-icon">{% include 'public/media/components/clay-kiln/user-icon.svg' %}</button>
         <div class="flex-span"></div>
         <button class="kiln-toolbar-button new">
           <div class="button-flex-inner">{# we need this because firefox cannot make buttons display: flex #}
-            <span class="icon">{% include 'public/media/components/clay-kiln/add-icon.svg' ignore missing %}</span>
+            <span class="icon">{% include 'public/media/components/clay-kiln/add-icon.svg' %}</span>
             <span class="text">Page</span>
           </div>
         </button>
         <button class="kiln-toolbar-button history">
           <div class="button-flex-inner">
-            <span class="icon">{% include 'public/media/components/clay-kiln/history-icon.svg' ignore missing %}</span>
+            <span class="icon">{% include 'public/media/components/clay-kiln/history-icon.svg' %}</span>
             <span class="text">History</span>
           </div>
         </button>
         <button class="kiln-toolbar-button publish">
           <div class="button-flex-inner">
-            <span class="icon">{% include 'public/media/components/clay-kiln/publish-icon.svg' ignore missing %}</span>
+            <span class="icon">{% include 'public/media/components/clay-kiln/publish-icon.svg' %}</span>
             <span class="text">Publish</span>
           </div>
         </button>
@@ -53,13 +53,22 @@
       <div class="kiln-toolbar-pane">
         <header>
           <span class="pane-header"></span>
-          <button class="close">{% include 'public/media/components/clay-kiln/close.svg' ignore missing %}</button>
+          <button class="close">{% include 'public/media/components/clay-kiln/close.svg' %}</button>
         </header>
         <div class="pane-inner"></div>
       </div>
     </div>
   </template>
 
+  {# sub-template: publishing validation #}
+  {# valid message #}
+  <template class="publish-valid-template">
+    <div class="publish-valid">
+      <div class="publish-valid-icon">{% include 'public/media/components/clay-kiln/publish-check.svg' %}</div>
+      <p class="publish-valid-message">Checks pass! This is good to publish.</p>
+    </div>
+  </template>
+
   {# sub-templates: messages #}
   {# publish messages with default text #}
   <template class="publish-messages-template">