darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-20 14:29:51 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1129 from alphagov/aria-tabs-pill-navigation

Browse Source 
Mark up ‘pill’ component as being tabs
This commit is contained in:
Chris Hill-Scott
2017-02-15 13:16:30 +00:00
committed by GitHub
parent f64c241a97 2ecfc2bb80
commit 562a93b9b1
10 changed files with 110 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/assets/stylesheets/components/pill.scss
View File

@@ -2,24 +2,19 @@
display: flex; display: flex;
a, li {
span {
display: block;
width: 25%; width: 25%;
box-sizing: border-box;
float: left;
padding: 10px;
flex-grow: 1; flex-grow: 1;
text-align: left; text-align: left;
}
&:first-child { a,
margin-left: 0; &-selected-item {
} display: block;
float: left;
&:last-child { box-sizing: border-box;
margin-right: 0; width: 100%;
} padding: 10px;
} }
a { a {
@@ -50,12 +45,18 @@
} }
} }
span { &-selected-item {
border: 2px solid $black; border: 2px solid $black;
outline: 1px solid rgba($white, 0.1); outline: 1px solid rgba($white, 0.1);
position: relative; position: relative;
z-index: 1000; z-index: 1000;
color: $text-colour; color: $text-colour;
&:focus {
z-index: 10;
outline: 3px solid $yellow;
}
} }
} }

21
app/templates/components/pill.html
View File

@@ -1,26 +1,27 @@
{% from 'components/big-number.html' import big_number %} {% from 'components/big-number.html' import big_number %}
{% macro pill( {% macro pill(
title,
items=[], items=[],
current_value=None, current_value=None,
big_number_args={'smaller': True} big_number_args={'smaller': True}
) %} ) %}
<nav role='navigation' class='pill' aria-labelledby="pill_{{title}}"> <ul role='tablist' class='pill'>
<h2 id="pill_{{title}}" class="visuallyhidden">{{title}}</h2>
{% for label, option, link, count in items %} {% for label, option, link, count in items %}
{% if current_value == option %} {% if current_value == option %}
<span aria-hidden="true"> <li aria-selected='true' role='tab'>
<div class='pill-selected-item' tabindex='0'>
{% else %} {% else %}
<a href="{{ link }}"> <li aria-selected='false' role='tab'>
<a href="{{ link }}">
{% endif %} {% endif %}
{{ big_number(count, **big_number_args) }} {{ big_number(count, **big_number_args) }}
<div class="pill-label">{{ label }}</div> <div class="pill-label">{{ label }}</div>
{% if current_value == option %} {% if current_value == option %}
</span> </div>
{% else %} {% else %}
</a> </a>
{% endif %} {% endif %}
</li>
{% endfor %} {% endfor %}
</nav> </ul>
{% endmacro %} {% endmacro %}

6
app/templates/components/table.html
View File

@@ -61,19 +61,19 @@
{% set border = '' if border else 'table-field-noborder' %} {% set border = '' if border else 'table-field-noborder' %}
<td class="{{ [field_alignment, border]|join(' ') }}"> <td class="{{ [field_alignment, border]|join(' ') }}">
<span class="{{ 'table-field-status-' + status if status }}">{{ caller() }}</span> <div class="{{ 'table-field-status-' + status if status }}">{{ caller() }}</div>
</td> </td>
{%- endmacro %} {%- endmacro %}
{% macro row_heading() -%} {% macro row_heading() -%}
<th class="table-field"> <th class="table-field">
<span>{{ caller() }}</span> {{ caller() }}
</th> </th>
{%- endmacro %} {%- endmacro %}
{% macro index_field(text) -%} {% macro index_field(text) -%}
<td class="table-field-index"> <td class="table-field-index">
<span><span class="visually-hidden">Row </span>{{ text }}</span> <span class="visually-hidden">Row </span>{{ text }}
</td> </td>
{%- endmacro %} {%- endmacro %}

2
app/templates/partials/jobs/count.html
View File

@@ -1,5 +1,5 @@
{% from "components/pill.html" import pill %} {% from "components/pill.html" import pill %}
<div class="bottom-gutter ajax-block-container"> <div class="bottom-gutter ajax-block-container">
{{ pill('Status', counts, request.args.get('status', '')) }} {{ pill(counts, request.args.get('status', '')) }}
</div> </div>

2
app/templates/partials/jobs/notifications.html
View File

@@ -1,7 +1,7 @@
{% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading, notification_status_field %} {% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading, notification_status_field %}
{% from "components/page-footer.html" import page_footer %} {% from "components/page-footer.html" import page_footer %}
<div class="ajax-block-container"> <div class="ajax-block-container" aria-labelledby='pill-selected-item'>
{% if job.job_status == 'scheduled' %} {% if job.job_status == 'scheduled' %}
<p> <p>

1
app/templates/views/activity/counts.html
View File

@@ -2,7 +2,6 @@
<div class='bottom-gutter ajax-block-container'> <div class='bottom-gutter ajax-block-container'>
{{ pill( {{ pill(
'Status',
status_filters, status_filters,
status status
) }} ) }}

2
app/templates/views/activity/notifications.html
View File

@@ -2,7 +2,7 @@
{% from "components/previous-next-navigation.html" import previous_next_navigation %} {% from "components/previous-next-navigation.html" import previous_next_navigation %}
{% from "components/table.html" import list_table, field, text_field, link_field, right_aligned_field_heading, hidden_field_heading, row_heading, notification_status_field %} {% from "components/table.html" import list_table, field, text_field, link_field, right_aligned_field_heading, hidden_field_heading, row_heading, notification_status_field %}
<div class="ajax-block-container"> <div class="ajax-block-container" id='pill-selected-item'>
{% if notifications %} {% if notifications %}
<div class='dashboard-table'> <div class='dashboard-table'>

3
app/templates/views/dashboard/monthly.html
View File

@@ -18,14 +18,13 @@
</h1> </h1>
<div class="bottom-gutter"> <div class="bottom-gutter">
{{ pill( {{ pill(
'financial year',
items=years, items=years,
current_value=selected_year, current_value=selected_year,
big_number_args={'smallest': True}, big_number_args={'smallest': True},
) }} ) }}
</div> </div>
{% if months %} {% if months %}
<div class="body-copy-table"> <div class="body-copy-table" id='pill-selected-item'>
{% call(month, row_index) list_table( {% call(month, row_index) list_table(
months, months,
caption="Total spend", caption="Total spend",

147
app/templates/views/usage.html
View File

@@ -13,91 +13,92 @@
<h2 class='heading-large'>Usage</h2> <h2 class='heading-large'>Usage</h2>
<div class="bottom-gutter"> <div class="bottom-gutter">
{{ pill('Year', years, selected_year, big_number_args={'smallest': True}) }} {{ pill(years, selected_year, big_number_args={'smallest': True}) }}
</div> </div>
<div id='pill-selected-item'>
<div class='grid-row'> <div class='grid-row'>
<div class='column-half'> <div class='column-half'>
<h2 class='heading-small'>Emails</h2> <h2 class='heading-small'>Emails</h2>
<div class="keyline-block"> <div class="keyline-block">
{{ big_number(emails_sent, 'sent', smaller=True) }} {{ big_number(emails_sent, 'sent', smaller=True) }}
{{ big_number("Unlimited", 'free allowance', smaller=True) }} {{ big_number("Unlimited", 'free allowance', smaller=True) }}
</div>
</div>
<div class='column-half'>
<h2 class='heading-small'>Text messages</h2>
<div class="keyline-block">
{{ big_number(sms_sent, 'sent', smaller=True) }}
{{ big_number(sms_free_allowance, 'free allowance', smaller=True) }}
{{ big_number(sms_allowance_remaining, 'free allowance remaining', smaller=True) }}
{% if sms_chargeable %}
{{ big_number(
sms_chargeable,
'at {:.2f} pence per message'.format(sms_rate * 100),
smaller=True
) }}
{% endif %}
</div>
</div> </div>
</div> </div>
<div class='column-half'>
<h2 class='heading-small'>Text messages</h2> <div class='grid-row'>
<div class="keyline-block"> <div class='column-half'>
{{ big_number(sms_sent, 'sent', smaller=True) }} <div class="keyline-block">
{{ big_number(sms_free_allowance, 'free allowance', smaller=True) }} &nbsp;
{{ big_number(sms_allowance_remaining, 'free allowance remaining', smaller=True) }} </div>
{% if sms_chargeable %} </div>
<div class='column-half'>
<div class="keyline-block">
{{ big_number( {{ big_number(
sms_chargeable, (sms_chargeable * sms_rate),
'at {:.2f} pence per message'.format(sms_rate * 100), 'spent',
currency="£",
smaller=True smaller=True
) }} ) }}
{% endif %} </div>
</div> </div>
</div> </div>
</div>
<div class='grid-row'> {% if months %}
<div class='column-half'> <div class="dashboard-table body-copy-table">
<div class="keyline-block"> {% call(month, row_index) list_table(
&nbsp; months,
caption="Total spend",
caption_visible=False,
empty_message='',
field_headings=[
'By month',
hidden_field_heading('Cost'),
],
field_headings_visible=True
) %}
{% call row_heading() %}
{{ month.name }}
{% endcall %}
{% call field(align='left') %}
{{ big_number(
sms_rate * month.paid,
currency="£",
smallest=True
) }}
<ul>
{% if month.free %}
<li class="tabular-numbers">{{ "{:,}".format(month.free) }} free text messages</li>
{% endif %}
{% if month.paid %}
<li class="tabular-numbers">{{ "{:,}".format(month.paid) }} text messages at
{{- ' {:.2f}p'.format(sms_rate * 100) }}</li>
{% endif %}
{% if not (month.free or month.paid) %}
<li aria-hidden="true">–</li>
{% endif %}
</ul>
{% endcall %}
{% endcall %}
</div> </div>
</div> {% endif %}
<div class='column-half'>
<div class="keyline-block">
{{ big_number(
(sms_chargeable * sms_rate),
'spent',
currency="£",
smaller=True
) }}
</div>
</div>
</div> </div>
{% if months %}
<div class="dashboard-table body-copy-table">
{% call(month, row_index) list_table(
months,
caption="Total spend",
caption_visible=False,
empty_message='',
field_headings=[
'By month',
hidden_field_heading('Cost'),
],
field_headings_visible=True
) %}
{% call row_heading() %}
{{ month.name }}
{% endcall %}
{% call field(align='left') %}
{{ big_number(
sms_rate * month.paid,
currency="£",
smallest=True
) }}
<ul>
{% if month.free %}
<li class="tabular-numbers">{{ "{:,}".format(month.free) }} free text messages</li>
{% endif %}
{% if month.paid %}
<li class="tabular-numbers">{{ "{:,}".format(month.paid) }} text messages at
{{- ' {:.2f}p'.format(sms_rate * 100) }}</li>
{% endif %}
{% if not (month.free or month.paid) %}
<li aria-hidden="true">–</li>
{% endif %}
</ul>
{% endcall %}
{% endcall %}
</div>
{% endif %}
<div class="grid-row"> <div class="grid-row">
<div class="column-half"> <div class="column-half">
<p class="align-with-heading-copy"> <p class="align-with-heading-copy">

4
tests/app/main/views/test_dashboard.py
View File

@@ -250,11 +250,11 @@ def test_usage_page(
page = BeautifulSoup(response.data.decode('utf-8'), 'html.parser') page = BeautifulSoup(response.data.decode('utf-8'), 'html.parser')
cols = page.find_all('div', {'class': 'column-half'}) cols = page.find_all('div', {'class': 'column-half'})
nav = page.find('nav', {'class': 'pill'}) nav = page.find('ul', {'class': 'pill', 'role': 'tablist'})
nav_links = nav.find_all('a') nav_links = nav.find_all('a')
assert normalize_spaces(nav_links[0].text) == '2010 to 2011 financial year' assert normalize_spaces(nav_links[0].text) == '2010 to 2011 financial year'
assert normalize_spaces(nav.find('span').text) == '2011 to 2012 financial year' assert normalize_spaces(nav.find('li', {'aria-selected': 'true'}).text) == '2011 to 2012 financial year'
assert normalize_spaces(nav_links[1].text) == '2012 to 2013 financial year' assert normalize_spaces(nav_links[1].text) == '2012 to 2013 financial year'
assert '123' in cols[0].text assert '123' in cols[0].text