@kth/style 1.14.2 → 1.15.0-alpha.1

package/dist/consent/kth-klaro.scss

@@ -0,0 +1,286 @@
+// Overrides the default Klaro style for consent modal.
+@use "../../scss/tokens/colors.scss";
+
+.klaro {
+  // Consent overlay on media
+  .context-notice {
+    // background: rgba($white, 0.9);
+    background: var(--background-color);
+    flex-wrap: nowrap;
+    border-radius: 0;
+
+    .cm-btn {
+      padding: 0.5rem 1.5rem;
+      line-height: 1.5;
+      border-radius: 50rem;
+      min-height: 2.75rem;
+      font-weight: bold;
+      font-size: 1rem;
+
+      &.cm-btn-success-var {
+        color: var(--color-on-primary);
+        background-color: var(--color-primary);
+        border: 1px solid transparent;
+      }
+
+      &.cm-btn-success {
+        color: var(--color-text);
+        background: var(--color-background);
+        border: 1px solid var(--color-border);
+      }
+    }
+  }
+
+  //Consent dialog, with information and three buttons that lets you choose actions
+  .cookie-notice {
+    p {
+      color: var(--color-text);
+    }
+
+    &:not(.cookie-modal-notice) {
+      position: fixed;
+      padding: 0.5rem 1.5rem 1.5rem;
+      margin: 0.625rem;
+      max-width: 760px;
+      background-color: var(--color-background);
+      border-radius: 0.25rem;
+      box-shadow:
+        0 2px 10px 2px var(--color-gray-medium),
+        5px 5px 10px 0 var(--color-gray-medium);
+      border: none;
+      bottom: 0;
+      right: 0;
+      left: 0;
+
+      .cn-buttons {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        margin-top: 1rem;
+
+        @media (max-width: 575px) {
+          margin-top: 0.5rem;
+        }
+
+        .cm-btn {
+          @media (max-width: 384px) {
+            width: auto;
+          }
+
+          &.cm-btn-success,
+          &.cm-btn-danger.cn-decline,
+          &.cm-btn-learn-more.cm-btn-info {
+            padding: 0.5rem 1.5rem;
+            min-height: 2.75rem;
+            font-weight: bold;
+            font-size: 1rem;
+            border-radius: 50rem;
+            margin: 0;
+          }
+
+          &.cm-btn-success {
+            color: var(--color-on-primary);
+            background-color: var(--color-primary);
+            border: 1px solid transparent;
+          }
+
+          &.cm-btn-danger.cn-decline,
+          &.cm-btn-learn-more.cm-btn-info {
+            color: var(--color-text);
+            background-color: var(--color-background);
+            border: 1px solid var(--color-border);
+          }
+        }
+      }
+
+      @media (max-width: 768px) {
+        margin: 0.625rem;
+        position: fixed;
+        max-width: fit-content;
+        width: 100%;
+        height: auto;
+        bottom: 0;
+        right: 0;
+      }
+    }
+  }
+
+  //Modal that appears when "Manage services/Hantera valbara tjänster" is clicked
+  .cookie-modal {
+    z-index: 99999;
+
+    .cm-modal.cm-klaro {
+      background-color: var(--color-background);
+      max-width: 794px;
+
+      p {
+        color: var(--color-text);
+        font-size: 1rem;
+      }
+
+      li {
+        color: var(--color-text);
+        &.active {
+          border: 3px solid var(--color-primary);
+        }
+      }
+
+      a {
+        color: var(--color-tertiary);
+        text-decoration: underline;
+        text-underline-offset: 0.25rem;
+      }
+
+      //Header section
+      .cm-header {
+        padding: 1.5rem;
+
+        .hide {
+          svg {
+            stroke: var(--color-text);
+          }
+        }
+
+        .title {
+          font-size: 1.875rem;
+          font-weight: 400;
+          color: var(--color-text);
+          line-height: 2.5rem;
+          margin-top: 0;
+          margin-bottom: 0.875rem;
+        }
+      }
+
+      //Body section
+      .cm-body {
+        padding: 1.5rem;
+
+        .cm-service {
+          span {
+            &.cm-list-title,
+            &.cm-required {
+              color: var(--color-text);
+              font-size: 1rem;
+            }
+          }
+
+          .cm-list-label {
+            .slider {
+              background-color: var(--color-gray-dark);
+              &:before {
+                background-color: var(--color-on-primary);
+              }
+            }
+          }
+
+          .cm-list-input {
+            &.required:checked + .cm-list-label .slider {
+              background-color: var(--color-success);
+            }
+
+            &.only-required + .cm-list-label .slider {
+              background-color: var(--color-gray-dark);
+              opacity: 0.5;
+            }
+
+            &:checked + .cm-list-label .slider {
+              background-color: var(--color-success);
+            }
+          }
+        }
+      }
+
+      //Footer section
+      .cm-footer {
+        .cm-powered-by a {
+          display: none;
+        }
+
+        @media (max-width: 768px) {
+          padding: 0 1rem;
+
+          .cm-footer-buttons {
+            display: block;
+            width: 100%;
+
+            .cm-btn {
+              width: 100%;
+              margin-top: 1.4rem;
+            }
+          }
+        }
+
+        .cm-btn {
+          padding: 0.5rem 1.5rem;
+          border-radius: 50rem;
+          min-height: 2.75rem;
+          font-weight: bold;
+          font-size: 1rem;
+
+          &.cm-btn-success {
+            color: var(--color-on-primary);
+            background-color: var(--color-primary);
+            border: 1px solid transparent;
+
+            &.cm-btn-accept {
+              background-color: var(--color-success);
+            }
+          }
+
+          &.cm-btn-decline {
+            color: var(--color-text);
+            background-color: var(--color-background);
+            border: 1px solid var(--color-border);
+          }
+        }
+      }
+    }
+  }
+}
+
+/*
+   * Handle videos in columnsplitters agrid lists with 4 columns.
+   */
+.block {
+  &.columnSplitter {
+    &.row {
+      &.using4Columns {
+        .klaro {
+          .context-notice {
+            p {
+              font-size: 0.9rem;
+              margin-bottom: 0;
+            }
+
+            .cm-btn {
+              margin-bottom: 0.25rem;
+              min-height: 1.75rem;
+              padding: 0.3rem 0.6rem;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.list {
+    &.grid {
+      .gridRowItem {
+        &.gridRowItem_4 {
+          .context-notice {
+            p {
+              font-size: 0.9rem;
+              margin-bottom: 0;
+            }
+
+            .cm-btn {
+              margin-bottom: 0.25rem;
+              min-height: 1.75rem;
+              padding: 0.3rem 0.6rem;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/esm/index.js

@@ -122,4 +122,280 @@ class MenuPanel {
     }
 }
 
+/* eslint-disable  func-names */ /* eslint-disable  no-var */ window.addEventListener(
+  "load",
+  () => {
+    /**
+     * Back to top link
+     */ var lastKnownScrollPosition = 0;
+    var ticking = false;
+    var backToTopButton = document.querySelector("#back-to-top");
+    if (!backToTopButton) {
+      backToTopButton = document.createElement("div");
+      backToTopButton = document.body.appendChild(backToTopButton);
+      backToTopButton.id = "back-to-top";
+      backToTopButton.setAttribute("role", "link");
+      backToTopButton.setAttribute("aria-hidden", "true");
+      if (document.documentElement.lang === "sv-SE") {
+        backToTopButton.innerText = "Till sidans topp";
+      } else {
+        backToTopButton.innerText = "To page top";
+      }
+      if (document.querySelector("footer")) {
+        document.body.insertBefore(
+          backToTopButton,
+          document.querySelector("footer"),
+        );
+      }
+    }
+    backToTopButton.addEventListener("click", function () {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+      this.classList.toggle("show");
+      this.setAttribute("aria-hidden", true);
+    });
+    function handleBackToTop(scrollPos) {
+      if (scrollPos > 200) {
+        backToTopButton.classList.add("show");
+        backToTopButton.removeAttribute("aria-hidden");
+      } else {
+        backToTopButton.classList.remove("show");
+        backToTopButton.setAttribute("aria-hidden", true);
+      }
+    }
+    window.addEventListener("scroll", () => {
+      lastKnownScrollPosition = window.scrollY;
+      if (!ticking) {
+        window.requestAnimationFrame(() => {
+          handleBackToTop(lastKnownScrollPosition);
+          ticking = false;
+        });
+        ticking = true;
+      }
+    });
+  },
+);
+
+/* eslint-disable  no-var */ /* eslint-disable  vars-on-top */ /* eslint-disable  no-use-before-define */ function klaroOnload() {
+  var klaro = document.querySelector("#klaro div.klaro");
+  function noVisibleKlaro() {
+    return (
+      !klaro ||
+      window.getComputedStyle(klaro).display === "none" ||
+      klaro.querySelector("a") === null
+    );
+  }
+  if (noVisibleKlaro()) {
+    return;
+  }
+  if (klaro !== document.body.firstElementChild) {
+    document.body.insertBefore(klaro, document.body.firstElementChild);
+  }
+  const getNextFocusableElement = function _getNextFocusableElement(
+    element,
+    step,
+  ) {
+    var elements = Array.prototype.slice.call(
+      klaro.querySelectorAll(
+        "a:not([disabled]), button:not([disabled]), input:not([disabled])",
+      ),
+    );
+    if (!elements) return null;
+    elements = elements.filter(
+      (e) => window.getComputedStyle(e).display !== "none",
+    );
+    for (var i = 0; i < elements.length; i++) {
+      if (elements[i] === element) {
+        if (i < elements.length - step) {
+          return elements[i + step];
+        }
+        return elements[0];
+      }
+    }
+    return elements[0];
+  };
+  const resetActiveLI = function _resetActiveLI() {
+    var elements = Array.prototype.slice.call(
+      klaro.querySelectorAll("li.active"),
+    );
+    if (!elements) return;
+    elements.forEach((e) => e.classList.remove("active"));
+  }; // eslint-disable-next-line no-shadow
+  const handleKeydown = (event) => {
+    if (noVisibleKlaro()) {
+      window.removeEventListener("keydown", handleKeydown);
+      return;
+    }
+    if (event.key === "Tab") {
+      const nextElement = getNextFocusableElement(
+        event.target,
+        event.shiftKey ? -1 : 1,
+      );
+      if (nextElement) {
+        event.preventDefault();
+        nextElement.focus();
+        resetActiveLI();
+        if (nextElement.tagName === "INPUT") {
+          nextElement.parentElement.closest("li").classList.add("active");
+        }
+      }
+    } else if (event.key === "Escape") {
+      const closeButton = klaro.querySelector(
+        "div.klaro .cookie-modal button.hide",
+      );
+      if (closeButton) {
+        closeButton.click();
+      }
+    }
+  };
+  window.addEventListener("keydown", handleKeydown);
+  const config = { childList: true, subtree: true, attributes: true };
+  const callback = function _callback(mutationsList) {
+    for (const mutation of mutationsList) {
+      if (mutation.type === "childList") {
+        if (mutation.addedNodes.length > 0) {
+          for (const node of mutation.addedNodes) {
+            if (node.nodeType === 1) {
+              if (node.classList.contains("cookie-modal")) {
+                var inputs = Array.prototype.slice.call(
+                  node.querySelectorAll("input"),
+                );
+                for (const input of inputs) {
+                  input.setAttribute("tabindex", "0");
+                }
+              }
+            }
+          }
+        } else if (mutation.removedNodes.length > 0) {
+          for (const node of mutation.removedNodes) {
+            if (node.nodeType === 1) {
+              if (
+                node.classList.contains("cn-body") ||
+                node.classList.contains("cookie-modal")
+              ) {
+                window.removeEventListener("keydown", handleKeydown);
+              }
+            }
+          }
+        }
+      } else if (mutation.attributeName === "style") {
+        if (
+          window.getComputedStyle(klaro).getPropertyValue("display") === "none"
+        ) {
+          window.removeEventListener("keydown", handleKeydown);
+        }
+      }
+    }
+  };
+  const observer = new MutationObserver(callback);
+  observer.observe(klaro, config);
+}
+window.addEventListener("load", () => {
+  klaroOnload();
+});
+window.addEventListener("load", () => {
+  // If no mobile menu containers are present, skip it all togehter
+  if (
+    !document.getElementById("mobileMenuWrapper") ||
+    !document.getElementById("mobileMenuList") ||
+    !document.getElementById("mobileMenuContent") ||
+    !document.getElementById("nav-icon")
+  ) {
+    return;
+  }
+  var mainMenu = document.getElementById("mainMenu"); // Get main menu
+  var megaMenu = document.getElementById("megaMenu"); // Get mega menu
+  var secondaryMenu = document.querySelector(".secondaryMenu"); // Get secondary menu
+  if (!mainMenu && !megaMenu && !secondaryMenu) {
+    document.getElementById("mobileMenuWrapper").style.display = "none"; // Hide mobile menu wrapper/container if there is no menus
+  }
+  if (mainMenu) {
+    // For main menu items, copy a link if it exists, otherwise copy the link content
+    createMobileMenuItems(mainMenu.querySelectorAll("li"), true);
+  } else if (megaMenu) {
+    // For mega menu items, copy only the the first alinks
+    createMobileMenuItems(megaMenu.querySelectorAll("li"), false);
+  }
+  if (secondaryMenu) {
+    createMobileMenuItemsForSecondaryMenu(
+      secondaryMenu.querySelectorAll("li a"),
+    );
+  }
+  function createMobileMenuItems(menuItems, includeInline) {
+    for (var i = 0; i < menuItems.length; i++) {
+      var linkToCopy = menuItems[i].querySelector("a");
+      if (linkToCopy || includeInline) {
+        var listItem = document.createElement("li");
+        listItem.className =
+          menuItems[i].className !== "" ? menuItems[i].className : "nav-item";
+        if (linkToCopy) {
+          var link = document.createElement("a");
+          link.href = linkToCopy.href;
+          link.text = linkToCopy.text;
+          link.className = linkToCopy.className;
+          listItem.appendChild(link);
+        } else if (includeInline) {
+          listItem.innerHTML = menuItems[i].innerHTML;
+        }
+        document.getElementById("mobileMenuList").appendChild(listItem);
+      }
+    }
+  }
+  function createMobileMenuItemsForSecondaryMenu(menuItems) {
+    var secondaryMenuWrapper = document.createElement("li");
+    secondaryMenuWrapper.className = "secondaryMenuWrap";
+    var secondaryMenuContainer = document.createElement("ul");
+    secondaryMenuContainer.className = "secondaryMenuContainer";
+    for (var i = 0; i < menuItems.length; i++) {
+      var link = document.createElement("a");
+      link.className = "secondaryMenu";
+      link.href = menuItems[i].href;
+      link.text = menuItems[i].text;
+      if (menuItems[i].hreflang) {
+        link.hreflang = menuItems[i].hreflang;
+      }
+      var secondaryMenuListItem = document.createElement("li");
+      secondaryMenuListItem.className = "item nav-item secondaryItem";
+      secondaryMenuListItem.appendChild(link);
+      secondaryMenuContainer.appendChild(secondaryMenuListItem);
+    }
+    secondaryMenuWrapper.appendChild(secondaryMenuContainer);
+    document.getElementById("mobileMenuList").appendChild(secondaryMenuWrapper);
+  } // Mega menu icon toggler.
+  document.getElementById("nav-icon").onclick = function _onclick() {
+    if (document.body.style.overflow !== "hidden") {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "initial";
+    }
+    document.getElementById("mobileMenuContent").classList.toggle("show");
+    this.classList.toggle("open");
+  };
+});
+function stickyMainMenu() {
+  if (!document.querySelector("#mainMenu ul.nav.nav-list")) return;
+  function isInViewport(element) {
+    if (!element) return false;
+    const rect = element.getBoundingClientRect();
+    return (
+      rect.top >= 0 &&
+      rect.left >= 0 &&
+      rect.bottom <=
+        (window.innerHeight || document.documentElement.clientHeight) &&
+      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+    );
+  }
+  if (
+    isInViewport(
+      document.querySelector("#mainMenu ul.nav.nav-list:last-of-type")
+        ?.lastElementChild,
+    )
+  ) {
+    document.querySelector("#mainMenu").classList.add("sticky-menu");
+  } else {
+    document.querySelector("#mainMenu").classList.remove("sticky-menu");
+  }
+}
+window.addEventListener("load", stickyMainMenu);
+window.addEventListener("resize", stickyMainMenu);
+
 export { MenuPanel };