@kth/style 0.0.7 → 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,12 +107,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);

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,12 +105,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);

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

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%;
+  }
+}