@kth/style 0.0.7 → 0.0.9

package/dist/cjs/components/Button.d.ts

@@ -0,0 +1,20 @@
+/// <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/cjs/components/Select.d.ts

@@ -12,6 +12,11 @@ interface SelectProps {
     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 */
@@ -23,7 +28,7 @@ interface OptionGroupProps {
     label: string;
     children: React.ReactNode;
 }
-export declare function Select({ name, label, description, value, onChange, children, }: SelectProps): JSX.Element;
+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 }: OptionProps): JSX.Element;
 export {};

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

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

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

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

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

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

package/dist/cjs/index.d.ts

@@ -1,2 +1,5 @@
 export { Tab, ContentTabs, NavigationTabs } from "./components/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/cjs/index.js

@@ -2,6 +2,25 @@
 
 var React = require('react');
 
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
 function getValueFromUrl(key) {
     const url = new URL(location.href);
     if (key) {
@@ -107,12 +126,13 @@ function Tab({ children }) {
     return React.createElement(React.Fragment, null, children);
 }
 
-function Select({ name, label, description, value, onChange, children, }) {
+function Select({ name, label, description, value, onChange, children, error, }) {
     const id = `select-${name}`;
     return (React.createElement("div", { className: "kth-select" },
         React.createElement("label", { htmlFor: id }, label),
         description && React.createElement("p", { id: `${id}-description` }, description),
-        React.createElement("select", { id: id, "aria-describedby": description && `${id}-description`, name: name, value: value, onChange: (e) => onChange(e.target.value) }, children)));
+        React.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.createElement("p", { className: "kth-select__error", role: "alert" }, error))));
 }
 function OptionGroup({ label, children }) {
     return React.createElement("optgroup", { label: label }, children);
@@ -121,7 +141,38 @@ function Option({ value, children }) {
     return React.createElement("option", { value: value }, children);
 }
 
+const SvgArrowBack = (props) => (React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1.25em", height: "1.25em", viewBox: "0 0 20 20", ...props },
+    React__namespace.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__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1.25em", height: "1.25em", viewBox: "0 0 20 20", ...props },
+    React__namespace.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.createElement("button", { onClick: onClick, className: className }, children));
+}
+function BackButton({ children, onClick }) {
+    return (React.createElement("button", { onClick: onClick, className: "kth-button tertiary" },
+        React.createElement(SvgArrowBack, null),
+        children));
+}
+function ForwardButton({ children, onClick }) {
+    return (React.createElement("button", { onClick: onClick, className: "kth-button primary" },
+        children,
+        React.createElement(SvgArrowForward, null)));
+}
+// export function NextButton() {}
+
+const SvgCheck = (props) => (React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1.25em", height: "1.25em", viewBox: "0 0 20 20", ...props },
+    React__namespace.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" })));
+
+exports.BackButton = BackButton;
+exports.Button = Button;
 exports.ContentTabs = ContentTabs;
+exports.ForwardButton = ForwardButton;
+exports.IconArrowBack = SvgArrowBack;
+exports.IconCheck = SvgCheck;
 exports.NavigationTabs = NavigationTabs;
 exports.Option = Option;
 exports.OptionGroup = OptionGroup;

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

@@ -0,0 +1,14 @@
+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/cjs/stories/InlineIcons.stories.d.ts

@@ -0,0 +1,9 @@
+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,7 +1,7 @@
 import type { StoryObj } from "@storybook/react";
 import { Select } from "../components/Select";
 import "../../scss/globals.scss";
-import "../../scss/components/select.scss";
+import "../../scss/components/form.scss";
 declare const meta: {
     title: string;
     component: typeof Select;
@@ -11,3 +11,4 @@ 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

@@ -0,0 +1,20 @@
+/// <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/Select.d.ts

@@ -12,6 +12,11 @@ interface SelectProps {
     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 */
@@ -23,7 +28,7 @@ interface OptionGroupProps {
     label: string;
     children: React.ReactNode;
 }
-export declare function Select({ name, label, description, value, onChange, children, }: SelectProps): JSX.Element;
+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 }: OptionProps): JSX.Element;
 export {};

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

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

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

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

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

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

package/dist/esm/index.d.ts

@@ -1,2 +1,5 @@
 export { Tab, ContentTabs, NavigationTabs } from "./components/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/index.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import * as React from 'react';
+import React__default from 'react';
 
 function getValueFromUrl(key) {
     const url = new URL(location.href);
@@ -18,8 +19,8 @@ function getValueFromUrl(key) {
  */
 function useUrlState(defaultValue = "", key = "", enableUrl = false) {
     const initialValue = (enableUrl && getValueFromUrl(key)) || defaultValue;
-    const [value, _setValue] = React.useState(initialValue);
-    React.useEffect(() => {
+    const [value, _setValue] = React__default.useState(initialValue);
+    React__default.useEffect(() => {
         function updateValue() {
             if (enableUrl) {
                 _setValue(getValueFromUrl(key) || defaultValue);
@@ -77,46 +78,73 @@ function useFocus(element) {
  * You should use {@link NavigationTabs} or {@link ContentTabs} instead.
  */
 function GenericTabs({ classPrefix, children, id, defaultValue, url = "none", }) {
-    const ref = React.useRef(null);
+    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.createElement(React.Fragment, null,
-        React.createElement("div", { ref: ref, className: `${classPrefix}`, id: id },
-            React.createElement("ul", { className: `${classPrefix}__tablist`, role: "tablist" }, children.map((child, index) => (React.createElement("li", { role: "presentation", className: `${classPrefix}__tab-element` },
-                React.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) => {
+    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.createElement("div", { className: `${classPrefix}__tabpanel`, role: "tabpanel", "aria-labelledby": `${child.props.id}-tab`, id: child.props.id, key: index, hidden: index !== activeTabIndex }, child)))));
+        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.createElement(GenericTabs, { id: id, children: children, url: url, defaultValue: defaultValue, classPrefix: "kth-navigation-tabs" }));
+    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.createElement(GenericTabs, { id: id, children: children, url: url, defaultValue: defaultValue, classPrefix: "kth-content-tabs" }));
+    return (React__default.createElement(GenericTabs, { id: id, children: children, url: url, defaultValue: defaultValue, classPrefix: "kth-content-tabs" }));
 }
 function Tab({ children }) {
-    return React.createElement(React.Fragment, null, children);
+    return React__default.createElement(React__default.Fragment, null, children);
 }
 
-function Select({ name, label, description, value, onChange, children, }) {
+function Select({ name, label, description, value, onChange, children, error, }) {
     const id = `select-${name}`;
-    return (React.createElement("div", { className: "kth-select" },
-        React.createElement("label", { htmlFor: id }, label),
-        description && React.createElement("p", { id: `${id}-description` }, description),
-        React.createElement("select", { id: id, "aria-describedby": description && `${id}-description`, name: name, value: value, onChange: (e) => onChange(e.target.value) }, children)));
+    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.createElement("optgroup", { label: label }, children);
+    return React__default.createElement("optgroup", { label: label }, children);
 }
 function Option({ value, children }) {
-    return React.createElement("option", { value: value }, children);
+    return React__default.createElement("option", { value: value }, children);
 }
 
-export { ContentTabs, NavigationTabs, Option, OptionGroup, Select, Tab };
+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)));
+}
+// export function NextButton() {}
+
+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/Button.stories.d.ts

@@ -0,0 +1,14 @@
+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/InlineIcons.stories.d.ts

@@ -0,0 +1,9 @@
+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,7 +1,7 @@
 import type { StoryObj } from "@storybook/react";
 import { Select } from "../components/Select";
 import "../../scss/globals.scss";
-import "../../scss/components/select.scss";
+import "../../scss/components/form.scss";
 declare const meta: {
     title: string;
     component: typeof Select;
@@ -11,3 +11,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const WithDescriptions: Story;
 export declare const WithoutDescriptions: Story;
+export declare const WithError: Story;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kth/style",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "scripts": {
@@ -46,5 +46,6 @@
   },
   "peerDependencies": {
     "react": "*"
-  }
+  },
+  "gitHead": "5c84200b7000ca5c45b18c5cb661280dbaf84e93"
 }

package/scss/components/button.scss

@@ -3,19 +3,39 @@
 @layer kth-style {
   .kth-button {
     padding-inline: var(--kth-0-clickable-padding-inline);
-    padding-block: calc(var(--kth-0-clickable-padding-block) - 1px);
-    border: 1px solid t.$color-neutral-10;
     border-radius: t.$space-4;
+    display: inline-flex;
+    gap: t.$space-4;
+    align-items: center;
 
     &.primary {
-      font-weight: t.$font-weight-bold;
       background: t.$color-primary-5;
-      border-color: t.$color-primary-5;
       color: t.$color-neutral-0;
+      border: none;
+      padding-block: var(--kth-0-clickable-padding-block);
+      font-weight: t.$font-weight-bold;
 
       &:hover {
         background: t.$color-primary-6;
-        border-color: t.$color-primary-6;
+      }
+    }
+
+    &.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);
+    }
+
+    &.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;
       }
     }
   }

package/scss/components/form.scss

@@ -6,7 +6,7 @@
     margin-block: t.$space-24;
 
     label {
-      display: inline-block;
+      display: block;
       font-weight: 600;
     }
 
@@ -20,6 +20,11 @@
       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 {
@@ -28,6 +33,16 @@
       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

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