@vygruppen/spor-react 7.2.2 → 8.0.0

package/src/theme/components/choice-chip.ts

@@ -1,7 +1,19 @@
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { anatomy, mode } from "@chakra-ui/theme-tools";
-import { getBoxShadowString } from "../utils/box-shadow-utils";
+import { anatomy } from "@chakra-ui/theme-tools";
 import { focusVisibleStyles } from "../utils/focus-util";
+import {
+  accentBackground,
+  baseBackground,
+  brandBackground,
+  floatingBackground,
+} from "../utils/background-utils";
+import { baseText, accentText } from "../utils/text-utils";
+import {
+  baseBorder,
+  accentBorder,
+  brandBorder,
+  floatingBorder,
+} from "../utils/border-utils";
 
 const parts = anatomy("choice-chip").parts("container", "icon", "label");
 
@@ -10,66 +22,152 @@ const helpers = createMultiStyleConfigHelpers(parts.keys);
 const config = helpers.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
-      backgroundColor: mode("white", "transparent")(props),
-      boxShadow: getBoxShadowString({ borderColor: "celadon" }),
-      color: mode("darkTeal", "white")(props),
       display: "inline-flex",
       alignItems: "center",
       fontSize: "16px",
       px: 1,
+      cursor: "pointer",
       _checked: {
-        color: "white",
-        background: "pine",
-        boxShadow: getBoxShadowString({ borderColor: "celadon" }),
-      },
-      "input:focus-visible + &": focusVisibleStyles(props)._focusVisible,
-      "@media (hover:hover)": {
+        ...accentText("selected", props),
+        ...accentBackground("selected", props),
+        ...accentBorder("selected", props),
         _hover: {
-          color: mode("darkTeal", "white")(props),
-          boxShadow: getBoxShadowString({
-            borderColor: "greenHaze",
-            borderWidth: 2,
-          }),
-          background: mode("coralGreen", "whiteAlpha.200")(props),
-          cursor: "pointer",
+          ...brandBackground("hover", props),
+          ...baseText("selected", props),
+          ...brandBorder("hover", props),
+        },
+        _active: {
+          ...baseText("selected", props),
+          ...brandBackground("active", props),
+          ...brandBorder("active", props),
         },
       },
-      _active: {
-        backgroundColor: mode("mint", "whiteAlpha.300")(props),
-        boxShadow: getBoxShadowString({
-          borderColor: "pine",
-        }),
+      _disabled: {
+        cursor: "not-allowed",
+        boxShadow: "none",
+        ...baseText("disabled", props),
+        ...baseBackground("disabled", props),
+        _hover: {
+          ...baseBackground("disabled", props),
+          boxShadow: "none",
+          ...baseText("disabled", props),
+        },
+        _checked: {
+          cursor: "not-allowed",
+          boxShadow: "none",
+          ...baseText("disabled", props),
+          ...baseBackground("disabled", props),
+          _hover: {
+            ...baseBackground("disabled", props),
+            boxShadow: "none",
+            ...baseText("disabled", props),
+          },
+        },
       },
+      "input:focus-visible + &": focusVisibleStyles(props)._focusVisible,
     },
     icon: {
       mr: props.hasLabel ? 1 : 0,
     },
   }),
+  variants: {
+    base: (props) => ({
+      container: {
+        ...baseBackground("default", props),
+        ...baseBorder("default", props),
+        ...baseText("default", props),
+        "@media (hover:hover)": {
+          _hover: {
+            ...baseText("default", props),
+            ...baseBorder("hover", props),
+            ...baseBackground("hover", props),
+          },
+        },
+        _active: {
+          ...baseBackground("active", props),
+          ...baseBorder("default", props),
+        },
+      },
+    }),
+    accent: (props) => ({
+      container: {
+        ...accentBackground("default", props),
+        ...accentText("default", props),
+        ...accentBorder("default", props),
+        "@media (hover:hover)": {
+          _hover: {
+            ...accentBackground("hover", props),
+            ...accentBorder("hover", props),
+            ...accentText("default", props),
+          },
+        },
+        _active: {
+          ...accentText("default", props),
+          ...accentBorder("active", props),
+          ...accentBackground("active", props),
+        },
+      },
+      _active: {
+        ...accentText("default", props),
+        ...accentBorder("active", props),
+        ...accentBackground("active", props),
+      },
+    }),
+    floating: (props) => ({
+      container: {
+        ...floatingBackground("default", props),
+        ...baseText("default", props),
+        ...floatingBorder("default", props),
+        _hover: {
+          ...floatingBackground("hover", props),
+          ...floatingBorder("hover", props),
+          ...baseText("default", props),
+        },
+        _active: {
+          ...floatingBackground("active", props),
+          ...floatingBorder("active", props),
+          ...baseText("default", props),
+        },
+      },
+    }),
+  },
   sizes: {
     sm: {
       container: {
-        borderRadius: "15px",
+        borderRadius: "30px",
+        _checked: {
+          borderRadius: "9px",
+        },
         height: "30px",
         px: 1.5,
       },
     },
     md: {
       container: {
-        borderRadius: "18px",
+        borderRadius: "30px",
+        _checked: {
+          borderRadius: "12px",
+        },
         height: "36px",
         px: 2,
       },
     },
     lg: {
       container: {
-        borderRadius: "21px",
+        borderRadius: "30px",
+        _checked: {
+          borderRadius: "12px",
+        },
         height: "42px",
         px: 2,
       },
     },
     xl: {
       container: {
-        borderRadius: "27px",
+        borderRadius: "30px",
+        _checked: {
+          borderRadius: "18px",
+        },
         height: "54px",
         px: 3,
       },

package/src/theme/components/datepicker.ts

@@ -58,10 +58,6 @@ const config = helpers.defineMultiStyleConfig({
     },
     calendarTriggerButton: {
       backgroundColor: mode("white", "night")(props),
-      boxShadow: getBoxShadowString({
-        borderColor: mode("darkGrey", "white")(props),
-        borderWidth: 1,
-      }),
       width: 8,
       display: "flex",
       alignItems: "center",

package/src/theme/components/popover.ts

@@ -1,6 +1,6 @@
 import { popoverAnatomy as parts } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { cssVar, mode } from "@chakra-ui/theme-tools";
+import { cssVar } from "@chakra-ui/theme-tools";
 import { focusVisibleStyles } from "../utils/focus-util";
 
 const $popperBg = cssVar("popper-bg");
@@ -15,7 +15,7 @@ const config = helpers.defineMultiStyleConfig({
       zIndex: "popover",
     },
     content: {
-      [$popperBg.variable]: mode(`colors.darkTeal`, `colors.pine`)(props),
+      [$popperBg.variable]: `colors.darkTeal`,
       backgroundColor: $popperBg.reference,
       [$arrowBg.variable]: $popperBg.reference,
       [$arrowShadowColor.variable]: `colors.blackAlpha.300`,
@@ -38,14 +38,13 @@ const config = helpers.defineMultiStyleConfig({
     closeButton: {
       position: "absolute",
       color: "white",
-      hover: "whiteAlpha.100",
       ...focusVisibleStyles(props),
       _active: {
         backgroundColor: "whiteAlpha.200",
       },
-      borderRadius: "xs",
-      top: 1,
-      insetEnd: 1,
+      borderRadius: "sm",
+      top: 2,
+      right: 2,
       width: 2,
       height: 2,
       padding: 1,

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

@@ -4,7 +4,7 @@ import { colors } from "../foundations";
 
 type BaseBackgroundState = Subset<
   State,
-  "default" | "active" | "selected" | "disabled"
+  "default" | "active" | "selected" | "hover" | "disabled"
 >;
 export function baseBackground(
   state: BaseBackgroundState,
@@ -23,6 +23,10 @@ export function baseBackground(
       return {
         backgroundColor: mode("silver", "whiteAlpha.100")(props),
       };
+    case "hover":
+      return {
+        backgroundColor: "transparent",
+      };
     default:
       return {
         backgroundColor: "transparent",
@@ -47,7 +51,7 @@ export function ghostBackground(
     }
     case "active":
       return {
-        backgroundColor: mode("seaMist", "whiteAlpha.200")(props),
+        backgroundColor: mode("mint", "whiteAlpha.200")(props),
       };
     case "focus":
       return {
@@ -111,3 +115,65 @@ export function floatingBackground(
       };
   }
 }
+
+type AccentBackgroundState = Subset<
+  State,
+  "default" | "hover" | "focus" | "active" | "selected"
+>;
+
+export function accentBackground(
+  state: AccentBackgroundState,
+  props: StyleFunctionProps,
+) {
+  switch (state) {
+    case "selected":
+      return {
+        backgroundColor: mode("primaryGreen", "coralGreen")(props),
+      };
+    case "active":
+      return {
+        backgroundColor: mode("mint", "darkTeal")(props),
+      };
+    case "hover":
+      return {
+        backgroundColor: mode("coralGreen", "greenHaze")(props),
+      };
+    case "focus":
+      return {
+        backgroundColor: mode("greenHaze", "azure")(props),
+      };
+    case "default":
+    default:
+      return {
+        backgroundColor: mode("seaMist", "pine")(props),
+      };
+  }
+}
+
+type BrandBackgroundState = Subset<
+  State,
+  "default" | "hover" | "focus" | "active" | "selected"
+>;
+
+export function brandBackground(
+  state: BrandBackgroundState,
+  props: StyleFunctionProps,
+) {
+  switch (state) {
+    case "selected":
+    case "active":
+      return {
+        backgroundColor: mode("greenHaze", "seaMist")(props),
+      };
+    case "hover":
+      return {
+        backgroundColor: mode("darkTeal", "blueGreen")(props),
+      };
+    case "focus":
+    case "default":
+    default:
+      return {
+        backgroundColor: mode("pine", "coralGreen")(props),
+      };
+  }
+}

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

@@ -84,6 +84,92 @@ export function floatingBorder(
       return {
         boxShadow: getBoxShadowString({
           borderColor: mode("grey.200", "whiteAlpha.400")(props),
+          baseShadow: "sm",
+        }),
+      };
+  }
+}
+
+type AccentBorderState = Subset<
+  State,
+  "default" | "hover" | "focus" | "active" | "selected"
+>;
+export function accentBorder(
+  state: AccentBorderState,
+  props: StyleFunctionProps,
+) {
+  switch (state) {
+    case "selected":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("primaryGreen", "coralGreen")(props),
+          borderWidth: 2,
+        }),
+      };
+    case "active":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("mint", "darkTeal")(props),
+          borderWidth: 2,
+        }),
+      };
+    case "hover":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("coralGreen", "greenHaze")(props),
+          borderWidth: 2,
+        }),
+      };
+    case "focus":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("greenHaze", "azure")(props),
+          borderWidth: 2,
+        }),
+      };
+    case "default":
+    default:
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("seaMist", "pine")(props),
+          borderWidth: 2,
+        }),
+      };
+  }
+}
+
+type BrandBorderState = Subset<
+  State,
+  "default" | "hover" | "focus" | "active" | "selected"
+>;
+
+export function brandBorder(
+  state: BrandBorderState,
+  props: StyleFunctionProps,
+) {
+  switch (state) {
+    case "selected":
+    case "active":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("greenHaze", "seaMist")(props),
+          borderWidth: 2,
+        }),
+      };
+    case "hover":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("darkTeal", "blueGreen")(props),
+          borderWidth: 2,
+        }),
+      };
+    case "focus":
+    case "default":
+    default:
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("pine", "coralGreen")(props),
+          borderWidth: 2,
         }),
       };
   }

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

@@ -0,0 +1,40 @@
+import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
+import { State, Subset } from "./types";
+import { colors } from "../foundations";
+
+type BaseTextState = Subset<State, "default" | "selected" | "disabled">;
+export function baseText(state: BaseTextState, props: StyleFunctionProps) {
+  switch (state) {
+    case "selected":
+      return {
+        color: mode("white", "darkTeal")(props),
+      };
+    case "disabled":
+      return {
+        color: mode(
+          "white",
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 40%)`,
+        )(props),
+      };
+    default:
+      return {
+        color: mode("darkGrey", "white")(props),
+      };
+  }
+}
+
+type AccentTextState = Subset<State, "default" | "selected">;
+
+export function accentText(state: AccentTextState, props: StyleFunctionProps) {
+  switch (state) {
+    case "selected":
+      return {
+        color: mode("white", "darkTeal")(props),
+      };
+    case "default":
+    default:
+      return {
+        color: mode("darkTeal", "seaMist")(props),
+      };
+  }
+}

package/src/{popover/SimplePopover.tsx → tooltip/Tooltip.tsx}

@@ -10,47 +10,45 @@ import {
 } from "@chakra-ui/react";
 import React from "react";
 
-type SimplePopoverProps = PopoverProps & {
+export type TooltipProps = PopoverProps & {
   /**
-   * Whatever is supposed to trigger the popover.
+   * Whatever is supposed to trigger the tooltip.
    * Must be focusable - like a link or button */
-  triggerElement?: React.ReactNode;
-  /** Callback for when the popover is requested to close */
+  children: React.ReactNode;
+  /** Callback for when the tooltip is requested to close */
   onClose?: () => void;
-  /** Should the popover have a close button? */
+  /** Should the tooltip have a close button? */
   withCloseButton?: boolean;
-  /** The content of the popover */
-  children: React.ReactNode;
+  /** The content of the tooltip */
+  content: React.ReactNode;
   /** Use this prop if you want to control the open state */
   isOpen?: boolean;
-  /** Whether or not the popover is open by default */
+  /** Whether or not the tooltip is open by default */
   defaultIsOpen?: boolean;
   /**
-   * Where the popover should be placed by default.
+   * Where the tooltip should be placed by default.
    *
    * Note - this is a suggestion, and may be overridden by space concerns.
    */
   placement?: "top" | "bottom" | "left" | "right";
   /**
    * The amount of spacing.
-   * Popovers with lots of content should be `lg`. Defaults to `sm`.
+   * Tooltips with lots of content should be `lg`. Defaults to `sm`.
    **/
   size?: "sm" | "lg";
-  borderRadius?: string;
 };
-/** A basic popover component for basic content */
-export const SimplePopover = ({
+/** A tooltip component. */
+export const Tooltip = ({
   children,
-  triggerElement,
+  content,
   onClose,
   isOpen,
   defaultIsOpen,
   placement = "bottom",
   size = "sm",
   withCloseButton = false,
-  borderRadius,
   ...props
-}: SimplePopoverProps) => {
+}: TooltipProps) => {
   return (
     <DarkMode>
       <Popover
@@ -63,11 +61,11 @@ export const SimplePopover = ({
         arrowShadowColor="none"
         {...props}
       >
-        {triggerElement && <PopoverTrigger>{triggerElement}</PopoverTrigger>}
-        <PopoverContent borderRadius={borderRadius}>
+        <PopoverTrigger>{children}</PopoverTrigger>
+        <PopoverContent>
           <PopoverArrow />
           {withCloseButton && <PopoverCloseButton />}
-          <PopoverBody>{children}</PopoverBody>
+          <PopoverBody>{content}</PopoverBody>
         </PopoverContent>
       </Popover>
     </DarkMode>

package/src/tooltip/index.tsx

@@ -0,0 +1 @@
+export * from "./Tooltip";

package/src/popover/PopoverWizardBody.tsx

@@ -1,91 +0,0 @@
-import { PopoverBody, usePopoverContext } from "@chakra-ui/react";
-import { ArrowRightFill18Icon } from "@vygruppen/spor-icon-react";
-import * as React from "react";
-import { Box, Button, Flex, Stack, createTexts, useTranslation } from "..";
-
-export type PopoverWizardProps = {
-  /** Each child will be their own step */
-  children: React.ReactNode;
-};
-/** A popover wizard is great for showing new features one by one */
-export const PopoverWizardBody = ({ children }: PopoverWizardProps) => {
-  const [currentStep, setCurrentStep] = React.useState(1);
-  const totalSteps = React.Children.count(children);
-  const { isOpen } = usePopoverContext();
-  React.useEffect(() => {
-    if (!isOpen && currentStep > 1) {
-      const id = setTimeout(() => setCurrentStep(1), 500);
-      return () => clearTimeout(id);
-    }
-  }, [isOpen, currentStep]);
-  return (
-    <PopoverBody>
-      <Stack spacing={1.5}>
-        <Box>{React.Children.toArray(children)[currentStep - 1]}</Box>
-        <Flex gap={3}>
-          <StepIndicator totalSteps={totalSteps} currentStep={currentStep} />
-          <NextStepButton
-            isLastStep={totalSteps === currentStep}
-            onNext={() => setCurrentStep((prev) => prev + 1)}
-          />
-        </Flex>
-      </Stack>
-    </PopoverBody>
-  );
-};
-
-type StepIndicatorProps = { totalSteps: number; currentStep: number };
-const StepIndicator = ({ totalSteps, currentStep }: StepIndicatorProps) => {
-  const steps = createRange(1, totalSteps);
-  return (
-    <Flex gap={1} alignItems="center">
-      {steps.map((step) => (
-        <Box
-          key={step}
-          width={1}
-          height={1}
-          borderRadius="50%"
-          transition="medium"
-          transitionProperty="background-color"
-          backgroundColor={step === currentStep ? "seaMist" : "greenHaze"}
-        />
-      ))}
-    </Flex>
-  );
-};
-
-const createRange = (start: number, end: number) => {
-  return new Array(end - start + 1).fill(null).map((_, i) => i + start);
-};
-
-type NextStepButtonProps = { isLastStep: boolean; onNext: () => void };
-const NextStepButton = ({ isLastStep, onNext }: NextStepButtonProps) => {
-  const { onClose } = usePopoverContext();
-  const { t } = useTranslation();
-  return (
-    <Button
-      variant="tertiary"
-      size="sm"
-      color="white"
-      leftIcon={isLastStep ? undefined : <ArrowRightFill18Icon />}
-      onClick={isLastStep ? onClose : onNext}
-    >
-      {t(isLastStep ? texts.finish : texts.nextStep)}
-    </Button>
-  );
-};
-
-const texts = createTexts({
-  nextStep: {
-    nb: "Neste",
-    nn: "Neste",
-    sv: "Nästa",
-    en: "Next",
-  },
-  finish: {
-    nb: "Fullfør",
-    nn: "Fullfør",
-    sv: "Fullför",
-    en: "Finish",
-  },
-});