@planning-inspectorate/dynamic-forms 1.14.0 → 1.15.0

package/test/snapshots/check-your-answers-with-answers.html

@@ -0,0 +1,201 @@
+
+    <style >
+        .app-task-list {
+          padding-left: 0;
+        }
+        .app-task-list>li {
+          position: relative;
+          list-style-type: none;
+
+        }
+        .app-task-list__section .govuk-tag {
+          position: absolute;
+          top: 3px;
+          right: 0;
+        }
+        .app-task-list .govuk-summary-list {
+          border-top: 1px solid #b1b4b6;
+        }
+    </style>
+
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-full">
+                        <dl class="govuk-summary-list">
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Holiday Activities
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Swimming
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/holiday-activities">Change<span class="govuk-visually-hidden"> Which activities do you want to do on holiday?</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Travel Insurance
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Yes
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/add-insurance">Change<span class="govuk-visually-hidden"> Do you want to add travel insurance to your holiday?</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Travel Insurance Type
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Basic
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/travel-insurance-type">Change<span class="govuk-visually-hidden"> Which type of travel insurance would you like?</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Holiday Destination
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Beach
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/holiday-destination">Change<span class="govuk-visually-hidden"> Where would you like to go on holiday?</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Departure Date
+    </dt>
+    <dd class="govuk-summary-list__value">
+      1 January 2025
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/departure-date">Change<span class="govuk-visually-hidden"> When do you want to start your holiday?</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Holiday Period
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Start: 00:00 1 January 2025<br>End: 00:00 2 January 2025
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/holiday-period">Change<span class="govuk-visually-hidden"> What is the period of your holiday?</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Holiday Description
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Test
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/holiday-description">Change<span class="govuk-visually-hidden"> Describe your ideal holiday.</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Secret Holiday Wish
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Secret
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/secret-wish">Change<span class="govuk-visually-hidden"> Share a secret wish for your holiday (will be redacted).</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Travel Class
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Economy
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/travel-class">Change<span class="govuk-visually-hidden"> Which class do you want to travel in?</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Holiday Arrival
+    </dt>
+    <dd class="govuk-summary-list__value">
+      1 January 2025<br>10:45am
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/holiday-arrival">Change<span class="govuk-visually-hidden"> When would you like to arrive at your destination?</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Favourite Holiday Snack
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Test
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/holiday-snack">Change<span class="govuk-visually-hidden"> What is your favourite snack to eat on holiday?</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Travel Companions
+    </dt>
+    <dd class="govuk-summary-list__value">
+      test<br>1<br>
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/companions">Change<span class="govuk-visually-hidden"> Enter the names and ages of your travel companions.</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Number of Nights
+    </dt>
+    <dd class="govuk-summary-list__value">
+      1
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/nights">Change<span class="govuk-visually-hidden"> How many nights will you stay on holiday?</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Hotel Address
+    </dt>
+    <dd class="govuk-summary-list__value">
+      1 Test St<br>Testville<br>TE5 5ST
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/hotel-address">Change<span class="govuk-visually-hidden"> What is the address of your hotel?</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Luggage Weight
+    </dt>
+    <dd class="govuk-summary-list__value">
+      10 kg
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/luggage-weight-units">Change<span class="govuk-visually-hidden"> Select your luggage weight and unit.</span></a>
+    </dd>
+  </div>
+</dl>
+
+        <form action method="post">
+            <input type="hidden" name="_csrf" value="">
+            <button type="submit" class="govuk-button" data-module="govuk-button">
+  Accept &amp; Submit
+</button>
+        </form>
+
+        </div>
+    </div>
+
+

package/test/snapshots/companions.html

@@ -0,0 +1,51 @@
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+        </div>
+    </div>
+
+    
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <form action="" method="post" novalidate>
+                <input type="hidden" name="_csrf" value="">
+
+<fieldset class="govuk-fieldset">
+  <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+    <h1 class="govuk-fieldset__heading">
+      Enter the names and ages of your travel companions.
+    </h1>
+  </legend>
+
+
+
+                        <div class="govuk-form-group">
+  <label class="govuk-label govuk-label" for="name">
+    Name
+  </label>
+  <div id="name-hint" class="govuk-hint">
+    
+  </div>
+  <input class="govuk-input govuk-input-!-width-three-quarters" id="name" name="name" type="text" aria-describedby="name-hint">
+</div>
+
+                        <div class="govuk-form-group">
+  <label class="govuk-label govuk-label" for="age">
+    Age
+  </label>
+  <div id="age-hint" class="govuk-hint">
+    
+  </div>
+  <input class="govuk-input govuk-input-!-width-three-quarters" id="age" name="age" type="text" aria-describedby="age-hint">
+</div>
+
+
+
+</fieldset>
+
+                <button type="submit" class="govuk-button" data-module="govuk-button" data-cy="button-save-and-continue">
+  Continue
+</button>
+
+            </form>
+        </div>
+    </div>

package/test/snapshots/departure-date.html

@@ -0,0 +1,57 @@
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+        </div>
+    </div>
+
+    
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <form action="" method="post" novalidate>
+                <input type="hidden" name="_csrf" value="">
+                <div class="govuk-form-group">
+  <fieldset class="govuk-fieldset" role="group" aria-describedby="departureDate-hint">
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+      <h1 class="govuk-fieldset__heading">
+        When do you want to start your holiday?
+      </h1>
+    </legend>
+    <div id="departureDate-hint" class="govuk-hint">
+      
+    </div>
+    <div class="govuk-date-input" id="departureDate">
+      <div class="govuk-date-input__item">
+        <div class="govuk-form-group">
+          <label class="govuk-label govuk-date-input__label" for="departureDate_day">
+            Day
+          </label>
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="departureDate_day" name="departureDate_day" type="text" inputmode="numeric">
+        </div>
+      </div>
+      <div class="govuk-date-input__item">
+        <div class="govuk-form-group">
+          <label class="govuk-label govuk-date-input__label" for="departureDate_month">
+            Month
+          </label>
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="departureDate_month" name="departureDate_month" type="text" inputmode="numeric">
+        </div>
+      </div>
+      <div class="govuk-date-input__item">
+        <div class="govuk-form-group">
+          <label class="govuk-label govuk-date-input__label" for="departureDate_year">
+            Year
+          </label>
+          <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="departureDate_year" name="departureDate_year" type="text" inputmode="numeric">
+        </div>
+      </div>
+    </div>
+  </fieldset>
+</div>
+
+
+
+                <button type="submit" class="govuk-button" data-module="govuk-button" data-cy="button-save-and-continue">
+  Continue
+</button>
+            </form>
+        </div>
+    </div>

package/test/snapshots/holiday-activities.html

@@ -0,0 +1,49 @@
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+        </div>
+    </div>
+
+    
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <form action="" method="post" novalidate>
+                <input type="hidden" name="_csrf" value="">
+                <div class="govuk-form-group">
+  <fieldset class="govuk-fieldset" aria-describedby="holidayActivities-hint">
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+      <h1 class="govuk-fieldset__heading">
+        Which activities do you want to do on holiday?
+      </h1>
+    </legend>
+    <div id="holidayActivities-hint" class="govuk-hint">
+      
+    </div>
+    <div class="govuk-checkboxes govuk-checkboxes" data-module="govuk-checkboxes">
+      <div class="govuk-checkboxes__item">
+        <input class="govuk-checkboxes__input" id="holidayActivities" name="holidayActivities" type="checkbox" value="swimming" data-cy="answer-swimming">
+        <label class="govuk-label govuk-checkboxes__label" for="holidayActivities">
+          Swimming
+        </label>
+      </div>
+      <div class="govuk-checkboxes__item">
+        <input class="govuk-checkboxes__input" id="holidayActivities-2" name="holidayActivities" type="checkbox" value="hiking" data-cy="answer-hiking">
+        <label class="govuk-label govuk-checkboxes__label" for="holidayActivities-2">
+          Hiking
+        </label>
+      </div>
+      <div class="govuk-checkboxes__item">
+        <input class="govuk-checkboxes__input" id="holidayActivities-3" name="holidayActivities" type="checkbox" value="sightseeing" data-cy="answer-sightseeing">
+        <label class="govuk-label govuk-checkboxes__label" for="holidayActivities-3">
+          Sightseeing
+        </label>
+      </div>
+    </div>
+  </fieldset>
+</div>
+
+                <button type="submit" class="govuk-button" data-module="govuk-button" data-cy="button-save-and-continue">
+  Continue
+</button>
+            </form>
+        </div>
+    </div>

package/test/snapshots/holiday-arrival.html

@@ -0,0 +1,101 @@
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+        </div>
+    </div>
+
+    
+    <style >
+        .pins-select--width-4 {
+            min-width: 4.5em !important;
+            max-width: 4.5em !important;
+        }
+    </style>
+
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <form action="" method="post" novalidate>
+                <input type="hidden" name="_csrf" value="">
+                <div class="govuk-form-group">
+  <fieldset class="govuk-fieldset" role="group">
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+      <h1 class="govuk-fieldset__heading">
+        When would you like to arrive at your destination?
+      </h1>
+    </legend>
+    <div class="govuk-date-input" id="holidayArrival">
+      <div class="govuk-date-input__item">
+        <div class="govuk-form-group">
+          <label class="govuk-label govuk-date-input__label" for="holidayArrival_day">
+            Day
+          </label>
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="holidayArrival_day" name="holidayArrival_day" type="text" inputmode="numeric">
+        </div>
+      </div>
+      <div class="govuk-date-input__item">
+        <div class="govuk-form-group">
+          <label class="govuk-label govuk-date-input__label" for="holidayArrival_month">
+            Month
+          </label>
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="holidayArrival_month" name="holidayArrival_month" type="text" inputmode="numeric">
+        </div>
+      </div>
+      <div class="govuk-date-input__item">
+        <div class="govuk-form-group">
+          <label class="govuk-label govuk-date-input__label" for="holidayArrival_year">
+            Year
+          </label>
+          <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="holidayArrival_year" name="holidayArrival_year" type="text" inputmode="numeric">
+        </div>
+      </div>
+    </div>
+  </fieldset>
+</div>
+
+
+                <div class="govuk-form-group">
+                    <fieldset class="govuk-fieldset" role="group">
+                        <div id="holidayArrival-hint" class="govuk-hint">For example, 9:30am or 2:55pm</div>
+                        <div class="govuk-date-input" id=holidayArrival>
+                            <div class="govuk-date-input__item">
+                                <div class="govuk-form-group">
+  <label class="govuk-label" for="holidayArrival_hour">
+    Hour
+  </label>
+  <input class="govuk-input govuk-input--width-2" id="holidayArrival_hour" name="holidayArrival_hour" type="text">
+</div>
+
+                            </div>
+                            <div class="govuk-date-input__item">
+                                <div class="govuk-form-group">
+  <label class="govuk-label" for="holidayArrival_minutes">
+    Minute
+  </label>
+  <input class="govuk-input govuk-input--width-2" id="holidayArrival_minutes" name="holidayArrival_minutes" type="text">
+</div>
+
+                            </div>
+                            <div class="govuk-date-input__item">
+                                <div class="govuk-form-group">
+  <label class="govuk-label" for="holidayArrival_period">
+    am or pm
+  </label>
+  <select class="govuk-select govuk-select pins-select--width-4" id="holidayArrival_period" name="holidayArrival_period">
+    <option value="" selected></option>
+    <option value="am">AM</option>
+    <option value="pm">PM</option>
+  </select>
+</div>
+
+                            </div>
+                        </div>
+                    </fieldset>
+                </div>
+
+                <button type="submit" class="govuk-button" data-module="govuk-button" data-cy="button-save-and-continue">
+  Continue
+</button>
+            </form>
+        </div>
+    </div>
+
+

package/test/snapshots/holiday-description.html

@@ -0,0 +1,33 @@
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+        </div>
+    </div>
+
+    
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <form action="" method="post" novalidate>
+                <input type="hidden" name="_csrf" value="">
+                    <h1 class="govuk-heading-l">
+                        Describe your ideal holiday.
+                    </h1>
+
+
+                    <div class="govuk-form-group">
+  <label class="govuk-label" for="holidayDescription">
+    Description
+  </label>
+  <div id="holidayDescription-hint" class="govuk-hint">
+    
+  </div>
+  <textarea class="govuk-textarea" id="holidayDescription" name="holidayDescription" rows="5" aria-describedby="holidayDescription-hint"></textarea>
+</div>
+
+
+
+                <button type="submit" class="govuk-button" data-module="govuk-button" data-cy="button-save-and-continue">
+  Continue
+</button>
+            </form>
+        </div>
+    </div>

package/test/snapshots/holiday-destination.html

@@ -0,0 +1,56 @@
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+        </div>
+    </div>
+
+    
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <form action="" method="post" novalidate>
+                <input type="hidden" name="_csrf" value="">
+
+
+<fieldset class="govuk-fieldset">
+  <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+    <h1 class="govuk-fieldset__heading">
+      Where would you like to go on holiday?
+    </h1>
+  </legend>
+
+                        <p class="govuk-body"></p>
+
+
+                        <div class="govuk-form-group">
+  <div class="govuk-radios govuk-radios" data-module="govuk-radios">
+    <div class="govuk-radios__item">
+      <input class="govuk-radios__input" id="holidayDestination" name="holidayDestination" type="radio" value="beach" data-cy="answer-beach">
+      <label class="govuk-label govuk-radios__label" for="holidayDestination">
+        Beach
+      </label>
+    </div>
+    <div class="govuk-radios__item">
+      <input class="govuk-radios__input" id="holidayDestination-2" name="holidayDestination" type="radio" value="mountains" data-cy="answer-mountains">
+      <label class="govuk-label govuk-radios__label" for="holidayDestination-2">
+        Mountains
+      </label>
+    </div>
+    <div class="govuk-radios__item">
+      <input class="govuk-radios__input" id="holidayDestination-3" name="holidayDestination" type="radio" value="city" data-cy="answer-city">
+      <label class="govuk-label govuk-radios__label" for="holidayDestination-3">
+        City
+      </label>
+    </div>
+  </div>
+</div>
+
+
+
+</fieldset>
+
+
+                <button type="submit" class="govuk-button" data-module="govuk-button" data-cy="button-save-and-continue">
+  Continue
+</button>
+            </form>
+        </div>
+    </div>

package/test/snapshots/holiday-period.html

@@ -0,0 +1,102 @@
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+        </div>
+    </div>
+
+    
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <form action="" method="post" novalidate>
+                <input type="hidden" name="_csrf" value="">
+
+                <fieldset class="govuk-fieldset">
+  <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+    <h1 class="govuk-fieldset__heading">
+      What is the period of your holiday?
+    </h1>
+  </legend>
+</fieldset>
+
+
+                <div class="govuk-form-group">
+  <fieldset class="govuk-fieldset" role="group" aria-describedby="holidayPeriod_start-hint">
+    <legend class="govuk-fieldset__legend">
+      Start
+    </legend>
+    <div id="holidayPeriod_start-hint" class="govuk-hint">
+      
+    </div>
+    <div class="govuk-date-input" id="holidayPeriod_start">
+      <div class="govuk-date-input__item">
+        <div class="govuk-form-group">
+          <label class="govuk-label govuk-date-input__label" for="holidayPeriod_start_day">
+            Day
+          </label>
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="holidayPeriod_start_day" name="holidayPeriod_start_day" type="text" inputmode="numeric">
+        </div>
+      </div>
+      <div class="govuk-date-input__item">
+        <div class="govuk-form-group">
+          <label class="govuk-label govuk-date-input__label" for="holidayPeriod_start_month">
+            Month
+          </label>
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="holidayPeriod_start_month" name="holidayPeriod_start_month" type="text" inputmode="numeric">
+        </div>
+      </div>
+      <div class="govuk-date-input__item">
+        <div class="govuk-form-group">
+          <label class="govuk-label govuk-date-input__label" for="holidayPeriod_start_year">
+            Year
+          </label>
+          <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="holidayPeriod_start_year" name="holidayPeriod_start_year" type="text" inputmode="numeric">
+        </div>
+      </div>
+    </div>
+  </fieldset>
+</div>
+
+
+                <div class="govuk-form-group">
+  <fieldset class="govuk-fieldset" role="group" aria-describedby="holidayPeriod_end-hint">
+    <legend class="govuk-fieldset__legend">
+      End
+    </legend>
+    <div id="holidayPeriod_end-hint" class="govuk-hint">
+      
+    </div>
+    <div class="govuk-date-input" id="holidayPeriod_end">
+      <div class="govuk-date-input__item">
+        <div class="govuk-form-group">
+          <label class="govuk-label govuk-date-input__label" for="holidayPeriod_end_day">
+            Day
+          </label>
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="holidayPeriod_end_day" name="holidayPeriod_end_day" type="text" inputmode="numeric">
+        </div>
+      </div>
+      <div class="govuk-date-input__item">
+        <div class="govuk-form-group">
+          <label class="govuk-label govuk-date-input__label" for="holidayPeriod_end_month">
+            Month
+          </label>
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="holidayPeriod_end_month" name="holidayPeriod_end_month" type="text" inputmode="numeric">
+        </div>
+      </div>
+      <div class="govuk-date-input__item">
+        <div class="govuk-form-group">
+          <label class="govuk-label govuk-date-input__label" for="holidayPeriod_end_year">
+            Year
+          </label>
+          <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="holidayPeriod_end_year" name="holidayPeriod_end_year" type="text" inputmode="numeric">
+        </div>
+      </div>
+    </div>
+  </fieldset>
+</div>
+
+
+                <button type="submit" class="govuk-button" data-module="govuk-button" data-cy="button-save-and-continue">
+  Continue
+</button>
+            </form>
+        </div>
+    </div>