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/sms-message.html" import sms_message %}
{% from "components/table.html" import mapping_table, list_table, row, field %}
{% from "components/textbox.html" import textbox %}
{% from "components/file-upload.html" import file_upload %}
{% from "components/api-key.html" import api_key %}

{% block page_title %}
  Styleguide – GOV.UK Notify
{% endblock %}

{% block maincolumn_content %}

  <h1 class="heading-large">
    Styleguide
  </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>
  <p>Used to show the status of a thing or action.</p>

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

  <div class="grid-row">
    <div class="column-one-third">
      {{ banner("Delivered 10:20") }}
    </div>
  </div>

  {{ banner(
    'You can only send notifications to yourself',
    type='info',
    subhead='Restricted mode'
  ) }}

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

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

  {{ banner(
    '<a href="#">Send your first message</a>'|safe,
    subhead='Get started',
    type='tip'
  )}}

  {{ banner('You could go to jail', 'important')}}

  <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.19", "Final cost") }}
    </div>
  </div>
  <div class="grid-row">
    <div class="column-one-third">
      {{ big_number("711", "Queued") }}
    </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='Next step'
  ) }}

  {{ 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">SMS message</h2>

  <p>Used to show, preview or choose an SMS message.</p>

  <div class="grid-row">
    <div class="column-half">
      {{ sms_message("Your vehicle tax for LC12 BFL is due on 1 March 2016. Renew online at www.gov.uk/vehicle-tax") }}
      {{ sms_message("Your vehicle tax for ((registration number)) is due on ((date)). Renew online at www.gov.uk/vehicle-tax") }}
      {{ sms_message(
        "Your vehicle tax for registration number is due on date. Renew online at www.gov.uk/vehicle-tax",
        "+44 7700 900 306"
      ) }}
      {{ sms_message(
        "Your vehicle tax for ((registration number)) is due on ((date)). Renew online at www.gov.uk/vehicle-tax",
        name='Two week reminder',
        edit_link='#'
      ) }}
    </div>
  </div>

  <h2 class="heading-large">Tables</h2>

  {% call mapping_table(
    caption='Account settings',
    field_headings=['Label', 'Value'],
    field_headings_visible=True,
    caption_visible=True
  ) %}
    {% call row() %}
      {% call field() %}
        Username
      {% endcall %}
      {% call field() %}
        admin
      {% endcall %}
    {% endcall %}
  {% endcall %}

  {% call(item) list_table(
    [
      {
        'file': 'dispatch_20151114.csv', 'status': 'Queued'
      },
      {
        'file': 'dispatch_20151117.csv', 'status': 'Delivered'
      },
      {
        'file': 'remdinder_monday.csv', 'status': 'Delivered'
      }
    ],
    caption='Messages',
    field_headings=['File', 'Status'],
    field_headings_visible=False,
    caption_visible=True
  ) %}
    {% call field() %}
      {{ item.file }}
    {% endcall %}
    {% call field() %}
      {{ item.status }}
    {% endcall %}
  {% endcall %}

  {% call(item) 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 %}

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

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

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

  {{ api_key('d30512af92e1386d63b90e5973b49a10') }}

{% endblock %}