@vygruppen/spor-react 13.0.3 → 13.1.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "13.0.3",
+  "version": "13.1.1",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -39,6 +39,7 @@
     "awesome-phonenumber": "^5.11.0",
     "deepmerge": "^4.3.1",
     "framer-motion": "^11.11.17",
+    "jscodeshift": "^17.3.0",
     "lottie-react": "^2.4.1",
     "next-themes": "^0.4.4",
     "react-aria": "^3.33.1",
@@ -46,15 +47,13 @@
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
-    "@vygruppen/spor-design-tokens": "4.3.3",
-    "@vygruppen/spor-loader": "0.7.0",
-    "@vygruppen/spor-icon-react": "5.0.0"
+    "@vygruppen/spor-design-tokens": "5.0.1",
+    "@vygruppen/spor-icon-react": "5.0.0",
+    "@vygruppen/spor-loader": "0.7.0"
   },
   "devDependencies": {
     "@react-types/datepicker": "^3.10.0",
     "@react-types/shared": "^3.27.0",
-    "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "^14.3.1",
     "@types/node": "^22.13.4",
     "@types/react": "19.2.3",
     "@types/react-dom": "19.2.3",
@@ -65,10 +64,7 @@
     "react-dom": "19.2.3",
     "tsup": "^7.2.0",
     "typescript": "^5.7.3",
-    "vitest": "^0.26.3",
-    "vitest-axe": "^0.1.0",
-    "vitest-canvas-mock": "^0.2.2",
-    "@vygruppen/eslint-config": "2.1.0",
+    "@vygruppen/eslint-config": "2.2.0",
     "@vygruppen/tsconfig": "0.1.1"
   },
   "peerDependencies": {

package/src/alert/AlertIcon.tsx

@@ -48,10 +48,10 @@ export const BaseAlertIcon = ({
 }) => {
   const css = {
     "& path:first-of-type": {
-      fill: `alert.${variant}.icon`,
+      fill: `icon.${variant}`,
     },
     "& path:not(:first-of-type)": {
-      fill: `alert.${variant}.surface`,
+      fill: `surface.${variant}`,
     },
   };
 

package/src/alert/ServiceAlert.tsx

@@ -87,6 +87,7 @@ export const ServiceAlert = ({
       css={{ ...styles.root, ...css }}
       ref={ref}
       {...rest}
+      className="light"
     >
       <Accordion.Item value={defaultValue}>
         <Accordion.ItemTrigger css={styles.itemTrigger}>
@@ -122,7 +123,7 @@ export const ServiceAlert = ({
                 </Text>
               )}
               <Accordion.ItemIndicator>
-                <DropdownDownFill24Icon color="icon.inverted" />
+                <DropdownDownFill24Icon color="icon.brand" />
               </Accordion.ItemIndicator>
             </Flex>
           </HStack>

package/src/calendar/CalendarCell.tsx

@@ -103,18 +103,18 @@ const cellStyles = {
   },
   // Selection edge (single-mode selected OR range start/end)
   "&[data-edge]": {
-    backgroundColor: "brand.surface",
-    color: "text.inverted",
+    backgroundColor: "surface.brand",
+    color: "text.brand",
   },
   // Range middle
   "&[data-middle]": {
-    backgroundColor: "surface.secondary",
+    backgroundColor: "surface.subtle",
     color: "text",
   },
   // Hover for non-selected, non-disabled cells on devices that support hover
   "@media (hover: hover)": {
     "&:not([data-edge]):not([data-middle]):not([data-disabled]):hover": {
-      backgroundColor: "surface.secondary",
+      backgroundColor: "surface.subtle",
       color: "text",
     },
   },

package/src/datepicker/CalendarHeader.tsx

@@ -116,7 +116,7 @@ export const CalendarNavigator = ({
         fontWeight="bold"
         flex="1"
         textAlign="center"
-        color="core.text"
+        color="text.core"
       >
         {capitalize(title)}
       </Text>

package/src/dialog/Drawer.tsx

@@ -115,7 +115,7 @@ export const CloseDrawerLine = ({
       top={0}
       marginY={2}
       marginX="auto"
-      backgroundColor="floating.outline.active"
+      backgroundColor="outline.neutral"
       borderRadius="xs"
       {...props}
       ref={ref}

package/src/input/CardSelect.tsx

@@ -33,7 +33,7 @@ export const CardSelectContent = ({
               p="2"
               bg="bg"
               border="sm"
-              borderColor="floating.outline"
+              borderColor="outline.floating"
               borderRadius="sm"
               {...props}
             >
@@ -61,9 +61,9 @@ export type CardSelectTriggerProps = {
 } & Omit<ButtonProps, "variant" | "rightIcon" | "leftIcon">;
 
 const bgActiveStyleMap = {
-  core: "core.surface.active",
-  ghost: "ghost.surface.active",
-  floating: "floating.surface.active",
+  core: "surface.core.active",
+  ghost: "surface.ghost.active",
+  floating: "surface.floating.active",
 };
 
 export const CardSelectTrigger = ({

package/src/input/Combobox.tsx

@@ -185,7 +185,7 @@ export const Combobox = (props: ComboboxProps<object>) => {
         borderBottomRightRadius={
           state.isOpen && !loading ? 0 : borderBottomRightRadius
         }
-        _active={{ backgroundColor: "core.surface.active" }}
+        _active={{ backgroundColor: "surface.core.active" }}
         {...filteredInputProps}
         startElement={leftIcon}
         endElement={

package/src/input/Field.tsx

@@ -140,7 +140,7 @@ export const Field = ({
         )}
       </ChakraField.Root>
       {helperText && (
-        <Text variant="sm" color="text.tertiary">
+        <Text variant="sm" color="text.subtle">
           {helperText}
         </Text>
       )}

package/src/input/Menu.tsx

@@ -74,7 +74,8 @@ export const MenuContent = ({
 
 export type MenuTriggerProps = {
   icon?: ReactNode;
-} & Omit<ButtonProps, "variant" | "rightIcon" | "leftIcon"> & {
+  withChevron?: boolean;
+} & Omit<ButtonProps, "rightIcon" | "leftIcon"> & {
     ref?: Ref<HTMLButtonElement>;
   };
 
@@ -83,6 +84,7 @@ export const MenuTrigger = ({
   size,
   children,
   ref,
+  withChevron = true,
   ...props
 }: MenuTriggerProps) => {
   const { variant } = useMenuContext();
@@ -104,10 +106,12 @@ export const MenuTrigger = ({
         size={size}
         {...props}
         rightIcon={
-          <ChevronIcon
-            transform={open ? "rotate(180deg)" : undefined}
-            transition="transform 0.3s"
-          />
+          withChevron && (
+            <ChevronIcon
+              transform={open ? "rotate(180deg)" : undefined}
+              transition="transform 0.3s"
+            />
+          )
         }
       >
         {children}

package/src/input/Popover.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { Box } from "@chakra-ui/react";
-import React, { useRef } from "react";
+import React, { useLayoutEffect, useRef } from "react";
 import {
   AriaPopoverProps,
   DismissButton,
@@ -75,6 +75,13 @@ export const Popover = ({
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const popoverRef = ref ?? (internalRef as any);
 
+  useLayoutEffect(() => {
+    const element = typeof popoverRef === "object" ? popoverRef?.current : null;
+    if (element) {
+      element.style.minWidth = `${triggerRef.current?.clientWidth ?? 0}px`;
+    }
+  });
+
   const { popoverProps, underlayProps } = usePopover(
     {
       triggerRef,
@@ -90,12 +97,7 @@ export const Popover = ({
   );
 
   const popoverBox = (
-    <Box
-      {...popoverProps}
-      ref={popoverRef}
-      // eslint-disable-next-line react-hooks/refs
-      minWidth={triggerRef.current?.clientWidth ?? "auto"}
-    >
+    <Box {...popoverProps} ref={popoverRef}>
       <DismissButton onDismiss={state.close} />
       {children}
       <DismissButton onDismiss={state.close} />

package/src/linjetag/LineIcon.tsx

@@ -108,7 +108,7 @@ export const LineIcon = function LineIcon({
       css={{ ...styles.iconContainer, ...style }}
       padding={targetPadding()}
       borderWidth={borderContainer()}
-      borderColor={variant === "walk" ? "core.outline" : "transparent"}
+      borderColor={variant === "walk" ? "outline.core" : "transparent"}
       aria-label={label}
       ref={ref}
       className={clsx("light", rest.className)}

package/src/loader/ColorInlineLoader.tsx

@@ -8,6 +8,7 @@ import {
 import { inlineLoaderColorData } from "@vygruppen/spor-loader";
 
 import Lottie from "./Lottie";
+import { useGetLoadingText } from "./text";
 
 export type ColorInlineLoaderProps = Exclude<BoxProps, "children">;
 /**
@@ -27,7 +28,7 @@ export const ColorInlineLoader = ({
           <Lottie animationData={inlineLoaderColorData} />
         </ClientOnly>
       </Box>
-      <VisuallyHidden>Loading...</VisuallyHidden>
+      <VisuallyHidden>{useGetLoadingText()}</VisuallyHidden>
     </Center>
   );
 };

package/src/loader/ColorSpinner.tsx

@@ -9,6 +9,7 @@ import {
 import { spinnerColorData } from "@vygruppen/spor-loader";
 
 import Lottie from "./Lottie";
+import { useGetLoadingText } from "./text";
 
 export type SpinnerProps = BoxProps;
 export type ColorSpinnerProps = SpinnerProps;
@@ -40,7 +41,7 @@ export const ColorSpinner = ({
           <Lottie animationData={spinnerColorData} />
         </ClientOnly>
       </Box>
-      <VisuallyHidden>Loading...</VisuallyHidden>
+      <VisuallyHidden>{useGetLoadingText()}</VisuallyHidden>
       {children && (
         <Box marginTop={3} fontWeight="bold">
           {children}

package/src/loader/ContentLoader.tsx

@@ -3,6 +3,7 @@ import { Box, BoxProps, ClientOnly, VisuallyHidden } from "@chakra-ui/react";
 import { contentLoaderData } from "@vygruppen/spor-loader";
 
 import Lottie from "./Lottie";
+import { useGetLoadingText } from "./text";
 
 export type ContentLoaderProps = BoxProps;
 /**
@@ -17,7 +18,7 @@ export const ContentLoader = ({ children, ...props }: ContentLoaderProps) => {
           <Lottie animationData={contentLoaderData} />
         </ClientOnly>
       </Box>
-      <VisuallyHidden>Loading...</VisuallyHidden>
+      <VisuallyHidden>{useGetLoadingText()}</VisuallyHidden>
       {children && (
         <Box textAlign="center" fontWeight="bold">
           {children}

package/src/loader/DarkFullScreenLoader.tsx

@@ -9,6 +9,7 @@ import {
 import { fullScreenLoaderWhiteData } from "@vygruppen/spor-loader";
 
 import Lottie from "./Lottie";
+import { useGetLoadingText } from "./text";
 
 type DarkFullScreenLoaderProps = BoxProps;
 
@@ -31,7 +32,7 @@ export const DarkFullScreenLoader = ({
           <Lottie animationData={fullScreenLoaderWhiteData} />
         </ClientOnly>
       </Box>
-      <VisuallyHidden>Loading...</VisuallyHidden>
+      <VisuallyHidden>{useGetLoadingText()}</VisuallyHidden>
     </Center>
   );
 };

package/src/loader/DarkInlineLoader.tsx

@@ -9,6 +9,7 @@ import {
 import { inlineLoaderDarkData } from "@vygruppen/spor-loader";
 
 import Lottie from "./Lottie";
+import { useGetLoadingText } from "./text";
 
 export type DarkInlineLoaderProps = Exclude<BoxProps, "children">;
 /**
@@ -26,7 +27,7 @@ export const DarkInlineLoader = ({
           <Lottie animationData={inlineLoaderDarkData} />
         </ClientOnly>
       </Box>
-      <VisuallyHidden>Loading...</VisuallyHidden>
+      <VisuallyHidden>{useGetLoadingText()}</VisuallyHidden>
     </Center>
   );
 };

package/src/loader/DarkSpinner.tsx

@@ -10,6 +10,7 @@ import {
   VisuallyHidden,
 } from "..";
 import Lottie from "./Lottie";
+import { useGetLoadingText } from "./text";
 
 export type DarkSpinnerProps = BoxProps;
 /** A circular spinner
@@ -42,7 +43,7 @@ export const DarkSpinner = ({
           <Lottie animationData={spinnerData} />
         </ClientOnly>
       </Box>
-      <VisuallyHidden>Loading...</VisuallyHidden>
+      <VisuallyHidden>{useGetLoadingText()}</VisuallyHidden>
       {children && (
         <Box marginTop={3} fontWeight="bold">
           {children}

package/src/loader/LightFullScreenLoader.tsx

@@ -9,6 +9,7 @@ import {
 import { fullScreenLoaderBlackData } from "@vygruppen/spor-loader";
 
 import Lottie from "./Lottie";
+import { useGetLoadingText } from "./text";
 
 type LightFullScreenLoaderProps = BoxProps;
 
@@ -24,7 +25,7 @@ export const LightFullScreenLoader = ({
           <Lottie animationData={fullScreenLoaderBlackData} />
         </ClientOnly>
       </Box>
-      <VisuallyHidden>Loading...</VisuallyHidden>
+      <VisuallyHidden>{useGetLoadingText()}</VisuallyHidden>
     </Center>
   );
 };

package/src/loader/LightInlineLoader.tsx

@@ -9,6 +9,7 @@ import {
 import { inlineLoaderLightData } from "@vygruppen/spor-loader";
 
 import Lottie from "./Lottie";
+import { useGetLoadingText } from "./text";
 
 export type LightInlineLoaderProps = Exclude<BoxProps, "children">;
 /**
@@ -26,7 +27,7 @@ export const LightInlineLoader = ({
           <Lottie animationData={inlineLoaderLightData} />
         </ClientOnly>
       </Box>
-      <VisuallyHidden>Loading...</VisuallyHidden>
+      <VisuallyHidden>{useGetLoadingText()}</VisuallyHidden>
     </Center>
   );
 };

package/src/loader/LightSpinner.tsx

@@ -9,6 +9,7 @@ import {
 import { spinnerLightData } from "@vygruppen/spor-loader";
 
 import Lottie from "./Lottie";
+import { useGetLoadingText } from "./text";
 
 export type LightSpinnerProps = BoxProps;
 /** A circular spinner
@@ -39,7 +40,7 @@ export const LightSpinner = ({
           <Lottie animationData={spinnerLightData} />
         </ClientOnly>
       </Box>
-      <VisuallyHidden>Loading...</VisuallyHidden>
+      <VisuallyHidden>{useGetLoadingText()}</VisuallyHidden>
       {children && (
         <Box marginTop={3} fontWeight="bold">
           {children}

package/src/loader/Lottie.tsx

@@ -1,8 +1,9 @@
-import ReactLottie from "lottie-react";
+import { useLottie } from "lottie-react";
 
 /**
  * A wrapper around Lottie to make it tree-shakeable for SSR.
  */
 export default function Lottie({ animationData }: { animationData: unknown }) {
-  return <ReactLottie animationData={animationData} />;
+  const { View } = useLottie({ animationData });
+  return View;
 }

package/src/loader/text.ts

@@ -0,0 +1,15 @@
+import { createTexts, useTranslation } from "@/i18n";
+
+export const useGetLoadingText = () => {
+  const { t } = useTranslation();
+  return t(loadingText.loading);
+};
+
+const loadingText = createTexts({
+  loading: {
+    en: "Loading",
+    nb: "Laster",
+    nn: "Lastar",
+    sv: "Laddar",
+  },
+});

package/src/stepper/StepperStep.tsx

@@ -23,8 +23,8 @@ export const StepperStep = ({
   const state = getState(stepNumber, activeStep);
   const recipe = useSlotRecipe({ key: "stepper" });
   const style = recipe({ variant });
-  const disabledTextColor = "text.tertiary";
-  const iconColor = "text.tertiary";
+  const disabledTextColor = "text.subtle";
+  const iconColor = "text.subtle";
 
   const disabled =
     (state !== "active" && disabledOverride) || state === "disabled";