@kth/style 0.1.0 → 0.2.0

package/dist/esm/index.js

@@ -1,57 +1,3 @@
-/**
- * Close all <dialog>s (modal and non-modal) in a document
- */
-function closeAllDialogs$1() {
-    document.querySelectorAll("dialog").forEach((dialog) => dialog.close());
-}
-/**
- * Add open/close functionality to a set of navigation panels
- *
- * @param container The element containing all the menus
- * @param items A list of all menu elements
- */
-function setNavigationPanels(container, items) {
-    if (!container) {
-        return;
-    }
-    for (const item of items) {
-        if (!(item instanceof HTMLElement)) {
-            continue;
-        }
-        const dialog = item.nextElementSibling;
-        if (!(dialog instanceof HTMLDialogElement)) {
-            continue;
-        }
-        dialog.addEventListener("keydown", (e) => {
-            if (e.key === "Escape") {
-                closeAllDialogs$1();
-            }
-        });
-        const closeButton = dialog.querySelector(".close");
-        if (closeButton instanceof HTMLButtonElement) {
-            closeButton.addEventListener("click", () => {
-                closeAllDialogs$1();
-            });
-        }
-        item.addEventListener("click", (e) => {
-            e.preventDefault();
-            if (!dialog.open) {
-                closeAllDialogs$1();
-                dialog.show();
-            }
-            else {
-                closeAllDialogs$1();
-            }
-        });
-    }
-    container.addEventListener("focusout", function (e) {
-        const target = e.relatedTarget;
-        if (target && target instanceof Node && !container.contains(target)) {
-            closeAllDialogs$1();
-        }
-    });
-}
-
 /**
  * Close all <dialog>s (modal and non-modal) in a document
  */
@@ -59,88 +5,71 @@ function closeAllDialogs() {
     document.querySelectorAll("dialog").forEach((dialog) => dialog.close());
 }
 /**
- * Add open/close functionality to a set of navigation panels
+ * Add mouse and keyboard event listeners to a menu panel (<dialog>)
+ * @param dialog A <dialog> element
  */
-function setModalNavigationPanels(items) {
-    for (const item of items) {
-        if (!(item instanceof HTMLElement)) {
-            continue;
+function addEventListeners(dialog) {
+    const closeButton = dialog.querySelector(".kth-button.close");
+    const backButton = dialog.querySelector(".kth-button.back");
+    dialog.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") {
+            dialog.close();
         }
-        const dialog = item.nextElementSibling;
-        if (!(dialog instanceof HTMLDialogElement)) {
-            continue;
-        }
-        dialog.addEventListener("keydown", (e) => {
-            e.stopPropagation();
-            if (e.key === "Escape") {
-                dialog.close();
-            }
-        });
-        const closeButton = dialog.querySelector(".close");
-        if (closeButton instanceof HTMLButtonElement) {
-            closeButton.addEventListener("click", () => {
-                closeAllDialogs();
-            });
-        }
-        item.addEventListener("click", (e) => {
-            e.preventDefault();
-            // closeAllDialogs();
-            dialog.showModal();
+    });
+    if (closeButton instanceof HTMLButtonElement) {
+        closeButton.addEventListener("click", () => {
+            closeAllDialogs();
         });
     }
-}
-
-function getPanel(tab) {
-    const panelId = tab.getAttribute("aria-controls");
-    if (!panelId) {
-        throw new Error();
-    }
-    const panel = document.getElementById(panelId);
-    if (!(panel instanceof HTMLElement)) {
-        throw new Error();
-    }
-    return panel;
-}
-function closeAllTabs(tabs) {
-    for (const tab of tabs) {
-        if (tab instanceof HTMLElement) {
-            tab.ariaSelected = "false";
-            const panel = getPanel(tab);
-            if (panel) {
-                panel.hidden = true;
-            }
-        }
+    if (backButton instanceof HTMLButtonElement) {
+        backButton.addEventListener("click", () => {
+            dialog.close();
+        });
     }
 }
-function initTabs(container) {
-    if (!(container instanceof HTMLElement)) {
-        return;
-    }
-    const tablist = container.querySelector("[role=tablist]");
-    if (!tablist) {
-        return;
-    }
-    const tabs = tablist.querySelectorAll("[role=tab]");
-    function openTab(tab) {
-        const panel = getPanel(tab);
-        if (!panel) {
+class MenuPanel {
+    static init(container, items) {
+        if (!container)
             return;
+        for (const item of items) {
+            if (!(item instanceof HTMLElement))
+                continue;
+            const dialog = item.nextElementSibling;
+            if (!(dialog instanceof HTMLDialogElement))
+                continue;
+            addEventListeners(dialog);
+            item.addEventListener("click", (e) => {
+                e.preventDefault();
+                if (!dialog.open) {
+                    closeAllDialogs();
+                    dialog.show();
+                }
+                else {
+                    closeAllDialogs();
+                }
+            });
         }
-        tab.ariaSelected = "true";
-        panel.hidden = false;
+        container.addEventListener("focusout", function (e) {
+            const target = e.relatedTarget;
+            if (target && target instanceof Node && !container.contains(target)) {
+                closeAllDialogs();
+            }
+        });
     }
-    for (const tab of tabs) {
-        if (tab instanceof HTMLElement) {
-            tab.addEventListener("click", () => {
-                closeAllTabs(tabs);
-                openTab(tab);
+    static initModal(items) {
+        for (const item of items) {
+            if (!(item instanceof HTMLElement))
+                continue;
+            const dialog = item.nextElementSibling;
+            if (!(dialog instanceof HTMLDialogElement))
+                continue;
+            addEventListeners(dialog);
+            item.addEventListener("click", (e) => {
+                e.preventDefault();
+                dialog.showModal();
             });
         }
     }
-    if (tabs[0] instanceof HTMLElement) {
-        closeAllTabs(tabs);
-        openTab(tabs[0]);
-    }
 }
 
-export { initTabs, setModalNavigationPanels, setNavigationPanels };
+export { MenuPanel };

package/dist/esm/react.d.ts

@@ -1,5 +1 @@
-export { Tab, ContentTabs, NavigationTabs } from "./components/react/Tabs";
-export { Select, Option, OptionGroup } from "./components/Select";
-export { BackButton, Button, ForwardButton } from "./components/Button";
-export { default as IconArrowBack } from "./icons/400/ArrowBack";
-export { default as IconCheck } from "./icons/400/Check";
+export default function hello(): string;

package/dist/esm/react.js

@@ -1,149 +1,5 @@
-import * as React from 'react';
-import React__default from 'react';
-
-function getValueFromUrl(key) {
-    const url = new URL(location.href);
-    if (key) {
-        return url.searchParams.get(key);
-    }
-    else {
-        return url.hash === "" ? null : url.hash.slice(1);
-    }
-}
-/**
- * Sync state with URL hash or query parameter.
- * @param defaultValue Default state value
- * @param key Query parameter to use. Hash if empty
- * @param enableUrl Will sync with URL if true (this function behaves the same
- * as `React.useState` if false)
- */
-function useUrlState(defaultValue = "", key = "", enableUrl = false) {
-    const initialValue = (enableUrl && getValueFromUrl(key)) || defaultValue;
-    const [value, _setValue] = React__default.useState(initialValue);
-    React__default.useEffect(() => {
-        function updateValue() {
-            if (enableUrl) {
-                _setValue(getValueFromUrl(key) || defaultValue);
-            }
-        }
-        window.addEventListener("popstate", updateValue);
-        return () => {
-            window.removeEventListener("popstate", updateValue);
-        };
-    });
-    function setValue(value) {
-        _setValue(value);
-        const url = new URL(location.href);
-        if (key !== "") {
-            url.searchParams.set(key, value);
-        }
-        else {
-            url.hash = "#" + value;
-        }
-        if (enableUrl) {
-            history.pushState(undefined, "", url);
-        }
-    }
-    return [value, setValue];
-}
-function handleKeyDown(event, index, tabs, setActiveTab) {
-    event.preventDefault();
-    switch (event.key) {
-        case "ArrowLeft":
-        case "ArrowUp":
-            if (index > 0) {
-                setActiveTab(tabs[index - 1].props.id);
-            }
-            break;
-        case "ArrowRight":
-        case "ArrowDown":
-            if (index < tabs.length - 1) {
-                setActiveTab(tabs[index + 1].props.id);
-            }
-            break;
-        case "Home":
-            setActiveTab(tabs[0].props.id);
-            break;
-        case "End":
-            setActiveTab(tabs[tabs.length - 1].props.id);
-            break;
-    }
-}
-function useFocus(element) {
-    element?.scrollIntoView({ block: "nearest", inline: "nearest" });
-    element?.focus();
-}
-/**
- * Highly customizable Tabs component made for testing purposes.
- * You should use {@link NavigationTabs} or {@link ContentTabs} instead.
- */
-function GenericTabs({ classPrefix, children, id, defaultValue, url = "none", }) {
-    const ref = React__default.useRef(null);
-    const [activeTab, setActiveTab] = useUrlState(defaultValue, url === "query" ? id : "", url === "query" || url === "hash");
-    let activeTabIndex = children.findIndex((c) => c.props.id === activeTab);
-    if (activeTabIndex === -1) {
-        activeTabIndex = 0;
-    }
-    useFocus(ref.current?.querySelector(`#${activeTab}-tab`));
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { ref: ref, className: `${classPrefix}`, id: id },
-            React__default.createElement("ul", { className: `${classPrefix}__tablist`, role: "tablist" }, children.map((child, index) => (React__default.createElement("li", { role: "presentation", className: `${classPrefix}__tab-element` },
-                React__default.createElement("button", { key: child.props.id, role: "tab", "aria-selected": index === activeTabIndex, "aria-controls": child.props.id, id: `${child.props.id}-tab`, className: `${classPrefix}__tab`, tabIndex: index === activeTabIndex ? 0 : -1, onKeyDown: (event) => {
-                        handleKeyDown(event, index, children, setActiveTab);
-                    }, onClick: (event) => {
-                        event.preventDefault();
-                        setActiveTab(child.props.id);
-                    } }, child.props.title)))))),
-        children.map((child, index) => (React__default.createElement("div", { className: `${classPrefix}__tabpanel`, role: "tabpanel", "aria-labelledby": `${child.props.id}-tab`, id: child.props.id, key: index, hidden: index !== activeTabIndex }, child)))));
-}
-function NavigationTabs({ id, children, url = "query", defaultValue, }) {
-    return (React__default.createElement(GenericTabs, { id: id, children: children, url: url, defaultValue: defaultValue, classPrefix: "kth-navigation-tabs" }));
-}
-function ContentTabs({ id, children, url = "hash", defaultValue, }) {
-    return (React__default.createElement(GenericTabs, { id: id, children: children, url: url, defaultValue: defaultValue, classPrefix: "kth-content-tabs" }));
-}
-function Tab({ children }) {
-    return React__default.createElement(React__default.Fragment, null, children);
-}
-
-function Select({ name, label, description, value, onChange, children, error, }) {
-    const id = `select-${name}`;
-    return (React__default.createElement("div", { className: "kth-select" },
-        React__default.createElement("label", { htmlFor: id }, label),
-        description && React__default.createElement("p", { id: `${id}-description` }, description),
-        React__default.createElement("select", { id: id, "aria-describedby": description && `${id}-description`, name: name, value: value, onChange: (e) => onChange(e.target.value), "aria-invalid": error !== undefined ? "true" : "false" }, children),
-        error && (React__default.createElement("p", { className: "kth-select__error", role: "alert" }, error))));
+function hello() {
+    return "world";
 }
-function OptionGroup({ label, children }) {
-    return React__default.createElement("optgroup", { label: label }, children);
-}
-function Option({ value, children }) {
-    return React__default.createElement("option", { value: value }, children);
-}
-
-const SvgArrowBack = (props) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1.25em", height: "1.25em", viewBox: "0 0 20 20", ...props },
-    React.createElement("path", { fill: "currentColor", d: "m10 16-6-6 6-6 1.063 1.063L6.875 9.25H16v1.5H6.875l4.188 4.188L10 16Z" })));
-
-const SvgArrowForward = (props) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1.25em", height: "1.25em", viewBox: "0 0 20 20", ...props },
-    React.createElement("path", { fill: "currentColor", d: "m10 16.075-1.227-1.227 3.983-3.983h-8.83v-1.73h8.83L8.773 5.152 10 3.925 16.075 10 10 16.075Z" })));
-
-/** A button with just text */
-function Button({ children, onClick, appearance }) {
-    const className = ["kth-button", appearance].join(" ");
-    return (React__default.createElement("button", { onClick: onClick, className: className }, children));
-}
-function BackButton({ children, onClick }) {
-    return (React__default.createElement("button", { onClick: onClick, className: "kth-button tertiary" },
-        React__default.createElement(SvgArrowBack, null),
-        children));
-}
-function ForwardButton({ children, onClick }) {
-    return (React__default.createElement("button", { onClick: onClick, className: "kth-button primary" },
-        children,
-        React__default.createElement(SvgArrowForward, null)));
-}
-
-const SvgCheck = (props) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1.25em", height: "1.25em", viewBox: "0 0 20 20", ...props },
-    React.createElement("path", { fill: "currentColor", d: "M8.23 14.063 4.707 10.52 5.75 9.479l2.48 2.459 6.02-6L15.292 7l-7.063 7.063Z" })));
 
-export { BackButton, Button, ContentTabs, ForwardButton, SvgArrowBack as IconArrowBack, SvgCheck as IconCheck, NavigationTabs, Option, OptionGroup, Select, Tab };
+export { hello as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kth/style",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "exports": {
@@ -16,7 +16,6 @@
   },
   "scripts": {
     "clean": "rm -rf dist",
-    "dev": "storybook dev -p 6006",
     "build": "npm run clean && npm run build:components",
     "build:components": "rollup -c",
     "test": "npm run test:lint",
@@ -30,13 +29,6 @@
     "@rollup/plugin-commonjs": "^24.1.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-typescript": "^11.1.0",
-    "@storybook/addon-essentials": "^7.0.6",
-    "@storybook/addon-interactions": "^7.0.6",
-    "@storybook/addon-links": "^7.0.6",
-    "@storybook/blocks": "^7.0.6",
-    "@storybook/react": "^7.0.6",
-    "@storybook/react-vite": "^7.0.6",
-    "@storybook/testing-library": "^0.0.14-next.2",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@typescript-eslint/eslint-plugin": "^5.57.1",
@@ -45,17 +37,15 @@
     "eslint": "^8.38.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.4",
-    "eslint-plugin-storybook": "^0.6.11",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "^3.21.4",
-    "storybook": "^7.0.6",
     "typescript": "^5.0.2",
     "vite": "^4.3.0"
   },
   "peerDependencies": {
     "react": "*"
   },
-  "gitHead": "8768a00294cdeeb082cf4b043f192dc64aaec5fb"
+  "gitHead": "2ef5d86944a2cd3c4eee7011c4b71983e11f309f"
 }

package/scss/components/a11y-nav.scss

@@ -0,0 +1,31 @@
+@use "../tokens/colors.scss" as c;
+@use "../tokens/spacing.scss" as s;
+
+@layer kth-style {
+  .kth-a11y-nav {
+    position: fixed;
+    margin: s.$space-16;
+    padding: s.$space-8;
+    background: var(--color-background);
+    color: var(--color-text);
+    border-radius: s.$space-4;
+
+    // TODO: move those border styles to design tokens
+    // TODO: create tokens for shadows
+    border-width: calc(1rem / 16);
+    border-color: var(--color-text);
+    border-style: solid;
+
+    box-shadow: 0 2px 4px 0 rgb(33, 33, 33, 0.4);
+
+    // Visually hidden by default
+    z-index: -1;
+    left: -999999px;
+
+    &:focus-within {
+      // Show when something has focus
+      left: 0;
+      z-index: 100000;
+    }
+  }
+}

package/scss/components/button.scss

@@ -1,62 +1,26 @@
 @use "../tokens/spacing";
 @use "../tokens/icons";
-@use "sass:math";
-
-// TODO: move to its own tokens
-$border-radius: spacing.$space-4;
-$secondary-border-width: math.div(1rem, 16);
 
 @layer kth-style {
-  .kth-button {
-    border-radius: $border-radius;
+  .kth-button.close {
     display: flex;
-    align-items: center;
-    gap: spacing.$space-4;
-
-    &.primary,
-    &.success,
-    &.danger,
-    &.next {
-      color: var(--color-on-primary);
-      border: none;
-      padding-block: var(--space-inner-block);
-      padding-inline: var(--space-inner-inline);
-      font: var(--font-label-s);
-    }
-
-    &.primary,
-    &.next {
-      background: var(--color-primary);
-    }
-
-    &.success {
-      background: var(--color-success, green);
-    }
-
-    &.danger {
-      background: var(--color-error, red);
-    }
-
-    &.secondary,
-    &.previous {
-      --border-width: #{$secondary-border-width};
-      border-color: var(--color-secondary);
-      border-width: var(--border-width);
-      border-style: solid;
-
-      background: transparent;
-      padding-block: calc(var(--space-inner-block) - var(--border-width));
-      padding-inline: calc(var(--space-inner-inline) - var(--border-width));
-    }
-
-    &.next::after {
-      @include icons.icon-arrow-right-500;
-      background-color: var(--color-on-primary);
-    }
+    margin-inline-start: auto;
+    background: transparent;
+    border: none;
+    padding-inline: 0;
+    padding-block: spacing.$space-8;
+  }
 
-    &.previous::before {
-      @include icons.icon-arrow-left-300;
-      background-color: var(--color-secondary);
-    }
+  .kth-button.close::before {
+    content: "";
+    display: inline-block;
+    width: 1.5rem;
+    height: 1.5rem;
+    background-color: var(--color-primary);
+
+    mask-image: icons.$icon-url-close;
+    -webkit-mask-image: icons.$icon-url-close;
+    mask-size: cover;
+    -webkit-mask-size: cover;
   }
 }

package/scss/components/header.scss

@@ -0,0 +1,40 @@
+@use "../tokens/colors.scss";
+@use "../tokens/spacing.scss";
+@use "../utils/mixins.scss";
+
+@layer kth-style {
+  .kth-header.intranet {
+    @include colors.theme-intranet;
+  }
+  .kth-header.external {
+    @include colors.theme-inverse;
+  }
+  .kth-header.student-web {
+    @include colors.theme-student-web;
+  }
+
+  .kth-header {
+    color: var(--color-text);
+    background: var(--color-background);
+    padding-block: spacing.$space-16;
+    position: relative;
+
+    &__container {
+      @include mixins.container;
+      display: flex;
+      align-items: center;
+    }
+
+    &__tools {
+      @include mixins.horizontal-list();
+      flex-wrap: wrap;
+      gap: 0 spacing.$space-16;
+      justify-content: flex-end;
+      margin-inline-start: auto;
+    }
+
+    &__mega-menu--collapsable {
+      display: none;
+    }
+  }
+}

package/scss/components/logotype.scss

@@ -0,0 +1,28 @@
+@use "../tokens/spacing.scss";
+
+@layer kth-style {
+  a.kth-logotype,
+  figure.kth-logotype {
+    display: inline-block;
+    block-size: 4rem;
+    inline-size: 4rem;
+    border: none;
+    margin: 0;
+    margin-inline-end: spacing.$space-32;
+    padding: 0;
+
+    // Defensive measurement:
+    // - We prevent logo from shrinking
+    flex: 0 0 auto;
+
+    > figure {
+      block-size: 100%;
+      inline-size: 100%;
+    }
+
+    img {
+      block-size: 100%;
+      inline-size: 100%;
+    }
+  }
+}

package/scss/components/mega-menu.scss

@@ -0,0 +1,33 @@
+@use "../tokens/spacing.scss";
+@use "../utils/mixins.scss";
+
+// TODO: this should be a token
+$breakpoint-mega-menu: 64rem;
+
+@layer kth-style {
+  nav.kth-mega-menu {
+    > ul {
+      @include mixins.horizontal-list();
+
+      // Defensive measurements:
+      // - `flex-wrap: wrap` makes sure that all menus are displayed decently
+      // - `0` in gap (block axis) makes sure that menu spacing is ok all the time
+      flex-wrap: wrap;
+      gap: 0 spacing.$space-16;
+    }
+  }
+
+  nav.kth-mega-menu--collapsable {
+    display: none;
+  }
+
+  @media (max-width: $breakpoint-mega-menu) {
+    nav.kth-mega-menu {
+      display: none;
+    }
+
+    nav.kth-mega-menu--collapsable {
+      display: block;
+    }
+  }
+}

package/scss/components/menu-item.scss

@@ -0,0 +1,40 @@
+@use "../tokens/spacing";
+@use "../tokens/icons";
+
+@layer kth-style {
+  .kth-menu-item {
+    color: var(--color-primary);
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: spacing.$space-4;
+
+    // Fixes for buttons:
+    border: none;
+    background: none;
+    padding: 0;
+
+    span {
+      padding-block: spacing.$space-8;
+      padding-block-end: spacing.$space-4;
+      border-bottom: transparent spacing.$space-4 solid;
+    }
+
+    &:hover span {
+      border-color: var(--color-primary);
+    }
+
+    &.dropdown::after {
+      @include icons.icon-caret-down;
+      background-color: var(--color-primary);
+    }
+    &.search::before {
+      @include icons.icon-search;
+      background-color: var(--color-primary);
+    }
+    &.language::before {
+      @include icons.icon-globe;
+      background-color: var(--color-primary);
+    }
+  }
+}