Merge pull request #7 from scottish-government-design-system/dsp-786

dsp-786 added blocks for start of body and ds_page-top
scottish-government-design-system · Jul 22, 2024 · fc63ebc · fc63ebc
2 parents c47ea9d + 96cd65a
commit fc63ebc
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 0 deletions.
diff --git a/docs/templates.md b/docs/templates.md
@@ -172,6 +172,10 @@ The following blocks are used by the plugin's templates. You can override these
     <dd>area to specify what stylesheets to include, with the default list loading the Roboto webfont, followed by any user defined stylesheets and then those imported from installed plugins.</dd>
     <dt><code>headIcons</code></dt>
     <dd>list of favicon types for various browsers, with the default icon as the Scottish Government saltire.</dd>
+    <dt><code>bodyStart</code></dt>
+    <dd>area to place elements immediately after the opening <code>&lt;body&gt;</code> tag.</dd>
+    <dt><code>pageTopStart</code></dt>
+    <dd>area to place elements at the start of the <code>ds_page__top</code> area of the page, immediately before the <code>siteHeader</code> block.</dd>
     <dt><code>siteHeader</code></dt>
     <dd>area to place the 'Site header' pattern, with the default containing a number of additional blocks for customisation.</dd>
     <dt><code>siteBrandingLogo</code></dt>

diff --git a/src/nunjucks/sg-prototype-templates/layouts/_base-layout.njk b/src/nunjucks/sg-prototype-templates/layouts/_base-layout.njk
@@ -26,6 +26,7 @@
         <script src="{{ assetPathTemplates }}/scripts/js-enabled.js"></script>
     </head>
     <body{%- if bodyClasses %} class="{{ bodyClasses }}"{% endif %}>
+        {% block bodyStart %}{% endblock %}
         <div class="ds_skip-links">
             <ul class="ds_skip-links__list">
                 <li class="ds_skip-links__item">
@@ -36,6 +37,7 @@
         <span id="page-top"></span>
         <div class="ds_page">
             <div class="ds_page__top">
+                {% block pageTopStart %}{% endblock %}
                 {% block siteHeader %}
                 <header class="ds_site-header  ds_site-header--gradient" role="banner">
                     <div class="ds_wrapper">

diff --git a/src/nunjucks/sg-prototype-templates/templates/blankpage.njk b/src/nunjucks/sg-prototype-templates/templates/blankpage.njk
@@ -26,6 +26,30 @@
 
 {% block pageTitle %}Blank page{% endblock %}
 
+{# Cookie banner to show placement location of this and notification banners #}
+{% block pageTopStart %}
+<div id="cookie-notice" class="ds_notification  ds_notification--large  ds_notification--cookie  js-initial-cookie-content" data-module="ds-cookie-notification">
+    <div class="ds_wrapper">
+        <div class="ds_notification__content">
+            <h2 class="visually-hidden">Information</h2>
+
+            <div class="ds_notification__text">
+                <p>We use <a href="#">cookies</a> to collect anonymous data to help us improve your site browsing
+                    experience.</p>
+                <p>Click 'Accept all cookies' to agree to all cookies that collect anonymous data.
+                    To only allow the cookies that make the site work, click 'Use essential cookies only.' Visit 'Set cookie preferences' to control specific cookies.</p>
+            </div>
+
+            <div class="ds_notification__actions">
+                <button class="ds_button  ds_button--small  js-accept-all-cookies">Accept all cookies</button>
+                <button class="ds_button  ds_button--small  ds_button--secondary  js-accept-essential-cookies">Use essential cookies only</button>
+                <a href="#">Set cookie preferences</a>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
 {# Use an empty siteBrandingTitle block to only show the logo for site branding #}
 {% block siteBrandingTitle %}
 <div class="ds_site-branding__title">