From 929719131a6908e84abf59bbb579605888960fc5 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Tue, 4 Apr 2017 13:54:36 +0100
Subject: [PATCH] PP-1606 Change legend and read-only fields HTML

Description lists were shown to add useful
information for replaying of already-entered field
data:

https://github.com/alphagov/govuk_prototype_kit/pull/365

Apart from that, replacing the heading for the
permissions field with the legend reduces
duplication of that information.
---
 app/assets/sass/application.scss                |  1 +
 app/assets/sass/helpers/_forms.scss             | 15 +++++++++++++++
 app/views/services/team_member_permissions.html | 13 ++++++-------
 3 files changed, 22 insertions(+), 7 deletions(-)
 create mode 100644 app/assets/sass/helpers/_forms.scss

diff --git a/app/assets/sass/application.scss b/app/assets/sass/application.scss
index 25801fe16e..1cd490ad36 100644
--- a/app/assets/sass/application.scss
+++ b/app/assets/sass/application.scss
@@ -35,6 +35,7 @@ $grey-8: #fff;
 @import "helpers/_movement";
 @import "helpers/_links";
 @import "helpers/_text_treatment";
+@import "helpers/_forms";
 
 @import "modules/_service_switcher";
 @import "modules/_transactions_filter";
diff --git a/app/assets/sass/helpers/_forms.scss b/app/assets/sass/helpers/_forms.scss
new file mode 100644
index 0000000000..5ca9eb4df6
--- /dev/null
+++ b/app/assets/sass/helpers/_forms.scss
@@ -0,0 +1,15 @@
+/* For the first heading in a fieldset, use padding-top instead of margin-top to preserve spacing */
+fieldset > :first-child.heading-small {
+  margin-top: 0;
+  padding-top: (10 / 16) + em;
+
+  @include media(tablet) {
+    margin-top: 0;
+    padding-top: (20 / 19) + em;
+  }
+}
+
+/* Contain spacing from the margins of child elements */
+dl.read-only-fields {
+  overflow: hidden;
+}
diff --git a/app/views/services/team_member_permissions.html b/app/views/services/team_member_permissions.html
index 8603ee3646..82eebc9c2a 100644
--- a/app/views/services/team_member_permissions.html
+++ b/app/views/services/team_member_permissions.html
@@ -11,18 +11,17 @@ <h1 class="heading-large underline">
         Edit permissions</h1>
 </div>
 
-<div id="heading-large underline">
-    <h2 class="heading-small">Email address</h2>
-    <span id="email">{{email}}</span>
-</div>
+<div class="column-full remove-left-margin">
 
+    <dl class="read-only-fields">
+        <dt class="heading-small">Email address</dt>
+        <dd id="email">{{email}}</dd>
+    </dl>
 
-<div class="column-full remove-left-margin">
-    <h3 class="heading-small">Permission level</h3>
     <form id="role-update-form" method="post" action="{{editPermissionsLink}}">
         <div class="form-group">
             <fieldset>
-                <legend class="visuallyhidden">Permission level</legend>
+                <legend class="heading-small">Permission level</legend>
                 <input id="csrf" name="csrfToken" type="hidden" value="{{csrf}}"/>
 
                 <label class="block-label selection-button-radio" for="role-admin-input">