Update tna-frontend

nationalarchives · May 13, 2024 · 6b05a15 · 6b05a15
1 parent 69e4436
commit 6b05a15
Show file tree

Hide file tree

Showing 24 changed files with 134 additions and 357 deletions.
diff --git a/layouts/_design-system-base.njk b/layouts/_design-system-base.njk
@@ -25,7 +25,7 @@
 {%- set pageTitle = title -%}
 
 {% 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 'unsafe-inline'; img-src 'self' https://www.nationalarchives.gov.uk https://fakeimg.pl https://picsum.photos https://asciinema.org data: https://nationalarchives.github.io/design-system/; font-src 'self' https://use.typekit.net https://fonts.gstatic.com">
+  <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 'unsafe-inline'; img-src 'self' https://www.nationalarchives.gov.uk https://fakeimg.pl https://picsum.photos https://fastly.picsum.photos https://asciinema.org data: https://nationalarchives.github.io/design-system/; font-src 'self' https://use.typekit.net https://fonts.gstatic.com">
   {% if description %}
   <meta name="description" content="{{ description }}">
   {% endif %}
@@ -90,6 +90,7 @@
 {% block footer %}
   {% set buildDate = stats.atime | prettyDate %}
   {{ tnaFooter({
+    themeSelector: true,
     navigation: [
       {
         title: "Meta",

diff --git a/layouts/simple-with-nav.njk b/layouts/simple-with-nav.njk
@@ -1,5 +1,7 @@
 {% extends "./_design-system-base.njk" %}
 
+{%- set themeAccent = "pink" -%}
+
 {% block cookies %}
   {% if path != 'cookies' %}
   {{ super() }}

diff --git a/lib/index.js b/lib/index.js
@@ -6,32 +6,54 @@ const cookies = new window.TNAFrontend.Cookies({
   path: "/design-system/",
 });
 
-const setTheme = (dark = false) => {
-  if (dark) {
-    document.documentElement.classList.remove("tna-template--light-theme");
-    document.documentElement.classList.add(`tna-template--dark-theme`);
-  } else {
+const setTheme = (theme) => {
+  if (theme === "light") {
     document.documentElement.classList.remove("tna-template--dark-theme");
-    document.documentElement.classList.add(`tna-template--light-theme`);
+    document.documentElement.classList.remove("tna-template--system-theme");
+  } else {
+    document.documentElement.classList.add(`tna-template--${theme}-theme`);
   }
 };
 
-const setThemeFromCookie = () => {
-  setTheme(
-    cookies.exists("dark_theme") && cookies.hasValue("dark_theme", "true"),
-  );
-};
+setTheme(cookies.exists("theme") ? cookies.get("theme") : "light");
 
-const setThemeFromUserPref = () => {
-  setTheme(window.matchMedia("(prefers-color-scheme: dark)")?.matches || false);
-};
+document
+  .querySelectorAll("[data-setcookiepreference][data-setcookiepreferencevalue]")
+  .forEach((setCookiePreference) => {
+    setCookiePreference.addEventListener("click", () => {
+      if (
+        setCookiePreference.getAttribute("data-setcookiepreferencevalue") ===
+        "true"
+      ) {
+        cookies.acceptPolicy(
+          setCookiePreference.getAttribute("data-setcookiepreference"),
+        );
+      } else {
+        cookies.rejectPolicy(
+          setCookiePreference.getAttribute("data-setcookiepreference"),
+        );
+      }
+      cookies.set("cookie_preferences_set", "true");
 
-const setThemeCookieFromUserPref = () => {
-  cookies.set(
-    "dark_theme",
-    window.matchMedia("(prefers-color-scheme: dark)")?.matches || false,
-  );
-};
+      const setCookiePreferenceParent = setCookiePreference.parentElement;
+      if (setCookiePreferenceParent.classList.contains("tna-button-group")) {
+        if (setCookiePreferenceParent.querySelector(".tna-chip[aria-live]")) {
+          setCookiePreferenceParent
+            .querySelector(".tna-chip[aria-live]")
+            .remove();
+        }
+        const notificationChip = document.createElement("div");
+        notificationChip.classList.add("tna-chip");
+        notificationChip.setAttribute("aria-live", "assertive");
+        notificationChip.innerHTML =
+          '<span class="tna-visually-hidden">Cookie preference</span> saved';
+        setCookiePreferenceParent.appendChild(notificationChip);
+        setTimeout(() => {
+          notificationChip.remove();
+        }, 3000);
+      }
+    });
+  });
 
 const updateCookiePreferenceDisplays = () => {
   const cookiePreferenceDisplays = document.querySelectorAll(
@@ -77,120 +99,8 @@ const updateCookiePreferenceDisplays = () => {
 
 updateCookiePreferenceDisplays();
 
-const addThemeSwitcher = () => {
-  if (document.getElementById("theme-switcher")) {
-    return;
-  }
-
-  const topNavigation = document.querySelector(
-    ".tna-header__top-navigation-items",
-  );
-
-  const themeButtonsWrapper = document.createElement("li");
-  themeButtonsWrapper.classList.add("tna-header__top-navigation-item");
-  themeButtonsWrapper.setAttribute("id", "theme-switcher");
-
-  const lightThemeButton = document.createElement("button");
-  lightThemeButton.classList.add(
-    "tna-header__top-navigation-item-link",
-    "tna-header__top-navigation-item-link--light",
-  );
-  lightThemeButton.innerHTML = `<i class="fa-solid fa-sun" aria-hidden="true"></i>Switch to light theme`;
-
-  const darkThemeButton = document.createElement("button");
-  darkThemeButton.classList.add(
-    "tna-header__top-navigation-item-link",
-    "tna-header__top-navigation-item-link--dark",
-  );
-  darkThemeButton.innerHTML = `<i class="fa-solid fa-moon" aria-hidden="true"></i>Switch to dark theme`;
-
-  lightThemeButton.addEventListener("click", () => {
-    cookies.set("dark_theme", false);
-    setThemeFromCookie();
-    darkThemeButton.focus();
-  });
-
-  darkThemeButton.addEventListener("click", () => {
-    cookies.set("dark_theme", true);
-    setThemeFromCookie();
-    lightThemeButton.focus();
-  });
-
-  themeButtonsWrapper.appendChild(lightThemeButton);
-  themeButtonsWrapper.appendChild(darkThemeButton);
-  topNavigation.prepend(themeButtonsWrapper);
-};
-
-const removeThemeSwitcher = () => {
-  const themeSwitcher = document.getElementById("theme-switcher");
-  if (themeSwitcher) {
-    themeSwitcher.remove();
-  }
-};
-
-document
-  .querySelectorAll("[data-setcookiepreference][data-setcookiepreferencevalue]")
-  .forEach((setCookiePreference) => {
-    setCookiePreference.addEventListener("click", () => {
-      if (
-        setCookiePreference.getAttribute("data-setcookiepreferencevalue") ===
-        "true"
-      ) {
-        cookies.acceptPolicy(
-          setCookiePreference.getAttribute("data-setcookiepreference"),
-        );
-      } else {
-        cookies.rejectPolicy(
-          setCookiePreference.getAttribute("data-setcookiepreference"),
-        );
-      }
-      cookies.set("cookie_preferences_set", "true");
-
-      const setCookiePreferenceParent = setCookiePreference.parentElement;
-      if (setCookiePreferenceParent.classList.contains("tna-button-group")) {
-        if (setCookiePreferenceParent.querySelector(".tna-chip[aria-live]")) {
-          setCookiePreferenceParent
-            .querySelector(".tna-chip[aria-live]")
-            .remove();
-        }
-        const notificationChip = document.createElement("div");
-        notificationChip.classList.add("tna-chip");
-        notificationChip.setAttribute("aria-live", "assertive");
-        notificationChip.innerHTML =
-          '<span class="tna-visually-hidden">Cookie preference</span> saved';
-        setCookiePreferenceParent.appendChild(notificationChip);
-        setTimeout(() => {
-          notificationChip.remove();
-        }, 3000);
-      }
-    });
-  });
-
-if (cookies.isPolicyAccepted("settings")) {
-  if (!cookies.exists("dark_theme")) {
-    setThemeCookieFromUserPref();
-  }
-  setThemeFromCookie();
-  addThemeSwitcher();
-} else {
-  setThemeFromUserPref();
-}
-
 cookies.on("changePolicy", (data) => {
   updateCookiePreferenceDisplays();
-  if (Object.prototype.hasOwnProperty.call(data, "settings")) {
-    if (data.settings === true) {
-      if (!cookies.exists("dark_theme")) {
-        setThemeCookieFromUserPref();
-      }
-      addThemeSwitcher();
-      setThemeFromCookie();
-    } else {
-      cookies.delete("dark_theme");
-      setThemeFromUserPref();
-      removeThemeSwitcher();
-    }
-  }
 });
 
 const hideOnJsBlocks = document.querySelectorAll(".tna-ds--hide-on-js");

diff --git a/lib/index.scss b/lib/index.scss
@@ -28,7 +28,7 @@
 // @use "@nationalarchives/frontend/nationalarchives/components/index-grid";
 // @use "@nationalarchives/frontend/nationalarchives/components/pagination";
 @use "@nationalarchives/frontend/nationalarchives/components/phase-banner";
-// @use "@nationalarchives/frontend/nationalarchives/components/picture";
+@use "@nationalarchives/frontend/nationalarchives/components/picture";
 // @use "@nationalarchives/frontend/nationalarchives/components/quick-filters";
 // @use "@nationalarchives/frontend/nationalarchives/components/radios";
 // @use "@nationalarchives/frontend/nationalarchives/components/sensitive-image";
@@ -62,6 +62,10 @@
   > .tna-header + .tna-ds-breadcrumbs-wrapper + .tna-container {
     flex: 1;
   }
+
+  .tna-ul ul {
+    margin-top: 0;
+  }
 }
 
 .tna-button {
@@ -101,37 +105,6 @@
 }
 
 .tna-header {
-  button.tna-header__top-navigation-item-link {
-    padding: 0;
-
-    display: flex;
-
-    font-size: inherit;
-    line-height: 1;
-    text-align: left;
-    font-family: inherit;
-
-    background: none;
-
-    border: none;
-
-    cursor: pointer;
-
-    &--light,
-    .tna-template--dark-theme &--dark {
-      display: none;
-    }
-
-    .tna-template--dark-theme &--light {
-      display: flex;
-    }
-  }
-
-  @include media.on-mobile() {
-    &__top-navigation-items {
-      display: block;
-    }
-  }
 }
 
 kbd {

diff --git a/lib/modules/_code.scss b/lib/modules/_code.scss
@@ -124,7 +124,7 @@ pre[class*="language-"] {
   font-style: italic;
 }
 
-.tna-template--dark-theme {
+@mixin dark-theme-code {
   /**
  * a11y-dark theme for JavaScript, CSS, and HTML
  * Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
@@ -287,3 +287,13 @@ pre[class*="language-"] {
     }
   }
 }
+
+.tna-template--dark-theme {
+  @include dark-theme-code;
+}
+
+.tna-template--system-theme {
+  @media (prefers-color-scheme: dark) {
+    @include dark-theme-code;
+  }
+}
diff --git a/lib/modules/_typography.scss b/lib/modules/_typography.scss
@@ -31,6 +31,14 @@ table {
 
       background-color: #111;
     }
+
+    .tna-template--system-theme & {
+      @media (prefers-color-scheme: dark) {
+        color: #d49;
+
+        background-color: #111;
+      }
+    }
   }
 
   .fa-solid {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
     "@metalsmith/markdown": "^1.10.0",
     "@metalsmith/permalinks": "^2.5.1",
     "@metalsmith/sass": "^1.6.0",
-    "@nationalarchives/frontend": "0.1.52",
+    "@nationalarchives/frontend": "0.1.53",
     "glob": "^10.3.4",
     "gray-matter": "^4.0.3",
     "js-beautify": "^1.14.8",

diff --git a/src/components/card/default/index.njk b/src/components/card/default/index.njk
@@ -12,10 +12,10 @@ private: true
   headingLevel: 3,
   headingSize: "m",
   href: "#",
-  imageSrc: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-  imageAlt: "The National Archives office",
-  imageWidth: 499,
-  imageHeight: 333,
+  imageSrc: "https://fakeimg.pl/600x400/00623b/fff?text=Image&font=museo&font_size=48",
+  imageAlt: "An example image containing the text 'Image'",
+  imageWidth: 600,
+  imageHeight: 400,
   label: "New",
   body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
   htmlElement: "article",

diff --git a/src/components/card/horizontal/index.njk b/src/components/card/horizontal/index.njk
@@ -12,10 +12,10 @@ private: true
   headingLevel: 3,
   headingSize: "l",
   href: "#",
-  imageSrc: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-  imageAlt: "The National Archives office",
-  imageWidth: 499,
-  imageHeight: 333,
+  imageSrc: "https://fakeimg.pl/600x400/00623b/fff?text=Image&font=museo&font_size=48",
+  imageAlt: "An example image containing the text 'Image'",
+  imageWidth: 600,
+  imageHeight: 400,
   body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
   horizontal: true,
   htmlElement: "article",