system-feedback.underscore 2.03 KB
Newer Older
1 2
<div class="wrapper wrapper-<%= type %> wrapper-<%= type %>-<%= intent %>
            <% if(obj.shown) { %>is-shown<% } else { %>is-hiding<% } %>
3
            <% if(_.contains(['help', 'mini'], intent)) { %>wrapper-<%= type %>-status<% } %>"
4 5 6
     id="<%= type %>-<%= intent %>"
     aria-hidden="<% if(obj.shown) { %>false<% } else { %>true<% } %>"
     aria-labelledby="<%= type %>-<%= intent %>-title"
7
     tabindex="-1"
8 9 10 11 12
     <% if (obj.message) { %>aria-describedby="<%= type %>-<%= intent %>-description" <% } %>
     <% if (obj.actions) { %>role="dialog"<% } %>
  >
  <div class="<%= type %> <%= intent %> <% if(obj.actions) { %>has-actions<% } %>">
    <% if(obj.icon) { %>
13
      <% var iconClass = {"warning": "warning", "confirmation": "check", "error": "warning", "announcement": "bullhorn", "step-required": "exclamation-circle", "help": "question", "mini": "cog"} %>
14
      <i class="feedback-symbol fa fa-<%= iconClass[intent] %>"></i>
15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
    <% } %>

    <div class="copy">
      <h2 class="title title-3" id="<%= type %>-<%= intent %>-title"><%= title %></h2>
      <% if(obj.message) { %><p class="message" id="<%= type %>-<%= intent %>-description"><%= message %></p><% } %>
    </div>

    <% if(obj.actions) { %>
    <nav class="nav-actions">
      <h3 class="sr"><%= type %> Actions</h3>
      <ul>
        <% if(actions.primary) { %>
        <li class="nav-item">
          <a href="#" class="button action-primary <%= actions.primary.class %>"><%= actions.primary.text %></a>
        </li>
        <% } %>
        <% if(actions.secondary) {
             _.each(actions.secondary, function(secondary) { %>
        <li class="nav-item">
          <a href="#" class="button action-secondary <%= secondary.class %>"><%= secondary.text %></a>
        </li>
        <%   });
           } %>
      </ul>
    </nav>
    <% } %>

    <% if(obj.closeIcon) { %>
    <a href="#" rel="view" class="action action-close action-<%= type %>-close">
44
      <i class="icon fa fa-times-circle"></i>
45 46 47 48 49
      <span class="label">close <%= type %></span>
    </a>
    <% } %>
  </div>
</div>