@vygruppen/spor-react 12.10.2 → 12.10.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.10.2",
+  "version": "12.10.4",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -47,8 +47,8 @@
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
     "@vygruppen/spor-design-tokens": "4.0.8",
-    "@vygruppen/spor-icon-react": "4.2.1",
-    "@vygruppen/spor-loader": "0.7.0"
+    "@vygruppen/spor-loader": "0.7.0",
+    "@vygruppen/spor-icon-react": "4.2.1"
   },
   "devDependencies": {
     "@react-types/datepicker": "^3.10.0",

package/src/alert/Alert.tsx

@@ -81,6 +81,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
         </HStack>
         {children && (
           <ChakraAlert.Description
+            width="100%"
             paddingLeft={title ? 0.5 : 0}
             paddingRight={closable ? 6 : 0}
           >

package/src/datepicker/TimeField.tsx

@@ -30,9 +30,16 @@ export const TimeField = ({ state, ...props }: TimeFieldProps) => {
         style={{
           marginBottom: 0,
           fontSize: "mobile.xs",
+          top: 0,
           cursor: "text",
+          left: "50%",
+          transform: "translateX(-50%)",
           position: "absolute",
           paddingTop: "2px",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          maxWidth: "80%",
         }}
       >
         {props.label}

package/src/datepicker/TimePicker.tsx

@@ -146,6 +146,7 @@ export const TimePicker = ({
         aria-disabled={isDisabled}
         aria-live="assertive"
         aria-label={ariaLabel}
+        position="relative"
         {...boxProps}
       >
         <IconButton
@@ -158,6 +159,7 @@ export const TimePicker = ({
           onClick={handleBackwardsClick}
           disabled={isDisabled}
           style={isDisabled ? { backgroundColor: "transparent" } : {}}
+          zIndex={1}
         />
         <TimeField label={label} state={state} name={name} />
         <IconButton
@@ -170,6 +172,7 @@ export const TimePicker = ({
           onClick={handleForwardClick}
           disabled={isDisabled}
           style={isDisabled ? { backgroundColor: "transparent" } : {}}
+          zIndex={1}
         />
       </StyledField>
     </Field>

package/src/dialog/Drawer.tsx

@@ -145,7 +145,7 @@ export const DrawerFullScreenHeader = forwardRef<
   HTMLDivElement,
   DrawerFullScreenHeaderProps
 >((props, ref) => {
-  const { backTrigger = true, title } = props;
+  const { backTrigger = true, closeTrigger = true, title } = props;
   return (
     <ChakraDrawer.Header {...props} ref={ref} asChild>
       <Grid templateColumns="1fr auto 1fr" height="auto" paddingX="8">
@@ -155,9 +155,11 @@ export const DrawerFullScreenHeader = forwardRef<
         <GridItem width="full" alignSelf="end" asChild>
           {title && <DrawerTitle>{title}</DrawerTitle>}
         </GridItem>
-        <GridItem width="full" alignSelf="end">
-          <DrawerCloseTrigger justifySelf="end" top="0" />
-        </GridItem>
+        {closeTrigger && (
+          <GridItem width="full" alignSelf="end">
+            <DrawerCloseTrigger justifySelf="end" top="0" />
+          </GridItem>
+        )}
       </Grid>
     </ChakraDrawer.Header>
   );

package/src/dialog/types.ts

@@ -23,5 +23,6 @@ export type DrawerProps = Omit<
 
 export type DrawerFullScreenHeaderProps = ChakraDrawer.HeaderProps & {
   backTrigger?: boolean;
+  closeTrigger?: boolean;
   title?: string;
 };

package/src/layout/RadioCard.tsx

@@ -40,15 +40,11 @@ type RadioCardItemProps = Exclude<
 
 export const RadioCard = forwardRef<HTMLInputElement, RadioCardItemProps>(
   (props, ref) => {
-    const { inputProps, children, value, ariaLabel } = props;
+    const { inputProps, children } = props;
 
     return (
       <ChakraRadioCard.Item {...props}>
-        <ChakraRadioCard.ItemHiddenInput
-          aria-label={ariaLabel ?? value}
-          ref={ref}
-          {...inputProps}
-        />
+        <ChakraRadioCard.ItemHiddenInput ref={ref} {...inputProps} />
 
         <ChakraRadioCard.ItemControl>{children}</ChakraRadioCard.ItemControl>
       </ChakraRadioCard.Item>

package/src/linjetag/LineIcon.tsx

@@ -86,7 +86,7 @@ export const LineIcon = forwardRef<HTMLDivElement, LineIconProps>(
     };
 
     const borderContainer = () => {
-      return variant === "walk" && target === "travelTag" ? 0 : 0.5;
+      return variant === "walk" && target === "travelTag" ? 0 : "1px";
     };
 
     const Icon: React.ElementType = getCorrectIcon({

package/src/link/TextLink.tsx

@@ -59,7 +59,15 @@ export const TextLink = forwardRef<HTMLAnchorElement, LinkProps>(
     // If asChild is true, we need to clone the children and add the external icon
     if (props.asChild && isValidElement(children)) {
       return (
-        <ChakraLink href={href} {...props} ref={ref}>
+        <ChakraLink
+          href={href}
+          {...props}
+          ref={ref}
+          {...(isExternal && {
+            target: "_blank",
+            rel: "noopener noreferrer",
+          })}
+        >
           {cloneElement(children as React.ReactElement, {
             ...children.props,
             children: (
@@ -76,7 +84,15 @@ export const TextLink = forwardRef<HTMLAnchorElement, LinkProps>(
     }
 
     return (
-      <ChakraLink href={href} {...props} ref={ref}>
+      <ChakraLink
+        href={href}
+        {...props}
+        ref={ref}
+        {...(isExternal && {
+          target: "_blank",
+          rel: "noopener noreferrer",
+        })}
+      >
         {children}
         {isExternal && <ExternalIcon label={externalLabel} size={props.size} />}
       </ChakraLink>

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

@@ -45,7 +45,7 @@ export const drawerSlotRecipe = defineSlotRecipe({
       maxHeight: "100dvh",
       color: "inherit",
       boxShadow: "lg",
-      minHeight: ["50vh", null, null, "auto"],
+      minHeight: ["10rem", null, null, "auto"],
       _open: {
         animationDuration: "slowest",
         animationTimingFunction: "ease-in-smooth",
@@ -59,16 +59,16 @@ export const drawerSlotRecipe = defineSlotRecipe({
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
-      paddingX: "5",
+      paddingX: ["3", null, null, "5"],
       paddingBottom: "1",
     },
     body: {
-      paddingX: "5",
+      paddingX: ["3", null, null, "5"],
       paddingY: ["1", null, null, "2"],
       flex: "1",
       overflow: "auto",
       fontSize: ["xs", null, null, "sm"],
-      minHeight: ["12", null, null, "auto"],
+      minHeight: ["2", null, null, "auto"],
     },
     footer: {
       display: "flex",
@@ -85,8 +85,8 @@ export const drawerSlotRecipe = defineSlotRecipe({
     },
     closeTrigger: {
       position: "absolute",
-      top: "2",
-      insetEnd: "2",
+      top: "0",
+      right: "0",
     },
   },
   variants: {

package/src/theme/slot-recipes/line-icon.ts

@@ -79,6 +79,12 @@ export const lineIconSlotRecipe = defineSlotRecipe({
         title: {
           color: "text",
         },
+        iconContainer: {
+          backgroundColor: "none",
+        },
+        icon: {
+          color: "text",
+        },
       },
       custom: {
         iconContainer: {},

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

@@ -137,9 +137,10 @@ export const travelTagSlotRecipe = defineSlotRecipe({
       walk: {
         textContainer: {
           position: "absolute",
-          left: "1.3rem",
+          left: "0.875rem",
           bottom: 0,
         },
+
         title: {
           fontSize: "mobile.xs",
           fontWeight: "normal",