@vygruppen/spor-react 10.4.1 → 10.6.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";
 };
@@ -1324,6 +1356,7 @@ type PhoneNumberInputProps = Omit<BoxProps, "onChange"> & {
     /** The optional value of the country code and phone number */
     value?: CountryCodeAndPhoneNumber;
     variant?: "base" | "floating";
+    isOptional?: boolean;
 };
 /**
  * A component for entering phone numbers.
@@ -2493,10 +2526,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 +2612,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;
@@ -9265,4 +9370,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";
 };
@@ -1324,6 +1356,7 @@ type PhoneNumberInputProps = Omit<BoxProps, "onChange"> & {
     /** The optional value of the country code and phone number */
     value?: CountryCodeAndPhoneNumber;
     variant?: "base" | "floating";
+    isOptional?: boolean;
 };
 /**
  * A component for entering phone numbers.
@@ -2493,10 +2526,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 +2612,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;
@@ -9265,4 +9370,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 };