@vygruppen/spor-react 13.4.0 → 13.4.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "13.4.0",
+  "version": "13.4.2",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/dialog/Dialog.tsx

@@ -9,6 +9,7 @@ interface DialogContentProps extends ChakraDialog.ContentProps {
   portalRef?: React.RefObject<HTMLElement>;
   backdrop?: boolean;
   children?: React.ReactNode;
+  positionerProps?: ChakraDialog.PositionerProps;
 }
 
 export const DialogContent = ({
@@ -22,13 +23,14 @@ export const DialogContent = ({
     portalled = true,
     portalRef,
     backdrop = true,
+    positionerProps,
     ...rest
   } = props;
 
   return (
     <Portal disabled={!portalled} container={portalRef}>
       {backdrop && <ChakraDialog.Backdrop />}
-      <ChakraDialog.Positioner>
+      <ChakraDialog.Positioner {...positionerProps}>
         <ChakraDialog.Content ref={ref} {...rest} asChild={false}>
           {children}
         </ChakraDialog.Content>

package/src/input/AttachedInputs.tsx

@@ -6,6 +6,7 @@ import {
   defineRecipe,
   Group,
   GroupProps,
+  IconButtonProps,
   RecipeVariantProps,
   useRecipe,
 } from "@chakra-ui/react";
@@ -40,10 +41,22 @@ export type AttachedInputsProps = RecipeVariantProps<
         onFlip: () => void;
         flipAriaLabel: string;
       }
-  );
+  ) & {
+    flipButtonProps?: Omit<
+      IconButtonProps,
+      | "icon"
+      | "aria-label"
+      | "onClick"
+      | "variant"
+      | "size"
+      | "orientation"
+      | "spinner"
+    >;
+  };
 
 export const AttachedInputs = ({
   ref,
+  flipButtonProps,
   ...props
 }: AttachedInputsProps & {
   ref?: React.Ref<HTMLDivElement>;
@@ -76,6 +89,10 @@ export const AttachedInputs = ({
         size={["xs", null, "sm"]}
         aria-label={flipAriaLabel}
         onClick={onFlip}
+        position="absolute"
+        bg="bg"
+        outlineWidth="1px"
+        {...flipButtonProps}
       />
     </Box>
   );
@@ -85,24 +102,20 @@ const SwitchButton = chakra(
   IconButton,
   defineRecipe({
     base: {
-      position: "absolute !important",
-      zIndex: "101 !important",
-      // eslint-disable-next-line spor/use-semantic-tokens
-      bg: "bg !important",
-      outlineWidth: "1px !important",
-
+      zIndex: "101",
       _focus: {
-        outlineOffset: "0px !important",
+        outlineOffset: "0px",
+        alignItems: "center",
       },
     },
     variants: {
       orientation: {
         horizontal: {
-          top: "calc(50% - 18px)",
-          right: "calc(50% - 18px)",
+          top: "calc(50% - 1.1rem)",
+          right: "calc(50% - 1.1rem)",
         },
         vertical: {
-          top: "calc(50% - 15px)",
+          top: "calc(50% - 1.1rem)",
           right: "3rem",
           transform: "rotate(90deg)",
         },

package/src/linjetag/InfoTag.tsx

@@ -47,6 +47,8 @@ export const InfoTag = ({
   size = "md",
   title,
   description,
+  descriptionProps,
+  titleProps,
   ...customProps
 }: InfoTagProps) => {
   const recipe = useSlotRecipe({ key: "infoTag" });
@@ -67,13 +69,13 @@ export const InfoTag = ({
       />
       <Box css={styles.textContainer}>
         {title && (
-          <Box as="span" css={styles.title}>
+          <Box as="span" css={styles.title} {...titleProps}>
             {title}
           </Box>
         )}
         {title && description && " "}
         {description && (
-          <Box as="span" css={styles.description}>
+          <Box as="span" css={styles.description} {...descriptionProps}>
             {description}
           </Box>
         )}

package/src/linjetag/LineIcon.tsx

@@ -111,7 +111,7 @@ export const LineIcon = function LineIcon({
       borderColor={variant === "walk" ? "outline.core" : "transparent"}
       aria-label={label}
       ref={ref}
-      className={clsx("light", rest.className)}
+      className={variant === "walk" ? undefined : clsx("light", rest.className)}
     >
       <LinjeTagIcon size={size} css={styles.icon} variant={getIconVariant()} />
     </Box>

package/src/linjetag/TravelTag.tsx

@@ -14,7 +14,6 @@ import {
   WarningFill18Icon,
   WarningFill24Icon,
 } from "@vygruppen/spor-icon-react";
-import clsx from "clsx";
 import { PropsWithChildren } from "react";
 
 import { travelTagSlotRecipe } from "../theme/slot-recipes/travel-tag";
@@ -139,6 +138,8 @@ export const TravelTag = function TravelTag({
   foregroundColor,
   backgroundColor,
   customIconVariant,
+  descriptionProps,
+  titleProps,
   ...rest
 }: TravelTagProps & {
   ref?: React.Ref<HTMLDivElement>;
@@ -155,7 +156,6 @@ export const TravelTag = function TravelTag({
       css={styles.container}
       aria-disabled={disabled}
       ref={ref}
-      className={clsx("light", rest.className)}
       backgroundColor={backgroundColor}
       {...rest}
     >
@@ -172,13 +172,13 @@ export const TravelTag = function TravelTag({
       />
       <Box css={styles.textContainer}>
         {title && (
-          <Box as="span" css={styles.title}>
+          <Box as="span" css={styles.title} {...titleProps}>
             {title}
           </Box>
         )}
         {title && description && " "}
         {description && (
-          <Box as="span" css={styles.description}>
+          <Box as="span" css={styles.description} {...descriptionProps}>
             {description}
           </Box>
         )}

package/src/linjetag/types.ts

@@ -1,3 +1,5 @@
+import type { BoxProps } from "@chakra-ui/react";
+
 export type Variant =
   | "local-train"
   | "region-train"
@@ -20,6 +22,8 @@ export type TagProps = VariantProps & {
   size?: Size;
   title: string;
   description?: string;
+  descriptionProps?: BoxProps;
+  titleProps?: BoxProps;
 };
 
 type DefaultVariantProps = {

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

@@ -1,5 +1,4 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
-import tokens from "@vygruppen/spor-design-tokens";
 
 import { breadcrumbAnatomy } from "./anatomy";
 
@@ -15,9 +14,9 @@ export const breadcrumbSlotRecipe = defineSlotRecipe({
     link: {
       cursor: "pointer",
       borderRadius: "xs",
+      textDecoration: "underline",
     },
     currentLink: {
-      borderRadius: "xs",
       cursor: "default",
     },
     separator: {
@@ -32,12 +31,10 @@ export const breadcrumbSlotRecipe = defineSlotRecipe({
       core: {
         link: {
           _hover: {
-            outlineColor: "outline.core.hover",
-            outlineWidth: tokens.size.stroke.md,
-            outlineStyle: "solid",
+            textDecoration: "none",
+
             _active: {
               backgroundColor: "surface.core.active",
-              outline: "none",
             },
           },
         },

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

@@ -11,10 +11,7 @@ export const travelTagSlotRecipe = defineSlotRecipe({
       display: "flex",
       alignItems: "center",
       padding: 0.5,
-
-      _disabled: {
-        background: "surface.disabled",
-      },
+      backgroundColor: "surface.disabled",
 
       width: "fit-content",
       transitionDuration: "fast",
@@ -79,62 +76,22 @@ export const travelTagSlotRecipe = defineSlotRecipe({
       none: {},
     },
     variant: {
-      "local-train": {
-        container: {
-          backgroundColor: "linjetag.lokaltogLight",
-        },
-      },
-      "region-train": {
-        container: {
-          backgroundColor: "linjetag.regiontogLight",
-        },
-      },
-      "region-express-train": {
-        container: {
-          backgroundColor: "linjetag.regionEkspressLight",
-        },
-      },
-      "long-distance-train": {
-        container: {
-          backgroundColor: "linjetag.fjerntogLight",
-        },
-      },
-      "airport-express-train": {
-        container: {
-          backgroundColor: "linjetag.flytogLight",
-        },
-      },
-      "vy-bus": {
-        container: {
-          backgroundColor: "linjetag.vyBussLight",
-        },
-      },
-      "local-bus": {
-        container: {
-          backgroundColor: "linjetag.lokalbussLight",
-        },
-      },
-      ferry: {
-        container: {
-          backgroundColor: "linjetag.fergeLight",
-        },
-      },
-      subway: {
-        container: {
-          backgroundColor: "linjetag.tbaneLight",
-        },
-      },
-      tram: {
-        container: {
-          backgroundColor: "linjetag.trikkLight",
-        },
-      },
-      "alt-transport": {
+      "local-train": {},
+      "region-train": {},
+      "region-express-train": {},
+      "long-distance-train": {},
+      "airport-express-train": {},
+      "vy-bus": {},
+      "local-bus": {},
+      ferry: {},
+      subway: {},
+      tram: {},
+      "alt-transport": {},
+      walk: {
         container: {
-          backgroundColor: "linjetag.altTransportLight",
+          backgroundColor: "none",
         },
-      },
-      walk: {
+
         textContainer: {
           position: "absolute",
           left: "0.875rem",

package/src/typography/Badge.tsx

@@ -3,10 +3,18 @@ import {
   Badge as ChakraBadge,
   BadgeProps as ChakraBadgeProps,
   Box,
+  RecipeVariantProps,
 } from "@chakra-ui/react";
 import { IconComponent } from "@vygruppen/spor-icon-react";
 
-export type BadgeProps = ChakraBadgeProps & { icon?: IconComponent };
+import { badgeRecipie } from "../theme/recipes/badge";
+
+type BadgeVariantProps = RecipeVariantProps<typeof badgeRecipie>;
+
+export type BadgeProps = ChakraBadgeProps & {
+  colorPalette?: BadgeVariantProps["colorPalette"];
+  icon?: IconComponent;
+};
 
 export const Badge = function Badge({
   ref,