@vygruppen/spor-react 9.16.0 → 10.1.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 +34 -0
- package/dist/{CountryCodeSelect-2DASZ3PQ.mjs → CountryCodeSelect-FKWNR6SG.mjs} +1 -1
- package/dist/{chunk-MDMLROK2.mjs → chunk-MLRF67YM.mjs} +1030 -1187
- package/dist/index.d.mts +184 -689
- package/dist/index.d.ts +184 -689
- package/dist/index.js +1398 -1584
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
- package/src/accordion/Accordion.tsx +8 -12
- package/src/accordion/Expandable.tsx +8 -26
- package/src/alert/ExpandableAlert.tsx +2 -2
- package/src/datepicker/CalendarTriggerButton.tsx +17 -13
- package/src/datepicker/DateField.tsx +50 -7
- package/src/datepicker/DatePicker.tsx +15 -4
- package/src/datepicker/DateTimeSegment.tsx +5 -1
- package/src/datepicker/StyledField.tsx +7 -1
- package/src/index.tsx +0 -1
- package/src/input/ChoiceChip.tsx +65 -55
- package/src/input/Input.tsx +5 -2
- package/src/input/NumericStepper.tsx +8 -6
- package/src/layout/StaticCard.tsx +0 -1
- package/src/linjetag/LineIcon.tsx +3 -8
- package/src/linjetag/TravelTag.tsx +11 -2
- package/src/linjetag/{types.d.ts → types.ts} +1 -1
- package/src/theme/components/accordion.ts +7 -40
- package/src/theme/components/datepicker.ts +2 -15
- package/src/theme/components/index.ts +0 -1
- package/src/accordion/AccordionContext.tsx +0 -27
- package/src/card/Card.tsx +0 -73
- package/src/card/index.tsx +0 -1
- package/src/theme/components/card.ts +0 -171
@@ -1,19 +1,14 @@
|
|
1
1
|
import { Box, BoxProps, useMultiStyleConfig } from "@chakra-ui/react";
|
2
2
|
import React from "react";
|
3
3
|
import { getCorrectIcon } from "./icons";
|
4
|
-
import { TagProps } from "./types";
|
4
|
+
import { CustomVariantProps, TagProps } from "./types";
|
5
5
|
|
6
6
|
type DefaultVariants = Exclude<TagProps["variant"], "custom">;
|
7
7
|
|
8
8
|
type DefaultVariantProps = {
|
9
9
|
variant: DefaultVariants;
|
10
10
|
};
|
11
|
-
|
12
|
-
variant: "custom";
|
13
|
-
customIconVariant: DefaultVariants;
|
14
|
-
foregroundColor: string;
|
15
|
-
backgroundColor: string;
|
16
|
-
};
|
11
|
+
|
17
12
|
type VariantProps = DefaultVariantProps | CustomVariantProps;
|
18
13
|
|
19
14
|
export type LineIconProps = Exclude<BoxProps, "variant"> &
|
@@ -70,7 +65,7 @@ export const LineIcon = ({
|
|
70
65
|
return null;
|
71
66
|
}
|
72
67
|
return (
|
73
|
-
<Box sx={{ ...styles.iconContainer, ...sx }}
|
68
|
+
<Box sx={{ ...styles.iconContainer, ...sx }}>
|
74
69
|
<Icon sx={styles.icon} />
|
75
70
|
</Box>
|
76
71
|
);
|
@@ -21,6 +21,9 @@ export type TravelTagProps = TagProps &
|
|
21
21
|
BoxProps & {
|
22
22
|
deviationLevel?: "critical" | "major" | "minor" | "info" | "none";
|
23
23
|
isDisabled?: boolean;
|
24
|
+
foregroundColor?: string;
|
25
|
+
backgroundColor?: string;
|
26
|
+
customIconVariant?: string;
|
24
27
|
};
|
25
28
|
|
26
29
|
/**
|
@@ -82,6 +85,9 @@ export const TravelTag = forwardRef<TravelTagProps, As>(
|
|
82
85
|
title,
|
83
86
|
description,
|
84
87
|
isDisabled,
|
88
|
+
foregroundColor,
|
89
|
+
backgroundColor,
|
90
|
+
customIconVariant,
|
85
91
|
...rest
|
86
92
|
},
|
87
93
|
ref,
|
@@ -90,8 +96,8 @@ export const TravelTag = forwardRef<TravelTagProps, As>(
|
|
90
96
|
variant,
|
91
97
|
size,
|
92
98
|
deviationLevel,
|
93
|
-
foregroundColor: variant === "custom" ?
|
94
|
-
backgroundColor: variant === "custom" ?
|
99
|
+
foregroundColor: variant === "custom" ? foregroundColor : undefined,
|
100
|
+
backgroundColor: variant === "custom" ? backgroundColor : undefined,
|
95
101
|
});
|
96
102
|
|
97
103
|
const DeviationLevelIcon = getDeviationLevelIcon({ deviationLevel, size });
|
@@ -102,6 +108,9 @@ export const TravelTag = forwardRef<TravelTagProps, As>(
|
|
102
108
|
variant={variant}
|
103
109
|
size={size}
|
104
110
|
sx={styles.iconContainer}
|
111
|
+
foregroundColor={foregroundColor}
|
112
|
+
backgroundColor={backgroundColor}
|
113
|
+
customIconVariant={customIconVariant}
|
105
114
|
{...(rest as any)}
|
106
115
|
/>
|
107
116
|
<Box sx={styles.textContainer}>
|
@@ -25,7 +25,7 @@ export type TagProps = VariantProps & {
|
|
25
25
|
type DefaultVariantProps = {
|
26
26
|
variant: Variant;
|
27
27
|
};
|
28
|
-
type CustomVariantProps = {
|
28
|
+
export type CustomVariantProps = {
|
29
29
|
variant: "custom";
|
30
30
|
/** When variant="custom", the foreground color of the tag */
|
31
31
|
foregroundColor: string;
|
@@ -20,9 +20,13 @@ const config = helpers.defineMultiStyleConfig({
|
|
20
20
|
justifyContent: "space-between",
|
21
21
|
...baseText("default", props),
|
22
22
|
textAlign: "left",
|
23
|
+
fontSize: ["mobile.sm", null, "desktop.sm"],
|
23
24
|
fontFamily: "body",
|
24
25
|
fontWeight: "bold",
|
25
26
|
outlineOffset: "-2px",
|
27
|
+
paddingX: [2, null, 3],
|
28
|
+
paddingY: [1, null, 1.5],
|
29
|
+
minHeight: [6, null, 7],
|
26
30
|
...focusVisibleStyles(props),
|
27
31
|
_disabled: {
|
28
32
|
pointerEvents: "none",
|
@@ -31,7 +35,9 @@ const config = helpers.defineMultiStyleConfig({
|
|
31
35
|
},
|
32
36
|
panel: {
|
33
37
|
paddingY: 2,
|
38
|
+
paddingX: [2, null, 3],
|
34
39
|
borderBottomRadius: "sm",
|
40
|
+
fontSize: ["mobile.sm", null, "desktop.sm"],
|
35
41
|
},
|
36
42
|
icon: {
|
37
43
|
fontSize: "1.25em",
|
@@ -88,47 +94,8 @@ const config = helpers.defineMultiStyleConfig({
|
|
88
94
|
},
|
89
95
|
}),
|
90
96
|
},
|
91
|
-
sizes: {
|
92
|
-
sm: {
|
93
|
-
button: {
|
94
|
-
fontSize: ["mobile.xs", null, "desktop.xs"],
|
95
|
-
paddingX: 2,
|
96
|
-
paddingY: 1,
|
97
|
-
minHeight: 6,
|
98
|
-
},
|
99
|
-
panel: {
|
100
|
-
fontSize: ["mobile.xs", null, "desktop.xs"],
|
101
|
-
paddingX: 2,
|
102
|
-
},
|
103
|
-
},
|
104
|
-
md: {
|
105
|
-
button: {
|
106
|
-
fontSize: ["mobile.sm", null, "desktop.sm"],
|
107
|
-
paddingX: 3,
|
108
|
-
paddingY: 1,
|
109
|
-
minHeight: 7,
|
110
|
-
},
|
111
|
-
panel: {
|
112
|
-
fontSize: ["mobile.sm", null, "desktop.sm"],
|
113
|
-
paddingX: 3,
|
114
|
-
},
|
115
|
-
},
|
116
|
-
lg: {
|
117
|
-
button: {
|
118
|
-
fontSize: ["mobile.sm", null, "desktop.sm"],
|
119
|
-
paddingX: 3,
|
120
|
-
paddingY: 2,
|
121
|
-
minHeight: 8,
|
122
|
-
},
|
123
|
-
panel: {
|
124
|
-
fontSize: ["mobile.sm", null, "desktop.sm"],
|
125
|
-
paddingX: 3,
|
126
|
-
},
|
127
|
-
},
|
128
|
-
},
|
129
97
|
defaultProps: {
|
130
|
-
variant: "
|
131
|
-
size: "sm",
|
98
|
+
variant: "base",
|
132
99
|
},
|
133
100
|
});
|
134
101
|
|
@@ -42,6 +42,8 @@ const config = helpers.defineMultiStyleConfig({
|
|
42
42
|
_disabled: {
|
43
43
|
pointerEvents: "none",
|
44
44
|
...baseBackground("disabled", props),
|
45
|
+
...baseBorder("disabled", props),
|
46
|
+
...baseText("disabled", props),
|
45
47
|
},
|
46
48
|
_focusWithin: {
|
47
49
|
...focusVisibleStyles(props)._focusVisible,
|
@@ -49,15 +51,10 @@ const config = helpers.defineMultiStyleConfig({
|
|
49
51
|
},
|
50
52
|
inputLabel: {
|
51
53
|
fontSize: "mobile.xs",
|
52
|
-
color: mode("darkGrey", "white")(props),
|
53
54
|
margin: 0,
|
54
55
|
cursor: "text",
|
55
56
|
},
|
56
57
|
dateTimeSegment: {
|
57
|
-
color: mode(
|
58
|
-
"darkGrey",
|
59
|
-
props.isPlaceholder ? "whiteAlpha.400" : "white",
|
60
|
-
)(props),
|
61
58
|
_focus: {
|
62
59
|
...brandBackground("hover", props),
|
63
60
|
color: "white",
|
@@ -68,13 +65,9 @@ const config = helpers.defineMultiStyleConfig({
|
|
68
65
|
display: "flex",
|
69
66
|
alignItems: "center",
|
70
67
|
justifyContent: "center",
|
71
|
-
borderLeftRadius: "sm",
|
72
68
|
transitionProperty: "box-shadow, background-color",
|
73
69
|
transitionSpeed: "fast",
|
74
70
|
position: "relative",
|
75
|
-
paddingTop: 1,
|
76
|
-
paddingBottom: 1,
|
77
|
-
borderRadius: "sm",
|
78
71
|
right: "9px",
|
79
72
|
|
80
73
|
...focusVisibleStyles(props),
|
@@ -173,9 +166,6 @@ const config = helpers.defineMultiStyleConfig({
|
|
173
166
|
_invalid: {
|
174
167
|
...baseBorder("invalid", props),
|
175
168
|
},
|
176
|
-
_disabled: {
|
177
|
-
...baseBorder("disabled", props),
|
178
|
-
},
|
179
169
|
},
|
180
170
|
}),
|
181
171
|
floating: (props) => ({
|
@@ -190,9 +180,6 @@ const config = helpers.defineMultiStyleConfig({
|
|
190
180
|
_invalid: {
|
191
181
|
...baseBorder("invalid", props),
|
192
182
|
},
|
193
|
-
_disabled: {
|
194
|
-
...baseBorder("disabled", props),
|
195
|
-
},
|
196
183
|
},
|
197
184
|
}),
|
198
185
|
ghost: (props) => ({
|
@@ -4,7 +4,6 @@ export { default as AlertExpandable } from "./alert-expandable";
|
|
4
4
|
export { default as Badge } from "./badge";
|
5
5
|
export { default as Breadcrumb } from "./breadcrumb";
|
6
6
|
export { default as Button } from "./button";
|
7
|
-
export { default as Card } from "./card";
|
8
7
|
export { default as CardSelect } from "./card-select";
|
9
8
|
export { default as Checkbox } from "./checkbox";
|
10
9
|
export { default as ChoiceChip } from "./choice-chip";
|
@@ -1,27 +0,0 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import { AccordionProps } from "./Accordion";
|
3
|
-
|
4
|
-
type AccordionContextType = {
|
5
|
-
size: AccordionProps["size"];
|
6
|
-
};
|
7
|
-
const AccordionContext = React.createContext<AccordionContextType | null>(null);
|
8
|
-
type AccordionProviderProps = {
|
9
|
-
children: React.ReactNode;
|
10
|
-
size: AccordionProps["size"];
|
11
|
-
};
|
12
|
-
export const AccordionProvider = ({
|
13
|
-
size,
|
14
|
-
...props
|
15
|
-
}: AccordionProviderProps) => {
|
16
|
-
return <AccordionContext.Provider value={{ size }} {...props} />;
|
17
|
-
};
|
18
|
-
|
19
|
-
export const useAccordionContext = () => {
|
20
|
-
const context = React.useContext(AccordionContext);
|
21
|
-
if (context === null) {
|
22
|
-
throw new Error(
|
23
|
-
"useAccordionContext must be used within AccordionProvider",
|
24
|
-
);
|
25
|
-
}
|
26
|
-
return context;
|
27
|
-
};
|
package/src/card/Card.tsx
DELETED
@@ -1,73 +0,0 @@
|
|
1
|
-
import {
|
2
|
-
As,
|
3
|
-
Box,
|
4
|
-
BoxProps,
|
5
|
-
forwardRef,
|
6
|
-
useStyleConfig,
|
7
|
-
} from "@chakra-ui/react";
|
8
|
-
import React from "react";
|
9
|
-
|
10
|
-
export type CardProps = Exclude<BoxProps, "size"> & {
|
11
|
-
size?: "sm" | "lg";
|
12
|
-
children: React.ReactNode;
|
13
|
-
colorScheme:
|
14
|
-
| "white"
|
15
|
-
| "grey"
|
16
|
-
| "blue"
|
17
|
-
| "green"
|
18
|
-
| "teal"
|
19
|
-
| "yellow"
|
20
|
-
| "orange"
|
21
|
-
| "red";
|
22
|
-
};
|
23
|
-
/**
|
24
|
-
* Renders a card.
|
25
|
-
*
|
26
|
-
* The most basic version looks like this:
|
27
|
-
*
|
28
|
-
* ```tsx
|
29
|
-
* <Card>
|
30
|
-
* Content
|
31
|
-
* </Card>
|
32
|
-
* ```
|
33
|
-
*
|
34
|
-
* There are lots of color schemes available. You can also set the size as either `sm` or `lg`. The default is `sm`.
|
35
|
-
*
|
36
|
-
* ```tsx
|
37
|
-
* <Card colorScheme="orange" size="lg">
|
38
|
-
* A smaller card
|
39
|
-
* </Card>
|
40
|
-
* ```
|
41
|
-
*
|
42
|
-
* Cards are not interactive by default. If you specify the `as` prop to be a link or a button, you can make them work as links or buttons respectively. This will also give it a drop shadow.
|
43
|
-
*
|
44
|
-
* ```tsx
|
45
|
-
* <Card colorScheme="blue" as="button" onClick={handleClick}>
|
46
|
-
* Click for profit
|
47
|
-
* </Card>
|
48
|
-
* <Card colorScheme="green" as="a" href="https://vy.no">
|
49
|
-
* Go to start
|
50
|
-
* </Card>
|
51
|
-
* ```
|
52
|
-
*/
|
53
|
-
|
54
|
-
/**
|
55
|
-
* @deprecated Card is deprecated. Use `StaticCard` or `PressableCard` instead.
|
56
|
-
*/
|
57
|
-
export const Card = forwardRef<CardProps, As>(
|
58
|
-
({ size = "sm", colorScheme = "white", children, ...props }, ref) => {
|
59
|
-
console.warn(
|
60
|
-
"Warning: Card is deprecated. Use `StaticCard` or `PressableCard` instead.",
|
61
|
-
);
|
62
|
-
const styles = useStyleConfig("Card", {
|
63
|
-
colorScheme,
|
64
|
-
size,
|
65
|
-
});
|
66
|
-
|
67
|
-
return (
|
68
|
-
<Box __css={styles} {...props} ref={ref}>
|
69
|
-
{children}
|
70
|
-
</Box>
|
71
|
-
);
|
72
|
-
},
|
73
|
-
);
|
package/src/card/index.tsx
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export * from "./Card";
|
@@ -1,171 +0,0 @@
|
|
1
|
-
import { defineStyleConfig } from "@chakra-ui/react";
|
2
|
-
import { mode } from "@chakra-ui/theme-tools";
|
3
|
-
import { colors } from "../foundations";
|
4
|
-
import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
|
5
|
-
import { floatingBorder } from "../utils/floating-utils";
|
6
|
-
import { focusVisibleStyles } from "../utils/focus-utils";
|
7
|
-
|
8
|
-
const config = defineStyleConfig({
|
9
|
-
baseStyle: (props: any) => ({
|
10
|
-
appearance: "none",
|
11
|
-
border: "none",
|
12
|
-
overflow: "hidden",
|
13
|
-
fontSize: "inherit",
|
14
|
-
display: "block",
|
15
|
-
transitionProperty: "common",
|
16
|
-
transitionDuration: "fast",
|
17
|
-
borderRadius: "md",
|
18
|
-
// Except for white cards, all cards are light mode always
|
19
|
-
color: "text.default.light",
|
20
|
-
...getColorSchemeBaseProps(props),
|
21
|
-
"button&, a&, label&, &.is-clickable": {
|
22
|
-
outline: "1px solid",
|
23
|
-
...getColorSchemeClickableProps(props),
|
24
|
-
...focusVisibleStyles(props),
|
25
|
-
_hover: getColorSchemeHoverProps(props),
|
26
|
-
_active: getColorSchemeActiveProps(props),
|
27
|
-
_disabled: {
|
28
|
-
...baseBackground("disabled", props),
|
29
|
-
...baseBorder("disabled", props),
|
30
|
-
...baseText("disabled", props),
|
31
|
-
pointerEvents: "none",
|
32
|
-
},
|
33
|
-
},
|
34
|
-
}),
|
35
|
-
sizes: {
|
36
|
-
sm: {
|
37
|
-
"button&, a&, label&, &.is-clickable": {
|
38
|
-
boxShadow: "sm",
|
39
|
-
|
40
|
-
_hover: {
|
41
|
-
boxShadow: "md",
|
42
|
-
},
|
43
|
-
|
44
|
-
_active: {
|
45
|
-
boxShadow: "none",
|
46
|
-
},
|
47
|
-
},
|
48
|
-
},
|
49
|
-
lg: {
|
50
|
-
"button&, a&, label&, &.is-clickable": {
|
51
|
-
boxShadow: "md",
|
52
|
-
|
53
|
-
_hover: {
|
54
|
-
boxShadow: "lg",
|
55
|
-
},
|
56
|
-
|
57
|
-
_active: {
|
58
|
-
boxShadow: "sm",
|
59
|
-
},
|
60
|
-
},
|
61
|
-
},
|
62
|
-
},
|
63
|
-
});
|
64
|
-
|
65
|
-
export default config;
|
66
|
-
|
67
|
-
type CardThemeProps = {
|
68
|
-
colorScheme:
|
69
|
-
| "white"
|
70
|
-
| "grey"
|
71
|
-
| "blue"
|
72
|
-
| "green"
|
73
|
-
| "teal"
|
74
|
-
| "yellow"
|
75
|
-
| "orange"
|
76
|
-
| "red";
|
77
|
-
theme: any;
|
78
|
-
colorMode: "light" | "dark";
|
79
|
-
};
|
80
|
-
|
81
|
-
const getColorSchemeBaseProps = (props: CardThemeProps) => {
|
82
|
-
switch (props.colorScheme) {
|
83
|
-
case "white":
|
84
|
-
return {
|
85
|
-
...baseBorder("default", props),
|
86
|
-
backgroundColor: mode(
|
87
|
-
"white",
|
88
|
-
`color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`,
|
89
|
-
)(props),
|
90
|
-
color: "inherit",
|
91
|
-
};
|
92
|
-
case "grey":
|
93
|
-
return {
|
94
|
-
backgroundColor: "lightGrey",
|
95
|
-
};
|
96
|
-
case "green": {
|
97
|
-
return {
|
98
|
-
backgroundColor: "seaMist",
|
99
|
-
};
|
100
|
-
}
|
101
|
-
case "red": {
|
102
|
-
return {
|
103
|
-
backgroundColor: "pink",
|
104
|
-
};
|
105
|
-
}
|
106
|
-
default:
|
107
|
-
return {
|
108
|
-
backgroundColor: colors[props.colorScheme]?.[100] ?? "platinum",
|
109
|
-
};
|
110
|
-
}
|
111
|
-
};
|
112
|
-
|
113
|
-
function getColorSchemeClickableProps(props: CardThemeProps) {
|
114
|
-
switch (props.colorScheme) {
|
115
|
-
case "white":
|
116
|
-
return {
|
117
|
-
...floatingBorder("default", props),
|
118
|
-
};
|
119
|
-
case "grey":
|
120
|
-
return {
|
121
|
-
outlineColor: "steel",
|
122
|
-
};
|
123
|
-
default:
|
124
|
-
return {
|
125
|
-
backgroundColor: colors[props.colorScheme]?.[100] ?? "platinum",
|
126
|
-
outlineColor: colors[props.colorScheme]?.[200] ?? "silver",
|
127
|
-
};
|
128
|
-
}
|
129
|
-
}
|
130
|
-
|
131
|
-
const getColorSchemeHoverProps = (props: CardThemeProps) => {
|
132
|
-
switch (props.colorScheme) {
|
133
|
-
case "white":
|
134
|
-
return {
|
135
|
-
backgroundColor: mode(
|
136
|
-
"white",
|
137
|
-
`color-mix(in srgb, white 20%, var(--spor-colors-bg-default-dark))`,
|
138
|
-
)(props),
|
139
|
-
...floatingBorder("hover", props),
|
140
|
-
};
|
141
|
-
case "grey":
|
142
|
-
return {
|
143
|
-
outlineColor: "osloGrey",
|
144
|
-
};
|
145
|
-
default:
|
146
|
-
return {
|
147
|
-
backgroundColor: colors[props.colorScheme]?.[200] ?? "silver",
|
148
|
-
outlineColor: colors[props.colorScheme]?.[400] ?? "silver",
|
149
|
-
};
|
150
|
-
}
|
151
|
-
};
|
152
|
-
const getColorSchemeActiveProps = (props: CardThemeProps) => {
|
153
|
-
const { colorScheme } = props;
|
154
|
-
switch (colorScheme) {
|
155
|
-
case "white":
|
156
|
-
return {
|
157
|
-
backgroundColor: mode("bg.tertiary.light", `bg.default.dark`)(props),
|
158
|
-
...floatingBorder("active", props),
|
159
|
-
};
|
160
|
-
case "grey":
|
161
|
-
return {
|
162
|
-
backgroundColor: "white",
|
163
|
-
outlineColor: "steel",
|
164
|
-
};
|
165
|
-
default:
|
166
|
-
return {
|
167
|
-
backgroundColor: colors[colorScheme]?.[50] ?? "lightGrey",
|
168
|
-
outlineColor: colors[colorScheme]?.[100] ?? "silver",
|
169
|
-
};
|
170
|
-
}
|
171
|
-
};
|