@vygruppen/spor-react 12.14.2 → 12.15.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.14.2",
+  "version": "12.15.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -68,8 +68,8 @@
     "vitest": "^0.26.3",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.2.2",
-    "@vygruppen/tsconfig": "0.1.1",
-    "@vygruppen/eslint-config": "1.2.3"
+    "@vygruppen/eslint-config": "1.2.3",
+    "@vygruppen/tsconfig": "0.1.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",

package/src/alert/AlertIcon.tsx

@@ -26,49 +26,64 @@ type AlertIconProps = {
  * Internal component that shows the correct icon for the alert
  */
 export const AlertIcon = forwardRef<SVGSVGElement, AlertIconProps>(
-  ({ variant, customIcon }, ref) => {
+  ({ variant, customIcon: CustomAlertIcon }, ref) => {
     const { t } = useTranslation();
 
-    const Icon = customIcon ?? getIcon(variant);
-
     return (
       <Box
-        as={Icon}
+        asChild
         ref={ref}
         aria-label={t(texts[variant as keyof typeof texts])}
-        color={customIcon ? `alert.${variant}.icon` : undefined}
-      />
+      >
+        {CustomAlertIcon ? (
+          <CustomAlertIcon color={`alert.${variant}.icon`} />
+        ) : (
+          <BaseAlertIcon variant={variant} />
+        )}
+      </Box>
     );
   },
 );
 
 AlertIcon.displayName = "AlertIcon";
 
-const getIcon = (variant: AlertProps["variant"]) => {
+const BaseAlertIcon = ({ variant }: { variant: AlertProps["variant"] }) => {
+  const css = {
+    "& path:first-of-type": {
+      fill: `alert.${variant}.icon`,
+    },
+    "& path:not(:first-of-type)": {
+      fill: `alert.${variant}.surface`,
+    },
+  };
+
   switch (variant) {
     case "info": {
-      return InformationFill24Icon;
+      return <InformationFill24Icon css={css} />;
     }
     case "success": {
-      return SuccessFill24Icon;
+      return <SuccessFill24Icon css={css} />;
     }
     case "important": {
-      return WarningFill24Icon;
+      return <WarningFill24Icon />;
     }
     case "alt": {
-      return AltTransportFill24Icon;
+      return <AltTransportFill24Icon css={css} />;
     }
     case "error": {
-      return ErrorFill24Icon;
+      return <ErrorFill24Icon css={css} />;
     }
     case "error-secondary": {
-      return ErrorOutline24Icon;
+      return <ErrorOutline24Icon css={css} />;
     }
     case "neutral": {
-      return QuestionFill24Icon;
+      return <QuestionFill24Icon css={css} />;
     }
     case "service": {
-      return ServiceFill24Icon;
+      return <ServiceFill24Icon />;
+    }
+    default: {
+      return <InformationFill24Icon css={css} />;
     }
   }
 };

package/src/datepicker/CalendarCell.tsx

@@ -11,6 +11,8 @@ import { PropsWithChildren, useEffect, useRef } from "react";
 import { useCalendarCell } from "react-aria";
 import { CalendarState, RangeCalendarState } from "react-stately";
 
+import { spor } from "@/util";
+
 import { DatePickerVariantProps } from "./DatePicker";
 import { CalendarVariants } from "./types";
 
@@ -74,8 +76,8 @@ export function CalendarCell({
 
   return (
     <Box as="td" {...cellProps} textAlign="center" css={styles.cell}>
-      <Box
-        as="button"
+      <spor.button
+        type="button" // Prevents form submission
         {...buttonProps}
         {...stateProps}
         ref={ref}
@@ -83,7 +85,7 @@ export function CalendarCell({
         hidden={isOutsideVisibleRange}
       >
         {date.day}
-      </Box>
+      </spor.button>
     </Box>
   );
 }

package/src/dialog/Drawer.tsx

@@ -19,6 +19,7 @@ import { ResponsiveButton } from "@/button/ResponsiveButton";
 import { CloseButton } from "../button";
 import { createTexts, useTranslation } from "../i18n";
 import {
+  DrawerCloseTriggerProps,
   DrawerContentProps,
   DrawerFullScreenHeaderProps,
   DrawerProps,
@@ -56,7 +57,13 @@ const [RootDrawerProvider, useRootDrawerProps] =
 
 export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
   (props, ref) => {
-    const { children, portalled = true, portalRef, ...rest } = props;
+    const {
+      children,
+      portalled = true,
+      portalRef,
+      hideHandle = false,
+      ...rest
+    } = props;
     const { size, placement } = useRootDrawerProps();
     const { setOpen } = useDialogContext();
     const handlers = useSwipeable({
@@ -73,14 +80,20 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
       swipeDuration: 250,
     });
     const sizeNotFull = size !== "full";
+    const showHandle = !hideHandle;
+
     return (
       <Portal disabled={!portalled} container={portalRef}>
         <ChakraDrawer.Positioner asChild>
           <Box {...handlers} width="100%">
             <ChakraDrawer.Content ref={ref} {...rest}>
-              {sizeNotFull && placement === "bottom" && <CloseDrawerLine />}
+              {showHandle && sizeNotFull && placement === "bottom" && (
+                <CloseDrawerLine />
+              )}
               {children}
-              {sizeNotFull && placement === "top" && <CloseDrawerLine />}
+              {showHandle && sizeNotFull && placement === "top" && (
+                <CloseDrawerLine />
+              )}
             </ChakraDrawer.Content>
           </Box>
         </ChakraDrawer.Positioner>
@@ -109,13 +122,14 @@ CloseDrawerLine.displayName = "CloseDrawerLine";
 
 export const DrawerCloseTrigger = forwardRef<
   HTMLButtonElement,
-  ChakraDrawer.CloseTriggerProps
+  DrawerCloseTriggerProps
 >(function DrawerCloseTrigger(props, ref) {
+  const { showText = false, ...rest } = props;
   const { size } = useRootDrawerProps();
   const { t } = useTranslation();
   return (
-    <ChakraDrawer.CloseTrigger ref={ref} {...props} asChild>
-      {size === "full" ? (
+    <ChakraDrawer.CloseTrigger ref={ref} {...rest} asChild>
+      {showText || size === "full" ? (
         <ResponsiveButton
           variant="ghost"
           icon={<CloseFill24Icon />}

package/src/dialog/types.ts

@@ -10,6 +10,7 @@ export type DrawerContentProps = ChakraDrawer.ContentProps &
     children: React.ReactNode;
     portalled?: boolean;
     portalRef?: React.RefObject<HTMLElement>;
+    hideHandle?: boolean;
   };
 
 export type DrawerProps = Omit<
@@ -28,3 +29,7 @@ export type DrawerFullScreenHeaderProps = Omit<
   backTrigger?: boolean;
   closeTrigger?: boolean;
 };
+
+export type DrawerCloseTriggerProps = ChakraDrawer.CloseTriggerProps & {
+  showText?: boolean;
+};