@vygruppen/spor-react 10.4.1 → 10.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +10 -10
- package/CHANGELOG.md +9 -0
- package/dist/{CountryCodeSelect-QNKQE3C6.mjs → CountryCodeSelect-QMX6VHNM.mjs} +1 -1
- package/dist/{chunk-PH4RK5L3.mjs → chunk-CHJ6LT66.mjs} +715 -534
- package/dist/index.d.mts +108 -4
- package/dist/index.d.ts +108 -4
- package/dist/index.js +851 -653
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
- package/src/alert/AlertIcon.tsx +9 -0
- package/src/alert/BaseAlert.tsx +7 -1
- package/src/alert/ExpandableAlert.tsx +7 -3
- package/src/alert/ServiceAlert.tsx +162 -0
- package/src/alert/index.tsx +1 -0
- package/src/input/Input.tsx +1 -0
- package/src/theme/components/alert-expandable.ts +10 -0
- package/src/theme/components/alert-service.ts +53 -0
- package/src/theme/components/alert.ts +6 -0
- package/src/theme/components/index.ts +1 -0
package/dist/index.mjs
CHANGED
@@ -1 +1 @@
|
|
1
|
-
export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, CardSelect, CargonetLogo, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, FullScreenDrawer, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-
|
1
|
+
export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, CardSelect, CargonetLogo, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, FullScreenDrawer, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, ServiceAlert, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-CHJ6LT66.mjs';
|
package/package.json
CHANGED
package/src/alert/AlertIcon.tsx
CHANGED
@@ -4,6 +4,7 @@ import {
|
|
4
4
|
InformationOutline24Icon,
|
5
5
|
SuccessOutline24Icon,
|
6
6
|
WarningOutline24Icon,
|
7
|
+
WarningFill24Icon,
|
7
8
|
} from "@vygruppen/spor-icon-react";
|
8
9
|
import React from "react";
|
9
10
|
import { createTexts, useTranslation } from "../i18n";
|
@@ -38,6 +39,8 @@ const getIcon = (variant: BaseAlertProps["variant"]) => {
|
|
38
39
|
return AltTransportOutline24Icon;
|
39
40
|
case "error":
|
40
41
|
return ErrorOutline24Icon;
|
42
|
+
case "service":
|
43
|
+
return WarningFill24Icon;
|
41
44
|
}
|
42
45
|
};
|
43
46
|
|
@@ -72,4 +75,10 @@ const texts = createTexts({
|
|
72
75
|
sv: "Alternativ transport",
|
73
76
|
en: "Alternative transport",
|
74
77
|
},
|
78
|
+
service: {
|
79
|
+
nb: "Driftsmelding",
|
80
|
+
nn: "Driftsmelding",
|
81
|
+
sv: "Servicemeddelande",
|
82
|
+
en: "Service message",
|
83
|
+
},
|
75
84
|
});
|
package/src/alert/BaseAlert.tsx
CHANGED
@@ -3,7 +3,13 @@ import React from "react";
|
|
3
3
|
|
4
4
|
export type BaseAlertProps = BoxProps & {
|
5
5
|
/** The color scheme and icon of the alert */
|
6
|
-
variant:
|
6
|
+
variant:
|
7
|
+
| "info"
|
8
|
+
| "success"
|
9
|
+
| "warning"
|
10
|
+
| "alt-transport"
|
11
|
+
| "error"
|
12
|
+
| "service";
|
7
13
|
/** The body content of the alert */
|
8
14
|
children: React.ReactNode;
|
9
15
|
/** The title of the alert */
|
@@ -73,15 +73,19 @@ export const ExpandableAlert = ({
|
|
73
73
|
WebkitLineClamp: "1",
|
74
74
|
WebkitBoxOrient: "vertical",
|
75
75
|
}}
|
76
|
-
color="darkGrey"
|
76
|
+
color={variant === "service" ? "white" : "darkGrey"}
|
77
77
|
>
|
78
78
|
{title}
|
79
79
|
</Box>
|
80
80
|
</Flex>
|
81
|
-
<AccordionIcon
|
81
|
+
<AccordionIcon
|
82
|
+
color={variant === "service" ? "white" : "darkGrey"}
|
83
|
+
/>
|
82
84
|
</Flex>
|
83
85
|
</AccordionButton>
|
84
|
-
<AccordionPanel
|
86
|
+
<AccordionPanel color={variant === "service" ? "white" : "darkGrey"}>
|
87
|
+
{children}
|
88
|
+
</AccordionPanel>
|
85
89
|
</AccordionItem>
|
86
90
|
</Accordion>
|
87
91
|
</BaseAlert>
|
@@ -0,0 +1,162 @@
|
|
1
|
+
import {
|
2
|
+
Accordion,
|
3
|
+
AccordionButton,
|
4
|
+
AccordionIcon,
|
5
|
+
AccordionItem,
|
6
|
+
AccordionPanel,
|
7
|
+
Box,
|
8
|
+
Flex,
|
9
|
+
Stack,
|
10
|
+
Text,
|
11
|
+
useMultiStyleConfig,
|
12
|
+
} from "@chakra-ui/react";
|
13
|
+
import React from "react";
|
14
|
+
import { AlertIcon } from "./AlertIcon";
|
15
|
+
import { BaseAlert, BaseAlertProps } from "./BaseAlert";
|
16
|
+
import { createTexts, useTranslation } from "../i18n";
|
17
|
+
|
18
|
+
type ServiceAlertProps = BaseAlertProps & {
|
19
|
+
/** The title string */
|
20
|
+
title: string;
|
21
|
+
/** The number of notifications when there is a list of multiple alerts */
|
22
|
+
notification: number;
|
23
|
+
/** The maximum width to display the service message
|
24
|
+
*
|
25
|
+
* Defaults to container.md */
|
26
|
+
contentWidth: string;
|
27
|
+
/** Callback for when the expandable panel is opened or closed */
|
28
|
+
onToggle?: (isOpen: boolean) => void;
|
29
|
+
/** Whether or not the default state of the alert is open */
|
30
|
+
defaultOpen?: boolean;
|
31
|
+
/**
|
32
|
+
* The HTML element used for the `title` prop.
|
33
|
+
*
|
34
|
+
* Defaults to h3 */
|
35
|
+
headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6";
|
36
|
+
};
|
37
|
+
/**
|
38
|
+
* A service alert component.
|
39
|
+
*
|
40
|
+
* 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).
|
41
|
+
*
|
42
|
+
* ```tsx
|
43
|
+
* <ServiceAlert title="Error with Vipps" notification={1} contentWidth="container.md">
|
44
|
+
* <Text>Some customers are experiencing issues logging in with Vipps. Vipps is working to resolve the issue. Try logging in with email instead.</Text>
|
45
|
+
* </ServiceAlert>
|
46
|
+
* ```
|
47
|
+
*/
|
48
|
+
export const ServiceAlert = ({
|
49
|
+
variant,
|
50
|
+
children,
|
51
|
+
title,
|
52
|
+
notification,
|
53
|
+
contentWidth = "container.md",
|
54
|
+
headingLevel = "h3",
|
55
|
+
defaultOpen = false,
|
56
|
+
onToggle = () => {},
|
57
|
+
...boxProps
|
58
|
+
}: ServiceAlertProps) => {
|
59
|
+
variant = "service";
|
60
|
+
const { t } = useTranslation();
|
61
|
+
const styles = useMultiStyleConfig("AlertService");
|
62
|
+
return (
|
63
|
+
<Box flexDirection="column" sx={styles.box}>
|
64
|
+
<BaseAlert
|
65
|
+
variant={variant}
|
66
|
+
{...boxProps}
|
67
|
+
paddingX={0}
|
68
|
+
paddingY={0}
|
69
|
+
sx={styles.box}
|
70
|
+
>
|
71
|
+
<Accordion
|
72
|
+
onChange={(expandedIndex) => onToggle(expandedIndex === 0)}
|
73
|
+
defaultIndex={defaultOpen ? 0 : -1}
|
74
|
+
allowToggle
|
75
|
+
flexGrow="1"
|
76
|
+
>
|
77
|
+
<AccordionItem>
|
78
|
+
<AccordionButton sx={styles.container}>
|
79
|
+
<Stack
|
80
|
+
flexDirection="row"
|
81
|
+
justifyContent="center"
|
82
|
+
width="100%"
|
83
|
+
paddingX="12px"
|
84
|
+
>
|
85
|
+
<Flex
|
86
|
+
justifyContent="space-between"
|
87
|
+
alignItems="center"
|
88
|
+
flexGrow="1"
|
89
|
+
maxWidth={contentWidth}
|
90
|
+
>
|
91
|
+
<Flex as={headingLevel} alignItems="center">
|
92
|
+
<AlertIcon variant={variant} />
|
93
|
+
|
94
|
+
<Box
|
95
|
+
as="span"
|
96
|
+
sx={{
|
97
|
+
// Truncate the title to one line
|
98
|
+
display: "-webkit-box",
|
99
|
+
overflow: "hidden",
|
100
|
+
WebkitLineClamp: "1",
|
101
|
+
WebkitBoxOrient: "vertical",
|
102
|
+
}}
|
103
|
+
color="white"
|
104
|
+
>
|
105
|
+
{title}
|
106
|
+
</Box>
|
107
|
+
</Flex>
|
108
|
+
|
109
|
+
<Flex alignItems="center">
|
110
|
+
{notification && (
|
111
|
+
<Text sx={styles.notificationText}>
|
112
|
+
{t(texts.notification(notification))}
|
113
|
+
</Text>
|
114
|
+
)}
|
115
|
+
|
116
|
+
<AccordionIcon color="white" />
|
117
|
+
</Flex>
|
118
|
+
</Flex>
|
119
|
+
</Stack>
|
120
|
+
</AccordionButton>
|
121
|
+
|
122
|
+
<AccordionPanel sx={styles.serviceMessageContent}>
|
123
|
+
<Stack flexDirection="row" justifyContent="center" width="100%">
|
124
|
+
<Flex
|
125
|
+
justifyContent="space-between"
|
126
|
+
alignItems="center"
|
127
|
+
flexGrow="1"
|
128
|
+
maxWidth={contentWidth}
|
129
|
+
flexFlow="column"
|
130
|
+
gap={2}
|
131
|
+
sx={{
|
132
|
+
p: {
|
133
|
+
padding: "0.8rem 0",
|
134
|
+
borderBottom: "0.08rem solid rgba(255, 255, 255, 0.4)",
|
135
|
+
},
|
136
|
+
"p:last-child": {
|
137
|
+
borderBottom: "none",
|
138
|
+
},
|
139
|
+
}}
|
140
|
+
>
|
141
|
+
{children}
|
142
|
+
</Flex>
|
143
|
+
</Stack>
|
144
|
+
</AccordionPanel>
|
145
|
+
</AccordionItem>
|
146
|
+
</Accordion>
|
147
|
+
</BaseAlert>
|
148
|
+
</Box>
|
149
|
+
);
|
150
|
+
};
|
151
|
+
|
152
|
+
const texts = createTexts({
|
153
|
+
notification: (notification) => {
|
154
|
+
const numNotification = Number(notification);
|
155
|
+
return {
|
156
|
+
nb: `${numNotification} varsel`,
|
157
|
+
nn: `${numNotification} varsel`,
|
158
|
+
sv: `${numNotification} ${numNotification > 1 ? "underrättelser" : "underrättelse"}`,
|
159
|
+
en: `${numNotification} ${numNotification > 1 ? "notifications" : "notification"}`,
|
160
|
+
};
|
161
|
+
},
|
162
|
+
});
|
package/src/alert/index.tsx
CHANGED
package/src/input/Input.tsx
CHANGED
@@ -71,6 +71,16 @@ const config = helpers.defineMultiStyleConfig({
|
|
71
71
|
},
|
72
72
|
},
|
73
73
|
},
|
74
|
+
service: {
|
75
|
+
container: {
|
76
|
+
_hover: {
|
77
|
+
outlineColor: "blueGreen",
|
78
|
+
},
|
79
|
+
_active: {
|
80
|
+
backgroundColor: "pine",
|
81
|
+
},
|
82
|
+
},
|
83
|
+
},
|
74
84
|
},
|
75
85
|
defaultProps: {
|
76
86
|
variant: "info",
|
@@ -0,0 +1,53 @@
|
|
1
|
+
import { anatomy } from "@chakra-ui/anatomy";
|
2
|
+
import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
|
3
|
+
|
4
|
+
const parts = anatomy("alertService").parts(
|
5
|
+
"container",
|
6
|
+
"box",
|
7
|
+
"notificationText",
|
8
|
+
"serviceMessageContent",
|
9
|
+
);
|
10
|
+
const helpers = createMultiStyleConfigHelpers(parts.keys);
|
11
|
+
|
12
|
+
const config = helpers.defineMultiStyleConfig({
|
13
|
+
baseStyle: {
|
14
|
+
container: {
|
15
|
+
paddingX: 0,
|
16
|
+
paddingY: 2,
|
17
|
+
fontSize: "inherit",
|
18
|
+
transitionProperty: "outline, border-radius",
|
19
|
+
transitionDuration: "fast",
|
20
|
+
borderTopRadius: "none",
|
21
|
+
borderBottomRadius: "18px",
|
22
|
+
_hover: {
|
23
|
+
outline: "2px solid",
|
24
|
+
outlineColor: "blueGreen",
|
25
|
+
},
|
26
|
+
_active: {
|
27
|
+
backgroundColor: "pine",
|
28
|
+
outlineColor: "pine",
|
29
|
+
},
|
30
|
+
},
|
31
|
+
box: {
|
32
|
+
outline: "1px solid",
|
33
|
+
outlineColor: "blueGreen",
|
34
|
+
backgroundColor: "darkTeal",
|
35
|
+
borderBottomRadius: "1.125rem",
|
36
|
+
borderTopRadius: "none",
|
37
|
+
},
|
38
|
+
notificationText: {
|
39
|
+
color: "white",
|
40
|
+
fontWeight: "400",
|
41
|
+
fontSize: "1rem",
|
42
|
+
pr: "0.375rem",
|
43
|
+
},
|
44
|
+
serviceMessageContent: {
|
45
|
+
paddingX: "0.75rem",
|
46
|
+
paddingTop: "0.375rem",
|
47
|
+
paddingBottom: "0.9375rem",
|
48
|
+
color: "white",
|
49
|
+
},
|
50
|
+
},
|
51
|
+
});
|
52
|
+
|
53
|
+
export default config;
|
@@ -1,6 +1,7 @@
|
|
1
1
|
export { default as Accordion } from "./accordion";
|
2
2
|
export { default as Alert } from "./alert";
|
3
3
|
export { default as AlertExpandable } from "./alert-expandable";
|
4
|
+
export { default as AlertService } from "./alert-service";
|
4
5
|
export { default as Badge } from "./badge";
|
5
6
|
export { default as Breadcrumb } from "./breadcrumb";
|
6
7
|
export { default as Button } from "./button";
|