Update docs for status-pill and activity log

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;
+  }
+}
+```

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/>"

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>

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.

docs/src/components/features/activity-log/activity-log.config.yml

@@ -0,0 +1,2 @@
+title: Activity Log
+status: beta

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>