@kth/style 0.0.12 → 0.2.0

package/dist/cjs/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/cjs/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/cjs/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/dist/esm/components/Button.d.ts

@@ -1,20 +0,0 @@
-/// <reference types="react" />
-interface ButtonProps {
-    /** The label of the button */
-    children?: string;
-    /** The callback function when the button is clicked */
-    onClick?: () => void;
-    /** Appearance */
-    appearance: "primary" | "secondary" | "tertiary";
-}
-interface IconButtonProps {
-    /** The label of the button */
-    children?: string;
-    /** The callback function when the button is clicked */
-    onClick?: () => void;
-}
-/** A button with just text */
-export declare function Button({ children, onClick, appearance }: ButtonProps): JSX.Element;
-export declare function BackButton({ children, onClick }: IconButtonProps): JSX.Element;
-export declare function ForwardButton({ children, onClick }: IconButtonProps): JSX.Element;
-export {};

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

@@ -1,20 +0,0 @@
-import React from "react";
-interface RadioGroupProps {
-    /** Options */
-    children: React.ReactElement<RadioProps> | React.ReactElement<RadioProps>[];
-    /** The value of the selected radio button */
-    value: string;
-    /** The callback function when a different choice is made by the user */
-    onChange: (value: string) => void;
-}
-interface RadioProps {
-    /** The value of the radio button */
-    value: string;
-    /** The label of the radio button */
-    label: string;
-}
-/** Implemented as fancy radio buttons */
-export declare function FilterTabs({ children, value, onChange }: RadioGroupProps): JSX.Element;
-/** A single radio button */
-export declare function Radio({ value, label }: RadioProps): JSX.Element;
-export {};

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

@@ -1,36 +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;
-    /** True if the option should be disabled */
-    disabled?: boolean;
-}
-interface OptionGroupProps {
-    label: string;
-    children: React.ReactNode;
-}
-export declare function Select({ name, label, description, value, onChange, children, error, }: SelectProps): JSX.Element;
-export declare function OptionGroup({ label, children }: OptionGroupProps): JSX.Element;
-export declare function Option({ value, children, disabled }: OptionProps): JSX.Element;
-export {};

package/dist/esm/components/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): JSX.Element;
-export declare function NavigationTabs({ id, children, url, defaultValue, }: NavigationTabsProps): JSX.Element;
-export declare function ContentTabs({ id, children, url, defaultValue, }: ContentTabsProps): JSX.Element;
-export declare function Tab({ children }: TabProps): JSX.Element;
-export {};

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

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

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

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

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

@@ -1,3 +0,0 @@
-import type { SVGProps } from "react";
-declare const SvgArrowForward: (props: SVGProps<SVGSVGElement>) => 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,13 +0,0 @@
-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;
-    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/content-tabs.scss

@@ -1,68 +0,0 @@
-@use "../tokens/" as t;
-
-$border-secondary: 1px solid t.$color-neutral-10;
-
-@layer kth-style {
-  .kth-content-tabs {
-    overflow: auto;
-    padding-block-start: t.$space-16;
-    position: sticky;
-    top: calc(var(--kpm-bar-height, 0rem));
-    background: t.$color-neutral-0;
-
-    ul[role="tablist"] {
-      list-style: none;
-      padding: 0;
-      margin: 0;
-      display: inline-flex;
-      flex-wrap: nowrap;
-      align-items: stretch;
-      gap: t.$space-4;
-      min-width: 100%;
-      border-block-end: $border-secondary;
-    }
-
-    li {
-      display: flex;
-    }
-
-    button[role="tab"] {
-      box-sizing: border-box;
-      padding-inline: var(--kth-0-clickable-padding-inline);
-      padding-block: calc(var(--kth-0-clickable-padding-block) - 1px);
-      border-block-width: 1px;
-      display: block;
-      text-decoration: none;
-      margin-block-end: -1px;
-      color: t.$color-neutral-10;
-      border: $border-secondary;
-      border-radius: t.border-radius(8 8 0 0);
-
-      &:focus {
-        outline-offset: -#{t.$space-4};
-      }
-
-      &:hover {
-        text-decoration: underline;
-      }
-
-      &[aria-selected="false"] {
-        background: t.$color-neutral-2;
-        margin-block-start: #{t.$space-8};
-      }
-
-      &[aria-selected="true"] {
-        background: t.$color-neutral-0;
-        padding-block-start: calc(
-          var(--kth-0-clickable-padding-block) + #{t.$space-8} - 1px
-        );
-        border-block-end-color: transparent;
-      }
-    }
-
-    [role="tabpanel"] {
-      border-inline: $border-secondary;
-      border-block-end: $border-secondary;
-    }
-  }
-}

package/scss/components/filter-tabs.scss

@@ -1,31 +0,0 @@
-@use "../tokens/" as t;
-
-@layer kth-style {
-  .kth-filter-tabs {
-    border: none;
-    margin: 0;
-    padding: 0;
-    display: inline-flex;
-
-    input[type="radio"] {
-      appearance: none;
-      margin: 0;
-      padding: 0;
-    }
-
-    label {
-      display: inline-block;
-      padding-inline: var(--kth-0-clickable-padding-inline);
-      padding-block: var(--kth-0-clickable-padding-block);
-    }
-
-    input:focus + label {
-      outline: 2px solid t.$color-primary-5;
-      outline-offset: -#{t.$space-6};
-    }
-
-    input:checked + label {
-      border-bottom: t.$space-2 t.$color-primary-5 solid;
-    }
-  }
-}

package/scss/components/form.scss

@@ -1,48 +0,0 @@
-@use "../tokens/" as t;
-
-@layer kth-style {
-  .kth-select,
-  .kth-input {
-    margin-block: t.$space-24;
-
-    label {
-      display: block;
-      font-weight: 600;
-    }
-
-    p {
-      margin: t.$space-4 0;
-    }
-
-    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;
-
-      &[aria-invalid="true"] {
-        color: t.$color-danger-5;
-        border-color: t.$color-danger-5;
-      }
-    }
-
-    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;
-
-      &[aria-invalid="true"] {
-        color: t.$color-danger-5;
-        border-color: t.$color-danger-5;
-      }
-    }
-
-    &__error {
-      margin-top: t.$space-8;
-      color: t.$color-danger-5;
-    }
-  }
-}

package/scss/components/inline-icon.scss

@@ -1,7 +0,0 @@
-@use "../tokens/" as t;
-@layer kth-style {
-  .kth-inline-icon {
-    display: inline-block;
-    vertical-align: -12.5%;
-  }
-}

package/scss/globals.scss

@@ -1,5 +0,0 @@
-@use "utils/reset";
-@use "utils/sizes";
-
-@include reset.reset();
-@include sizes.sizes();

package/scss/tokens/_colors.scss

@@ -1,20 +0,0 @@
-// 1. Colors
-$color-neutral-10: #000;
-$color-neutral-6: #65656c;
-$color-neutral-2: #d4d4d4;
-$color-neutral-1: #f6f6f6;
-$color-neutral-0: #fff;
-
-$color-primary-6: #006388;
-$color-primary-5: #007fae;
-
-$color-success-6: #3f6600;
-$color-success-5: #528400;
-$color-success-1: #dff0d8;
-
-$color-danger-6: #b52c17;
-$color-danger-5: #d4351c;
-$color-danger-1: #f5e6e6;
-
-$color-warning-3: #fab919;
-$color-warning-1: #fcf8e3;

package/scss/tokens/_spacing.en.md

@@ -1,40 +0,0 @@
----
-lang: en
----
-
-# How to use
-
-We provide two ways for consuming these values:
-
-- With the utility functions `padding`, `margin` and `gap`
-- With the variables `$space-<number>`
-
-## Utility functions `padding`, `margin` and `gap`
-
-All three functions accept an arbitrary number of arguments, so they can be used in shorthand and non-shorthand CSS properties.
-
-```scss
-@use "@kth/style/scss/tokens" as t;
-
-.an-element {
-  // Passing two values at the same time
-  padding: t.padding(2 8);
-
-  // Passing one value only
-  margin-inline-end: t.margin(0);
-}
-```
-
-All three functions will throw an error if the passed value is invalid. Accepted values are: 0, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64 and 80.
-
-## Variables `$space-<value>`
-
-This package also exports variables named `$space-<value>` (example: `$space-2`) which can be convenient if you need a single value.
-
-```scss
-@use "@kth/style/scss/tokens" as t;
-
-.an-element {
-  padding-top: t.$space-4;
-}
-```

package/scss/tokens/_spacing.scss

@@ -1,81 +0,0 @@
-@use "sass:list";
-@use "sass:map";
-/// Design Tokens for spacing
-
-$space-0: 0;
-$space-2: 0.125rem;
-$space-4: 0.25rem;
-$space-6: 0.375rem;
-$space-8: 0.5rem;
-$space-12: 0.75rem;
-$space-16: 1rem;
-$space-20: 1.25rem;
-$space-24: 1.5rem;
-$space-32: 2rem;
-$space-40: 2.5rem;
-$space-48: 3rem;
-$space-64: 4rem;
-$space-80: 5rem;
-
-// Convinience map that stores every value. Used internally
-$_all_spaces: (
-  0: $space-0,
-  2: $space-2,
-  4: $space-4,
-  6: $space-6,
-  8: $space-8,
-  12: $space-12,
-  16: $space-16,
-  20: $space-20,
-  24: $space-24,
-  32: $space-32,
-  40: $space-40,
-  48: $space-48,
-  64: $space-64,
-  80: $space-80,
-);
-
-/// Converts a single KTH Style space value to rem.
-/// Throws an Error if the argument is not part of the valid spaces
-///
-/// This function is used internally.
-@function _space_to_rem($space) {
-  @if map.get($_all_spaces, $space) == null {
-    @error "#{$space} is not a valid spacing. Use one of the following instead: #{$_all_spaces}";
-  }
-
-  @return map.get($_all_spaces, $space);
-}
-
-/// Converts a list of "KTH Style space" value to their rem values.
-/// Throws an Error if any element is not valid
-///
-/// This function is used internally.
-@function _spaces_to_rem($list-of-spaces) {
-  $list-of-rem: ();
-
-  @each $element in $list-of-spaces {
-    $list-of-rem: list.append($list-of-rem, _space_to_rem($element));
-  }
-
-  @return $list-of-rem;
-}
-
-/// Converts a list of "KTH Style padding" values to actual CSS measurements.
-@function padding($list) {
-  @return _spaces_to_rem($list);
-}
-
-/// Converts a list of "KTH Style margin" values to actual CSS measurements..
-@function margin($list) {
-  @return _spaces_to_rem($list);
-}
-
-/// Converts a list of "KTH Style gap" values to actual CSS measurements..
-@function gap($list) {
-  @return _spaces_to_rem($list);
-}
-
-@function border-radius($list) {
-  @return _spaces_to_rem($list);
-}

package/scss/tokens/_typography.scss

@@ -1,71 +0,0 @@
-@use "sass:math";
-// 2. Typography
-
-// Base tokens
-// All allowed single values for different properties
-// Name convention: `font-<property>-identifier`
-$font-family-sans: "Open Sans", sans-serif;
-$font-family-serif: Georgia, serif;
-
-// 2.2. Font sizes
-$font-size-base: 1rem;
-$font-size-l: 1.25rem;
-$font-size-xl: 1.5rem;
-$font-size-2xl: 1.875rem;
-$font-size-3xl: 2.75rem;
-
-// 2.3. Line heights
-$font-lh-base: 1.5rem;
-$font-lh-l: 2rem;
-$font-lh-xl: 2.25rem;
-$font-lh-2xl: 3rem;
-$font-lh-3xl: 4rem;
-
-// 2.4. Font weights
-$font-weight-normal: 400;
-$font-weight-bold: 600;
-
-// 2.5. Combinations of font size, line height and font weight
-@mixin font-h1 {
-  font-weight: $font-weight-bold;
-  font-size: $font-size-3xl;
-  line-height: $font-lh-3xl;
-}
-
-@mixin font-h2 {
-  font-weight: $font-weight-bold;
-  font-size: $font-size-2xl;
-  line-height: $font-lh-2xl;
-}
-
-@mixin font-h3 {
-  font-weight: $font-weight-bold;
-  font-size: $font-size-xl;
-  line-height: $font-lh-xl;
-}
-
-@mixin font-h4 {
-  font-weight: $font-weight-bold;
-  font-size: $font-size-l;
-  line-height: $font-lh-l;
-}
-
-@mixin font-h5 {
-  font-weight: $font-weight-bold;
-  font-size: $font-size-base;
-  line-height: $font-lh-base;
-}
-
-@mixin font-body-copy {
-  font-family: $font-family-serif;
-  font-weight: 400;
-  font-size: math.div(18rem, 16);
-  line-height: math.div(28rem, 16);
-}
-
-@mixin font-body-lead {
-  font-family: $font-family-sans;
-  font-weight: 400;
-  font-size: math.div(22rem, 16);
-  line-height: math.div(32rem, 16);
-}

package/scss/tokens/index.scss

@@ -1,6 +0,0 @@
-/// List of all KTH Style Design Tokens
-@forward "./typography";
-@forward "./spacing";
-@forward "./colors";
-
-@use "./spacing" as spacing;

package/scss/utils/sizes.scss

@@ -1,22 +0,0 @@
-@use "../tokens" as t;
-
-/// This mixin provides CSS custom properties used for sizing all UI elements
-@mixin sizes {
-  @layer kth-style {
-    :root {
-      // Padding (block and inline axis) for clickable elements
-      --kth-0-clickable-padding-block: #{t.$space-8};
-      --kth-0-clickable-padding-inline: #{t.$space-16};
-    }
-
-    .kth-0-normal {
-      --kth-0-clickable-padding-block: #{t.$space-8};
-      --kth-0-clickable-padding-inline: #{t.$space-16};
-    }
-
-    .kth-0-small {
-      --kth-0-clickable-padding-block: #{t.$space-4};
-      --kth-0-clickable-padding-inline: #{t.$space-12};
-    }
-  }
-}