Add more examples and documentation

nationalarchives · Nov 1, 2023 · d74f5f5 · d74f5f5
1 parent d7520b6
commit d74f5f5
Show file tree

Hide file tree

Showing 24 changed files with 826 additions and 76 deletions.
diff --git a/.metalsmith/markdownRenderer.js b/.metalsmith/markdownRenderer.js
@@ -51,7 +51,7 @@ markdownRenderer.paragraph = function (text) {
   return /^\s*&lt;/.test(text) || /^\s*\{/.test(text)
     ? text
     : `
-  <p class="tna-p">
+  <p>
     ${text}
   </p>`;
 };
@@ -112,7 +112,11 @@ markdownRenderer.code = function (code, infostring, escaped) {
     return code;
   }
 
-  return `<pre><code class="language-${escape(lang)}">${
+  if (lang === "plain") {
+    return `<pre class="tna-ds-pre">${code}</pre>\n`;
+  }
+
+  return `<pre class="tna-ds-pre"><code class="language-${escape(lang)}">${
     escaped ? code : escape(code, true)
   }</code></pre>\n`;
 };

diff --git a/layouts/_example.njk b/layouts/_example.njk
@@ -4,7 +4,7 @@
   {% set exampleRoot = "src/" + params.group + "/" + params.item + "/" + params.example + "/" %}
   {% set examplePath = exampleRoot + "index.njk" %}
   {% set exampleURL = "/design-system/" + params.group + "/" + params.item + "/" + params.example + "/index.html" %}
-
+  
   <section class="tna-ds-component-example">
     {% if not params.noOpenInNewTab %}
     <small class="tna-ds-component-example__open-new-tab">

diff --git a/lib/index.js b/lib/index.js
@@ -12,6 +12,54 @@ const selectThemeFromCookie = () => {
 };
 
 const cookies = new TNAFrontend.Cookies();
+
+const updateCookiePreferenceDisplays = () => {
+  const cookiePreferenceDisplays = document.querySelectorAll(
+    "[data-showcookiepreference]",
+  );
+  cookiePreferenceDisplays.forEach((cookiePreferenceDisplay) => {
+    cookiePreferenceDisplay.innerText = cookies.isPolicyAccepted(
+      cookiePreferenceDisplay.getAttribute("data-showcookiepreference"),
+    )
+      ? "accepted"
+      : "declined";
+  });
+};
+updateCookiePreferenceDisplays();
+
+const setCookiePreferences = document.querySelectorAll(
+  "[data-setcookiepreference][data-setcookiepreferencevalue]",
+);
+setCookiePreferences.forEach((setCookiePreference) => {
+  setCookiePreference.addEventListener("click", () => {
+    console.log(cookies.policies);
+    console.log(cookies.allPolicies);
+    if (
+      setCookiePreference.getAttribute("data-setcookiepreferencevalue") ===
+      "true"
+    ) {
+      console.log(
+        "A",
+        setCookiePreference.getAttribute("data-setcookiepreference"),
+      );
+      cookies.acceptPolicy(
+        setCookiePreference.getAttribute("data-setcookiepreference"),
+      );
+    } else {
+      console.log(
+        "R",
+        setCookiePreference.getAttribute("data-setcookiepreference"),
+      );
+      cookies.rejectPolicy(
+        setCookiePreference.getAttribute("data-setcookiepreference"),
+      );
+    }
+    console.log(cookies.policies);
+    console.log(cookies.allPolicies);
+    updateCookiePreferenceDisplays();
+  });
+});
+
 if (cookies.isPolicyAccepted("settings")) {
   if (cookies.exists("dark-theme")) {
     selectThemeFromCookie();
@@ -85,9 +133,7 @@ if (navigator.clipboard) {
   });
 }
 
-// const exampleCodeBlocks = document.querySelectorAll(
-//   ".tna-ds-component-example__code > pre[tabindex='0']",
-// );
-// exampleCodeBlocks.forEach((exampleCodeBlock) => {
-//   exampleCodeBlock.setAttribute("tabindex", "-1");
-// });
+const hideOnJsBlocks = document.querySelectorAll(".tna-ds--hide-on-js");
+hideOnJsBlocks.forEach((hideOnJsBlock) => {
+  hideOnJsBlock.style.display = "none";
+});
diff --git a/lib/index.scss b/lib/index.scss
@@ -222,11 +222,21 @@ $code-background: #f1ece9;
   }
 }
 
+.tna-ds-pre {
+  margin-top: 2rem !important;
+  margin-bottom: 0;
+  padding: 1rem;
+
+  background-color: #f1ece9;
+
+  @include colour.colour-border("keyline", 1px);
+}
+
 p,
 li,
 table {
   code {
-    color: colour.brand-colour("maroon");
+    color: #905;
 
     background-color: $code-background;
   }

diff --git a/src/cookies.md b/src/cookies.md
@@ -3,6 +3,61 @@ layout: simple.njk
 title: Cookies
 ---
 
+{% from "nationalarchives/components/button/macro.njk" import tnaButton %}
+{% from "nationalarchives/components/message/macro.njk" import tnaMessage %}
+
 # Cookies
 
-Hello
+Cookies are files saved on your phone, tablet or computer when you visit a website.
+
+{{ tnaMessage({
+  message: "JavaScript is not available on your browser. This could be a network issue. Without JavaScript available your cookie preferences cannot be saved.",
+  classes: "tna-ds--hide-on-js"
+}) }}
+
+## Preferences
+
+### Strictly necessary cookies
+
+These essential cookies do things like remember your progress or allow you to log in to admin areas. They always need to be on.
+
+The cookies used on this site are:
+
+| Name                      | Purpose                                                     | Expires |
+| ------------------------- | ----------------------------------------------------------- | ------- |
+| `cookies_preferences_set` | Lets us know that you’ve saved your cookie consent settings | 1 year  |
+| `cookies_policy`          | Saves your cookie consent settings                          | 1 year  |
+
+### Cookies that remember your settings
+
+These cookies do things like remember your preferences and the choices you make, to personalise your experience of using the site.
+
+| Name                      | Purpose                                              | Expires |
+| ------------------------- | ---------------------------------------------------- | ------- |
+| `dark-theme`              | Saves your preference to a light or dark themed site | 1 year  |
+
+<p aria-live="assertive">Settings cookies are currently <strong data-showcookiepreference="settings"></strong>.</p>
+
+<!-- <div class="tna-button-group">
+{{ tnaButton({
+  text: "Allow setting cookies",
+  buttonElement: true,
+  attributes: {
+    "data-setcookiepreference": "settings",
+    "data-setcookiepreferencevalue": "true"
+  }
+}) }} {{ tnaButton({
+  text: "Decline setting cookies",
+  buttonElement: true,
+  attributes: {
+    "data-setcookiepreference": "settings",
+    "data-setcookiepreferencevalue": "false"
+  }
+}) }}
+</div> -->
+
+### Cookies that measure website use
+
+These cookies may be set by third party websites and do things like measure how you view YouTube videos that are on the National Archives Design System.
+
+This site currently collects no usage data.
diff --git a/src/styles/colours/accent-blue/index.njk b/src/styles/colours/accent-blue/index.njk
@@ -0,0 +1,38 @@
+---
+title: Blue accent colour
+layout: layout-example.njk
+---
+
+<section class="tna-template--blue-accent">
+  <div class="tna-phase-banner tna-phase-banner--accent">
+    <div class="tna-container">
+      <div class="tna-column tna-column--full-tiny">
+        <span class="tna-phase-banner__phase">
+          Beta
+        </span>
+      </div>
+      <div class="tna-column tna-column--flex-1 tna-column--full-tiny">
+        <p class="tna-phase-banner__message">
+          This is a new service - <a href="#">give us your feedback</a> to help improve it.
+        </p>
+      </div>
+    </div>
+  </div>
+  <hgroup class="tna-hgroup-xl">
+    <p class="tna-hgroup__supertitle">Supertitle</p>
+    <h1 class="tna-hgroup__title">Title</h1>
+  </hgroup>
+  <ol class="tna-ol">
+    <li>First</li>
+  </ol>
+  <blockquote class="tna-blockquote">
+    <div class="tna-blockquote__quote">
+      <p>A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.</p>
+    </div>
+    <p class="tna-blockquote__author">Douglas Adams, <a href="#">Mostly Harmless</a></p>
+  </blockquote>
+  <div class="tna-button-group">
+    <a href="#" class="tna-button" role="button">Primary button</a>
+    <a href="#" class="tna-button tna-button--accent" role="button">Accent button</a>
+  </div>
+</section>
diff --git a/src/styles/colours/accent-green/index.njk b/src/styles/colours/accent-green/index.njk
@@ -0,0 +1,38 @@
+---
+title: Green accent colour
+layout: layout-example.njk
+---
+
+<section class="tna-template--green-accent">
+  <div class="tna-phase-banner tna-phase-banner--accent">
+    <div class="tna-container">
+      <div class="tna-column tna-column--full-tiny">
+        <span class="tna-phase-banner__phase">
+          Beta
+        </span>
+      </div>
+      <div class="tna-column tna-column--flex-1 tna-column--full-tiny">
+        <p class="tna-phase-banner__message">
+          This is a new service - <a href="#">give us your feedback</a> to help improve it.
+        </p>
+      </div>
+    </div>
+  </div>
+  <hgroup class="tna-hgroup-xl">
+    <p class="tna-hgroup__supertitle">Supertitle</p>
+    <h1 class="tna-hgroup__title">Title</h1>
+  </hgroup>
+  <ol class="tna-ol">
+    <li>First</li>
+  </ol>
+  <blockquote class="tna-blockquote">
+    <div class="tna-blockquote__quote">
+      <p>A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.</p>
+    </div>
+    <p class="tna-blockquote__author">Douglas Adams, <a href="#">Mostly Harmless</a></p>
+  </blockquote>
+  <div class="tna-button-group">
+    <a href="#" class="tna-button" role="button">Primary button</a>
+    <a href="#" class="tna-button tna-button--accent" role="button">Accent button</a>
+  </div>
+</section>
diff --git a/src/styles/colours/accent-orange/index.njk b/src/styles/colours/accent-orange/index.njk
@@ -0,0 +1,38 @@
+---
+title: Orange accent colour
+layout: layout-example.njk
+---
+
+<section class="tna-template--orange-accent">
+  <div class="tna-phase-banner tna-phase-banner--accent">
+    <div class="tna-container">
+      <div class="tna-column tna-column--full-tiny">
+        <span class="tna-phase-banner__phase">
+          Beta
+        </span>
+      </div>
+      <div class="tna-column tna-column--flex-1 tna-column--full-tiny">
+        <p class="tna-phase-banner__message">
+          This is a new service - <a href="#">give us your feedback</a> to help improve it.
+        </p>
+      </div>
+    </div>
+  </div>
+  <hgroup class="tna-hgroup-xl">
+    <p class="tna-hgroup__supertitle">Supertitle</p>
+    <h1 class="tna-hgroup__title">Title</h1>
+  </hgroup>
+  <ol class="tna-ol">
+    <li>First</li>
+  </ol>
+  <blockquote class="tna-blockquote">
+    <div class="tna-blockquote__quote">
+      <p>A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.</p>
+    </div>
+    <p class="tna-blockquote__author">Douglas Adams, <a href="#">Mostly Harmless</a></p>
+  </blockquote>
+  <div class="tna-button-group">
+    <a href="#" class="tna-button" role="button">Primary button</a>
+    <a href="#" class="tna-button tna-button--accent" role="button">Accent button</a>
+  </div>
+</section>
diff --git a/src/styles/colours/accent-pink/index.njk b/src/styles/colours/accent-pink/index.njk
@@ -0,0 +1,38 @@
+---
+title: Pink accent colour
+layout: layout-example.njk
+---
+
+<section class="tna-template--pink-accent">
+  <div class="tna-phase-banner tna-phase-banner--accent">
+    <div class="tna-container">
+      <div class="tna-column tna-column--full-tiny">
+        <span class="tna-phase-banner__phase">
+          Beta
+        </span>
+      </div>
+      <div class="tna-column tna-column--flex-1 tna-column--full-tiny">
+        <p class="tna-phase-banner__message">
+          This is a new service - <a href="#">give us your feedback</a> to help improve it.
+        </p>
+      </div>
+    </div>
+  </div>
+  <hgroup class="tna-hgroup-xl">
+    <p class="tna-hgroup__supertitle">Supertitle</p>
+    <h1 class="tna-hgroup__title">Title</h1>
+  </hgroup>
+  <ol class="tna-ol">
+    <li>First</li>
+  </ol>
+  <blockquote class="tna-blockquote">
+    <div class="tna-blockquote__quote">
+      <p>A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.</p>
+    </div>
+    <p class="tna-blockquote__author">Douglas Adams, <a href="#">Mostly Harmless</a></p>
+  </blockquote>
+  <div class="tna-button-group">
+    <a href="#" class="tna-button" role="button">Primary button</a>
+    <a href="#" class="tna-button tna-button--accent" role="button">Accent button</a>
+  </div>
+</section>
diff --git a/src/styles/colours/accent-yellow/index.njk b/src/styles/colours/accent-yellow/index.njk
@@ -0,0 +1,38 @@
+---
+title: Yellow accent colour
+layout: layout-example.njk
+---
+
+<section class="tna-template--yellow-accent">
+  <div class="tna-phase-banner tna-phase-banner--accent">
+    <div class="tna-container">
+      <div class="tna-column tna-column--full-tiny">
+        <span class="tna-phase-banner__phase">
+          Beta
+        </span>
+      </div>
+      <div class="tna-column tna-column--flex-1 tna-column--full-tiny">
+        <p class="tna-phase-banner__message">
+          This is a new service - <a href="#">give us your feedback</a> to help improve it.
+        </p>
+      </div>
+    </div>
+  </div>
+  <hgroup class="tna-hgroup-xl">
+    <p class="tna-hgroup__supertitle">Supertitle</p>
+    <h1 class="tna-hgroup__title">Title</h1>
+  </hgroup>
+  <ol class="tna-ol">
+    <li>First</li>
+  </ol>
+  <blockquote class="tna-blockquote">
+    <div class="tna-blockquote__quote">
+      <p>A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.</p>
+    </div>
+    <p class="tna-blockquote__author">Douglas Adams, <a href="#">Mostly Harmless</a></p>
+  </blockquote>
+  <div class="tna-button-group">
+    <a href="#" class="tna-button" role="button">Primary button</a>
+    <a href="#" class="tna-button tna-button--accent" role="button">Accent button</a>
+  </div>
+</section>
diff --git a/src/styles/colours/block-accent-light/index.njk b/src/styles/colours/block-accent-light/index.njk
@@ -0,0 +1,18 @@
+---
+title: Light accented block colours
+layout: layout-example.njk
+---
+
+<div class="tna-template--blue-accent">
+  <aside class="tna-aside tna-background--accent-light">
+    <hgroup class="tna-hgroup-xl">
+      <p class="tna-hgroup__supertitle">Supertitle</p>
+      <h1 class="tna-hgroup__title">Title</h1>
+    </hgroup>
+    <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Fusce consequat semper sagittis. Quisque magna nisl, vulputate a nunc id, efficitur luctus metus.</p>
+    <div class="tna-button-group">
+      <a href="#" class="tna-button" role="button">Primary button</a>
+      <a href="#" class="tna-button tna-button--accent" role="button">Accent button</a>
+    </div>
+  </aside>
+</div>