Added UI principles.

app/assets/javascripts/app/controllers/layout_ref.coffee

@@ -2193,6 +2193,16 @@ class TwitterConversationRef extends App.ControllerContent
 
 App.Config.set( 'layout_ref/twitter_conversation', TwitterConversationRef, 'Routes' )
 
+class UI extends App.ControllerContent
+  constructor: ->
+    super
+    @render()
+
+  render: ->
+    @html App.view('layout_ref/ui')()
+
+App.Config.set( 'layout_ref/ui', UI, 'Routes' )
+
 class ChatToTicketRef extends App.ControllerContent
 
   elements:

app/assets/javascripts/app/views/layout_ref/index.jst.eco

@@ -3,6 +3,7 @@
   <h1>Layout Reference</h1>
 
   <ul>
+    <li><a href="#layout_ref/ui">UI principles</a></li>
     <li><a href="#layout_ref/chat_to_ticket">💬 Chat to Ticket</a></li>
     <li><a href="#layout_ref/twitter_conversation">Twitter Conversation</a></li>
     <li><a href="#layout_ref/admin_loading">Admin Loading Screen</a></li>

app/assets/javascripts/app/views/layout_ref/ui.jst.eco

@@ -0,0 +1,23 @@
+<div class="main flex">
+
+  <h1>Tiki</h1>
+
+  <% for state in ['supergood', 'good', 'ok', 'bad', 'super-bad']: %>
+    <%- @Icon("mood-#{state}", 'stat-icon mood-icon') %>
+  <% end %>
+  <hr>
+
+  <h1>Ticket traffic light colors</h1>
+
+    <%- @Icon("task-state", 'open') %>
+    <%- @Icon("task-state", 'pending') %>
+    <%- @Icon("task-state", 'escalating') %>
+    <%- @Icon("task-state", 'closed') %>
+
+  <hr>
+
+  <h1>Colors</h1>
+
+
+
+</div>