@vygruppen/spor-react 12.1.0 → 12.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "12.1.0",
+  "version": "12.1.2",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -35,7 +35,7 @@
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
-    "@vygruppen/spor-design-tokens": "4.0.4",
+    "@vygruppen/spor-design-tokens": "4.0.5",
     "@vygruppen/spor-icon-react": "4.0.3",
     "@vygruppen/spor-loader": "0.6.0"
   },

package/src/button/Button.tsx

@@ -7,7 +7,7 @@ import {
   type RecipeVariantProps,
   Span,
 } from "@chakra-ui/react";
-import React, { forwardRef, PropsWithChildren } from "react";
+import React, { cloneElement, forwardRef, PropsWithChildren } from "react";
 
 import { createTexts, useTranslation } from "../i18n";
 import { ColorInlineLoader } from "../loader";
@@ -29,7 +29,7 @@ export type ButtonProps = Exclude<
     /* Display icon to the right */
     rightIcon?: React.ReactNode;
     /* "primary" | "secondary" | "tertiary" | "ghost" | "floating". Defaults to primary. */
-    variant: "primary" | "secondary" | "tertiary" | "ghost" | "floating";
+    variant?: "primary" | "secondary" | "tertiary" | "ghost" | "floating";
     /* "lg" | "md" | "sm" | "xs". Defaults to md. */
     size?: "lg" | "md" | "sm" | "xs";
     /* Link to a downloadable resource. */
@@ -65,9 +65,37 @@ export type ButtonProps = Exclude<
  * @see https://spor.vy.no/components/button
  */
 
+const ButtonContent = ({
+  leftIcon,
+  children,
+  rightIcon,
+}: PropsWithChildren<Pick<ButtonProps, "leftIcon" | "rightIcon">>) => (
+  <>
+    {leftIcon}
+    {children}
+    {rightIcon && <Span marginLeft="auto">{rightIcon}</Span>}
+  </>
+);
+
+const LoadingContent = ({
+  children,
+  loadingText,
+}: PropsWithChildren<Pick<ButtonProps, "size" | "loadingText">>) => (
+  <>
+    <Flex gap="1" visibility="hidden">
+      {children}
+    </Flex>
+    <Center position="absolute" inset="1px 0">
+      <ColorInlineLoader width="80%" marginX={2} marginY={2} />
+      {loadingText && <Box>{loadingText}</Box>}
+    </Center>
+  </>
+);
+
+// eslint-disable-next-line react/display-name
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (props, ref) => {
-    const {
+  (
+    {
       loading,
       disabled,
       loadingText,
@@ -78,16 +106,35 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       type = "button",
       children,
       ...rest
-    } = props;
-    const ariaLabel = useCorrectAriaLabel(props);
+    },
+    ref,
+  ) => {
+    const { t } = useTranslation();
 
-    const buttonContent = (
-      <>
-        {leftIcon}
-        {children}
-        {rightIcon && <Span marginLeft="auto">{rightIcon}</Span>}
-      </>
-    );
+    const ariaLabel = loading
+      ? String(loadingText ?? t(texts.loadingText))
+      : (rest["aria-label"] as string);
+
+    const renderContent = () => {
+      const content = rest.asChild
+        ? (children as React.ReactElement).props.children
+        : children;
+
+      if (loading)
+        return (
+          <LoadingContent size={size} loadingText={loadingText}>
+            <ButtonContent leftIcon={leftIcon} rightIcon={rightIcon}>
+              {content}
+            </ButtonContent>
+          </LoadingContent>
+        );
+
+      return (
+        <ButtonContent leftIcon={leftIcon} rightIcon={rightIcon}>
+          {content}
+        </ButtonContent>
+      );
+    };
 
     return (
       <ChakraButton
@@ -101,51 +148,16 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         size={size}
         {...rest}
       >
-        {loading ? (
-          <>
-            <Flex gap="1" visibility="hidden">
-              {buttonContent}
-            </Flex>
-            <Center position="absolute" right={0} left={0} top={1} bottom={0}>
-              <ColorInlineLoader
-                maxWidth={getLoaderWidth(size)}
-                width="80%"
-                marginX={2}
-                marginY={2}
-              />
-              {loadingText && <Box>{loadingText}</Box>}
-            </Center>
-          </>
-        ) : (
-          buttonContent
-        )}
+        {rest.asChild
+          ? cloneElement(children as React.ReactElement, {
+              children: renderContent(),
+            })
+          : renderContent()}
       </ChakraButton>
     );
   },
 );
 
-function getLoaderWidth(size: ButtonProps["size"]): string {
-  switch (size) {
-    case "xs":
-      return "4rem";
-    case "sm":
-      return "4rem";
-    case "md":
-      return "5rem";
-    case "lg":
-    default:
-      return "6rem";
-  }
-}
-
-function useCorrectAriaLabel(props: ButtonProps): string {
-  const { t } = useTranslation();
-  if (props.loading) {
-    return String(props.loadingText) ?? t(texts.loadingText);
-  }
-  return props["aria-label"] as string;
-}
-
 const texts = createTexts({
   loadingText: {
     nb: "Laster…",

package/src/link/TextLink.tsx

@@ -3,11 +3,18 @@ import {
   Link as ChakraLink,
   LinkProps as ChakraLinkProps,
   RecipeVariantProps,
+  VisuallyHidden,
 } from "@chakra-ui/react";
 import { LinkOutOutline24Icon } from "@vygruppen/spor-icon-react";
-import React, { forwardRef, PropsWithChildren } from "react";
+import React, {
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  PropsWithChildren,
+} from "react";
+
+import { createTexts, useTranslation } from "@/i18n";
 
-import { createTexts, useTranslation } from "..";
 import { linkRecipe } from "../theme/recipes/link";
 
 type linkVariantProps = RecipeVariantProps<typeof linkRecipe>;
@@ -29,17 +36,45 @@ export type LinkProps = Exclude<ChakraLinkProps, "variant"> &
  * </TextLink>
  * ```
  */
+const ExternalIcon = ({ label }: { label: string }) => (
+  <>
+    <LinkOutOutline24Icon aria-hidden />
+    <VisuallyHidden>{label}</VisuallyHidden>
+  </>
+);
+
+// eslint-disable-next-line react/display-name
 export const TextLink = forwardRef<HTMLAnchorElement, LinkProps>(
-  ({ children, ...props }, ref) => {
+  ({ children, external, href, ...props }, ref) => {
     const { t } = useTranslation();
-    const external =
-      props.external !== undefined
-        ? props.external
-        : Boolean(props.href?.match(/^https?:\/\//));
+
+    const isExternal =
+      external ??
+      Boolean(href?.startsWith("http://") || href?.startsWith("https://"));
+
+    const externalLabel = t ? t(texts.externalLink) : texts.externalLink.en;
+
+    // If asChild is true, we need to clone the children and add the external icon
+    if (props.asChild && isValidElement(children)) {
+      return (
+        <ChakraLink href={href} {...props} ref={ref}>
+          {cloneElement(children as React.ReactElement, {
+            ...children.props,
+            children: (
+              <>
+                {children.props.children}
+                {isExternal && <ExternalIcon label={externalLabel} />}
+              </>
+            ),
+          })}
+        </ChakraLink>
+      );
+    }
+
     return (
-      <ChakraLink {...props} ref={ref}>
+      <ChakraLink href={href} {...props} ref={ref}>
         {children}
-        {external && <LinkOutOutline24Icon aria-hidden />}
+        {isExternal && <ExternalIcon label={externalLabel} />}
       </ChakraLink>
     );
   },

package/src/theme/recipes/button.ts

@@ -14,6 +14,7 @@ export const buttonRecipe = defineRecipe({
     transitionDuration: "normal",
     cursor: "pointer",
     textWrap: "wrap",
+    width: "fit-content",
     paddingX: 3,
     paddingY: 1,
     _disabled: {
@@ -121,4 +122,8 @@ export const buttonRecipe = defineRecipe({
       },
     },
   },
+  defaultVariants: {
+    variant: "primary",
+    size: "md",
+  },
 });