@vygruppen/spor-react 12.4.13 → 12.4.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "12.4.13",
+  "version": "12.4.14",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/input/Field.tsx

@@ -68,7 +68,7 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
     const styles = recipe();
 
     return (
-      <Stack gap="2" ref={ref} {...rest} width="100%">
+      <Stack gap="2" ref={ref} {...rest}>
         <ChakraField.Root
           disabled={disabled}
           invalid={invalid}

package/src/link/TextLink.tsx

@@ -2,30 +2,22 @@
 import {
   Link as ChakraLink,
   LinkProps as ChakraLinkProps,
-  RecipeVariantProps,
   VisuallyHidden,
 } from "@chakra-ui/react";
-import { LinkOutOutline24Icon } from "@vygruppen/spor-icon-react";
-import React, {
-  cloneElement,
-  forwardRef,
-  isValidElement,
-  PropsWithChildren,
-} from "react";
+import {
+  LinkOutOutline18Icon,
+  LinkOutOutline24Icon,
+} from "@vygruppen/spor-icon-react";
+import React, { cloneElement, forwardRef, isValidElement } from "react";
 
 import { createTexts, useTranslation } from "@/i18n";
 
-import { linkRecipe } from "../theme/recipes/link";
-
-type linkVariantProps = RecipeVariantProps<typeof linkRecipe>;
-
-export type LinkProps = Exclude<ChakraLinkProps, "variant"> &
-  PropsWithChildren<linkVariantProps> & {
-    /** Defaults to primary */
-    variant?: "primary" | "secondary";
-    /** Define if the link shows an icon on the right that indicate it is an external link */
-    external?: boolean;
-  };
+export type LinkProps = ChakraLinkProps & {
+  /** Defaults to primary */
+  variant?: "primary" | "secondary";
+  /** Define if the link shows an icon on the right that indicate it is an external link */
+  external?: boolean;
+};
 
 /** Link to different sites or parts of site
  *
@@ -36,9 +28,20 @@ export type LinkProps = Exclude<ChakraLinkProps, "variant"> &
  * </TextLink>
  * ```
  */
-const ExternalIcon = ({ label }: { label: string }) => (
+const ExternalIcon = ({
+  label,
+  size,
+}: {
+  label: string;
+  size: LinkProps["size"];
+}) => (
   <>
-    <LinkOutOutline24Icon aria-hidden />
+    {size === "lg" || size === "md" ? (
+      <LinkOutOutline24Icon aria-hidden />
+    ) : (
+      <LinkOutOutline18Icon aria-hidden />
+    )}
+    {/* Visually hidden text for screen readers */}
     <VisuallyHidden>{label}</VisuallyHidden>
   </>
 );
@@ -62,7 +65,9 @@ export const TextLink = forwardRef<HTMLAnchorElement, LinkProps>(
             children: (
               <>
                 {children.props.children}
-                {isExternal && <ExternalIcon label={externalLabel} />}
+                {isExternal && (
+                  <ExternalIcon label={externalLabel} size={props.size} />
+                )}
               </>
             ),
           })}
@@ -73,7 +78,7 @@ export const TextLink = forwardRef<HTMLAnchorElement, LinkProps>(
     return (
       <ChakraLink href={href} {...props} ref={ref}>
         {children}
-        {isExternal && <ExternalIcon label={externalLabel} />}
+        {isExternal && <ExternalIcon label={externalLabel} size={props.size} />}
       </ChakraLink>
     );
   },

package/src/theme/recipes/link.ts

@@ -15,6 +15,7 @@ export const linkRecipe = defineRecipe({
     paddingY: "0",
     color: "inherit",
     display: "inline-flex",
+    alignItems: "center",
     gap: "0",
     position: "relative",
     boxDecorationBreak: "clone",
@@ -59,5 +60,23 @@ export const linkRecipe = defineRecipe({
         },
       },
     },
+    size: {
+      xs: {
+        fontSize: { base: "mobile.xs", sm: "desktop.xs" },
+      },
+      sm: {
+        fontSize: { base: "mobile.sm", sm: "desktop.sm" },
+      },
+      md: {
+        fontSize: { base: "mobile.md", sm: "desktop.md" },
+      },
+      lg: {
+        fontSize: { base: "mobile.lg", sm: "desktop.lg" },
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "sm",
   },
 });