@kth/style 0.2.1 → 0.2.3

package/assets/fonts.css

@@ -0,0 +1,13 @@
+@font-face {
+  font-family: Figtree;
+  src: url("figtree[wght].woff2") format("woff2-variations");
+  font-weight: 100 900;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Figtree;
+  src: url("figtree-italic[wght].woff2") format("woff2-variations");
+  font-weight: 100 900;
+  font-style: italic;
+}

package/dist/cjs/components/react/DropdownWithPanel.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface Props {
+    label: string;
+    children: React.ReactNode;
+}
+export declare function DropdownWithPanel({ label, children }: Props): React.JSX.Element;
+export declare function DropdownContainer(props: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export {};

package/dist/cjs/react.d.ts

@@ -1 +1 @@
-export default function hello(): string;
+export { DropdownContainer, DropdownWithPanel, } from "./components/react/DropdownWithPanel";

package/dist/cjs/react.js

@@ -1,7 +1,53 @@
 'use strict';
 
-function hello() {
-    return "world";
+var React = require('react');
+
+/**
+ * Close all <dialog>s (modal and non-modal) in a document
+ */
+function closeAllDialogs() {
+    document.querySelectorAll("dialog").forEach((dialog) => dialog.close());
+}
+
+function DropdownWithPanel({ label, children }) {
+    const [shouldRender, setShouldRender] = React.useState(false);
+    const dialogRef = React.useRef(null);
+    function closeDialog() {
+        dialogRef.current?.close();
+    }
+    function handleKeyDown(event) {
+        if (event.key === "Escape") {
+            event.stopPropagation();
+            dialogRef.current?.close();
+        }
+    }
+    return (React.createElement("div", null,
+        React.createElement("button", { className: "kth-menu-item dropdown", onClick: () => {
+                setShouldRender(true);
+                if (!dialogRef.current?.open) {
+                    closeAllDialogs();
+                    dialogRef.current?.show();
+                }
+                else {
+                    closeAllDialogs();
+                }
+            }, onMouseOver: () => setShouldRender(true), onFocus: () => setShouldRender(true) },
+            React.createElement("span", null, label)),
+        React.createElement("dialog", { className: "kth-menu-panel", ref: dialogRef, onKeyDown: handleKeyDown },
+            React.createElement("div", { className: "kth-menu-panel__container" },
+                React.createElement("button", { className: "kth-button close", onClick: () => closeDialog() },
+                    React.createElement("span", { className: "kth-visually-hidden" }, "Close")),
+                React.createElement("div", { className: "kth-menu-panel__content" }, shouldRender && children)))));
+}
+function DropdownContainer(props) {
+    const containerRef = React.useRef(null);
+    return (React.createElement("div", { ref: containerRef, onBlur: (event) => {
+            const relatedTarget = event.relatedTarget;
+            if (relatedTarget && !containerRef.current?.contains(relatedTarget)) {
+                closeAllDialogs();
+            }
+        }, ...props }));
 }
 
-module.exports = hello;
+exports.DropdownContainer = DropdownContainer;
+exports.DropdownWithPanel = DropdownWithPanel;

package/dist/esm/components/react/DropdownWithPanel.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface Props {
+    label: string;
+    children: React.ReactNode;
+}
+export declare function DropdownWithPanel({ label, children }: Props): React.JSX.Element;
+export declare function DropdownContainer(props: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export {};

package/dist/esm/react.d.ts

@@ -1 +1 @@
-export default function hello(): string;
+export { DropdownContainer, DropdownWithPanel, } from "./components/react/DropdownWithPanel";

package/dist/esm/react.js

@@ -1,5 +1,50 @@
-function hello() {
-    return "world";
+import React from 'react';
+
+/**
+ * Close all <dialog>s (modal and non-modal) in a document
+ */
+function closeAllDialogs() {
+    document.querySelectorAll("dialog").forEach((dialog) => dialog.close());
+}
+
+function DropdownWithPanel({ label, children }) {
+    const [shouldRender, setShouldRender] = React.useState(false);
+    const dialogRef = React.useRef(null);
+    function closeDialog() {
+        dialogRef.current?.close();
+    }
+    function handleKeyDown(event) {
+        if (event.key === "Escape") {
+            event.stopPropagation();
+            dialogRef.current?.close();
+        }
+    }
+    return (React.createElement("div", null,
+        React.createElement("button", { className: "kth-menu-item dropdown", onClick: () => {
+                setShouldRender(true);
+                if (!dialogRef.current?.open) {
+                    closeAllDialogs();
+                    dialogRef.current?.show();
+                }
+                else {
+                    closeAllDialogs();
+                }
+            }, onMouseOver: () => setShouldRender(true), onFocus: () => setShouldRender(true) },
+            React.createElement("span", null, label)),
+        React.createElement("dialog", { className: "kth-menu-panel", ref: dialogRef, onKeyDown: handleKeyDown },
+            React.createElement("div", { className: "kth-menu-panel__container" },
+                React.createElement("button", { className: "kth-button close", onClick: () => closeDialog() },
+                    React.createElement("span", { className: "kth-visually-hidden" }, "Close")),
+                React.createElement("div", { className: "kth-menu-panel__content" }, shouldRender && children)))));
+}
+function DropdownContainer(props) {
+    const containerRef = React.useRef(null);
+    return (React.createElement("div", { ref: containerRef, onBlur: (event) => {
+            const relatedTarget = event.relatedTarget;
+            if (relatedTarget && !containerRef.current?.contains(relatedTarget)) {
+                closeAllDialogs();
+            }
+        }, ...props }));
 }
 
-export { hello as default };
+export { DropdownContainer, DropdownWithPanel };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kth/style",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "exports": {
@@ -23,7 +23,8 @@
   },
   "files": [
     "scss",
-    "dist"
+    "dist",
+    "assets"
   ],
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.1.0",
@@ -47,5 +48,5 @@
   "peerDependencies": {
     "react": "*"
   },
-  "gitHead": "db9de9616428c555caffd1ec72ce63f7edf5add8"
+  "gitHead": "9eebb100e8d56f87395e62ecc89603c446832f20"
 }

package/scss/components/details.scss

@@ -0,0 +1,51 @@
+@use "../tokens/spacing.scss";
+@use "../tokens/icons.scss";
+
+/// When true, the file generates CSS code for the entire document
+///
+/// Set to `false` when importing if you want to use the mixin but don't want
+/// to have the "kth-details" class
+$generate-css: true !default;
+$border-width: spacing.$space-4;
+
+@mixin details {
+  summary {
+    color: var(--color-tertiary);
+    padding-block: var(--space-inner-block);
+    cursor: pointer;
+    // padding-inline-start: spacing.$space-20;
+    list-style: none;
+    font: inherit;
+    display: grid;
+    grid-template-columns: 1.5rem auto;
+
+    &::before {
+      @include icons.icon-caret-right;
+      background-color: var(--color-tertiary);
+      margin-block: spacing.$space-2;
+    }
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &[open] summary::before {
+    rotate: 0deg;
+  }
+
+  > div {
+    border-inline-start: $border-width solid var(--color-tertiary);
+    padding-inline-start: spacing.$space-16;
+    padding-block: spacing.$space-8;
+    margin-inline-start: spacing.$space-8;
+  }
+}
+
+@if $generate-css {
+  @layer kth-style {
+    .kth-details {
+      @include details;
+    }
+  }
+}

package/scss/components/header.scss

@@ -5,12 +5,21 @@
 @layer kth-style {
   .kth-header.intranet {
     @include colors.theme-intranet;
+    .kth-logotype img.white {
+      display: none;
+    }
   }
   .kth-header.external {
     @include colors.theme-inverse;
+    .kth-logotype img.blue {
+      display: none;
+    }
   }
   .kth-header.student-web {
     @include colors.theme-student-web;
+    .kth-logotype img.white {
+      display: none;
+    }
   }
 
   .kth-header {