@kth/style 0.0.6 → 0.0.8

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/index.js

@@ -107,21 +107,19 @@ function Tab({ children }) {
     return React.createElement(React.Fragment, null, children);
 }
 
-const SelectContext = React.createContext("");
-function Select({ name, label, description, value, onChange, children, }) {
+function Select({ name, label, description, value, onChange, children, error, }) {
     const id = `select-${name}`;
-    return (React.createElement(SelectContext.Provider, { value: value },
-        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.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), "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);
 }
 function Option({ value, children }) {
-    const selectedValue = React.useContext(SelectContext);
-    return (React.createElement("option", { value: value, selected: value === selectedValue }, children));
+    return React.createElement("option", { value: value }, children);
 }
 
 exports.ContentTabs = ContentTabs;

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/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/index.js

@@ -105,21 +105,19 @@ function Tab({ children }) {
     return React.createElement(React.Fragment, null, children);
 }
 
-const SelectContext = React.createContext("");
-function Select({ name, label, description, value, onChange, children, }) {
+function Select({ name, label, description, value, onChange, children, error, }) {
     const id = `select-${name}`;
-    return (React.createElement(SelectContext.Provider, { value: value },
-        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.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), "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);
 }
 function Option({ value, children }) {
-    const selectedValue = React.useContext(SelectContext);
-    return (React.createElement("option", { value: value, selected: value === selectedValue }, children));
+    return React.createElement("option", { value: value }, children);
 }
 
 export { ContentTabs, NavigationTabs, Option, OptionGroup, Select, Tab };

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.6",
+  "version": "0.0.8",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "scripts": {
@@ -47,5 +47,5 @@
   "peerDependencies": {
     "react": "*"
   },
-  "gitHead": "0af1b8254fb01896ba4ede69d0469066025b6f5a"
+  "gitHead": "4485935e665dcf7e8734c7142b6c4d913211c77f"
 }

package/scss/components/button.scss

@@ -0,0 +1,72 @@
+@use "../tokens/" as t;
+
+@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;
+    align-items: center;
+
+    &.primary {
+      background: 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;
+      }
+    }
+
+    &.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;
+      }
+    }
+  }
+
+  .kth-select,
+  .kth-input {
+    margin-block: t.$space-24;
+
+    label {
+      display: inline-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;
+    }
+
+    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;
+    }
+  }
+}

package/scss/components/form.scss

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

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

package/scss/components/select.scss

@@ -1,24 +0,0 @@
-@use "../tokens/" as t;
-
-@layer kth-style {
-  .kth-select {
-    margin-block: t.$space-24;
-
-    label {
-      display: inline-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-block: 1px solid t.$color-neutral-10;
-    }
-  }
-}