@vygruppen/spor-react 10.4.0 → 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/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-T4CLCBB5.mjs';
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vygruppen/spor-react",
3
- "version": "10.4.0",
3
+ "version": "10.5.0",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",
@@ -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
  });
@@ -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: "info" | "success" | "warning" | "alt-transport" | "error";
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 color="darkGrey" />
81
+ <AccordionIcon
82
+ color={variant === "service" ? "white" : "darkGrey"}
83
+ />
82
84
  </Flex>
83
85
  </AccordionButton>
84
- <AccordionPanel>{children}</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
+ });
@@ -1,3 +1,4 @@
1
1
  export * from "./ClosableAlert";
2
2
  export * from "./ExpandableAlert";
3
3
  export * from "./StaticAlert";
4
+ export * from "./ServiceAlert";
@@ -58,6 +58,7 @@ export const Input = forwardRef<InputProps, "input">(
58
58
  id={inputId}
59
59
  aria-labelledby={labelId}
60
60
  ref={ref}
61
+ overflow="hidden"
61
62
  placeholder=" " // This is needed to make the label work as expected
62
63
  />
63
64
  <FormLabel htmlFor={inputId} id={labelId}>
@@ -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;
@@ -51,6 +51,12 @@ const config = helpers.defineMultiStyleConfig({
51
51
  backgroundColor: "banana",
52
52
  },
53
53
  },
54
+ service: {
55
+ container: {
56
+ backgroundColor: "darkTeal",
57
+ color: "white",
58
+ },
59
+ },
54
60
  },
55
61
  defaultProps: {
56
62
  variant: "info",
@@ -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";
@@ -241,8 +241,7 @@ const getDeviationIconStyle = (props: StyleFunctionProps) => {
241
241
  top: "0",
242
242
  right: "0",
243
243
  transform: "translate(50%, -50%)",
244
- zIndex: "banner",
245
- stroke: "white",
244
+ zIndex: "docked",
246
245
  color:
247
246
  deviationIconColor[
248
247
  props.deviationLevel as keyof typeof deviationIconColor
@@ -252,7 +251,5 @@ const getDeviationIconStyle = (props: StyleFunctionProps) => {
252
251
 
253
252
  const deviationIconColor = {
254
253
  critical: "brightRed",
255
- major: "golden",
256
- minor: "golden",
257
254
  info: "ocean",
258
255
  } as const;