@vygruppen/spor-react 3.8.0 → 4.0.0

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" />
  * ```
  */
 
@@ -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

@@ -46,10 +46,10 @@ type DateRangePickerProps = AriaDateRangePickerProps<DateValue> &
 /**
  * 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({

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/card.ts

@@ -1,8 +1,8 @@
 import { defineStyleConfig } from "@chakra-ui/react";
+import { mode } from "@chakra-ui/theme-tools";
 import { colors } from "../foundations";
 import { getBoxShadowString } from "../utils/box-shadow-utils";
 import { focusVisible } from "../utils/focus-utils";
-import { mode } from "@chakra-ui/theme-tools";
 
 const config = defineStyleConfig({
   baseStyle: (props: any) => ({
@@ -16,7 +16,7 @@ const config = defineStyleConfig({
     borderRadius: "md",
     ...getColorSchemeBaseProps(props),
 
-    "button&, a&": {
+    "button&, a&, label&, &.is-clickable": {
       ...getColorSchemeClickableProps(props),
       _hover: getColorSchemeHoverProps(props),
       _active: getColorSchemeActiveProps(props),
@@ -62,7 +62,7 @@ type CardThemeProps = {
   size: "sm" | "lg";
 };
 
-const getColorSchemeBaseProps= (props: CardThemeProps) => {
+const getColorSchemeBaseProps = (props: CardThemeProps) => {
   const { colorScheme, size } = props;
   const baseShadow = size === "lg" ? "md" : "sm";
   switch (colorScheme) {
@@ -89,7 +89,7 @@ const getColorSchemeBaseProps= (props: CardThemeProps) => {
         backgroundColor: colors[colorScheme]?.[100] ?? "platinum",
       };
   }
-}
+};
 
 function getColorSchemeClickableProps({ colorScheme, size }: CardThemeProps) {
   const baseShadow = size === "lg" ? "md" : "sm";
@@ -129,7 +129,7 @@ const getColorSchemeHoverProps = (props: CardThemeProps) => {
     case "white":
       return {
         backgroundColor: mode("white", "whiteAlpha.200")(props),
-        boxShadow: getBoxShadowString({   
+        boxShadow: getBoxShadowString({
           baseShadow,
           borderColor: colors.steel,
           isInset: false,
@@ -153,7 +153,7 @@ const getColorSchemeHoverProps = (props: CardThemeProps) => {
         }),
       };
   }
-}
+};
 const getColorSchemeActiveProps = (props: CardThemeProps) => {
   const { colorScheme, size } = props;
   const baseShadow = size === "lg" ? "sm" : "none";
@@ -186,4 +186,4 @@ const getColorSchemeActiveProps = (props: CardThemeProps) => {
         }),
       };
   }
-}
+};

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/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,