@vygruppen/spor-react 9.13.1 → 9.13.2

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",
         },
       },
     }),