notifications-admin/app/templates/views/styleguide.html

{% extends "withoutnav_template.html" %}

{% from "components/banner.html" import banner %}
{% from "components/big-number.html" import big_number %}
{% from "components/browse-list.html" import browse_list %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/table.html" import mapping_table, list_table, row, field, text_field, boolean_field, right_aligned_field_heading %}
{% from "components/textbox.html" import textbox %}
{% from "components/file-upload.html" import file_upload %}
{% from "components/api-key.html" import api_key %}

{% block per_page_title %}
  Styleguide
{% endblock %}

{% block maincolumn_content %}

  <h1 class="heading-large">
    <a href="http://www.notify.works/_styleguide" style="text-decoration: none;">www.notify.works/_styleguide</a>
  </h1>

  <p>
    <a href="https://github.com/alphagov/notifications-admin/blob/master/app/templates/views/styleguide.html">View source</a>
  </p>

  <h2 class="heading-large">Banner</h2>
  <div class="grid-row">
    <div class="column-three-quarters">
      <p>Used to show the status of a thing or action.</p>

      {{ banner("You sent 1,234 text messages", with_tick=True) }}

      {{ banner('You’re not allowed to do this', 'dangerous')}}

      {{ banner('Are you sure you want to delete?', 'dangerous', delete_button="Yes, delete this thing")}}

    </div>
  </div>


  <h2 class="heading-large">Big number</h2>

  <p>Used to show some important statistics.</p>

  <div class="grid-row">
    <div class="column-one-third">
      {{ big_number("567") }}
    </div>
    <div class="column-one-third">
      {{ big_number("2", "Messages delivered") }}
    </div>
  </div>

  <h2 class="heading-large">Browse list</h2>

  <p>Used to navigate to child pages.</p>

  {{ browse_list([
    {
      'title': 'Change your username',
      'link': 'http://example.com',
    },
    {
      'title': 'Change your password',
      'link': 'http://example.com',
      'hint': 'Your password is used to log in'
    },
    {
      'title': 'Delete everything',
      'link': 'http://example.com',
      'hint': 'You can’t undo this',
      'destructive': True
    }
  ]) }}

  <h2 class="heading-large">Page footer</h2>

  <p>
    Used to submit forms and optionally provide a link to go back to the
    previous page.
  </p>
  <p>
    Must be used inside a form.
  </p>
  <p>
    Adds a hidden CSRF token to the page.
  </p>

  {{ page_footer(
    button_text='Continue'
  ) }}

  {{ page_footer(
    button_text='Save',
    delete_link='http://example.com',
    delete_link_text='delete this thing'
  )}}

  {{ page_footer(
    button_text='Delete', destructive=True
  ) }}

  {{ page_footer(
    button_text='Send', back_link='http://example.com', back_link_text="Back to dashboard"
  ) }}

  {{ page_footer(
    button_text='Sign in', secondary_link='http://example.com', secondary_link_text="I’ve forgotten my password"
  ) }}

  <h2 class="heading-large">Tables</h2>
  <div class="grid-row">
    <div class="column-three-quarters">
      <p>
        Used for comparing rows of data.
      </p>
      {% call mapping_table(
        caption='Account settings',
        field_headings=['Label', 'True', 'False', 'Action'],
        field_headings_visible=False,
        caption_visible=True
      ) %}
        {% call row() %}
          {{ text_field('Username' )}}
          {{ boolean_field(True) }}
          {{ boolean_field(False) }}
          {% call field(align='right') %}
            <a href="#">Change</a>
          {% endcall %}
        {% endcall %}
      {% endcall %}

      {% call(item, row_number) list_table(
        [
          {
            'file': 'dispatch_20151114.csv', 'status': 'Queued'
          },
          {
            'file': 'dispatch_20151117.csv', 'status': 'Delivered'
          },
          {
            'file': 'remdinder_monday.csv', 'status': 'Failed'
          }
        ],
        caption='Messages',
        field_headings=['File', right_aligned_field_heading('Status')],
        field_headings_visible=True,
        caption_visible=False
      ) %}
        {% call field() %}
          {{ item.file }}
        {% endcall %}
        {% call field(
          align='right',
          status='error' if item.status == 'Failed' else 'default'
        ) %}
          {{ item.status }}
        {% endcall %}
      {% endcall %}

      {% call(item, row_number) list_table(
        [],
        caption='Jobs',
        field_headings=['Job', 'Time'],
        caption_visible=True,
        empty_message='You haven’t scheduled any jobs yet'
      ) %}
        {% call field() %}
          {{ item.job }}
        {% endcall %}
        {% call field() %}
          {{ item.time }}
        {% endcall %}
      {% endcall %}
      <p class="table-show-more-link">
        <a href="#">Add a job now</a>
      </p>
    </div>
  </div>

  <h2 class="heading-large">Textbox</h2>
  {{ textbox(form.username) }}
  {{ textbox(form.password) }}
  {{ textbox(form.message, highlight_tags=True) }}
  {{ textbox(form.code, width='1-8') }}

  <h2 class="heading-large">File upload</h2>
  {{ file_upload(form.file_upload) }}

  <h2 class="heading-large">API key</h2>

  {{ api_key('d30512af92e1386d63b90e5973b49a10') }}


  <h2 class="heading-large">Formatted list</h2>

  <p>
    {{ 'A' | formatted_list(prefix="one item called") }}
  </p>

  <p>
    {{ 'AB' | formatted_list(prefix_plural="two items called") }}
  </p>

  <p>
    {{ 'ABC' | formatted_list }}
  </p>

  <p>
    {{ 'ABCD' | formatted_list(before_each='<strike>', after_each='</strike>', conjunction='or') }}
  </p>

{% endblock %}