@vygruppen/spor-react 9.13.0 → 9.13.2

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,6 +14,7 @@ type RadioGroupContextProps = {
   onChange: (value: string) => void;
   variant?: "base" | "floating";
   defaultValue?: string;
+  value?: string;
 };
 
 export const RadioCardGroupContext =
@@ -27,6 +27,7 @@ type RadioCardGroupProps = BoxProps & {
   direction?: "row" | "column";
   groupLabel?: string;
   defaultValue?: string;
+  onChange?: (value: string) => void;
 };
 
 export const RadioCardGroup: React.FC<RadioCardGroupProps> = ({
@@ -36,6 +37,7 @@ export const RadioCardGroup: React.FC<RadioCardGroupProps> = ({
   direction = "row",
   groupLabel,
   defaultValue,
+  onChange,
   ...props
 }: RadioCardGroupProps) => {
   const [selectedValue, setSelectedValue] = useState<string>(
@@ -44,6 +46,7 @@ export const RadioCardGroup: React.FC<RadioCardGroupProps> = ({
 
   const handleChange = (value: string) => {
     setSelectedValue(value);
+    onChange && onChange(value);
   };
 
   return (
@@ -56,14 +59,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",
         },
       },
     }),