17 | {{ title }} 18 |
19 |{{ description }}
20 | {{ content | safe }} 21 | {% endblock %} 22 |We're currently reviewing the homepage as part of an information architecture review.
3 |The NHS App design system team provides support for users of the NHS App design system. Contact us to ask for help.
5 |Propose a change on GitHub. To find out how, read how to propose changes in GitHub.
4 | -------------------------------------------------------------------------------- /src/assets/icons/messages.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icons/messages-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/badge/small/badge-small.njk: -------------------------------------------------------------------------------- 1 | {% from "nhsuk/macros/attributes.njk" import nhsukAttributes %} 2 | 3 | 4 | 5 | {{ params.label }} 6 | {{ params.html | safe if params.html else params.text }} 7 | -------------------------------------------------------------------------------- /docs/examples/cards/card-link-short.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/example.njk 3 | title: Card link short 4 | figmaLink: https://www.figma.com/file/6f2CbcZ7cnpNrtKEcfQp8X/NHS-App-Design-System?type=design&node-id=128%3A7303&mode=design&t=DLiyCHcTTAYkEDa0-1 5 | vueLink: https://nhsappvuecomponentlibraryv1.nonlive.nhsapp.service.nhs.uk/?path=/story/components-nhscardlink--default 6 | arguments: card 7 | --- 8 | 9 | {% from 'nhsapp/components/card/macro.njk' import nhsappCard %} 10 | 11 | {{ nhsappCard({ 12 | title: 'Request repeat prescriptions', 13 | href: '#' 14 | }) }} 15 | -------------------------------------------------------------------------------- /src/assets/icons/home-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/badge/large/badge-large.njk: -------------------------------------------------------------------------------- 1 | {% from "nhsuk/macros/attributes.njk" import nhsukAttributes %} 2 | 3 | {%- if params.count -%} 4 |5 | You have 6 | {% if params.count > 9 %} 7 | 9+ 8 | {% else %} 9 | {{ params.count }} 10 | {% endif %} 11 | {{ params.label }} 12 |
13 | {%- endif -%} -------------------------------------------------------------------------------- /docs/community/design-history.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/community.njk 3 | title: Write a design history 4 | order: 6 5 | description: The NHS App design history is a record of design and research for the NHS App. 6 | tags: 7 | - contribution 8 | --- 9 | 10 | There are lots of [benefits to writing design history posts](https://nhsdigital.github.io/design-history-nhsapp/guide/why-we-write-design-histories/). They help us remember and share what has been done and why. 11 | 12 | Find out more on the [NHS App design history website](https://nhsdigital.github.io/design-history-nhsapp/). 13 | -------------------------------------------------------------------------------- /docs/examples/badges/badge-small.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/example.njk 3 | title: Badge Small 4 | figmaLink: https://www.figma.com/design/6f2CbcZ7cnpNrtKEcfQp8X/NHS-App-Design-System?node-id=9994-822&t=Py584cYX2kHgWqGG-1 5 | vueLink: https://nhsappvuecomponentlibraryv1.nonlive.nhsapp.service.nhs.uk/?path=/docs/components-nhsbadge-small--docs 6 | arguments: badge/small 7 | --- 8 | 9 | {% from 'nhsapp/components/badge/small/macro.njk' import nhsappBadgeSmall %} 10 | 11 | {{ nhsappBadgeSmall({ 12 | label: 'New', 13 | text: 'Document attached', 14 | classes: 'nhsuk-body-m' 15 | }) }} 16 | -------------------------------------------------------------------------------- /docs/examples/cards/card-link-secondary.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/example.njk 3 | title: Card link secondary 4 | figmaLink: https://www.figma.com/design/6f2CbcZ7cnpNrtKEcfQp8X/NHS-App-Design-System?node-id=128-7303&t=Bvw33PoP6TmBpN41-1 5 | vueLink: https://nhsappvuecomponentlibraryv1.nonlive.nhsapp.service.nhs.uk/?path=/story/components-nhscardlink--secondary 6 | arguments: card 7 | --- 8 | 9 | {% from 'nhsapp/components/card/macro.njk' import nhsappCard %} 10 | 11 | {{ nhsappCard({ 12 | title: 'Find NHS services near you', 13 | href: '#', 14 | classes: 'nhsapp-card--secondary' 15 | }) }} -------------------------------------------------------------------------------- /docs/examples/page-not-found/native.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/example-full-page-mobile.njk 3 | mobile: true 4 | title: Page not found 5 | figmaLink: 6 | vueLink: 7 | --- 8 | 9 |We'll fix this link as soon as possible. Try again later or use a different service.
15 | 16 |For urgent medical advice, use 111 online or call 111.
17 | 18 |Have your say on making the NHS fit for the future
', 17 | img: { 18 | src: '../../../assets/images/campaign-card-image.jpg' 19 | } 20 | }) }} 21 | -------------------------------------------------------------------------------- /src/assets/icons/account.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/styles/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/style.njk 3 | isIndex: true 4 | title: Styles 5 | description: Make services look and feel like the NHS App. 6 | --- 7 | 8 | Use these styles in addition to those in the [NHS design system](https://service-manual.nhs.uk/design-system). 9 | 10 | ## Iterating a style 11 | 12 | Use existing styles as starting points, but you may need to iterate them to meet user needs for particular services. 13 | 14 | Before iterating a style make sure there is a clear user need to do so. 15 | 16 | [Share any changes you make or research findings](/community/share-findings/) in the NHS App design system backlog. 17 | -------------------------------------------------------------------------------- /src/assets/icons/messages-unread.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icons/home.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/examples/cards/card-link-with-description.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/example.njk 3 | title: Card link with description 4 | figmaLink: https://www.figma.com/file/6f2CbcZ7cnpNrtKEcfQp8X/NHS-App-Design-System?type=design&node-id=128%3A7303&mode=design&t=DLiyCHcTTAYkEDa0-1 5 | vueLink: https://nhsappvuecomponentlibraryv1.nonlive.nhsapp.service.nhs.uk/?path=/story/components-nhscardlink--with-simple-content 6 | arguments: card 7 | --- 8 | 9 | {% from 'nhsapp/components/card/macro.njk' import nhsappCard %} 10 | 11 | {{ nhsappCard({ 12 | title: 'Your approved prescriptions', 13 | href: '#', 14 | description: 'View prescriptions ready for pharmacy to prepare' 15 | }) }} 16 | -------------------------------------------------------------------------------- /docs/examples/cards/card-with-no-link.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/example.njk 3 | title: Card link 4 | figmaLink: 5 | vueLink: https://nhsappvuecomponentlibraryv1.nonlive.nhsapp.service.nhs.uk/?path=/story/components-nhscardbase--read-only 6 | arguments: card 7 | --- 8 | 9 | {% from 'nhsapp/components/card/macro.njk' import nhsappCard %} 10 | 11 | {{ nhsappCard({ 12 | title: 'Orthopaedic appointment', 13 | titleClasses: 'nhsuk-u-font-size-22', 14 | descriptionHtml: ' 15 |Monday 3 June 2024
9:40am
The Willows, Croydon University Hospital
17 | ' 18 | }) }} 19 | -------------------------------------------------------------------------------- /docs/page-not-found.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/base.njk 3 | title: Page not found 4 | permalink: /404.html 5 | eleventyExcludeFromCollections: true 6 | --- 7 | 8 |Please check the web address to make sure it was correct.
14 | 15 |You can also browse the NHS App design system homepage.
16 | 17 |If you think this link is broken, please contact the NHS App design system team.
18 | 19 |If you typed the web address, check it was correct.
14 | 15 |If you pasted the web address, check you copied the entire address.
16 | 17 |Otherwise, this may be a broken link that we will fix as soon as possible. Try again later or use a different service.
18 | 19 |For urgent medical advice, use 111 online or call 111.
20 | 21 |{{ description }}
20 | {{ content | safe }} 21 | {% endblock %} 22 |You will not be able to use it until you do.
18 | 19 |For urgent medical advice, use 111 online or call 111.
20 | 21 | {{ button({ 22 | text: 'Update the NHS App', 23 | classes: 'nhsuk-button--secondary nhsapp-button nhsuk-u-margin-top-3' 24 | }) }} 25 | 26 |Try using wifi or move to a place with better internet connection.
18 | 19 |If you still cannot connect to the internet and need urgent medical advice, call 111.
20 | 21 | {{ button({ 22 | text: 'Try again', 23 | classes: 'nhsuk-button--secondary nhsapp-button nhsuk-u-margin-top-3' 24 | }) }} 25 | 26 |The NHS App design system team would like to hear:
6 | 7 |Add these comments to the '{{ title }}' discussion on GitHub.
13 | 14 | {% endif %} 15 | -------------------------------------------------------------------------------- /docs/examples/timeline/timeline-active.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/example.njk 3 | title: Timeline active 4 | figmaLink: https://www.figma.com/design/6f2CbcZ7cnpNrtKEcfQp8X/NHS-App-Design-System?node-id=4453-2405&t=sIan6GZfBz3Z5bOy-1 5 | vueLink: https://nhsappvuecomponentlibraryv1.nonlive.nhsapp.service.nhs.uk/?path=/docs/components-nhstimeline--docs 6 | arguments: timeline 7 | --- 8 | 9 | {% from 'nhsapp/components/timeline/macro.njk' import nhsappTimeline %} 10 | 11 | {{ nhsappTimeline({ 12 | items: [ 13 | { 14 | headingText: 'Date referred', 15 | isPastItem: true, 16 | text: '8 June 2024' 17 | }, 18 | { 19 | headingText: 'Current status', 20 | active: true, 21 | text: 'Waiting for treatment' 22 | }, 23 | { 24 | headingText: 'Estimated treatment start date', 25 | text: 'September 2024' 26 | } 27 | ] 28 | }) }} 29 | -------------------------------------------------------------------------------- /docs/assets/css/components/_top-nav-native.scss: -------------------------------------------------------------------------------- 1 | .app-top-nav-native { 2 | background-color: nhsuk-colour("grey-5"); 3 | position: fixed; 4 | width: 100%; 5 | z-index: 1; 6 | } 7 | 8 | .app-top-nav-native__nav { 9 | align-items: flex-start; 10 | display: flex; 11 | justify-content: flex-end; 12 | } 13 | 14 | .app-top-nav-native__nav-list { 15 | display: flex; 16 | list-style: none; 17 | margin: 0 -12px 0 0; 18 | padding: 0; 19 | } 20 | 21 | .app-top-nav-native__nav-item { 22 | line-height: 1; 23 | margin: 0; 24 | padding: 0; 25 | } 26 | 27 | .app-top-nav-native__nav-link { 28 | display: block; 29 | padding: 12px; 30 | 31 | &:focus { 32 | background-color: transparent; 33 | box-shadow: none; 34 | } 35 | 36 | .nhsapp-icon { 37 | fill: $nhsuk-focus-text-colour; 38 | flex-shrink: 0; 39 | height: 32px; 40 | width: 32px; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /docs/examples/cards/card-link-light-blue.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/example.njk 3 | title: Card account 4 | figmaLink: 5 | vueLink: 6 | arguments: card-group 7 | --- 8 | 9 | {% from 'nhsapp/components/card/macro.njk' import nhsappCardGroup %} 10 | {% from 'nhsapp/components/card/macro.njk' import nhsappCard %} 11 | 12 | {{ nhsappCardGroup({ 13 | stacked: true, 14 | classes: 'nhsapp-cards--pale-blue', 15 | isListItem: false, 16 | cards: [ 17 | { 18 | title: 'Neil Dean', 19 | titleClasses: 'nhsuk-u-font-size-36', 20 | headingLevel: '2', 21 | descriptionHtml: 'Date of birth: 15 March 1984
22 |NHS number: 123 456 7890
' 23 | }, 24 | { 25 | title: 'Manage health services for others', 26 | href: '#' 27 | } 28 | ] 29 | }) }} 30 | -------------------------------------------------------------------------------- /docs/_includes/layouts/example-full-page-mobile.njk: -------------------------------------------------------------------------------- 1 | --- 2 | htmlAttributes: 3 | class: app-html-background-colour-grey-5 4 | --- 5 | 6 | {% extends "./base.njk" %} 7 | 8 | {% block skiplink %}{% endblock %} 9 | 10 | {% set containerClasses = "app-width-container" %} 11 | {% set mainClasses = "app-main-wrapper" %} 12 | 13 | {% block header %} 14 | {% include "layouts/partials/top-nav-native.njk" %} 15 | {% endblock %} 16 | 17 | {% block footer %} 18 | {% include "layouts/partials/bottom-nav-native.njk" %} 19 | {% endblock %} 20 | 21 | {% block beforeContent %} 22 | {% if backlink %} 23 | {{ backLink({ 24 | href: backLinkHref | default("#"), 25 | text: backLinkText | default("Back"), 26 | classes: "nhsuk-u-margin-top-0 nhsuk-u-margin-bottom-4" 27 | }) }} 28 | {% endif %} 29 | {% endblock %} 30 | 31 | {% block content %} 32 | {{ content | safe }} 33 | {% endblock %} 34 | -------------------------------------------------------------------------------- /docs/examples/cards/card-group-stacked.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/example.njk 3 | title: Card link 4 | figmaLink: https://www.figma.com/file/6f2CbcZ7cnpNrtKEcfQp8X/NHS-App-Design-System?type=design&node-id=128%3A7303&mode=design&t=DLiyCHcTTAYkEDa0-1 5 | vueLink: https://nhsappvuecomponentlibraryv1.nonlive.nhsapp.service.nhs.uk/?path=/story/components-nhscardgroup--unstacked 6 | arguments: card-group 7 | --- 8 | 9 | {% from 'nhsapp/components/card/macro.njk' import nhsappCardGroup %} 10 | {% from 'nhsapp/components/card/macro.njk' import nhsappCard %} 11 | 12 | {{ nhsappCardGroup({ 13 | stacked: true, 14 | cards: [ 15 | { 16 | title: 'GP health record', 17 | href: '#' 18 | }, 19 | { 20 | title: 'View and manage prescriptions', 21 | href: '#' 22 | }, 23 | { 24 | title: 'Upcoming and past appointments', 25 | href: '#' 26 | } 27 | ] 28 | }) }} 29 | -------------------------------------------------------------------------------- /docs/community/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/community.njk 3 | title: Community 4 | --- 5 | 6 | The NHS App design system helps us learn from each other, share knowledge and reuse as much as possible. 7 | 8 | Anyone can contribute. You just need a GitHub account. 9 | 10 | ## How to use GitHub 11 | 12 | GitHub is an online platform. We use it for community collaboration and hosting code. 13 | 14 | If you do not have one already, [create a GitHub account for free](https://github.com/signup). 15 | 16 | On one level, you can simply use GitHub like an online forum. You can take part in conversations and leave comments. 17 | 18 | You can also use GitHub for more advanced tasks. This includes storing prototypes and proposing changes to the design system. [Following the GitHub tutorial](https://docs.github.com/en/get-started/start-your-journey/hello-world) can help you learn more about the GitHub workflows used in such tasks. 19 | -------------------------------------------------------------------------------- /docs/examples/timeline/timeline-inactive.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/example.njk 3 | title: Timeline active 4 | figmaLink: https://www.figma.com/design/6f2CbcZ7cnpNrtKEcfQp8X/NHS-App-Design-System?node-id=4453-2405&t=sIan6GZfBz3Z5bOy-1 5 | vueLink: https://nhsappvuecomponentlibraryv1.nonlive.nhsapp.service.nhs.uk/?path=/docs/components-nhstimeline--docs 6 | arguments: timeline 7 | --- 8 | 9 | {% from 'nhsapp/components/timeline/macro.njk' import nhsappTimeline %} 10 | 11 | {{ nhsappTimeline({ 12 | items: [ 13 | { 14 | headingText: 'Await approval', 15 | text: 'The request will either be approved or rejected. If rejected please contact your Healthcare Professional.', 16 | active: true 17 | }, 18 | { 19 | headingText: 'GP Approval Process', 20 | text: 'Once approved, it can take 3 to 5 working days for a nominated pharmacy to prepare your prescription.' 21 | } 22 | ] 23 | }) }} 24 | -------------------------------------------------------------------------------- /docs/examples/error-pages/manage-services.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/example-full-page-mobile.njk 3 | mobile: true 4 | title: Error page - Could not show people you manage services for 5 | figmaLink: 6 | vueLink: 7 | --- 8 | 9 |Try again later, or contact the GP surgery of the person whose services you were trying to access.
15 | 16 |Make a note of the error code 3e6294 and then contact the NHS App team.
19 | 20 |Check plans you've agreed with your health team about how you want to be cared for
19 | 20 | {{ nhsappCardGroup({ 21 | stacked: true, 22 | cards: [ 23 | { 24 | title: 'Manage your health care plans', 25 | href: '#' 26 | }, 27 | { 28 | title: 'View your universal health care plan', 29 | href: '#' 30 | } 31 | ] 32 | }) }} 33 | 34 |Contact your GP or pharmacy if you need help with a prescription.
19 | 20 |Try loading GP appointments again.
18 | 19 |Contact your GP surgery directly if you need to book or change an appointment now.
22 | 23 |For urgent medical advice, use 111 online or call 111.
24 | 25 | {{ button({ 26 | text: 'Try again', 27 | classes: 'nhsuk-button--secondary nhsapp-button nhsuk-u-margin-top-3' 28 | }) }} 29 | 30 |This page has moved to ${target}.
30 | 31 | ` 32 | } 33 | -------------------------------------------------------------------------------- /src/assets/icons/download.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /docs/get-started/nhsapp-frontend.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/get-started.njk 3 | title: NHS App frontend 4 | tags: 5 | - production 6 | --- 7 | 8 | The [NHS App frontend](https://github.com/nhsuk/nhsapp-frontend) is a CSS library built on top of the [NHS.UK frontend](https://github.com/nhsuk/nhsuk-frontend). It provides NHS App-specific styles and [components](/components). 9 | 10 | This guide explains how to set up the NHS App frontend in production. 11 | 12 | ## Before you start 13 | 14 | Before you begin, make sure you have followed the [NHS design system production setup guide](https://service-manual.nhs.uk/design-system/production). 15 | 16 | ## Include the NHS App frontend in your project 17 | 18 | To start using NHS App styles, components, and patterns, you need to add the NHS App frontend to your project. 19 | 20 | ### Install using npm 21 | 22 | We recommend [installing the NHS App frontend using npm](/get-started/installing-with-npm/). This option lets you: 23 | 24 | - select which component CSS to include 25 | - build your own styles or components using the palette, typography, and spacing mixins 26 | - customise the build, such as overriding colours or enabling global styles 27 | - use the component Nunjucks templates 28 | -------------------------------------------------------------------------------- /src/assets/icons/night.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /docs/_includes/layouts/nhsapp-prototype.njk: -------------------------------------------------------------------------------- 1 | {% extends "./sidebar.njk" %} 2 | 3 | {%- from "./partials/side-navigation.njk" import appSideNavigation %} 4 | 5 | {% block beforeContent %} 6 | {% if title === "Get started" %} 7 | {{ breadcrumb({ 8 | href: "/", 9 | text: "Home" 10 | }) }} 11 | {% else %} 12 | {{ breadcrumb({ 13 | items: [ 14 | { 15 | href: "/", 16 | text: "Home" 17 | }, 18 | { 19 | href: "/get-started", 20 | text: "Get started" 21 | } 22 | ], 23 | href: "/get-started/nhsapp-prototype", 24 | text: "NHS App prototype" 25 | }) }} 26 | {% endif %} 27 | {% endblock %} 28 | 29 | {% set sidebar %} 30 | {{ appSideNavigation({ 31 | label: 'NHS App prototype', 32 | currentPath: page.url, 33 | sections: [ 34 | { 35 | heading: { 36 | text: 'NHS App prototype' 37 | }, 38 | items: collections.nhsappPrototype | sort(attribute="data.order") 39 | } 40 | ] 41 | }) }} 42 | {% endset %} 43 | 44 | {% block content %} 45 | NHS App prototype 46 |{{ description }}
48 | {{ content | safe }} 49 | {% if tags and "style" in tags %} 50 | {% include "layouts/partials/feedback-section.njk" %} 51 | {% endif %} 52 | 53 | {% endblock %} 54 | -------------------------------------------------------------------------------- /src/assets/icons/clock.svg: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /docs/examples/cards/card-link-accessibility.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/example.njk 3 | title: Card link accessibility 4 | figmaLink: https://www.figma.com/file/6f2CbcZ7cnpNrtKEcfQp8X/NHS-App-Design-System?type=design&node-id=128%3A7303&mode=design&t=DLiyCHcTTAYkEDa0-1 5 | vueLink: https://nhsappvuecomponentlibraryv1.nonlive.nhsapp.service.nhs.uk/?path=/docs/components-nhscardbase--docs 6 | arguments: card 7 | --- 8 | 9 | {% from 'nhsapp/components/card/macro.njk' import nhsappCard %} 10 | {% from 'nhsapp/components/tag/macro.njk' import nhsappTag %} 11 | 12 | {% set tag %} 13 | {{ nhsappTag({ 14 | text: 'Action needed', 15 | classes: 'nhsapp-tag--red nhsuk-u-margin-bottom-3', 16 | attributes: { 17 | 'aria-hidden': 'true' 18 | } 19 | }) }} 20 | {% endset %} 21 | 22 | {{ nhsappCard({ 23 | title: 'Orthopaedic appointment', 24 | href: '#', 25 | titleClasses: 'nhsuk-u-font-size-22', 26 | linkAriaLabel: 'Action needed: Orthopaedic appointment on Monday 3 June 2024 at 9:40am, at The Willows, Croydon University Hospital', 27 | descriptionHtml: ' 28 | 29 | 30 | ', 31 | aboveContent: { html: tag } 32 | }) }} 33 | -------------------------------------------------------------------------------- /docs/_includes/layouts/sidebar.njk: -------------------------------------------------------------------------------- 1 | {% extends "./base.njk" %} 2 | 3 | {% block main %} 4 |View or manage upcoming and past appointments, referrals and waiting lists
19 | 20 | {{ nhsappCardGroup({ 21 | stacked: true, 22 | cards: [ 23 | { 24 | title: 'GP surgery appointments', 25 | href: '#' 26 | }, 27 | { 28 | title: 'Referrals', 29 | href: '#' 30 | }, 31 | { 32 | title: 'Hospital appointments', 33 | href: '#', 34 | linkAriaLabel: 'Hospital appointments, you have 1 new notification', 35 | badgeLarge: { 36 | count: 1, 37 | label: 'notification', 38 | attributes: { 'aria-hidden': 'true' } 39 | } 40 | }, 41 | { 42 | title: 'Waiting list', 43 | href: '#' 44 | } 45 | ] 46 | }) }} 47 | 48 |{{ description }}
56 | {{ content | safe }} 57 | {% endblock %} 58 | -------------------------------------------------------------------------------- /docs/examples/cards/card-link-custom.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/example.njk 3 | title: Card link icon 4 | figmaLink: 5 | vueLink: https://nhsappvuecomponentlibraryv1.nonlive.nhsapp.service.nhs.uk/?path=/docs/components-nhscardbase--docs 6 | arguments: card 7 | --- 8 | 9 | {% from 'nhsapp/components/card/macro.njk' import nhsappCard %} 10 | {% from 'nhsapp/components/tag/macro.njk' import nhsappTag %} 11 | 12 | {% set tag %} 13 | {{ nhsappTag({ 14 | text: 'Action needed', 15 | classes: 'nhsapp-tag--red nhsuk-u-margin-bottom-3', 16 | attributes: { 17 | 'aria-hidden': 'true' 18 | } 19 | }) }} 20 | {% endset %} 21 | 22 | {{ nhsappCard({ 23 | title: 'Orthopaedic appointment', 24 | href: '#', 25 | titleClasses: 'nhsuk-u-font-size-22', 26 | linkAriaLabel: 'Action needed: Orthopaedic appointment on Monday 3 June 2024 at 9:40am, at The Willows, Croydon University Hospital', 27 | descriptionHtml: ' 28 | 29 | 30 |31 | 32 | New 33 | Questionnaire attached 34 |
35 | ', 36 | aboveContent: { html: tag } 37 | }) }} 38 | -------------------------------------------------------------------------------- /docs/_includes/layouts/component.njk: -------------------------------------------------------------------------------- 1 | {% extends "./sidebar.njk" %} 2 | 3 | {%- from "./partials/side-navigation.njk" import appSideNavigation %} 4 | 5 | {% block beforeContent %} 6 | {% if title === "Components" %} 7 | {{ breadcrumb({ 8 | href: "/", 9 | text: "Home" 10 | }) }} 11 | {% else %} 12 | {{ breadcrumb({ 13 | items: [ 14 | { 15 | href: "/", 16 | text: "Home" 17 | } 18 | ], 19 | href: "/components", 20 | text: "Components" 21 | }) }} 22 | {% endif %} 23 | {% endblock %} 24 | 25 | {% set sidebar %} 26 | {{ appSideNavigation({ 27 | label: 'Components', 28 | currentPath: page.url, 29 | sections: [ 30 | { 31 | heading: { 32 | text: 'Components' 33 | }, 34 | items: collections.component | sort(attribute="data.title") 35 | }, 36 | { 37 | heading: { 38 | text: 'Archived' 39 | }, 40 | items: collections.archivedComponent | sort(attribute="data.title") 41 | } 42 | ] 43 | }) }} 44 | {% endset %} 45 | 46 | {% block content %} 47 | {% if tags and ("component" in tags or "archivedComponent" in tags) %} 48 | Components 49 | {% endif %} 50 |{{ description }}
54 | {{ content | safe }} 55 | {% if tags and "component" in tags %} 56 | {% include "layouts/partials/feedback-section.njk" %} 57 | {% endif %} 58 | 59 | {% endblock %} 60 | -------------------------------------------------------------------------------- /docs/get-started/nhsapp-prototype/github.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/nhsapp-prototype.njk 3 | title: Store prototype code on GitHub 4 | order: 4 5 | tags: 6 | - nhsappPrototype 7 | help: no 8 | --- 9 | 10 | Store your prototype as a repository in the GitHub NHS Digital organisation account. 11 | 12 | 1. Request access to the GitHub NHS Digital organisation. Follow the [GitHub users guidance on SharePoint](https://nhs.sharepoint.com/:u:/r/sites/X26_EngineeringCOE/SitePages/GitHub-User---how-to-request-access.aspx?csf=1&web=1&e=T1oQKj) (use your `nhs.net` email to access this link). 13 | 2. Once you have access, go to the [GitHub NHS Digital organisation](https://github.com/NHSDigital) and use your `nhs.net` email to log in. 14 | 3. Select **New** to create a repository. 15 | 4. Name your prototype to avoid confusion with production services. Use the format `nhsapp-prototype-[project-name]`, such as `nhsapp-prototype-prescriptions`. 16 | 5. Select **Internal** and **Create repository**. 17 | 6. Upload your prototype to GitHub. You can follow the NHS prototype kit guidance on how to [store code online with GitHub and GitHub Desktop](https://prototype-kit.service-manual.nhs.uk/how-tos/github/index). 18 | 19 |Check your prescriptions and choose the pharmacy they are collected or delivered from
19 | 20 | {{ nhsappCardGroup({ 21 | stacked: true, 22 | cards: [ 23 | { 24 | title: 'Requested medicines', 25 | description: 'Check if your GP has approved the medicines you requested in the app', 26 | href: '/pages/your-health/requested-medicines' 27 | }, 28 | { 29 | title: 'Check if your prescriptions are ready', 30 | description: 'View prescriptions being prepared by the pharmacy', 31 | href: '/pages/your-health/your-approved-prescriptions' 32 | }, 33 | { 34 | title: 'Choose a pharmacy', 35 | description: 'Choose or change a pharmacy for your prescriptions to be collected or delivered from', 36 | href: '#' 37 | }, 38 | { 39 | title: 'Hospital and other medicines', 40 | description: 'View your current and past medicines', 41 | href: '#' 42 | } 43 | ] 44 | })}} 45 | 46 |You can download a new copy for each project and store your code on GitHub.
29 |Page description to help users understand the problem.
20 | 21 |Make a note of the error code 3ezxja and then contact the NHS App team.
24 | 25 |For urgent medical advice, use 111 online or call 111.
26 | 27 | {{ button({ 28 | text: 'CTA button', 29 | classes: 'nhsuk-button--secondary nhsapp-button nhsuk-u-margin-top-3' 30 | }) }} 31 | 32 |View your personal records and choices
18 | 19 | {{ nhsappCardGroup({ 20 | stacked: true, 21 | cards: [ 22 | { 23 | title: 'GP health record', 24 | href: '#' 25 | }, 26 | { 27 | title: 'View and manage prescriptions', 28 | href: '/pages/your-health/prescriptions-p9' 29 | }, 30 | { 31 | title: 'Upcoming and past appointments', 32 | href: '/pages/your-health/upcoming-and-past-appointments-p9' 33 | }, 34 | { 35 | title: 'Test results and imaging', 36 | href: '#' 37 | }, 38 | { 39 | title: 'COVID-19 vaccine record', 40 | href: '#' 41 | }, 42 | { 43 | title: 'NHS COVID Pass', 44 | href: '#' 45 | }, 46 | { 47 | title: 'Your health choices', 48 | href: '/pages/your-health/your-health-choices-p9' 49 | }, 50 | { 51 | title: 'Care plans', 52 | href: '/pages/your-health/care-plans-p9' 53 | } 54 | ] 55 | })}} 56 | 57 |View your personal records and choices
18 | 19 | {{ nhsappCardGroup({ 20 | stacked: true, 21 | cards: [ 22 | { 23 | title: 'GP health record', 24 | href: '#' 25 | }, 26 | { 27 | title: 'View and manage prescriptions', 28 | href: '/pages/your-health/prescriptions-p9' 29 | }, 30 | { 31 | title: 'Upcoming and past appointments', 32 | href: '/pages/your-health/upcoming-and-past-appointments-p9' 33 | }, 34 | { 35 | title: 'Test results and imaging', 36 | href: '#' 37 | }, 38 | { 39 | title: 'COVID-19 vaccine record', 40 | href: '#' 41 | }, 42 | { 43 | title: 'NHS COVID Pass', 44 | href: '#' 45 | }, 46 | { 47 | title: 'Your health choices', 48 | href: '/pages/your-health/your-health-choices-p9' 49 | }, 50 | { 51 | title: 'Care plans', 52 | href: '/pages/your-health/care-plans-p9' 53 | } 54 | ] 55 | })}} 56 | 57 |{{ description }}
59 | {{ content | safe }} 60 | {% if tags and ("page" in tags or "helpUsers" in tags) %} 61 | {% include "layouts/partials/feedback-section.njk" %} 62 | {% endif %} 63 | {% endblock %} 64 | -------------------------------------------------------------------------------- /docs/get-started/installing-with-npm.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/get-started.njk 3 | title: Installing NHS App frontend with npm 4 | --- 5 | 6 | ## Requirements 7 | 8 | To use NHS App frontend with node package manager (npm) you must: 9 | 10 | 1. Install the long-term support (LTS) version of [Node.js](https://nodejs.org/en/), which includes npm. 11 | 12 | 2. Create a [package.json file](https://docs.npmjs.com/files/package.json) if you don’t already have one. You can create a default `package.json` file by running `npm init` from the root of your application. 13 | 14 | ## Installation 15 | 16 | To install, run: 17 | 18 | ```sh 19 | npm install --save nhsapp-frontend 20 | ``` 21 | 22 | If you want to use the NHS App frontend Nunjucks macros, install Nunjucks - the minimum version required is 3.0.0. 23 | 24 | ```sh 25 | npm install nunjucks --save 26 | ``` 27 | 28 | After you have installed NHS App frontend the `nhsapp-frontend` package will appear in your `node_modules` folder. 29 | 30 | ## Importing styles 31 | 32 | You need to import the NHS App frontend styles into the main Sass file in your project. You should place the below code before your own Sass rules (or Sass imports) if you want to override NHS App frontend with your own styles. 33 | 34 | 1. To import all components, add the below to your Sass file: 35 | 36 | ```CSS 37 | @import "node_modules/nhsapp-frontend/all"; 38 | ``` 39 | 40 | 2. To import an individual component (for example a button), add the below to your Sass file: 41 | 42 | ```CSS 43 | @import "node_modules/nhsapp-frontend/components/button/button"; 44 | ``` 45 | 46 | ## Importing assets 47 | 48 | The NHS App Frontend ships with all SVG icons. They can be found in `node_modules/nhsapp-frontend/assets/icons`. 49 | -------------------------------------------------------------------------------- /src/components/timeline/timeline.njk: -------------------------------------------------------------------------------- 1 | {% from "nhsuk/macros/attributes.njk" import nhsukAttributes %} 2 | 3 | {% macro _timelineItem(params, item) %} 4 | {% set headingLevel = params.headingLevel if params.headingLevel else 3 %} 5 | {% set headingBold = 'nhsuk-u-font-weight-bold' if item.active else '' %} 6 | {% set isPastItem = 'nhsapp-timeline__item--past' if item.isPastItem else '' %} 7 | 8 |{{ item.text }}
24 | {% endif %} 25 |Get care and support to help you stay well
18 | 19 | {{ nhsappCardGroup({ 20 | stacked: true, 21 | heading: 'Your GP services', 22 | cards: [ 23 | { 24 | title: 'Request medicines', 25 | href: '#' 26 | }, 27 | { 28 | title: 'Contact your GP surgery for a document or update', 29 | href: '#' 30 | }, 31 | { 32 | title: 'Check for available GP appointments', 33 | href: '#' 34 | } 35 | ] 36 | }) }} 37 | 38 | {{ nhsappCardGroup({ 39 | stacked: true, 40 | heading: 'Other NHS services', 41 | cards: [ 42 | { 43 | title: 'Check if you need urgent medical help using 111 online', 44 | href: '#' 45 | }, 46 | { 47 | title: 'Find NHS services near you', 48 | href: '#' 49 | } 50 | ] 51 | }) }} 52 | 53 | {{ nhsappCardGroup({ 54 | stacked: true, 55 | heading: 'Find health information', 56 | cards: [ 57 | { 58 | title: 'Browse NHS health information', 59 | href: '#' 60 | }, 61 | { 62 | title: 'Browse NHS medicines information', 63 | href: '#' 64 | }, 65 | { 66 | title: 'Find COVID-19 guidance', 67 | href: '#' 68 | } 69 | ] 70 | })}} 71 | 72 |17 | {{ params.description }} 18 |
19 | {% elif params.descriptionHtml %} 20 | {{ params.descriptionHtml | safe }} 21 | {% endif %} 22 | 23 | {# Control whether it renders as a list ofYou can find the icons in Figma (opens in a new tab) 35 | 36 | ## Accessibility 37 | 38 | Icons that act as functional buttons should have aria labels, so that they are announced to screen reader users. If an icon is not functional, and it appears alongside supporting text that conveys the same meaning, it may not need alt-text or an aria label. 39 | 40 | Designers and developers should work together to understand the most accessible option in context, considering [NHS Service Manual accessibility guidance](https://service-manual.nhs.uk/accessibility/design). 41 | 42 | ## Research 43 | 44 | The icons used on the top navigation and bottom navigation of the NHS App were well-recognised when shown to users without supporting text in our research sessions. 45 | 46 | Participants generally understood the meaning of the icons. However, the research supported the need for some icons to have accompanying text to make the meaning clear. 47 | -------------------------------------------------------------------------------- /docs/components/badge.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/component.njk 3 | title: Badge 4 | description: Use badges to alert users to unread information. Badges can include a number count. 5 | backlogID: 21 6 | tags: 7 | - component 8 | --- 9 | 10 | ## When to use 11 | 12 | Badges can be placed: 13 | 14 | - on the edge of an icon 15 | - on a card 16 | 17 | Badges help to notify users about unread information that needs their attention. This could include new messages or new documents. 18 | 19 | ## How to use 20 | 21 | Badges should be dynamic and temporary. After users have viewed the relevant information, badges should either: 22 | 23 | - disappear 24 | - remain if there are still unread items (but with an adjusted number count, if one is used) 25 | 26 | ### Large badges 27 | 28 | Large badges always include a number count. This tells users how many items need their attention. 29 | 30 | {% example "badges/badge-large.njk" %} 31 | 32 | Above the count of 9, large badges always display 9+. This allows the width of the badge to be restricted to two characters. 33 | 34 | {% example "badges/badge-large-9.njk" %} 35 | 36 | ### Small badges 37 | 38 | Small badges are simple circles. They can be placed: 39 | 40 | - on the edge of icons, such as on the bottom navigation 41 | - on cards, alongside text, such as “Document attached” on appointment cards 42 | 43 | {% example "badges/badge-small.njk" %} 44 | 45 | We show a red badge on the bottom navigation to indicate unread messages. 46 | 47 |  48 | 49 | When users then navigate to their messages inbox to view those messages, unread message headings are indicated by red badges. 50 | 51 | {% example "cards/card-messages.njk" %} 52 | 53 | ## Accessibility 54 | 55 | Badges are designed to stand out when placed over icons and cards. The contrast ratio is 3:1, meeting [WCAG 2.2. Contrast (Minimum) (Level AA)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum). 56 | 57 | We use visually hidden text to convey badges to screen reader users. Large badges announce the number count up to 9. They announce "nine plus" after that to match the visual display of 9+. 58 | 59 | Small badges could announce "New notification", "Important" or "You have unread messages" depending on the context. 60 | -------------------------------------------------------------------------------- /docs/examples/hub-pages/messages.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/example-full-page-mobile.njk 3 | mobile: true 4 | hub: Messages 5 | title: Messages 6 | figmaLink: 7 | vueLink: 8 | --- 9 | 10 | {% from 'nhsapp/components/card/macro.njk' import nhsappCardGroup %} 11 | {% from 'nhsapp/components/card/macro.njk' import nhsappCard %} 12 | {% from 'nhsapp/components/badge/large/macro.njk' import nhsappBadgeLarge %} 13 | 14 |
You have 4 inboxes
19 | 20 | {% if data['messages'] > 0 %} 21 | {% set badge %} 22 | {{ nhsappBadgeLarge({ 23 | count: data['messages'], 24 | label: 'notifications', 25 | classes: 'nhsuk-u-margin-bottom-3' 26 | }) }} 27 | {% endset %} 28 | {% else %} 29 | {% endif %} 30 | 31 | {{ nhsappCardGroup({ 32 | cards: [ 33 | { 34 | aboveContent: { 35 | html: badge 36 | }, 37 | title: 'Your NHS healthcare services', 38 | href: '#', 39 | descriptionHtml: 'You may receive messages:
40 |You may send or receive messages about:
46 |You may receive responses to queries you submitted about:
52 |Long Stay
30 |Plan to stay between 2 to 8 hours
31 |If you're using the NHS App prototype, you'll find the NHS App frontend is already included.
10 |Patient survey reminder. The Patient feedback survey is about to close. Have your say about Portland Street Great Westood Surgery by providing us with your thoughts.
23 |Reminder of your telephone appointment with your GP on Friday 23 October at 1:30pm.
40 |