Book a practical driving test

book-a-practical-driving-test/01-choose-vehicle.html

@@ -0,0 +1,76 @@
+---
+layout: default
+template: wide
+title: Book a practical driving test
+fromdept: dsa
+category: Driving
+subcategory: Learning to drive
+categories: service
+css: styles.css
+---
+
+<nav role="navigation" class="progress-indicator group">
+  <span class="visuallyhidden step-count">Step 1 of 4</span>
+  <ol class="group">
+    <li>Before you begin</li>
+    <li class="active">Vehicle &amp; licence</li>
+    <li>The test</li>
+    <li>About you</li>
+    <li>Payment</li>
+    <li>Done</li>
+  </ol>
+</nav>
+
+<script src="../javascripts/jquery.details.js"></script>
+<script>
+  $(function() {
+    // Add conditional classname based on support
+    $('html').addClass($.fn.details.support ? 'details' : 'no-details');
+    // Emulate <details> where necessary and enable open/close event handlers
+    $('details').details();
+  });
+</script>
+
+  <section>
+
+
+        <!--<p>Sorry, you can only do this online between 6am and 11:40pm</p>-->
+
+        <p>Which type of vehicle?</p>
+
+        <details>
+          <summary>Show options for towing a trailer</summary>
+          <p>You can tow many small trailers with a motorbike or a car with a standard licence. To tow a larger trailer with a car you may need a special licence.</p>
+          <ul>
+            <li><a href="">More information about towing with a car</a></li>
+            <li><a href="">More information about towing with a motorbike</a></li>
+          </ul>
+        <p id="button01" class="get-started group">
+           <a href="01-choose-vehicle.html" rel="external" class="button">
+             <span class="button-content"><span class="call-to-action">Book a car and trailer test</span> <!-- this space is important --></span>
+           </a>
+        </p>
+
+        </details>
+
+        <p id="get-started" class="get-started group">
+           <a href="01-choose-vehicle.html" rel="external" class="button">
+             <span class="button-content"><span class="call-to-action">Get started</span> <!-- this space is important --></span><span class="indicator"></span>
+           </a>
+        </p>
+
+        <!--
+        <details>
+        <summary>Other ways to change your appointment</summary>
+            <p>You can also change your appointment by calling the Driving Standards Agency (DSA) using the details below.</p>
+            <h4>DSA practical test bookings and enquiries</h4>
+            <p>
+              <strong>Telephone:</strong> 0300 200 1122 (English), 0300 200 1133 (Welsh)<br>
+              <strong>Textphone:</strong> 0300 200 1166
+            </p>
+            <p>Monday to Friday, 8am to 4pm</p>
+          </div>
+        </summary>
+      -->
+
+      </section>

book-a-practical-driving-test/index.html

@@ -12,24 +12,63 @@
 <nav role="navigation" class="progress-indicator group">
   <span class="visuallyhidden step-count">Step 1 of 4</span>
   <ol class="group">
-    <li class="active">Current step</li>
-    <li>Step two</li>
-    <li>Step three</li>
-    <li>Step four</li>
+    <li class="active">Before you begin</li>
+    <li>Vehicle &amp; licence</li>
+    <li>The test</li>
+    <li>About you</li>
+    <li>Payment</li>
+    <li>Done</li>
   </ol>
 </nav>
 
-<p>Welcome to Book a Practical Driving Test!</p>
+<script src="../javascripts/jquery.details.js"></script>
+<script>
+  $(function() {
+    // Add conditional classname based on support
+    $('html').addClass($.fn.details.support ? 'details' : 'no-details');
+    // Emulate <details> where necessary and enable open/close event handlers
+    $('details').details();
+  });
+</script>
 
-<section class="intro">
-  <div class="get-started-intro">
+  <section>
 
 
-  </div>      
-  <p id="get-started" class="get-started group">
-    <a href="2a.html" rel="external" class="button">
-    <span class="button-content"><span class="call-to-action">Get started</span> <!-- this space is important --></span><span class="indicator"></span>
-    </a>
-  </p>        
-</section>
+        <!--<p>Sorry, you can only do this online between 6am and 11:40pm</p>-->
 
+        <p>It takes about 15 minutes to book a practical driving test appointment online.</p>
+
+        <details>
+          <summary>Show what you need to know before you start</summary>
+          <p>You’ll need the following: </p>
+          <ul>
+            <li><strong>your valid Great Britain or Northern Ireland provisional driving licence number</strong></li>
+            <li><strong>your credit or debit card details</strong></li>
+            <li><strong>a theory test pass certificate number (if appropriate)</strong> (<a href="/find-your-lost-theory-test-pass-certificate-number">find this online</a>)</li>
+            <li><strong>your driving instructor’s personal reference number so you can check they’re available – but you can book without doing this</strong></li>
+          </ul>
+          <p>Remember to check that your driving instructor is available if you want them to be there.</p>
+
+        </details>
+
+        <p id="get-started" class="get-started group">
+           <a href="01-choose-vehicle.html" rel="external" class="button">
+             <span class="button-content"><span class="call-to-action">Get started</span> <!-- this space is important --></span><span class="indicator"></span>
+           </a>
+        </p>
+
+        <!--
+        <details>
+        <summary>Other ways to change your appointment</summary>
+            <p>You can also change your appointment by calling the Driving Standards Agency (DSA) using the details below.</p>
+            <h4>DSA practical test bookings and enquiries</h4>
+            <p>
+              <strong>Telephone:</strong> 0300 200 1122 (English), 0300 200 1133 (Welsh)<br>
+              <strong>Textphone:</strong> 0300 200 1166
+            </p>
+            <p>Monday to Friday, 8am to 4pm</p>
+          </div>
+        </summary>
+      -->
+
+      </section>

book-a-practical-driving-test/styles.scss

@@ -4,10 +4,39 @@
 @import "frontend_toolkit";
 @import "design_patterns";
 
+@include from-dept;
+@include progress-indicator;
+@include details-and-summary(highlighted);
+
+
 header.page-header hgroup {
   margin-right: 0 /* Extend page header out to end of search button */
 }
 
+nav.progress-indicator{
+	margin:0 0 2.5em 0;
+}
 
-@include from-dept;
-@include progress-indicator($purple, $green, $white);
+.get-started{
+	text-align:left;
+}
+
+.get-started .button .call-to-action, .get-started .button.big, #search .button.big{
+	background-image:url(https://d17tffe05zdvwj.cloudfront.net/static/icon-pointer-b8238d34ea8adcdca7f1963a9a19a5a0.png);
+}
+
+details summary {
+font-family: "nta", "GDS-Regular", sans-serif;
+font-size: 19px;
+font-size: 1.9rem;
+line-height: 1.31579;
+font-weight: 400;
+letter-spacing: 0;
+text-transform: none;
+color: #2E3191;
+cursor: pointer;
+display: block;
+text-decoration: underline;
+margin-bottom: 0.5em;
+margin-top: 0.15em;
+}