@kth/style 0.8.2 → 0.9.0

package/dist/cjs/components/MenuPanel.d.ts

@@ -6,8 +6,9 @@ export declare function closeAllDialogs(): void;
  * Add mouse and keyboard event listeners to a menu panel (<dialog>)
  * @param dialog A <dialog> element
  */
-export declare function addEventListeners(dialog: HTMLDialogElement): void;
+export declare function addEventListeners(dialog: HTMLDialogElement, previousDialog?: HTMLDialogElement | null): void;
 export declare class MenuPanel {
     static init(container: HTMLElement | null, items: NodeListOf<Element>): void;
     static initModal(button: Element | null, modal: Element | null): void;
+    static initModals(items: NodeListOf<Element>, previousModal?: Element | null): void;
 }

package/dist/cjs/index.js

@@ -10,7 +10,7 @@ function closeAllDialogs() {
  * Add mouse and keyboard event listeners to a menu panel (<dialog>)
  * @param dialog A <dialog> element
  */
-function addEventListeners(dialog) {
+function addEventListeners(dialog, previousDialog) {
     const closeButton = dialog.querySelector(".kth-icon-button.close");
     const backButton = dialog.querySelector(".kth-button.back");
     dialog.addEventListener("keydown", (e) => {
@@ -26,6 +26,9 @@ function addEventListeners(dialog) {
     if (backButton instanceof HTMLButtonElement) {
         backButton.addEventListener("click", () => {
             dialog.close();
+            if (previousDialog) {
+                previousDialog.showModal();
+            }
         });
     }
 }
@@ -69,6 +72,24 @@ class MenuPanel {
             modal.showModal();
         });
     }
+    static initModals(items, previousModal) {
+        if (previousModal && !(previousModal instanceof HTMLDialogElement))
+            return;
+        for (const item of items) {
+            if (!(item instanceof HTMLElement))
+                continue;
+            const dataId = item.getAttribute("data-id");
+            const modal = document.querySelector(`.kth-mobile-menu[data-id='${dataId}']`);
+            if (!(modal instanceof HTMLDialogElement))
+                return;
+            addEventListeners(modal, previousModal);
+            item.addEventListener("click", (e) => {
+                e.preventDefault();
+                closeAllDialogs();
+                modal.showModal();
+            });
+        }
+    }
 }
 
 exports.MenuPanel = MenuPanel;

package/dist/esm/components/MenuPanel.d.ts

@@ -6,8 +6,9 @@ export declare function closeAllDialogs(): void;
  * Add mouse and keyboard event listeners to a menu panel (<dialog>)
  * @param dialog A <dialog> element
  */
-export declare function addEventListeners(dialog: HTMLDialogElement): void;
+export declare function addEventListeners(dialog: HTMLDialogElement, previousDialog?: HTMLDialogElement | null): void;
 export declare class MenuPanel {
     static init(container: HTMLElement | null, items: NodeListOf<Element>): void;
     static initModal(button: Element | null, modal: Element | null): void;
+    static initModals(items: NodeListOf<Element>, previousModal?: Element | null): void;
 }

package/dist/esm/index.js

@@ -8,7 +8,7 @@ function closeAllDialogs() {
  * Add mouse and keyboard event listeners to a menu panel (<dialog>)
  * @param dialog A <dialog> element
  */
-function addEventListeners(dialog) {
+function addEventListeners(dialog, previousDialog) {
     const closeButton = dialog.querySelector(".kth-icon-button.close");
     const backButton = dialog.querySelector(".kth-button.back");
     dialog.addEventListener("keydown", (e) => {
@@ -24,6 +24,9 @@ function addEventListeners(dialog) {
     if (backButton instanceof HTMLButtonElement) {
         backButton.addEventListener("click", () => {
             dialog.close();
+            if (previousDialog) {
+                previousDialog.showModal();
+            }
         });
     }
 }
@@ -67,6 +70,24 @@ class MenuPanel {
             modal.showModal();
         });
     }
+    static initModals(items, previousModal) {
+        if (previousModal && !(previousModal instanceof HTMLDialogElement))
+            return;
+        for (const item of items) {
+            if (!(item instanceof HTMLElement))
+                continue;
+            const dataId = item.getAttribute("data-id");
+            const modal = document.querySelector(`.kth-mobile-menu[data-id='${dataId}']`);
+            if (!(modal instanceof HTMLDialogElement))
+                return;
+            addEventListeners(modal, previousModal);
+            item.addEventListener("click", (e) => {
+                e.preventDefault();
+                closeAllDialogs();
+                modal.showModal();
+            });
+        }
+    }
 }
 
 export { MenuPanel };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kth/style",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "exports": {

package/scss/components/menu-panel.scss

@@ -55,21 +55,4 @@
       }
     }
   }
-
-  .kth-menu-panel--modal {
-    background-color: var(--color-background);
-    position: fixed;
-    right: 0;
-    left: auto;
-    top: 0;
-    max-width: 32rem;
-    max-height: 100dvh;
-    width: 100dvw;
-    height: 100dvh;
-    border: 0;
-
-    .kth-button.close {
-      margin-inline-start: auto;
-    }
-  }
 }

package/scss/components/mobile-menu.scss

@@ -0,0 +1,94 @@
+@use "../tokens/spacing";
+@use "../tokens/typography";
+@use "../tokens/icons";
+@use "../utils/mixins";
+
+@layer kth-style {
+  .kth-mobile-menu {
+    background-color: var(--color-background);
+    position: fixed;
+    right: 0;
+    left: auto;
+    top: 0;
+    max-width: 32rem;
+    max-height: 100dvh;
+    width: 100dvw;
+    height: 100dvh;
+    padding: 2rem;
+    border: 0;
+    overflow-y: auto;
+
+    &__navigation {
+      height: 60px;
+
+      .kth-icon-button.close {
+        float: right;
+      }
+    }
+
+    &__header {
+      padding: 0 0 spacing.$space-32;
+
+      h2 {
+        @include typography.font-heading-m;
+        color: var(--color-primary);
+        margin-bottom: spacing.$space-4;
+      }
+    }
+
+    &__content {
+      color: var(--color-primary);
+
+      ul {
+        padding: 0;
+        list-style-type: none;
+        margin: 0;
+      }
+
+      .kth-mobile-menu__item {
+        @include typography.font-heading-m;
+        text-decoration: none;
+        display: flex;
+        align-items: center;
+        background: none;
+        border: none;
+        padding: 0;
+        color: var(--color-primary);
+
+        &::after {
+          @include icons.icon-caret-right-big;
+          background-color: var(--color-primary);
+          margin-left: 0.75rem;
+        }
+
+        &:hover {
+          text-decoration: underline;
+          cursor: pointer;
+        }
+      }
+
+      // To avoid it affecting the cortina content
+      .kth-mobile-menu__items {
+        li:not(:last-child) {
+          margin-bottom: spacing.$space-24;
+        }
+      }
+    }
+
+    &__cortina-content {
+      li:not(:last-child) {
+        margin-bottom: spacing.$space-16;
+      }
+
+      h3 {
+        @include typography.font-heading-s;
+        margin-bottom: spacing.$space-4;
+      }
+
+      .block:not(:first-child),
+      .col:not(:first-child) {
+        margin-top: spacing.$space-32;
+      }
+    }
+  }
+}

package/scss/tokens/icons.scss

@@ -34,6 +34,10 @@
   @include with-icon(raw.$icon-caret-right);
 }
 
+@mixin icon-caret-right-big {
+  @include with-icon(raw.$icon-caret-right-big);
+}
+
 @mixin icon-close {
   @include with-icon(raw.$icon-close);
 }