Skip to content

Commit

Permalink
Ongoing docs tweaks from Nisa
Browse files Browse the repository at this point in the history
  • Loading branch information
@alaricsp
alaricsp committed Nov 26, 2024
1 parent 1c48e52 commit d82ce2a
Show file tree
Hide file tree
Showing 6 changed files with 137 additions and 94 deletions.
1 change: 1 addition & 0 deletions doc/.gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ selectable_table.css
sheet_selector.css
x-govuk-masthead.css
docs.css
get-started-screenshots.png
class_list.js
keys.js
selectable_polyfills.js
Expand Down
24 changes: 1 addition & 23 deletions lib/importer/assets/docs/docs.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ table.selectable tr.validation-error:last-child::before {

.feature {
border: 3px solid #f3f2f1;
margin: 0.5em;
margin: 0;
padding: 0.1em;
}

Expand Down Expand Up @@ -206,25 +206,3 @@ a.sub-navigation-link:not(:hover):not(:active) {
a.sub-navigation-link:not(:focus):hover {
color: #006688;
}

#title-logo {
margin-top: 3em;
}

#title-logo img {
}

.text-with-image {
display: flex;
flex-direction: row;
align-items: center;
gap: 1em;
}

.text-with-image .text {
flex-grow: 1;
}

.text-with-image .image {
flex-grow: 1;
}
Binary file added lib/importer/assets/docs/get-started-screenshots.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
122 changes: 72 additions & 50 deletions lib/importer/assets/docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,23 +14,45 @@
}
</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%;
}
div#title {
margin-right: auto;
margin-left: auto;
max-width: 960px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
align-content: center;
}
div#title-text {
}
div#title-logo {
width: 50vw;
}
div#title-logo img {
width: 100%;
}

div#intro {
margin-right: auto;
margin-left: auto;
max-width: 960px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
align-content: center;
}
div#intro-text {
}
div#intro-image {
width: 30vw;
}
div#intro-image img {
width: 100%;
}
</style>
<link data-plugin-only rel="icon" sizes="48x48"
href="/manage-prototype/dependencies/govuk-frontend/dist/govuk/assets/images/favicon.ico">
Expand Down Expand Up @@ -68,35 +90,33 @@
</header>

<div class="x-govuk-masthead x-govuk-masthead--large" style="margin-top: -10px">
<div class="govuk-width-container" id="title">
<div class="govuk-grid-row" id="title-text">
<div class="govuk-grid-column-one-half-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 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">
Get started
<svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5"
height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
<path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z" />
</svg>
</a>
</div>
<div class="govuk-grid-column-one-half-from-desktop" id="title-logo">
<img src="logo.png" />
</div>
</div>
<div id="title">
<div id="title-text">
<h1 class="x-govuk-masthead__title">
Collect data for your <br/>
GOV.UK service in minutes
</h1>
<p class="x-govuk-masthead__description" style="text-wrap: balance;">
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">
Get started
<svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5"
height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
<path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z" />
</svg>
</a>
</div>
<div id="title-logo">
<img src="logo.png" />
</div>
</div>
</div>

<div class="govuk-width-container">
<main class="govuk-main-wrapper" id="main-content">
<div class="text-with-image">
<div class="text">
<div id="intro">
<div id="intro-text">
<h2 class="govuk-heading-m">Gather data easily</h2>

<p>Use ready-made components and
Expand All @@ -106,13 +126,16 @@ <h2 class="govuk-heading-m">Gather data easily</h2>
<p>Upload and preview any spreadsheet
(Excel, Google sheets, CSV) without the
need to adapt it.</p>
</div>
<div class="image">
</div>
<div id="intro-image">
<img src="mainpage-screenshots.png" />
</div>

</div>
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr">
</div>
</div>

<div class="govuk-width-container">
<main class="govuk-main-wrapper" id="main-content">
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 1em;">
<div class="govuk-panel feature">
<h2 class="govuk-heading-l">Free</h2>
<p>It is quick to set up and is completely free</p>
Expand Down Expand Up @@ -142,12 +165,11 @@ <h2 class="govuk-heading-l">Go Faster</h2>
<div class="govuk-section-break govuk-section-break--l govuk-section-break--visible" style="grid-column: span 3;"></div>
<div>
<h2 class="govuk-heading-m">Explore patterns and components</h2>
<h2 class="govuk-heading-s">Patterns</h2>
<h3 class="govuk-caption-m">Ask users for:</h3>
<h2 class="govuk-heading-s">Introduction</h2>
<ul class="govuk-list">
<li><a class="govuk-link" href="./what-it-is.html">What it is</a></li>
<li><a class="govuk-link" href="./how-it-works.html">How it works</a></li>
<li><a class="govuk-link" href="./get-started.html">Get started</a></li>
<li><a class="govuk-link" href="./start.html">Get started</a></li>
<li><a class="govuk-link" href="./articles.html">Articles</a></li>
</ul>

Expand Down
76 changes: 58 additions & 18 deletions lib/importer/assets/docs/start.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,29 @@
display: none;
}
</style>
<style type="text/css">
div.text-with-image {
margin-right: auto;
margin-left: auto;
max-width: 960px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: start;
align-content: center;
gap: 1em;
}
div.text-with-image .text {
}
div.text-with-image .image {
flex-shrink: 0;
width: 60%;
}
div.text-with-image .image 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"
Expand Down Expand Up @@ -62,26 +85,45 @@
<main class="govuk-main-wrapper" id="main-content">
<h1 class="govuk-heading-xl">Get started</h1>
<p>
The Data Design Kit is available as a plugin that can be installed
into the Prototype Kit.
The Data Upload Design Kit is available as a plugin that can be
installed into the Prototype Kit.
</p>
<h2 class="govuk-heading-l">Installation</h2>
<div data-static-only>
<p>Install the plugin by typing:</p>
<pre>npm install 'https://gitpkg.vercel.app/register-dynamics/data-import/lib/importer?main'</pre>
<div class="text-with-image">
<div class="text">
<p>
It offers a set of ready-made templates for creating a simple data
upload journey for users. This means that the often time-consuming
and difficult task of collecting vast amounts of data from different
people can be managed in a matter of minutes.
</p>
<p>
Templates are fully customisable and all components and patterns
are compatible with the GOV.UK Design System.
</p>
</div>
<div class="image">
<img src="get-started-screenshots.png" />
</div>
</div>
<p data-plugin-only class="govuk-body">
<span class="govuk-tag govuk-tag--green">Installed</span>
You have already installed the plugin and it is ready to be used in this prototype.
<h2 class="govuk-heading-l">How to Install it</h2>
<p>
To start using this plugin, it first needs to be installed onto
your machine. It can be installed directly into the GOV.UK
Prototype Kit.
</p>
<p>Installing the plugin will automatically append lines to your
<code>app/routes.js</code> file to configure the prototype to
receive and process spreadsheets.
<div data-static-only>
<p>
Open up your preferred command line, which you previously used to create a gov.uk prototype, and type the following:
</p>
<pre>npm install 'https://gitpkg.vercel.app/register-dynamics/data-import/lib/importer?main'</pre>
</div>
<p>
After running this command new routes will automatically be added
to your prototype’s app/routes.js file. You will then need to
configure the plugin, which can be done by editing the
app/config.json to look something like the following, replacing
the fields with the headings for the data you are interested in.
</p>
<h2 class="govuk-heading-l">Configuration</h2>
<p>Finally, add some fields to <code>app/config.json</code> that the user will be asked for
when using the
"Identify columns" template:
<pre>{
"serviceName": "Your service name",
"fields": [
Expand All @@ -90,8 +132,6 @@ <h2 class="govuk-heading-l">Configuration</h2>
"Speciality"
]
}</pre>
</p>


<p>You are now ready to use the Data Design Kit.
<span data-static-only>Run the Prototype Kit and visit <a
Expand Down
8 changes: 5 additions & 3 deletions lib/importer/assets/docs/what-it-is.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,9 +71,11 @@
<div class="govuk-breadcrumbs">
<ol class="govuk-breadcrumbs__list">
<li class="govuk-breadcrumbs__list-item">
<a class="govuk-breadcrumbs__list-item" href="./index.html">Data Upload Design Kit</a>
<a class="govuk-breadcrumbs__link" href="./index.html">Home</a>
</li>
<li class="govuk-breadcrumbs__list-item">
<a class="govuk-breadcrumbs__link" href="./index.html">What it is</a>
</li>
<li class="govuk-breadcrumbs__list-item">What it is</li>
</ol>
</div>
<main id="main-content" class="govuk-main-wrapper">
Expand All @@ -84,7 +86,7 @@ <h2 id="sub-navigation-heading" class="govuk-visually-hidden">Pages in this sect
<ul class="sub-navigation-section">
<li class="sub-navigation-item sub-navigation-item-current"><a aria-current="true" class="sub-navigation-link" href="./what-it-is.html">What it is</a></li>
<li class="sub-navigation-item false"><a class="sub-navigation-link" href="./how-it-works.html">How it works</a></li>
<li class="sub-navigation-item false"><a class="sub-navigation-link" href="./get-started.html">Get started</a></li>
<li class="sub-navigation-item false"><a class="sub-navigation-link" href="./start.html">Get started</a></li>
<li class="sub-navigation-item false"><a class="sub-navigation-link" href="./articles.html">Articles</a></li>
</ul>
</nav>
Expand Down

0 comments on commit d82ce2a

Please sign in to comment.