register-dynamics · alaric-rd · Nov 8, 2024 · Nov 4, 2024 · Nov 4, 2024 · Nov 5, 2024
diff --git a/doc/.gitignore b/doc/.gitignore
@@ -1,16 +1,23 @@
 selectable_table.css
+sheet_selector.css
+x-govuk-masthead.css
+docs.css
 class_list.js
 keys.js
 selectable_polyfills.js
 selectable_table.js
-docs.css
-init.js
+sheet_selector.js
+logo.png
 govuk-frontend.min.js
+init.js
 auto-store-data.js
 kit.js
 application.js
 application.css
+component-sheet-selector.html
 component-table-view.html
 index.html
 pattern-tabular-data.html
+start.html
 assets.mk
+assets.txt
diff --git a/doc/Makefile b/doc/Makefile
@@ -10,13 +10,15 @@ $(error "No hq on the PATH? https://github.com/ludovicianul/hq/releases/tag/hq-1
 endif
 
 SOURCES := $(wildcard ../lib/importer/assets/docs/*.html)
+IMAGES := $(wildcard ../lib/importer/assets/docs/*.png)
 OBJECTS := $(subst ../lib/importer/assets/docs/,./,${SOURCES})
 
 # Create a list of all of the assets the pages need, by looking at the scripts
 # and stylesheets they intended to download.
 assets.txt: ${SOURCES}
 	(echo $^ | xargs -n1 | xargs -I INPUT ${HQ} -r '[data-plugin-only]' -f INPUT -a src 'script[src]'; \
-	 echo $^ | xargs -n1 | xargs -I INPUT ${HQ} -r '[data-plugin-only]' -f INPUT -a href 'link[rel=stylesheet]') | \
+	 echo $^ | xargs -n1 | xargs -I INPUT ${HQ} -r '[data-plugin-only]' -f INPUT -a href 'link[rel=stylesheet]'; \
+         echo ${IMAGES} | sed 's_\.\./lib/importer/assets/docs/_./_') | \
 		sort -u | grep . > $@
 
 # Now build a Makefile dependency include, specifying the correct download
@@ -41,7 +43,7 @@ include assets.mk
 # We can generate the .gitignore from all of the things we know we are going to
 # end up with in the root dir.
 .gitignore: assets.txt
-	(cat $^; printf '%s\n' ${OBJECTS}; echo assets.mk) | xargs -n1 basename > $@
+	(cat $^; printf '%s\n' ${OBJECTS}; echo assets.mk; echo assets.txt) | xargs -n1 basename > $@
 all: .gitignore
 
 # Download the page and remove any elements marked only for plugin use.
@@ -52,7 +54,7 @@ all: .gitignore
 # Download the asset. This is the easiest way to get the real thing, as some of
 # them (e.g. application.css) are generated by the Prototype Kit and can't just
 # be copied from the disk.
-%.css %.js:
+%.css %.js %.png:
 	curl --fail-with-body -o $@ -sL http://localhost:3000${SRC} || cat $@
 
 .PHONY: clean

diff --git a/lib/importer/assets/docs/docs.css b/lib/importer/assets/docs/docs.css
@@ -92,11 +92,11 @@ table.selectable tr.validation-error:last-child::before {
     background-position-y: -18px;
 }
 
-.feature:not(:nth-last-child(2 of .feature), :nth-last-child(1 of .feature))::after {
-    border-bottom: 1px solid #000;
-    content: "";
-    width: 50%;
-    display: block;
-    margin-left: 25%;
-    margin-top: 2em;
+.feature {
+    border: 3px solid #f3f2f1;
+    margin: 1em;
+}
+
+.feature {
+    text-align: left;
 }
diff --git a/lib/importer/assets/docs/index.html b/lib/importer/assets/docs/index.html
@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="utf-8">
-    <title>Data Design Kit by Register Dynamics</title>
+    <title>Data Upload Design Kit by Register Dynamics</title>
     <link href="/public/stylesheets/application.css" rel="stylesheet" type="text/css" />
     <link href="../css/selectable_table.css" rel="stylesheet" type="text/css" />
     <link href="./docs.css" rel="stylesheet" type="text/css" />
@@ -13,6 +13,25 @@
             display: none;
         }
     </style>
+    <style type="text/css">
+        div#title {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            justify-content: space-between;
+            align-items: center;
+            align-content: center;
+        }
+        div#title-text {
+            flex-grow: 2;
+        }
+        div#title-logo {
+            flex-grow: 1;
+        }
+        div#title-logo img {
+            width: 100%;
+        }
+    </style>
     <link data-plugin-only rel="icon" sizes="48x48"
         href="/manage-prototype/dependencies/govuk-frontend/dist/govuk/assets/images/favicon.ico">
     <link data-plugin-only rel="icon" sizes="any"
@@ -38,7 +57,7 @@
                         </path>
                     </svg>
                 </a>
-                <a href="/data-import/" data-static-only class="govuk-header__link govuk-header__link--homepage">Data Design Kit</a>
+                <a href="/data-import/" data-static-only class="govuk-header__link govuk-header__link--homepage">Data Upload Design Kit</a>
             </div>
             <div class="govuk-header__content">
                 <a href="/manage-prototype" data-plugin-only class="govuk-header__link govuk-header__service-name">
@@ -49,14 +68,14 @@
     </header>
 
     <div class="x-govuk-masthead x-govuk-masthead--large" style="margin-top: -10px">
-        <div class="govuk-width-container">
-            <div class="govuk-grid-row">
+        <div class="govuk-width-container" id="title">
+            <div class="govuk-grid-row" id="title-text">
                 <div class="govuk-grid-column-two-thirds-from-desktop">
                     <h1 class="x-govuk-masthead__title">
                         Collect data for your GOV.UK service in minutes
                     </h1>
                     <p class="x-govuk-masthead__description" style="text-wrap: balance;">
-                        Use this Data Upload Kit to prototype ways to enable users to give you their data in bulk, quickly and easily
+                        Use this Data Upload Design Kit to prototype ways to enable users to give you their data in bulk, quickly and easily
                     </p>
                     <a href="./start.html" role="button" draggable="false"
                         class="govuk-button govuk-button--inverse govuk-button--start" data-module="govuk-button">
@@ -68,6 +87,9 @@ <h1 class="x-govuk-masthead__title">
                     </a>
                 </div>
             </div>
+            <div id="title-logo">
+              <img src="logo.png">
+            </div>
         </div>
     </div>
 
@@ -122,9 +144,9 @@ <h2 class="govuk-heading-s">Components</h2>
                 </ul>
             </div>
             <div>
-                <h2 class="govuk-heading-m">About the Data Design Kit</h2>
+                <h2 class="govuk-heading-m">About the Data Upload Design Kit</h2>
             <p>
-                The Data Design Kit is a set of components and patterns for asking users for data as a
+                The Data Upload Design Kit is a set of components and patterns for asking users for data as a
                 spreadsheet. These patterns are useful when users need to provide a lot of information at once to a
                 service and are likely to be drawing the information from an existing source.</p>
             <p>They can be used as part of the Prototype Kit and also in

diff --git a/lib/importer/assets/docs/logo.png b/lib/importer/assets/docs/logo.png