@kth/style 0.11.4 → 0.12.0

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

@@ -0,0 +1,9 @@
+interface Options {
+    threshold: number;
+    className: string;
+}
+export declare class ScrollObserver {
+    /** Sets a class in an element when the window scroll is below a treshold */
+    static setClass(element: HTMLElement | null, options?: Options): void;
+}
+export {};

package/dist/cjs/index.d.ts

@@ -1 +1,2 @@
 export { MenuPanel } from "./components/MenuPanel";
+export { ScrollObserver } from "./components/ScrollObserver";

package/dist/cjs/index.js

@@ -97,4 +97,27 @@ class MenuPanel {
     }
 }
 
+const DEFAULT_OPTIONS = {
+    threshold: 32,
+    className: "collapsed",
+};
+function toggleClass(element, { threshold, className }) {
+    if (window.scrollY > threshold) {
+        element?.classList.add(className);
+    }
+    else {
+        element?.classList.remove(className);
+    }
+}
+class ScrollObserver {
+    /** Sets a class in an element when the window scroll is below a treshold */
+    static setClass(element, options = DEFAULT_OPTIONS) {
+        toggleClass(element, options);
+        window.addEventListener("scroll", () => {
+            toggleClass(element, options);
+        });
+    }
+}
+
 exports.MenuPanel = MenuPanel;
+exports.ScrollObserver = ScrollObserver;

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

@@ -0,0 +1,9 @@
+interface Options {
+    threshold: number;
+    className: string;
+}
+export declare class ScrollObserver {
+    /** Sets a class in an element when the window scroll is below a treshold */
+    static setClass(element: HTMLElement | null, options?: Options): void;
+}
+export {};

package/dist/esm/index.d.ts

@@ -1 +1,2 @@
 export { MenuPanel } from "./components/MenuPanel";
+export { ScrollObserver } from "./components/ScrollObserver";

package/dist/esm/index.js

@@ -95,4 +95,26 @@ class MenuPanel {
     }
 }
 
-export { MenuPanel };
+const DEFAULT_OPTIONS = {
+    threshold: 32,
+    className: "collapsed",
+};
+function toggleClass(element, { threshold, className }) {
+    if (window.scrollY > threshold) {
+        element?.classList.add(className);
+    }
+    else {
+        element?.classList.remove(className);
+    }
+}
+class ScrollObserver {
+    /** Sets a class in an element when the window scroll is below a treshold */
+    static setClass(element, options = DEFAULT_OPTIONS) {
+        toggleClass(element, options);
+        window.addEventListener("scroll", () => {
+            toggleClass(element, options);
+        });
+    }
+}
+
+export { MenuPanel, ScrollObserver };

package/package.json

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

package/scss/components/header.scss

@@ -1,5 +1,6 @@
 @use "../tokens/colors.scss";
 @use "../tokens/spacing.scss";
+@use "../tokens/sizing.scss";
 @use "../utils/mixins.scss";
 
 @layer kth-style {
@@ -22,11 +23,25 @@
     }
   }
 
+  :root {
+    --height-header: 6rem;
+  }
+
   .kth-header {
+    position: absolute;
+
+    // TODO: convert to its own token
+    z-index: 10;
+    top: var(--height-kpm, 0);
     color: var(--color-text);
     background: var(--color-background);
     padding-block: spacing.$space-16;
-    position: relative;
+    width: 100%;
+    transition: padding-block 500ms cubic-bezier(0.05, 0.7, 0.1, 1);
+
+    .kth-logotype {
+      transition: all 200ms linear;
+    }
 
     &__container {
       @include mixins.container;
@@ -47,4 +62,23 @@
       display: none;
     }
   }
+
+  // Fixed header in mobile
+  @media (max-width: sizing.$breakpoint-64) {
+    .kth-header {
+      position: fixed;
+    }
+
+    .kth-header.collapsed {
+      padding-block: spacing.$space-8;
+
+      // TODO: Define this shadow as a token
+      box-shadow: 0 0.125rem 0.5rem 0 rgb(0 0 0 /0.15);
+
+      .kth-logotype {
+        block-size: 0rem;
+        opacity: 0;
+      }
+    }
+  }
 }

package/scss/components/kpm.scss

@@ -1,7 +1,18 @@
 @use "../utils/mixins.scss";
 
 @layer kth-style {
+  :root {
+    --height-kpm: 2.5rem;
+  }
+
   .kth-kpm {
+    position: fixed;
+    width: 100%;
+    // TODO: Convert to its own token
+    z-index: 10;
+    background: var(--color-background);
+    top: 0;
+
     &__container {
       @include mixins.container;
       display: flex;

package/scss/components/logotype.scss

@@ -1,14 +1,19 @@
 @use "../tokens/spacing.scss";
+@use "../tokens/sizing.scss";
 
 @layer kth-style {
   a.kth-logotype,
   figure.kth-logotype {
+    overflow: hidden;
     display: inline-block;
     block-size: 4rem;
     inline-size: 4rem;
     border: none;
     margin: 0;
-    margin-inline-end: spacing.$space-32;
+
+    @media (min-width: sizing.$breakpoint-64) {
+      margin-inline-end: spacing.$space-32;
+    }
     padding: 0;
 
     // Defensive measurement:
@@ -18,11 +23,14 @@
     > figure {
       block-size: 100%;
       inline-size: 100%;
+      position: relative;
     }
 
     img {
-      block-size: 100%;
-      inline-size: 100%;
+      position: absolute;
+      bottom: 0;
+      block-size: 4rem;
+      inline-size: 4rem;
     }
   }
 }

package/scss/utils/reset.scss

@@ -91,7 +91,17 @@ $generate-css: true !default;
       color: var(--color-text);
       background: var(--color-background);
       min-height: 100vh;
-      margin: 0;
+      margin-inline: 0;
+
+      // `--height-kpm` is set by (new) KPM or `kpm.scss`
+      // `--kpm-bar-height` is the old (current) name for the variable set by KPM
+      // default value is 0 (no kpm at all)
+
+      // `--height-header` is set when including `header.scss`
+      // default value is 0 (no header)
+      margin-block-start: calc(
+        var(--height-kpm, --kpm-bar-height, 0) + var(--height-header, 0)
+      );
     }
 
     @include reset;