@vygruppen/spor-react 13.6.0 → 13.7.1

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.1 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/icons/index.mjs     110.00 B
-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
+CJS dist/index.cjs           381.85 KB
 CJS dist/icons/index.cjs     381.00 B
+CJS dist/index.cjs.map       757.94 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 2364ms
+ESM dist/index.mjs           357.12 KB
+ESM dist/icons/index.mjs     110.00 B
+ESM dist/index.mjs.map       757.94 KB
+ESM dist/icons/index.mjs.map 157.00 B
+ESM ⚡️ Build success in 2366ms
+DTS ⚡️ Build success in 21092ms
 DTS dist/icons/index.d.ts  44.00 B
-DTS dist/index.d.ts        155.16 KB
+DTS dist/index.d.ts        156.60 KB
 DTS dist/icons/index.d.cts 44.00 B
-DTS dist/index.d.cts       155.16 KB
+DTS dist/index.d.cts       156.60 KB

package/.turbo/turbo-postinstall.log

@@ -1,12 +1,11 @@
 
-> @vygruppen/spor-react@13.6.0 postinstall /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@13.7.1 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: ◈ encrypted .env [www.dotenvx.com]
 ┌  Chakra CLI ⚡️
 [?25l│
-◒  Generating conditions types...
-◇  ✅ Generated conditions typings
+◇  ✅ Generated conditions typings
 [?25h[?25l│
 ◒  Generating recipe types...
 ◇  ✅ Generated recipe typings

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @vygruppen/spor-react
 
+## 13.7.1
+
+### Patch Changes
+
+- 15a6c48: Badge: Added outline on badges
+- e4c369c: truncate long select labels when selected
+- ac7ec72: Remove aria-hidden property from Field component to support better screen reading of form elements.
+- 1272e1d: RadioCard bug: make the children of a RadioCard to by default be placed in a column instead of a row.
+- Updated dependencies [1272e1d]
+  - @vygruppen/spor-icon-react@5.0.3
+
+## 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

@@ -692,58 +692,70 @@ var badgeRecipie = react.defineRecipe({
     alignItems: "center",
     justifyContent: "center",
     height: "fit-content",
-    gap: "0.5"
+    gap: "0.5",
+    outline: "1px solid",
+    outlineOffset: "-1px"
   },
   variants: {
     colorPalette: {
       neutral: {
         backgroundColor: "surface",
         color: "text",
+        outlineColor: "outline",
         "& svg": { color: "icon" }
       },
       grey: {
         backgroundColor: "surface.neutral",
         color: "text.neutral",
+        outlineColor: "outline.neutral",
         "& svg": { color: "icon.neutral" }
       },
       green: {
         backgroundColor: "surface.success",
         color: "text.success",
+        outlineColor: "outline.success",
         "& svg": { color: "icon.success" }
       },
       blue: {
         backgroundColor: "surface.info",
         color: "text.info",
+        outlineColor: "outline.info",
         "& svg": { color: "icon.info" }
       },
       cream: {
         backgroundColor: "surface.warning",
         color: "text.warning",
+        outlineColor: "outline.warning",
         "& svg": { color: "icon.warning" }
       },
       yellow: {
         backgroundColor: "surface.notice",
         color: "text.notice",
+        outlineColor: "outline.notice",
         "& svg": { color: "icon.notice" }
       },
       orange: {
         backgroundColor: "surface.caution",
         color: "text.caution",
+        outlineColor: "outline.caution",
         "& svg": { color: "icon.caution" }
       },
       red: {
         backgroundColor: "surface.critical",
         color: "text.critical",
+        outlineColor: "outline.critical",
         "& svg": { color: "icon.critical" }
       },
       brightRed: {
         backgroundColor: { _light: "brightRed", _dark: "brightRed" },
         color: { _light: "pink", _dark: "pink" },
+        outlineColor: "outline.error",
         "& svg": { color: { _light: "pink", _dark: "pink" } }
       },
       disabled: {
         backgroundColor: "surface.disabled",
         color: "text.disabled",
+        outlineColor: "outline.disabled",
         "& svg": { color: "icon.disabled" }
       }
     },
@@ -786,6 +798,7 @@ var badgeRecipie = react.defineRecipe({
       css: {
         backgroundColor: { _light: "darkBlue", _dark: "lightBlue" },
         color: { _light: "icyBlue", _dark: "royal" },
+        outlineColor: { _light: "ocean", _dark: "cloudy" },
         "& svg": { color: { _light: "royal", _dark: "icyBlue" } }
       }
     },
@@ -795,6 +808,7 @@ var badgeRecipie = react.defineRecipe({
       css: {
         backgroundColor: { _light: "darkTeal", _dark: "seaMist" },
         color: { _light: "mint", _dark: "jungle" },
+        outlineColor: { _light: "greenHaze", _dark: "coralGreen" },
         "& svg": { color: { _light: "mint", _dark: "jungle" } }
       }
     },
@@ -804,6 +818,7 @@ var badgeRecipie = react.defineRecipe({
       css: {
         backgroundColor: { _light: "carbon", _dark: "platinum" },
         color: { _light: "white", _dark: "darkGrey" },
+        outlineColor: { _light: "iron", _dark: "silver" },
         "& svg": { color: { _light: "white", _dark: "darkGrey" } }
       }
     },
@@ -814,6 +829,7 @@ var badgeRecipie = react.defineRecipe({
       css: {
         backgroundColor: { _light: "coffee", _dark: "blonde" },
         color: { _light: "cornsilk", _dark: "coffee" },
+        outlineColor: { _light: "bronze", _dark: "banana" },
         "& svg": { color: { _light: "cornsilk", _dark: "coffee" } }
       }
     },
@@ -823,6 +839,7 @@ var badgeRecipie = react.defineRecipe({
       css: {
         backgroundColor: { _light: "bronze", _dark: "banana" },
         color: { _light: "cornsilk", _dark: "coffee" },
+        outlineColor: { _light: "golden", _dark: "banana" },
         "& svg": { color: { _light: "cornsilk", _dark: "coffee" } }
       }
     },
@@ -832,6 +849,7 @@ var badgeRecipie = react.defineRecipe({
       css: {
         backgroundColor: { _light: "wood", _dark: "champagne" },
         color: { _light: "bisque", _dark: "wood" },
+        outlineColor: { _light: "russet", _dark: "saffron" },
         "& svg": { color: { _light: "bisque", _dark: "wood" } }
       }
     },
@@ -841,6 +859,7 @@ var badgeRecipie = react.defineRecipe({
       css: {
         backgroundColor: { _light: "burgundy", _dark: "lightRed" },
         color: { _light: "pink", _dark: "maroon" },
+        outlineColor: { _light: "crimson", _dark: "salmon" },
         "& svg": { color: { _light: "pink", _dark: "maroon" } }
       }
     },
@@ -850,6 +869,7 @@ var badgeRecipie = react.defineRecipe({
       inverted: true,
       css: {
         backgroundColor: { _light: "ink", _dark: "white" },
+        outlineColor: { _light: "whiteAlpha.400", _dark: "blackAlpha.400" },
         color: { _light: "white", _dark: "darkGrey" },
         "& svg": { color: { _light: "white", _dark: "darkGrey" } }
       }
@@ -1590,7 +1610,7 @@ var RadioCard = ({
     ),
     /* @__PURE__ */ jsxRuntime.jsxs(react.RadioCard.ItemControl, { id: itemControlId, "aria-hidden": true, children: [
       showIndicator && /* @__PURE__ */ jsxRuntime.jsx(react.RadioCard.ItemIndicator, {}),
-      children
+      /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { direction: "column", children })
     ] })
   ] });
 };
@@ -2108,18 +2128,17 @@ var Field3 = ({
         id,
         gap,
         children: [
-          label && !floatingLabel && /* @__PURE__ */ jsxRuntime.jsx(Label, { asChild: labelAsChild, "aria-hidden": true, css: styles.label, children: renderLabelWithIndicator(label, labelAsChild) }),
-          children,
+          label && !floatingLabel && /* @__PURE__ */ jsxRuntime.jsx(Label, { asChild: labelAsChild, css: styles.label, children: renderLabelWithIndicator(label, labelAsChild) }),
           label && floatingLabel && /* @__PURE__ */ jsxRuntime.jsx(
             FloatingLabel,
             {
               "data-float": shouldFloat ? true : void 0,
               asChild: labelAsChild,
-              "aria-hidden": true,
               css: styles.label,
               children: renderLabelWithIndicator(label, labelAsChild)
             }
           ),
+          children,
           errorText && /* @__PURE__ */ jsxRuntime.jsx(react.Field.ErrorText, { "aria-live": "polite", children: errorText })
         ]
       }
@@ -3304,10 +3323,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 +3706,7 @@ function Autocomplete({
   openOnClick = true,
   openOnFocus = true,
   ref,
+  size = "md",
   ...rest
 }) {
   const { contains } = react.useFilter({ sensitivity: "base" });
@@ -3726,7 +3765,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 +6739,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 +7442,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 +7465,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 +7642,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 +10423,7 @@ var inputChipSlotRecipe = react.defineSlotRecipe({
         root: {
           fontSize: "desktop.xs",
           paddingX: "1.5",
-          paddingY: "0",
+          height: 5,
           fontWeight: "normal",
           borderRadius: "xs"
         }
@@ -10376,17 +10432,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 +10450,7 @@ var inputChipSlotRecipe = react.defineSlotRecipe({
         root: {
           fontSize: "desktop.md",
           paddingX: "2",
-          paddingY: "3",
+          height: "8",
           fontWeight: "bold",
           borderRadius: "md"
         }
@@ -11552,6 +11607,11 @@ var selectSlotRecipe = react.defineSlotRecipe({
         outlineColor: "outline.error"
       }
     },
+    valueText: {
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      overflow: "hidden"
+    },
     itemText: {
       flex: "1",
       alignItems: "center"
@@ -12292,6 +12352,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 +12360,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: {