@vygruppen/spor-react 4.0.3 → 4.1.1

package/src/datepicker/TimePicker.test.tsx

@@ -12,7 +12,7 @@ describe("<TimePicker />", () => {
 
   it("jumps backwards as expected", async () => {
     const { getByLabelText, getByRole } = render(
-      <TimePicker defaultValue={new Time(13, 3)} />
+      <TimePicker defaultValue={new Time(13, 3)} />,
     );
     const backwardsButton = getByLabelText("Bakover 30 minutter");
     expect(getByRole("group")).toHaveTextContent("13:03");
@@ -27,7 +27,7 @@ describe("<TimePicker />", () => {
   });
   it("jumps forwards as expected", async () => {
     const { getByLabelText, getByRole } = render(
-      <TimePicker defaultValue={new Time(13, 53)} />
+      <TimePicker defaultValue={new Time(13, 53)} />,
     );
     const forwardsButton = getByLabelText("Fremover 30 minutter");
     expect(getByRole("group")).toHaveTextContent("13:53");
@@ -42,7 +42,7 @@ describe("<TimePicker />", () => {
   });
   it("jumps backwards as expected when minuteInterval is set", async () => {
     const { getByLabelText, getByRole } = render(
-      <TimePicker defaultValue={new Time(13, 3)} minuteInterval={15} />
+      <TimePicker defaultValue={new Time(13, 3)} minuteInterval={15} />,
     );
     const backwardsButton = getByLabelText("Bakover 15 minutter");
     expect(getByRole("group")).toHaveTextContent("13:03");
@@ -57,7 +57,7 @@ describe("<TimePicker />", () => {
   });
   it("jumps forwards as expected when minuteInterval is set", async () => {
     const { getByLabelText, getByRole } = render(
-      <TimePicker defaultValue={new Time(13, 49)} minuteInterval={15} />
+      <TimePicker defaultValue={new Time(13, 49)} minuteInterval={15} />,
     );
 
     const forwardsButton = getByLabelText("Fremover 15 minutter");

package/src/datepicker/TimePicker.tsx

@@ -96,7 +96,7 @@ export const TimePicker = ({
     state.setValue(
       state.value.subtract({
         minutes: minutesToSubtract,
-      })
+      }),
     );
   };
   const handleForwardClick = () => {
@@ -108,18 +108,18 @@ export const TimePicker = ({
     state.setValue(
       state.value.add({
         minutes: minutesToAdd,
-      })
+      }),
     );
   };
   const backwardsLabel = `${t(texts.backwards)} ${minuteInterval} ${t(
-    texts.minutes
+    texts.minutes,
   )}`;
   const forwardsLabel = `${t(texts.forwards)} ${minuteInterval} ${t(
-    texts.minutes
+    texts.minutes,
   )}`;
   const inputLabel = label ?? t(texts.time);
   const ariaLabel = `${inputLabel} – ${t(
-    texts.selectedTimeIs(`${dateTime?.hour ?? 0} ${dateTime?.minute ?? 0}`)
+    texts.selectedTimeIs(`${dateTime?.hour ?? 0} ${dateTime?.minute ?? 0}`),
   )}`;
   return (
     <StyledField

package/src/index.tsx

@@ -27,4 +27,3 @@ export * from "./toast";
 export * from "./transition";
 export * from "./typography";
 export * from "./util";
-

package/src/input/CardSelect.tsx

@@ -77,7 +77,7 @@ export const CardSelect = forwardRef<CardSelectProps, "button">(
       withChevron = true,
       ...props
     },
-    externalRef
+    externalRef,
   ) => {
     const internalRef = useRef<HTMLButtonElement>(null);
     const triggerRef = (externalRef ??
@@ -91,7 +91,7 @@ export const CardSelect = forwardRef<CardSelectProps, "button">(
     const { triggerProps, overlayProps } = useOverlayTrigger(
       { type: "dialog" },
       state,
-      triggerRef
+      triggerRef,
     );
 
     const { buttonProps } = useButton(triggerProps, triggerRef);
@@ -142,7 +142,7 @@ export const CardSelect = forwardRef<CardSelectProps, "button">(
         )}
       </Box>
     );
-  }
+  },
 );
 
 /**

package/src/input/Combobox.tsx

@@ -106,7 +106,7 @@ export function Combobox<T extends object>({
       listBoxRef,
       popoverRef,
     },
-    state
+    state,
   );
 
   return (

package/src/input/CountryCodeSelect.tsx

@@ -16,7 +16,7 @@ const sortedCallingCodes = getSupportedCallingCodes()
     value: `+${code}`,
   }))
   .filter(
-    (code) => !prioritizedCountryCodes.some((pCode) => pCode.key === code.key)
+    (code) => !prioritizedCountryCodes.some((pCode) => pCode.key === code.key),
   );
 const callingCodes = [...prioritizedCountryCodes, ...sortedCallingCodes];
 

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

@@ -27,13 +27,11 @@ export const DarkSpinner = ({
   ...props
 }: DarkSpinnerProps) => {
   const { colorMode } = useColorMode();
-  const spinnerData = colorMode === "dark" ? spinnerLightData : spinnerDarkData
+  const spinnerData = colorMode === "dark" ? spinnerLightData : spinnerDarkData;
   return (
     <Center flexDirection="column" {...props}>
       <Box width={width} maxWidth={maxWidth}>
-        <ClientOnly>
-          {() => <Lottie animationData={spinnerData} />}
-        </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;