added form progress indication

components/elements/index.js

@@ -231,6 +231,35 @@ export function NumericField(props) {
     );
 }
 
+export function DecimalField(props) {
+    const { name, label } = props;
+
+    return (
+        <div className="govuk-form-group">
+            <label
+                className="govuk-label govuk-label--m"
+                htmlFor="account-number"
+            >
+                {props.label}
+            </label>
+
+            <div id="account-number-hint" className="govuk-hint">
+                Must be between 6 and 8 digits long
+            </div>
+            <input
+                className="govuk-input govuk-input--width-10"
+                id="account-number"
+                name="account-number"
+                type="text"
+                spellCheck="false"
+                aria-describedby="account-number-hint"
+                pattern="[0-9]*"
+                inputMode="numeric"
+            />
+        </div>
+    );
+}
+
 export function ReadOnlyfield(props) {
     const { name, label } = props;
 

components/newappeal/buildfield.js

@@ -10,6 +10,7 @@ import {
     MultiLinefield,
     NumericField,
     ReadOnlyfield,
+    DecimalField,
 } from "../elements";
 
 export default function BuildField(props) {
@@ -76,7 +77,12 @@ export default function BuildField(props) {
                 );
                 break;
             case "{C3EFE0C3-0EC6-42be-8349-CBD9079DFD8E}":
-                return " decimal";
+                return (
+                    <DecimalField
+                        name={props.datafieldname}
+                        label={props.label}
+                    />
+                );
                 break;
             default:
                 return (

components/newappeal/buildsection.js

@@ -7,7 +7,6 @@ import BuildRow from "./buildrow";
 
 const BuildSection = (props) => {
     useEffect(() => {
-        document.title = `You clicked ${currentSection} times`;
         window.scrollTo(0, 0);
     });
 
@@ -32,6 +31,13 @@ const BuildSection = (props) => {
         doc
     );
 
+    var titleList = xpath.select(
+        "//form/tabs/tab[*]/labels/label/@description",
+        doc
+    );
+
+    console.log(titleList);
+
     const handleParam = (setValue) => (e) => setValue(e.target.value);
 
     const basicSearch = (event) => {
@@ -42,7 +48,7 @@ const BuildSection = (props) => {
 
     return (
         <div className="govuk-grid-row">
-            <div className="govuk-grid-column-full">
+            <div className="govuk-grid-column-two-thirds">
                 <h2>{titles[0].value} </h2>
                 <BuildRow
                     rowXML={rowXML}
@@ -79,6 +85,35 @@ const BuildSection = (props) => {
                     )}
                 </div>
             </div>
+            <div className="govuk-grid-column-one-third">
+                <nav
+                    role="navigation"
+                    aria-labelledby="progress-list"
+                    className="at-nav"
+                >
+                    <h3 className="govuk-visually-hidden">
+                        New Appeal progress
+                    </h3>
+
+                    <ol className="govuk-list">
+                        <ul className="govuk-list ">
+                            <li className="at-nav__page">
+                                <ol className="govuk-list">
+                                    {Object.keys(titleList).map((key) =>
+                                        parseInt(key) + 1 == currentSection ? (
+                                            <li>
+                                                <b>{titleList[key].value}</b>
+                                            </li>
+                                        ) : (
+                                            <li>{titleList[key].value}</li>
+                                        )
+                                    )}
+                                </ol>
+                            </li>
+                        </ul>
+                    </ol>
+                </nav>
+            </div>
         </div>
     );
 };