@vygruppen/spor-react 10.9.1 → 11.0.0

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, CardSelect, CargonetLogo, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, FullScreenDrawer, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, ServiceAlert, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-RK3GOXNY.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, CardSelect, CargonetLogo, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, FullScreenDrawer, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, ServiceAlert, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-ROHXFJX2.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "10.9.1",
+  "version": "11.0.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/button/Button.tsx

@@ -4,6 +4,7 @@ import {
   ButtonProps as ChakraButtonProps,
   Flex,
   forwardRef,
+  SpaceProps,
   useButtonGroup,
   useStyleConfig,
 } from "@chakra-ui/react";
@@ -11,9 +12,12 @@ import React from "react";
 import { createTexts, useTranslation } from "../i18n";
 import { ColorInlineLoader } from "../loader";
 
-export type ButtonProps = Exclude<
-  ChakraButtonProps,
-  "colorScheme" | "loadingText" | "size" | "variant"
+export type ButtonProps = Omit<
+  Exclude<
+    ChakraButtonProps,
+    "colorScheme" | "loadingText" | "size" | "variant"
+  >,
+  keyof SpaceProps
 > & {
   /**
    * The size of the button.

package/src/input/CardSelect.tsx

@@ -122,7 +122,6 @@ export const CardSelect = forwardRef<CardSelectProps, "button">(
         <chakra.button
           type="button"
           ref={triggerRef}
-          fontWeight="bold"
           sx={styles.trigger}
           aria-label={label}
           {...buttonProps}
@@ -148,14 +147,17 @@ export const CardSelect = forwardRef<CardSelectProps, "button">(
             offset={size === "sm" ? 6 : 12}
             crossOffset={crossOffset}
             placement={placement}
+            containerPadding={0}
           >
             <StaticCard
               colorScheme="white"
-              size="lg"
+              size="md"
+              fontSize={"xs"}
               border={"sm"}
-              borderColor={"grey"}
+              borderColor={"silver"}
               sx={styles.card}
               {...overlayProps}
+              maxWidth={(triggerRef.current?.clientWidth ?? 1) * 2}
             >
               <Dialog aria-label={label}>{children}</Dialog>
             </StaticCard>

package/src/input/SearchInput.tsx

@@ -2,6 +2,7 @@ import {
   Input as ChakraInput,
   InputProps as ChakraInputProps,
   IconButton,
+  LayoutProps,
   forwardRef,
   useFormControlContext,
 } from "@chakra-ui/react";
@@ -33,15 +34,18 @@ export const SearchInput = forwardRef<SearchInputProps, "input">(
     const formControlProps = useFormControlContext();
     const autoGeneratedId = useId();
     const inputId = props.id ?? formControlProps?.id ?? autoGeneratedId;
+
+    const { outerProps, innerProps } = getOuterProps(props);
+
     return (
-      <InputGroup position="relative">
+      <InputGroup position="relative" {...outerProps}>
         <InputLeftElement>
           <SearchOutline24Icon />
         </InputLeftElement>
         <ChakraInput
           paddingLeft={7}
           paddingRight={7}
-          {...props}
+          {...innerProps}
           id={inputId}
           type="search"
           css={{
@@ -74,6 +78,22 @@ export const SearchInput = forwardRef<SearchInputProps, "input">(
   },
 );
 
+const getOuterProps = (props: Record<string, any>) => {
+  const layoutKeys = new Set(["w, width, maxW, minW, maxWidth, minWidth"]); // add more keys here if neccessary
+  const outerProps: LayoutProps = {};
+  const innerProps: Record<string, any> = {};
+
+  for (const key in props) {
+    if (layoutKeys.has(key)) {
+      (outerProps as any)[key] = props[key];
+    } else {
+      (innerProps as any)[key] = props[key];
+    }
+  }
+
+  return { outerProps, innerProps };
+};
+
 const texts = createTexts({
   label: {
     nb: "Søk",

package/src/linjetag/TravelTag.tsx

@@ -19,10 +19,23 @@ import type { TagProps } from "./types";
 
 export type TravelTagProps = TagProps &
   BoxProps & {
+    /**
+     * Defines the level of importance
+     * Default to none
+     */
     deviationLevel?: "critical" | "major" | "minor" | "info" | "none";
     isDisabled?: boolean;
+    /**
+     * Needs to be defined if variant is custom
+     */
     foregroundColor?: string;
+    /**
+     * Needs to be defined if variant is custom
+     */
     backgroundColor?: string;
+    /**
+     * Define a custom icon variant
+     */
     customIconVariant?: string;
   };
 

package/src/loader/Skeleton.tsx

@@ -12,5 +12,11 @@ export type SkeletonProps = BoxProps & {
  * Skeleton renders a loading animation for a given box. It works great as a placeholder to avoid layout shifts.
  */
 export const Skeleton = forwardRef<SkeletonProps, "div">((props, ref) => (
-  <ChakraSkeleton {...props} ref={ref} />
+  <ChakraSkeleton
+    {...props}
+    ref={ref}
+    aria-busy="true"
+    aria-hidden="true"
+    role="alert"
+  />
 ));

package/src/modal/FullScreenDrawer.tsx

@@ -163,7 +163,6 @@ const DrawerCloseButton = () => {
         onClick={onClose}
         aria-label={t(texts.close)}
         width="fit-content"
-        marginLeft="auto"
       >
         {t(texts.close)}
       </Button>
@@ -196,7 +195,6 @@ const DrawerBackButton = () => {
         onClick={onClose}
         aria-label={t(texts.backAriaLabel)}
         width="fit-content"
-        marginLeft="auto"
       >
         {t(texts.back)}
       </Button>

package/src/theme/components/alert-expandable.ts

@@ -27,11 +27,15 @@ const config = helpers.defineMultiStyleConfig({
       },
       container: {
         _hover: {
+          backgroundColor: "cloudy",
           outlineColor: "sky",
         },
         _active: {
           backgroundColor: "icyBlue",
         },
+        _focus: {
+          outlineColor: "greenHaze",
+        },
       },
     },
     success: {
@@ -40,11 +44,15 @@ const config = helpers.defineMultiStyleConfig({
       },
       container: {
         _hover: {
+          backgroundColor: "coralGreen",
           outlineColor: "blueGreen",
         },
         _active: {
           backgroundColor: "mint",
         },
+        _focus: {
+          outlineColor: "greenHaze",
+        },
       },
     },
     warning: {
@@ -53,7 +61,11 @@ const config = helpers.defineMultiStyleConfig({
       },
       container: {
         _hover: {
-          outlineColor: "sunshine",
+          backgroundColor: "primrose",
+          outlineColor: "banana",
+        },
+        _focus: {
+          outlineColor: "greenHaze",
         },
         _active: {
           backgroundColor: "cornSilk",
@@ -66,8 +78,12 @@ const config = helpers.defineMultiStyleConfig({
       },
       container: {
         _hover: {
+          backgroundColor: "burntYellow",
           outlineColor: "golden",
         },
+        _focus: {
+          outlineColor: "greenHaze",
+        },
         _active: {
           backgroundColor: "sunshine",
         },
@@ -79,11 +95,15 @@ const config = helpers.defineMultiStyleConfig({
       },
       container: {
         _hover: {
+          backgroundColor: "salmon",
           outlineColor: "apricot",
         },
         _active: {
           backgroundColor: "pink",
         },
+        _focus: {
+          outlineColor: "greenHaze",
+        },
       },
     },
     service: {

package/src/theme/components/alert-service.ts

@@ -65,10 +65,14 @@ const config = helpers.defineMultiStyleConfig({
     service: {
       container: {
         _hover: {
-          outlineColor: "blueGreen",
+          backgroundColor: "teal.600",
+          outlineColor: "teal.600",
+        },
+        _focus: {
+          outlineColor: "green.500",
         },
         _active: {
-          backgroundColor: "pine",
+          backgroundColor: "teal.400",
           outlineColor: "pine",
         },
         color: "white",

package/src/theme/components/card-select.ts

@@ -5,6 +5,7 @@ import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
 import { floatingBackground, floatingBorder } from "../utils/floating-utils";
 import { focusVisibleStyles } from "../utils/focus-utils";
 import { ghostBackground, ghostText } from "../utils/ghost-utils";
+import { fontWeights } from "../foundations";
 
 const parts = anatomy("card-select").parts("trigger", "card");
 
@@ -22,8 +23,8 @@ const config = helpers.defineMultiStyleConfig({
     },
     card: {
       borderRadius: "sm",
-      boxShadow: "md",
-      padding: 3,
+      boxShadow: "xs",
+      padding: 2,
       ...baseText("default", props),
       backgroundColor: mode(
         "white",
@@ -56,7 +57,8 @@ const config = helpers.defineMultiStyleConfig({
           ...ghostBackground("active", props),
         },
         _expanded: {
-          ...ghostBackground("selected", props),
+          ...ghostBackground("active", props),
+          fontWeight: fontWeights.bold,
         },
       },
     }),
@@ -88,7 +90,7 @@ const config = helpers.defineMultiStyleConfig({
         paddingY: 1,
         minHeight: "1.25rem",
         fontSize: "xs",
-        borderRadius: "sm",
+        borderRadius: "lg",
       },
     },
     md: {
@@ -96,8 +98,8 @@ const config = helpers.defineMultiStyleConfig({
         paddingX: 2,
         paddingY: 1.5,
         minHeight: "2.625rem",
-        fontSize: "sm",
-        borderRadius: "sm",
+        fontSize: "xs",
+        borderRadius: "lg",
       },
     },
     lg: {
@@ -106,7 +108,7 @@ const config = helpers.defineMultiStyleConfig({
         paddingY: 2,
         minHeight: "3.375rem",
         fontSize: "sm",
-        borderRadius: "sm",
+        borderRadius: "lg",
       },
     },
   },

package/src/theme/components/divider.ts

@@ -1,42 +1,47 @@
 import { defineStyleConfig } from "@chakra-ui/styled-system";
-import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
+import { mode } from "@chakra-ui/theme-tools";
 
-const isSolid = (props: StyleFunctionProps) => props.variant === "solid";
-const isDashed = (props: StyleFunctionProps) => props.variant === "dashed";
+const borderColor = mode("blackAlpha.300", "whiteAlpha.300");
+
+function getSizes(size: string) {
+  const sizes: Record<string, { height: string; dash: string; gap: string }> = {
+    sm: {
+      height: "1px",
+      dash: "1px",
+      gap: "4px",
+    },
+    md: {
+      height: "2px",
+      dash: "3px",
+      gap: "6px",
+    },
+    lg: {
+      height: "3px",
+      dash: "3px",
+      gap: "9px",
+    },
+  };
+  return sizes[size] || sizes["md"];
+}
 
 export default defineStyleConfig({
   baseStyle: (props) => ({
-    borderColor: mode("blackAlpha.300", "whiteAlpha.300")(props),
+    borderColor: borderColor(props),
   }),
   variants: {
     solid: {
       borderStyle: "solid",
     },
-    dashed: (props) => ({
-      backgroundImage: `repeating-linear-gradient(90deg, ${mode("blackAlpha.300", "whiteAlpha.300")(props)}, ${mode("blackAlpha.300", "whiteAlpha.300")(props)} 4px, transparent 4px, transparent 10px)`,
-      backgroundPosition: "left bottom",
-      backgroundRepeat: "repeat-x",
-      backgroundSize: "100% 3px",
-      borderRadius:
-        props.size === "sm" ? "0.5px" : props.size === "md" ? "1px" : "1.5px",
-    }),
-  },
-  sizes: {
-    sm: (props) => ({
-      borderWidth: isSolid(props) ? "1px" : undefined,
-      borderRadius: isSolid(props) ? "0.5px" : undefined,
-      height: isDashed(props) ? "1px" : undefined,
-    }),
-    md: (props) => ({
-      borderWidth: isSolid(props) ? "2px" : undefined,
-      borderRadius: isSolid(props) ? "1px" : "10px",
-      height: isDashed(props) ? "2px" : undefined,
-    }),
-    lg: (props) => ({
-      borderWidth: isSolid(props) ? "3px" : undefined,
-      borderRadius: isSolid(props) ? "1.5px" : undefined,
-      height: isDashed(props) ? "3px" : undefined,
-    }),
+    dashed: (props) => {
+      const { height, dash, gap } = getSizes(props.size);
+      return {
+        height: height,
+        backgroundImage: `linear-gradient(90deg, ${borderColor(props)}, ${borderColor(props)} ${dash}, transparent ${dash}, transparent ${gap})`,
+        backgroundPosition: "left bottom",
+        backgroundRepeat: "repeat-x",
+        backgroundSize: `${gap} ${height}`,
+      };
+    },
   },
   defaultProps: {
     variant: "solid",

package/src/theme/components/line-icon.ts

@@ -13,6 +13,9 @@ const config = helpers.defineMultiStyleConfig({
     },
     icon: {
       color: "white",
+      "[aria-disabled=true] &": {
+        color: mode("icon.disabled.light", "icon.disabled.dark"),
+      },
     },
   },
   variants: {

package/src/theme/components/travel-tag.ts

@@ -2,6 +2,8 @@ import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import type { StyleFunctionProps } from "@chakra-ui/theme-tools";
 import { anatomy, mode } from "@chakra-ui/theme-tools";
 import { focusVisibleStyles } from "../utils/focus-utils";
+import { surface } from "../utils/surface-utils";
+import { baseText } from "../utils/base-utils";
 
 const parts = anatomy("travel-tag").parts(
   "container",
@@ -27,7 +29,7 @@ const config = helpers.defineMultiStyleConfig({
       transitionDuration: "fast",
       transitionProperty: "common",
       _disabled: {
-        backgroundColor: "silver",
+        ...surface("disabled", props),
       },
       "button&, a&": {
         boxShadow: "sm",
@@ -44,8 +46,7 @@ const config = helpers.defineMultiStyleConfig({
     iconContainer: {
       padding: 0.5,
       "[aria-disabled=true] &": {
-        backgroundColor: "osloGrey",
-        color: "white",
+        ...surface("disabled", props),
       },
     },
     textContainer: {
@@ -53,7 +54,7 @@ const config = helpers.defineMultiStyleConfig({
       paddingRight: 0.5,
       whiteSpace: "nowrap",
       "[aria-disabled=true] &": {
-        color: "dimGrey",
+        ...baseText("disabled", props),
       },
     },
     title: {

package/src/theme/foundations/sizes.ts

@@ -1,3 +1,4 @@
+import tokens from "@vygruppen/spor-design-tokens";
 import { spacing } from "./spacing";
 
 const largeSizes = {
@@ -21,10 +22,11 @@ const largeSizes = {
 };
 
 const container = {
-  sm: "640px",
-  md: "768px",
-  lg: "1024px",
-  xl: "1280px",
+  base: "0px",
+  sm: tokens.size.breakpoint.sm,
+  md: tokens.size.breakpoint.md,
+  lg: tokens.size.breakpoint.lg,
+  xl: tokens.size.breakpoint.xl,
 };
 
 export const sizes = {

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

@@ -1,5 +1,6 @@
 import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
 import { State, Subset } from "./types";
+import { fontWeights } from "../foundations";
 
 type GhostBackgroundState = Subset<
   State,
@@ -30,8 +31,8 @@ export function ghostBackground(
     case "selected": {
       return {
         backgroundColor: mode(
-          "ghost.surface.selected.light",
-          "ghost.surface.selected.dark",
+          "ghost.surface.hover.light",
+          "ghost.surface.hover.dark",
         )(props),
       };
     }