@vygruppen/spor-react 12.4.13 → 12.4.15
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/.turbo/turbo-postinstall.log +1 -1
- package/CHANGELOG.md +13 -0
- package/dist/index.d.mts +1 -30
- package/dist/index.d.ts +1 -30
- package/dist/index.js +27 -7
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +28 -8
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
- package/src/input/Field.tsx +1 -1
- package/src/link/TextLink.tsx +28 -23
- package/src/theme/recipes/link.ts +19 -0
- package/src/theme/slot-recipes/numeric-stepper.ts +0 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vygruppen/spor-react",
|
|
3
|
-
"version": "12.4.
|
|
3
|
+
"version": "12.4.15",
|
|
4
4
|
"exports": {
|
|
5
5
|
".": {
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -66,8 +66,8 @@
|
|
|
66
66
|
"vitest": "^0.26.3",
|
|
67
67
|
"vitest-axe": "^0.1.0",
|
|
68
68
|
"vitest-canvas-mock": "^0.2.2",
|
|
69
|
-
"@vygruppen/
|
|
70
|
-
"@vygruppen/
|
|
69
|
+
"@vygruppen/tsconfig": "0.1.0",
|
|
70
|
+
"@vygruppen/eslint-config": "1.1.1"
|
|
71
71
|
},
|
|
72
72
|
"peerDependencies": {
|
|
73
73
|
"react": ">=18.0.0 <19.0.0",
|
package/src/input/Field.tsx
CHANGED
|
@@ -68,7 +68,7 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
|
|
|
68
68
|
const styles = recipe();
|
|
69
69
|
|
|
70
70
|
return (
|
|
71
|
-
<Stack gap="2" ref={ref} {...rest}
|
|
71
|
+
<Stack gap="2" ref={ref} {...rest}>
|
|
72
72
|
<ChakraField.Root
|
|
73
73
|
disabled={disabled}
|
|
74
74
|
invalid={invalid}
|
package/src/link/TextLink.tsx
CHANGED
|
@@ -2,30 +2,22 @@
|
|
|
2
2
|
import {
|
|
3
3
|
Link as ChakraLink,
|
|
4
4
|
LinkProps as ChakraLinkProps,
|
|
5
|
-
RecipeVariantProps,
|
|
6
5
|
VisuallyHidden,
|
|
7
6
|
} from "@chakra-ui/react";
|
|
8
|
-
import {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
PropsWithChildren,
|
|
14
|
-
} from "react";
|
|
7
|
+
import {
|
|
8
|
+
LinkOutOutline18Icon,
|
|
9
|
+
LinkOutOutline24Icon,
|
|
10
|
+
} from "@vygruppen/spor-icon-react";
|
|
11
|
+
import React, { cloneElement, forwardRef, isValidElement } from "react";
|
|
15
12
|
|
|
16
13
|
import { createTexts, useTranslation } from "@/i18n";
|
|
17
14
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
/** Defaults to primary */
|
|
25
|
-
variant?: "primary" | "secondary";
|
|
26
|
-
/** Define if the link shows an icon on the right that indicate it is an external link */
|
|
27
|
-
external?: boolean;
|
|
28
|
-
};
|
|
15
|
+
export type LinkProps = ChakraLinkProps & {
|
|
16
|
+
/** Defaults to primary */
|
|
17
|
+
variant?: "primary" | "secondary";
|
|
18
|
+
/** Define if the link shows an icon on the right that indicate it is an external link */
|
|
19
|
+
external?: boolean;
|
|
20
|
+
};
|
|
29
21
|
|
|
30
22
|
/** Link to different sites or parts of site
|
|
31
23
|
*
|
|
@@ -36,9 +28,20 @@ export type LinkProps = Exclude<ChakraLinkProps, "variant"> &
|
|
|
36
28
|
* </TextLink>
|
|
37
29
|
* ```
|
|
38
30
|
*/
|
|
39
|
-
const ExternalIcon = ({
|
|
31
|
+
const ExternalIcon = ({
|
|
32
|
+
label,
|
|
33
|
+
size,
|
|
34
|
+
}: {
|
|
35
|
+
label: string;
|
|
36
|
+
size: LinkProps["size"];
|
|
37
|
+
}) => (
|
|
40
38
|
<>
|
|
41
|
-
|
|
39
|
+
{size === "lg" || size === "md" ? (
|
|
40
|
+
<LinkOutOutline24Icon aria-hidden />
|
|
41
|
+
) : (
|
|
42
|
+
<LinkOutOutline18Icon aria-hidden />
|
|
43
|
+
)}
|
|
44
|
+
{/* Visually hidden text for screen readers */}
|
|
42
45
|
<VisuallyHidden>{label}</VisuallyHidden>
|
|
43
46
|
</>
|
|
44
47
|
);
|
|
@@ -62,7 +65,9 @@ export const TextLink = forwardRef<HTMLAnchorElement, LinkProps>(
|
|
|
62
65
|
children: (
|
|
63
66
|
<>
|
|
64
67
|
{children.props.children}
|
|
65
|
-
{isExternal &&
|
|
68
|
+
{isExternal && (
|
|
69
|
+
<ExternalIcon label={externalLabel} size={props.size} />
|
|
70
|
+
)}
|
|
66
71
|
</>
|
|
67
72
|
),
|
|
68
73
|
})}
|
|
@@ -73,7 +78,7 @@ export const TextLink = forwardRef<HTMLAnchorElement, LinkProps>(
|
|
|
73
78
|
return (
|
|
74
79
|
<ChakraLink href={href} {...props} ref={ref}>
|
|
75
80
|
{children}
|
|
76
|
-
{isExternal && <ExternalIcon label={externalLabel} />}
|
|
81
|
+
{isExternal && <ExternalIcon label={externalLabel} size={props.size} />}
|
|
77
82
|
</ChakraLink>
|
|
78
83
|
);
|
|
79
84
|
},
|
|
@@ -15,6 +15,7 @@ export const linkRecipe = defineRecipe({
|
|
|
15
15
|
paddingY: "0",
|
|
16
16
|
color: "inherit",
|
|
17
17
|
display: "inline-flex",
|
|
18
|
+
alignItems: "center",
|
|
18
19
|
gap: "0",
|
|
19
20
|
position: "relative",
|
|
20
21
|
boxDecorationBreak: "clone",
|
|
@@ -59,5 +60,23 @@ export const linkRecipe = defineRecipe({
|
|
|
59
60
|
},
|
|
60
61
|
},
|
|
61
62
|
},
|
|
63
|
+
size: {
|
|
64
|
+
xs: {
|
|
65
|
+
fontSize: { base: "mobile.xs", sm: "desktop.xs" },
|
|
66
|
+
},
|
|
67
|
+
sm: {
|
|
68
|
+
fontSize: { base: "mobile.sm", sm: "desktop.sm" },
|
|
69
|
+
},
|
|
70
|
+
md: {
|
|
71
|
+
fontSize: { base: "mobile.md", sm: "desktop.md" },
|
|
72
|
+
},
|
|
73
|
+
lg: {
|
|
74
|
+
fontSize: { base: "mobile.lg", sm: "desktop.lg" },
|
|
75
|
+
},
|
|
76
|
+
},
|
|
77
|
+
},
|
|
78
|
+
defaultVariants: {
|
|
79
|
+
variant: "primary",
|
|
80
|
+
size: "sm",
|
|
62
81
|
},
|
|
63
82
|
});
|