Skip to content

Commit

Permalink
Merge pull request #358 from nhsuk/fixes/general-tidyup
Browse files Browse the repository at this point in the history 
Update components HTML snippet to match nunjucks templates
  • Loading branch information
@mcheung-nhs
mcheung-nhs authored Jan 21, 2019
2 parents fe7a0b8 + 55b03b0 commit e26d14f
Show file tree
Hide file tree
Showing 22 changed files with 313 additions and 213 deletions.
2 changes: 1 addition & 1 deletion app/components/radios/inline.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-two-thirds">
{{ radios({
"idPrefix": "example'",
"idPrefix": "example",
"classes": "nhsuk-radios--inline",
"name": "example",
"fieldset": {
Expand Down
145 changes: 141 additions & 4 deletions docs/installation/installing-compiled.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ If you require any of this functionality, you should [install using npm](/docs/i
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">

<title>NHS.UK example</title>
<title>NHS.UK page template</title>

<!-- Styles -->
<link rel="stylesheet" href="css/nhsuk-[latest version].min.css">
Expand All @@ -69,17 +69,154 @@ If you require any of this functionality, you should [install using npm](/docs/i
</head>

<body>
<!-- Header -->
<a class="nhsuk-skip-link" href="#maincontent">Skip to main content</a>

<header class="nhsuk-header" role="banner">
<div class="nhsuk-width-container nhsuk-header__container">
<div class="nhsuk-header__logo">
<a class="nhsuk-header__link" href="/" aria-label="NHS homepage">
<svg class="nhsuk-logo nhsuk-logo--white" xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" viewBox="0 0 40 16">
<path fill="#fff" d="M0 0h40v16H0z"></path>
<path fill="#005eb8" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
<image src="https://assets.nhs.uk/images/nhs-logo.png" xlink:href=""></image>
</svg>
</a>
</div>
<div class="nhsuk-header__content" id="content-header">
<div class="nhsuk-header__menu">
<button class="nhsuk-header__menu-toggle" id="toggle-menu" aria-controls="header-navigation" aria-label="Open menu">Menu</button>
</div>
<div class="nhsuk-header__search">
<button class="nhsuk-header__search-toggle" id="toggle-search" aria-controls="search" aria-label="Open search">
<svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
</svg>
<span class="nhsuk-u-visually-hidden">Search</span>
</button>
<div class="nhsuk-header__search-wrap" id="wrap-search">
<form class="nhsuk-header__search-form" id="search" action="/search/" method="get" role="search">
<label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
<div class="autocomplete-container" id="autocomplete-container"></div>
<input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off">
<button class="nhsuk-search__submit" type="submit">
<svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
</svg>
<span class="nhsuk-u-visually-hidden">Search</span>
</button>
<button class="nhsuk-search__close" id="close-search">
<svg class="nhsuk-icon nhsuk-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
</svg>
<span class="nhsuk-u-visually-hidden">Close search</span>
</button>
</form>
</div>
</div>
</div>
</div>
<nav class="nhsuk-header__navigation" id="header-navigation" role="navigation" aria-label="Primary navigation" aria-labelledby="label-navigation">
<p class="nhsuk-header__navigation-title">
<span id="label-navigation">Menu</span>
<button class="nhsuk-header__navigation-close" id="close-menu">
<svg class="nhsuk-icon nhsuk-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
</svg>
<span class="nhsuk-u-visually-hidden">Close menu</span>
</button>
</p>
<ul class="nhsuk-header__navigation-list">
<li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--for-mobile">
<a class="nhsuk-header__navigation-link" href="/">
Home
<svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="nhsuk-header__navigation-item">
<a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/conditions" >
Health A-Z
<svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="nhsuk-header__navigation-item">
<a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/live-well/" >
Live Well
<svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="nhsuk-header__navigation-item">
<a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/conditions/social-care-and-support/" >
Care and support
<svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="nhsuk-header__navigation-item">
<a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/news/" >
Health news
<svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="nhsuk-header__navigation-item">
<a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/service-search" >
Services near you
<svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
</ul>
</nav>
</header>

<nav class="nhsuk-breadcrumb" aria-label="Breadcrumb">
<div class="nhsuk-width-container">
<ol class="nhsuk-breadcrumb__list">
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="/level-one">Level one</a></li>
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="/level-one/level-two">Level two</a></li>
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="/level-one/level-two/level-three">Level three</a></li>
</ol>
<p class="nhsuk-breadcrumb__back"><a class="nhsuk-breadcrumb__backlink" href="/level-one/level-two/level-three">Back to Level three</a></p>
</div>
</nav>

<div class="nhsuk-width-container">
<main class="nhsuk-main-wrapper" id="maincontent">
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-three-quarters">
<!-- Components -->

<h1>Page template</h1>

</div>
</div>
</main>
</div>
<!-- Footer -->

<footer role="contentinfo">
<div class="nhsuk-footer" id="nhsuk-footer">
<div class="nhsuk-width-container">
<h2 class="nhsuk-u-visually-hidden">Support links</h2>
<ul class="nhsuk-footer__list">
<li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="https://www.nhs.uk/Pages/nhs-sites.aspx">NHS sites</a></li>
<li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="https://www.nhs.uk/about-us">About us</a></li>
<li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="https://www.nhs.uk/contact-us/">Contact us</a></li>
<li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="https://www.nhs.uk/about-us/sitemap/">Sitemap</a></li>
<li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="https://www.nhs.uk/our-policies/">Our policies</a></li>
</ul>
<p class="nhsuk-footer__copyright">&copy; Crown Copyright</p>
</div>
</div>
</footer>

</body>
</html>
```
6 changes: 3 additions & 3 deletions packages/components/breadcrumb/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ To discuss or contribute to this component, visit the [GitHub issue for this com
<nav class="nhsuk-breadcrumb" aria-label="Breadcrumb">
<div class="nhsuk-width-container">
<ol class="nhsuk-breadcrumb__list">
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="/level-one"> Level one</a> </li>
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="/level-one/level-two"> Level two</a> </li>
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="/level-one/level-two/level-three"> Level three</a></li>
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="/level-one">Level one</a></li>
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="/level-one/level-two">Level two</a></li>
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="/level-one/level-two/level-three">Level three</a></li>
</ol>
<p class="nhsuk-breadcrumb__back"><a class="nhsuk-breadcrumb__backlink" href="/level-one/level-two/level-three">Back to Level three</a></p>
</div>
Expand Down
4 changes: 2 additions & 2 deletions packages/components/breadcrumb/template.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
<ol class="nhsuk-breadcrumb__list">
{% for item in params.items %}
{% if item.href %}
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="{{ item.href }}"> {% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}{{ item.text }}</a>{% if not loop.last %}{% endif %}</li>
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ item.text }}</a>{% if not loop.last %}{% endif %}</li>
{% endif %}
{% endfor %}
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="{{ params.href }}"> {% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}{{ params.text}}</a></li>
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="{{ params.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.text}}</a></li>
</ol>
<p class="nhsuk-breadcrumb__back"><a class="nhsuk-breadcrumb__backlink" href="{{ params.href }}">Back to {{ params.text }}</a></p>
</div>
Expand Down
63 changes: 24 additions & 39 deletions packages/components/checkboxes/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,32 +157,26 @@ To discuss or contribute to this component, visit the [GitHub issue for this com

```html
<div class="nhsuk-form-group">

<div class="nhsuk-checkboxes">

<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="colours-1" name="colours" type="checkbox" value="red">
<label class="nhsuk-label nhsuk-checkboxes__label" for="colours-1">
Red
Red
</label>
</div>

<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="colours-2" name="colours" type="checkbox" value="green">
<label class="nhsuk-label nhsuk-checkboxes__label" for="colours-2">
Green
Green
</label>
</div>

<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="colours-3" name="colours" type="checkbox" value="blue" disabled>
<label class="nhsuk-label nhsuk-checkboxes__label" for="colours-3">
Blue
Blue
</label>
</div>

</div>

</div>
```

Expand Down Expand Up @@ -294,43 +288,34 @@ To discuss or contribute to this component, visit the [GitHub issue for this com

```html
<div class="nhsuk-form-group nhsuk-form-group--error">

<fieldset class="nhsuk-fieldset" aria-describedby="waste-error">

<legend class="nhsuk-fieldset__legend">
Which types of waste do you transport regularly?
</legend>

<span id="waste-error" class="nhsuk-error-message">
<legend class="nhsuk-fieldset__legend">
Which types of waste do you transport regularly?
</legend>
<span id="waste-error" class="nhsuk-error-message">
Please select an option
</span>

<div class="nhsuk-checkboxes">

<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="waste-1" name="waste" type="checkbox" value="animal">
<label class="nhsuk-label nhsuk-checkboxes__label" for="waste-1">
</span>
<div class="nhsuk-checkboxes">
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="waste-1" name="waste" type="checkbox" value="animal">
<label class="nhsuk-label nhsuk-checkboxes__label" for="waste-1">
Waste from animal carcasses
</label>
</div>

<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="waste-2" name="waste" type="checkbox" value="mines">
<label class="nhsuk-label nhsuk-checkboxes__label" for="waste-2">
</label>
</div>
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="waste-2" name="waste" type="checkbox" value="mines">
<label class="nhsuk-label nhsuk-checkboxes__label" for="waste-2">
Waste from mines or quarries
</label>
</div>

<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="waste-3" name="waste" type="checkbox" value="farm">
<label class="nhsuk-label nhsuk-checkboxes__label" for="waste-3">
</label>
</div>
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="waste-3" name="waste" type="checkbox" value="farm">
<label class="nhsuk-label nhsuk-checkboxes__label" for="waste-3">
Farm or agricultural waste
</label>
</label>
</div>
</div>

</div>
</fieldset>

</div>
```

Expand Down
48 changes: 24 additions & 24 deletions packages/components/footer/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,30 +36,30 @@ Find out more about the footer component and when to use it in the [NHS Digital
```
{% from 'components/footer/macro.njk' import footer %}
{{ footer({
"links": [
{
"URL": "https://www.nhs.uk/Pages/nhs-sites.aspx",
"label": "NHS sites"
},
{
"URL": "https://www.nhs.uk/about-us",
"label": "About us"
},
{
"URL": "https://www.nhs.uk/contact-us/",
"label": "Contact us"
},
{
"URL": "https://www.nhs.uk/about-us/sitemap/",
"label": "Sitemap"
},
{
"URL": "https://www.nhs.uk/our-policies/",
"label": "Our policies"
}
]
})}}
{{ footer({
"links": [
{
"URL": "https://www.nhs.uk/Pages/nhs-sites.aspx",
"label": "NHS sites"
},
{
"URL": "https://www.nhs.uk/about-us",
"label": "About us"
},
{
"URL": "https://www.nhs.uk/contact-us/",
"label": "Contact us"
},
{
"URL": "https://www.nhs.uk/about-us/sitemap/",
"label": "Sitemap"
},
{
"URL": "https://www.nhs.uk/our-policies/",
"label": "Our policies"
}
]
})}}
```
## Nunjucks arguments

Expand Down
Loading

0 comments on commit e26d14f

Please sign in to comment.