@vygruppen/spor-react 13.3.2 → 13.4.1

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/recipes/input.ts

@@ -13,10 +13,6 @@ export const inputRecipe = defineRecipe({
     transitionDuration: "fast",
     color: "text",
     position: "relative",
-    paddingX: 3,
-    paddingTop: 3,
-    height: 8,
-    fontSize: "mobile.md",
 
     _disabled: {
       backgroundColor: "surface.disabled",
@@ -83,8 +79,23 @@ export const inputRecipe = defineRecipe({
         },
       },
     },
+    size: {
+      sm: {
+        paddingTop: 2,
+        height: 7,
+        fontSize: "xs",
+        paddingX: 2,
+      },
+      md: {
+        paddingX: 3,
+        paddingTop: 3,
+        height: 8,
+        fontSize: "mobile.md",
+      },
+    },
   },
   defaultVariants: {
     variant: "core",
+    size: "md",
   },
 });

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

@@ -201,12 +201,10 @@ export const selectAnatomy = createAnatomy("select").parts(
   "root",
   "trigger",
   "indicatorGroup",
-  "indicator",
-  "selectContent",
+  "content",
   "item",
   "control",
   "itemText",
-  "itemDescription",
   "itemGroup",
   "itemGroupLabel",
   "label",

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

@@ -14,7 +14,6 @@ export const breadcrumbSlotRecipe = defineSlotRecipe({
     },
     link: {
       cursor: "pointer",
-      padding: 0.5,
       borderRadius: "xs",
     },
     currentLink: {

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

@@ -14,17 +14,15 @@ export const fieldSlotRecipe = defineSlotRecipe({
     },
     requiredIndicator: {
       marginStart: 1,
-      // eslint-disable-next-line spor/use-semantic-tokens
-      color: "brightRed",
+      color: "outline.error",
     },
     label: {
       display: "flex",
     },
     helperText: {
-      marginTop: 2,
       color: "text.subtle",
       lineHeight: "normal",
-      fontSize: "sm",
+      fontSize: ["mobile.sm", "desktop.sm"],
     },
     errorText: {
       borderRadius: "xs",
@@ -52,4 +50,40 @@ export const fieldSlotRecipe = defineSlotRecipe({
       },
     },
   },
+  variants: {
+    size: {
+      sm: {
+        label: {
+          fontSize: ["mobile.xs", "desktop.xs"],
+          paddingX: 2,
+
+          "&[data-float]": {
+            fontSize: ["mobile.2xs", "desktop.2xs"],
+            top: 0,
+          },
+          top: "0.5rem",
+        },
+        helperText: {
+          color: "text.subtle",
+          lineHeight: "normal",
+          fontSize: ["mobile.xs", "desktop.xs"],
+        },
+      },
+      md: {
+        label: {
+          paddingX: 3,
+          fontSize: ["mobile.sm", "desktop.sm"],
+          "&[data-float]": {
+            fontSize: ["mobile.2xs", "desktop.2xs"],
+            color: "text.subtle",
+            top: "0.3rem",
+          },
+          top: "0.9rem",
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
 });

package/src/theme/slot-recipes/native-select.ts

@@ -55,5 +55,20 @@ export const nativeSelectSlotRecipe = defineSlotRecipe({
         },
       },
     },
+    size: {
+      sm: {
+        field: {
+          ...inputRecipe.variants?.size?.sm,
+        },
+      },
+      md: {
+        field: {
+          ...inputRecipe.variants?.size?.md,
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
   },
 });

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

@@ -16,15 +16,9 @@ export const selectSlotRecipe = defineSlotRecipe({
     label: {
       fontSize: ["mobile.sm", "desktop.sm"],
       top: 0,
-      left: 3,
       zIndex: 0,
       position: "absolute",
       color: "text",
-      marginY: 2,
-
-      _selected: {
-        transform: ["scale(0.825) translateY(-10px)"],
-      },
 
       transitionProperty: "transform",
       transitionDuration: "fast",
@@ -36,14 +30,10 @@ export const selectSlotRecipe = defineSlotRecipe({
       display: "flex",
       appearance: "none",
       width: "100%",
-      height: 8,
       color: "text",
-      paddingY: 1.5,
-      paddingX: 3,
 
       justifyContent: "space-between",
       alignItems: "center",
-      fontSize: "mobile.md",
       borderRadius: "sm",
       cursor: "pointer",
 
@@ -52,11 +42,14 @@ export const selectSlotRecipe = defineSlotRecipe({
           transform: "rotate(180deg)",
         },
       },
+      _active: {
+        backgroundColor: "surface",
+      },
     },
     indicatorGroup: {
       display: "flex",
       alignItems: "center",
-      gap: "1",
+      gap: "0.5",
       position: "absolute",
       right: "0",
       top: "0",
@@ -64,22 +57,22 @@ export const selectSlotRecipe = defineSlotRecipe({
       paddingX: 2,
 
       pointerEvents: "none",
-    },
-    indicator: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      color: {
-        base: "text",
-        _disabled: "text.disabled",
-        _invalid: "text.highlight",
-      },
-      _icon: {
-        width: 3,
-        height: 3,
+      "& [data-part='indicator']": {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: {
+          base: "text",
+          _disabled: "text.disabled",
+          _invalid: "text.highlight",
+        },
+        _icon: {
+          width: 3,
+          height: 3,
+        },
       },
     },
-    selectContent: {
+    content: {
       backgroundColor: "surface",
       boxShadow: "sm",
       overflowY: "auto",
@@ -134,8 +127,6 @@ export const selectSlotRecipe = defineSlotRecipe({
       },
       _hover: {
         backgroundColor: "surface.accent.hover",
-        outline: "2px solid core.outline",
-        outlineOffset: "2px",
       },
       _selected: {
         backgroundColor: "surface.accent",
@@ -144,6 +135,10 @@ export const selectSlotRecipe = defineSlotRecipe({
         width: 3,
         height: 3,
       },
+      "& [data-part='item-description']": {
+        fontSize: ["mobile.xs", "desktop.xs"],
+        color: "text.ghost",
+      },
     },
     control: {
       position: "relative",
@@ -162,6 +157,7 @@ export const selectSlotRecipe = defineSlotRecipe({
     },
     itemText: {
       flex: "1",
+      alignItems: "center",
     },
     itemGroup: {
       _first: { mt: "0" },
@@ -170,14 +166,6 @@ export const selectSlotRecipe = defineSlotRecipe({
       py: "1",
       fontWeight: "medium",
     },
-    valueText: {},
-    itemDescription: {
-      fontSize: ["mobile.xs", "desktop.xs"],
-      color: "text.ghost",
-      "[aria-selected='true'] &": {
-        color: "text.ghost",
-      },
-    },
   },
   variants: {
     variant: {
@@ -198,6 +186,10 @@ export const selectSlotRecipe = defineSlotRecipe({
             backgroundColor: "surface.disabled",
           },
         },
+        content: {
+          outline: "2px solid",
+          outlineColor: "outline.core",
+        },
       },
       floating: {
         control: {
@@ -242,5 +234,66 @@ export const selectSlotRecipe = defineSlotRecipe({
         },
       },
     },
+    size: {
+      sm: {
+        trigger: {
+          height: 7,
+          paddingY: 1.5,
+          fontSize: "xs",
+          paddingX: 2,
+        },
+        label: {
+          fontSize: ["mobile.xs", "desktop.xs"],
+          left: 2,
+          marginY: 1.5,
+          _selected: {
+            transform: ["scale(0.85) translateY(-9px)"],
+            fontSize: "desktop.2xs",
+            color: "text.subtle",
+          },
+        },
+        item: {
+          paddingX: 2,
+          paddingY: 1,
+          fontSize: "xs",
+          "& [data-part='item-description']": {
+            fontSize: ["mobile.2xs", "desktop.2xs"],
+          },
+        },
+        itemGroupLabel: {
+          py: 0.5,
+          fontSize: "xs",
+        },
+        valueText: {
+          paddingTop: 0,
+          "&[data-with-placeholder]": {
+            paddingTop: "1.5",
+          },
+        },
+      },
+      md: {
+        trigger: {
+          height: 8,
+          paddingY: 1.5,
+          paddingX: 3,
+          fontSize: "sm",
+        },
+        label: {
+          left: 3,
+          marginY: 2,
+          _selected: {
+            transform: ["scale(0.825) translateY(-10px)"],
+          },
+        },
+        valueText: {
+          "&[data-with-placeholder]": {
+            paddingTop: "4",
+          },
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
   },
 });

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/vitest.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    globals: true, // Allows using 'describe', 'test', and 'expect' without importing them
+    environment: "jsdom",
+    setupFiles: "./setupTests.ts", // Global test helpers or mocks
+    typecheck: {
+      enabled: true,
+    },
+  },
+});