@vygruppen/spor-react 4.0.2 → 4.1.0

package/src/input/FormErrorMessage.tsx

@@ -39,7 +39,7 @@ export const FormErrorMessage = ({
   const formControlContext = useFormControlContext();
   if (!formControlContext) {
     throw new Error(
-      "FormErrorMessage must be used within a FormControl component"
+      "FormErrorMessage must be used within a FormControl component",
     );
   }
   if (!formControlContext.isInvalid) {

package/src/input/InfoSelect.tsx

@@ -171,7 +171,7 @@ export function InfoSelect<T extends object>({
   const { labelProps, triggerProps, valueProps, menuProps } = useSelect(
     renamedProps,
     state,
-    triggerRef
+    triggerRef,
   );
 
   const styles = useMultiStyleConfig("InfoSelect", {

package/src/input/Input.tsx

@@ -60,5 +60,5 @@ export const Input = forwardRef<InputProps, "input">(
         )}
       </InputGroup>
     );
-  }
+  },
 );

package/src/input/InputElement.tsx

@@ -23,7 +23,7 @@ export type InputElementProps = ChakraInputElementProps;
  * ```
  */
 export const InputLeftElement = forwardRef<InputElementProps, "div">(
-  (props, ref) => <ChakraInputLeftElement {...props} ref={ref} />
+  (props, ref) => <ChakraInputLeftElement {...props} ref={ref} />,
 );
 
 /**
@@ -41,5 +41,5 @@ export const InputLeftElement = forwardRef<InputElementProps, "div">(
  * ```
  */
 export const InputRightElement = forwardRef<InputElementProps, "div">(
-  (props, ref) => <ChakraInputRightElement {...props} ref={ref} />
+  (props, ref) => <ChakraInputRightElement {...props} ref={ref} />,
 );

package/src/input/ListBox.tsx

@@ -89,7 +89,7 @@ export function ListBox<T extends object>({
           <ListBoxSection key={item.key} section={item} state={state} />
         ) : (
           <Option key={item.key} item={item} state={state} />
-        )
+        ),
       )}
     </List>
   );
@@ -163,7 +163,7 @@ function Option({ item, state }: OptionProps) {
       (event: TouchEvent) => {
         event.preventDefault();
       },
-      { passive: false, once: true }
+      { passive: false, once: true },
     );
   }, []);
 
@@ -221,7 +221,7 @@ function ListBoxSection({ section, state }: ListBoxSectionProps) {
         {Array.from(state.collection.getChildren(section.key)).map(
           (item: any) => (
             <Option key={item.key} item={item} state={state} />
-          )
+          ),
         )}
       </List>
     </ListItem>

package/src/input/NativeSelect.tsx

@@ -39,5 +39,5 @@ export const NativeSelect = forwardRef<NativeSelectProps, "select">(
         {label && <FormLabel>{label}</FormLabel>}
       </FormControl>
     );
-  }
+  },
 );

package/src/input/PasswordInput.tsx

@@ -53,7 +53,7 @@ export const PasswordInput = forwardRef<PasswordInputProps, "input">(
         </InputRightElement>
       </InputGroup>
     );
-  }
+  },
 );
 
 const texts = createTexts({

package/src/input/PhoneNumberInput.tsx

@@ -13,6 +13,8 @@ type CountryCodeAndPhoneNumber = {
   nationalNumber: string;
 };
 type PhoneNumberInputProps = Omit<BoxProps, "onChange"> & {
+  /** The label. Defaults to a localized version of "Phone number" */
+  label?: string;
   /** The root name.
    *
    * Please note that when specifying the name, the rendered names will be `${name}-country-code` and `${name}-phone-number`, respectively
@@ -42,10 +44,17 @@ type PhoneNumberInputProps = Omit<BoxProps, "onChange"> & {
  */
 export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
   (
-    { name, value: externalValue, onChange: externalOnChange, ...boxProps },
-    ref
+    {
+      label: externalLabel,
+      name,
+      value: externalValue,
+      onChange: externalOnChange,
+      ...boxProps
+    },
+    ref,
   ) => {
     const { t } = useTranslation();
+    const label = externalLabel ?? t(texts.phoneNumber);
     const [value, onChange] = useControllableState({
       value: externalValue,
       onChange: externalOnChange,
@@ -85,7 +94,7 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
         <Input
           ref={ref}
           type="tel"
-          label={t(texts.phoneNumber)}
+          label={label}
           value={value.nationalNumber}
           name={name ? `${name}-phone-number` : "phone-number"}
           onChange={(e) => {
@@ -101,7 +110,7 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
         />
       </AttachedInputs>
     );
-  }
+  },
 );
 
 const texts = createTexts({

package/src/input/Popover.tsx

@@ -45,7 +45,7 @@ type PopoverProps = {
    */
   hasBackdrop?: boolean;
   /** The minimum padding required between the popover and the surrounding container
-   * 
+   *
    * Defaults to 12 (the same as React Aria's default)
    */
   containerPadding?: number;
@@ -69,7 +69,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       hasBackdrop = true,
       containerPadding = 12,
     },
-    ref
+    ref,
   ) => {
     const internalRef = useRef<HTMLDivElement>(null);
     const popoverRef = ref ?? (internalRef as any);
@@ -85,7 +85,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
         isNonModal,
         containerPadding,
       },
-      state
+      state,
     );
 
     const popoverBox = (
@@ -109,5 +109,5 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
         {popoverBox}
       </Overlay>
     );
-  }
+  },
 );

package/src/input/RadioGroup.tsx

@@ -43,5 +43,5 @@ export const RadioGroup = forwardRef<RadioGroupProps, "div">(
         <Stack direction={direction}>{children}</Stack>
       </ChakraRadioGroup>
     );
-  }
+  },
 );

package/src/input/SearchInput.tsx

@@ -71,7 +71,7 @@ export const SearchInput = forwardRef<SearchInputProps, "input">(
         )}
       </InputGroup>
     );
-  }
+  },
 );
 
 const texts = createTexts({

package/src/input/Switch.tsx

@@ -36,5 +36,5 @@ export type SwitchProps = Exclude<
 export const Switch = forwardRef<SwitchProps, "input">(
   ({ size = "md", ...props }: SwitchProps, ref) => {
     return <ChakraSwitch variant="solid" size={size} {...props} ref={ref} />;
-  }
+  },
 );

package/src/layout/Stack.tsx

@@ -38,5 +38,5 @@ export type StackProps = Exclude<ChakraStackProps, "direction"> & {
 export const Stack = forwardRef<StackProps, "div">(
   ({ flexDirection, ...props }, ref) => {
     return <ChakraStack {...props} direction={flexDirection} ref={ref} />;
-  }
+  },
 );

package/src/linjetag/TravelTag.tsx

@@ -71,7 +71,7 @@ export const TravelTag = forwardRef<TravelTagProps, As>(
       isDisabled,
       ...rest
     },
-    ref
+    ref,
   ) => {
     const styles = useMultiStyleConfig("TravelTag", {
       variant,
@@ -100,7 +100,7 @@ export const TravelTag = forwardRef<TravelTagProps, As>(
         {DeviationLevelIcon && <DeviationLevelIcon sx={styles.deviationIcon} />}
       </Box>
     );
-  }
+  },
 );
 
 const getDeviationLevelIcon = ({

package/src/link/TextLink.tsx

@@ -32,7 +32,7 @@ export const TextLink = forwardRef<LinkProps, "a">(
         )}
       </ChakraLink>
     );
-  }
+  },
 );
 
 const texts = createTexts({

package/src/list/index.tsx

@@ -1,3 +1,2 @@
 export { ListItem, OrderedList, UnorderedList } from "@chakra-ui/react";
 export type { ListItemProps, ListProps } from "@chakra-ui/react";
-

package/src/loader/DarkSpinner.tsx

@@ -1,6 +1,6 @@
-import { spinnerDarkData } from "@vygruppen/spor-loader";
+import { spinnerDarkData, spinnerLightData } from "@vygruppen/spor-loader";
 import React from "react";
-import { Box, BoxProps, Center } from "..";
+import { Box, BoxProps, Center, useColorMode } from "..";
 import { ClientOnly } from "./ClientOnly";
 import Lottie from "./Lottie";
 
@@ -26,12 +26,12 @@ export const DarkSpinner = ({
   maxWidth,
   ...props
 }: DarkSpinnerProps) => {
+  const { colorMode } = useColorMode();
+  const spinnerData = colorMode === "dark" ? spinnerLightData : spinnerDarkData;
   return (
     <Center flexDirection="column" {...props}>
       <Box width={width} maxWidth={maxWidth}>
-        <ClientOnly>
-          {() => <Lottie animationData={spinnerDarkData} />}
-        </ClientOnly>
+        <ClientOnly>{() => <Lottie animationData={spinnerData} />}</ClientOnly>
       </Box>
       {children && (
         <Box marginTop={3} fontWeight="bold">

package/src/loader/SkeletonText.tsx

@@ -1,8 +1,11 @@
-import { SkeletonText as ChakraSkeletonText, SkeletonTextProps as ChakraSkeletonTextProps } from "@chakra-ui/react";
+import {
+  SkeletonText as ChakraSkeletonText,
+  SkeletonTextProps as ChakraSkeletonTextProps,
+} from "@chakra-ui/react";
 import React from "react";
 
-export type SkeletonTextProps = ChakraSkeletonTextProps
-  
+export type SkeletonTextProps = ChakraSkeletonTextProps;
+
 /**
  * SkeletonText renders a loading animation for a given text. It works great as a placeholder to avoid layout shifts.
  */

package/src/loader/useRotatingLabel.tsx

@@ -9,13 +9,13 @@ type UseRotatingLabelArgs = {
 export const useRotatingLabel = ({ label, delay }: UseRotatingLabelArgs) => {
   const loadingTextArray = useMemo(
     () => (Array.isArray(label) ? label : [label]),
-    [label]
+    [label],
   );
   const [currentLoadingTextIndex, setCurrentLoadingTextIndex] = useState(0);
 
   useInterval(() => {
     setCurrentLoadingTextIndex(
-      (prevIndex) => (prevIndex + 1) % loadingTextArray.length
+      (prevIndex) => (prevIndex + 1) % loadingTextArray.length,
     );
   }, delay);
   return loadingTextArray[currentLoadingTextIndex];

package/src/media-controller/index.test.tsx

@@ -8,7 +8,7 @@ describe("<PlayPauseButton />", () => {
   it("works like a button", async () => {
     const handleClick = vi.fn();
     const { getByRole } = render(
-      <PlayPauseButton size="sm" isPlaying={true} onClick={handleClick} />
+      <PlayPauseButton size="sm" isPlaying={true} onClick={handleClick} />,
     );
     getByRole("button").click();
     expect(handleClick).toHaveBeenCalled();
@@ -16,7 +16,7 @@ describe("<PlayPauseButton />", () => {
 
   it("is accessible", async () => {
     const { container } = render(
-      <PlayPauseButton size="sm" isPlaying={true} onClick={() => {}} />
+      <PlayPauseButton size="sm" isPlaying={true} onClick={() => {}} />,
     );
     expect(await axe(container)).toHaveNoViolations();
   });
@@ -26,7 +26,7 @@ describe("<SkipButtonButton />", () => {
   it("works like a button", async () => {
     const handleClick = vi.fn();
     const { getByRole } = render(
-      <SkipButton size="sm" direction="forward" onClick={handleClick} />
+      <SkipButton size="sm" direction="forward" onClick={handleClick} />,
     );
     getByRole("button").click();
     expect(handleClick).toHaveBeenCalled();
@@ -34,7 +34,7 @@ describe("<SkipButtonButton />", () => {
 
   it("is accessible", async () => {
     const { container } = render(
-      <SkipButton size="sm" direction="forward" onClick={() => {}} />
+      <SkipButton size="sm" direction="forward" onClick={() => {}} />,
     );
     expect(await axe(container)).toHaveNoViolations();
   });
@@ -44,7 +44,7 @@ describe("<JumpButtonButton />", () => {
   it("works like a button", async () => {
     const handleClick = vi.fn();
     const { getByRole } = render(
-      <JumpButton size="sm" direction="forward" onClick={handleClick} />
+      <JumpButton size="sm" direction="forward" onClick={handleClick} />,
     );
     getByRole("button").click();
     expect(handleClick).toHaveBeenCalled();
@@ -52,7 +52,7 @@ describe("<JumpButtonButton />", () => {
 
   it("is accessible", async () => {
     const { container } = render(
-      <JumpButton size="sm" direction="forward" onClick={() => {}} />
+      <JumpButton size="sm" direction="forward" onClick={() => {}} />,
     );
     expect(await axe(container)).toHaveNoViolations();
   });

package/src/modal/Drawer.tsx

@@ -73,7 +73,7 @@ export const DrawerContent = forwardRef<DrawerContentProps, any>(
         </ChakraDrawerContent>
       </Box>
     );
-  }
+  },
 );
 
 const Notch = forwardRef<BoxProps, any>((props, ref) => {
@@ -90,9 +90,7 @@ const Notch = forwardRef<BoxProps, any>((props, ref) => {
       ref={ref}
     >
       <Center
-        background={
-          placement === "bottom" ? "bottom" : "top"
-        }
+        background={placement === "bottom" ? "bottom" : "top"}
         padding={2}
         borderRadius="md"
       >

package/src/modal/ModalHeader.tsx

@@ -27,5 +27,5 @@ export const ModalHeader = forwardRef<ModalHeaderProps, "header">(
           : ("left" as ChakraModalHeaderProps["textAlign"]),
     };
     return <ChakraModalHeader {...props} ref={ref} {...styles} />;
-  }
+  },
 );

package/src/provider/index.tsx

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

package/src/stepper/Stepper.tsx

@@ -13,10 +13,10 @@ import { StepperProvider } from "./StepperContext";
 
 type StepperProps = {
   onClick: (clickedStep: number) => void;
-  colorScheme: "light" | "dark" | "green";
   title?: string;
   activeStep: number;
   steps: string[];
+  variant: "base" | "accent";
 };
 /**
  * A stepper is used to show which step of a process a user is currently in.
@@ -37,9 +37,9 @@ export const Stepper = ({
   steps,
   activeStep: activeStepAsStringOrNumber,
   title,
-  colorScheme,
+  variant,
 }: StepperProps) => {
-  const style = useMultiStyleConfig("Stepper", { colorScheme });
+  const style = useMultiStyleConfig("Stepper", { variant });
   const numberOfSteps = steps.length;
   const activeStep = Number(activeStepAsStringOrNumber);
   const { t } = useTranslation();
@@ -48,7 +48,7 @@ export const Stepper = ({
       <StepperProvider
         onClick={onClick}
         activeStep={activeStep}
-        colorScheme={colorScheme}
+        variant={variant}
         numberOfSteps={numberOfSteps}
       >
         <Box __css={style.container}>
@@ -74,7 +74,11 @@ export const Stepper = ({
                 borderRadius="xs"
               >
                 {steps.map((step, index) => (
-                  <StepperStep key={step} stepNumber={index + 1}>
+                  <StepperStep
+                    key={step}
+                    stepNumber={index + 1}
+                    variant={variant}
+                  >
                     {step}
                   </StepperStep>
                 ))}
@@ -88,7 +92,7 @@ export const Stepper = ({
           </Box>
           <Flex justifyContent="center" display={["none", "flex"]}>
             {steps.map((step, index) => (
-              <StepperStep key={index} stepNumber={index + 1}>
+              <StepperStep key={index} stepNumber={index + 1} variant={variant}>
                 {step}
               </StepperStep>
             ))}

package/src/stepper/StepperContext.tsx

@@ -3,24 +3,24 @@ import React from "react";
 type StepperContextType = {
   activeStep: number;
   numberOfSteps: number;
-  colorScheme: ColorScheme;
+  variant: Variant;
   onClick: (clickedIndex: number) => void;
 };
 const StepperContext = React.createContext<StepperContextType | null>(null);
 
-type ColorScheme = "green" | "light" | "dark";
+type Variant = "base" | "accent";
 
 type StepperProviderProps = {
   /** Stepper steps */
   children: React.ReactNode;
   /** Callback whenever a stepper step is clicked */
   onClick: (clickedIndex: number) => void;
-  /** The current color scheme */
-  colorScheme: ColorScheme;
   /** The currently active step */
   activeStep: number;
   /** The amount of steps */
   numberOfSteps: number;
+  /** The current variant */
+  variant: Variant;
 };
 /**
  * Internal provider for sharing logic between stepper and stepper steps.
@@ -29,12 +29,12 @@ export const StepperProvider = ({
   activeStep,
   children,
   onClick,
-  colorScheme,
   numberOfSteps,
+  variant,
 }: StepperProviderProps) => {
   return (
     <StepperContext.Provider
-      value={{ activeStep, onClick, colorScheme, numberOfSteps }}
+      value={{ activeStep, onClick, numberOfSteps, variant }}
     >
       {children}
     </StepperContext.Provider>
@@ -48,7 +48,7 @@ export const useStepper = () => {
   const context = React.useContext(StepperContext);
   if (!context) {
     throw new Error(
-      "useStepper must be used within a StepperProvider. Most likely, you forgot to wrap your StepperStep in a Stepper component"
+      "useStepper must be used within a StepperProvider. Most likely, you forgot to wrap your StepperStep in a Stepper component",
     );
   }
   return context;

package/src/stepper/StepperStep.tsx

@@ -1,43 +1,83 @@
-import { Flex, useMultiStyleConfig } from "@chakra-ui/react";
+import { useMultiStyleConfig } from "@chakra-ui/react";
 import { DropdownRightFill18Icon } from "@vygruppen/spor-icon-react";
 import React from "react";
-import { Box } from "..";
+import { Box, Button } from "..";
 import { useStepper } from "./StepperContext";
 
 type StepperStepProps = {
   children: React.ReactNode;
   stepNumber: number;
+  variant: "base" | "accent";
 };
-export const StepperStep = ({ children, stepNumber }: StepperStepProps) => {
-  const { activeStep, onClick, colorScheme } = useStepper();
-  const variant = getVariant(stepNumber!, activeStep);
+export const StepperStep = ({
+  children,
+  stepNumber,
+  variant,
+}: StepperStepProps) => {
+  const { activeStep, onClick } = useStepper();
+  const state = getState(stepNumber!, activeStep);
   const style = useMultiStyleConfig("Stepper", {
+    state,
     variant,
-    colorScheme,
   });
 
+  const adjustedProps = getButtonStylesForState(state);
+
   return (
     <Box __css={style.stepContainer}>
       {stepNumber > 1 && (
         <DropdownRightFill18Icon marginX={5} display={["none", "block"]} />
       )}
 
-      <Flex
-        __css={style.stepButton}
-        alignItems="center"
-        as="button"
-        type="button"
-        disabled={variant === "disabled" || variant === "active"}
+      <Button
+        size={"xs"}
+        variant={
+          state === "active"
+            ? "primary"
+            : state === "completed"
+            ? "additional"
+            : "ghost"
+        }
+        {...adjustedProps}
         onClick={() => onClick(stepNumber)}
       >
-        <Box __css={style.stepNumber}>{stepNumber}</Box>
-        <Box __css={style.stepTitle}>{children}</Box>
-      </Flex>
+        {children}
+      </Button>
     </Box>
   );
 };
 
-const getVariant = (stepNumber: number, activeStep: number) => {
+const getButtonStylesForState = (
+  state: "completed" | "active" | "disabled",
+): Record<string, any> => {
+  switch (state) {
+    case "active":
+      return {
+        _hover: {},
+        boxShadow: "none",
+        _focus: {},
+        _active: {},
+        cursor: "auto",
+      };
+    case "completed":
+      return {
+        boxShadow: "none",
+      };
+    case "disabled":
+      return {
+        _disabled: {},
+        _hover: {},
+        _focus: {},
+        _active: {},
+        color: "dimGrey",
+        cursor: "auto",
+      };
+    default:
+      return {};
+  }
+};
+
+const getState = (stepNumber: number, activeStep: number) => {
   if (stepNumber < activeStep) {
     return "completed";
   }