@ons/design-system 67.0.2 → 67.0.4

package/README.md

@@ -33,7 +33,7 @@ To enable this we use [nvm (Node Version Manager)](https://github.com/creationix
 
 ```bash
 yarn install
-husky install
+yarn husky install
 ```
 
 ### Start a local server
@@ -130,7 +130,6 @@ Checkout the branch locally and run:
 
 `yarn test-visual:approve` - This will approve the failures/diff caught by the tests.
 
-
 `git lfs push --all origin` - First commit the files in the normal way then run the command. This will push the new reference images to Git LFS.
 
 You can then commit and push the updated references and your changes to your branch. The test images that would have been created when you ran `yarn test-visual` are gitignored and the new references images will be pushed to Git LFS.

package/components/details/_details.scss

@@ -23,6 +23,7 @@ $details-caret-width: 1.5rem;
           margin-left: -$details-caret-width;
           padding-left: $details-caret-width;
         }
+
         .ons-details__icon .ons-icon {
           fill: var(--ons-color-text-link-focus);
         }
@@ -30,9 +31,11 @@ $details-caret-width: 1.5rem;
 
       &:hover:not(:focus) {
         color: var(--ons-color-text-link-hover);
+
         .ons-details__icon {
           fill: var(--ons-color-text-link-hover);
         }
+
         .ons-details__title {
           text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
         }
@@ -60,6 +63,7 @@ $details-caret-width: 1.5rem;
       margin-bottom: 0;
       text-underline-position: under;
       transform: translateY(-1px);
+      pointer-events: none;
     }
   }
 
@@ -126,5 +130,6 @@ $details-caret-width: 1.5rem;
 
   &__icon {
     display: none;
+    pointer-events: none;
   }
 }

package/components/details/_macro.njk

@@ -11,15 +11,15 @@
             class="ons-details__heading ons-js-details-heading" role="button"
             {% if params.headingAttributes %}{% for attribute, value in (params.headingAttributes.items() if params.headingAttributes is mapping and params.headingAttributes.items else params.headingAttributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
         >
-                {% set titleTag = params.titleTag | default("h2") %}
-                <{{ titleTag }} class="ons-details__title">{{ params.title }}</{{ titleTag }}>
-                <span class="ons-details__icon">
-                    {% from "components/icon/_macro.njk" import onsIcon %}
-                    {{-
-                        onsIcon({
-                            "iconType": "chevron"
-                        })
-                    -}}</span>
+            {% set titleTag = params.titleTag | default("h2") %}
+            <{{ titleTag }} class="ons-details__title">{{ params.title }}</{{ titleTag }}>
+            <span class="ons-details__icon">
+                {% from "components/icon/_macro.njk" import onsIcon %}
+                {{-
+                    onsIcon({
+                        "iconType": "chevron"
+                    })
+                -}}</span>
         </div>
         <div id="{{ params.id }}-content" class="ons-details__content ons-js-details-content"
             {% if params.contentAttributes %}{% for attribute, value in (params.contentAttributes.items() if params.contentAttributes is mapping and params.contentAttributes.items else params.contentAttributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}

package/components/header/example-header-external-with-sub-navigation-removed.njk

@@ -0,0 +1,70 @@
+---
+"fullWidth": true
+---
+{% from "components/header/_macro.njk" import onsHeader %}
+
+{{
+    onsHeader({
+        "title": 'Service manual',
+        "mastheadLogoUrl": '#0',
+        "titleUrl": '#0',
+        "navigation": {
+            "id": 'main-nav',
+            "ariaLabel": 'Main menu',
+            "currentPath": [ '#design-system', '#patterns', '#access-codes' ],
+            "currentPageTitle": 'Design system',
+            "itemsList": [
+                {
+                    "text": 'Service standard',
+                    "url": '#0'
+                },
+                {
+                    "text": 'Design system',
+                    "url": '#design-system'
+                },
+                {
+                    "text": 'Accessibility',
+                    "url": '#0'
+                },
+                {
+                    "text": 'Brand guidelines',
+                    "url": '#0'
+                },
+                {
+                    "text": 'Content style guide',
+                    "url": '#0'
+                }
+            ],
+            "toggleNavigationButton": {
+                "text": 'Menu',
+                "ariaLabel": 'Toggle menu'
+            },
+            "subNavigation": {
+                "id": 'sub-nav',
+                "overviewURL": '#design-system',
+                "overviewText": 'Overview',
+                "ariaLabel": 'Section menu',
+                "currentPath": '#access-codes',
+                "removeHorizontalSubNav": true,
+                "itemsList": [
+                    {
+                        "text": 'Guidance',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Foundations',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Components',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Patterns',
+                        "url": '#patterns'
+                    }
+                ]
+            }
+        }
+    })
+}}

package/components/header/example-header-external-with-sub-navigation.njk

@@ -41,9 +41,10 @@
             },
             "subNavigation": {
                 "id": 'sub-nav',
-                "overviewURL": '#0',
+                "overviewURL": '#design-system',
                 "overviewText": 'Overview',
                 "ariaLabel": 'Section menu',
+                "currentPath": '#access-codes',
                 "itemsList": [
                     {
                         "text": 'Guidance',
@@ -129,4 +130,4 @@
             }
         }
     })
-}}
+}}

package/components/input/_input.scss

@@ -62,6 +62,12 @@
   &--with-description {
     margin-bottom: 0.55rem;
   }
+
+  &--with-text-description {
+    position: relative;
+
+  }
+
 }
 
 // Text input widths

package/components/input/_macro.njk

@@ -57,7 +57,7 @@
         {% endif %}
     {% endset %}
     {% set field %}
-        {% if params.label and params.label.text %}
+        {% if (not params.accessiblePlaceholder or params.label.description) and (params.label and params.label.text)%}
             {{ onsLabel({
                 "for": params.id,
                 "id": params.label.id,
@@ -68,6 +68,7 @@
                 "accessiblePlaceholder": params.accessiblePlaceholder,
                 "inline": params.label.inline
             }) }}
+
         {% endif %}
 
         {% if params.prefix or params.suffix %}
@@ -100,7 +101,19 @@
                 </span>
             {% endif %}
         {% elif params.searchButton %}
-            <span class="ons-grid--flex ons-input_search-button">
+            <span class="ons-grid--flex  ons-input_search-button{% if params.label.description %} ons-input--with-text-description{% endif %}"> 
+                {% if params.accessiblePlaceholder %}
+                {{ onsLabel({
+                    "for": params.id,
+                    "id": params.label.id,
+                    "text": params.label.text,
+                    "classes": params.label.classes,
+                    "attributes": params.label.attributes,
+                    "accessiblePlaceholder": params.accessiblePlaceholder,
+                    "inline": params.label.inline
+                }) }}
+           {% endif %}
+
                 {{ input | safe }}
                 {%- set buttonLabel -%}
                     {%- if params.searchButton.visuallyHideButtonText == true -%}
@@ -124,7 +137,24 @@
                 }}
             </span>
         {% else %}
+            {% if params.accessiblePlaceholder %}
+            <span class="ons-grid--flex {% if params.label.description %} ons-input--with-text-description{% endif %}">
+                {% if params.accessiblePlaceholder %}
+                    {{ onsLabel({
+                    "for": params.id,
+                    "id": params.label.id,
+                    "text": params.label.text,
+                    "classes": params.label.classes,
+                    "attributes": params.label.attributes,
+                    "accessiblePlaceholder": params.accessiblePlaceholder,
+                    "inline": params.label.inline
+                }) }}
+                {% endif %}
+            {% endif %}
             {{ input | safe }}
+            {% if params.accessiblePlaceholder %}
+            </span>
+         {% endif %}
         {% endif %}
     {% endset %}
 

package/components/input/example-input-text-width-constrained.njk

@@ -1,7 +1,7 @@
 {% from "components/input/_macro.njk" import onsInput %}
 {{
     onsInput({
-        "id": "text-width",
+        "id": "postcode",
         "width": "7",
         "autocomplete": "postal-code",
         "label": {

package/components/label/_macro.njk

@@ -16,7 +16,9 @@
               {{- params.description -}}
         </span>
     {%- endset %}
-
+    {%- if params.description and params.accessiblePlaceholder -%}
+        {{- description | safe -}}    
+    {%- else -%}
     <label
         class="{% if params.inputType is not defined -%}ons-label{%- endif %}{{- ' ' + params.classes if params.classes else "" -}}{%- if params.description %} ons-label--with-description{%- endif %} {{- ' ons-label--placeholder' if params.accessiblePlaceholder else "" -}}"
         {% if params.description %}aria-describedby="{{ descriptionID }}"{% endif %}
@@ -41,4 +43,5 @@
                 {{- description | safe -}}
             {%- endif -%}
         {%- endif %}
+    {%- endif -%} 
 {% endmacro %}

package/components/navigation/_macro.njk

@@ -58,21 +58,23 @@
         </div>
     </div>
     {% if params.navigation.subNavigation %}
-        <nav class="ons-navigation ons-navigation--sub ons-u-d-no@xxs@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes }}" id="{{ params.navigation.subNavigation.id }}" aria-label="{{ params.navigation.subNavigation.ariaLabel | default("Section menu") }}" data-analytics="header-section-navigation">
-            <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.fullWidth or params.navigation.fullWidth }}{{ ' ons-container--wide' if params.wide or params.navigation.wide }}">
-                <ul class="ons-navigation__list ons-navigation__list">
-                    {% for item in params.navigation.subNavigation.itemsList %}
-                        <li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}">
-                            <a class="ons-navigation__link ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}" {% endif %}>
-                                {% if item.title %}{{ item.title }}
-                                {% elif item.text %}{{ item.text }}
-                                {% endif %}
-                            </a>
-                        </li>
-                    {% endfor %}
-                </ul>
-            </div>
-        </nav>
+        {% if not params.navigation.subNavigation.removeHorizontalSubNav %}
+            <nav class="ons-navigation ons-navigation--sub ons-u-d-no@xxs@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes }}" id="{{ params.navigation.subNavigation.id }}" aria-label="{{ params.navigation.subNavigation.ariaLabel | default("Section menu") }}" data-analytics="header-section-navigation">
+                <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.fullWidth or params.navigation.fullWidth }}{{ ' ons-container--wide' if params.wide or params.navigation.wide }}">
+                    <ul class="ons-navigation__list ons-navigation__list">
+                        {% for item in params.navigation.subNavigation.itemsList %}
+                            <li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}">
+                                <a class="ons-navigation__link ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}" {% endif %}>
+                                    {% if item.title %}{{ item.title }}
+                                    {% elif item.text %}{{ item.text }}
+                                    {% endif %}
+                                </a>
+                            </li>
+                        {% endfor %}
+                    </ul>
+                </div>
+            </nav>
+        {% endif %}
         <div class="ons-u-d-no@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes }}">
             {{ onsButton({
                 "text": params.navigation.currentPageTitle,
@@ -88,7 +90,7 @@
             <nav class="ons-navigation ons-navigation--sub-mobile ons-u-d-no ons-js-secondary-nav ons-u-mt-xs" id="{{ params.navigation.subNavigation.id }}--mobile" aria-hidden="true" aria-label="{{ params.navigation.subNavigation.ariaLabel | default("Section menu") }}" data-analytics="header-section-navigation">
                 <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.navigation.fullWidth }}{{ ' ons-container--wide' if params.navigation.wide }}">
                     <ul class="ons-navigation__list ons-navigation__list--parent">
-                        <li class="ons-navigation__item">
+                        <li class="ons-navigation__item{{ ' ons-navigation__item--active' if (params.navigation.subNavigation.overviewURL == params.navigation.subNavigation.currentPath)}}">
                             <a class="ons-navigation__link" href="{{ params.navigation.subNavigation.overviewURL }}">{{ params.navigation.subNavigation.overviewText | default('Overview') }}</a>
                         </li>
                         {% for item in params.navigation.subNavigation.itemsList %}

package/components/navigation/navigation.spec.js

@@ -86,6 +86,66 @@ const EXAMPLE_NAVIGATION_WITH_SUBNAVIGATION = {
   },
 };
 
+const EXAMPLE_NAVIGATION_WITH_SUBNAVIGATION_REMOVED = {
+  navigation: {
+    id: 'main-nav',
+    ariaLabel: 'Main menu',
+    currentPath: '#1',
+    currentPageTitle: 'Main nav item 2',
+    itemsList: [
+      {
+        title: 'Main nav item 1',
+        url: '#0',
+        classes: 'custom-class-main-item-1',
+        id: 'main-item-1',
+      },
+      {
+        title: 'Main nav item 2',
+        url: '#1',
+        classes: 'custom-class-main-item-2',
+        id: 'main-item-2',
+      },
+    ],
+    subNavigation: {
+      id: 'sub-nav-hidden',
+      overviewURL: '#overview',
+      overviewText: 'Overview',
+      ariaLabel: 'Section menu',
+      currentPath: '#1',
+      removeHorizontalSubNav: true,
+      itemsList: [
+        {
+          title: 'Sub nav item 1',
+          url: '#0',
+          classes: 'custom-class-sub-item-1',
+          id: 'sub-item-1',
+        },
+        {
+          title: 'Sub nav item 2',
+          url: '#1',
+          classes: 'custom-class-sub-item-2',
+          id: 'sub-item-2',
+          sections: [
+            {
+              sectionTitle: 'Section 1',
+              children: [
+                {
+                  title: 'Child item 1',
+                  url: '#0',
+                },
+                {
+                  title: 'Child item 2',
+                  url: '#1',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  },
+};
+
 describe('script: navigation', () => {
   afterEach(async () => {
     // Clear viewport size and browser emulation after each test.
@@ -102,7 +162,7 @@ describe('script: navigation', () => {
       });
 
       it('has removed the display class from the menu toggle button', async () => {
-        const hasClass = await page.$eval(buttonEl, node => node.classList.contains('ons-u-d-no'));
+        const hasClass = await page.$eval(buttonEl, (node) => node.classList.contains('ons-u-d-no'));
         expect(hasClass).toBe(false);
       });
     });
@@ -115,13 +175,13 @@ describe('script: navigation', () => {
 
       it('has the correct aria hidden attribute on the navigation list', async () => {
         const nav = await page.$(navEl);
-        const hasAriaAttribute = await nav.evaluate(node => node.getAttribute('aria-hidden') !== null);
+        const hasAriaAttribute = await nav.evaluate((node) => node.getAttribute('aria-hidden') !== null);
         expect(hasAriaAttribute).toBe(ariaStatus);
       });
 
       it('has aria-expanded set as `false` on the navigation toggle button', async () => {
         const button = await page.$(buttonEl);
-        const ariaExpandedIsFalse = await button.evaluate(node => node.getAttribute('aria-expanded') === 'false');
+        const ariaExpandedIsFalse = await button.evaluate((node) => node.getAttribute('aria-expanded') === 'false');
         expect(ariaExpandedIsFalse).toBe(true);
       });
     });
@@ -134,7 +194,7 @@ describe('script: navigation', () => {
 
       it('has aria-hidden set as `true` on the navigation list', async () => {
         const nav = await page.$(navEl);
-        const hasAriaAttribute = await nav.evaluate(node => node.getAttribute('aria-hidden') === 'true');
+        const hasAriaAttribute = await nav.evaluate((node) => node.getAttribute('aria-hidden') === 'true');
         expect(hasAriaAttribute).toBe(true);
       });
 
@@ -146,12 +206,12 @@ describe('script: navigation', () => {
 
         it('has aria-hidden set as `false` on the navigation list', async () => {
           const nav = await page.$(navEl);
-          const hasAriaAttribute = await nav.evaluate(node => node.getAttribute('aria-hidden') === 'false');
+          const hasAriaAttribute = await nav.evaluate((node) => node.getAttribute('aria-hidden') === 'false');
           expect(hasAriaAttribute).toBe(true);
         });
 
         it('has the hide class removed from the navigation list', async () => {
-          const hasClass = await page.$eval(navEl, node =>
+          const hasClass = await page.$eval(navEl, (node) =>
             node.classList.contains('ons-u-d-no@xxs@l' || 'ons-u-d-no' || 'ons-u-d-no@xs@l'),
           );
           expect(hasClass).toBe(false);
@@ -159,12 +219,12 @@ describe('script: navigation', () => {
 
         it('has aria-expanded set as `true` on the navigation toggle button', async () => {
           const button = await page.$(buttonEl);
-          const ariaExpandedIsTrue = await button.evaluate(node => node.getAttribute('aria-expanded') === 'true');
+          const ariaExpandedIsTrue = await button.evaluate((node) => node.getAttribute('aria-expanded') === 'true');
           expect(ariaExpandedIsTrue).toBe(true);
         });
 
         it('has the correct class applied to the navigation toggle button', async () => {
-          const hasClass = await page.$eval(buttonEl, node => node.classList.contains('active'));
+          const hasClass = await page.$eval(buttonEl, (node) => node.classList.contains('active'));
           expect(hasClass).toBe(true);
         });
       });
@@ -180,18 +240,18 @@ describe('script: navigation', () => {
 
         it('has aria-hidden set as `true` on the navigation list', async () => {
           const nav = await page.$(navEl);
-          const hasAriaAttribute = await nav.evaluate(node => node.getAttribute('aria-hidden') === 'true');
+          const hasAriaAttribute = await nav.evaluate((node) => node.getAttribute('aria-hidden') === 'true');
           expect(hasAriaAttribute).toBe(true);
         });
 
         it('has aria-expanded set as `false` on the navigation toggle button', async () => {
           const button = await page.$(buttonEl);
-          const ariaExpandedIsTrue = await button.evaluate(node => node.getAttribute('aria-expanded') === 'false');
+          const ariaExpandedIsTrue = await button.evaluate((node) => node.getAttribute('aria-expanded') === 'false');
           expect(ariaExpandedIsTrue).toBe(true);
         });
 
         it('has the active class removed from the navigation toggle button', async () => {
-          const hasClass = await page.$eval(buttonEl, node => node.classList.contains('active'));
+          const hasClass = await page.$eval(buttonEl, (node) => node.classList.contains('active'));
           expect(hasClass).toBe(false);
         });
       });
@@ -210,18 +270,18 @@ describe('script: navigation', () => {
 
         it('has the aria-hidden attribute removed from the navigation list', async () => {
           const nav = await page.$(navEl);
-          const hasAriaAttribute = await nav.evaluate(node => node.getAttribute('aria-hidden') !== null);
+          const hasAriaAttribute = await nav.evaluate((node) => node.getAttribute('aria-hidden') !== null);
           expect(hasAriaAttribute).toBe(false);
         });
 
         it('has aria-expanded removed from the navigation toggle button', async () => {
           const button = await page.$(buttonEl);
-          const hasAriaExpanded = await button.evaluate(node => node.getAttribute('aria-expanded') !== null);
+          const hasAriaExpanded = await button.evaluate((node) => node.getAttribute('aria-expanded') !== null);
           expect(hasAriaExpanded).toBe(false);
         });
 
         it('has the hide class removed from the navigation list', async () => {
-          const hasClass = await page.$eval(navEl, node =>
+          const hasClass = await page.$eval(navEl, (node) =>
             node.classList.contains('ons-u-d-no@xxs@l' || 'ons-u-d-no' || 'ons-u-d-no@xs@l'),
           );
           expect(hasClass).toBe(false);
@@ -230,3 +290,18 @@ describe('script: navigation', () => {
     },
   );
 });
+
+describe('level: sub navigation', () => {
+  describe('when removeHorizontalSubNav is set to true', () => {
+    beforeEach(async () => {
+      await setTestPage('/test', renderComponent('header', EXAMPLE_NAVIGATION_WITH_SUBNAVIGATION_REMOVED));
+    });
+
+    it('does not render the sub-nav element', async () => {
+      const hasSubNavEl = (await page.content()).includes('.ons-navigation--sub');
+      expect(hasSubNavEl).toBe(false);
+    });
+  });
+});
+
+

package/components/table-of-contents/example-table-of-contents-sticky-full-page.njk

@@ -0,0 +1,114 @@
+---
+title: "Example: Table of contents on full page"
+layout: ~
+---
+{% from "components/table-of-contents/_macro.njk" import onsTableOfContents %}
+
+{% extends "layout/_template.njk" %}
+
+{% set pageConfig = {
+    "header": {
+        "title": "What is the census?"
+    },
+    "breadcrumbs": {
+        "ariaLabel": 'Back',
+        "itemsList": [
+            {
+                "url": '/',
+                "id": "back-example-feedback-form-error",
+                "text": 'Back',
+                "attributes": {
+                    "data-attribute": "Example attribute"
+                }
+            }
+        ]
+    },
+    "footer": {
+        "OGLLink": {
+            "pre": 'All content is available under the',
+            "link": 'Open Government Licence v3.0',
+            "url": 'https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/',
+            "post": ', except where otherwise stated'
+        }
+    }
+} %}
+
+{% block main %}
+    <div class="ons-page__container ons-container">
+        <div class="ons-grid ons-js-toc-container">
+            <div class="ons-grid__col ons-grid__col--sticky@m ons-col-4@m">
+                {{
+                    onsTableOfContents({
+                        "title": 'Contents',
+                        "ariaLabel": 'Sections in this page',
+                        "itemsList": [
+                            {
+                                "url": '#section1',
+                                "text": 'What is the census?'
+                            },
+                            {
+                                "url": '#section2',
+                                "text": 'The online census has now closed'
+                            },
+                            {
+                                "url": '#section3',
+                                "text": 'What happens after Census Day'
+                            },
+                            {
+                                "url": '#section4',
+                                "text": 'The census in Northern Ireland and Scotland'
+                            },
+                            {
+                                "url": '#section5',
+                                "text": 'The last census'
+                            }
+                        ]
+                    })
+                }}
+            </div>
+            <div class="ons-grid__col ons-col-7@m ons-push-1@m">
+                <section id="section1">
+                    <h2>What is the census?</h2>
+                    <p>The census is a survey that happens every 10 years and gives us a picture of all the people and households in England and Wales.</p>
+
+                    <p>Your answers to the census questions will help organisations make decisions on planning and funding public services in your area, including transport, education and healthcare.</p>
+                </section>
+                <section id="section2">
+                    <h2>The online census has now closed</h2>
+                    <p>Census Day was on Sunday 21 March 2021.</p>
+
+                    <p>If you still have a paper census questionnaire, fill it in as soon as you can and return it to FREEPOST, Census 2021.</p>
+                </section>
+                <section id="section3">
+                    <h2>What happens after Census Day</h2>
+                    <p>Two follow-up surveys, the <a href="#0">Census Coverage Survey</a> and the <a href="#0">Census Quality Survey</a>, help to improve the quality and accuracy of the census results.</p>
+
+                    <p>Over the next year, we work hard to process the answers from all the census questionnaires. This is so that we can publish the initial Census 2021 findings one year after the census and the main releases two years after the census.</p>
+
+                    <p>To make sure the Census 2021 statistics we publish meet the needs of those who use them, we also run an outputs consultation.</p>
+                </section>
+                <section id="section4">
+                    <h2>The census in Northern Ireland and Scotland</h2>
+                    <p>The Office for National Statistics (ONS) runs the census in England and Wales.</p>
+
+                    <p>If you live in Northern Ireland, visit the Northern Ireland Statistics Agency (NISRA) census website to find out about the census for Northern Ireland.</p>
+
+                    <p>If you live in Scotland, visit the National Records of Scotland census website to find out how to take part in the census for Scotland.</p>
+                </section>
+                <section id="section5">
+                    <h2>The last census</h2>
+                    <p>The last census took place in 2011. Many people and organisations used information from the 2011 Census in a variety of ways.</p>
+
+                    <p>For example, Bristol City Council used it to inform decisions on how to fund local housing improvements. It was also essential for the charity Redbridge Council for Voluntary Services to help people from ethnic minority groups learn more about dementia.</p>
+
+                    <p>To read more about the benefits that information from the 2011 Census helped to create, visit the Office for National Statistics (ONS) website.</p>
+                    <p>The Census Coverage Survey (CCS) was a short, separate survey that we at the Office for National Statistics (ONS) started six to eight weeks after Census Day.</p>
+
+                    <p>The CCS helps make sure everyone is counted and our census results are as accurate as possible. It asked similar questions to the main census, just fewer of them, at addresses in a selection of postcodes across England and Wales.</p>
+
+                    <p>The CCS has now closed.</p>
+                </section>
+            </div>
+        </div>
+    </div>
+{% endblock %}