@vygruppen/spor-react 9.13.1 → 9.13.3

package/src/layout/RadioCard.tsx

@@ -5,7 +5,7 @@ import {
   forwardRef,
   useMultiStyleConfig,
 } from "@chakra-ui/react";
-import React, { useContext, useEffect, useId } from "react";
+import React, { useContext, useEffect, useId, useState } from "react";
 import { RadioCardGroupContext } from "./RadioCardGroup";
 
 /**
@@ -32,13 +32,16 @@ import { RadioCardGroupContext } from "./RadioCardGroup";
  */
 
 export type RadioCardProps = BoxProps & {
+  /** The value that will be passed to the `RadioCardGroup`'s `onChange` function if this `RadioCard` is selected.. */
   value: string;
+  /** The content of the RadioCard. */
   children: React.ReactNode;
+  /** Determines if the RadioCard is disabled. */
   isDisabled?: boolean;
 };
 
 export const RadioCard = forwardRef(
-  ({ children, value = "base", isDisabled, ...props }: RadioCardProps, ref) => {
+  ({ children, value, isDisabled, ...props }: RadioCardProps, ref) => {
     const context = useContext(RadioCardGroupContext);
 
     if (!context) {
@@ -51,57 +54,69 @@ export const RadioCard = forwardRef(
 
     const styles = useMultiStyleConfig("RadioCard", { variant });
 
+    const [isKeyboardUser, setKeyboardUser] = useState(false);
+    const [isFocused, setFocus] = useState(false);
+
     const isChecked = selectedValue === value;
 
-    const radioCardId = `radio-card-${useId()}`;
+    useEffect(() => {
+      const handleMouseDown = () => setKeyboardUser(false);
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key === " ") {
+          setFocus(false);
+        } else {
+          setKeyboardUser(true);
+        }
+      };
+
+      window.addEventListener("mousedown", handleMouseDown);
+      window.addEventListener("keydown", handleKeyDown);
+
+      return () => {
+        window.removeEventListener("mousedown", handleMouseDown);
+        window.removeEventListener("keydown", handleKeyDown);
+      };
+    }, []);
 
     useEffect(() => {
-      if (isChecked && typeof ref !== "function" && ref?.current) {
-        ref.current.focus();
+      if (isKeyboardUser && isChecked) {
+        setFocus(true);
+      } else {
+        setFocus(false);
       }
-    }, [isChecked]);
+    }, [isKeyboardUser, isChecked]);
 
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === "Enter" || event.key === " ") {
-        onChange(value);
-      }
-      if (
-        event.key === "ArrowRight" ||
-        event.key === "ArrowDown" ||
-        event.key === "ArrowLeft" ||
-        event.key === "ArrowUp"
-      ) {
-        const nextRadioCard = event.currentTarget
-          .nextElementSibling as HTMLElement;
-        if (nextRadioCard) {
-          nextRadioCard.focus();
-        }
-      }
-    };
+    const inputId = `radio-card-${useId()}`;
 
     return (
-      <Box as="label" aria-label={String(children)} onKeyDown={handleKeyDown}>
+      <Box
+        onFocus={() => isKeyboardUser && setFocus(true)}
+        onBlur={() => setFocus(false)}
+      >
         <chakra.input
           type="radio"
-          id={radioCardId}
-          ref={ref}
-          value={value}
+          id={inputId}
           name={name}
+          ref={ref}
           checked={isChecked}
           onChange={() => onChange(value)}
           disabled={isDisabled}
           __css={styles.radioInput}
         />
         <Box
-          {...props}
-          tabIndex={0}
-          ref={ref}
-          role="radio"
+          as="label"
+          name={name}
+          htmlFor={inputId}
           aria-checked={isChecked}
-          aria-labelledby={radioCardId}
-          __css={{ ...styles.container, ...(isChecked && styles.checked) }}
           data-checked={isChecked}
           data-disabled={isDisabled}
+          {...props}
+          __css={{
+            ...styles.container,
+            ...(isChecked && styles.checked),
+            ...(isFocused && !isChecked && styles.focused),
+            ...(isChecked && isFocused && styles.focusedChecked),
+          }}
         >
           {children}
         </Box>

package/src/layout/RadioCardGroup.tsx

@@ -1,7 +1,6 @@
 import { BoxProps, Stack } from "@chakra-ui/react";
 import React, { useState } from "react";
 import { FormLabel } from "../input";
-import { RadioCard } from "./RadioCard";
 
 /**
  * RadioCardGroupContext is used to pass down the state and handlers to the RadioCard components.
@@ -15,18 +14,26 @@ type RadioGroupContextProps = {
   onChange: (value: string) => void;
   variant?: "base" | "floating";
   defaultValue?: string;
+  value?: string;
 };
 
 export const RadioCardGroupContext =
   React.createContext<RadioGroupContextProps | null>(null);
 
 type RadioCardGroupProps = BoxProps & {
+  /** A string that will be assigned as the name attribute to all RadioCard components within the group. */
   name: string;
+  /** The RadioCard components that make up the group. */
   children: React.ReactNode;
+  /** Optional. Determines the style of the RadioCard. Can be either "base" or "floating". */
   variant?: "base" | "floating";
+  /** Optional. Determines the direction of the group. Can be either "row" or "column". */
   direction?: "row" | "column";
+  /** Optional. A label for the group. */
   groupLabel?: string;
+  /** Optional. The default value of the RadioCard group. */
   defaultValue?: string;
+  /** Optional. A function that will be called when the selected value changes. The function receives the value of the selected RadioCard. */
   onChange?: (value: string) => void;
 };
 
@@ -59,14 +66,7 @@ export const RadioCardGroup: React.FC<RadioCardGroupProps> = ({
         defaultValue: defaultValue || "",
       }}
     >
-      <Stack
-        as="fieldset"
-        direction={direction}
-        aria-labelledby={groupLabel || name}
-        role="radiogroup"
-        tabIndex={0}
-        {...props}
-      >
+      <Stack as="fieldset" direction={direction} {...props}>
         {groupLabel && (
           <FormLabel as="legend" id={groupLabel}>
             {groupLabel}

package/src/modal/FullScreenDrawer.tsx

@@ -15,6 +15,7 @@ import React, { useEffect, useState } from "react";
 import { Button, IconButton } from "../button";
 import { createTexts, useTranslation } from "../i18n";
 import { Drawer } from "./Drawer";
+import { DrawerBodyProps } from "./SimpleDrawer";
 
 type DrawerPlacement = "top" | "right" | "bottom" | "left";
 
@@ -33,6 +34,8 @@ type FullScreenDrawerProps = {
   isOpen: boolean;
   /** Function that will be called when the drawer closes */
   onClose: () => void;
+  /** Props for drawer body */
+  body?: DrawerBodyProps;
 };
 
 export const FullScreenDrawer = ({
@@ -43,6 +46,7 @@ export const FullScreenDrawer = ({
   rightButton = <DrawerCloseButton />,
   isOpen,
   onClose,
+  body,
 }: FullScreenDrawerProps) => {
   const [isContentBoxScrolled, setContentBoxScrolled] = useState(false);
 
@@ -75,7 +79,7 @@ export const FullScreenDrawer = ({
           leftButton={leftButton}
           rightButton={rightButton}
         />
-        <DrawerBody overflow="auto" onScroll={onContentScroll}>
+        <DrawerBody overflow="auto" onScroll={onContentScroll} {...body}>
           {children}
         </DrawerBody>
       </DrawerContent>

package/src/modal/SimpleDrawer.tsx

@@ -8,12 +8,18 @@ import {
   DrawerOverlay,
 } from "./Drawer";
 
+export type DrawerBodyProps = {
+  id?: string;
+};
+
 export type SimpleDrawerProps = {
   children: React.ReactNode;
   title?: React.ReactNode;
   placement: "top" | "right" | "bottom" | "left";
   isOpen: boolean;
   onClose: () => void;
+  /** Props for drawer body */
+  body?: DrawerBodyProps;
 };
 /** A very basic drawer component that's easy to use
  *
@@ -29,6 +35,7 @@ export const SimpleDrawer = ({
   placement,
   children,
   title,
+  body,
   ...props
 }: SimpleDrawerProps) => {
   return (
@@ -37,7 +44,7 @@ export const SimpleDrawer = ({
       <DrawerContent>
         <DrawerCloseButton />
         {title && <DrawerHeader>{title}</DrawerHeader>}
-        <DrawerBody>{children}</DrawerBody>
+        <DrawerBody {...body}>{children}</DrawerBody>
       </DrawerContent>
     </Drawer>
   );

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

@@ -1,25 +1,29 @@
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
 import { floatingBackground, floatingBorder } from "../utils/floating-utils";
-import { focusVisibleStyles } from "../utils/focus-utils";
-import { anatomy, mode } from "@chakra-ui/theme-tools";
+import { anatomy } from "@chakra-ui/theme-tools";
 import { outlineBorder } from "../utils/outline-utils";
 
-const parts = anatomy("radio-card").parts("container", "checked", "radioInput");
+const parts = anatomy("radio-card").parts(
+  "container",
+  "checked",
+  "radioInput",
+  "focused",
+  "focusedChecked",
+);
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 
 const config = helpers.defineMultiStyleConfig({
   baseStyle: (props: any) => ({
     container: {
-      border: "none",
       overflow: "hidden",
       fontSize: "inherit",
       display: "block",
       cursor: "pointer",
       borderRadius: "sm",
-      ...focusVisibleStyles(props),
       transitionProperty: "common",
       transitionDuration: "fast",
+
       _disabled: {
         pointerEvents: "none",
         ...baseBackground("disabled", props),
@@ -53,9 +57,6 @@ const config = helpers.defineMultiStyleConfig({
           ...baseBackground("active", props),
           ...baseBorder("active", props),
         },
-        _focus: {
-          ...outlineBorder("focus", props),
-        },
       },
       checked: {
         _hover: {
@@ -65,11 +66,22 @@ const config = helpers.defineMultiStyleConfig({
           ...baseBackground("active", props),
           ...baseBorder("active", props),
         },
-        _focus: {
-          outline: "4px solid",
-          outlineStyle: "double",
-          ...outlineBorder("focus", props),
-          outlineOffset: "-1px",
+      },
+      focusedChecked: {
+        outline: "4px solid",
+        outlineStyle: "double",
+        ...outlineBorder("focus", props),
+        outlineOffset: "-1px",
+      },
+      focused: {
+        outline: "2px solid",
+        ...outlineBorder("focus", props),
+        outlineOffset: "1px",
+        boxShadow: `inset 0 0 0 1px rgba(0, 0, 0, 0.40)`,
+        _hover: {
+          ...baseBorder("hover", props),
+          boxShadow: "none",
+          outlineOffset: "0px",
         },
       },
     }),
@@ -87,9 +99,6 @@ const config = helpers.defineMultiStyleConfig({
           ...floatingBackground("active", props),
           ...floatingBorder("active", props),
         },
-        _focus: {
-          ...outlineBorder("focus", props),
-        },
       },
       checked: {
         _hover: {
@@ -100,11 +109,22 @@ const config = helpers.defineMultiStyleConfig({
           ...floatingBackground("active", props),
           ...floatingBorder("active", props),
         },
-        _focus: {
-          outline: "4px solid",
-          outlineStyle: "double",
-          ...outlineBorder("focus", props),
-          outlineOffset: "-1px",
+      },
+      focusedChecked: {
+        outline: "4px solid",
+        outlineStyle: "double",
+        ...outlineBorder("focus", props),
+        outlineOffset: "-1px",
+      },
+      focused: {
+        outline: "2px solid",
+        ...outlineBorder("focus", props),
+        outlineOffset: "1px",
+        boxShadow: `inset 0 0 0 1px rgba(0, 0, 0, 0.10)`,
+        _hover: {
+          ...floatingBorder("hover", props),
+          boxShadow: "md",
+          outlineOffset: "0px",
         },
       },
     }),

package/src/theme/font-faces.ts

@@ -63,4 +63,7 @@ export const fontFaces = `
   font-weight: 400;
   font-display: swap
 }
+  body {
+    font-family: "Vy Sans", sans-serif;
+  }
 `;