Merge pull request #1222 from alphagov/toolkit-upgrade

Upgrade GOV.UK Template, Frontend Tookit, and Elements

app/templates/components/checkbox.html

@@ -1,29 +1,22 @@
 {% macro checkbox(
   field,
   hint=False,
-  help_link=None,
-  help_link_text=None,
-  width='2-3',
-  suffix=None,
-  block=False
+  width='2-3'
 ) %}
-    <label class="{% if block %}block-label{% endif %}" for="{{ field.name }}">
-        {{ field()}}
-        {{ field.label.text }}
-        {% if hint %}
-            <span class="form-hint">
-                {{ hint }}
-            </span>
-        {% endif %}
-        {% if field.errors %}
-            <span class="error-message">
-                {{ field.errors[0] }}
-            </span>
-        {% endif %}
-        {% if help_link and help_link_text %}
-            <p class="textbox-help-link">
-                <a href='{{ help_link }}'>{{ help_link_text }}</a>
-            </p>
-        {% endif %}
+  <div class="multiple-choice">
+    <input
+      id="{{ field.id }}" name="{{ field.name }}" type="checkbox" value="{{ field.data }}"
+      {% if field.checked %}
+        checked
+      {% endif %}
+    >
+    <label for="{{ field.id }}">
+      {{ field.label.text }}
+      {% if hint %}
+        <div class="hint">
+          {{ hint }}
+        </div>
+      {% endif %}
     </label>
+  </div>
 {% endmacro %}

app/templates/components/file-upload.html

@@ -1,5 +1,5 @@
 {% macro file_upload(field, button_text="Choose file", alternate_link=None, alternate_link_text=None) %}
-  <form method="post" enctype="multipart/form-data" class="{% if field.errors %}error{% endif %}" data-module="file-upload">
+  <form method="post" enctype="multipart/form-data" class="{% if field.errors %}form-group-error{% endif %}" data-module="file-upload">
     <label class="file-upload-label" for="{{ field.name }}">
       <span class="visually-hidden">{{ field.label.text }}</span>
       {% if hint %}

app/templates/components/list-entry.html

@@ -8,7 +8,7 @@
   {% if error %}
     <div class="validation-wrapper">
   {% endif %}
-    <fieldset class="form-group{% if field.errors %} error{% endif %}" id="{{ field.name }}">
+    <fieldset class="form-group{% if field.errors %} form-group-error{% endif %}" id="{{ field.name }}">
       <legend>
         <span class="form-label">
           {{ field.label.text }}

app/templates/components/radios.html

@@ -4,7 +4,7 @@
   disable=[],
   option_hints={}
 ) %}
-  <div class="form-group {% if field.errors %} error{% endif %}">
+  <div class="form-group {% if field.errors %} form-group-error{% endif %}">
     <fieldset>
       <legend class="form-label">
         {{ field.label.text|safe }}
@@ -15,7 +15,7 @@
         {% endif %}
       </legend>
       {% for option in field %}
-        <label class="block-label" for="{{ option.id }}">
+        <div class="multiple-choice">
           <input
             id="{{ option.id }}" name="{{ option.name }}" type="radio" value="{{ option.data }}"
             {% if option.data in disable %}
@@ -25,13 +25,15 @@
               checked
             {% endif %}
           >
-          {{ option.label.text }}
-          {% if option_hints[option.data] %}
-            <div class="block-label-hint">
-              {{ option_hints[option.data] }}
-            </div>
-          {% endif %}
-        </label>
+          <label class="block-label" for="{{ option.id }}">
+            {{ option.label.text }}
+            {% if option_hints[option.data] %}
+              <div class="block-label-hint">
+                {{ option_hints[option.data] }}
+              </div>
+            {% endif %}
+          </label>
+        </div>
       {% endfor %}
     </fieldset>
   </div>
@@ -43,7 +45,7 @@
  hint=None,
  wrapping_class='form-group'
 ) %}
- <div class="{{ wrapping_class }} {% if field.errors %} error{% endif %}">
+ <div class="{{ wrapping_class }} {% if field.errors %} form-group-error{% endif %}">
    <fieldset>
      <legend class="form-label">
        {{ field.label.text }}
@@ -56,10 +58,12 @@
      <div class="radio-select" data-module="radio-select" data-categories="{{ field.categories|join(',') }}">
        <div class="radio-select-column">
        {% for option in field %}
-         <label class="block-label" for="{{ option.id }}">
+         <div class="multiple-choice">
            {{ option }}
-           {{ option.label.text }}
-         </label>
+           <label for="{{ option.id }}">
+             {{ option.label.text }}
+           </label>
+         </div>
          {% if loop.first %}
        </div>
        <div class="radio-select-column">
@@ -77,7 +81,7 @@
   hint=None,
   branding_dict={}
 ) %}
-  <div class="form-group {% if field.errors %} error{% endif %}">
+  <div class="form-group {% if field.errors %} form-group-error{% endif %}">
     <fieldset>
       <legend class="form-label">
         {{ field.label.text }}
@@ -88,7 +92,7 @@
         {% endif %}
       </legend>
       {% for value, option, checked in field.iter_choices() %}
-        <label class="block-label" for="{{ field.name }}-{{ loop.index }}">
+        <div class="multiple-choice">
           <input
             type="radio"
             name="{{ field.name }}"
@@ -96,17 +100,19 @@
             value="{{ value }}"
             {% if checked %}checked="checked"{% endif %}
           />
-          {% if branding_dict.get(value, {}).get('colour') %}
-            <span style="background: {{ branding_dict[value].colour }}; display: inline-block; width: 3px; height: 27px"></span>
-          {% endif %}
-          {% if branding_dict.get(value, {}).get('logo') %}
-            <img
-              src="{{ branding_dict[value].logo }}"
-              height="27"
-            />
-          {% endif %}
-          {{option}}
-        </label>
+          <label class="block-label" for="{{ field.name }}-{{ loop.index }}">
+            {% if branding_dict.get(value, {}).get('colour') %}
+              <span style="background: {{ branding_dict[value].colour }}; display: inline-block; width: 3px; height: 27px"></span>
+            {% endif %}
+            {% if branding_dict.get(value, {}).get('logo') %}
+              <img
+                src="{{ branding_dict[value].logo }}"
+                height="27"
+              />
+            {% endif %}
+            {{option}}
+          </label>
+        </div>
       {% endfor %}
     </fieldset>
   </div>

app/templates/components/table.html

@@ -1,7 +1,7 @@
 {% from "components/big-number.html" import big_number %}
 
 {% macro mapping_table(caption='', field_headings=[], field_headings_visible=True, caption_visible=True) -%}
-  <table class="table">
+  <table class="table table-font-xsmall">
     <caption class="heading-medium table-heading{{ ' visuallyhidden' if not caption_visible}}">
       {{ caption }}
     </caption>

app/templates/components/textbox.html

@@ -11,7 +11,7 @@
   safe_error_message=False,
   rows=8
 ) %}
-  <div class="form-group{% if field.errors %} error{% endif %}" {% if autofocus %}data-module="autofocus"{% endif %}>
+  <div class="form-group{% if field.errors %} form-group-error{% endif %}" {% if autofocus %}data-module="autofocus"{% endif %}>
     <label class="form-label" for="{{ field.name }}">
       {% if label %}
         {{ label }}
@@ -29,10 +29,20 @@
         </span>
       {% endif %}
     </label>
+    {%
+      if highlight_tags
+    %}
+      {% set field_class = 'form-control-{} textbox-highlight-textbox'.format(width) %}
+    {% else %}
+      {% set field_class = 'form-control-{} {}'.format(width, 'textbox-right-aligned' if suffix else '') %}
+    {% endif %}
+    {%
+      set field_class = 'form-control ' + field_class + (
+        ' form-control-error' if field.errors else ''
+      )
+    %}
     {{ field(**{
-      'class':
-        'form-control form-control-{} textbox-highlight-textbox'.format(width) if highlight_tags else
-        'form-control form-control-{} {}'.format(width, 'textbox-right-aligned' if suffix else ''),
+      'class': field_class,
       'data-module': 'highlight-tags' if highlight_tags else '',
       'rows': rows|string
     }) }}

app/templates/views/manage-users/permissions.html

@@ -4,9 +4,9 @@
   <legend class="form-label">
     Permissions
   </legend>
-  {{ checkbox(form.send_messages, block=True) }}
-  {{ checkbox(form.manage_service, block=True) }}
-  {{ checkbox(form.manage_api_keys, block=True) }}
+  {{ checkbox(form.send_messages) }}
+  {{ checkbox(form.manage_service) }}
+  {{ checkbox(form.manage_api_keys) }}
 </fieldset>
 
 <div class="form-group">
@@ -18,4 +18,4 @@
     <li>history of sent messages</li>
     <li>who the other team members are</li>
   </ul>
-</div>
+</div>