From 2e6de8b2e57db0c22acd7166588e4f675ef5c8a1 Mon Sep 17 00:00:00 2001
From: Aaron D Borden <adborden@a14n.net>
Date: Fri, 10 Feb 2017 17:13:12 -0800
Subject: [PATCH] Update docs for status-pill and activity log

---
 .../components/status-pill/README.md          | 23 ++++++++---
 .../status-pill/status-pill.config.yml        |  3 --
 .../components/status-pill/status-pill.html   |  9 +++--
 .../features/activity-log/README.md           |  5 +++
 .../activity-log/activity-log.config.yml      |  2 +
 .../features/activity-log/activity-log.html   | 40 +++++++++++++++++++
 6 files changed, 70 insertions(+), 12 deletions(-)
 create mode 100644 docs/src/components/features/activity-log/README.md
 create mode 100644 docs/src/components/features/activity-log/activity-log.config.yml
 create mode 100644 docs/src/components/features/activity-log/activity-log.html

diff --git a/docs/src/components/components/status-pill/README.md b/docs/src/components/components/status-pill/README.md
index 817b2078..ebefb440 100644
--- a/docs/src/components/components/status-pill/README.md
+++ b/docs/src/components/components/status-pill/README.md
@@ -6,11 +6,24 @@ The **status pill** component is a way to communicate status of various applicat
 ## Use
 
 To use the **status pill** component, use the @extend `.status-pill` within the SCSS.
-```
-.activity_log-item-error,
-.activity_log-item-success,
-.activity_log-item-warning {
 
+```scss
+.stat-error,
+.stat-warning {
   &::before {
     @extend .status-pill;
-  }```
+  }
+}
+
+.stat-error {
+  &::before {
+    border-color: $color-error;
+  }
+}
+
+.stat-warning {
+  &::before {
+    border-color: $color-warning;
+  }
+}
+```
diff --git a/docs/src/components/components/status-pill/status-pill.config.yml b/docs/src/components/components/status-pill/status-pill.config.yml
index 9599e2c1..415b42e5 100644
--- a/docs/src/components/components/status-pill/status-pill.config.yml
+++ b/docs/src/components/components/status-pill/status-pill.config.yml
@@ -7,14 +7,11 @@ variants:
     context:
       text: "success"
       modifier: success
-      patternbreak: "<br/>"
   - name: warning
     context:
       text: "warning"
       modifier: warning
-      patternbreak: "<br/>"
   - name: error
     context:
       text: "error"
       modifier: error
-      patternbreak: "<br/>"
diff --git a/docs/src/components/components/status-pill/status-pill.html b/docs/src/components/components/status-pill/status-pill.html
index f886e86d..221ea370 100644
--- a/docs/src/components/components/status-pill/status-pill.html
+++ b/docs/src/components/components/status-pill/status-pill.html
@@ -1,4 +1,5 @@
-
-<span class="stat stat-{{ modifier }}">usage {{ text }}</span>{{ patternbreak }}
-
-<div class="activity_log-item activity_log-item-{{ modifier }}">activity log {{ text }}</div>{{ patternbreak }}
+<div class="stat stat-{{ modifier }}">
+  <h2 class="stat-header">Instance memory used</h2>
+  <span class="stat-primary">10 MB</span>
+  <span class="stat-info"><span>460 KB available</span></span>
+</div>
diff --git a/docs/src/components/features/activity-log/README.md b/docs/src/components/features/activity-log/README.md
new file mode 100644
index 00000000..9fc4bf9e
--- /dev/null
+++ b/docs/src/components/features/activity-log/README.md
@@ -0,0 +1,5 @@
+# Activity Log
+
+The activity log shows recent logs and events for a particular entity.
+
+The log lines can be expandable to show more detail.
diff --git a/docs/src/components/features/activity-log/activity-log.config.yml b/docs/src/components/features/activity-log/activity-log.config.yml
new file mode 100644
index 00000000..a4f9601d
--- /dev/null
+++ b/docs/src/components/features/activity-log/activity-log.config.yml
@@ -0,0 +1,2 @@
+title: Activity Log
+status: beta
diff --git a/docs/src/components/features/activity-log/activity-log.html b/docs/src/components/features/activity-log/activity-log.html
new file mode 100644
index 00000000..b42beb59
--- /dev/null
+++ b/docs/src/components/features/activity-log/activity-log.html
@@ -0,0 +1,40 @@
+<ul class="activity_log">
+  <li class="activity_log-item activity_log-item-warning">
+    <div class="activity_log-item_line">
+      <div class="elastic_line">
+	<div class="elastic_line-item elastic_line-item-start">
+	  <span class="activity_log-item_text"><span>user.ian updated the app.</span></span>
+	</div>
+	<div class="elastic_line-item elastic_line-item-end">
+	  <span class="activity_log-item_timestamp">Feb 10 2017 12:58:43 PST</span>
+	</div>
+      </div>
+    </div>
+  </li>
+  <li class="activity_log-item activity_log-item-error">
+    <div class="activity_log-item_line">
+      <div class="elastic_line">
+	<div class="elastic_line-item elastic_line-item-start">
+	  <span class="activity_log-item_text"><span>The app has crased because it failed to start.</span></span>
+	</div>
+	<div class="elastic_line-item elastic_line-item-end">
+	  <span class="activity_log-item_timestamp">Feb 10 2017 12:58:43 PST</span>
+	</div>
+      </div>
+    </div>
+  </li>
+  <li class="activity_log-item">
+    <div class="activity_log-item_line">
+      <div class="elastic_line">
+        <div class="elastic_line-item elastic_line-item-start">
+          <span class="activity_log-item_text">
+            <span>user.ian mapped <a href="//node-app.apps.cloud.gov">node-app.apps.cloud.gov</a> to the app.</span>
+          </span>
+        </div>
+        <div class="elastic_line-item elastic_line-item-end">
+          <span class="activity_log-item_timestamp">Jan 30 2017 13:56:44 PST</span>
+        </div>
+      </div>
+    </div>
+  </li>
+</ul>