@kth/style 0.0.12 → 0.1.0

package/dist/esm/react.d.ts

@@ -0,0 +1,5 @@
+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";

package/dist/esm/react.js

@@ -0,0 +1,149 @@
+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 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 };

package/dist/esm/stories/ContentTabs.stories.d.ts

@@ -1,10 +1,9 @@
 import type { StoryObj } from "@storybook/react";
-import { ContentTabs } from "../components/Tabs";
 import "../../scss/globals.scss";
 import "../../scss/components/content-tabs.scss";
 declare const meta: {
     title: string;
-    component: typeof ContentTabs;
+    component: any;
     tags: string[];
 };
 export default meta;

package/package.json

@@ -1,14 +1,24 @@
 {
   "name": "@kth/style",
-  "version": "0.0.12",
+  "version": "0.1.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./react": {
+      "import": "./dist/esm/react.js",
+      "require": "./dist/cjs/react.js"
+    },
+    "./scss/*": "./scss/*"
+  },
   "scripts": {
     "clean": "rm -rf dist",
     "dev": "storybook dev -p 6006",
-    "build": "npm run clean && npm run build:components && npm run build:storybook",
+    "build": "npm run clean && npm run build:components",
     "build:components": "rollup -c",
-    "build:storybook": "storybook build -o ../../apps/style-web/public/storybook",
     "test": "npm run test:lint",
     "test:lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
   },
@@ -47,5 +57,5 @@
   "peerDependencies": {
     "react": "*"
   },
-  "gitHead": "6774939491027282851d19e5ae9022183f98cfe5"
+  "gitHead": "8768a00294cdeeb082cf4b043f192dc64aaec5fb"
 }

package/scss/components/button.scss

@@ -1,72 +1,62 @@
-@use "../tokens/" as t;
+@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 {
-    padding-inline: var(--kth-0-clickable-padding-inline);
-    border-radius: t.$space-4;
-    display: inline-flex;
-    gap: t.$space-4;
+    border-radius: $border-radius;
+    display: flex;
     align-items: center;
+    gap: spacing.$space-4;
 
-    &.primary {
-      background: t.$color-primary-5;
-      color: t.$color-neutral-0;
+    &.primary,
+    &.success,
+    &.danger,
+    &.next {
+      color: var(--color-on-primary);
       border: none;
-      padding-block: var(--kth-0-clickable-padding-block);
-      font-weight: t.$font-weight-bold;
-
-      &:hover {
-        background: t.$color-primary-6;
-      }
+      padding-block: var(--space-inner-block);
+      padding-inline: var(--space-inner-inline);
+      font: var(--font-label-s);
     }
 
-    &.secondary {
-      background: transparent;
-      color: t.$color-neutral-10;
-      border: 1px solid t.$color-neutral-10;
-      padding-block: calc(var(--kth-0-clickable-padding-block) - 1px);
+    &.primary,
+    &.next {
+      background: var(--color-primary);
     }
 
-    &.tertiary {
-      padding-inline: 0;
-      background: transparent;
-      color: t.$color-primary-5;
-      border: none;
-      padding-block: calc(var(--kth-0-clickable-padding-block));
-
-      &:hover {
-        text-decoration: underline;
-      }
+    &.success {
+      background: var(--color-success, green);
     }
-  }
-
-  .kth-select,
-  .kth-input {
-    margin-block: t.$space-24;
 
-    label {
-      display: inline-block;
-      font-weight: 600;
+    &.danger {
+      background: var(--color-error, red);
     }
 
-    p {
-      margin: t.$space-4 0;
+    &.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));
     }
 
-    select {
-      margin-top: t.$space-8;
-      padding-inline: var(--kth-0-clickable-padding-inline);
-      padding-block: calc(var(--kth-0-clickable-padding-block) - 1px);
-      border-radius: t.$space-4;
-      border: 1px solid t.$color-neutral-10;
+    &.next::after {
+      @include icons.icon-arrow-right-500;
+      background-color: var(--color-on-primary);
     }
 
-    input {
-      margin-top: t.$space-8;
-      padding-inline: var(--kth-0-clickable-padding-inline);
-      padding-block: calc(var(--kth-0-clickable-padding-block) - 1px);
-      border-radius: t.$space-4;
-      border: 1px solid t.$color-neutral-10;
+    &.previous::before {
+      @include icons.icon-arrow-left-300;
+      background-color: var(--color-secondary);
     }
   }
 }

package/scss/components/checkbox.scss

@@ -0,0 +1,63 @@
+@use "../tokens/spacing.scss";
+@use "../tokens/icons.scss";
+@use "sass:math";
+
+// TODO: move to its own tokens
+$secondary-border-width: math.div(1rem, 16);
+$input-size: spacing.$space-24;
+$input-inner-size: spacing.$space-16;
+
+@layer kth-style {
+  input[type="checkbox"],
+  input[type="radio"] {
+    appearance: none;
+    -webkit-appearance: none;
+    background-color: transparent;
+    margin-inline: 0;
+    margin-block: var(--space-inner-block);
+    font: inherit;
+    width: $input-size;
+    height: $input-size;
+    border-width: var(--border-width);
+    border-style: solid;
+    border-color: currentColor;
+    display: grid;
+    place-content: center;
+
+    &::before {
+      content: "";
+      transform: scale(0);
+    }
+
+    &:checked::before {
+      transform: scale(1);
+    }
+  }
+
+  input[type="checkbox"] {
+    border-radius: spacing.$space-4;
+
+    &::before {
+      width: $input-size;
+      height: $input-size;
+      box-shadow: inset $input-size $input-size var(--color-primary);
+
+      -webkit-mask-image: icons.$icon-check;
+      mask-image: icons.$icon-check;
+
+      // Windows High Contrast Mode
+      background-color: CanvasText;
+    }
+  }
+
+  input[type="radio"] {
+    border-radius: 100%;
+
+    &::before {
+      width: $input-inner-size;
+      height: $input-inner-size;
+      background-color: var(--color-primary);
+      border-radius: 100%;
+    }
+  }
+}

package/scss/components/details.scss

@@ -0,0 +1,40 @@
+@use "../tokens/spacing.scss";
+@use "../tokens/icons.scss";
+
+$border-width: spacing.$space-4;
+
+@layer kth-style {
+  .kth-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;
+    }
+
+    &__content {
+      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;
+    }
+  }
+}

package/scss/components/fieldset.scss

@@ -0,0 +1,60 @@
+@use "../tokens/spacing.scss";
+@use "../tokens/icons.scss";
+@use "sass:math";
+
+$secondary-border-width: math.div(1rem, 16);
+$input-size: 1.5rem;
+
+// Coded as <fieldset>
+.kth-fieldset {
+  border: 0;
+  padding: 0;
+  margin-inline: 0;
+  margin-block: spacing.$space-24;
+
+  > legend {
+    font: var(--font-label-s);
+  }
+
+  &__description {
+    margin-block: spacing.$space-4;
+    margin-inline: 0;
+  }
+
+  &__options {
+    --border-width: #{$secondary-border-width};
+    border-width: var(--border-width);
+    border-style: solid;
+    border-color: transparent;
+    margin-block: calc(0 - var(--border-width));
+    padding-inline: calc(#{spacing.$space-8} - var(--border-width));
+  }
+
+  &.error &__options {
+    border-color: var(--color-error, red);
+  }
+
+  &.error &__error {
+    margin-block: spacing.$space-4;
+    color: var(--color-error, red);
+  }
+
+  &__option {
+    display: grid;
+    grid-template-columns: $input-size auto;
+    gap: spacing.$space-0 spacing.$space-12;
+
+    :not(input) {
+      grid-column-start: 2;
+    }
+
+    label {
+      display: inline-block;
+      padding-block: var(--space-inner-block);
+    }
+  }
+
+  &__option-description {
+    margin-block-end: spacing.$space-16;
+  }
+}

package/scss/components/form-control.scss

@@ -0,0 +1,25 @@
+@use "../tokens/spacing.scss";
+@use "../tokens/icons.scss";
+$secondary-border-width: 1rem/16;
+
+@layer kth-style {
+  .kth-form-control {
+    margin-block: spacing.$space-24;
+
+    > label {
+      font: var(--font-label-s);
+      display: block;
+      margin-block: spacing.$space-4;
+    }
+
+    > .kth-form-control__description {
+      margin-block: spacing.$space-4;
+    }
+
+    // Preferred to select via
+    // :has([aria-invalid="true"])... but Firefox does not support `has` yet
+    &.error .kth-form-control__error {
+      color: var(--color-error, red);
+    }
+  }
+}

package/scss/components/header-menu-item.scss

@@ -0,0 +1,38 @@
+@use "../tokens/spacing";
+@use "../tokens/icons";
+
+.kth-header-menu-item {
+  color: var(--color-primary);
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  gap: spacing.gap(4);
+
+  // Fixes for buttons:
+  border: none;
+  background: none;
+  padding: 0;
+
+  span {
+    padding-block: spacing.padding(8);
+    padding-block-end: spacing.padding(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);
+  }
+}

package/scss/components/input.scss

@@ -0,0 +1,21 @@
+@use "../tokens/spacing.scss";
+@use "../tokens/icons.scss";
+$secondary-border-width: 1rem/16;
+
+@layer kth-style {
+  .kth-input {
+    --border-width: #{$secondary-border-width};
+
+    padding-inline: var(--space-inner-inline);
+    padding-block: calc(var(--space-inner-block) - var(--border-width));
+    border-radius: spacing.$space-4;
+    border-width: var(--border-width);
+    border-style: solid;
+    border-color: var(--color-secondary);
+
+    &[aria-invalid="true"] {
+      color: var(--color-error, red);
+      border-color: var(--color-error, red);
+    }
+  }
+}

package/scss/components/main-header.scss

@@ -0,0 +1,105 @@
+@use "../tokens/colors.scss";
+@use "../tokens/spacing.scss";
+@use "../utils/mixins.scss";
+
+@mixin horizontal-list {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  > :where(li) {
+    padding: 0;
+    margin: 0;
+  }
+}
+
+.kth-main-header.intranet {
+  @include colors.theme-intranet;
+
+  .kth-main-header__logotype.white {
+    display: none;
+  }
+}
+.kth-main-header.external {
+  @include colors.theme-inverse;
+
+  .kth-main-header__logotype.blue {
+    display: none;
+  }
+}
+.kth-main-header.student-web {
+  @include colors.theme-student-web;
+
+  .kth-main-header__logotype.white {
+    display: none;
+  }
+}
+
+.kth-main-header {
+  background: var(--color-background);
+  padding-block: spacing.padding(16);
+  position: relative;
+
+  &__container {
+    @include mixins.container;
+    display: flex;
+    align-items: center;
+  }
+
+  &__logotype {
+    width: 4rem;
+    height: 4rem;
+    border: none;
+    margin: 0;
+    margin-inline-end: spacing.margin(32);
+    padding: 0;
+
+    // Defensive measurement:
+    // - We prevent logo from shrinking
+    flex: 0 0 auto;
+
+    > img {
+      block-size: 100%;
+      inline-size: 100%;
+    }
+  }
+
+  &__mega-menu {
+    > ul {
+      @include 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;
+    }
+  }
+
+  &__tools {
+    @include horizontal-list();
+    flex-wrap: wrap;
+    gap: 0 spacing.$space-16;
+    justify-content: flex-end;
+    margin-inline-start: auto;
+  }
+
+  &__mega-menu--collapsable {
+    display: none;
+  }
+}
+
+@media (width < 64rem) {
+  .kth-main-header__logotype {
+    margin-inline-end: 0;
+  }
+
+  .kth-main-header__mega-menu {
+    display: none;
+  }
+
+  .kth-main-header__mega-menu--collapsable {
+    display: block;
+  }
+}