@vygruppen/spor-react 12.1.2 → 12.2.1

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/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/anatomy.ts

@@ -267,3 +267,13 @@ export const datepickerAnatomy = createAnatomy("datepicker").parts(
   "box",
   "rangeCalendarPopover",
 );
+
+export const checkboxCardAnatomy = createAnatomy("checkbox-card", [
+  "root",
+  "control",
+  "label",
+  "description",
+  "addon",
+  "indicator",
+  "content",
+]);

package/src/theme/slot-recipes/choice-chip.ts

@@ -0,0 +1,183 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+
+import { checkboxCardAnatomy } from "./anatomy";
+
+export const choiceChipSlotRecipe = defineSlotRecipe({
+  slots: checkboxCardAnatomy.keys(),
+  className: "chakra-checkbox-card",
+  base: {
+    root: {
+      display: "inline-flex",
+      alignItems: "center",
+      boxAlign: "center",
+      fontSize: "xs",
+      cursor: "pointer",
+      transitionProperty: "all",
+      borderRadius: "xl",
+      transitionDuration: "fast",
+      paddingInlineStart: "2",
+      paddingInlineEnd: "2",
+
+      outline: "1px solid",
+      outlineColor: "base.outline",
+      _checked: {
+        backgroundColor: "brand.surface",
+        borderRadius: "sm",
+        outline: "none",
+        color: "brand.text",
+        _hover: {
+          backgroundColor: "brand.surface.hover",
+          _active: {
+            backgroundColor: "brand.surface.active",
+          },
+        },
+      },
+
+      _focusVisible: {
+        outline: "2px solid",
+        outlineColor: "outline.focus",
+        outlineOffset: "1px",
+      },
+
+      _disabled: {
+        pointerEvents: "none",
+        boxShadow: "none",
+        backgroundColor: "surface.disabled",
+        color: "text.disabled",
+        outline: "none",
+
+        _hover: {
+          backgroundColor: "core.surface.disabled",
+          boxShadow: "none",
+          color: "core.text.disabled",
+        },
+        _checked: {
+          cursor: "not-allowed",
+          boxShadow: "none",
+          color: "core.text.disabled",
+          backgroundColor: "core.surface.disabled",
+          _hover: {
+            backgroundColor: "core.surface.disabled",
+            boxShadow: "none",
+            color: "core.text.disabled",
+          },
+        },
+      },
+    },
+
+    label: {
+      display: "flex",
+      alignItems: "center",
+
+      fontSize: "xs",
+    },
+  },
+
+  variants: {
+    size: {
+      xs: {
+        root: {
+          _checked: {
+            borderRadius: "0.563rem",
+          },
+          height: 5,
+          paddingX: 1.5,
+        },
+      },
+      sm: {
+        root: {
+          _checked: {
+            borderRadius: "sm",
+          },
+          height: 6,
+          paddingX: 2,
+        },
+      },
+      md: {
+        root: {
+          _checked: {
+            borderRadius: "sm",
+          },
+          height: 7,
+          paddingX: 2,
+        },
+      },
+      lg: {
+        root: {
+          _checked: {
+            borderRadius: "md",
+          },
+          height: 8,
+          paddingX: 3,
+        },
+      },
+    },
+
+    variant: {
+      core: {
+        root: {
+          color: "core.text",
+          outlineColor: "core.outline",
+
+          _hover: {
+            outline: "2px solid",
+            outlineColor: "core.outline.hover",
+
+            _active: {
+              outline: "1px solid",
+              outlineColor: "core.outline",
+              backgroundColor: "core.surface.active",
+            },
+          },
+        },
+      },
+      accent: {
+        root: {
+          backgroundColor: "accent.surface",
+          color: "accent.text",
+          outline: "none",
+
+          _hover: {
+            backgroundColor: "accent.surface.hover",
+
+            _active: {
+              backgroundColor: "accent.surface.active",
+            },
+          },
+        },
+      },
+      floating: {
+        root: {
+          backgroundColor: "floating.surface",
+          outline: "1px solid",
+          outlineColor: "floating.outline",
+          color: "floating.text",
+
+          boxShadow: "sm",
+          _hover: {
+            backgroundColor: "floating.surface.hover",
+            outline: "1px solid",
+            outlineColor: "floating.outline.hover",
+
+            _active: {
+              backgroundColor: "floating.surface.active",
+              outline: "1px solid",
+              outlineColor: "floating.outline",
+            },
+          },
+        },
+      },
+    },
+    chipType: {
+      icon: {},
+      choice: {},
+      filter: {},
+    },
+  },
+
+  defaultVariants: {
+    size: "md",
+    variant: "core",
+    chipType: "choice",
+  },
+});

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

@@ -4,6 +4,7 @@ import { alertExpandableSlotRecipe } from "./alert-expandable";
 import { alertServiceSlotRecipe } from "./alert-service";
 import { breadcrumbSlotRecipe } from "./breadcrumb";
 import { checkboxSlotRecipe } from "./checkbox";
+import { choiceChipSlotRecipe } from "./choice-chip";
 import { datePickerSlotRecipe } from "./datepicker";
 import { dialogSlotRecipe } from "./dialog";
 import { drawerSlotRecipe } from "./drawer";
@@ -62,4 +63,5 @@ export const slotRecipes = {
   tabs: tabsSlotRecipe,
   travelTag: travelTagSlotRecipe,
   toast: toastSlotRecipe,
+  checkboxCard: choiceChipSlotRecipe,
 };

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",
       };
+    }
   }
 }