added form progress indication

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>
     );
 };