@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.
@@ -5,7 +5,6 @@ import {
5
5
  BoxProps,
6
6
  useStyleConfig,
7
7
  forwardRef,
8
- Card,
9
8
  } from "@chakra-ui/react";
10
9
 
11
10
  export type StaticCardProps = BoxProps & {
@@ -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
- type CustomVariantProps = {
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 }} {...rest}>
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" ? rest.foregroundColor : undefined,
94
- backgroundColor: variant === "custom" ? rest.backgroundColor : undefined,
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: "ghost",
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
- );
@@ -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
- };