@vygruppen/spor-react 13.6.0 → 13.7.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@13.6.0 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@13.7.0 build /home/runner/work/spor/spor/packages/spor-react
 > tsup
 
 CLI Building entry: src/index.tsx, src/icons/index.tsx
@@ -11,18 +11,18 @@ CLI Cleaning output folder
 ESM Build start
 CJS Build start
 DTS Build start
-ESM dist/index.mjs           353.61 KB
+ESM dist/index.mjs           356.08 KB
 ESM dist/icons/index.mjs     110.00 B
+ESM dist/index.mjs.map       756.21 KB
 ESM dist/icons/index.mjs.map 157.00 B
-ESM dist/index.mjs.map       752.22 KB
-ESM ⚡️ Build success in 2851ms
-CJS dist/index.cjs           378.29 KB
+ESM ⚡️ Build success in 2676ms
+CJS dist/index.cjs           380.79 KB
 CJS dist/icons/index.cjs     381.00 B
+CJS dist/index.cjs.map       756.21 KB
 CJS dist/icons/index.cjs.map 157.00 B
-CJS dist/index.cjs.map       752.22 KB
-CJS ⚡️ Build success in 2850ms
-DTS ⚡️ Build success in 21728ms
+CJS ⚡️ Build success in 2678ms
+DTS ⚡️ Build success in 21841ms
 DTS dist/icons/index.d.ts  44.00 B
-DTS dist/index.d.ts        155.16 KB
+DTS dist/index.d.ts        156.17 KB
 DTS dist/icons/index.d.cts 44.00 B
-DTS dist/index.d.cts       155.16 KB
+DTS dist/index.d.cts       156.17 KB

package/.turbo/turbo-postinstall.log

@@ -1,8 +1,8 @@
 
-> @vygruppen/spor-react@13.6.0 postinstall /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@13.7.0 postinstall /home/runner/work/spor/spor/packages/spor-react
 > chakra typegen src/theme/index.ts
 
-◇ injected env (0) from .env // tip: ◈ secrets for agents [www.dotenvx.com]
+◇ injected env (0) from .env // tip: ⌘ override existing { override: true }
 ┌  Chakra CLI ⚡️
 [?25l│
 ◒  Generating conditions types...

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @vygruppen/spor-react
 
+## 13.7.0
+
+### Minor Changes
+
+- b80fda2: Toast: Introduce "inverted" as a prop, that uses darkmode colors in lightmode, and lightmode colors in darkmode.
+- a1d5a12: Autocomplete: add a size-prop that can be set to either 'md' or 'sm'.
+
+### Patch Changes
+
+- e6bfa69: override safari autofill for input fields with spor colors
+- 6d0bf57: TextLink: Add non-breaking space for external icon so that it never breaks over to a newline alone.
+- 022e894: Separator: Change borderColor of the dashed separator to use the outline.default token
+  InputChip: Adjust the height of the different sizes to match with design.
+  TextLink: Change the ExternalLink-Icon to be of size 30x30 when TextLink is of size "lg"
+- Updated dependencies [783c84f]
+  - @vygruppen/spor-design-tokens@5.1.1
+
 ## 13.6.0
 
 ### Minor Changes

package/__tests__/toast.test.tsx

@@ -0,0 +1,108 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Button, createToast, SporProvider } from "@vygruppen/spor-react";
+import { describe, expect, test, vi } from "vitest";
+
+// SporProvider renders the Toaster internally, so toasts appear within it
+
+describe("Toast", () => {
+  test("shows toast triggered by a button click", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <SporProvider>
+        <Button
+          variant="secondary"
+          onClick={() =>
+            createToast({
+              variant: "success",
+              text: "Button triggered toast",
+            })
+          }
+        >
+          Show toast
+        </Button>
+      </SporProvider>,
+    );
+
+    expect(
+      screen.queryByText("Button triggered toast"),
+    ).not.toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Show toast" }));
+
+    await waitFor(() => {
+      expect(screen.getByText("Button triggered toast")).toBeInTheDocument();
+    });
+  });
+
+  test("close toast by a close trigger button click", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <SporProvider>
+        <Button
+          variant="secondary"
+          onClick={() =>
+            createToast({
+              variant: "success",
+              text: "Button triggered toast 2",
+              duration: 10_000,
+              closable: true,
+            })
+          }
+        >
+          Show toast
+        </Button>
+      </SporProvider>,
+    );
+
+    expect(
+      screen.queryByText("Button triggered toast 2"),
+    ).not.toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Show toast" }));
+
+    await waitFor(() => {
+      expect(screen.getByText("Button triggered toast 2")).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByRole("button", { name: "Lukk" }));
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+    expect(
+      screen.queryByText("Button triggered toast 2"),
+    ).not.toBeInTheDocument();
+  });
+
+  test("click on custom action button in toast", async () => {
+    const user = userEvent.setup();
+    const onButtonClick = vi.fn();
+
+    render(
+      <SporProvider>
+        <Button
+          variant="secondary"
+          onClick={() =>
+            createToast({
+              variant: "success",
+              text: "Button triggered toast 3",
+              action: {
+                label: "Undo",
+                onClick: onButtonClick,
+              },
+            })
+          }
+        >
+          Show toast
+        </Button>
+      </SporProvider>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Show toast" }));
+    await waitFor(() => {
+      expect(screen.getByText("Button triggered toast 3")).toBeInTheDocument();
+    });
+    await user.click(screen.getByRole("button", { name: "Undo" }));
+    expect(onButtonClick).toHaveBeenCalled();
+  });
+});

package/dist/index.cjs

@@ -3304,10 +3304,29 @@ var texts14 = createTexts({
 var ExternalIcon = ({
   label,
   size
-}) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-  size === "lg" || size === "md" ? /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.LinkOutOutline24Icon, { "aria-hidden": true, display: "inline" }) : /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.LinkOutOutline18Icon, { "aria-hidden": true, display: "inline" }),
-  /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: label })
-] });
+}) => {
+  const getIcon = () => {
+    switch (size) {
+      case "lg": {
+        return /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.LinkOutOutline30Icon, { "aria-hidden": true, display: "inline" });
+      }
+      case "md": {
+        return /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.LinkOutOutline24Icon, { "aria-hidden": true, display: "inline" });
+      }
+      case "sm": {
+        return /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.LinkOutOutline18Icon, { "aria-hidden": true, display: "inline" });
+      }
+      default: {
+        return /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.LinkOutOutline24Icon, { "aria-hidden": true, display: "inline" });
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { whiteSpace: "nowrap" }, children: [
+    "\u2060",
+    getIcon(),
+    /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: label })
+  ] });
+};
 var TextLink = ({
   ref,
   children,
@@ -3668,6 +3687,7 @@ function Autocomplete({
   openOnClick = true,
   openOnFocus = true,
   ref,
+  size = "md",
   ...rest
 }) {
   const { contains } = react.useFilter({ sensitivity: "base" });
@@ -3726,7 +3746,8 @@ function Autocomplete({
             onFocus == null ? void 0 : onFocus(event);
             if (openOnFocus && filteredChildren.length > 0)
               combobox.setOpen(true);
-          }
+          },
+          size
         }
       ) }),
       /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.IndicatorGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.ClearTrigger, { asChild: true, "aria-label": t(texts16.clearValue), children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { size: "xs", tabIndex: 0 }) }) })
@@ -6699,31 +6720,38 @@ var createToast = ({
   duration = 6e3,
   width = "sm",
   action,
-  closable = false
+  closable = false,
+  inverted = false
 }) => toaster.create({
   description: text,
   type: variant,
   id: id ?? crypto.randomUUID(),
   duration,
   action,
-  meta: { width },
+  meta: { width, inverted },
   closable
 });
 var Toaster = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Toaster, { toaster, insetInline: { mdDown: "4" }, children: (toast) => {
-    var _a6;
+    var _a6, _b5;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       react.Toast.Root,
       {
         width: { md: (_a6 = toast.meta) == null ? void 0 : _a6.width },
-        border: "sm",
-        borderColor: `outline.${toast.type}`,
-        boxShadow: "sm",
+        "data-inverted": ((_b5 = toast.meta) == null ? void 0 : _b5.inverted) ? "" : void 0,
         role: "alert",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(AlertIcon, { variant: toast.type }),
           /* @__PURE__ */ jsxRuntime.jsx(react.Stack, { gap: "1", flex: "1", maxWidth: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(react.Toast.Description, { children: toast.description }) }),
-          toast.action && /* @__PURE__ */ jsxRuntime.jsx(react.Toast.ActionTrigger, { onClick: toast.action.onClick, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "xs", children: toast.action.label }) }),
+          toast.action && /* @__PURE__ */ jsxRuntime.jsx(react.Toast.ActionTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "xs",
+              onClick: toast.action.onClick,
+              children: toast.action.label
+            }
+          ) }),
           toast.closable && /* @__PURE__ */ jsxRuntime.jsx(react.Toast.CloseTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { size: "xs" }) })
         ]
       }
@@ -7395,6 +7423,10 @@ var inputRecipe = react.defineRecipe({
         _focus: {
           outline: "2px solid",
           outlineColor: "outline.focus"
+        },
+        "&:-webkit-autofill, &:-webkit-autofill:focus": {
+          boxShadow: "0 0 0 1000px var(--spor-colors-surface-info-hover) inset",
+          WebkitTextFillColor: "var(--spor-colors-text)"
         }
       },
       floating: {
@@ -7414,6 +7446,10 @@ var inputRecipe = react.defineRecipe({
         focus: {
           outline: "1px solid",
           outlineColor: "outline.focus"
+        },
+        "&:-webkit-autofill, &:-webkit-autofill:focus": {
+          boxShadow: "0 0 0 1000px var(--spor-colors-surface-info-hover) inset",
+          WebkitTextFillColor: "var(--spor-colors-text)"
         }
       }
     },
@@ -7587,13 +7623,14 @@ var separatorRecipe = react.defineRecipe({
         borderStyle: "solid"
       },
       dashed: {
+        "--dash-color": "var(--spor-colors-outline)",
         borderImageSlice: 1,
         borderImageSource: `repeating-linear-gradient(
             var(--gradient-direction),
-            var(--spor-colors-outline-disabled) 0,
-            var(--spor-colors-outline-disabled) var(--dash-size),
+            var(--dash-color) 0,
+            var(--dash-color) var(--dash-size),
             transparent var(--dash-size),
-            transparent calc(var(--dash-size) + var(--dash-gap))
+            transparent calc(var(--dash-size) + var(--dash-gap))         
           )`
       }
     },
@@ -10367,7 +10404,7 @@ var inputChipSlotRecipe = react.defineSlotRecipe({
         root: {
           fontSize: "desktop.xs",
           paddingX: "1.5",
-          paddingY: "0",
+          height: 5,
           fontWeight: "normal",
           borderRadius: "xs"
         }
@@ -10376,17 +10413,16 @@ var inputChipSlotRecipe = react.defineSlotRecipe({
         root: {
           fontSize: "desktop.sm",
           paddingX: "2",
-          paddingY: "0.5",
+          height: 6,
           fontWeight: "bold",
           borderRadius: "9px"
         }
       },
       md: {
         root: {
-          padding: 5,
           fontSize: "desktop.md",
           paddingX: "2",
-          paddingY: "1",
+          height: 7,
           fontWeight: "bold",
           borderRadius: "sm"
         }
@@ -10395,7 +10431,7 @@ var inputChipSlotRecipe = react.defineSlotRecipe({
         root: {
           fontSize: "desktop.md",
           paddingX: "2",
-          paddingY: "3",
+          height: "8",
           fontWeight: "bold",
           borderRadius: "md"
         }
@@ -12292,6 +12328,7 @@ var toastSlotRecipe = react.defineSlotRecipe({
       translate: "var(--x) var(--y)",
       opacity: "var(--opacity)",
       willChange: "translate, opacity, scale",
+      outline: "1px solid",
       borderRadius: "sm",
       transition: "translate 400ms, scale 400ms, opacity 400ms, height 400ms, box-shadow 200ms",
       transitionTimingFunction: "cubic-bezier(0.21, 1.02, 0.73, 1)",
@@ -12299,16 +12336,52 @@ var toastSlotRecipe = react.defineSlotRecipe({
         transition: "translate 400ms, scale 400ms, opacity 200ms",
         transitionTimingFunction: "cubic-bezier(0.06, 0.71, 0.55, 1)"
       },
-      boxShadow: "xl",
+      boxShadow: "sm",
       color: "text",
       "&[data-type=success]": {
-        backgroundColor: "surface.success"
+        backgroundColor: "surface.success",
+        outlineColor: "outline.success"
       },
       "&[data-type=error]": {
-        backgroundColor: "surface.critical"
+        backgroundColor: "surface.critical",
+        outlineColor: "outline.critical"
       },
       "&[data-type=info]": {
-        backgroundColor: "surface.info"
+        backgroundColor: "surface.info",
+        outlineColor: "outline.info"
+      },
+      "&[data-inverted][data-type=success]": {
+        backgroundColor: { _light: "darkTeal", _dark: "seaMist" },
+        color: { _light: "mint", _dark: "jungle" },
+        outlineColor: { _light: "greenHaze", _dark: "coralGreen" },
+        "& path:first-of-type": {
+          fill: { _light: "mint", _dark: "jungle" }
+        },
+        "& path:not(:first-of-type)": {
+          fill: { _light: "darkTeal", _dark: "seaMist" }
+        }
+      },
+      "&[data-inverted][data-type=error]": {
+        backgroundColor: { _light: "burgundy", _dark: "lightRed" },
+        color: { _light: "pink", _dark: "maroon" },
+        outlineColor: { _light: "crimson", _dark: "salmon" },
+        "& path:first-of-type": {
+          fill: { _light: "pink", _dark: "maroon" }
+        },
+        "& path:not(:first-of-type)": {
+          fill: { _light: "burgundy", _dark: "lightRed" }
+        }
+      },
+      "&[data-inverted][data-type=info]": {
+        backgroundColor: { _light: "darkBlue", _dark: "lightBlue" },
+        color: { _light: "icyBlue", _dark: "royal" },
+        outlineColor: { _light: "ocean", _dark: "cloudy" },
+        "& path:first-of-type": {
+          fill: { _light: "icyBlue", _dark: "navy" }
+        },
+        "& path:not(:first-of-type)": {
+          fill: { _light: "darkBlue", _dark: "lightBlue" }
+        }
       }
     },
     title: {