@vygruppen/spor-react 3.7.3 → 3.7.5

package/src/button/FloatingActionButton.tsx

@@ -1,6 +1,12 @@
-import { Box, BoxProps, useMultiStyleConfig } from "@chakra-ui/react";
+import {
+  Box,
+  BoxProps,
+  ComponentWithAs,
+  forwardRef,
+  useMultiStyleConfig,
+} from "@chakra-ui/react";
 import { motion } from "framer-motion";
-import React from "react";
+import React, { useEffect } from "react";
 
 const MotionBox = motion(Box);
 
@@ -24,76 +30,85 @@ type FloatingActionButtonProps = BoxProps & {
  *  placement="bottom right"
  * />
  */
-export const FloatingActionButton = ({
-  children,
-  icon,
-  variant,
-  isTextVisible: externalIsTextVisible,
-  placement = "bottom right",
-  ...props
-}: FloatingActionButtonProps) => {
-  const [isTextVisible, setIsTextVisible] = React.useState(
-    externalIsTextVisible !== undefined ? externalIsTextVisible : true
-  );
-  const scrollDirection = useScrollDirection();
-  React.useEffect(() => {
-    if (externalIsTextVisible !== undefined) {
-      return;
-    }
-    const id = window.setTimeout(
-      () => setIsTextVisible(scrollDirection !== "down"),
-      1000
+export const FloatingActionButton = forwardRef<
+  FloatingActionButtonProps,
+  ComponentWithAs<"a" | "button">
+>(
+  (
+    {
+      as,
+      children,
+      icon,
+      variant,
+      isTextVisible: externalIsTextVisible,
+      placement = "bottom right",
+      ...props
+    },
+    ref
+  ) => {
+    const [isTextVisible, setIsTextVisible] = React.useState(
+      externalIsTextVisible !== undefined ? externalIsTextVisible : false
     );
-    return () => window.clearTimeout(id);
-  }, [scrollDirection, externalIsTextVisible]);
+    const scrollDirection = useScrollDirection();
+    useEffect(() => {
+      if (externalIsTextVisible !== undefined) {
+        return;
+      }
+      const id = window.setTimeout(
+        () => setIsTextVisible(scrollDirection !== "down"),
+        1000
+      );
+      return () => window.clearTimeout(id);
+    }, [scrollDirection, externalIsTextVisible]);
 
-  React.useEffect(() => {
-    setIsTextVisible(!!externalIsTextVisible);
-  }, [externalIsTextVisible]);
+    useEffect(() => {
+      setIsTextVisible(!!externalIsTextVisible);
+    }, [externalIsTextVisible]);
 
-  const style = useMultiStyleConfig("FloatingActionButton", {
-    variant,
-    isTextVisible,
-    placement,
-  });
-  return (
-    <MotionBox
-      __css={style.container}
-      as="button"
-      aria-label={children}
-      {...props}
-    >
-      <Box __css={style.icon}>
-        {icon}
-      </Box>
+    const style = useMultiStyleConfig("FloatingActionButton", {
+      variant,
+      isTextVisible,
+      placement,
+    });
+    return (
       <MotionBox
-        animate={isTextVisible ? "show" : "hide"}
-        initial="show"
-        variants={{
-          show: {
-            opacity: 1,
-            width: "auto",
-            visibility: "visible",
-          },
-          hide: {
-            opacity: 0,
-            width: 0,
-            visibility: "hidden",
-          },
-        }}
-        __css={style.text}
+        __css={style.container}
+        aria-label={children}
+        ref={ref}
+        {...props}
       >
-        {children}
+        <Box __css={style.icon}>{icon}</Box>
+        <MotionBox
+          animate={isTextVisible ? "show" : "hide"}
+          initial={externalIsTextVisible ? "show" : "hide"}
+          variants={{
+            show: {
+              opacity: 1,
+              width: "auto",
+              visibility: "visible",
+            },
+            hide: {
+              opacity: 0,
+              width: 0,
+              visibility: "hidden",
+            },
+          }}
+          __css={style.text}
+        >
+          {children}
+        </MotionBox>
       </MotionBox>
-    </MotionBox>
-  );
-};
+    );
+  }
+);
 
 type ScrollDirection = "up" | "down" | null;
 const useScrollDirection = () => {
   const [scrollDirection, setScrollDirection] =
     React.useState<ScrollDirection>(null);
-  const lastScrollPosition = React.useRef(typeof window !== "undefined" ? window.scrollY : 0);
+  const lastScrollPosition = React.useRef(
+    typeof window !== "undefined" ? window.scrollY : 0
+  );
   React.useEffect(() => {
     const onScroll = () => {
       const delta = window.scrollY - lastScrollPosition.current;

package/src/input/ChoiceChip.tsx

@@ -83,6 +83,8 @@ export const ChoiceChip = forwardRef((props: ChoiceChipProps, ref) => {
         data-checked={dataAttr(state.isChecked)}
         data-hover={dataAttr(state.isHovered)}
         data-focus={dataAttr(state.isFocused)}
+        data-active={dataAttr(state.isActive)}
+        data-disabled={dataAttr(state.isDisabled)}
       >
         {icon && (
           <chakra.span __css={styles.icon}>

package/src/theme/components/accordion.ts

@@ -1,12 +1,13 @@
 import { accordionAnatomy as parts } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
-import { colors } from "../foundations";
+import { colors, shadows } from "../foundations";
 import { getBoxShadowString } from "../utils/box-shadow-utils";
 import { focusVisible } from "../utils/focus-utils";
+import { mode } from "@chakra-ui/theme-tools";
 
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 const config = helpers.defineMultiStyleConfig({
-  baseStyle: {
+  baseStyle: (props) => ({
     container: {
       border: "none",
       borderRadius: "sm",
@@ -19,7 +20,7 @@ const config = helpers.defineMultiStyleConfig({
       borderRadius: "sm",
       display: "flex",
       justifyContent: "space-between",
-      color: "darkGrey",
+      color: mode("darkGrey", "white")(props),
       textAlign: "left",
       fontFamily: "body",
       fontWeight: "bold",
@@ -31,7 +32,7 @@ const config = helpers.defineMultiStyleConfig({
         },
         focus: {
           boxShadow: getBoxShadowString({
-            borderColor: "greenHaze",
+            borderColor: mode("greenHaze", "azure")(props),
             borderWidth: 2,
           }),
         },
@@ -48,23 +49,26 @@ const config = helpers.defineMultiStyleConfig({
     icon: {
       fontSize: "1.25em",
     },
-  },
+  }),
   variants: {
-    list: {
+    list: (props) => ({
       button: {
         boxShadow: "none",
         _hover: {
-          backgroundColor: "seaMist",
+          backgroundColor: mode("seaMist", "pine")(props),
         },
         _active: {
-          backgroundColor: "mint",
+          backgroundColor: mode("mint", "whiteAlpha.200")(props),
         },
       },
-    },
-    outline: {
+    }),
+    outline: (props) => ({
       container: {
         boxShadow: getBoxShadowString({
-          borderColor: colors.blackAlpha["400"],
+          borderColor: mode(
+            colors.blackAlpha["400"],
+            colors.whiteAlpha["400"],
+          )(props),
         }),
       },
       button: {
@@ -73,23 +77,24 @@ const config = helpers.defineMultiStyleConfig({
         },
         _hover: {
           boxShadow: getBoxShadowString({
-            borderColor: "darkGrey",
+            borderColor: mode("darkGrey", "white")(props),
             borderWidth: 2,
           }),
         },
         _active: {
-          backgroundColor: "mint",
+          backgroundColor: mode("mint", "whiteAlpha.100")(props),
           boxShadow: getBoxShadowString({
-            borderColor: "darkGrey",
+            borderColor: mode("darkGrey", colors.whiteAlpha[400])(props),
           }),
         },
       },
-    },
-    card: {
+    }),
+    card: (props) => ({
       container: {
+        backgroundColor: mode("white", "whiteAlpha.100")(props),
         boxShadow: getBoxShadowString({
-          baseShadow: "sm",
-          borderColor: "silver",
+          baseShadow: mode<keyof typeof shadows>("sm", "none")(props),
+          borderColor: mode("silver", "whiteAlpha.400")(props),
         }),
       },
       button: {
@@ -97,13 +102,22 @@ const config = helpers.defineMultiStyleConfig({
           borderBottomRadius: "none",
         },
         _hover: {
-          backgroundColor: "seaMist",
+          backgroundColor: mode("seaMist", "whiteAlpha.200")(props),
+          boxShadow: getBoxShadowString({
+            borderColor: mode("darkGrey", "white")(props),
+            borderWidth: 1,
+          }),
         },
         _active: {
-          backgroundColor: "mint",
+          backgroundColor: mode("mint", "inherit")(props),
+          boxShadow: getBoxShadowString({
+            baseShadow: "none",
+            borderWidth: 1,
+            borderColor: mode("darkGrey", "whiteAlpha.400")(props),
+          }),
         },
       },
-    },
+    }),
   },
   sizes: {
     sm: {
@@ -111,6 +125,7 @@ const config = helpers.defineMultiStyleConfig({
         fontSize: ["mobile.xs", null, "desktop.xs"],
         paddingX: 2,
         paddingY: 1,
+        minHeight: 6,
       },
       panel: {
         fontSize: ["mobile.xs", null, "desktop.xs"],
@@ -122,6 +137,7 @@ const config = helpers.defineMultiStyleConfig({
         fontSize: ["mobile.sm", null, "desktop.sm"],
         paddingX: 3,
         paddingY: 1,
+        minHeight: 7,
       },
       panel: {
         fontSize: ["mobile.sm", null, "desktop.sm"],
@@ -133,6 +149,7 @@ const config = helpers.defineMultiStyleConfig({
         fontSize: ["mobile.sm", null, "desktop.sm"],
         paddingX: 3,
         paddingY: 2,
+        minHeight: 8,
       },
       panel: {
         fontSize: ["mobile.sm", null, "desktop.sm"],

package/src/theme/components/breadcrumb.ts

@@ -1,14 +1,13 @@
 import { breadcrumbAnatomy as parts } from "@chakra-ui/anatomy";
-import {
-  createMultiStyleConfigHelpers,
-  defineStyle,
-} from "@chakra-ui/styled-system";
+import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/styled-system";
 import { getBoxShadowString } from "../utils/box-shadow-utils";
+import { mode } from "@chakra-ui/theme-tools";
+import { focusVisible } from "../utils/focus-utils";
 
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
 
-const baseStyleLink = defineStyle({
+const baseStyleLink = defineStyle((props) => ({
   transitionProperty: "common",
   transitionDuration: "fast",
   transitionTimingFunction: "ease-out",
@@ -21,27 +20,32 @@ const baseStyleLink = defineStyle({
     paddingX: 0.5,
     borderRadius: "xs",
     _hover: {
-      backgroundColor: "coralGreen",
-    },
-    _focusVisible: {
-      boxShadow: getBoxShadowString({
-        borderColor: "greenHaze",
-        borderWidth: 2,
-      }),
+      backgroundColor: mode("seaMist", "pine")(props),
     },
+    ...focusVisible({
+      focus: {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("greenHaze", "azure")(props),
+          borderWidth: 2,
+        }),
+      },
+      notFocus: {
+        notFocus: { boxShadow: "none" },
+      }
+    }),
     _active: {
-      backgroundColor: "mint",
+      backgroundColor: mode("mint", "whiteAlpha.200")(props),
     },
   },
-});
+}));
 
-const baseStyle = definePartsStyle({
-  link: baseStyleLink,
+const baseStyle = definePartsStyle((props) => ({
+  link: baseStyleLink(props),
   list: {
     flexWrap: "wrap",
     alignItems: "flex-start",
   },
-});
+}));
 
 export default defineMultiStyleConfig({
   baseStyle,

package/src/theme/components/button.ts

@@ -29,28 +29,39 @@ const config = defineStyleConfig({
     },
   },
   variants: {
-    control: {
-      backgroundColor: "darkTeal",
-      color: "white",
+    control: (props) => ({
+      backgroundColor: mode("darkTeal", "mint")(props),
+      color: mode("white", "darkTeal")(props),
       ...focusVisible({
         focus: {
-          boxShadow: `inset 0 0 0 4px ${colors.darkTeal}, inset 0 0 0 6px currentColor`,
+          boxShadow: `inset 0 0 0 4px ${mode(
+            colors.darkTeal,
+            colors.seaMist,
+          )(props)}, inset 0 0 0 6px currentColor`,
         },
         notFocus: { boxShadow: "none" },
       }),
       _hover: {
-        backgroundColor: "night",
+        backgroundColor: mode("night", "coralGreen")(props),
       },
       _active: {
-        backgroundColor: "pine",
+        backgroundColor: mode("pine", "white")(props),
       },
-    },
-    primary: {
+    }),
+    primary: (props) => ({
+      // FIXME: Update to use a global defined background color for darkMode whenever it is available.
+      // hardcoded background color as alpha-"hack" below is not feasible for dark mode with solid background color
       backgroundColor: "primaryGreen",
       color: "white",
       ...focusVisible({
         focus: {
-          boxShadow: `inset 0 0 0 4px ${colors.primaryGreen}, inset 0 0 0 4px ${colors.primaryGreen}, inset 0 0 0 6px currentColor`,
+          boxShadow: `inset 0 0 0 2px ${mode(
+            colors.greenHaze,
+            colors.azure,
+          )(props)}, inset 0 0 0 4px ${mode(
+            colors.white,
+            colors.darkGrey,
+          )(props)}`,
         },
         notFocus: { boxShadow: "none" },
       }),
@@ -60,25 +71,61 @@ const config = defineStyleConfig({
       _active: {
         backgroundColor: "azure",
       },
-    },
-    secondary: {
-      backgroundColor: "coralGreen",
-      color: "darkTeal",
+    }),
+    secondary: (props) => ({
+      // FIXME: Update to use global defined background color for darkMode whenever it is available instead of alpha
+      backgroundColor: mode("seaMist", "whiteAlpha.100")(props),
+      color: mode("darkTeal", "white")(props),
+      // order is important here for now while we do not have global defined background color for darkMode
+      _hover: {
+        backgroundColor: mode("coralGreen", "whiteAlpha.200")(props),
+      },
       ...focusVisible({
         focus: {
-          boxShadow: `inset 0 0 0 4px ${colors.coralGreen}, inset 0 0 0 4px ${colors.coralGreen}, inset 0 0 0 6px currentColor`,
+          boxShadow: `inset 0 0 0 2px ${mode(
+            colors.greenHaze,
+            colors.azure,
+          )(props)}, inset 0 0 0 4px ${mode(
+            colors.white,
+            colors.blackAlpha[300],
+          )(props)}`,
+          _hover: {
+            boxShadow: `inset 0 0 0 2px ${mode(
+              colors.greenHaze,
+              colors.azure,
+            )(props)}, inset 0 0 0 4px ${mode(
+              colors.white,
+              colors.blackAlpha[500],
+            )(props)}`,
+          },
         },
         notFocus: {
           boxShadow: "none",
         },
       }),
-      _hover: {
-        backgroundColor: "blueGreen",
-      },
       _active: {
-        backgroundColor: "mint",
+        backgroundColor: mode("mint", "whiteAlpha.300")(props),
+        boxShadow: `inset 0 0 0 2px ${mode(
+          colors.greenHaze,
+          colors.azure,
+        )(props)}, inset 0 0 0 4px ${mode(
+          colors.white,
+          colors.blackAlpha[600],
+        )(props)}`,
+        _hover: {
+          boxShadow: `inset 0 0 0 2px ${mode(
+            colors.greenHaze,
+            colors.azure,
+          )(props)}, inset 0 0 0 4px ${mode(
+            colors.white,
+            colors.blackAlpha[600],
+          )(props)}`,
+        },
       },
-    },
+    }),
+    /**
+     * @deprecated use `secondary` instead.
+     */
     tertiary: {
       backgroundColor: "mint",
       color: "darkGrey",
@@ -102,19 +149,19 @@ const config = defineStyleConfig({
       fontWeight: "normal",
       boxShadow: `inset 0 0 0 1px ${mode(
         colors.blackAlpha[400],
-        colors.whiteAlpha[400]
+        colors.whiteAlpha[400],
       )(props)}`,
       ...focusVisible({
         focus: {
           boxShadow: getBoxShadowString({
-            borderWidth: 3,
+            borderWidth: 2,
             borderColor: "greenHaze",
           }),
         },
         notFocus: {
           boxShadow: `inset 0 0 0 1px ${mode(
             colors.blackAlpha[400],
-            colors.whiteAlpha[400]
+            colors.whiteAlpha[400],
           )(props)}`,
         },
       }),
@@ -124,7 +171,7 @@ const config = defineStyleConfig({
       _active: {
         boxShadow: `inset 0 0 0 1px ${mode(
           colors.blackAlpha[400],
-          colors.whiteAlpha[300]
+          colors.whiteAlpha[300],
         )(props)}`,
         backgroundColor: mode("mint", "whiteAlpha.200")(props),
       },
@@ -182,7 +229,7 @@ const config = defineStyleConfig({
             boxShadow: getBoxShadowString({
               borderColor: mode("greenHaze", "azure")(props),
               borderWidth: 2,
-              baseShadow: "md"
+              baseShadow: "md",
             }),
           },
         },

package/src/theme/components/choice-chip.ts

@@ -1,6 +1,8 @@
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { anatomy } from "@chakra-ui/theme-tools";
+import { anatomy, mode } from "@chakra-ui/theme-tools";
 import { getBoxShadowString } from "../utils/box-shadow-utils";
+import { colors } from "../foundations";
+import { focusVisible } from "../utils/focus-utils";
 
 const parts = anatomy("choice-chip").parts("container", "icon", "label");
 
@@ -9,33 +11,44 @@ const helpers = createMultiStyleConfigHelpers(parts.keys);
 const config = helpers.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
-      backgroundColor: "white",
+      backgroundColor: mode("white", "transparent")(props),
       boxShadow: getBoxShadowString({ borderColor: "celadon" }),
-      color: "darkTeal",
+      color: mode("darkTeal", "white")(props),
       display: "inline-flex",
       alignItems: "center",
       fontSize: "16px",
       px: 1,
       _checked: {
-        background: "seaMist",
+        color: "white",
+        background: "pine",
         boxShadow: getBoxShadowString({ borderColor: "celadon" }),
       },
       "input:focus-visible + &": {
-        boxShadow: getBoxShadowString({
-          borderColor: "greenHaze",
-          borderWidth: 2,
-        }),
+        boxShadow: `inset 0 0 0 2px ${mode(
+          colors.greenHaze,
+          colors.azure,
+        )(props)}, inset 0 0 0 4px ${mode(
+          colors.white,
+          colors.darkGrey,
+        )(props)}`,
       },
       "@media (hover:hover)": {
         _hover: {
+          color: mode("darkTeal", "white")(props),
           boxShadow: getBoxShadowString({
             borderColor: "greenHaze",
             borderWidth: 2,
           }),
-          background: "mint",
+          background: mode("coralGreen", "whiteAlpha.200")(props),
           cursor: "pointer",
         },
       },
+      _active: {
+        backgroundColor: mode("mint", "whiteAlpha.300")(props),
+        boxShadow: getBoxShadowString({
+          borderColor: "pine",
+        }),
+      },
     },
     icon: {
       mr: props.hasLabel ? 1 : 0,

package/src/theme/components/input.ts

@@ -26,7 +26,7 @@ const config = helpers.defineMultiStyleConfig({
         borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
       }),
       _active: {
-        backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+        backgroundColor: mode("mint", "whiteAlpha.100")(props),
         boxShadow: getBoxShadowString({
           borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
         }),