@vygruppen/spor-react 3.7.2 → 3.7.4

package/src/button/FloatingActionButton.tsx

@@ -1,6 +1,6 @@
 import { Box, BoxProps, useMultiStyleConfig } from "@chakra-ui/react";
 import { motion } from "framer-motion";
-import React from "react";
+import React, { useEffect } from "react";
 
 const MotionBox = motion(Box);
 
@@ -33,10 +33,10 @@ export const FloatingActionButton = ({
   ...props
 }: FloatingActionButtonProps) => {
   const [isTextVisible, setIsTextVisible] = React.useState(
-    externalIsTextVisible !== undefined ? externalIsTextVisible : true
+    externalIsTextVisible !== undefined ? externalIsTextVisible : false
   );
   const scrollDirection = useScrollDirection();
-  React.useEffect(() => {
+  useEffect(() => {
     if (externalIsTextVisible !== undefined) {
       return;
     }
@@ -47,7 +47,7 @@ export const FloatingActionButton = ({
     return () => window.clearTimeout(id);
   }, [scrollDirection, externalIsTextVisible]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setIsTextVisible(!!externalIsTextVisible);
   }, [externalIsTextVisible]);
 
@@ -63,12 +63,10 @@ export const FloatingActionButton = ({
       aria-label={children}
       {...props}
     >
-      <Box __css={style.icon}>
-        {icon}
-      </Box>
+      <Box __css={style.icon}>{icon}</Box>
       <MotionBox
         animate={isTextVisible ? "show" : "hide"}
-        initial="show"
+        initial={externalIsTextVisible ? "show" : "hide"}
         variants={{
           show: {
             opacity: 1,
@@ -93,7 +91,9 @@ 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/link/TextLink.tsx

@@ -8,7 +8,11 @@ import React from "react";
 import { createTexts, useTranslation } from "..";
 
 type LinkProps = Omit<ChakraLinkProps, "variant"> & {
-  variant?: "primary" | "secondary" | "tertiary";
+  variant?:
+    | "primary"
+    | "secondary"
+    /** @deprecated Use `secondary` instead */
+    | "tertiary";
 };
 /** Link to different sites or parts of site
  *

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,8 +20,9 @@ const config = helpers.defineMultiStyleConfig({
       borderRadius: "sm",
       display: "flex",
       justifyContent: "space-between",
-      color: "darkGrey",
+      color: mode("darkGrey", "white")(props),
       textAlign: "left",
+      fontFamily: "body",
       fontWeight: "bold",
       ...focusVisible({
         notFocus: {
@@ -30,7 +32,7 @@ const config = helpers.defineMultiStyleConfig({
         },
         focus: {
           boxShadow: getBoxShadowString({
-            borderColor: "greenHaze",
+            borderColor: mode("greenHaze", "azure")(props),
             borderWidth: 2,
           }),
         },
@@ -47,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: {
@@ -72,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: {
@@ -96,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: {
@@ -110,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"],
@@ -121,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"],
@@ -132,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,12 @@
 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";
 
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
 
-const baseStyleLink = defineStyle({
+const baseStyleLink = defineStyle((props) => ({
   transitionProperty: "common",
   transitionDuration: "fast",
   transitionTimingFunction: "ease-out",
@@ -21,27 +19,30 @@ const baseStyleLink = defineStyle({
     paddingX: 0.5,
     borderRadius: "xs",
     _hover: {
-      backgroundColor: "coralGreen",
+      backgroundColor: mode("seaMist", "pine")(props),
     },
     _focusVisible: {
       boxShadow: getBoxShadowString({
-        borderColor: "greenHaze",
+        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/index.ts

@@ -20,6 +20,7 @@ export { default as InfoTag } from "./info-tag";
 export { default as Input } from "./input";
 export { default as LineIcon } from "./line-icon";
 export { default as Link } from "./link";
+export { default as List } from "./list";
 export { default as ListBox } from "./listbox";
 export { default as MediaControllerButton } from "./media-controller-button";
 export { default as Modal } from "./modal";
@@ -34,4 +35,3 @@ export { default as Tabs } from "./tabs";
 export { default as Textarea } from "./textarea";
 export { default as Toast } from "./toast";
 export { default as TravelTag } from "./travel-tag";
-

package/src/theme/components/link.ts

@@ -1,6 +1,7 @@
 import { defineStyleConfig } from "@chakra-ui/react";
 import { getBoxShadowString } from "../utils/box-shadow-utils";
 import { focusVisible } from "../utils/focus-utils";
+import { mode } from "@chakra-ui/theme-tools";
 
 const config = defineStyleConfig({
   baseStyle: {
@@ -35,80 +36,79 @@ const config = defineStyleConfig({
     },
   },
   variants: {
-    primary: {
-      color: "pine",
+    primary: (props) => ({
+      color: mode("pine", "seaMist")(props),
       ...focusVisible({
         focus: {
-          color: "white",
-          backgroundColor: "pine",
+          backgroundColor: "transparent",
           boxShadow: getBoxShadowString({
-            borderColor: "pine",
-            borderWidth: 3,
+            borderColor: "azure",
+            borderWidth: 2,
             isInset: false,
           }),
         },
         notFocus: {
           color: "pine",
-          boxShadow: "none",
           backgroundColor: "transparent",
+          boxShadow: "none",
         },
       }),
       _hover: {
-        backgroundColor: "coralGreen",
-        color: "darkTeal",
+        color: "white",
+        backgroundColor: "pine",
         boxShadow: getBoxShadowString({
-          borderColor: "coralGreen",
-          borderWidth: 3,
+          borderColor: "pine",
+          borderWidth: 2,
           isInset: false,
         }),
       },
       _active: {
-        backgroundColor: "mint",
+        color: "white",
+        backgroundColor: "azure",
         boxShadow: getBoxShadowString({
-          borderColor: "mint",
-          borderWidth: 3,
+          borderColor: "azure",
+          borderWidth: 2,
           isInset: false,
         }),
-        color: "pine",
       },
-    },
+    }),
     secondary: (props) => ({
-      color: "darkGrey",
+      color: mode("darkGrey", "white")(props),
       ...focusVisible({
         focus: {
-          color: "white",
-          backgroundColor: "darkGrey",
+          backgroundColor: "transparent",
           boxShadow: getBoxShadowString({
-            borderColor: "darkGrey",
-            borderWidth: 3,
+            borderColor: "azure",
+            borderWidth: 2,
             isInset: false,
           }),
         },
         notFocus: {
-          color: "darkGrey",
           boxShadow: "none",
           backgroundColor: "transparent",
         },
       }),
       _hover: {
-        color: "darkGrey",
-        backgroundColor: "blackAlpha.100",
+        backgroundColor: mode("seaMist", "pine")(props),
         boxShadow: getBoxShadowString({
-          borderColor: props.theme.colors.blackAlpha[100],
-          borderWidth: 3,
+          borderColor: mode("seaMist", "pine")(props),
+          borderWidth: 2,
           isInset: false,
         }),
       },
       _active: {
-        color: "darkTeal",
-        backgroundColor: "mint",
+        backgroundColor: mode("mint", "whiteAlpha.200")(props),
         boxShadow: getBoxShadowString({
-          borderColor: "mint",
-          borderWidth: 3,
+          borderColor: mode("mint", "whiteAlpha.200")(props),
+          borderWidth: 2,
           isInset: false,
         }),
       },
     }),
+    /**
+     * @deprecated tertiary style will be deprecated in the future.
+     * Please use the secondary style instead.
+     */
     tertiary: (props) => ({
       color: "white",
       ...focusVisible({

package/src/theme/components/list.ts

@@ -0,0 +1,23 @@
+import { listAnatomy as parts } from "@chakra-ui/anatomy";
+import {
+  createMultiStyleConfigHelpers,
+  defineStyle,
+} from "@chakra-ui/styled-system";
+
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(parts.keys);
+
+const baseStyleIcon = defineStyle({
+  marginEnd: "2",
+  display: "inline",
+  verticalAlign: "text-bottom",
+  fontFamily: "body",
+});
+
+const baseStyle = definePartsStyle({
+  icon: baseStyleIcon,
+});
+
+export default defineMultiStyleConfig({
+  baseStyle,
+});