@vygruppen/spor-react 12.4.12 → 12.4.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "12.4.12",
+  "version": "12.4.14",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -45,8 +45,8 @@
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
-    "@vygruppen/spor-icon-react": "4.1.0",
     "@vygruppen/spor-design-tokens": "4.0.7",
+    "@vygruppen/spor-icon-react": "4.1.0",
     "@vygruppen/spor-loader": "0.6.0"
   },
   "devDependencies": {
@@ -66,8 +66,8 @@
     "vitest": "^0.26.3",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.2.2",
-    "@vygruppen/tsconfig": "0.1.0",
-    "@vygruppen/eslint-config": "1.1.1"
+    "@vygruppen/eslint-config": "1.1.1",
+    "@vygruppen/tsconfig": "0.1.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",

package/src/input/Combobox.tsx

@@ -21,8 +21,8 @@ export type ComboboxProps<T> = Exclude<
     inputRef?: React.RefObject<HTMLInputElement>;
     /** If you want to allow an empty collection */
     allowsEmptyCollection?: boolean;
-    lefticon?: ReactNode;
-    righticon?: ReactNode;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
     variant?: "core" | "floating";
     children?: React.ReactNode;
   };
@@ -54,8 +54,8 @@ export const Combobox = (props: ComboboxProps<object>) => {
   const {
     label,
     loading,
-    lefticon,
-    righticon,
+    leftIcon,
+    rightIcon,
     borderBottomLeftRadius = "sm",
     borderBottomRightRadius = "sm",
     borderTopLeftRadius = "sm",
@@ -109,7 +109,7 @@ export const Combobox = (props: ComboboxProps<object>) => {
     paddingLeft,
     paddingX,
     paddingY,
-    lefticon,
+    leftIcon,
   };
 
   const {
@@ -150,6 +150,7 @@ export const Combobox = (props: ComboboxProps<object>) => {
         }
         _active={{ backgroundColor: "core.surface.active" }}
         {...inputProps}
+        startElement={leftIcon}
         endElement={
           loading ? (
             <ColorSpinner
@@ -164,7 +165,7 @@ export const Combobox = (props: ComboboxProps<object>) => {
               }}
             />
           ) : (
-            righticon
+            rightIcon
           )
         }
         placeholder=""

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",
   },
 });