@vygruppen/spor-react 3.8.1 → 4.0.1

package/src/datepicker/DatePicker.tsx

@@ -11,18 +11,13 @@ import {
   PopoverTrigger,
   Portal,
   ResponsiveValue,
-  useBreakpointValue,
   useFormControlContext,
   useMultiStyleConfig,
 } from "@chakra-ui/react";
 import { DateValue } from "@internationalized/date";
 import { useDatePickerState } from "@react-stately/datepicker";
 import React, { forwardRef, useRef } from "react";
-import {
-  AriaDatePickerProps,
-  I18nProvider,
-  useDatePicker,
-} from "react-aria";
+import { AriaDatePickerProps, I18nProvider, useDatePicker } from "react-aria";
 import { FormErrorMessage } from "..";
 import { Calendar } from "./Calendar";
 import { CalendarTriggerButton } from "./CalendarTriggerButton";
@@ -41,10 +36,10 @@ type DatePickerProps = AriaDatePickerProps<DateValue> &
 /**
  * A date picker component.
  *
- * There are two versions of this component – a simple one, and one with a trigger button for showing the calendar. Use whatever fits your design.
+ * There are three different variants – `base`, `floating` and `ghost`.
  *
  * ```tsx
- * <DatePicker label="Dato" variant="simple" />
+ * <DatePicker label="Dato" variant="base" />
  * ```
  */
 
@@ -93,7 +88,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     };
 
     const popoverContent = (
-      <PopoverContent color="darkGrey" boxShadow="md" sx={styles.calendar}>
+      <PopoverContent color="darkGrey" sx={styles.calendarPopover}>
         <PopoverArrow sx={styles.arrow} />
         <PopoverBody>
           <FocusLock>
@@ -109,14 +104,19 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
 
     return (
       <I18nProvider locale={locale}>
-        <Box position="relative" display="inline-flex" flexDirection="column" width={width}>
+        <Box
+          position="relative"
+          display="inline-flex"
+          flexDirection="column"
+          width={width}
+        >
           <Popover
             {...dialogProps}
             isOpen={state.isOpen}
             onOpen={state.open}
             onClose={state.close}
           >
-            <InputGroup {...groupProps} display="inline-flex">             
+            <InputGroup {...groupProps} display="inline-flex">
               <PopoverAnchor>
                 <StyledField
                   variant={variant}
@@ -125,7 +125,11 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
                   minHeight={minHeight}
                 >
                   <PopoverTrigger>
-                    <CalendarTriggerButton variant={variant} ref={ref} {...buttonProps} />
+                    <CalendarTriggerButton
+                      variant={variant}
+                      ref={ref}
+                      {...buttonProps}
+                    />
                   </PopoverTrigger>
                   <DateField
                     label={props.label}
@@ -136,8 +140,12 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
                 </StyledField>
               </PopoverAnchor>
             </InputGroup>
-            <FormErrorMessage {...errorMessageProps}>{errorMessage}</FormErrorMessage>
-            {state.isOpen && !props.isDisabled && withPortal && <Portal>{popoverContent}</Portal>}
+            <FormErrorMessage {...errorMessageProps}>
+              {errorMessage}
+            </FormErrorMessage>
+            {state.isOpen && !props.isDisabled && withPortal && (
+              <Portal>{popoverContent}</Portal>
+            )}
             {state.isOpen && !props.isDisabled && !withPortal && popoverContent}
           </Popover>
         </Box>

package/src/datepicker/DateRangePicker.tsx

@@ -12,7 +12,6 @@ import {
   PopoverTrigger,
   Portal,
   ResponsiveValue,
-  useBreakpointValue,
   useFormControlContext,
   useMultiStyleConfig,
 } from "@chakra-ui/react";
@@ -36,20 +35,16 @@ type DateRangePickerProps = AriaDateRangePickerProps<DateValue> &
     startName?: string;
     endLabel?: string;
     endName?: string;
-    variant: ResponsiveValue<
-     "base" 
-    | "floating"
-    | "ghost"
-    >;
+    variant: ResponsiveValue<"base" | "floating" | "ghost">;
     withPortal?: boolean;
   };
 /**
  * A date range picker component.
  *
- * There are two versions of this component – a simple one, and one with a trigger button for showing the calendar. Use whatever fits your design.
+ * There are three variants to choose from – `base`, `floating` and `ghost`.
  *
  * ```tsx
- * <DateRangePicker startLabel="From" startName="from" endLabel="To" endName="to" variant="simple" />
+ * <DateRangePicker startLabel="From" startName="from" endLabel="To" endName="to" variant="base" />
  * ```
  */
 export function DateRangePicker({
@@ -78,7 +73,7 @@ export function DateRangePicker({
     calendarProps,
   } = useDateRangePicker(props, state, ref);
 
-  const styles = useMultiStyleConfig("Datepicker", {variant});
+  const styles = useMultiStyleConfig("Datepicker", { variant });
   const locale = useCurrentLocale();
 
   const handleEnterClick = (e: React.KeyboardEvent) => {
@@ -90,11 +85,11 @@ export function DateRangePicker({
   };
 
   const onFieldClick = () => {
-      state.setOpen(true);
+    state.setOpen(true);
   };
 
   const popoverContent = (
-    <PopoverContent sx={styles.calendar} boxShadow="md" maxWidth="none">
+    <PopoverContent sx={styles.calendarPopover} maxWidth="none">
       <PopoverArrow sx={styles.arrow} />
       <PopoverBody>
         <FocusLock>
@@ -130,7 +125,13 @@ export function DateRangePicker({
               >
                 {variant && (
                   <PopoverTrigger>
-                    <CalendarTriggerButton paddingLeft={1} paddingRight={1} variant={variant} ref={ref} {...buttonProps} />
+                    <CalendarTriggerButton
+                      paddingLeft={1}
+                      paddingRight={1}
+                      variant={variant}
+                      ref={ref}
+                      {...buttonProps}
+                    />
                   </PopoverTrigger>
                 )}
                 <DateField
@@ -139,7 +140,7 @@ export function DateRangePicker({
                   label={props.startLabel}
                   labelProps={labelProps}
                 />
-                 <Box as="span" aria-hidden="true" paddingRight="2">
+                <Box as="span" aria-hidden="true" paddingRight="2">
                   –
                 </Box>
                 <DateField

package/src/link/TextLink.tsx

@@ -8,15 +8,11 @@ import React from "react";
 import { createTexts, useTranslation } from "..";
 
 type LinkProps = Omit<ChakraLinkProps, "variant"> & {
-  variant?:
-    | "primary"
-    | "secondary"
-    /** @deprecated Use `secondary` instead */
-    | "tertiary";
+  variant?: "primary" | "secondary";
 };
 /** Link to different sites or parts of site
  *
- * You can specify the `variant` prop to get different link designs. `tertiary` should only be used on dark backgrounds.
+ * You can specify the `variant` prop to get different link designs.
  */
 export const TextLink = forwardRef<LinkProps, "a">(
   ({ children, ...props }, ref) => {

package/src/modal/Drawer.tsx

@@ -90,9 +90,9 @@ const Notch = forwardRef<BoxProps, any>((props, ref) => {
       ref={ref}
     >
       <Center
-        background={`linear-gradient(to ${
+        background={
           placement === "bottom" ? "bottom" : "top"
-        }, white 0%, white 60%, transparent)`}
+        }
         padding={2}
         borderRadius="md"
       >

package/src/tab/Tabs.tsx

@@ -9,17 +9,7 @@ export type TabsProps = Exclude<
   ChakraTabsProps,
   "colorScheme" | "variant" | "orientation" | "size"
 > & {
-  colorScheme: 
-  /** @deprecated dark is deprecated please use accent*/
-  | "dark"
-  /** @deprecated light is deprecated please use default*/
-  | "light"
-  /** @deprecated green is deprecated please use accent*/
-  | "green"   
-  /** @deprecated grey is deprecated please use default*/
-  | "grey"
-  | "base" 
-  | "accent" ;
+  colorScheme: "base" | "accent";
   /** Defaults to `md` */
   size?: "sm" | "md" | "lg" | "xl";
   /** Defaults to `round` */

package/src/theme/components/button.ts

@@ -125,26 +125,6 @@ const config = defineStyleConfig({
         },
       },
     }),
-    /**
-     * @deprecated use `secondary` instead.
-     */
-    tertiary: {
-      backgroundColor: "mint",
-      color: "darkGrey",
-      fontWeight: "normal",
-      ...focusVisible({
-        focus: {
-          boxShadow: `inset 0 0 0 4px ${colors.mint}, inset 0 0 0 4px ${colors.mint}, inset 0 0 0 6px currentColor`,
-        },
-        notFocus: { boxShadow: "none" },
-      }),
-      _hover: {
-        backgroundColor: "seaMist",
-      },
-      _active: {
-        backgroundColor: "lightGrey",
-      },
-    },
     additional: (props) => ({
       backgroundColor: "transparent",
       color: mode("darkGrey", "white")(props),

package/src/theme/components/close-button.ts

@@ -26,7 +26,7 @@ const config = defineStyleConfig({
       },
     }),
     _hover: {
-      backgroundColor: mode("seaMist", "pine")(props),
+      backgroundColor: mode("seaMist", "whiteAlpha.100")(props),
       _disabled: {
         color: "dimGrey",
       },

package/src/theme/components/datepicker.ts

@@ -8,6 +8,7 @@ const parts = anatomy("datepicker").parts(
   "wrapper",
   "calendarTriggerButton",
   "arrow",
+  "calendarPopover",
   "calendar",
   "weekdays",
   "weekend",
@@ -34,36 +35,10 @@ const config = helpers.defineMultiStyleConfig({
       paddingY: 0.5,
       alignItems: "center",
       _hover: {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("darkGrey", "white")(props),
-          borderWidth: 2,
-        }),
         zIndex: zIndices.docked,
       },
-      _focusWithin: {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("greenHaze", "azure")(props),
-          borderWidth: 2,
-        }),
-      },
-      _invalid: {
-        boxShadow: getBoxShadowString({
-          borderColor: "brightRed",
-          borderWidth: 2,
-        }),
-      },
       _disabled: {
         pointerEvents: "none",
-        boxShadow: getBoxShadowString({
-          borderColor: mode("osloGrey", "whiteAlpha.400")(props),
-          borderWidth: 1,
-        }),
-        _focus: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("osloGrey", "whiteAlpha.400")(props),
-            borderWidth: 1,
-          }),
-        },
       },
     },
     inputLabel: {
@@ -123,17 +98,19 @@ const config = helpers.defineMultiStyleConfig({
         }),
       },
     },
-    arrow: {  
+    arrow: {
       [$arrowBackground.variable]: mode("white", colors.night)(props),
-    },    
-    calendar: {
+    },
+    calendarPopover: {
       backgroundColor: mode("white", "night")(props),
       color: mode("darkGrey", "white")(props),
       boxShadow: getBoxShadowString({
         borderWidth: 2,
         borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props),
+        baseShadow: "md",
       }),
     },
+
     weekdays: {
       color: mode("darkGrey", "white")(props),
     },
@@ -216,6 +193,41 @@ const config = helpers.defineMultiStyleConfig({
   }),
   variants: {
     base: (props) => ({
+      wrapper: {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
+        }),
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("darkGrey", "white")(props),
+            borderWidth: 2,
+          }),
+        },
+        _focusWithin: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("greenHaze", "azure")(props),
+            borderWidth: 2,
+          }),
+        },
+        _invalid: {
+          boxShadow: getBoxShadowString({
+            borderColor: "brightRed",
+            borderWidth: 2,
+          }),
+        },
+        _disabled: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("osloGrey", "whiteAlpha.400")(props),
+            borderWidth: 1,
+          }),
+          _focus: {
+            boxShadow: getBoxShadowString({
+              borderColor: mode("osloGrey", "whiteAlpha.400")(props),
+              borderWidth: 1,
+            }),
+          },
+        },
+      },
       calendar: {
         backgroundColor: mode("white", "night")(props),
         color: mode("darkGrey", "white")(props),
@@ -238,14 +250,55 @@ const config = helpers.defineMultiStyleConfig({
       },
     }),
     floating: (props) => ({
-        calendar: {
-          backgroundColor: mode("white", "night")(props),
-          color: mode("darkGrey", "white")(props),
+      wrapper: {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
+          baseShadow: "sm",
+        }),
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("darkGrey", "white")(props),
+            borderWidth: 2,
+            baseShadow: "sm",
+          }),
+        },
+        _focusWithin: {
           boxShadow: getBoxShadowString({
-            borderColor: mode("grey.200", "whiteAlpha.400")(props),
+            borderColor: mode("greenHaze", "azure")(props),
+            borderWidth: 2,
             baseShadow: "sm",
           }),
         },
+        _invalid: {
+          boxShadow: getBoxShadowString({
+            borderColor: "brightRed",
+            borderWidth: 2,
+            baseShadow: "sm",
+          }),
+        },
+        _disabled: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("osloGrey", "whiteAlpha.400")(props),
+            borderWidth: 1,
+            baseShadow: "sm",
+          }),
+          _focus: {
+            boxShadow: getBoxShadowString({
+              borderColor: mode("osloGrey", "whiteAlpha.400")(props),
+              borderWidth: 1,
+              baseShadow: "sm",
+            }),
+          },
+        },
+      },
+      calendar: {
+        backgroundColor: mode("white", "night")(props),
+        color: mode("darkGrey", "white")(props),
+        boxShadow: getBoxShadowString({
+          borderColor: mode("grey.200", "whiteAlpha.400")(props),
+          baseShadow: "sm",
+        }),
+      },
       dateCell: {
         color: mode("darkGrey", "white")(props),
         _hover: {
@@ -254,13 +307,43 @@ const config = helpers.defineMultiStyleConfig({
       },
     }),
     ghost: (props) => ({
+      wrapper: {
+        boxShadow: "none",
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("darkGrey", "white")(props),
+            borderWidth: 2,
+          }),
+        },
+        _focusWithin: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("greenHaze", "azure")(props),
+            borderWidth: 2,
+          }),
+        },
+        _invalid: {
+          boxShadow: getBoxShadowString({
+            borderColor: "brightRed",
+            borderWidth: 2,
+          }),
+        },
+        _disabled: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("osloGrey", "whiteAlpha.400")(props),
+            borderWidth: 1,
+          }),
+          _focus: {
+            boxShadow: getBoxShadowString({
+              borderColor: mode("osloGrey", "whiteAlpha.400")(props),
+              borderWidth: 1,
+            }),
+          },
+        },
+      },
       calendar: {
         backgroundColor: mode("white", "night")(props),
         color: mode("darkGrey", "white")(props),
-        boxShadow: getBoxShadowString({
-          borderWidth: 2,
-          borderColor: mode("", "")(props),
-        }),
+        boxShadow: "none",
       },
       dateCell: {
         color: mode("darkGrey", "white")(props),
@@ -268,8 +351,8 @@ const config = helpers.defineMultiStyleConfig({
           backgroundColor: mode("seaMist", "pine")(props),
         },
         _selected: {
-          backgroundColor: mode("", "primaryGreen")(props),
-          color: "darkGrey"
+          backgroundColor: mode("transparent", "primaryGreen")(props),
+          color: "darkGrey",
         },
       },
     }),

package/src/theme/components/drawer.ts

@@ -1,6 +1,6 @@
 import { modalAnatomy as parts } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import type { PartsStyleObject } from "@chakra-ui/theme-tools";
+import { mode, type PartsStyleObject } from "@chakra-ui/theme-tools";
 
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 
@@ -9,6 +9,7 @@ const config = helpers.defineMultiStyleConfig({
     overlay: {
       backgroundColor: "blackAlpha.600",
       zIndex: "modal",
+      color: "red",
     },
     dialogContainer: {
       display: "flex",
@@ -18,8 +19,8 @@ const config = helpers.defineMultiStyleConfig({
       overflow: props.scrollBehavior === "inside" ? "hidden" : "auto",
     },
     dialog: {
-      background: "white",
-      color: "inherit",
+      backgroundColor: mode("white", "pine")(props),
+      color: mode("inherit", "white")(props),
       zIndex: "modal",
       maxHeight:
         props.scrollBehavior === "inside" ? "calc(100% - 7.5rem)" : undefined,

package/src/theme/components/link.ts

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

package/src/theme/components/modal.ts

@@ -19,7 +19,7 @@ const config = helpers.defineMultiStyleConfig({
     },
     dialog: {
       borderRadius: "md",
-      background: mode("white", "night")(props),
+      background: mode("white", "pine")(props),
       color: mode("inherit", "white")(props),
       my: "3.75rem",
       zIndex: "modal",

package/src/theme/components/popover.ts

@@ -1,6 +1,8 @@
 import { popoverAnatomy as parts } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { cssVar } from "@chakra-ui/theme-tools";
+import { cssVar, mode } from "@chakra-ui/theme-tools";
+import { getBoxShadowString } from "../utils/box-shadow-utils";
+import { focusVisible } from "../utils/focus-utils";
 
 const $popperBg = cssVar("popper-bg");
 const $arrowBg = cssVar("popper-arrow-bg");
@@ -9,12 +11,12 @@ const $arrowShadowColor = cssVar("popper-arrow-shadow-color");
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 
 const config = helpers.defineMultiStyleConfig({
-  baseStyle: {
+  baseStyle: (props) => ({
     popper: {
       zIndex: "popover",
     },
     content: {
-      [$popperBg.variable]: `colors.darkTeal`,
+      [$popperBg.variable]: mode(`colors.darkTeal`, `colors.pine`)(props) ,
       backgroundColor: $popperBg.reference,
       [$arrowBg.variable]: $popperBg.reference,
       [$arrowShadowColor.variable]: `colors.blackAlpha.300`,
@@ -36,6 +38,20 @@ const config = helpers.defineMultiStyleConfig({
     },
     closeButton: {
       position: "absolute",
+      color: "white",
+      hover: "whiteAlpha.100",
+      ...focusVisible({
+        focus: {
+          boxShadow: getBoxShadowString({ borderColor: "azure" }),
+      
+        },
+        notFocus: {
+          boxShadow: "none",
+        },
+      }),
+      _active: {
+        backgroundColor: "whiteAlpha.200",
+      },
       borderRadius: "xs",
       top: 1,
       insetEnd: 1,
@@ -43,7 +59,7 @@ const config = helpers.defineMultiStyleConfig({
       height: 2,
       padding: 1,
     },
-  },
+  }),
   sizes: {
     sm: {
       content: {

package/src/util/externals.tsx

@@ -2,6 +2,7 @@
 export {
   DarkMode,
   LightMode,
+  Portal,
   useBreakpointValue,
   useClipboard,
   useColorMode,
@@ -17,6 +18,7 @@ export {
   useToken,
 } from "@chakra-ui/react";
 export type {
+  PortalProps,
   UseClipboardOptions,
   UseDisclosureProps,
   UseOutsideClickProps,