@kth/style 0.1.0 → 0.2.0

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

@@ -1,34 +0,0 @@
-import React from "react";
-interface SelectProps {
-    /** Equivalent to HTML `name` */
-    name: string;
-    /** Label for the select */
-    label: string;
-    /** Select description */
-    description?: string;
-    /** Current value of the select field */
-    value: string;
-    /** Called when the select value changes */
-    onChange(value: string): void;
-    /** Options */
-    children: React.ReactNode;
-    /**
-     * Error message if the field has errors. `undefined` here means the field
-     * contains no error.
-     */
-    error?: string;
-}
-interface OptionProps {
-    /** The value for the option */
-    value: string;
-    /** Human-readable label for the option */
-    children: string;
-}
-interface OptionGroupProps {
-    label: string;
-    children: React.ReactNode;
-}
-export declare function Select({ name, label, description, value, onChange, children, error, }: SelectProps): React.JSX.Element;
-export declare function OptionGroup({ label, children }: OptionGroupProps): React.JSX.Element;
-export declare function Option({ value, children }: OptionProps): React.JSX.Element;
-export {};

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

@@ -1 +0,0 @@
-export declare function initTabs(container: Element): void;

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

@@ -1,19 +0,0 @@
-import React from "react";
-/**
- * A panel with a button that opens it.
- *
- * - `children` is mounted the first time the dialog is opened. It is _not_
- *   unmounted after the dialog is closed.
- */
-export declare function PersonalMenuPanel({ label, children }: {
-    label: any;
-    children: any;
-}): React.JSX.Element;
-interface PersonalMenuPanelGroupProps {
-    children: React.ReactElement;
-}
-/**
- * Contains all <PersonalMenuPanel /> components in a menu
- */
-export declare function PersonalMenuPanelGroup({ children, }: PersonalMenuPanelGroupProps): React.JSX.Element;
-export {};

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

@@ -1,34 +0,0 @@
-import React from "react";
-interface TabProps {
-    children?: React.ReactNode;
-    id: string;
-    title: string;
-}
-interface GenericTabsProps {
-    classPrefix: string;
-    children: React.ReactElement<TabProps>[];
-    id: string;
-    defaultValue?: string;
-    url: "query" | "hash" | "none";
-}
-interface NavigationTabsProps {
-    id: string;
-    children: React.ReactElement<TabProps>[];
-    url?: "query" | "none";
-    defaultValue?: string;
-}
-interface ContentTabsProps {
-    id: string;
-    children: React.ReactElement<TabProps>[];
-    url?: "hash" | "none";
-    defaultValue?: string;
-}
-/**
- * Highly customizable Tabs component made for testing purposes.
- * You should use {@link NavigationTabs} or {@link ContentTabs} instead.
- */
-export declare function GenericTabs({ classPrefix, children, id, defaultValue, url, }: GenericTabsProps): React.JSX.Element;
-export declare function NavigationTabs({ id, children, url, defaultValue, }: NavigationTabsProps): React.JSX.Element;
-export declare function ContentTabs({ id, children, url, defaultValue, }: ContentTabsProps): React.JSX.Element;
-export declare function Tab({ children }: TabProps): React.JSX.Element;
-export {};

package/dist/esm/icons/400/ArrowBack.d.ts

@@ -1,4 +0,0 @@
-import * as React from "react";
-import type { SVGProps } from "react";
-declare const SvgArrowBack: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
-export default SvgArrowBack;

package/dist/esm/icons/400/Check.d.ts

@@ -1,4 +0,0 @@
-import * as React from "react";
-import type { SVGProps } from "react";
-declare const SvgCheck: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
-export default SvgCheck;

package/dist/esm/icons/500/ArrowForward.d.ts

@@ -1,4 +0,0 @@
-import * as React from "react";
-import type { SVGProps } from "react";
-declare const SvgArrowForward: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
-export default SvgArrowForward;

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

@@ -1,14 +0,0 @@
-import type { StoryObj } from "@storybook/react";
-import { Button } from "../components/Button";
-import "../../scss/globals.scss";
-import "../../scss/components/button.scss";
-declare const meta: {
-    title: string;
-    component: typeof Button;
-    tags: string[];
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Primary: Story;
-export declare const Back: StoryObj;
-export declare const Forward: StoryObj;

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

@@ -1,12 +0,0 @@
-import type { StoryObj } from "@storybook/react";
-import "../../scss/globals.scss";
-import "../../scss/components/content-tabs.scss";
-declare const meta: {
-    title: string;
-    component: any;
-    tags: string[];
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Primary: Story;
-export declare const Secondary: Story;

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

@@ -1,12 +0,0 @@
-import type { StoryObj } from "@storybook/react";
-import { FilterTabs } from "../components/Radio";
-import "../../scss/globals.scss";
-import "../../scss/components/filter-tabs.scss";
-declare const meta: {
-    title: string;
-    component: typeof FilterTabs;
-    tags: string[];
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Primary: Story;

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

@@ -1,9 +0,0 @@
-import type { StoryObj } from "@storybook/react";
-import "../../scss/globals.scss";
-import "../../scss/components/inline-icon.scss";
-declare const meta: {
-    title: string;
-    tags: string[];
-};
-export default meta;
-export declare const CheckIcon: StoryObj;

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

@@ -1,14 +0,0 @@
-import type { StoryObj } from "@storybook/react";
-import { Select } from "../components/Select";
-import "../../scss/globals.scss";
-import "../../scss/components/form.scss";
-declare const meta: {
-    title: string;
-    component: typeof Select;
-    tags: string[];
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const WithDescriptions: Story;
-export declare const WithoutDescriptions: Story;
-export declare const WithError: Story;

package/scss/components/checkbox.scss

@@ -1,63 +0,0 @@
-@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

@@ -1,40 +0,0 @@
-@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

@@ -1,60 +0,0 @@
-@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

@@ -1,25 +0,0 @@
-@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

@@ -1,38 +0,0 @@
-@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

@@ -1,21 +0,0 @@
-@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

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

package/scss/components/select.scss

@@ -1,46 +0,0 @@
-@use "../tokens/spacing.scss";
-@use "../tokens/icons.scss";
-$secondary-border-width: 1rem/16;
-
-@layer kth-style {
-  .kth-select {
-    width: 100%;
-    min-width: 15ch;
-    max-width: 30ch;
-    cursor: pointer;
-    display: grid;
-    grid-template-areas: "select";
-    align-items: center;
-    position: relative;
-    border: none;
-
-    select {
-      --border-width: #{$secondary-border-width};
-      padding-block: calc(var(--space-inner-block) - var(--border-width));
-      padding-inline: var(--space-inner-inline);
-      appearance: none;
-      background-color: transparent;
-      border-width: var(--border-width);
-      border-style: solid;
-      border-color: var(--color-secondary);
-      border-radius: spacing.$space-4;
-      margin: 0;
-      width: 100%;
-      height: 100%;
-      grid-area: select;
-      z-index: 1;
-      cursor: inherit;
-
-      &[aria-invalid="true"] {
-        border-color: var(--color-error, red);
-      }
-    }
-
-    &::after {
-      @include icons.icon-caret-down;
-      background-color: var(--color-secondary);
-      grid-area: select;
-      justify-self: end;
-    }
-  }
-}