Update TNA Frontend

layouts/_design-system-base.njk

@@ -21,6 +21,9 @@
 
 {%- set siteTitle = "The National Archives Design System" -%}
 {%- set pageTitle = title -%}
+{%- set htmlAttributes = {
+  "data-tnacookiespath": "/design-system/"
+} -%}
 
 {% block head %}
   <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' https://fonts.googleapis.com https://use.typekit.net https://p.typekit.net https://tna.dblclk.dev 'unsafe-inline'; img-src 'self' https://www.nationalarchives.gov.uk https://fakeimg.pl https://picsum.photos https://fastly.picsum.photos https://asciinema.org https://tna.dblclk.dev data: https://nationalarchives.github.io/design-system/; font-src 'self' https://use.typekit.net https://fonts.gstatic.com">

lib/index.js

@@ -2,9 +2,7 @@ import Prism from "prismjs";
 
 window.TNAFrontend.initAll();
 
-const cookies = new window.TNAFrontend.Cookies({
-  path: "/design-system/",
-});
+const cookies = new window.TNAFrontend.Cookies();
 
 const setTheme = (theme) => {
   if (theme === "light") {

package.json

@@ -33,7 +33,7 @@
     "ext": "js css scss njk json html md"
   },
   "dependencies": {
-    "@nationalarchives/frontend": "^0.3.0",
+    "@nationalarchives/frontend": "^0.4.0",
     "prismjs": "^1.29.0"
   },
   "devDependencies": {

src/components/gallery/index.md

@@ -8,6 +8,6 @@ group: components
 {% from "partials/example.njk" import example %}
 {% from "partials/component-status.njk" import status %}
 
-{{ example({ group: "components", item: "gallery", example: "default", html: true, nunjucks: true, size: "xxxl", noPadding: true }, 2) }}
+{{ example({ group: "components", item: "gallery", example: "default", html: true, nunjucks: true, size: "xxxl" }, 2) }}
 
 {{ status(false, 1, 1, 2, 2, false) }}

src/cookies/index.md

@@ -85,3 +85,29 @@ This site currently collects no usage data.
     }
   }) }}
 </div>
+
+## Cookies that are used for marketing purposes
+
+These cookies may be set by third party websites and track things that can be used for marketing and advertising purposes.
+
+This site currently collects no data for marketing purposes.
+
+<p aria-live="assertive" class="tna-ds--show-on-js" data-showcookiepreference="marketing" data-showcookiepreferenceonaccepted="Cookies that can be used for marketing purposes have been accepted." data-showcookiepreferenceonrejected="Cookies that can be used for marketing purposes have been rejected."></p>
+
+<div class="tna-button-group tna-ds--show-on-js">
+  {{ tnaButton({
+    text: "Allow marketing cookies",
+    buttonElement: true,
+    attributes: {
+      "data-setcookiepreference": "marketing",
+      "data-setcookiepreferencevalue": "true"
+    }
+  }) }} {{ tnaButton({
+    text: "Decline marketing cookies",
+    buttonElement: true,
+    attributes: {
+      "data-setcookiepreference": "marketing",
+      "data-setcookiepreferencevalue": "false"
+    }
+  }) }}
+</div>

src/styles/typography/index.md

@@ -61,6 +61,10 @@ You can use a larger paragraph as an introduction to the page or section.
 
 {{ example({ group: "styles", item: "typography", example: "paragraphs-large", html: true, nunjucks: false, size: "xs", openHTML: true }) }}
 
+There is also a slightly bolder version of the large paragraph.
+
+{{ example({ group: "styles", item: "typography", example: "paragraphs-large-bold", html: true, nunjucks: false, size: "xs", openHTML: true }) }}
+
 ### Small
 
 You can use the `<small>` element sparingly to make your paragraph font size smaller.

src/styles/typography/paragraphs-large-bold/index.njk

@@ -0,0 +1,7 @@
+---
+title: Paragraphs large bold
+layout: examples/plain.njk
+private: true
+---
+
+<p class="tna-large-paragraph tna-large-paragraph--bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>