@vygruppen/spor-react 12.14.1 → 12.15.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.14.1",
+  "version": "12.15.0",
   "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.2.0",
-    "@vygruppen/spor-loader": "0.7.0",
-    "@vygruppen/spor-icon-react": "4.2.1"
+    "@vygruppen/spor-icon-react": "4.2.1",
+    "@vygruppen/spor-loader": "0.7.0"
   },
   "devDependencies": {
     "@react-types/datepicker": "^3.10.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/button/ResponsiveButton.tsx

@@ -0,0 +1,27 @@
+import { Button, ButtonProps } from "./Button";
+import { IconButton, IconButtonProps } from "./IconButton";
+
+/**
+ * For internal use
+ */
+
+type Props = IconButtonProps &
+  Omit<ButtonProps, "leftIcon" | "rightIcon"> & {
+    label: string;
+  };
+
+export const ResponsiveButton = ({ label, icon, ...props }: Props) => {
+  return (
+    <>
+      <Button display={["none", "flex"]} leftIcon={icon} {...props}>
+        {label}
+      </Button>
+      <IconButton
+        display={["flex", "none"]}
+        aria-label={label}
+        icon={icon}
+        {...props}
+      />
+    </>
+  );
+};

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

@@ -4,8 +4,6 @@ import {
   Box,
   createContext,
   Drawer as ChakraDrawer,
-  Grid,
-  GridItem,
   Portal,
   useDialogContext,
 } from "@chakra-ui/react";
@@ -16,9 +14,12 @@ import {
 import { forwardRef } from "react";
 import { useSwipeable } from "react-swipeable";
 
-import { Button, CloseButton } from "../button";
+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,16 +122,19 @@ 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" ? (
-        <Button variant="ghost" leftIcon={<CloseFill24Icon />}>
-          {t(texts.close)}
-        </Button>
+    <ChakraDrawer.CloseTrigger ref={ref} {...rest} asChild>
+      {showText || size === "full" ? (
+        <ResponsiveButton
+          variant="ghost"
+          icon={<CloseFill24Icon />}
+          label={t(texts.close)}
+        />
       ) : (
         <CloseButton size="md" />
       )}
@@ -132,10 +148,12 @@ export const DrawerBackTrigger = forwardRef<
 >((props, ref) => {
   const { t } = useTranslation();
   return (
-    <ChakraDrawer.CloseTrigger asChild {...props} ref={ref} top="0">
-      <Button variant="ghost" leftIcon={<ArrowLeftFill24Icon />}>
-        {t(texts.back)}
-      </Button>
+    <ChakraDrawer.CloseTrigger asChild {...props} ref={ref}>
+      <ResponsiveButton
+        variant="ghost"
+        icon={<ArrowLeftFill24Icon />}
+        label={t(texts.back)}
+      />
     </ChakraDrawer.CloseTrigger>
   );
 });
@@ -147,20 +165,10 @@ export const DrawerFullScreenHeader = forwardRef<
 >((props, ref) => {
   const { backTrigger = true, closeTrigger = true, children } = props;
   return (
-    <ChakraDrawer.Header {...props} ref={ref} asChild>
-      <Grid templateColumns="1fr auto 1fr" height="auto" paddingX="8">
-        <GridItem width="full" alignSelf="center">
-          {backTrigger && <DrawerBackTrigger />}
-        </GridItem>
-        <GridItem width="full" alignSelf="end" asChild>
-          {children && <DrawerTitle>{children}</DrawerTitle>}
-        </GridItem>
-        {closeTrigger && (
-          <GridItem width="full" alignSelf="end">
-            <DrawerCloseTrigger justifySelf="end" top="0" />
-          </GridItem>
-        )}
-      </Grid>
+    <ChakraDrawer.Header {...props} ref={ref}>
+      <Box>{backTrigger && <DrawerBackTrigger />}</Box>
+      {<DrawerTitle>{children}</DrawerTitle>}
+      <Box> {closeTrigger && <DrawerCloseTrigger />}</Box>
     </ChakraDrawer.Header>
   );
 });

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;
+};

package/src/input/Switch.tsx

@@ -78,7 +78,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
           <ChakraSwitch.Control css={styles.control}>
             <ChakraSwitch.Thumb />
           </ChakraSwitch.Control>
-          <ChakraSwitch.Label>{label}</ChakraSwitch.Label>
+          {label && <ChakraSwitch.Label>{label}</ChakraSwitch.Label>}
         </ChakraSwitch.Root>
       </Field>
     );

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

@@ -59,7 +59,8 @@ export const drawerSlotRecipe = defineSlotRecipe({
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
-      paddingX: ["3", null, null, "5"],
+      paddingX: ["2", null, null, "5"],
+      gap: "1",
       paddingBottom: "1",
     },
     body: {