@vygruppen/spor-react 4.0.3 → 4.1.0

package/src/accordion/Expandable.tsx

@@ -131,8 +131,8 @@ const warnAboutMismatchingIcon = ({ icon, size }: WarnAboutMismatchingIcon) => {
       console.warn(
         `You passed a filled icon. This component requires outlined icons. You passed ${displayName}, replace it with ${displayName.replace(
           "Fill",
-          "Outline"
-        )}.`
+          "Outline",
+        )}.`,
       );
       return;
     }
@@ -140,8 +140,8 @@ const warnAboutMismatchingIcon = ({ icon, size }: WarnAboutMismatchingIcon) => {
       console.warn(
         `The icon you passed was of the wrong size for the lg size. You passed ${displayName}, replace it with ${displayName.replace(
           /(\d{2})Icon/,
-          "30Icon"
-        )}.`
+          "30Icon",
+        )}.`,
       );
       return;
     }
@@ -149,8 +149,8 @@ const warnAboutMismatchingIcon = ({ icon, size }: WarnAboutMismatchingIcon) => {
       console.warn(
         `The icon you passed was of the wrong size for the ${size} size. You passed ${displayName}, replace it with ${displayName.replace(
           /(\d{2})Icon/,
-          "24Icon"
-        )}.`
+          "24Icon",
+        )}.`,
       );
     }
   }

package/src/alert/BaseAlert.test.tsx

@@ -6,31 +6,31 @@ import { BaseAlert } from "./BaseAlert";
 describe("<BaseAlert />", () => {
   it("is accessible as variant='success'", async () => {
     const { container } = render(
-      <BaseAlert variant="success">Test text</BaseAlert>
+      <BaseAlert variant="success">Test text</BaseAlert>,
     );
     expect(await axe(container)).toHaveNoViolations();
   });
   it("is accessible as variant='info'", async () => {
     const { container } = render(
-      <BaseAlert variant="info">Test text</BaseAlert>
+      <BaseAlert variant="info">Test text</BaseAlert>,
     );
     expect(await axe(container)).toHaveNoViolations();
   });
   it("is accessible as variant='warning'", async () => {
     const { container } = render(
-      <BaseAlert variant="warning">Test text</BaseAlert>
+      <BaseAlert variant="warning">Test text</BaseAlert>,
     );
     expect(await axe(container)).toHaveNoViolations();
   });
   it("is accessible as variant='error'", async () => {
     const { container } = render(
-      <BaseAlert variant="error">Test text</BaseAlert>
+      <BaseAlert variant="error">Test text</BaseAlert>,
     );
     expect(await axe(container)).toHaveNoViolations();
   });
   it("is accessible as variant='alt-transport'", async () => {
     const { container } = render(
-      <BaseAlert variant="alt-transport">Test text</BaseAlert>
+      <BaseAlert variant="alt-transport">Test text</BaseAlert>,
     );
     expect(await axe(container)).toHaveNoViolations();
   });

package/src/alert/BaseAlert.tsx

@@ -11,7 +11,11 @@ export type BaseAlertProps = BoxProps & {
 /**
  * A base alert box component. Should only be composed by other alert components.
  */
-export const BaseAlert = ({ variant, children, ...boxProps }: BaseAlertProps) => {
+export const BaseAlert = ({
+  variant,
+  children,
+  ...boxProps
+}: BaseAlertProps) => {
   const styles = useMultiStyleConfig("Alert", { variant });
   return (
     <Box __css={styles.container} {...boxProps}>

package/src/alert/ClosableAlert.test.tsx

@@ -7,7 +7,7 @@ import { ClosableAlert } from ".";
 describe("<ClosableAlert />", () => {
   it("closes when you click the close button", async () => {
     const { getByRole, queryByRole } = render(
-      <ClosableAlert variant="info">Test text</ClosableAlert>
+      <ClosableAlert variant="info">Test text</ClosableAlert>,
     );
     act(() => {
       getByRole("button").click();
@@ -20,7 +20,7 @@ describe("<ClosableAlert />", () => {
     const { getByRole } = render(
       <ClosableAlert variant="info" onClose={handleClick}>
         Test text
-      </ClosableAlert>
+      </ClosableAlert>,
     );
     act(() => {
       getByRole("button").click();
@@ -30,7 +30,7 @@ describe("<ClosableAlert />", () => {
 
   it("is accessible", async () => {
     const { container } = render(
-      <ClosableAlert variant="info">Test text</ClosableAlert>
+      <ClosableAlert variant="info">Test text</ClosableAlert>,
     );
     expect(await axe(container)).toHaveNoViolations();
   });

package/src/alert/ExpandableAlert.test.tsx

@@ -9,7 +9,7 @@ describe("<ExpandableAlert />", () => {
     const { getByRole, getByText } = render(
       <ExpandableAlert variant="info" title="Title">
         Test text
-      </ExpandableAlert>
+      </ExpandableAlert>,
     );
     await waitFor(() => expect(getByText("Test text")).not.toBeVisible());
     act(() => {
@@ -27,7 +27,7 @@ describe("<ExpandableAlert />", () => {
     const { getByRole } = render(
       <ExpandableAlert variant="info" title="Title" onToggle={handleClick}>
         Test text
-      </ExpandableAlert>
+      </ExpandableAlert>,
     );
 
     act(() => {
@@ -47,13 +47,13 @@ describe("<ExpandableAlert />", () => {
     const { queryByRole, rerender } = render(
       <ExpandableAlert variant="info" title="Title" headingLevel="h2">
         Test text
-      </ExpandableAlert>
+      </ExpandableAlert>,
     );
     expect(queryByRole("heading", { level: 2 })).toBeInTheDocument();
     rerender(
       <ExpandableAlert variant="info" title="Title" headingLevel="h3">
         Test text
-      </ExpandableAlert>
+      </ExpandableAlert>,
     );
     expect(queryByRole("heading", { level: 2 })).not.toBeInTheDocument();
     expect(queryByRole("heading", { level: 3 })).toBeInTheDocument();
@@ -63,7 +63,7 @@ describe("<ExpandableAlert />", () => {
     const { container, getByRole } = render(
       <ExpandableAlert variant="info" title="Title">
         Test text
-      </ExpandableAlert>
+      </ExpandableAlert>,
     );
     await act(async () => {
       expect(await axe(container)).toHaveNoViolations();

package/src/button/Button.test.tsx

@@ -10,7 +10,7 @@ describe("<Button />", () => {
     const { getByRole } = render(
       <Button variant="primary" onClick={handleClick}>
         Click me
-      </Button>
+      </Button>,
     );
     getByRole("button").click();
     expect(handleClick).toHaveBeenCalled();

package/src/button/Button.tsx

@@ -46,7 +46,7 @@ export type ButtonProps = Exclude<
  *
  * ```tsx
  * <Button variant="primary" onClick={confirmOrder}>
- *   Buy trip
+ *  Buy trip
  * </Button>
  * ```
  *

package/src/button/CloseButton.tsx

@@ -38,7 +38,7 @@ export const CloseButton = forwardRef<CloseButtonProps, "button">(
         {...props}
       />
     );
-  }
+  },
 );
 
 const getIcon = (size: CloseButtonProps["size"]) => {

package/src/button/FloatingActionButton.tsx

@@ -44,10 +44,10 @@ export const FloatingActionButton = forwardRef<
       placement = "bottom right",
       ...props
     },
-    ref
+    ref,
   ) => {
     const [isTextVisible, setIsTextVisible] = React.useState(
-      externalIsTextVisible !== undefined ? externalIsTextVisible : false
+      externalIsTextVisible !== undefined ? externalIsTextVisible : false,
     );
     const scrollDirection = useScrollDirection();
     useEffect(() => {
@@ -56,7 +56,7 @@ export const FloatingActionButton = forwardRef<
       }
       const id = window.setTimeout(
         () => setIsTextVisible(scrollDirection !== "down"),
-        1000
+        1000,
       );
       return () => window.clearTimeout(id);
     }, [scrollDirection, externalIsTextVisible]);
@@ -99,7 +99,7 @@ export const FloatingActionButton = forwardRef<
         </MotionBox>
       </MotionBox>
     );
-  }
+  },
 );
 
 type ScrollDirection = "up" | "down" | null;
@@ -107,7 +107,7 @@ const useScrollDirection = () => {
   const [scrollDirection, setScrollDirection] =
     React.useState<ScrollDirection>(null);
   const lastScrollPosition = React.useRef(
-    typeof window !== "undefined" ? window.scrollY : 0
+    typeof window !== "undefined" ? window.scrollY : 0,
   );
   React.useEffect(() => {
     const onScroll = () => {

package/src/button/IconButton.tsx

@@ -59,5 +59,5 @@ export const IconButton = forwardRef<IconButtonProps, As>(
       spinner={<ColorSpinner margin={1} />}
       ref={ref}
     />
-  )
+  ),
 );

package/src/card/Card.tsx

@@ -12,7 +12,8 @@ export type CardProps = Exclude<BoxProps, "size"> & {
     | "green"
     | "teal"
     | "yellow"
-    | "orange";
+    | "orange"
+    | "red";
 };
 /**
  * Renders a card.
@@ -55,5 +56,5 @@ export const Card = forwardRef<CardProps, As>(
         {children}
       </Box>
     );
-  }
+  },
 );

package/src/card/index.tsx

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

package/src/datepicker/Calendar.tsx

@@ -13,13 +13,13 @@ import { createTexts, useTranslation } from "../i18n";
 
 type CalendarProps = ReactAriaCalendarProps<DateValue> & {
   showYearNavigation?: boolean;
-  variant: ResponsiveValue<
-   "base"
-  | "floating"
-  | "ghost"
-  >;
+  variant: ResponsiveValue<"base" | "floating" | "ghost">;
 };
-export function Calendar({ showYearNavigation, variant, ...props }: CalendarProps) {
+export function Calendar({
+  showYearNavigation,
+  variant,
+  ...props
+}: CalendarProps) {
   const { t } = useTranslation();
   const locale = useCurrentLocale();
   const state = useCalendarState({

package/src/datepicker/CalendarCell.tsx

@@ -10,16 +10,17 @@ import { useCalendarCell } from "react-aria";
 import { CalendarState, RangeCalendarState } from "react-stately";
 
 type CalendarCellProps = {
-  variant: ResponsiveValue<
-    "base" 
-  | "floating"
-  | "ghost"
-  >;
+  variant: ResponsiveValue<"base" | "floating" | "ghost">;
   state: CalendarState | RangeCalendarState;
   date: CalendarDate;
   currentMonth: DateValue;
 };
-export function CalendarCell({ state, date, currentMonth, variant }: CalendarCellProps) {
+export function CalendarCell({
+  state,
+  date,
+  currentMonth,
+  variant,
+}: CalendarCellProps) {
   const ref = useRef(null);
   const {
     cellProps,
@@ -31,7 +32,7 @@ export function CalendarCell({ state, date, currentMonth, variant }: CalendarCel
   } = useCalendarCell({ date }, state, ref);
 
   const isOutsideMonth = !isSameMonth(currentMonth, date);
-  const styles = useMultiStyleConfig("Datepicker", {variant});
+  const styles = useMultiStyleConfig("Datepicker", { variant });
 
   const stateProps: Record<string, any> = {};
   if (isSelected) {
@@ -58,7 +59,7 @@ export function CalendarCell({ state, date, currentMonth, variant }: CalendarCel
       (event: TouchEvent) => {
         event.preventDefault();
       },
-      { passive: false, once: true }
+      { passive: false, once: true },
     );
   }, []);
 

package/src/datepicker/CalendarGrid.tsx

@@ -16,15 +16,15 @@ const weekDays: Record<Language, string[]> = {
 };
 
 type CalendarGridProps = AriaCalendarGridProps & {
-  variant: ResponsiveValue<
-   "base" 
-  | "floating"
-  | "ghost"
-  >;
+  variant: ResponsiveValue<"base" | "floating" | "ghost">;
   state: CalendarState | RangeCalendarState;
   offset?: { months?: number };
 };
-export function CalendarGrid({ state, variant ,offset = {} }: CalendarGridProps) {
+export function CalendarGrid({
+  state,
+  variant,
+  offset = {},
+}: CalendarGridProps) {
   const { language } = useTranslation();
   const locale = useCurrentLocale();
   const startDate = state.visibleRange.start.add(offset);
@@ -34,13 +34,13 @@ export function CalendarGrid({ state, variant ,offset = {} }: CalendarGridProps)
       startDate,
       endDate,
     },
-    state
+    state,
   );
 
   // Get the number of weeks in the month so we can render the proper number of rows.
   const weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
   const weeksInMonthRange = new Array(weeksInMonth).fill(0).map((_, i) => i);
-  const styles = useMultiStyleConfig("Datepicker", {variant});
+  const styles = useMultiStyleConfig("Datepicker", { variant });
 
   return (
     <table {...gridProps}>
@@ -76,7 +76,7 @@ export function CalendarGrid({ state, variant ,offset = {} }: CalendarGridProps)
                   />
                 ) : (
                   <td key={dayIndex} />
-                )
+                ),
               )}
           </tr>
         ))}

package/src/datepicker/CalendarHeader.tsx

@@ -31,10 +31,10 @@ export function CalendarHeader({
   const monthAndYearTitle = `${monthTitle} ${state.focusedDate.year}`;
 
   const isPreviousYearDisabled = state.isInvalid(
-    state.visibleRange.start.subtract({ years: 1 })
+    state.visibleRange.start.subtract({ years: 1 }),
   );
   const isNextYearDisabled = state.isInvalid(
-    state.visibleRange.start.add({ years: 1 })
+    state.visibleRange.start.add({ years: 1 }),
   );
   const areAllOtherYearsDisabled = isPreviousYearDisabled && isNextYearDisabled;
   const isYearPickerVisible = showYearNavigation && !areAllOtherYearsDisabled;

package/src/datepicker/CalendarTriggerButton.tsx

@@ -12,25 +12,20 @@ import { AriaButtonProps } from "react-aria";
 import { createTexts, useTranslation } from "..";
 
 type CalendarTriggerButtonProps = AriaButtonProps<"button"> & {
-  variant: ResponsiveValue<
-     "base" 
-    | "floating" 
-    | "ghost"
-  >;
+  variant: ResponsiveValue<"base" | "floating" | "ghost">;
 };
 export const CalendarTriggerButton = forwardRef<CalendarTriggerButtonProps, As>(
   ({ variant, ...buttonProps }, ref) => {
     const { t } = useTranslation();
-    const styles = useMultiStyleConfig("Datepicker", {variant});
+    const styles = useMultiStyleConfig("Datepicker", { variant });
 
     const { onPress, ...filteredButtonProps } = buttonProps;
 
     const handleOnPress = (event: KeyboardEvent) => {
       if (onPress) {
-        if (event.key == "Enter" || event.key == " ")
-        onPress(event as any)
+        if (event.key == "Enter" || event.key == " ") onPress(event as any);
       }
-    }
+    };
 
     return (
       <PopoverAnchor>
@@ -47,7 +42,7 @@ export const CalendarTriggerButton = forwardRef<CalendarTriggerButtonProps, As>(
         </Box>
       </PopoverAnchor>
     );
-  }
+  },
 );
 
 const texts = createTexts({

package/src/datepicker/DateField.tsx

@@ -36,7 +36,7 @@ export const DateField = forwardRef<HTMLDivElement, DateFieldProps>(
     const { fieldProps, labelProps } = useDateField(
       props,
       state,
-      ref as RefObject<HTMLDivElement>
+      ref as RefObject<HTMLDivElement>,
     );
 
     return (
@@ -69,5 +69,5 @@ export const DateField = forwardRef<HTMLDivElement, DateFieldProps>(
         />
       </Box>
     );
-  }
+  },
 );

package/src/datepicker/DatePicker.tsx

@@ -54,7 +54,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       width = "auto",
       ...props
     },
-    externalRef
+    externalRef,
   ) => {
     const formControlProps = useFormControlContext();
     const state = useDatePickerState({
@@ -77,7 +77,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     } = useDatePicker(
       props,
       state,
-      ref as React.MutableRefObject<HTMLDivElement>
+      ref as React.MutableRefObject<HTMLDivElement>,
     );
 
     const styles = useMultiStyleConfig("Datepicker", { variant });
@@ -151,5 +151,5 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
         </Box>
       </I18nProvider>
     );
-  }
+  },
 );

package/src/datepicker/DateTimeSegment.tsx

@@ -22,7 +22,7 @@ export const DateTimeSegment = forwardRef<HTMLDivElement, DateTimeSegmentProps>(
     const { segmentProps } = useDateSegment(
       segment,
       state,
-      ref as RefObject<HTMLDivElement>
+      ref as RefObject<HTMLDivElement>,
     );
 
     const styles = useMultiStyleConfig("Datepicker", {
@@ -52,7 +52,7 @@ export const DateTimeSegment = forwardRef<HTMLDivElement, DateTimeSegmentProps>(
           : segment.text}
       </Box>
     );
-  }
+  },
 );
 
 const isPaddable = (segmentType: DateSegment["type"]) =>

package/src/datepicker/RangeCalendar.tsx

@@ -26,13 +26,16 @@ export function RangeCalendar(props: RangeCalendarProps) {
   const ref = useRef(null);
   const { calendarProps, title } = useRangeCalendar(props, state, ref);
 
-
   return (
     <Box {...calendarProps} ref={ref}>
       <CalendarHeader state={state} title={title} />
       <Box display="flex" gap="8">
         <CalendarGrid variant={props.variant} state={state} />
-        <CalendarGrid variant={props.variant} state={state} offset={{ months: 1 }} />
+        <CalendarGrid
+          variant={props.variant}
+          state={state}
+          offset={{ months: 1 }}
+        />
       </Box>
     </Box>
   );

package/src/datepicker/StyledField.tsx

@@ -10,11 +10,7 @@ import {
 import React from "react";
 
 type StyledFieldProps = BoxProps & {
-  variant: ResponsiveValue< 
-  "base" 
-  | "floating" 
-  | "ghost" 
->;
+  variant: ResponsiveValue<"base" | "floating" | "ghost">;
 };
 export const StyledField = forwardRef<StyledFieldProps, As>(
   ({ children, variant, ...otherProps }, ref) => {
@@ -32,5 +28,5 @@ export const StyledField = forwardRef<StyledFieldProps, As>(
         {children}
       </Box>
     );
-  }
+  },
 );

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", {