diff --git a/.gitignore b/.gitignore index d201dd4f..8c7aada3 100644 --- a/.gitignore +++ b/.gitignore @@ -1,103 +1,13 @@ -node_modules/ -/.DS_Store +# ignore tracking usage data config - we want a different one for each user +usage-data-config.json +# ignore extension SCSS because it's dynamically generated +lib/extensions/_extensions.scss +.env +.sass-cache +.DS_Store +.start.pid +.port.tmp +public +node_modules/* +.tmuxp.* /.idea -public/stylesheets/application-ie8.css -public/stylesheets/application.css -*.css -public/stylesheets/unbranded.css -public/stylesheets/unbranded-ie8.css -public/stylesheets/application.css -public/stylesheets/application-ie8.css -public/stylesheets/application-ie8.css -public/stylesheets/application.css -public/stylesheets/unbranded-ie8.css -public/stylesheets/unbranded.css -public/images/add 3.svg -public/images/add-black 3.svg -public/images/add-white 3.svg -public/images/arrow-down 3.svg -public/images/arrow-down-white 3.svg -public/images/arrow-left 3.svg -public/images/arrow-right 3.svg -public/images/arrow-up 3.svg -public/images/arrow-white 3.svg -public/images/calendar 3.svg -public/images/cancel-red 3.svg -public/images/contact-blue 3.svg -public/images/contact-email 3.svg -public/images/contact-email-white 3.svg -public/images/contact-person 3.svg -public/images/contact-phone 3.svg -public/images/copy-blue 3.svg -public/images/cross 3.svg -public/images/cross-error 3.svg -public/images/cross-red 3.svg -public/images/csv 3.svg -public/images/delete 3.svg -public/images/delete-blue 3.svg -public/images/DFE-logo 3.png -public/images/docs/mac-home-folder-projects 2.png -public/images/docs/prototype-kit-homepage 3.png -public/images/docs/prototype-kit-tutorial-question-1 3.png -public/images/docs/prototype-kit-tutorial-question-2 3.png -public/images/download-blue 3.svg -public/images/edit-blue 3.svg -public/images/email-blue 3.svg -public/images/employer-example 3.png -public/images/ESFA-logo 3.jpg -public/images/excel 3.svg -public/images/excel-csv 3.svg -public/images/FIRE-IT-UP 3.png -public/images/fire-it-up-apprentices 3.png -public/images/fire-it-up-employer 3.png -public/images/help-black 3.svg -public/images/help-blue 3.svg -public/images/help-white 3.svg -public/images/info-black 3.svg -public/images/make-password-invisible 2.svg -public/images/make-password-visible 3.svg -public/images/marketo-csv 2.svg -public/images/menu-blue 3.svg -public/images/pdf-blue 3.svg -public/images/phone-blue 3.svg -public/images/plus-blue 3.svg -public/images/screenshot-ni 3.jpg -public/images/screenshot-scot 3.jpg -public/images/screenshot-wales 3.jpg -public/images/search-white 3.svg -public/images/separator 3.png -public/images/separator-2x 3.png -public/images/share-blue 3.svg -public/images/sort-blue 3.svg -public/images/tick-green 3.svg -public/images/tick-single-green 3.svg -public/images/tick-white 3.svg -public/images/unbranded 3.ico -public/images/website-blue 3.svg -public/javascripts/application 3.js -public/javascripts/auto-store-data 3.js -public/javascripts/autocomplete 3.js -public/javascripts/docs 2.js -public/javascripts/jquery-1.11.3 3.js -public/javascripts/jquery.autocomplete.min 3.js -public/javascripts/jquery.cookie 2.js -public/javascripts/my-cookies-RECEIVER 3.js -public/javascripts/my-cookies-SENDER 3.js -public/javascripts/step-by-step-nav 3.js -public/sass/application 2.scss -public/sass/components/_cookie-banner 3.scss -public/sass/components/_module-tracker 3.scss -public/sass/components/_pagination 3.scss -public/sass/components/_progress-tracker 3.scss -public/sass/docs-ie8 2.scss -public/sass/patterns/_navigation 3.scss -public/sass/patterns/_pledges 3.scss -public/sass/patterns/_related-items 3.scss -public/sass/patterns/_search-pledges 3.scss -public/sass/patterns/_step-by-step-header 3.scss -public/sass/patterns/_step-by-step-nav 3.scss -public/sass/patterns/_step-by-step-related 3.scss -public/sass/patterns/_task-list 3.scss -public/sass/patterns/_transfers 3.scss -public/sass/unbranded 3.scss -public/sass/unbranded-ie8 2.scss diff --git a/.npmrc b/.npmrc new file mode 100644 index 00000000..d26df800 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +audit=false diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 00000000..58a4133d --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +16.13.0 diff --git a/VERSION.txt b/VERSION.txt index 5ffe92dd..b700dc1d 100644 --- a/VERSION.txt +++ b/VERSION.txt @@ -1 +1 @@ -9.9.0 +12.0.1 diff --git a/app/assets/sass/patterns/_step-by-step-nav.scss b/app/assets/sass/patterns/_step-by-step-nav.scss index 0cd4e570..cebea1b1 100644 --- a/app/assets/sass/patterns/_step-by-step-nav.scss +++ b/app/assets/sass/patterns/_step-by-step-nav.scss @@ -94,10 +94,10 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3"); .app-step-nav__button--controls { @include step-nav-font(14, $line-height: 1); + @include govuk-link-common; position: relative; z-index: 1; // this and relative position stops focus outline underlap with border of accordion padding: .5em 0; - text-decoration: underline; .app-step-nav--large & { @include step-nav-font(14, $tablet-size: 16, $line-height: 1); @@ -271,7 +271,8 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3"); } .app-step-nav__toggle-link { - text-decoration: underline; + @include govuk-link-common; + @include govuk-link-hover-decoration; } } diff --git a/app/assets/sass/patterns/_task-list.scss b/app/assets/sass/patterns/_task-list.scss index 09c1419c..8bb16c14 100644 --- a/app/assets/sass/patterns/_task-list.scss +++ b/app/assets/sass/patterns/_task-list.scss @@ -1,132 +1,56 @@ // Task list pattern .app-task-list { - list-style-type: none; - padding-left: 0; - margin-top: 0; - margin-bottom: 0; - @include govuk-media-query($from: tablet) { - min-width: 550px; - } - .apprentice-section-one { - ul.app-task-list__items { - margin-bottom: 1.5em; - li { - &:first-of-type { - // padding-top: 0; - .govuk-heading-s { - margin-top: -0.5em; - background: govuk-colour("light-grey"); - padding: 0.5em; - margin-bottom: 0.5em; - border-bottom: 1px solid $govuk-border-colour; - } - } - } - } - .govuk-button { - margin-left: 1.5em; - margin-bottom: 3em; - } - .apprenticeship-total { - float: right; - width: auto; - margin: 0.125em 0 0 0; - line-height: 0.75; - text-align: right; - strong { - color: $govuk-link-colour; - } - .small-text { - font-size: 16px; - font-weight: normal; - color: $govuk-secondary-text-colour; - strong { - color: black; - } - // display: inline-block; - // clear: both; - } - } - } -} - - -@media (max-width: 1024px) { - -} - -@media (max-width: 768px) { - .app-task-list { - .pledge-section-one { - &.apprentice-added { - .govuk-button { - margin-left: 0em; - margin-bottom: 1em; - } - .apprenticeship-total { - margin: 0.75em 0 2em 0; - font-size: 2rem; - float: left; - } - } - } - } -} - -@media (max-width: 500px) { - + list-style-type: none; + padding-left: 0; + margin-top: 0; + margin-bottom: 0; + @include govuk-media-query($from: tablet) { + min-width: 550px; + } } .app-task-list__section { - display: table; - @include govuk-font($size:24, $weight: bold); + display: table; + @include govuk-font($size:24, $weight: bold); } .app-task-list__section-number { - display: table-cell; + display: table-cell; - @include govuk-media-query($from: tablet) { - min-width: govuk-spacing(6); - padding-right: 0; - } + @include govuk-media-query($from: tablet) { + min-width: govuk-spacing(6); + padding-right: 0; + } } .app-task-list__items { - @include govuk-font($size: 19); - @include govuk-responsive-margin(9, "bottom"); - list-style: none; - padding-left: 0; - @include govuk-media-query($from: tablet) { - padding-left: govuk-spacing(6); - } + @include govuk-font($size: 19); + @include govuk-responsive-margin(9, "bottom"); + list-style: none; + padding-left: 0; + @include govuk-media-query($from: tablet) { + padding-left: govuk-spacing(6); + } } .app-task-list__item { - border-bottom: 1px solid $govuk-border-colour; - margin-bottom: 0 !important; - padding-top: govuk-spacing(2); - padding-bottom: govuk-spacing(2); - @include govuk-clearfix; - ul.govuk-list { - float: right; - margin-bottom: 0; - li { - list-style: none; - text-align: right; - } - } + border-bottom: 1px solid $govuk-border-colour; + margin-bottom: 0 !important; + padding-top: govuk-spacing(2); + padding-bottom: govuk-spacing(2); + @include govuk-clearfix; } .app-task-list__item:first-child { - border-top: 1px solid $govuk-border-colour; + border-top: 1px solid $govuk-border-colour; } .app-task-list__task-name { - display: block; - @include govuk-media-query($from: 450px) { - float: left; - } + display: block; + @include govuk-media-query($from: 450px) { + float: left; + } } // The `app-task-list__task-completed` class was previously used on the task @@ -134,12 +58,12 @@ // avoid breaking task lists in existing prototypes. .app-task-list__tag, .app-task-list__task-completed { - margin-top: govuk-spacing(2); - margin-bottom: govuk-spacing(1); - - @include govuk-media-query($from: 450px) { - float: right; - margin-top: 0; - margin-bottom: 0; - } + margin-top: govuk-spacing(2); + margin-bottom: govuk-spacing(1); + + @include govuk-media-query($from: 450px) { + float: right; + margin-top: 0; + margin-bottom: 0; + } } diff --git a/app/views/sprint-27/MVS/sender/STEP-14/5-pledge-details-v2.html b/app/views/sprint-27/MVS/sender/STEP-14/5-pledge-details-v2.html new file mode 100644 index 00000000..f7cd1957 --- /dev/null +++ b/app/views/sprint-27/MVS/sender/STEP-14/5-pledge-details-v2.html @@ -0,0 +1,1049 @@ +{% extends "layout-my-account.html" %} + +{% block pageTitle %} + Manage apprenticeships +{% endblock %} + +{% block beforeContent %} +{% include "../../../includes/navigation_sender_finance.html" %} +{% endblock %} + +{% block content %} + +
+ +
+
    +
  1. Home
  2. +
  3. Finance
  4. +
  5. Transfers
  6. +
  7. My transfer pledges
  8. +
  9. Transfer pledge 910106
  10. +
+
+ +


+ + + {% if data['reject_application'] == "Reject" %} + + {% else %} + + {% endif %} + + +
+
+

Transfer pledge 910106

+ +
+ + Information about the applications + +
+

Estimated cost in this financial year
+ This is an estimate of the cost of training for each application in this financial year. It is based on the funding band maximum and the planned start date of training. +

+
+
+ +
+ + + +
+ +
+
+
+

+ £65000 +
Pledge funds for 2022/23
+

+

+ £29000 +
Remaining pledge funds for 2022/23
+

+
+
+ + + +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + +
+
+
ApplicantEstimated cost 2021/22Typical durationCriteriaStatus
+
+
+ + +
+
+
+ Belhavel Construction Ltd + shortlisted + + K £2,900 + 30 months + A100% match +

+ • Location
+ • Sector
+ • Type of job role
+ • Level +

+
+ Awaiting approval + Awaiting acceptance by applicant + Rejected +
+ + + CBJ Engineering + shortlisted + + A £36,000 + 24 months + B75% match +

+ • Location
+ • Sector
+ • Type of job role +

+
+ Awaiting acceptance by applicant + Rejected +
+ + + Johnson and Johnson Building Co + shortlisted + + H £7,500 + 24 months + C50% match +

+ • Sector
+ • Type of job role +

+
+ Rejected +
+ + + 123 Windows Co + shortlisted + + N £1,000 + 18 months + E0% match + + Withdrawn by applicant +
+ + + Ferlot & Co + shortlisted + + M £1,200 + 12 months + E0% match + + Withdrawn by applicant +
+ + + ActiveCub Ltd + shortlisted + + K £2,900 + 30 months + A100% match +

+ • Location
+ • Sector
+ • Type of job role
+ • Level +

+
+ Awaiting acceptance by applicant + Rejected +
+ + + Solidaric + shortlisted + + A £36,000 + 24 months + B75% match +

+ • Location
+ • Sector
+ • Type of job role +

+
+ Awaiting acceptance by applicant + Rejected +
+ + + Nupositive + shortlisted + + H £7,500 + 24 months + C50% match +

+ • Location
+ • Type of job role +

+
+ Rejected +
+ + + Zurova + shortlisted + + L £1,250 + 18 months + E0% match + + Awaiting acceptance by applicant + Rejected +
+ + + Radicalsy Limited + shortlisted + + N £1,000 + 18 months + E0% match + + Withdrawn by applicant +
+
+
+ + +
+
+
+ Steepway Limited + shortlisted + + K £2,900 + 30 months + A100% match +

+ • Location
+ • Sector
+ • Type of job role
+ • Level +

+
+ Awaiting approval + Awaiting acceptance by applicant + Rejected +
+ + + Confidentify PLC + shortlisted + + A £36,000 + 36 months + B75% match +

+ • Location
+ • Sector
+ • Type of job role +

+
+ Rejected +
+ + + Steepby & Co + shortlisted + + H £7,500 + 24 months + C50% match +

+ • Sector
+ • Type of job role +

+
+ Rejected +
+ + + Onradical + shortlisted + + N £1,000 + 18 months + E0% match + + Withdrawn by applicant +
+
+
+ + +
+
+
+ Heroicology PLC + shortlisted + + F £10,000 + 12 months + A100% match +

+ • Location
+ • Sector
+ • Type of job role
+ • Level +

+
+ Awaiting approval + Awaiting acceptance by applicant + Rejected +
+
+
+ + +
+
+
+ Fearlessia Limited + shortlisted + + I £5,000 + 30 months + A100% match +

+ • Location
+ • Sector
+ • Type of job role
+ • Level +

+
+ Awaiting approval + Awaiting acceptance by applicant + Rejected +
+
+
+ + +
+
+
+ Steepist PLC + shortlisted + + A £36,000 + 36 months + B75% match +

+ • Location
+ • Sector
+ • Type of job role +

+
+ Awaiting approval + Awaiting acceptance by applicant + Rejected +
+
+
+ + +
+
+
+ Steepline + shortlisted + + H £7,500 + 24 months + C50% match +

+ • Sector
+ • Type of job role +

+
+ Awaiting approval + Awaiting acceptance by applicant + Rejected +
+ + + Modby + shortlisted + + N £1,000 + 18 months + E0% match + + Withdrawn by applicant +
+
+
+ + +
+
+
+ Heroicon Ltd + shortlisted + + F £10,000 + 12 months + E0% match + + Awaiting approval + Awaiting acceptance by applicant + Rejected +
+
+
+ + +
+
+
+ Positivela + shortlisted + + H £7,500 + 12 months + A100% match +

+ • Location
+ • Sector
+ • Type of job role
+ • Level +

+
+ Awaiting approval + Awaiting acceptance by applicant + Rejected +
+
+
+ + +
+
+
+ Heroicbar Ltd + shortlisted + + E £16,000 + 12 months + B75% match +

+ • Location
+ • Sector
+ • Type of job role +

+
+ Awaiting approval + Awaiting acceptance by applicant + Rejected +
+
+
+ + +
+
+
+ Obviousmax Partners & Son + shortlisted + + G £9,500 + 12 months + C50% match +

+ • Sector
+ • Type of job role +

+
+ Awaiting approval + Awaiting acceptance by applicant + Rejected +
+
+
+ + +
+
+
+ Nubold Ltd + shortlisted + + F £10,000 + 18 months + E0% match + + Awaiting approval + Awaiting acceptance by applicant + Rejected +
+
+
+ + +
+
+
+ Edbold + shortlisted + + J £3,000 + 12 months + E0% match + + Awaiting approval + Awaiting acceptance by applicant + Rejected +
+ + + Boldring PLC + shortlisted + + D £17,500 + 24 months + A100% match +

+ • Location
+ • Sector
+ • Type of job role
+ • Level +

+
+ Awaiting acceptance by applicant + Rejected +
+
+
+ + +
+
+
+ Oxlac Ltd + shortlisted + + B £24,000 + 12 months + D25% match +

+ • Location +

+
+ Awaiting approval + Awaiting acceptance by applicant + Rejected +
+
+
+ + +
+
+
+ Obviousmax Partners & Son + shortlisted + + C £18,500 + 12 months + D25% match +

+ • Sector +

+
+ Awaiting approval + Awaiting acceptance by applicant + Rejected +
+
+
+ + +
+
+
+ Nubold Ltd + shortlisted + + F £10,000 + 18 months + E0% match + + Awaiting approval + Awaiting acceptance by applicant + Rejected +
+ + + Edbold + shortlisted + + J £3,000 + 12 months + A100% match +

+ • Location
+ • Sector
+ • Type of job role
+ • Level +

+
+ Awaiting acceptance by applicant + Rejected +
+ +

+ There are 0 applications that have been approved +

+ +


+ +
+ + Back to my transfer pledges + +
+ +
+ +
+ + + +{% endblock %} + +{% block pageScripts %} + +{% endblock %} diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 00000000..fa3c88dc --- /dev/null +++ b/docs/README.md @@ -0,0 +1,6 @@ +# Documentation + +[Documentation and examples](https://govuk-prototype-kit.herokuapp.com/docs) + +Documentation is also available when running the app locally at http:localhost:3000/docs + diff --git a/docs/assets/images/docs/github-desktop-add-local-repository.png b/docs/assets/images/docs/github-desktop-add-local-repository.png new file mode 100644 index 00000000..3952376e Binary files /dev/null and b/docs/assets/images/docs/github-desktop-add-local-repository.png differ diff --git a/docs/assets/images/docs/heroku-create-app.png b/docs/assets/images/docs/heroku-create-app.png new file mode 100644 index 00000000..baad7567 Binary files /dev/null and b/docs/assets/images/docs/heroku-create-app.png differ diff --git a/docs/assets/images/docs/heroku-deploy.png b/docs/assets/images/docs/heroku-deploy.png new file mode 100644 index 00000000..a380f52b Binary files /dev/null and b/docs/assets/images/docs/heroku-deploy.png differ diff --git a/docs/assets/images/docs/tutorial-overview.png b/docs/assets/images/docs/tutorial-overview.png new file mode 100755 index 00000000..bed21a4e Binary files /dev/null and b/docs/assets/images/docs/tutorial-overview.png differ diff --git a/docs/assets/images/docs/tutorial-radios.png b/docs/assets/images/docs/tutorial-radios.png new file mode 100755 index 00000000..986ca542 Binary files /dev/null and b/docs/assets/images/docs/tutorial-radios.png differ diff --git a/docs/assets/images/docs/tutorial-textarea.png b/docs/assets/images/docs/tutorial-textarea.png new file mode 100755 index 00000000..d648a79e Binary files /dev/null and b/docs/assets/images/docs/tutorial-textarea.png differ diff --git a/docs/assets/sass/docs.scss b/docs/assets/sass/docs.scss index 3e73db10..958849f4 100644 --- a/docs/assets/sass/docs.scss +++ b/docs/assets/sass/docs.scss @@ -1,6 +1,8 @@ // We can't mount GOV.UK Frontend's assets at root as it's done automatically by the extensions framework. $govuk-assets-path: '/govuk/assets/'; +$govuk-new-link-styles: true; + @import "node_modules/govuk-frontend/govuk/all"; img{ diff --git a/docs/documentation/accessibility.md b/docs/documentation/accessibility.md new file mode 100644 index 00000000..e53f3542 --- /dev/null +++ b/docs/documentation/accessibility.md @@ -0,0 +1,91 @@ +--- +title: Accessibility +--- +# Accessibility + +The GOV.UK Prototype Kit website is maintained by a team at the Government Digital Service (GDS). + +This page explains how the team works to ensure the Prototype Kit website is accessible. + +## Accessibility statement for the GOV.UK Prototype Kit website + +This accessibility statement applies to the GOV.UK Prototype Kit documentation website at https://govuk-prototype-kit.herokuapp.com + +The GOV.UK Prototype Kit team wants as many people as possible to be able to use this website. For example, that means you should be able to: + +- change colours, contrast levels and fonts +- zoom in up to 300% without the text spilling off the screen +- navigate most of the website using just a keyboard +- navigate most of the website using speech recognition software +- listen to most of the website using a screen reader (including the most recent versions of JAWS, NVDA and VoiceOver) + +The team has also made the website text as simple as possible to understand. + +[AbilityNet has guidance on adjustments](https://mcmw.abilitynet.org.uk/) you can make on your device to make it easier to use. + +### Feedback and contact information + +The GOV.UK Prototype Kit team is always looking to improve the accessibility of this website. If you find any problems that are not listed on this page or think this website is not meeting accessibility requirements, email the GOV.UK Prototype Kit team at govuk-design-system-support@digital.cabinet-office.gov.uk + +The GOV.UK Prototype Kit team will review your request and get back to you in 2 working days. + +### Enforcement procedure + +The Equality and Human Rights Commission (EHRC) is responsible for enforcing the Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018 (the ‘accessibility regulations’). If you’re not happy with how we respond to your complaint, [contact the Equality Advisory and Support Service (EASS)](https://www.equalityadvisoryservice.com/). + +GDS is committed to making its websites accessible, in accordance with the Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018. + +### Compliance status + +The Prototype Kit website at [https://govuk-prototype-kit.herokuapp.com](/) is partially compliant with the Web Content Accessibility Guidelines (WCAG) version 2.1 AA standard, due to the non-compliances listed below. + +### Non-accessible content + +The content listed below is non-accessible for the following reasons. + +#### Non-compliance with the accessibility regulations + +Some pages do not have descriptive titles. This fails WCAG 2.1 success criterion 2.4.2 (page titles). + +Some images do not have a good text alternative, so people using a screen reader cannot access the information. This fails WCAG 2.1 success criterion 1.1.1 (non-text content). + +The text in the code examples cannot be resized using browser controls. This fails WCAG 2.1 success criterion 1.4.4 (resize text). + +The code examples require scrolling horizontally on small screens. This fails WCAG 2.1 success criterion 1.4.10 (reflow). + +Some code examples require scrolling within the element. This is not possible with a keyboard. This fails WCAG 2.1 criterion 2.1.1 (keyboard). + +The session is 4 hours long and cannot be extended. This fails WCAG 2.1 criterion 2.2.1 (timing adjustable). + +The kit uses an old version of the step by step pattern, in which it is not clear if elements are buttons or links. This fails WCAG 2.1 criterion 1.3.1 (info and relationships). + +We plan to fix these issues by 31 March 2022. + +### How this website has been tested for accessibility + +The GOV.UK Prototype Kit website was last tested on 5 October 2021. + +The test was carried out by the GOV.UK Prototype Kit team. + +The GOV.UK Prototype Kit team tested a sample of pages to cover the different content types in the Prototype Kit website. They were: + +- [the homepage](/docs) +- [the tutorials and templates page](/docs/tutorials-and-examples) +- [the tutorial pages](/docs/make-first-prototype/start) +- [the guide pages](/docs/publishing-on-heroku) +- [the example pages](/docs/examples/pass-data) + +### How the GOV.UK Prototype Kit team makes this website accessible + +The GOV.UK Prototype Kit team works to ensure that the Prototype Kit website is accessible. + +The team aims to research the Prototype Kit website with a representative range of users including those with disabilities. + +We also test to ensure they work with a broad range of browsers, devices and assistive technologies - including screen magnifiers, screen readers and speech recognition tools. + +When we publish new content, we’ll continue to make sure that it meets accessibility standards. + + +### Preparation of this accessibility statement + +This statement was prepared on 5 November 2021. diff --git a/docs/documentation/adding-css-javascript-and-images.md b/docs/documentation/adding-css-javascript-and-images.md index 394b40c4..9d8e1302 100644 --- a/docs/documentation/adding-css-javascript-and-images.md +++ b/docs/documentation/adding-css-javascript-and-images.md @@ -1,6 +1,9 @@ -# Adding CSS, JavaScript and Images +--- +title: Add CSS, JavaScript, images and other files +--- +# Add CSS, JavaScript, images and other files -The Prototype Kit comes with standard GOV.UK Frontend styles and components for you to use in your prototypes. However if you need to add your own CSS (Cascading Style Sheets), JavaScript or images, use the `/app/assets` folder. +The Prototype Kit comes with standard GOV.UK Frontend styles and components for you to use in your prototypes. However, if you need to add your own CSS (Cascading Style Sheets), JavaScript, images or other files (for example, PDFs), use the `/app/assets` folder. The Prototype Kit processes all the files in the `/app/assets` folder, and puts the processed files in `/public`. @@ -18,7 +21,7 @@ To add styles use: Do not edit the file `/public/styles/application.css` because it’s deleted and rebuilt every time you make a change to your prototype. -The Prototype Kit uses [Sass](https://sass-lang.com/guide), which adds extra features to CSS. +The [Prototype Kit uses Sass](https://sass-lang.com/guide), which adds extra features to CSS. ### Using import diff --git a/docs/documentation/backwards-compatibility.md b/docs/documentation/backwards-compatibility.md index 282b474b..5687b906 100644 --- a/docs/documentation/backwards-compatibility.md +++ b/docs/documentation/backwards-compatibility.md @@ -1,4 +1,7 @@ -# Using backwards compatibility +--- +title: Use backwards compatibility to upgrade from version 6 +--- +# Use backwards compatibility to upgrade from version 6 Version 7 of the Prototype Kit uses the new GOV.UK Design System. It is not compatible with prototypes built with older versions by default. diff --git a/docs/documentation/creating-routes.md b/docs/documentation/creating-routes.md index 414a02fa..007209d5 100644 --- a/docs/documentation/creating-routes.md +++ b/docs/documentation/creating-routes.md @@ -1,4 +1,7 @@ -# Creating routes +--- +title: Create routes +--- +# Create routes You may want to make prototypes that are more complex than simple HTML files. For example, you may want to respond to input from a form, and show different pages based on answers given by the user. @@ -44,4 +47,4 @@ Template files are found this way: `/views/` + `template` parameter + `.html`. T In the same way, the template `/examples/hello_world` would point to the `/examples/hello_world.html` file. -[Read the Express documentation for routes](http://expressjs.com/4x/api.html#app.VERB) \ No newline at end of file +[Express documentation for routes](http://expressjs.com/4x/api.html#app.VERB) \ No newline at end of file diff --git a/docs/documentation/extension-system.md b/docs/documentation/extension-system.md index c979d882..e4c0a7bc 100644 --- a/docs/documentation/extension-system.md +++ b/docs/documentation/extension-system.md @@ -1,3 +1,6 @@ +--- +title: Extension system +--- # Extension system The extension system information should go here before it's adopted into GOVUK. diff --git a/docs/documentation/github-desktop.md b/docs/documentation/github-desktop.md new file mode 100644 index 00000000..25b0a645 --- /dev/null +++ b/docs/documentation/github-desktop.md @@ -0,0 +1,47 @@ +--- +title: Store your code online with GitHub or GitHub Desktop +--- +# Store your code online with GitHub or GitHub Desktop + +GitHub is a way to store code online so you can collaborate with other people. It also makes it easier to publish your prototype online with Heroku. + +Some concepts: + +- Git - software that stores versions of your code +- GitHub - a website that shares your code online +- GitHub Desktop - an app that puts your code on GitHub +- Repository/repo - a project stored in Git + +## Set up GitHub Desktop + +1. [Create a free GitHub account](https://github.com/join). + +2. [Download the GitHub Desktop app](https://desktop.github.com/). + +3. Run GitHub Desktop. + +4. Sign in with your GitHub account details. + +## Store your prototype in Git + +1. Select **Add an Existing Repository** (if it's not on the screen, click the **File** menu and select **Add Local Repository**). + +2. Set the **local path** to your prototype folder. Github Desktop will now show a warning, but do not worry - this is the correct process. + +A screenshot of GitHub Desktop at this point: + +![](/public/images/docs/github-desktop-add-local-repository.png) + +3. In the warning, click the **create a repository** link. + +4. On the next screen, titled **Create a repository**, click the **Create repository** button. + +## Upload your prototype to GitHub + +1. In the top right, click **publish repository**. + +2. Make sure **'Keep this code private'** is not ticked, as we need others to be able to see and collaborate on it. + +3. Click **publish repository.** + +Your prototype code is now on GitHub, which means other people can see and collaborate on your code. diff --git a/docs/documentation/install/developer-install-instructions.md b/docs/documentation/install/developer-install-instructions.md index f926d336..849a86e4 100644 --- a/docs/documentation/install/developer-install-instructions.md +++ b/docs/documentation/install/developer-install-instructions.md @@ -1,12 +1,15 @@ -# Instructions for developers +--- +title: Installation guide for advanced users +--- +# Installation guide for advanced users -It's built on the [Express](http://expressjs.com/) framework, and uses [GOV.UK Frontend](https://github.com/alphagov/govuk-frontend). +It's built on the [Express framework](http://expressjs.com/), and uses [GOV.UK Frontend](https://github.com/alphagov/govuk-frontend). If you already installed a previous version of the Prototype Kit, you can [update the kit](/docs/updating-the-kit) instead. ## Requirements -node.js - version 12.x.x +node.js - version 16.x.x ## Install dependencies @@ -19,4 +22,4 @@ npm install npm start ``` -Go to [localhost:3000](http://localhost:3000) in your browser. +[Go to localhost:3000](http://localhost:3000) in your browser. diff --git a/docs/documentation/install/install-the-kit.md b/docs/documentation/install/install-the-kit.md index 6f6d8bad..4a14327e 100644 --- a/docs/documentation/install/install-the-kit.md +++ b/docs/documentation/install/install-the-kit.md @@ -1,68 +1,78 @@ -# Install the kit +--- +title: How to install the kit +caption: Installation guide for new users +--- +# How to install the kit ## Download the kit as a zip -The simplest way to get the kit is to download it as a zip. You'll use a new copy of the kit for each new prototype you make. That way your prototypes don’t interfere with each other. +The simplest way to get the kit is to download it as a zip. -### Decide where you want to keep your prototypes +You'll use a new copy of the kit for each new prototype you make. That way your prototypes don’t interfere with each other. -We recommend keeping all your prototypes in one folder called `projects`. +Make sure you are installing the kit on a local drive. Do not install the kit on a cloud-based drive (for example, Dropbox, Microsoft OneDrive), as this may cause permissions issues. -#### Mac users +### Make a folder for your prototypes -Create a folder called `projects` in your home folder. You can open your home folder by opening a new finder window, and selecting `go > home` from the top menu. +We recommend keeping all your prototypes in one folder called `prototypes`. -![Screenshot of a 'projects' folder in the mac home folder](/public/images/docs/mac-home-folder-projects.png) - -#### Windows users - -Create a folder called `projects` in your `Documents` folder. +Create a folder called `prototypes` in your `Documents` folder. ### Unzip the kit and move it Unzip the kit you downloaded - you should end up with a folder called `govuk-prototype-kit` followed by the version number. -Rename the folder to something descriptive for your prototype. For this guide, we’ll use `juggling-licence-prototype`. +Rename the folder to something descriptive for your prototype. For this guide, we’ll use `juggling-licence`. -Move the folder into your `projects` folder. +Move the folder into your `prototypes` folder. ## Terminal basics -The terminal (on Mac and Linux, git bash on Windows) lets you type in commands and run programs on your computer. You can also use it to browse your file system, for example to open folders. +The terminal on MacOS and Linux (and Git Bash on Windows, which is part of Git for Windows) lets you type in commands and run programs on your computer. -You can follow a [tutorial on basic terminal commands](https://tutorials.codebar.io/command-line/introduction/tutorial.html) on the codebar website. +The important thing to remember about the terminal is that you‘re working in one directory (folder) at any one time. -### Navigating to your prototype +There are a few commands you‘ll have to run in the terminal to use the Prototype Kit. -You need to navigate to your prototype in the terminal. Most commands for the kit need to be run in the prototype folder. +### Commands -If you're using a Mac, enter: +* `cd [name of directory]` = change to [name of directory] +* `cd ~` = go to your home directory +* `ls` = list all the folders and files in a directory +* `pwd` = print working directory tells you what directory you’re in +* press up and down on the keyboard to go through previous commands +* `npm start` = start the Prototype Kit (you need to be in your prototype folder) -``` -cd ~/projects/juggling-licence-prototype -``` +To quit the kit, in the terminal press the ctrl and c keys together. -If you're using Windows, enter: +If you type a command that the terminal does not understand, it will show you an error message. Do not worry if you see one of these. Have a look at the command you wrote and see if there is a typo in the command. + +You can follow a [tutorial on basic terminal commands](https://tutorials.codebar.io/command-line/introduction/tutorial.html) on the codebar website. + +### Navigating to your prototype folder + +You need to navigate to your prototype folder in the terminal. Most commands for the kit need to be run in the prototype folder. ``` -cd ~/Documents/projects/juggling-licence-prototype +cd ~/Documents/prototypes/juggling-licence ``` +Take note of what is upper or lower case - for example lower case 'd' for 'Documents' will not work. + If any of your folder names contain spaces, you must add quotation marks around everything after `~/`. For example: ``` -cd ~/"a folder name with spaces/Documents/projects/juggling-licence-prototype" +cd ~/"a folder name with spaces/Documents/prototypes/juggling-licence" ``` -## Install the kit +## Install modules -### Install modules +You need to download extra code used by the kit before it can run. You only need to run this command the first time you start or download a prototype: -You need to download extra code used by the kit before it can run. You can get this by running: ``` npm install ``` -The install may take up to a minute. Whilst installing it may `WARN` about some items - this is ok. As long as there are no `ERROR`s you can continue. +The install may take about a minute. Whilst installing, it may `WARN` about some items - this is ok. As long as there are no `ERROR`s, you can continue. -Next (run the kit) +Next (How to run the kit) diff --git a/docs/documentation/install/introduction.md b/docs/documentation/install/introduction.md index b2a90e2f..8e20310c 100644 --- a/docs/documentation/install/introduction.md +++ b/docs/documentation/install/introduction.md @@ -1,14 +1,17 @@ +--- +title: Installation guide for new users +--- # Installation guide for new users -This guide will walk you through installing and getting started with the kit. You don’t need any technical knowledge to follow along. If you get stuck, contact us using the [#prototype-kit Slack channel](https://ukgovernmentdigital.slack.com/messages/C0647LW4R/), or if you have a developer on your team, they should be able to help. +This guide will walk you through installing and getting started with the kit. You don’t need any technical knowledge to follow along. If you get stuck, contact us using the [#prototype-kit channel on cross-government Slack](https://ukgovernmentdigital.slack.com/messages/C0647LW4R/), or if you have a developer on your team, they should be able to help. Installation takes up to 30 minutes depending on how much you need to install. -If you already installed a previous version of the Prototype Kit, you can [update the kit](/docs/updating-the-kit) instead. +If you already installed a previous version of the Prototype Kit, you can [update your Prototype Kit](/docs/updating-the-kit) instead. -If you’re comfortable using git and the terminal, you may prefer the [developer friendly instructions](developer-install-instructions). +If you’re comfortable using git and the terminal, you may prefer the [guide for advanced users](developer-install-instructions). -> This guide is a work in progress. Please help [contribute](https://github.com/alphagov/govuk-prototype-kit/blob/master/CONTRIBUTING.md) to make it even better. +> This guide is a work in progress. [You can contribute](https://github.com/alphagov/govuk-prototype-kit/blob/main/CONTRIBUTING.md) to make it better. ## Introduction @@ -18,4 +21,4 @@ The GOV.UK Prototype Kit provides a simple way to make interactive prototypes th You’ll use a copy of the kit for each different prototype you want to make - they’re self contained. Once installed, the kit uses about 100mb. -Next (requirements) +Next (Prototype Kit requirements) diff --git a/docs/documentation/install/requirements.md b/docs/documentation/install/requirements.md index 9cca9d24..4ea5278a 100644 --- a/docs/documentation/install/requirements.md +++ b/docs/documentation/install/requirements.md @@ -1,8 +1,12 @@ -# Requirements +--- +title: Prototype Kit requirements +caption: Installation guide for new users +--- +# Prototype Kit requirements -The kit runs on Mac, Windows and Linux. At a minimum you’ll need `node.js` (install instructions below) and a web browser. +The GOV.UK Prototype Kit runs on Mac, Windows and Linux. At a minimum you’ll need Node.js (install instructions below) and a web browser. -This guide recommends additional software which will be used in later guides. +[If you're using an M1 Mac issued in 2020 or later](https://en.wikipedia.org/wiki/Apple_M1#Products_that_include_the_Apple_M1), you might experience issues when you run the Prototype Kit. To get support, [contact the Prototype team](/docs/about). ## Software you need @@ -10,13 +14,12 @@ You'll usually need admin access to your machine to install the software. If you do not have admin access, ask your IT team to install the software for you. -GDS staff can install the software themselves with Managed Software Centre (MSC). +GDS staff can install the software themselves with the Self Service app. You'll need: -* Node.js 12.x.x -* Atom (text editor) -* Git bash (Windows) +* Node.js 16.x.x +* Git Bash (if you're using Windows, see below) ## Terminal @@ -24,57 +27,50 @@ You'll need a terminal application to install, start and stop the kit. Using a t ### Mac users -Macs come with `Terminal.app`. It’s located in the `Utilities` folder in the `Applications` folder. You can also find it using spotlight (magnifying glass icon in the top right) and typing 'terminal'. +Macs come with a terminal application already. It’s located in the `Utilities` folder in the `Applications` folder. You can also find it using spotlight (magnifying glass icon in the top right) and typing 'terminal'. ### Windows users This guide will use `Git Bash` as a terminal instead of the existing `CMD` application. Git Bash is more fully featured and uses the same commands as Mac and Linux, so instructions in this guide work for all. -Installing `git bash` installs two things for you: a terminal (for entering commands), and git (used later to share your work with others). +Installing `Git Bash` installs 2 things for you: -#### Installing git bash +* a terminal (for entering commands) and +* Git (used later to share your work with others) -Download [Git bash (direct download)](https://git-scm.com/download/win). +#### Installing Git Bash for Windows users -Install with all default options. +Download [Git Bash (direct download)](https://git-scm.com/download/win). -### Entering commands in the terminal - -Commands to be entered in to the terminal will be inset like this: -``` -command to be typed in to terminal -``` -Once you’ve typed the command, press enter to send it. +Install with all the default options. +## Node.js version 16 LTS -## Node.js version 12 LTS - -The kit is designed to work with Node.js version 12 LTS. The kit works with any 12.x.x version. +The kit is designed to work with Node.js version 16 LTS. The kit works with any 16.x.x version. ### Check if you have Node.js -In terminal (git bash in Windows): +In terminal (Git Bash in Windows): ``` node --version ``` -If it says `command not found` or `Error 0x2 starting node.exe --version` you don’t have node and will need to download and install it. +If it says `command not found` or `Error 0x2 starting node.exe --version` you don’t have Node and will need to download and install it. -If the version number starts with 12 you have the correct version installed. +If the version number starts with 16 you have the correct version installed. -If it says another number such as `0.12` or `5.x.x`, you need to download and install version 12. +If it says another number such as `0.12` or `5.x.x`, you need to download and install version 16. ### Download and install Node.js #### Mac / Windows users -Download version 12 from [nodejs.org](https://nodejs.org/en/). +[Download version 16 from the Node.js website.](https://nodejs.org/en/) Run the installer with all default options. #### Linux users -Follow the instructions on the [Node.js](https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions -) site. Make sure you get version 12. +[Follow the Linux instructions on the Node.js. website.](https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions) Make sure you get version 16. ### Once Node is installed @@ -85,10 +81,6 @@ To check it is installed correctly you can again run: node --version ``` -If it’s installed correctly it should show a number starting with 12. - -## Atom (text editor) - -You’ll need a text editor to edit and make changes to your prototype. We recommend [Atom](https://atom.io/) - which is free and has lots of useful features. +If it’s installed correctly it should show a number starting with 16. -Next (install the kit) +Next (How to install the kit) diff --git a/docs/documentation/install/run-the-kit.md b/docs/documentation/install/run-the-kit.md index 286030e8..c74f0681 100644 --- a/docs/documentation/install/run-the-kit.md +++ b/docs/documentation/install/run-the-kit.md @@ -1,18 +1,32 @@ -# Run the kit +--- +title: How to run the kit +caption: Installation guide for new users +--- +# How to run the kit You’ll use the terminal to start and stop the kit. ## Open the prototype folder in terminal -In terminal, navigate to your prototype folder. +If you're following the installation guide, you'll already have the terminal open in the right folder. + +If you're coming back to work on a prototype, you'll need to navigate to the folder: + +``` +cd ~/Documents/prototypes/juggling-licence +``` + +Or replace 'juggling-licence' with the name of your prototype. ## Running the kit -In terminal: +In the terminal, enter: ``` npm start ``` +The first time you run `npm start`, the kit will ask you whether you want to send anonymous data to help the team improve the service. Enter `y` or `n` to answer yes or no. + After the kit has started, you should see a message telling you that the kit is running: ``` Listening on port 3000 url: http://localhost:3000 @@ -20,7 +34,7 @@ Listening on port 3000 url: http://localhost:3000 ## Check it works -In your web browser, visit http://localhost:3000 (opens in a new tab) +In your web browser, open http://localhost:3000 (opens in a new tab) You should see the prototype welcome page. @@ -30,14 +44,14 @@ You should see the prototype welcome page. It’s fine to leave the kit running for days or while your computer is asleep. -### To quit the kit - -In terminal press the `ctrl` and `c` keys together. +To quit the kit, in the terminal press the `ctrl` and `c` keys together. ## Installation complete The kit is now installed. Congratulations! -The Prototype Kit is updated regularly. We announce new versions of the Prototype Kit in the [#prototype-kit channel on cross-government Slack](https://ukgovernmentdigital.slack.com/messages/prototype-kit/). You should [update to the latest version](/docs/updating-the-kit) to get the latest components, new features and fixes. +The Prototype Kit is updated regularly. We announce new versions of the Prototype Kit in the [#prototype-kit channel on cross-government Slack](https://ukgovernmentdigital.slack.com/messages/prototype-kit/). You should [update to the latest version of the kit](/docs/updating-the-kit) to get the latest components, new features and fixes. + +## Make your first prototype - +You can now start the tutorial to [make your first prototype](/docs/make-first-prototype/start). diff --git a/docs/documentation/make-first-prototype/add-questions.md b/docs/documentation/make-first-prototype/add-questions.md deleted file mode 100644 index 14ac0626..00000000 --- a/docs/documentation/make-first-prototype/add-questions.md +++ /dev/null @@ -1,52 +0,0 @@ -# Add questions to your question pages - -Copy the code from the [GOV.UK Design System](https://design-system.service.gov.uk/) to add page elements like radios and text inputs. - -## Add radios to question 1 - -1. Go to the [stacked radios section of the Design System](https://design-system.service.gov.uk/components/radios/#stacked-radios). -2. Select **HTML**, then select **Copy code**. -3. Open `juggling-balls.html` in your `app/views` folder. -4. Replace the 2 example `

...

` paragraphs with the HTML code you copied. -5. Remove the fourth radio option `
...
` block, because we only need 3 radio options. -6. Select the `

` line you edited when you [created the page](create-pages#question-pages), then cut and paste it so it replaces the `

` line in the copied code. - -Replace the text in the 3 `