@vygruppen/spor-react 10.4.0 → 10.5.0

package/dist/index.d.mts

@@ -296,7 +296,7 @@ declare const ExpandableItem: ({ children, title, headingLevel, leftIcon, ...res
 
 type BaseAlertProps = BoxProps & {
     /** The color scheme and icon of the alert */
-    variant: "info" | "success" | "warning" | "alt-transport" | "error";
+    variant: "info" | "success" | "warning" | "alt-transport" | "error" | "service";
     /** The body content of the alert */
     children: React.ReactNode;
     /** The title of the alert */
@@ -371,6 +371,38 @@ type StaticAlertProps = BaseAlertProps;
  */
 declare const StaticAlert: ({ children, title, ...props }: StaticAlertProps) => React.JSX.Element;
 
+type ServiceAlertProps = BaseAlertProps & {
+    /** The title string  */
+    title: string;
+    /** The number of notifications when there is a list of multiple alerts */
+    notification: number;
+    /** The maximum width to display the service message
+     *
+     * Defaults to container.md */
+    contentWidth: string;
+    /** Callback for when the expandable panel is opened or closed */
+    onToggle?: (isOpen: boolean) => void;
+    /** Whether or not the default state of the alert is open */
+    defaultOpen?: boolean;
+    /**
+     * The HTML element used for the `title` prop.
+     *
+     * Defaults to h3 */
+    headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6";
+};
+/**
+ * A service alert component.
+ *
+ * A regular alert with an expandable body, used to show service messages. The expandable body can be used to provide more information about the alert(s).
+ *
+ * ```tsx
+ * <ServiceAlert title="Error with Vipps" notification={1} contentWidth="container.md">
+ *   <Text>Some customers are experiencing issues logging in with Vipps. Vipps is working to resolve the issue. Try logging in with email instead.</Text>
+ * </ServiceAlert>
+ * ```
+ */
+declare const ServiceAlert: ({ variant, children, title, notification, contentWidth, headingLevel, defaultOpen, onToggle, ...boxProps }: ServiceAlertProps) => React.JSX.Element;
+
 type BreadcrumbProps = Omit<BreadcrumbProps$1, "variant"> & {
     variant?: "base" | "ghost";
 };
@@ -2493,10 +2525,16 @@ declare const theme: {
                         backgroundColor: string;
                     };
                 };
+                service: {
+                    container: {
+                        backgroundColor: string;
+                        color: string;
+                    };
+                };
             } | undefined;
             defaultProps?: {
                 size?: string | number | undefined;
-                variant?: "error" | "info" | "success" | "warning" | "alt-transport" | undefined;
+                variant?: "error" | "info" | "success" | "warning" | "alt-transport" | "service" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("container" | "icon" | "closeButton")[];
@@ -2573,14 +2611,80 @@ declare const theme: {
                         };
                     };
                 };
+                service: {
+                    container: {
+                        _hover: {
+                            outlineColor: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
             } | undefined;
             defaultProps?: {
                 size?: string | number | undefined;
-                variant?: "error" | "info" | "success" | "warning" | "alt-transport" | undefined;
+                variant?: "error" | "info" | "success" | "warning" | "alt-transport" | "service" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: "container"[];
         };
+        AlertService: {
+            baseStyle?: {
+                container: {
+                    paddingX: number;
+                    paddingY: number;
+                    fontSize: string;
+                    transitionProperty: string;
+                    transitionDuration: string;
+                    borderTopRadius: string;
+                    borderBottomRadius: string;
+                    _hover: {
+                        outline: string;
+                        outlineColor: string;
+                    };
+                    _active: {
+                        backgroundColor: string;
+                        outlineColor: string;
+                    };
+                };
+                box: {
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
+                    borderBottomRadius: string;
+                    borderTopRadius: string;
+                };
+                notificationText: {
+                    color: string;
+                    fontWeight: string;
+                    fontSize: string;
+                    pr: string;
+                };
+                serviceMessageContent: {
+                    paddingX: string;
+                    paddingTop: string;
+                    paddingBottom: string;
+                    color: string;
+                };
+            } | undefined;
+            sizes?: {
+                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
+                    keys: ("container" | "box" | "serviceMessageContent" | "notificationText")[];
+                }>;
+            } | undefined;
+            variants?: {
+                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
+                    keys: ("container" | "box" | "serviceMessageContent" | "notificationText")[];
+                }>;
+            } | undefined;
+            defaultProps?: {
+                size?: string | number | undefined;
+                variant?: string | number | undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+            parts: ("container" | "box" | "serviceMessageContent" | "notificationText")[];
+        };
         Badge: {
             baseStyle?: (({ colorScheme }: _chakra_ui_styled_system.StyleFunctionProps) => {
                 backgroundColor: string;
@@ -4289,8 +4393,7 @@ declare const theme: {
                     right: string;
                     transform: string;
                     zIndex: string;
-                    stroke: string;
-                    color: "brightRed" | "golden" | "ocean";
+                    color: "brightRed" | "ocean";
                 };
             }) | undefined;
             sizes?: {
@@ -7191,8 +7294,7 @@ declare const theme: {
                     right: string;
                     transform: string;
                     zIndex: string;
-                    stroke: string;
-                    color: "brightRed" | "golden" | "ocean";
+                    color: "brightRed" | "ocean";
                 };
             }) | undefined;
             sizes?: {
@@ -9267,4 +9369,4 @@ declare const Text: _chakra_ui_system_dist_system_types.ComponentWithAs<"p", Tex
  **/
 declare function slugify(text: string | string[], maxLength?: number): string;
 
-export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, CardSelect, CargonetLogo, CargonetLogoProps, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerBodyProps, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, StaticCardProps, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Tooltip, TooltipProps, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoPride, VyLogoPrideProps, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, useToast, useTranslation };
+export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, CardSelect, CargonetLogo, CargonetLogoProps, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerBodyProps, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, ServiceAlert, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, StaticCardProps, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Tooltip, TooltipProps, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoPride, VyLogoPrideProps, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, useToast, useTranslation };

package/dist/index.d.ts

@@ -296,7 +296,7 @@ declare const ExpandableItem: ({ children, title, headingLevel, leftIcon, ...res
 
 type BaseAlertProps = BoxProps & {
     /** The color scheme and icon of the alert */
-    variant: "info" | "success" | "warning" | "alt-transport" | "error";
+    variant: "info" | "success" | "warning" | "alt-transport" | "error" | "service";
     /** The body content of the alert */
     children: React.ReactNode;
     /** The title of the alert */
@@ -371,6 +371,38 @@ type StaticAlertProps = BaseAlertProps;
  */
 declare const StaticAlert: ({ children, title, ...props }: StaticAlertProps) => React.JSX.Element;
 
+type ServiceAlertProps = BaseAlertProps & {
+    /** The title string  */
+    title: string;
+    /** The number of notifications when there is a list of multiple alerts */
+    notification: number;
+    /** The maximum width to display the service message
+     *
+     * Defaults to container.md */
+    contentWidth: string;
+    /** Callback for when the expandable panel is opened or closed */
+    onToggle?: (isOpen: boolean) => void;
+    /** Whether or not the default state of the alert is open */
+    defaultOpen?: boolean;
+    /**
+     * The HTML element used for the `title` prop.
+     *
+     * Defaults to h3 */
+    headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6";
+};
+/**
+ * A service alert component.
+ *
+ * A regular alert with an expandable body, used to show service messages. The expandable body can be used to provide more information about the alert(s).
+ *
+ * ```tsx
+ * <ServiceAlert title="Error with Vipps" notification={1} contentWidth="container.md">
+ *   <Text>Some customers are experiencing issues logging in with Vipps. Vipps is working to resolve the issue. Try logging in with email instead.</Text>
+ * </ServiceAlert>
+ * ```
+ */
+declare const ServiceAlert: ({ variant, children, title, notification, contentWidth, headingLevel, defaultOpen, onToggle, ...boxProps }: ServiceAlertProps) => React.JSX.Element;
+
 type BreadcrumbProps = Omit<BreadcrumbProps$1, "variant"> & {
     variant?: "base" | "ghost";
 };
@@ -2493,10 +2525,16 @@ declare const theme: {
                         backgroundColor: string;
                     };
                 };
+                service: {
+                    container: {
+                        backgroundColor: string;
+                        color: string;
+                    };
+                };
             } | undefined;
             defaultProps?: {
                 size?: string | number | undefined;
-                variant?: "error" | "info" | "success" | "warning" | "alt-transport" | undefined;
+                variant?: "error" | "info" | "success" | "warning" | "alt-transport" | "service" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("container" | "icon" | "closeButton")[];
@@ -2573,14 +2611,80 @@ declare const theme: {
                         };
                     };
                 };
+                service: {
+                    container: {
+                        _hover: {
+                            outlineColor: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
             } | undefined;
             defaultProps?: {
                 size?: string | number | undefined;
-                variant?: "error" | "info" | "success" | "warning" | "alt-transport" | undefined;
+                variant?: "error" | "info" | "success" | "warning" | "alt-transport" | "service" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: "container"[];
         };
+        AlertService: {
+            baseStyle?: {
+                container: {
+                    paddingX: number;
+                    paddingY: number;
+                    fontSize: string;
+                    transitionProperty: string;
+                    transitionDuration: string;
+                    borderTopRadius: string;
+                    borderBottomRadius: string;
+                    _hover: {
+                        outline: string;
+                        outlineColor: string;
+                    };
+                    _active: {
+                        backgroundColor: string;
+                        outlineColor: string;
+                    };
+                };
+                box: {
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
+                    borderBottomRadius: string;
+                    borderTopRadius: string;
+                };
+                notificationText: {
+                    color: string;
+                    fontWeight: string;
+                    fontSize: string;
+                    pr: string;
+                };
+                serviceMessageContent: {
+                    paddingX: string;
+                    paddingTop: string;
+                    paddingBottom: string;
+                    color: string;
+                };
+            } | undefined;
+            sizes?: {
+                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
+                    keys: ("container" | "box" | "serviceMessageContent" | "notificationText")[];
+                }>;
+            } | undefined;
+            variants?: {
+                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
+                    keys: ("container" | "box" | "serviceMessageContent" | "notificationText")[];
+                }>;
+            } | undefined;
+            defaultProps?: {
+                size?: string | number | undefined;
+                variant?: string | number | undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+            parts: ("container" | "box" | "serviceMessageContent" | "notificationText")[];
+        };
         Badge: {
             baseStyle?: (({ colorScheme }: _chakra_ui_styled_system.StyleFunctionProps) => {
                 backgroundColor: string;
@@ -4289,8 +4393,7 @@ declare const theme: {
                     right: string;
                     transform: string;
                     zIndex: string;
-                    stroke: string;
-                    color: "brightRed" | "golden" | "ocean";
+                    color: "brightRed" | "ocean";
                 };
             }) | undefined;
             sizes?: {
@@ -7191,8 +7294,7 @@ declare const theme: {
                     right: string;
                     transform: string;
                     zIndex: string;
-                    stroke: string;
-                    color: "brightRed" | "golden" | "ocean";
+                    color: "brightRed" | "ocean";
                 };
             }) | undefined;
             sizes?: {
@@ -9267,4 +9369,4 @@ declare const Text: _chakra_ui_system_dist_system_types.ComponentWithAs<"p", Tex
  **/
 declare function slugify(text: string | string[], maxLength?: number): string;
 
-export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, CardSelect, CargonetLogo, CargonetLogoProps, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerBodyProps, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, StaticCardProps, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Tooltip, TooltipProps, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoPride, VyLogoPrideProps, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, useToast, useTranslation };
+export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, CardSelect, CargonetLogo, CargonetLogoProps, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerBodyProps, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, ServiceAlert, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, StaticCardProps, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Tooltip, TooltipProps, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoPride, VyLogoPrideProps, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, useToast, useTranslation };