How to guides
Community resources
PrototypingBuilding your prototype
In Atom, select File then Open. Then select your prototype folder.
Overview of folders in your prototype
/commonis for your work. Inside that folder:page-wrap.tsxis where you change your service name and update your header and footer linkspagesis for HTML or React pages
Create and modify pages
You can use both HTML (.html) and React (.tsx) to build your prototype. If you are more comfortable using HTML, enter in terminal:
npm run create:page- answer the prompts to choose either HTML or React
- edit the new page to suit you
Remove
index.tsx from your prototype as having both .tsx and .html with the same index name will create problems in your prototype.Change the service name
- open
page-wrap.tsxfrom thepagesfolder. - find
title="My new service"and change that to your new service name. Press Cmd+S to save your changes. - check http://localhost:8080 to preview the changes
Update the sub-navigation and footer links
- open
page-wrap.tsxfrom thepagesfolder. - replace
navigationwith new sub-navigation and footer links. Press Cmd+S to save your changes. - check http://localhost:8080 to preview the changes
Using components
There are several ways to use components in your prototype:
- copy the code from the HTML or React tabs in the design system
- copy the code from GOV.UK design system (HTML only, not Nunjucks)
Currently, if you are using any components that contains javascript (like tabs or accordions) we advise you use the React code as the functionality will work much better. The files must be saved as .tsx files.
Using HTML
1. Copy the HTML code
2. Open your prototype in Atom and find index.html. Delete the contents of the file and paste in any HTML code you want to use between the fragment tags. Save your changes.
3. Go to http://localhost:8080/ and you will see the changes update automatically in your local web browser.
