@vygruppen/spor-react 9.8.3 → 9.10.0

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, 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, RadioGroup, ScaleFade, SearchInput, Section, 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, 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-ZDOSE4VD.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, 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, RadioGroup, ScaleFade, SearchInput, Section, 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, 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-WZYWSOJB.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "9.8.3",
+  "version": "9.10.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -22,7 +22,7 @@
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@internationalized/date": "^3.0.1",
-    "@vygruppen/spor-design-tokens": ">3.4.0",
+    "@vygruppen/spor-design-tokens": ">3.6.0",
     "@vygruppen/spor-icon-react": ">3.6.0",
     "@vygruppen/spor-loader": ">0.3.1",
     "awesome-phonenumber": "^5.10.0",

package/src/alert/BaseAlert.tsx

@@ -6,6 +6,8 @@ export type BaseAlertProps = BoxProps & {
   variant: "info" | "success" | "warning" | "alt-transport" | "error";
   /** The body content of the alert */
   children: React.ReactNode;
+  /** The title of the alert */
+  title?: string;
 };
 
 /**

package/src/alert/ClosableAlert.tsx

@@ -1,4 +1,9 @@
-import { useDisclosure, useMultiStyleConfig } from "@chakra-ui/react";
+import {
+  Box,
+  Flex,
+  useDisclosure,
+  useMultiStyleConfig,
+} from "@chakra-ui/react";
 import { CloseFill18Icon } from "@vygruppen/spor-icon-react";
 import React from "react";
 import { IconButton } from "../button";
@@ -34,6 +39,7 @@ type ClosableAlertProps = BaseAlertProps & {
  */
 export const ClosableAlert = ({
   variant,
+  title,
   children,
   onClose: externalOnClose = () => {},
 }: ClosableAlertProps) => {
@@ -60,7 +66,10 @@ export const ClosableAlert = ({
         sx={styles.closeButton}
       />
       <AlertIcon variant={variant} />
-      {children}
+      <Flex direction="column" gap={title ? 2 : undefined} textAlign="left">
+        {title && <Box fontWeight="bold">{title}</Box>}
+        <Box marginRight={1}>{children}</Box>
+      </Flex>
     </BaseAlert>
   );
 };

package/src/alert/ExpandableAlert.tsx

@@ -63,6 +63,7 @@ export const ExpandableAlert = ({
             >
               <Flex as={headingLevel} alignItems="center">
                 <AlertIcon variant={variant} />
+
                 <Box
                   as="span"
                   sx={{
@@ -72,11 +73,12 @@ export const ExpandableAlert = ({
                     "-webkit-line-clamp": "1",
                     "-webkit-box-orient": "vertical",
                   }}
+                  color="darkGrey"
                 >
                   {title}
                 </Box>
               </Flex>
-              <AccordionIcon />
+              <AccordionIcon color="darkGrey" />
             </Flex>
           </AccordionButton>
           <AccordionPanel>{children}</AccordionPanel>

package/src/alert/StaticAlert.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { AlertIcon } from "./AlertIcon";
 import { BaseAlert, BaseAlertProps } from "./BaseAlert";
+import { Box, Flex } from "@chakra-ui/react";
 
 type StaticAlertProps = BaseAlertProps;
 
@@ -15,11 +16,18 @@ type StaticAlertProps = BaseAlertProps;
  * </StaticAlert>
  * ```
  */
-export const StaticAlert = ({ children, ...props }: StaticAlertProps) => {
+export const StaticAlert = ({
+  children,
+  title,
+  ...props
+}: StaticAlertProps) => {
   return (
     <BaseAlert {...props}>
       <AlertIcon variant={props.variant} />
-      {children}
+      <Flex direction="column" gap={title ? 2 : undefined} textAlign="left">
+        {title && <Box fontWeight="bold">{title}</Box>}
+        <Box>{children}</Box>
+      </Flex>
     </BaseAlert>
   );
 };

package/src/input/InfoSelect.tsx

@@ -1,6 +1,8 @@
 import {
   Box,
   chakra,
+  Flex,
+  FormLabel,
   ResponsiveValue,
   useFormControlProps,
   useMultiStyleConfig,
@@ -11,7 +13,7 @@ import {
 } from "@vygruppen/spor-icon-react";
 import React, { useRef } from "react";
 import { HiddenSelect, useButton, useSelect } from "react-aria";
-import { useSelectState } from "react-stately";
+import { Column, useSelectState } from "react-stately";
 import { createTexts, useTranslation } from "../";
 import { ListBox } from "./ListBox";
 import { Popover } from "./Popover";
@@ -152,13 +154,11 @@ type InfoSelectProps<T extends object> = {
  */
 export function InfoSelect<T extends object>({
   placeholder,
-  width = "100%",
-  height = "auto",
   onChange,
   value,
   isLabelSrOnly,
   defaultValue,
-  variant = "base",
+  variant,
   ...props
 }: InfoSelectProps<T>) {
   const renamedProps = {
@@ -188,11 +188,10 @@ export function InfoSelect<T extends object>({
   const { t } = useTranslation();
   const formControl = useFormControlProps(props);
 
+  const hasChosenValue = state.selectedItem !== null;
+
   return (
     <Box sx={styles.container}>
-      <chakra.div {...labelProps} sx={styles.label}>
-        {props.label}
-      </chakra.div>
       <HiddenSelect
         state={state}
         triggerRef={triggerRef}
@@ -205,17 +204,37 @@ export function InfoSelect<T extends object>({
         ref={triggerRef}
         sx={styles.button}
         {...buttonProps}
-        width={width}
-        height={height}
         data-attachable
         aria-invalid={formControl.isInvalid}
         aria-describedby={formControl["aria-describedby"]}
       >
-        <Box {...valueProps}>
-          {state.selectedItem
-            ? state.selectedItem.textValue ?? state.selectedItem.rendered
-            : placeholder ?? t(texts.selectAnOption)}
-        </Box>
+        <chakra.div sx={styles.innerButton}>
+          <chakra.div
+            {...labelProps}
+            sx={{
+              ...styles.label,
+              ...(hasChosenValue && {
+                transform: "scale(0.825) translateY(-10px) translateX(-10%)",
+                transitionProperty: "var(--spor-transition-property-common)",
+                transitionDuration: "var(--spor-transition-duration-normal)",
+              }),
+            }}
+          >
+            {props.label}
+          </chakra.div>
+          <Box
+            {...valueProps}
+            h={!hasChosenValue ? "0px" : "18px"}
+            hidden={!hasChosenValue}
+            transform={"scale(1) translateY(-10px)"}
+            transitionProperty={"var(--spor-transition-property-common)"}
+            transitionDuration={"var(--spor-transition-duration-normal)"}
+          >
+            {state.selectedItem
+              ? state.selectedItem.textValue ?? state.selectedItem.rendered
+              : placeholder ?? t(texts.selectAnOption)}
+          </Box>
+        </chakra.div>
         <Box sx={styles.arrowIcon}>
           {state.isOpen ? <DropdownUpFill24Icon /> : <DropdownDownFill24Icon />}
         </Box>

package/src/input/ListBox.tsx

@@ -185,6 +185,7 @@ const OptionContext = React.createContext<OptionContextValue>({
   labelProps: {},
   descriptionProps: {},
 });
+
 const useOptionContext = () => {
   return useContext(OptionContext);
 };

package/src/layout/PressableCard.tsx

@@ -9,7 +9,7 @@ import {
 
 type PressableCardProps = BoxProps & {
   /** Defaults to "base"  */
-  variant: "floating" | "accent" | "base";
+  variant?: "floating" | "accent" | "base";
 };
 
 /**
@@ -43,7 +43,7 @@ type PressableCardProps = BoxProps & {
  */
 
 export const PressableCard = forwardRef<PressableCardProps, As>(
-  ({ children, variant = "base", ...props }, ref) => {
+  ({ children, variant = "floating", ...props }, ref) => {
     const styles = useStyleConfig("PressableCard", {
       variant,
     });

package/src/layout/RadioCard.tsx

@@ -1,23 +1,15 @@
 import {
+  Box,
   BoxProps,
   UseRadioProps,
   chakra,
   forwardRef,
-  useRadio,
-  useStyleConfig,
+  useMultiStyleConfig,
 } from "@chakra-ui/react";
-import { dataAttr } from "@chakra-ui/utils";
 import React, { useId } from "react";
 
-export type RadioCardProps = UseRadioProps &
-  BoxProps & {
-    children: React.ReactNode;
-    /** Defaults to "base" */
-    variant: "floating" | "base";
-  };
-
 /**
- * Renders a radio card.
+ * Radio cards are used to present a set of options where only one option can be selected.
  *
  * The most basic version looks like this:
  *
@@ -27,6 +19,14 @@ export type RadioCardProps = UseRadioProps &
  * </RadioCard>
  * ```
  *
+ * In order to use RadioCard outside a RadioCardGroup, you need to pass the `isChecked` and `onChange` props.
+ *
+ * ```tsx
+ * <RadioCard isChecked={true} onChange={(e) => console.log(e.target.value)}>
+ *  Content
+ * </RadioCard>
+ * ```
+ *
  * In order to use RadioCard, you typically want to place these components in a group with several other RadioCards.
  *
  * ```tsx
@@ -59,38 +59,47 @@ export type RadioCardProps = UseRadioProps &
  * ```
  */
 
-export const RadioCard = forwardRef<RadioCardProps, "div">(
-  ({ children, variant = "base", ...props }, ref) => {
-    const { getInputProps, getRadioProps, getRootProps, state } =
-      useRadio(props);
-
-    const styles = useStyleConfig("RadioCard", { variant });
+export type RadioCardProps = UseRadioProps &
+  BoxProps & {
+    children: React.ReactNode;
+    /** Defaults to "base" */
+    variant?: "floating" | "base";
+    /** Needs to be defined if RadioCard is used outside RadioCardGroup */
+    isChecked?: boolean;
+    /** Needs to be defined if RadioCard is used outside RadioCardGroup */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  };
 
-    const input = getInputProps({}, ref);
-    const radio = getRadioProps();
+export const RadioCard = forwardRef<RadioCardProps, "div">(
+  ({ children, variant = "base", isChecked, onChange, ...props }, ref) => {
+    const styles = useMultiStyleConfig("RadioCard", { variant });
 
     const id = `radio-card-${useId()}`;
 
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      onChange && onChange(event);
+    };
+
     return (
-      <chakra.label
-        htmlFor={id}
-        {...getRootProps()}
-        aria-label={String(children)}
-      >
-        <chakra.input {...input} id={id} disabled={state.isDisabled} />
-        <chakra.div
-          __css={styles}
-          {...radio}
-          data-checked={dataAttr(state.isChecked)}
-          data-hover={dataAttr(state.isHovered)}
-          data-focus={dataAttr(state.isFocused)}
-          data-active={dataAttr(state.isActive)}
-          data-disabled={dataAttr(state.isDisabled)}
+      <Box as="label" htmlFor={id} aria-label={String(children)} ref={ref}>
+        <chakra.input
+          type="radio"
+          id={id}
+          checked={isChecked}
+          onChange={handleChange}
+          {...props}
+          sx={styles.radioInput}
+        />
+        <Box
           {...props}
+          __css={{
+            ...styles.container,
+            ...(isChecked && styles.checked),
+          }}
         >
           {children}
-        </chakra.div>
-      </chakra.label>
+        </Box>
+      </Box>
     );
   },
 );

package/src/layout/RadioCardGroup.tsx

@@ -4,7 +4,7 @@ import {
   StackDirection,
   Stack,
 } from "@chakra-ui/react";
-import React, { Children } from "react";
+import React from "react";
 import { RadioCard, RadioCardProps } from "./RadioCard";
 
 type RadioCardGroupProps = RadioGroupProps & {
@@ -75,17 +75,21 @@ export const RadioCardGroup = ({
     ...props,
   });
 
-  const group = getRootProps();
+  const rootProps = getRootProps();
 
   return (
-    <Stack direction={direction} {...group}>
+    <Stack direction={direction} {...rootProps}>
       {recursiveMap(children, (child: React.ReactElement) => {
         if (child.type === RadioCard) {
-          const radio = getRadioProps({ value: child.props.value });
+          const radioProps = getRadioProps({ value: child.props.value });
           const variantValue = variant as "base" | "floating" | undefined;
           return React.cloneElement(
             child as React.ReactElement<RadioCardProps>,
-            { ...radio, variant: variantValue, ...props },
+            {
+              ...radioProps,
+              variant: variantValue,
+              ...props,
+            },
           );
         }
         return child;

package/src/layout/StaticCard.tsx

@@ -70,7 +70,6 @@ export const StaticCard = forwardRef<StaticCardProps, As>(
     return (
       <Box __css={styles} {...props} ref={ref}>
         {children}
-        <Card />
       </Box>
     );
   },

package/src/theme/components/alert.ts

@@ -22,6 +22,7 @@ const config = helpers.defineMultiStyleConfig({
       position: "absolute",
       top: 1,
       right: 1,
+      color: "darkGrey",
     },
   },
   variants: {

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

@@ -19,18 +19,28 @@ const config = helpers.defineMultiStyleConfig({
     container: {},
     label: {
       position: "relative",
+      fontSize: ["mobile.xs", "desktop.sm"],
       ...(props.isLabelSrOnly ? srOnly : {}),
     },
+    innerButton: {
+      display: "flex",
+      flexDir: "column",
+      alignItems: "start",
+      justifyContent: "start",
+    },
     button: {
+      display: "flex",
       appearance: "none",
+      width: "100%",
+      height: "54px",
       borderTopRadius: "sm",
       borderBottomRadius: props.isOpen ? 0 : "sm",
       paddingY: 1.5,
       paddingX: 3,
-      display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
       fontSize: "mobile.md",
+      h: 8,
       ...baseBorder("default", props),
       _hover: {
         ...baseBorder("hover", props),
@@ -48,6 +58,7 @@ const config = helpers.defineMultiStyleConfig({
         ...baseBorder("invalid", props),
       },
     },
+    placeholder: {},
     arrowIcon: {},
   }),
   variants: {

package/src/theme/components/listbox.ts

@@ -2,7 +2,7 @@ import { anatomy } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { mode } from "@chakra-ui/theme-tools";
 import { baseBorder } from "../utils/base-utils";
-import { ghostBackground } from "../utils/ghost-utils";
+import { ghostBackground, ghostText } from "../utils/ghost-utils";
 import { surface } from "../utils/surface-utils";
 
 const parts = anatomy("ListBox").parts(
@@ -32,7 +32,7 @@ const config = helpers.defineMultiStyleConfig({
       marginY: 1,
       marginX: 1,
       borderRadius: "sm",
-      color: mode("darkGrey", "white")(props),
+      ...ghostText("default", props),
       cursor: "pointer",
       outline: "none",
       _active: {
@@ -45,15 +45,15 @@ const config = helpers.defineMultiStyleConfig({
         ...ghostBackground("selected", props),
       },
       _selected: {
-        ...ghostBackground("selected", props),
+        ...ghostBackground("active", props),
       },
     },
     label: {},
     description: {
       fontSize: ["mobile.xs", "desktop.xs"],
-      color: mode("dimGrey", "silver")(props),
+      ...ghostText("default", props),
       "[aria-selected='true'] &": {
-        color: mode("lightGrey", "platinum")(props),
+        ...ghostText("selected", props),
       },
     },
   }),

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

@@ -13,9 +13,14 @@ const config = defineStyleConfig({
     display: "block",
     borderRadius: "md",
     cursor: "pointer",
-    ...focusVisibleStyles(props),
+    transitionProperty: "common",
+    transitionDuration: "fast",
+    "button&, a&, label&, &.is-clickable": {
+      ...focusVisibleStyles(props),
+    },
     _disabled: {
       ...baseBackground("disabled", props),
+      ...baseBorder("disabled", props),
       ...baseText("disabled", props),
       outline: "none",
       pointerEvents: "none",
@@ -23,6 +28,7 @@ const config = defineStyleConfig({
   }),
   variants: {
     base: (props) => ({
+      cursor: "pointer",
       ...baseBorder("default", props),
       _hover: {
         ...baseBorder("hover", props),
@@ -37,7 +43,7 @@ const config = defineStyleConfig({
       boxShadow: "sm",
       _hover: {
         ...accentBackground("hover", props),
-        boxShadow: "sm",
+        boxShadow: "md",
       },
       _active: {
         ...accentBackground("active", props),
@@ -46,6 +52,7 @@ const config = defineStyleConfig({
     }),
     floating: (props) => ({
       ...floatingBackground("default", props),
+      ...floatingBorder("default", props),
       boxShadow: "sm",
       _hover: {
         ...floatingBackground("hover", props),
@@ -53,6 +60,7 @@ const config = defineStyleConfig({
         boxShadow: "md",
       },
       _active: {
+        ...floatingBorder("default", props),
         ...floatingBackground("active", props),
         boxShadow: "none",
       },