lrn-assignment-button.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../lrn-icons/lrn-icons.html">


<dom-module id="lrn-assignment-button">
  <template>
    <style>
      :host {
        display: block;
      }
      a {
        color: inherit;
        text-decoration: inherit;
      }
      paper-button {
        background: #b0e6f9;
      }
      paper-button[complete] {
        background: #e7ffe7;
      }
      iron-icon {
        margin-left: .5em;
        opacity: .8;
      }
    </style>

    <a href$="{{url}}">

      <template is="dom-if" if="{{open}}">
        <paper-button raised open>{{title}} <iron-icon icon="lrn-icons:input"></iron-icon></paper-button>
      </template>

      <template is="dom-if" if="{{complete}}">
        <paper-button raised complete>{{title}} <iron-icon icon="lrn-icons:done"></iron-icon></paper-button>
      </template>

    </a>

  </template>
  <script>
    Polymer({
      is: 'lrn-assignment-button',
      properties: {
        title: String,
        url: String,
        open: {
          type: Boolean,
          value: false
        },
        complete: {
          type: Boolean,
          value: false
        },
      }
    });
  </script>
</dom-module>