@vygruppen/spor-react 13.0.2 → 13.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "13.0.2",
+  "version": "13.1.0",
   "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-design-tokens": "5.0.0",
     "@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/InputChip.tsx

@@ -0,0 +1,33 @@
+import { Box, Tag as ChakraTag, TagRootProps } from "@chakra-ui/react";
+import { IconComponent } from "@vygruppen/spor-icon-react";
+import React from "react";
+
+export type InputChipProps = TagRootProps & {
+  startIcon?: IconComponent;
+  endIcon?: IconComponent;
+  onClick?: VoidFunction;
+};
+
+export const InputChip = ({
+  startIcon,
+  endIcon,
+  children,
+  ref,
+  ...rest
+}: InputChipProps & { ref?: React.Ref<HTMLDivElement> }) => {
+  return (
+    <ChakraTag.Root ref={ref} {...rest} as="button">
+      {startIcon && (
+        <ChakraTag.StartElement>
+          <Box as={startIcon} />
+        </ChakraTag.StartElement>
+      )}
+      <ChakraTag.Label>{children}</ChakraTag.Label>
+      {endIcon && (
+        <ChakraTag.EndElement>
+          <Box as={endIcon} />
+        </ChakraTag.EndElement>
+      )}
+    </ChakraTag.Root>
+  );
+};

package/src/input/PasswordInput.tsx

@@ -16,7 +16,8 @@ export interface PasswordVisibilityProps {
 }
 
 export interface PasswordInputProps
-  extends InputProps, PasswordVisibilityProps {
+  extends InputProps,
+    PasswordVisibilityProps {
   rootProps?: InputProps;
 }
 

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/input/Select.tsx

@@ -8,6 +8,8 @@ import type {
 } from "@chakra-ui/react";
 import {
   Box,
+  Checkbox as ChakraCheckbox,
+  Flex,
   Portal,
   Select as ChakraSelect,
   useSelectContext,
@@ -21,6 +23,7 @@ import * as React from "react";
 
 import { CloseButton } from "@/button";
 
+import { Badge } from "..";
 import { Field, FieldProps } from "./Field";
 
 export type SelectProps = ChakraSelectRootProps &
@@ -95,7 +98,7 @@ export const Select = ({
         position="relative"
       >
         <SelectTrigger data-attachable>
-          <SelectValueText withPlaceholder={label ? true : false} />
+          <SelectValueText withPlaceholder={!!label} />
         </SelectTrigger>
         {label && <SelectLabel css={styles.label}>{label}</SelectLabel>}
         <SelectContent css={styles.selectContent} baseStyle={css}>
@@ -112,7 +115,7 @@ export const SelectLabel = (props: SelectLabelProps) => {
   return (
     <ChakraSelect.Label
       {...props}
-      data-selected={value.length > 0 ? true : undefined}
+      data-selected={value.length > 0 || undefined}
     />
   );
 };
@@ -131,8 +134,19 @@ export const SelectItem = ({
   const { item, children, description, ...rest } = props;
   const recipe = useSlotRecipe({ key: "select" });
   const styles = recipe();
+  const selectContext = useSelectContext();
+  const multiple = selectContext.multiple;
+  const isSelected = selectContext.value.includes(item.value);
+
   return (
     <ChakraSelect.Item item={item} {...rest} ref={ref} css={styles.item}>
+      {multiple && (
+        <ChakraCheckbox.Root checked={isSelected} pointerEvents="none">
+          <ChakraCheckbox.Control>
+            <ChakraCheckbox.Indicator />
+          </ChakraCheckbox.Control>
+        </ChakraCheckbox.Root>
+      )}
       <Box width="100%">
         <ChakraSelect.ItemText display="flex">{children}</ChakraSelect.ItemText>
         {description && (
@@ -142,12 +156,15 @@ export const SelectItem = ({
         )}
       </Box>
 
-      <ChakraSelect.ItemIndicator>
-        <CheckmarkFill18Icon />
-      </ChakraSelect.ItemIndicator>
+      {!multiple && (
+        <ChakraSelect.ItemIndicator>
+          <CheckmarkFill18Icon />
+        </ChakraSelect.ItemIndicator>
+      )}
     </ChakraSelect.Item>
   );
 };
+SelectItem.displayName = "SelectItem";
 
 type SelectItemGroupProps = ChakraSelect.ItemGroupProps & {
   label: React.ReactNode;
@@ -249,6 +266,7 @@ type SelectValueTextProps = Omit<ChakraSelect.ValueTextProps, "children"> & {
   children?(items: CollectionItem[]): React.ReactNode;
   placeholder?: string;
   withPlaceholder?: boolean;
+  multiple?: boolean;
 };
 
 export const SelectValueText = function SelectValueText({
@@ -258,6 +276,10 @@ export const SelectValueText = function SelectValueText({
   ref?: React.Ref<HTMLSpanElement>;
 }) {
   const { children, withPlaceholder, placeholder, ...rest } = props;
+
+  const selectContext = useSelectContext();
+  const multiple = selectContext.multiple;
+
   return (
     <ChakraSelect.ValueText
       {...rest}
@@ -277,9 +299,24 @@ export const SelectValueText = function SelectValueText({
           const items = select.selectedItems;
           if (items.length === 0) return placeholder;
           if (children) return children(items);
-          if (items.length === 1)
+          if (multiple) {
+            return (
+              <Flex gap={0.5} marginBottom={1}>
+                {items.map((item) => (
+                  <Badge
+                    key={select.collection.stringifyItem(item)}
+                    size="sm"
+                    colorPalette="green"
+                  >
+                    {select.collection.stringifyItem(item)}
+                  </Badge>
+                ))}
+              </Flex>
+            );
+          }
+          if (items.length === 1) {
             return select.collection.stringifyItem(items[0]);
-          return `${items.length} selected`;
+          }
         }}
       </ChakraSelect.Context>
     </ChakraSelect.ValueText>

package/src/input/index.ts

@@ -8,6 +8,7 @@ export * from "./Combobox";
 export * from "./Field";
 export * from "./Fieldset";
 export * from "./Input";
+export * from "./InputChip";
 export * from "./ListBox";
 export * from "./Menu";
 export * from "./NativeSelect";

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";