Full page examples (#219)

Add full page example layouts
nhsuk · Jan 21, 2025 · 3bc4b7a · 3bc4b7a
1 parent e3f16f4
commit 3bc4b7a
Show file tree

Hide file tree

Showing 33 changed files with 856 additions and 83 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -86,7 +86,9 @@ export default function (eleventyConfig) {
       htmlCode: prettyHtmlCode,
       nunjucksCode: nunjucksCode,
       figmaLink: data.figmaLink,
-      vueLink: data.vueLink
+      vueLink: data.vueLink,
+      mobile: data.mobile,
+      mobileHeader: data.mobileHeader
     }
     return nunjucksEnv.render('example.njk', templateData)
   })

diff --git a/docs/_includes/example.njk b/docs/_includes/example.njk
@@ -1,25 +1,35 @@
-<div class="app-example">
+<div class="app-example{%- if mobile == true %} app-example--mobile{% endif -%}">
   <span class="app-example__new-window">
     <a href="{{ href }}" target="_blank">Open this example <span class="nhsuk-u-visually-hidden">({{ title }})</span> in a new window</a>
   </span>
+  {%- if mobile == true %}
+  <div class="app-iframe__container">
+    <div class="app-iframe__header {%- if mobileHeader == "blue" %} app-iframe__header--blue{% endif -%}"></div>
+    <svg class="ios-notch" viewBox="-40 0 300 31">
+      <path d="M0 1V0h219v1a5 5 0 0 0-5 5v3c0 12.15-9.85 22-22 22H27C14.85 31 5 21.15 5 9V6a5 5 0 0 0-5-5z" fill-rule="evenodd"></path>
+    </svg>
+  {% endif -%}
   <iframe
-    onload="this.style.height = this.contentWindow.document.documentElement.scrollHeight + 'px';"
+    onload="{%- if mobile == true %}{% else %}this.style.height = this.contentWindow.document.documentElement.scrollHeight + 'px';{% endif %}"
     class="app-example__frame"
     scrolling="auto"
     frameborder="0"
-    height="{{ height }}"
+    height="{%- if mobile == true %}700px{% else %}{{ height }}{% endif %}"
     src="{{ href }}"
     title="{{ title }}"
   ></iframe>
+  {%- if mobile == true %}
+  </div>
+  {% endif -%}
 </div>
 
-<div class="app-tabs" data-module="app-tabs">
+<div class="app-tabs{%- if mobile == true %} app-tabs--mobile{% endif -%}" data-module="app-tabs">
   <ul class="app-tabs__list" role="tablist">
-    <li class="app-tabs__list-item" role="presentation"><a class="app-tabs__tab" href="#html-default-{{ id }}" role="tab" id="tab_html-default-{{ id }}" aria-controls="html-default-{{ id }}">HTML</a></li>
-    <li class="app-tabs__list-item" role="presentation"><a class="app-tabs__tab" href="#nunjucks-default-{{ id }}" role="tab" id="tab_nunjucks-default-{{ id }}" aria-controls="nunjucks-default-{{ id }}">Nunjucks</a></li>
-    {%- if jsCode %}<li class="app-tabs__list-item" role="presentation"><a class="app-tabs__tab" href="#js-default-{{ id }}" role="tab" id="tab_js-default-{{ id }}" aria-controls="js-default-{{ id }}">JavaScript</a></li>{% endif -%}
-    {%- if figmaLink %}<li class="app-tabs__list-item" role="presentation"><a class="app-tabs__tab" href="#figma-default-{{ id }}" role="tab" id="tab_figma-default-{{ id }}" aria-controls="figma-default-{{ id }}">Figma</a></li>{% endif -%}
-    {%- if vueLink %}<li class="app-tabs__list-item" role="presentation"><a class="app-tabs__tab" href="#vue-default-{{ id }}" role="tab" id="tab_vue-default-{{ id }}" aria-controls="vue-default-{{ id }}">Vue</a></li>{% endif -%}
+    <li class="app-tabs__list-item" role="presentation"><a class="app-tabs__tab nhsuk-link--no-visited-state" href="#html-default-{{ id }}" role="tab" id="tab_html-default-{{ id }}" aria-controls="html-default-{{ id }}">HTML</a></li>
+    <li class="app-tabs__list-item" role="presentation"><a class="app-tabs__tab nhsuk-link--no-visited-state" href="#nunjucks-default-{{ id }}" role="tab" id="tab_nunjucks-default-{{ id }}" aria-controls="nunjucks-default-{{ id }}">Nunjucks</a></li>
+    {%- if jsCode %}<li class="app-tabs__list-item" role="presentation"><a class="app-tabs__tab nhsuk-link--no-visited-state" href="#js-default-{{ id }}" role="tab" id="tab_js-default-{{ id }}" aria-controls="js-default-{{ id }}">JavaScript</a></li>{% endif -%}
+    {%- if figmaLink %}<li class="app-tabs__list-item" role="presentation"><a class="app-tabs__tab nhsuk-link--no-visited-state" href="#figma-default-{{ id }}" role="tab" id="tab_figma-default-{{ id }}" aria-controls="figma-default-{{ id }}">Figma</a></li>{% endif -%}
+    {%- if vueLink %}<li class="app-tabs__list-item" role="presentation"><a class="app-tabs__tab nhsuk-link--no-visited-state" href="#vue-default-{{ id }}" role="tab" id="tab_vue-default-{{ id }}" aria-controls="vue-default-{{ id }}">Vue</a></li>{% endif -%}
   </ul>
 
   <div class="app-tabs__panel app-tabs__panel--hidden" id="html-default-{{ id }}" role="tabpanel" aria-labelledby="tab_html-default-{{ id }}">

diff --git a/docs/_includes/layouts/base.njk b/docs/_includes/layouts/base.njk
@@ -2,6 +2,7 @@
 {% from 'footer/macro.njk' import footer %}
 {% from 'breadcrumb/macro.njk' import breadcrumb %}
 {% from 'skip-link/macro.njk' import skipLink %}
+{% from "icon/macro.njk" import nhsappIcon %}
 
 <!DOCTYPE html>
 <html lang="en">
@@ -79,8 +80,8 @@
       {% endblock %}
 
       {% block container %}
-        <div class="nhsuk-width-container">
-          <main role="main" id="maincontent" class="nhsuk-main-wrapper">
+        <div class="nhsuk-width-container{% if containerClasses %} {{ containerClasses }}{% endif %}">
+          <main role="main" id="maincontent" class="nhsuk-main-wrapper{% if mainClasses %} {{ mainClasses }}{% endif %}">
             {% block main %}
               {{ content | safe }}
             {% endblock main %}

diff --git a/docs/_includes/layouts/example-full-page-mobile-not-logged-in.njk b/docs/_includes/layouts/example-full-page-mobile-not-logged-in.njk
@@ -0,0 +1,16 @@
+{% extends "./base.njk" %}
+
+{% block skiplink %}{% endblock %}
+
+{% set mainClasses = "nhsuk-main-wrapper--s" %}
+
+{% block header %}
+  {% include "layouts/partials/header-native.njk" %}
+{% endblock %}
+
+{% block footer %}
+{% endblock %}
+
+{% block content %}
+  {{ content | safe }}
+{% endblock %}
diff --git a/docs/_includes/layouts/example-full-page-mobile.njk b/docs/_includes/layouts/example-full-page-mobile.njk
@@ -0,0 +1,18 @@
+{% extends "./base.njk" %}
+
+{% block skiplink %}{% endblock %}
+
+{% set containerClasses = "app-width-container" %}
+{% set mainClasses = "app-main-wrapper" %}
+
+{% block header %}
+  {% include "layouts/partials/top-nav-native.njk" %}
+{% endblock %}
+
+{% block footer %}
+  {% include "layouts/partials/bottom-nav-native.njk" %}
+{% endblock %}
+
+{% block content %}
+  {{ content | safe }}
+{% endblock %}
diff --git a/docs/_includes/layouts/example-full-page-web.njk b/docs/_includes/layouts/example-full-page-web.njk
@@ -0,0 +1,15 @@
+{% extends "./base.njk" %}
+
+{% set mainClasses = "nhsuk-main-wrapper--s" %}
+
+{% block header %}
+  {% include "layouts/partials/header-web.njk" %}
+{% endblock %}
+
+{% block footer %}
+  {% include "layouts/partials/footer-web.njk" %}
+{% endblock %}
+
+{% block content %}
+  {{ content | safe }}
+{% endblock %}
diff --git a/docs/_includes/layouts/partials/bottom-nav-native.njk b/docs/_includes/layouts/partials/bottom-nav-native.njk
@@ -0,0 +1,32 @@
+<nav class="app-bottom-nav-native">
+  <div class="nhsuk-width-container">
+    <div class="nhsuk-grid-row">
+      <ul class="app-bottom-nav-native__list">
+        <li class="app-bottom-nav-native__item">
+          <a class="app-bottom-nav-native__link" href="#">
+            {{ nhsappIcon('home') }}
+            <span class="app-bottom-nav-native__label ">Home</span>
+          </a>
+        </li>
+        <li class="app-bottom-nav-native__item">
+          <a class="app-bottom-nav-native__link" href="#">
+            {{ nhsappIcon('crossFilled') }}    
+            <span class="app-bottom-nav-native__label app-bottom-nav-native__label--active">Services</span>
+          </a>
+        </li>
+        <li class="app-bottom-nav-native__item">
+          <a class="app-bottom-nav-native__link" href="#">
+            {{ nhsappIcon('heart') }}
+            <span class="app-bottom-nav-native__label ">Your health</span>
+          </a>
+        </li>
+        <li class="app-bottom-nav-native__item">
+          <a class="app-bottom-nav-native__link" href="#">
+            {{ nhsappIcon('messages') }}
+            <span class="app-bottom-nav-native__label ">Messages</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>
diff --git a/docs/_includes/layouts/partials/feedback-section.njk b/docs/_includes/layouts/partials/feedback-section.njk
@@ -1,4 +1,10 @@
-<h2>Help improve this component</h2>
-<p>If you have used or researched this component, please let us know what you found so we can make it better for everyone.</p> 
+{% if tags and "pattern" in tags %}
+  <h2>Help improve this pattern</h2>
+  <p>If you have used or researched this pattern, please let us know what you found so we can make it better for everyone.</p> 
+{% else %}
+  <h2>Help improve this component</h2>
+  <p>If you have used or researched this component, please let us know what you found so we can make it better for everyone.</p> 
+{% endif %}
+
 <p><a href="https://github.com/nhsuk/nhsapp-frontend/issues/{{ backlogID }}">Discuss '{{ title }}'  on GitHub</a> where you can share anything you think might be useful.</p>
 <p>You can also <a href="/community/help-and-feedback/">share feedback with us on Slack</a>.</p>
diff --git a/docs/_includes/layouts/partials/footer-web.njk b/docs/_includes/layouts/partials/footer-web.njk
@@ -0,0 +1,22 @@
+{% from 'footer/macro.njk' import footer %}
+
+{{ footer({
+  "links": [
+    {
+      "URL": "#",
+      "label": "Terms of use"
+    },
+    {
+      "URL": "#",
+      "label": "Privacy policy"
+    },
+    {
+      "URL": "#",
+      "label": "Help and support"
+    },
+    {
+      "URL": "#",
+      "label": "Accessibility statement"
+    }
+  ]
+})}}
diff --git a/docs/_includes/layouts/partials/header-native.njk b/docs/_includes/layouts/partials/header-native.njk
@@ -0,0 +1,8 @@
+<header class="nhsuk-header app-header--native" role="banner">
+  <div class="nhsuk-header__container">
+    <svg class="nhsuk-logo" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
+      <path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path>
+      <path class="nhsuk-logo__text" fill="#fff" 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>
+    </svg>
+  </div>
+</header>
diff --git a/docs/_includes/layouts/partials/header-web.njk b/docs/_includes/layouts/partials/header-web.njk
@@ -0,0 +1,85 @@
+<!-- This is HTML instead of a macro for now, as the macro doesn't support classes on primary link items -->
+<header class="nhsuk-header nhsuk-header--left" role="banner">
+
+  <div class="nhsuk-header__container">
+    <div class="nhsuk-header__logo">
+      <a class="nhsuk-header__link nhsuk-header__link--service " href="/" aria-label="NHS homepage">
+      <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
+        <path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v46H0z"></path>
+        <path class="nhsuk-logo__text" fill="#fff" 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>
+      </svg>
+      </a>
+    </div>
+    <nav class="app-header__secondary-nav">
+      <ul class="app-header__secondary-nav-list">
+        <li class="app-header__secondary-nav-item">
+          <a class="app-header__secondary-nav-link" href="#">
+            Help and support
+          </a>
+        </li>
+        <strong aria-hidden="true"> | </strong>
+        <li class="app-header__secondary-nav-item">
+          <a class="app-header__secondary-nav-link" href="#">
+            Account and settings
+          </a>
+        </li>
+        <strong aria-hidden="true"> | </strong>
+        <li class="app-header__secondary-nav-item">
+          <a class="app-header__secondary-nav-link" href="#">
+            Log out
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div class="nhsuk-navigation-container">
+    <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
+      <ul class="nhsuk-header__navigation-list">
+        <li class="nhsuk-header__navigation-item">
+          <a class="nhsuk-header__navigation-link {% if hub === 'Home' %}app-header__navigation-link--current{% endif %}" href="/pages/home-{{ data['accountType'] }}">
+            Home
+          </a>
+        </li>
+        <li class="nhsuk-header__navigation-item">
+          <a class="nhsuk-header__navigation-link {% if hub === 'Services' %}app-header__navigation-link--current{% endif %}" href="/pages/services-{{ data['accountType'] }}">
+            Services
+          </a>
+        </li>
+        <li class="nhsuk-header__navigation-item">
+          <a class="nhsuk-header__navigation-link {% if hub === 'Your health' %}app-header__navigation-link--current{% endif %}" href="/pages/your-health-{{ data['accountType'] }}">
+            Your health
+          </a>
+        </li>
+        <li class="nhsuk-header__navigation-item">
+          <a class="nhsuk-header__navigation-link {% if hub === 'Messages' %}app-header__navigation-link--current{% endif %}" href="/pages/messages-{{ data['accountType'] }}">
+            Messages
+          </a>
+        </li>
+        <li class="nhsuk-header__navigation-item app-header__navigation-item--hide-on-desktop">
+          <a class="nhsuk-header__navigation-link" href="#">
+            Help and support
+          </a>
+        </li>
+        <li class="nhsuk-header__navigation-item app-header__navigation-item--hide-on-desktop">
+          <a class="nhsuk-header__navigation-link" href="/pages/account-and-settings-{{ data['accountType'] }}">
+            Account and settings
+          </a>
+        </li>
+        <li class="nhsuk-header__navigation-item app-header__navigation-item--hide-on-desktop">
+          <a class="nhsuk-header__navigation-link" href="#">
+            Sign out
+          </a>
+        </li>
+        <li class="nhsuk-mobile-menu-container">
+          <button class="nhsuk-header__menu-toggle nhsuk-header__navigation-link" id="toggle-menu" aria-expanded="false">
+            <span class="nhsuk-u-visually-hidden">Browse</span>
+            More
+            <svg class="nhsuk-icon nhsuk-icon__chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+              <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>
+          </button>
+        <ul class="nhsuk-header__drop-down nhsuk-header__drop-down--hidden"></ul></li>
+      </ul>
+    </nav>
+  </div>
+</header>
diff --git a/docs/_includes/layouts/partials/top-nav-native.njk b/docs/_includes/layouts/partials/top-nav-native.njk
@@ -0,0 +1,20 @@
+<header class="app-top-nav-native">
+  <div class="nhsuk-width-container">
+    <nav class="app-top-nav-native__nav">
+      <ul class="app-top-nav-native__nav-list">
+        <li class="app-top-nav-native__nav-item">
+          <a class="app-top-nav-native__nav-link" href="#">
+            {{ nhsappIcon('help') }}
+            <span class="nhsuk-u-visually-hidden">Help</span>
+          </a>
+        </li>
+        <li class="app-top-nav-native__nav-item">
+          <a class="app-top-nav-native__nav-link" href="#">
+            {{ nhsappIcon('account') }}
+            <span class="nhsuk-u-visually-hidden">Account and settings</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</header>
diff --git a/docs/_includes/layouts/pattern.njk b/docs/_includes/layouts/pattern.njk
@@ -0,0 +1,51 @@
+{% extends "./sidebar.njk" %}
+
+{%- from "./partials/side-navigation.njk" import appSideNavigation %}
+
+{% block breadcrumb %}
+  {% if title === "Patterns" %}
+    {{ breadcrumb({
+      href: "/",
+      text: "Home"
+    }) }}
+  {% else %}
+    {{ breadcrumb({
+      items: [
+        {
+          href: "/",
+          text: "Home"
+        }
+      ],
+      href: "/patterns",
+      text: "Patterns"
+    }) }}
+  {% endif %}
+{% endblock %}
+
+{% set sidebar %}
+  {{ appSideNavigation({
+    label: 'Patterns',
+    currentPath: page.url,
+    sections: [
+      {
+        heading: {
+          text: 'Patterns'
+        },
+        items: collections.pattern | sort(attribute="data.title")
+      }
+    ]
+  }) }}
+{% endset %}
+
+{% block main %}
+  <h1 class="nhsuk-heading-xl nhsuk-u-margin-bottom-5">
+    {{ title }}
+  </h1>
+  <p>{{ description }}</p>
+  {{ content | safe }}
+  {% if tags and "pattern" in tags %}
+    {% include "layouts/partials/feedback-section.njk" %}
+  {% else %}
+  {% endif %}
+
+{% endblock %}
diff --git a/docs/assets/css/_container.scss b/docs/assets/css/_container.scss
@@ -0,0 +1,9 @@
+// App main container
+.app-width-container {
+  padding-top: 60px; // to give correct spacing for sticky header
+}
+
+// App main wrapper
+.app-main-wrapper {
+  padding: 0 0 130px; // to give correct spacing for sticky footer
+}
diff --git a/docs/assets/css/_example.scss b/docs/assets/css/_example.scss
@@ -62,6 +62,10 @@ pre[class*="language-"] {
   margin: 0;
 }
 
+pre[class*="language-"] {
+  padding-top: 2em;
+}
+
 .app-copy__button {
   background-color: $color_nhsuk-white;
   border: 1px solid $color_nhsuk-green;