@vygruppen/spor-react 4.0.2 → 4.1.0

package/src/theme/components/switch.ts

@@ -51,7 +51,7 @@ const config = helpers.defineMultiStyleConfig({
           "none",
           getBoxShadowString({
             borderColor: colors.whiteAlpha[400],
-          })
+          }),
         )({ colorMode }),
 
         ...focusVisible({
@@ -73,7 +73,7 @@ const config = helpers.defineMultiStyleConfig({
                 borderColor: "coralGreen",
                 borderWidth: 2,
                 isInset: false,
-              })
+              }),
             )({ colorMode }),
           },
           notFocus: {
@@ -81,7 +81,7 @@ const config = helpers.defineMultiStyleConfig({
               "none",
               getBoxShadowString({
                 borderColor: colors.whiteAlpha[400],
-              })
+              }),
             )({ colorMode }),
           },
         }),
@@ -89,7 +89,7 @@ const config = helpers.defineMultiStyleConfig({
           backgroundColor: "steel",
           boxShadow: mode(
             "none",
-            getBoxShadowString({ borderColor: colors.white })
+            getBoxShadowString({ borderColor: colors.white }),
           )({ colorMode }),
         },
         _checked: {
@@ -113,13 +113,13 @@ const config = helpers.defineMultiStyleConfig({
                   borderWidth: 2,
                   borderColor: "coralGreen",
                   isInset: false,
-                })
+                }),
               )({ colorMode }),
             },
             notFocus: {
               boxShadow: mode(
                 "none",
-                getBoxShadowString({ borderColor: colors.white })
+                getBoxShadowString({ borderColor: colors.white }),
               )({ colorMode }),
             },
           }),
@@ -128,7 +128,7 @@ const config = helpers.defineMultiStyleConfig({
             backgroundColor: mode("pine", "river")({ colorMode }),
             boxShadow: mode(
               "none",
-              getBoxShadowString({ borderColor: colors.white })
+              getBoxShadowString({ borderColor: colors.white }),
             )({ colorMode }),
           },
         },
@@ -136,13 +136,13 @@ const config = helpers.defineMultiStyleConfig({
           backgroundColor: mode("platinum", "dimGrey")({ colorMode }),
           boxShadow: mode(
             "none",
-            getBoxShadowString({ borderColor: colors.whiteAlpha[400] })
+            getBoxShadowString({ borderColor: colors.whiteAlpha[400] }),
           )({ colorMode }),
           _checked: {
             backgroundColor: mode("platinum", "dimGrey")({ colorMode }),
             boxShadow: mode(
               "none",
-              getBoxShadowString({ borderColor: colors.whiteAlpha[400] })
+              getBoxShadowString({ borderColor: colors.whiteAlpha[400] }),
             )({ colorMode }),
           },
         },

package/src/theme/components/table.ts

@@ -63,11 +63,11 @@ const config = helpers.defineMultiStyleConfig({
           _hover: {
             boxShadow: mode(
               getBoxShadowString({ borderColor: "darkTeal", borderWidth: 3 }),
-              getBoxShadowString({ borderColor: "blueGreen", borderWidth: 3 })
+              getBoxShadowString({ borderColor: "blueGreen", borderWidth: 3 }),
             )(props),
             backgroundColor: mode(
               props.colorScheme === "grey" ? "mint" : "coralGreen",
-              "whiteAlpha.200"
+              "whiteAlpha.200",
             )(props),
           },
         },
@@ -83,7 +83,7 @@ const config = helpers.defineMultiStyleConfig({
         border: mode("sm", "md"),
         borderColor: mode(
           props.colorScheme === "grey" ? "silver" : "blackAlpha.200",
-          "whiteAlpha.200"
+          "whiteAlpha.200",
         )(props),
         ...numericStyles,
         _first: {

package/src/theme/components/tabs.ts

@@ -178,7 +178,7 @@ const getTabColorSchemeSelectedProps = (props: StyleFunctionProps) => {
           backgroundColor: "darkTeal",
           color: "white",
         },
-      }
+      };
     case "accent":
       return {
         backgroundColor: "pine",
@@ -191,7 +191,7 @@ const getTabColorSchemeSelectedProps = (props: StyleFunctionProps) => {
           backgroundColor: "darkTeal",
           color: "white",
         },
-      }
+      };
     default:
       return {
         backgroundColor: "darkTeal",
@@ -217,11 +217,11 @@ const getTabColorSchemeFocusProps = (props: StyleFunctionProps) => {
     case "base":
       return {
         boxShadow: `inset 0 0 0 2px ${props.theme.colors.azure}`,
-      } 
+      };
     case "accent":
       return {
         boxShadow: `inset 0 0 0 2px ${props.theme.colors.azure}`,
-      } 
+      };
     default:
       return {
         boxShadow: `inset 0 0 0 2px ${props.theme.colors.greenHaze}`,
@@ -249,13 +249,16 @@ const getTabColorSchemeHoverProps = (props: StyleFunctionProps) => {
       };
     case "base":
       return {
-        boxShadow: mode(`inset 0 0 0 2px ${props.theme.colors.darkGrey}`, `inset 0 0 0 2px ${props.theme.colors.white}`)(props),
-        color: mode("darkGrey", "white")(props)
+        boxShadow: mode(
+          `inset 0 0 0 2px ${props.theme.colors.darkGrey}`,
+          `inset 0 0 0 2px ${props.theme.colors.white}`,
+        )(props),
+        color: mode("darkGrey", "white")(props),
       };
     case "accent":
       return {
         backgroundColor: mode("seaMist", "whiteAlpha.200")(props),
-        color: mode("darkTeal", "white")(props)
+        color: mode("darkTeal", "white")(props),
       };
     default:
       return {};
@@ -318,13 +321,13 @@ const getTabColorSchemeDisabledProps = (props: StyleFunctionProps) => {
         color: "steel",
       };
     case "base":
-    return {
-      color: mode("blackAlpha.400", "whiteAlpha.400")(props),
-    };
-  case "accent":
-    return {
-      color: mode("blackAlpha.400", "whiteAlpha.400")(props),
-    };
+      return {
+        color: mode("blackAlpha.400", "whiteAlpha.400")(props),
+      };
+    case "accent":
+      return {
+        color: mode("blackAlpha.400", "whiteAlpha.400")(props),
+      };
     default:
       return {};
   }
@@ -351,12 +354,15 @@ const getTablistColorSchemeProps = (props: StyleFunctionProps) => {
       return {
         backgroundColor: mode("white", "transparent")(props),
         color: "darkGrey",
-        boxShadow: mode(`inset 0 0 0 1px ${props.theme.colors.blackAlpha["400"]}`, `inset 0 0 0 1px ${props.theme.colors.whiteAlpha["400"]}`)(props),
+        boxShadow: mode(
+          `inset 0 0 0 1px ${props.theme.colors.blackAlpha["400"]}`,
+          `inset 0 0 0 1px ${props.theme.colors.whiteAlpha["400"]}`,
+        )(props),
       };
     case "accent":
-      return { 
-        backgroundColor: mode("mint", "whiteAlpha.100")(props), 
-        color: "darkTeal" 
+      return {
+        backgroundColor: mode("mint", "whiteAlpha.100")(props),
+        color: "darkTeal",
       };
     default:
       return {};

package/src/theme/components/textarea.ts

@@ -10,7 +10,7 @@ const config = defineStyleConfig({
     paddingTop: 2,
     "&:not(:placeholder-shown)": {
       "&:has(+ label)": {
-        paddingTop: 4
+        paddingTop: 4,
       },
       "& + label": {
         transform: "scale(0.825) translateY(-10px)",

package/src/theme/components/travel-tag.ts

@@ -11,7 +11,7 @@ const parts = anatomy("travel-tag").parts(
   "textContainer",
   "title",
   "description",
-  "deviationIcon"
+  "deviationIcon",
 );
 
 const helpers = createMultiStyleConfigHelpers(parts.keys);
@@ -166,7 +166,7 @@ const config = helpers.defineMultiStyleConfig({
       title: {
         fontSize: "mobile.xs",
         fontWeight: "normal",
-        color: mode("black", "white")(props)
+        color: mode("black", "white")(props),
       },
       description: {
         display: "none",

package/src/theme/foundations/spacing.ts

@@ -24,7 +24,7 @@ export const spacing = Object.entries(tokens.size.spacing).reduce(
     ...tokens,
     [Number(key)]: token,
   }),
-  {} as Record<keyof Spacing, string>
+  {} as Record<keyof Spacing, string>,
 );
 
 export const space = spacing;

package/src/theme/foundations/styles.ts

@@ -1,12 +1,12 @@
-import {StyleFunctionProps, mode} from "@chakra-ui/theme-tools";
+import { StyleFunctionProps, mode } from "@chakra-ui/theme-tools";
 
 export const styles = {
-    global: (props: StyleFunctionProps | Record<string, any>) => ({
-        'html, body': {
-            color: mode("darkGrey", "lightGrey")(props),
-        },
-        svg : {
-            display: "initial"
-        }
-    })
-}
+  global: (props: StyleFunctionProps | Record<string, any>) => ({
+    "html, body": {
+      color: mode("darkGrey", "lightGrey")(props),
+    },
+    svg: {
+      display: "initial",
+    },
+  }),
+};

package/src/theme/utils/box-shadow-utils.ts

@@ -11,7 +11,7 @@ type GetBoxShadowStringArgs = {
  * A utility for creating box shadow strings
  */
 export const getBoxShadowString = (
-  args: GetBoxShadowStringArgs | GetBoxShadowStringArgs[]
+  args: GetBoxShadowStringArgs | GetBoxShadowStringArgs[],
 ): string => {
   if (Array.isArray(args)) {
     return args.map((arg) => getBoxShadowString(arg)).join(", ");
@@ -34,7 +34,7 @@ export const getBoxShadowString = (
       }
     }
     allShadows.push(
-      `${isInset ? "inset " : ""}0 0 0 ${borderWidth}px ${color}`
+      `${isInset ? "inset " : ""}0 0 0 ${borderWidth}px ${color}`,
     );
   }
   if (baseShadow) {

package/src/toast/ActionToast.test.tsx

@@ -13,7 +13,7 @@ describe("<ActionToast />", () => {
         buttonText="Click me"
       >
         Test text
-      </ActionToast>
+      </ActionToast>,
     );
     getByRole("button").click();
     expect(handleClick).toHaveBeenCalled();

package/src/toast/BaseToast.test.tsx

@@ -6,21 +6,21 @@ import { BaseToast } from "./BaseToast";
 describe("<BaseToast />", () => {
   it("is accessible in variant success", async () => {
     const { container } = render(
-      <BaseToast variant="success">Test text</BaseToast>
+      <BaseToast variant="success">Test text</BaseToast>,
     );
     expect(await axe(container)).toHaveNoViolations();
   });
 
   it("is accessible in variant info", async () => {
     const { container } = render(
-      <BaseToast variant="info">Test text</BaseToast>
+      <BaseToast variant="info">Test text</BaseToast>,
     );
     expect(await axe(container)).toHaveNoViolations();
   });
 
   it("is accessible in variant error", async () => {
     const { container } = render(
-      <BaseToast variant="error">Test text</BaseToast>
+      <BaseToast variant="error">Test text</BaseToast>,
     );
     expect(await axe(container)).toHaveNoViolations();
   });

package/src/toast/ClosableToast.test.tsx

@@ -9,7 +9,7 @@ describe("<ClosableToast />", () => {
     const { getByRole } = render(
       <ClosableToast variant="success" onClose={handleClick}>
         Test text
-      </ClosableToast>
+      </ClosableToast>,
     );
     getByRole("button").click();
     expect(handleClick).toHaveBeenCalled();

package/src/toast/index.tsx

@@ -1 +1 @@
-export * from "./useToast";
+export * from "./useToast";

package/src/toast/useToast.tsx

@@ -31,8 +31,8 @@ type BaseToastOptions = {
   duration?: number;
 };
 
-export type ToastOptions =
-  | BaseToastOptions & (ClosableToastOptions | ActionToastOptions | {});
+export type ToastOptions = BaseToastOptions &
+  (ClosableToastOptions | ActionToastOptions | {});
 
 /**
  * Creates a function that can trigger toasts
@@ -96,4 +96,4 @@ const getToastComponent = (opts: ToastOptions) => {
       {opts.text}
     </BaseToast>
   );
-};
+};

package/src/typography/Badge.tsx

@@ -64,5 +64,5 @@ export const Badge = forwardRef<BadgeProps, As>(
         {children}
       </ChakraBadge>
     );
-  }
+  },
 );

package/src/typography/Text.tsx

@@ -22,5 +22,5 @@ export type TextProps = Omit<ChakraTextProps, "textStyle"> & {
 export const Text = forwardRef<TextProps, "p">(
   ({ variant = "sm", ...props }, ref) => {
     return <ChakraText {...props} textStyle={variant} ref={ref} />;
-  }
+  },
 );

package/tsconfig.json

@@ -3,6 +3,6 @@
   "include": ["."],
   "exclude": ["dist", "build", "node_modules"],
   "compilerOptions": {
-    "rootDir": ".",
+    "rootDir": "."
   }
 }