@vygruppen/spor-react 12.1.1 → 12.2.0

package/src/logo/VyLogoPride.tsx

@@ -1,5 +1,5 @@
 import { BoxProps } from "@chakra-ui/react";
-import React, { forwardRef, useId } from "react";
+import { forwardRef, useId } from "react";
 
 import { SvgBox } from "./VyLogo";
 
@@ -21,7 +21,9 @@ export const VyLogoPride = forwardRef<SVGSVGElement, VyLogoPrideProps>(
 
     const id = useId();
     return (
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       <SvgBox ref={ref} viewBox="0 0 107 54" {...(props as any)}>
+        {/* Find a way to not use any */}
         <title>Vy logo pride</title>
         <svg
           width="108"
@@ -161,3 +163,4 @@ export const VyLogoPride = forwardRef<SVGSVGElement, VyLogoPrideProps>(
     );
   },
 );
+VyLogoPride.displayName = "VyLogoPride";

package/src/media-controller/JumpButton.tsx

@@ -9,7 +9,7 @@ import {
   Backward15MediaControllerFill30Icon,
   Forward15MediaControllerFill30Icon,
 } from "@vygruppen/spor-icon-react";
-import React, { forwardRef, PropsWithChildren } from "react";
+import { forwardRef, PropsWithChildren } from "react";
 
 import { createTexts, useTranslation } from "..";
 import { mediaControllerSlotRecipe } from "../theme/slot-recipes/media-controller-button";
@@ -66,6 +66,7 @@ export const JumpButton = forwardRef<HTMLButtonElement, JumpButtonProps>(
     );
   },
 );
+JumpButton.displayName = "JumpButton";
 
 const texts = createTexts({
   forward: {

package/src/media-controller/PlayPauseButton.tsx

@@ -4,7 +4,7 @@ import {
   PauseMediaControllerFill24Icon,
   PlayMediaControllerFill24Icon,
 } from "@vygruppen/spor-icon-react";
-import React, { forwardRef, PropsWithChildren } from "react";
+import { forwardRef, PropsWithChildren } from "react";
 
 import { createTexts, MediaControllerVariantProps, useTranslation } from "..";
 
@@ -56,6 +56,7 @@ export const PlayPauseButton = forwardRef<
     </Center>
   );
 });
+PlayPauseButton.displayName = "PlayPauseButton";
 
 const texts = createTexts({
   pause: {

package/src/media-controller/SkipButton.tsx

@@ -4,7 +4,7 @@ import {
   NextMediaControllerFill30Icon,
   PreviousMediaControllerFill30Icon,
 } from "@vygruppen/spor-icon-react";
-import React, { forwardRef, PropsWithChildren } from "react";
+import { forwardRef, PropsWithChildren } from "react";
 
 import { createTexts, MediaControllerVariantProps, useTranslation } from "..";
 
@@ -54,6 +54,7 @@ export const SkipButton = forwardRef<HTMLButtonElement, SkipButtonProps>(
     );
   },
 );
+SkipButton.displayName = "SkipButton";
 
 const texts = createTexts({
   next: {

package/src/nudge/Nudge.tsx

@@ -1,9 +1,5 @@
 "use client";
-import {
-  PopoverCloseTrigger,
-  usePopover,
-  usePopoverContext,
-} from "@ark-ui/react";
+import { PopoverCloseTrigger, usePopoverContext } from "@ark-ui/react";
 import {
   Box,
   BoxProps,
@@ -16,7 +12,6 @@ import React, {
   forwardRef,
   PropsWithChildren,
   useEffect,
-  useRef,
   useState,
 } from "react";
 
@@ -56,12 +51,7 @@ export type NudgeProps = {
 } & PopoverRootProps;
 
 export const Nudge = (props: NudgeProps) => {
-  const {
-    introducedDate,
-    defaultOpen = props.open === undefined ? true : undefined, // defaultOpen defaults to true if open is undefined
-    size = "md",
-    ...rest
-  } = props;
+  const { introducedDate, size = "md", ...rest } = props;
 
   if (isNudgeExpired(introducedDate)) {
     logExpirationWarning();
@@ -77,6 +67,7 @@ export const NudgeTrigger = forwardRef<
 >(({ ...props }, ref) => {
   return <PopoverTrigger {...props} ref={ref} />;
 });
+NudgeTrigger.displayName = "NudgeTrigger";
 
 export const NudgeContent = forwardRef<HTMLDivElement, PopoverProps>(
   ({ showCloseButton = true, children, ...props }, ref) => {
@@ -104,7 +95,7 @@ export const NudgeContent = forwardRef<HTMLDivElement, PopoverProps>(
     const totalSteps = wizardPages.length;
     const isLastStep = totalSteps === currentStep;
 
-    if (!wizardPages.length) {
+    if (wizardPages.length === 0) {
       return (
         <PopoverContent showCloseButton={showCloseButton} {...props} ref={ref}>
           {children}
@@ -133,8 +124,9 @@ export const NudgeContent = forwardRef<HTMLDivElement, PopoverProps>(
     );
   },
 );
+NudgeContent.displayName = "NudgeContent";
 
-export const NudgeActions = ({ className, ...props }: BoxProps) => {
+export const NudgeActions = ({ ...props }: BoxProps) => {
   const { colorMode } = useColorMode();
 
   return (
@@ -216,3 +208,4 @@ export const NudgeCloseTrigger = forwardRef<
     </ChakraPopover.CloseTrigger>
   );
 });
+NudgeCloseTrigger.displayName = "NudgeCloseTrigger";

package/src/pagination/Pagination.tsx

@@ -60,6 +60,7 @@ export const Pagination = React.forwardRef<HTMLDivElement, PaginationRootProps>(
     );
   },
 );
+Pagination.displayName = "Pagination";
 
 export const PaginationEllipsis = React.forwardRef<
   HTMLDivElement,
@@ -73,6 +74,7 @@ export const PaginationEllipsis = React.forwardRef<
     </ListItem>
   );
 });
+PaginationEllipsis.displayName = "PaginationEllipsis";
 
 export const PaginationItem = React.forwardRef<
   HTMLButtonElement,
@@ -115,6 +117,7 @@ export const PaginationItem = React.forwardRef<
     </ListItem>
   );
 });
+PaginationItem.displayName = "PaginationItem";
 
 export const PaginationPrevTrigger = React.forwardRef<
   HTMLButtonElement,
@@ -163,6 +166,7 @@ export const PaginationPrevTrigger = React.forwardRef<
     </ListItem>
   );
 });
+PaginationPrevTrigger.displayName = "PaginationPrevTrigger";
 
 export const PaginationNextTrigger = React.forwardRef<
   HTMLButtonElement,
@@ -208,6 +212,7 @@ export const PaginationNextTrigger = React.forwardRef<
     </ListItem>
   );
 });
+PaginationNextTrigger.displayName = "PaginationNextTrigger";
 
 export const PaginationItems = (
   props: React.HTMLAttributes<HTMLElement> & {},

package/src/popover/index.tsx

@@ -24,6 +24,7 @@ export const PopoverTrigger = forwardRef<
     </ChakraPopover.Trigger>
   );
 });
+PopoverTrigger.displayName = "PopoverTrigger";
 
 export type PopoverProps = ChakraPopover.ContentProps &
   React.RefAttributes<HTMLDivElement> & {
@@ -66,3 +67,4 @@ export const PopoverContent = forwardRef<HTMLDivElement, PopoverProps>(
     );
   },
 );
+PopoverContent.displayName = "PopoverContent";

package/src/progress-indicator/ProgressDot.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { chakra, useSlotRecipe } from "@chakra-ui/react";
-import React, { PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 
 import { ProgressIndicatorVariantProps } from "./ProgressIndicator";
 

package/src/progress-indicator/ProgressIndicator.tsx

@@ -35,7 +35,7 @@ export type ProgressIndicatorProps = BoxProps &
 export const ProgressIndicator = forwardRef<
   HTMLDivElement,
   ProgressIndicatorProps
->(({ numberOfSteps, activeStep, colorPalette = "brand" }) => {
+>(({ numberOfSteps, activeStep }) => {
   const { t } = useTranslation();
   const recipe = useSlotRecipe({
     key: "progressIndicator",
@@ -56,7 +56,7 @@ export const ProgressIndicator = forwardRef<
         {Array.from({ length: numberOfSteps }, (_, i) => (
           <ProgressDot
             key={i}
-            aria-value={i + 1}
+            aria-valuenow={i + 1}
             isActive={activeStep === i + 1}
           />
         ))}
@@ -64,6 +64,8 @@ export const ProgressIndicator = forwardRef<
     </Box>
   );
 });
+ProgressIndicator.displayName = "ProgressIndicator";
+
 const texts = createTexts({
   stepsOf: (activeStep, numberOfSteps) => ({
     nb: `Steg ${activeStep} av ${numberOfSteps}`,

package/src/provider/SporProvider.tsx

@@ -5,7 +5,6 @@ import {
   SystemContext,
 } from "@chakra-ui/react";
 import { Global } from "@emotion/react";
-import React from "react";
 
 import { Language, LanguageProvider, system } from "..";
 import { ColorModeProvider } from "../color-mode";

package/src/stepper/Stepper.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { Flex, RecipeVariantProps, useSlotRecipe } from "@chakra-ui/react";
 import { ArrowLeftFill24Icon } from "@vygruppen/spor-icon-react";
-import React, { forwardRef, PropsWithChildren } from "react";
+import { forwardRef, PropsWithChildren } from "react";
 
 import { Box, createTexts, IconButton, Text, useTranslation } from "..";
 import { stepperSlotRecipe } from "../theme/slot-recipes/stepper";

package/src/tab/Tabs.tsx

@@ -4,7 +4,6 @@ import {
   Tabs as ChakraTabs,
   TabsRootProps as ChakraTabsRootProps,
 } from "@chakra-ui/react";
-import * as React from "react";
 import { forwardRef, PropsWithChildren } from "react";
 
 import { tabsSlotRecipe } from "../theme/slot-recipes/tabs";
@@ -63,6 +62,7 @@ export const Tabs = forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
   const { variant = "core", size = "sm" } = props;
   return <ChakraTabs.Root {...props} ref={ref} variant={variant} size={size} />;
 });
+Tabs.displayName = "Tabs";
 
 export const TabsList = ChakraTabs.List;
 export const TabsTrigger = ChakraTabs.Trigger;

package/src/table/Table.tsx

@@ -6,7 +6,7 @@ import {
   TableRootProps as ChakraTableProps,
   useSlotRecipe,
 } from "@chakra-ui/react";
-import React, { forwardRef, PropsWithChildren } from "react";
+import { forwardRef, PropsWithChildren } from "react";
 
 import { tableSlotRecipe } from "../theme/slot-recipes/table";
 
@@ -52,6 +52,7 @@ export const Table = forwardRef<HTMLTableElement, TableProps>((props, ref) => {
     </Box>
   );
 });
+Table.displayName = "Table";
 
 function getStyleProps(props: TableProps) {
   return props.variant === "core"

package/src/theme/recipes/button.ts

@@ -14,6 +14,7 @@ export const buttonRecipe = defineRecipe({
     transitionDuration: "normal",
     cursor: "pointer",
     textWrap: "wrap",
+    width: "fit-content",
     paddingX: 3,
     paddingY: 1,
     _disabled: {
@@ -121,4 +122,8 @@ export const buttonRecipe = defineRecipe({
       },
     },
   },
+  defaultVariants: {
+    variant: "primary",
+    size: "md",
+  },
 });

package/src/theme/slot-recipes/alert-expandable.ts

@@ -1,9 +1,5 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
 
-import tokens from "@vygruppen/spor-design-tokens";
-
-import { alertSlotRecipe } from "./alert";
-
 import { alertExpandableAnatomy } from "./anatomy";
 
 export const alertExpandableSlotRecipe = defineSlotRecipe({

package/src/theme/slot-recipes/info-tag.ts

@@ -1,6 +1,5 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
 
-import { coreBorder } from "../utils/core-utils";
 import { infoTagAnatomy } from "./anatomy";
 import { travelTagSlotRecipe } from "./travel-tag";
 

package/src/theme/slot-recipes/popover.ts

@@ -1,6 +1,5 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
 
-import { surface } from "./../utils/surface-utils";
 import { popoverAnatomy } from "./anatomy";
 
 export const popoverSlotRecipe = defineSlotRecipe({

package/src/theme/slot-recipes/radio-card.ts

@@ -1,9 +1,6 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
 import tokens from "@vygruppen/spor-design-tokens";
 
-import { coreBackground, coreBorder, coreText } from "../utils/core-utils";
-import { floatingBackground, floatingBorder } from "../utils/floating-utils";
-import { outlineBorder } from "../utils/outline-utils";
 import { radioCardAnatomy } from "./anatomy";
 
 export const radioCardSlotRecipe = defineSlotRecipe({

package/src/theme/utils/accent-utils.ts

@@ -8,20 +8,24 @@ type AccentBackgroundState = Subset<
 
 export function accentBackground(state: AccentBackgroundState) {
   switch (state) {
-    case "selected":
+    case "selected": {
       return brandBackground("default");
-    case "active":
+    }
+    case "active": {
       return {
         backgroundColor: "accent.surface.active",
       };
-    case "hover":
+    }
+    case "hover": {
       return {
         backgroundColor: "accent.surface.hover",
       };
-    default:
+    }
+    default: {
       return {
         backgroundColor: "accent.surface",
       };
+    }
   }
 }
 
@@ -29,13 +33,15 @@ type AccentTextState = Subset<State, "default" | "selected">;
 
 export function accentText(state: AccentTextState) {
   switch (state) {
-    case "selected":
+    case "selected": {
       return {
         color: "brand.text",
       };
-    default:
+    }
+    default: {
       return {
         color: "accent.text",
       };
+    }
   }
 }

package/src/theme/utils/bg-utils.ts

@@ -1,17 +1,20 @@
 type Bg = "default" | "secondary" | "tertiary";
 export const bg = (bg: Bg) => {
   switch (bg) {
-    case "default":
+    case "default": {
       return {
         backgroundColor: "bg",
       };
-    case "secondary":
+    }
+    case "secondary": {
       return {
         backgroundColor: "bg.secondary",
       };
-    case "tertiary":
+    }
+    case "tertiary": {
       return {
         backgroundColor: "bg.tertiary",
       };
+    }
   }
 };

package/src/theme/utils/brand-utils.ts

@@ -4,25 +4,25 @@ type BrandBackgroundState = Subset<State, "default" | "hover" | "active">;
 
 export function brandBackground(state: BrandBackgroundState) {
   switch (state) {
-    case "active":
+    case "active": {
       return {
         backgroundColor: "brand.surface.active",
       };
-    case "hover":
+    }
+    case "hover": {
       return {
         backgroundColor: "brand.surface.hover",
       };
-    case "default":
-    default:
+    }
+    default: {
       return {
         backgroundColor: "brand.surface",
       };
+    }
   }
 }
 
-type BrandTextState = Subset<State, "hover" | "active" | "default">;
-
-export function brandText(state: BrandTextState) {
+export function brandText() {
   return {
     color: "brand.text",
   };

package/src/theme/utils/core-utils.ts

@@ -8,16 +8,20 @@ type coreBackgroundState = Subset<
 >;
 export function coreBackground(state: coreBackgroundState) {
   switch (state) {
-    case "active":
+    case "active": {
       return brandBackground("active");
-    case "selected":
+    }
+    case "selected": {
       return brandBackground("default");
+    }
 
-    case "disabled":
+    case "disabled": {
       return surface("disabled");
-    case "hover":
-    default:
+    }
+
+    default: {
       return { backgroundColor: "transparent" };
+    }
   }
 }
 
@@ -28,11 +32,12 @@ type BorderState = Subset<
 
 export function coreBorder(state: BorderState) {
   switch (state) {
-    case "hover":
+    case "hover": {
       return {
         outline: "2px solid",
         outlineColor: "core.outline",
       };
+    }
 
     case "disabled": {
       return {
@@ -52,12 +57,12 @@ export function coreBorder(state: BorderState) {
         outlineColor: "outline.error",
       };
     }
-    case "default":
-    default:
+    default: {
       return {
         outline: "1px solid",
         outlineColor: "core.outline",
       };
+    }
   }
 }
 
@@ -67,25 +72,30 @@ type coreTextState = Subset<
 >;
 export function coreText(state: coreTextState) {
   switch (state) {
-    case "selected":
+    case "selected": {
       return {
         color: "brand.text",
       };
-    case "active":
+    }
+    case "active": {
       return {
         color: "brand.text",
       };
-    case "highlight":
+    }
+    case "highlight": {
       return {
         color: "text.highlight",
       };
-    case "disabled":
+    }
+    case "disabled": {
       return {
         color: "text.disabled",
       };
-    default:
+    }
+    default: {
       return {
         color: "core.text",
       };
+    }
   }
 }

package/src/theme/utils/floating-utils.ts

@@ -8,26 +8,30 @@ type FloatingBackgroundState = Subset<
 
 export function floatingBackground(state: FloatingBackgroundState) {
   switch (state) {
-    case "focus":
+    case "focus": {
       return brandBackground("default");
-    case "active":
+    }
+    case "active": {
       return {
         backgroundColor: "floating.surface.active",
       };
-    case "hover":
+    }
+    case "hover": {
       return {
         backgroundColor: {
           _light: "floating.surface.hover",
           _dark: `color-mix(in srgb, white 10%, var(--spor-colors-bg))`,
         },
       };
-    case "default":
+    }
+    case "default": {
       return {
         backgroundColor: {
           _light: "bg",
           _dark: `color-mix(in srgb, white 10%, var(--spor-colors-bg))`,
         },
       };
+    }
   }
 }
 
@@ -37,25 +41,29 @@ type FloatingBorderState = Subset<
 >;
 export function floatingBorder(state: FloatingBorderState) {
   switch (state) {
-    case "hover":
+    case "hover": {
       return {
         outline: "1px solid",
         outlineColor: "floating.outline.hover",
       };
-    case "focus":
+    }
+    case "focus": {
       return {
         outline: "1px solid",
         outlineColor: "outline.focus",
       };
-    case "active":
+    }
+    case "active": {
       return {
         outline: "1px solid",
         outlineColor: "floating.outline.active",
       };
-    default:
+    }
+    default: {
       return {
         outline: "1px solid",
         outlineColor: "floating.outline",
       };
+    }
   }
 }

package/src/theme/utils/ghost-utils.ts

@@ -13,19 +13,21 @@ export function ghostBackground(state: GhostBackgroundState) {
         backgroundColor: "ghost.surface.hover",
       };
     }
-    case "active":
+    case "active": {
       return {
         backgroundColor: "ghost.surface.active",
       };
+    }
     case "selected": {
       return {
         backgroundColor: "ghost.surface.selected",
       };
     }
-    case "default":
+    case "default": {
       return {
         backgroundColor: "transparent",
       };
+    }
   }
 }
 
@@ -33,13 +35,15 @@ type GhostTextState = Subset<State, "default" | "selected">;
 
 export function ghostText(state: GhostTextState) {
   switch (state) {
-    case "selected":
+    case "selected": {
       return {
         color: "ghost.text",
       };
-    default:
+    }
+    default: {
       return {
         color: "ghost.text",
       };
+    }
   }
 }

package/src/theme/utils/input-utils.ts

@@ -5,7 +5,7 @@ import { InputState } from "./types";
 
 export function inputVariant(state: InputState) {
   switch (state) {
-    case "base":
+    case "base": {
       return {
         ...coreBackground("default"),
         ...coreBorder("default"),
@@ -21,7 +21,8 @@ export function inputVariant(state: InputState) {
           ...coreBorder("selected"),
         },
       };
-    case "floating":
+    }
+    case "floating": {
       return {
         boxShadow: "sm",
         ...floatingBackground("default"),
@@ -40,8 +41,9 @@ export function inputVariant(state: InputState) {
           borderColor: "floating.border.selected",
         },
       };
-    case "default":
-    default:
+    }
+
+    default: {
       return {
         ...coreBackground("default"),
         ...coreBorder("default"),
@@ -57,6 +59,7 @@ export function inputVariant(state: InputState) {
           ...coreBorder("selected"),
         },
       };
+    }
   }
 }