@vygruppen/spor-react 11.3.10 → 12.0.0

package/src/theme/utils/core-utils.ts

@@ -0,0 +1,91 @@
+import { brandBackground } from "./brand-utils";
+import { surface } from "./surface-utils";
+import { State, Subset } from "./types";
+
+type coreBackgroundState = Subset<
+  State,
+  "default" | "active" | "selected" | "hover" | "disabled"
+>;
+export function coreBackground(state: coreBackgroundState) {
+  switch (state) {
+    case "active":
+      return brandBackground("active");
+    case "selected":
+      return brandBackground("default");
+
+    case "disabled":
+      return surface("disabled");
+    case "hover":
+    default:
+      return { backgroundColor: "transparent" };
+  }
+}
+
+type BorderState = Subset<
+  State,
+  "hover" | "focus" | "active" | "disabled" | "selected" | "invalid" | "default"
+>;
+
+export function coreBorder(state: BorderState) {
+  switch (state) {
+    case "hover":
+      return {
+        outline: "2px solid",
+        outlineColor: "core.outline",
+      };
+
+    case "disabled": {
+      return {
+        outline: "1px solid",
+        outlineColor: "outline.disabled",
+      };
+    }
+    case "active": {
+      return {
+        outline: "1px solid",
+        outlineColor: "core.outline",
+      };
+    }
+    case "invalid": {
+      return {
+        outline: "2px solid",
+        outlineColor: "outline.error",
+      };
+    }
+    case "default":
+    default:
+      return {
+        outline: "1px solid",
+        outlineColor: "core.outline",
+      };
+  }
+}
+
+type coreTextState = Subset<
+  State,
+  "default" | "selected" | "disabled" | "highlight" | "active"
+>;
+export function coreText(state: coreTextState) {
+  switch (state) {
+    case "selected":
+      return {
+        color: "brand.text",
+      };
+    case "active":
+      return {
+        color: "brand.text",
+      };
+    case "highlight":
+      return {
+        color: "text.highlight",
+      };
+    case "disabled":
+      return {
+        color: "text.disabled",
+      };
+    default:
+      return {
+        color: "core.text",
+      };
+  }
+}

package/src/theme/utils/floating-utils.ts

@@ -1,80 +1,61 @@
-import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
 import { brandBackground } from "./brand-utils";
 import { State, Subset } from "./types";
 
 type FloatingBackgroundState = Subset<
   State,
-  "default" | "hover" | "active" | "selected"
+  "default" | "hover" | "active" | "focus"
 >;
 
-export function floatingBackground(
-  state: FloatingBackgroundState,
-  props: StyleFunctionProps,
-) {
+export function floatingBackground(state: FloatingBackgroundState) {
   switch (state) {
-    case "selected":
-      return brandBackground("default", props);
+    case "focus":
+      return brandBackground("default");
     case "active":
       return {
-        backgroundColor: mode(
-          "floating.surface.active.light",
-          "floating.surface.active.dark",
-        )(props),
+        backgroundColor: "floating.surface.active",
       };
     case "hover":
       return {
-        backgroundColor: mode(
-          "floating.surface.hover.light",
-          `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`,
-        )(props),
+        backgroundColor: {
+          _light: "floating.surface.hover",
+          _dark: `color-mix(in srgb, white 10%, var(--spor-colors-bg))`,
+        },
       };
     case "default":
       return {
-        backgroundColor: mode(
-          "white",
-          `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`,
-        )(props),
+        backgroundColor: {
+          _light: "bg",
+          _dark: `color-mix(in srgb, white 10%, var(--spor-colors-bg))`,
+        },
       };
   }
 }
 
 type FloatingBorderState = Subset<
   State,
-  "default" | "hover" | "active" | "selected"
+  "default" | "hover" | "active" | "focus"
 >;
-export function floatingBorder(
-  state: FloatingBorderState,
-  props: StyleFunctionProps,
-) {
+export function floatingBorder(state: FloatingBorderState) {
   switch (state) {
     case "hover":
       return {
         outline: "1px solid",
-        outlineColor: mode(
-          "floating.outline.hover.light",
-          "floating.outline.hover.dark",
-        )(props),
+        outlineColor: "floating.outline.hover",
       };
-    case "selected":
+    case "focus":
       return {
         outline: "1px solid",
-        outlineColor: mode("outline.focus.light", "outline.focus.dark")(props),
+        outlineColor: "outline.focus",
       };
     case "active":
       return {
         outline: "1px solid",
-        outlineColor: mode(
-          "floating.outline.active.light",
-          "floating.outline.active.dark",
-        )(props),
+        outlineColor: "floating.outline.active",
       };
     default:
       return {
         outline: "1px solid",
-        outlineColor: mode(
-          "floating.outline.default.light",
-          "floating.outline.default.dark",
-        )(props),
+        outlineColor: "floating.outline",
       };
   }
 }

package/src/theme/utils/ghost-utils.ts

@@ -1,6 +1,4 @@
-import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
 import { State, Subset } from "./types";
-import { fontWeights } from "../foundations";
 
 type GhostBackgroundState = Subset<
   State,
@@ -8,32 +6,20 @@ type GhostBackgroundState = Subset<
 >;
 
 /** 👻👻👻👻👻👻👻👻👻👻👻👻👻👻 */
-export function ghostBackground(
-  state: GhostBackgroundState,
-  props: StyleFunctionProps,
-) {
+export function ghostBackground(state: GhostBackgroundState) {
   switch (state) {
     case "hover": {
       return {
-        backgroundColor: mode(
-          "ghost.surface.hover.light",
-          "ghost.surface.hover.dark",
-        )(props),
+        backgroundColor: "ghost.surface.hover",
       };
     }
     case "active":
       return {
-        backgroundColor: mode(
-          "ghost.surface.active.light",
-          "ghost.surface.active.dark",
-        )(props),
+        backgroundColor: "ghost.surface.active",
       };
     case "selected": {
       return {
-        backgroundColor: mode(
-          "ghost.surface.hover.light",
-          "ghost.surface.hover.dark",
-        )(props),
+        backgroundColor: "ghost.surface.selected",
       };
     }
     case "default":
@@ -45,15 +31,15 @@ export function ghostBackground(
 
 type GhostTextState = Subset<State, "default" | "selected">;
 
-export function ghostText(state: GhostTextState, props: StyleFunctionProps) {
+export function ghostText(state: GhostTextState) {
   switch (state) {
     case "selected":
       return {
-        color: mode("ghost.text.light", "ghost.text.dark")(props),
+        color: "ghost.text",
       };
     default:
       return {
-        color: mode("ghost.text.light", "ghost.text.dark")(props),
+        color: "ghost.text",
       };
   }
 }

package/src/theme/utils/input-utils.ts

@@ -1,68 +1,66 @@
-import { StyleFunctionProps } from "@chakra-ui/theme-tools";
-import { baseBackground, baseBorder, baseText } from "./base-utils";
+import { coreBackground, coreBorder, coreText } from "./core-utils";
 import { floatingBackground, floatingBorder } from "./floating-utils";
 import { InputState } from "./types";
-import { focusVisibleStyles } from "./focus-utils";
 import { surface } from "./surface-utils";
 
-export function inputVariant(state: InputState, props: StyleFunctionProps) {
+export function inputVariant(state: InputState) {
   switch (state) {
     case "base":
       return {
-        ...baseBackground("default", props),
-        ...baseBorder("default", props),
+        ...coreBackground("default"),
+        ...coreBorder("default"),
         _hover: {
-          ...baseBorder("hover", props),
+          ...coreBorder("hover"),
         },
         _active: {
-          ...baseBackground("active", props),
-          ...baseBorder("default", props),
+          backgroundColor: "core.surface.active",
+          ...coreBorder("default"),
         },
         _selected: {
-          ...baseBackground("selected", props),
-          ...baseBorder("selected", props),
+          ...coreBackground("selected"),
+          ...coreBorder("selected"),
         },
       };
     case "floating":
       return {
         boxShadow: "sm",
-        ...floatingBackground("default", props),
-        ...floatingBorder("default", props),
+        ...floatingBackground("default"),
+        ...floatingBorder("default"),
 
         _hover: {
-          ...floatingBorder("hover", props),
-          ...floatingBackground("hover", props),
+          ...floatingBorder("hover"),
+          ...floatingBackground("hover"),
         },
         _active: {
-          ...floatingBorder("active", props),
-          ...floatingBackground("active", props),
+          ...floatingBorder("active"),
+          backgroundColor: "core.surface.active",
         },
         _selected: {
-          ...floatingBorder("selected", props),
-          ...floatingBackground("selected", props),
+          backgroundColor: "floating.surface.selected",
+          borderColor: "floating.border.selected",
         },
       };
     case "default":
     default:
       return {
-        ...baseBackground("default", props),
-        ...baseBorder("default", props),
+        ...coreBackground("default"),
+        ...coreBorder("default"),
         _hover: {
-          ...baseBorder("hover", props),
+          ...coreBorder("hover"),
         },
         _active: {
-          ...baseBackground("active", props),
-          ...baseBorder("default", props),
+          backgroundColor: "core.surface.active",
+          ...coreBorder("default"),
         },
         _selected: {
-          ...baseBackground("selected", props),
-          ...baseBorder("selected", props),
+          ...coreBackground("selected"),
+          ...coreBorder("selected"),
         },
       };
   }
 }
 
-export const inputBaseStyle = (props: StyleFunctionProps) => ({
+export const inputBaseStyle = () => ({
   field: {
     appearance: "none",
     width: "100%",
@@ -75,25 +73,22 @@ export const inputBaseStyle = (props: StyleFunctionProps) => ({
     paddingX: 3,
     height: 8,
     fontSize: "mobile.md",
-    _focusVisible: {
-      ...focusVisibleStyles(props)._focusVisible,
-      outlineOffset: 0,
-    },
+
     _disabled: {
-      ...surface("disabled", props),
-      ...baseBorder("disabled", props),
+      ...surface("disabled"),
+      ...coreBorder("disabled"),
       pointerEvents: "none",
     },
     _invalid: {
-      ...baseBorder("invalid", props),
+      ...coreBorder("invalid"),
       _hover: {
-        ...baseBorder("hover", props),
+        ...coreBorder("hover"),
       },
     },
     " + label, + div[data-lastpass-icon-root] + label": {
       fontSize: ["mobile.sm", "desktop.sm"],
       top: "2px",
-      left: props.paddingLeft || props.pl || 3,
+      left: 3,
       zIndex: 2,
       position: "absolute",
       marginY: 2,
@@ -113,7 +108,7 @@ export const inputBaseStyle = (props: StyleFunctionProps) => ({
   },
   group: {
     ":has(:disabled)": {
-      ...baseText("disabled", props),
+      ...coreText("disabled"),
     },
   },
 });

package/src/theme/utils/outline-utils.ts

@@ -1,26 +1,19 @@
-import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
 import { State, Subset } from "./types";
 
 type OutlineBorderState = Subset<State, "default" | "error" | "focus">;
-export function outlineBorder(
-  state: OutlineBorderState,
-  props: StyleFunctionProps,
-) {
+export function outlineBorder(state: OutlineBorderState) {
   switch (state) {
     case "error":
       return {
-        outlineColor: mode("outline.error.light", "outline.error.dark")(props),
+        outlineColor: "outline.error",
       };
     case "focus":
       return {
-        outlineColor: mode("outline.focus.light", "outline.focus.dark")(props),
+        outlineColor: "outline.focus",
       };
     default:
       return {
-        outlineColor: mode(
-          "outline.default.light",
-          "outline.default.dark",
-        )(props),
+        outlineColor: "outline",
       };
   }
 }

package/src/theme/utils/surface-utils.ts

@@ -1,35 +1,21 @@
-import { mode } from "@chakra-ui/theme-tools";
-
 type Surface = "default" | "secondary" | "tertiary" | "disabled";
-export const surface = (surface: Surface, props: any) => {
+export const surface = (surface: Surface) => {
   switch (surface) {
     case "default":
       return {
-        backgroundColor: mode(
-          "surface.default.light",
-          "surface.default.dark",
-        )(props),
+        backgroundColor: "surface",
       };
     case "secondary":
       return {
-        backgroundColor: mode(
-          "surface.secondary.light",
-          "surface.secondary.dark",
-        )(props),
+        backgroundColor: "surface.secondary",
       };
     case "tertiary":
       return {
-        backgroundColor: mode(
-          "surface.tertiary.light",
-          "surface.tertiary.dark",
-        )(props),
+        backgroundColor: "surface.tertiary",
       };
     case "disabled":
       return {
-        backgroundColor: mode(
-          "surface.disabled.light",
-          "surface.disabled.dark",
-        )(props),
+        backgroundColor: "surface.disabled",
       };
   }
 };

package/src/theme/utils/types.ts

@@ -6,6 +6,7 @@ export type State =
   | "selected"
   | "invalid"
   | "disabled"
+  | "highlight"
   | "error"
   | "focus";
 

package/src/toast/index.tsx

@@ -1 +1 @@
-export * from "./useToast";
+export { createToast } from "./toast";

package/src/toast/toast.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import React from "react";
+
+import {
+  Toaster as ChakraToaster,
+  Icon,
+  Portal,
+  Stack,
+  Toast,
+  createToaster,
+} from "@chakra-ui/react";
+import { createTexts, useTranslation } from "@/i18n";
+import {
+  InformationFill18Icon,
+  SuccessFill18Icon,
+  ErrorFill18Icon,
+} from "@vygruppen/spor-icon-react";
+
+const toaster = createToaster({
+  placement: "bottom",
+  pauseOnPageIdle: true,
+});
+
+type Variant = "info" | "success" | "error";
+
+type ToastProps = {
+  duration?: number;
+  text: string;
+  variant: Variant;
+  id?: string;
+};
+
+export const createToast = ({
+  text,
+  variant,
+  id,
+  duration = 6000,
+}: ToastProps) =>
+  toaster.create({
+    description: text,
+    type: variant,
+    id,
+    duration,
+  });
+
+export const Toaster = () => {
+  return (
+    <Portal>
+      <ChakraToaster toaster={toaster} insetInline={{ mdDown: "4" }}>
+        {(toast) => (
+          <Toast.Root width={{ md: "sm" }} role="alert">
+            <ToastIcon variant={toast.type as Variant} />
+            <Stack gap="1" flex="1" maxWidth="100%">
+              <Toast.Description>{toast.description}</Toast.Description>
+            </Stack>
+          </Toast.Root>
+        )}
+      </ChakraToaster>
+    </Portal>
+  );
+};
+
+const iconComponents = {
+  info: InformationFill18Icon,
+  success: SuccessFill18Icon,
+  error: ErrorFill18Icon,
+} as const;
+
+const ToastIcon = ({ variant }: { variant: Variant }) => {
+  const { t } = useTranslation();
+
+  const ariaLabel = t(texts[variant as keyof typeof texts]);
+
+  const IconComponent = iconComponents[variant];
+
+  if (!IconComponent) return null;
+
+  return (
+    <Icon aria-label={ariaLabel}>
+      <IconComponent />
+    </Icon>
+  );
+};
+
+const texts = createTexts({
+  info: {
+    nb: "Informasjon",
+    nn: "Informasjon",
+    sv: "Information",
+    en: "Information",
+  },
+  success: {
+    nb: "Suksess",
+    nn: "Suksess",
+    sv: "Succé",
+    en: "Success",
+  },
+  error: {
+    nb: "Feil",
+    nn: "Feil",
+    sv: "Error",
+    en: "Error",
+  },
+});

package/src/transition/index.ts

@@ -1,8 +1,2 @@
-export { Collapse, Fade, ScaleFade, Slide, SlideFade } from "@chakra-ui/react";
-export type {
-  CollapseProps,
-  FadeProps,
-  ScaleFadeProps,
-  SlideFadeProps,
-  SlideProps,
-} from "@chakra-ui/react";
+export { Collapsible } from "@chakra-ui/react";
+export type { CollapsibleRootProps } from "@chakra-ui/react";

package/src/typography/Badge.tsx

@@ -1,68 +1,22 @@
+"use client";
+
 import {
+  Box,
   Badge as ChakraBadge,
   BadgeProps as ChakraBadgeProps,
-  forwardRef,
 } from "@chakra-ui/react";
-import { As } from "@chakra-ui/system";
-import React from "react";
+import { IconComponent } from "@vygruppen/spor-icon-react";
+import React, { forwardRef } from "react";
 
-export type BadgeProps = Omit<
-  ChakraBadgeProps,
-  "variant" | "colorScheme" | "size"
-> & {
-  /**
-   * The color scheme of the badge.
-   */
-  colorScheme?:
-    | "yellow"
-    | "light-yellow"
-    | "red"
-    | "light-green"
-    | "dark-green"
-    | "orange"
-    | "light-blue"
-    | "dark-blue"
-    | "grey"
-    | "white";
-  /** The design variant – "solid" by default.
-   *
-   * Can be specified as `outline` to render a border around the badge. */
-  variant?: "solid" | "outline";
-  /** Optional badge icon. Will be rendered to the left of the text.
-   *
-   * Make sure you pass in the 18px version of the icon.
-   */
-  icon?: React.ReactElement;
+export type BadgeProps = ChakraBadgeProps & {
+  icon?: IconComponent;
 };
-/**
- * Shows some additional information about the component it's used within.
- *
- * You have to specify some content (icons should be placed to the left, if present), and a colorScheme.
- *
- * ```tsx
- * <Badge colorScheme="light-green">Hello</Badge>
- * ```
- *
- * If you want an icon, pass it in through the `icon` prop:
- *
- * ```tsx
- * <Badge colorScheme="light-blue" icon={<InformationOutline18Icon />}>
- *   Information
- * </Badge>
- * ```
- */
-export const Badge = forwardRef<BadgeProps, As>(
-  ({ icon, colorScheme = "grey", children, ...props }, ref) => {
-    return (
-      <ChakraBadge
-        colorScheme={colorScheme}
-        {...props}
-        paddingLeft={icon ? 1 : undefined}
-        ref={ref}
-      >
-        {icon && React.cloneElement(icon, { marginRight: 1 })}
-        {children}
-      </ChakraBadge>
-    );
-  },
+
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ icon, children, ...props }, ref) => (
+    <ChakraBadge ref={ref} {...props}>
+      {children}
+      {icon && <Box as={icon} />}
+    </ChakraBadge>
+  ),
 );