@purpurds/cta-link 5.4.3 → 5.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/cta-link",
-  "version": "5.4.3",
+  "version": "5.6.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/cta-link.cjs.js",
   "types": "./dist/cta-link.d.ts",
@@ -15,9 +15,9 @@
   "source": "src/cta-link.tsx",
   "dependencies": {
     "classnames": "~2.5.0",
-    "@purpurds/icon": "5.4.3",
-    "@purpurds/action": "5.4.3",
-    "@purpurds/tokens": "5.4.3"
+    "@purpurds/action": "5.6.0",
+    "@purpurds/icon": "5.6.0",
+    "@purpurds/tokens": "5.6.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",

package/readme.mdx

@@ -36,9 +36,9 @@ import { CtaLink } from "@purpurds/purpur";
 
 export const MyComponent = () => {
   return (
-    <div>
-      <CtaLink {...someProps}>Some content</CtaLink>
-    </div>
+    <CtaLink href="http://telia.se" variant="primary" negative fullWidth size="sm">
+      Some content
+    </CtaLink>
   );
 };
 ```

package/src/cta-link.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import * as matchers from "@testing-library/jest-dom/matchers";
 import { cleanup, render, screen } from "@testing-library/react";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { afterEach, describe, expect, it } from "vitest";
 
 import { CtaLink } from "./cta-link";
 

package/src/cta-link.tsx

@@ -1,10 +1,11 @@
-import React, { AnchorHTMLAttributes } from "react";
+import React, { AnchorHTMLAttributes, ForwardedRef, forwardRef, HTMLAttributes } from "react";
 import { ActionProps, SIZE } from "@purpurds/action";
 import { arrowLeft, arrowRight, external, Icon, phone } from "@purpurds/icon";
-import c from "classnames";
+import c from "classnames/bind";
 
 import styles from "./cta-link.module.scss";
 
+const cx = c.bind(styles);
 const rootClassName = "purpur-cta-link";
 export const ctaLinkIcons = ["forward", "external", "back", "phone"] as const;
 export type CtaLinkIcon = (typeof ctaLinkIcons)[number];
@@ -16,44 +17,77 @@ const iconMapping = {
   phone: phone,
 };
 
-export const CtaLink = ({
-  children,
-  className,
-  ["data-testid"]: dataTestid,
-  fullWidth = false,
-  iconOnly,
-  negative = false,
-  size = SIZE.MD,
-  variant,
-  icon = "forward",
-  ...props
-}: ActionProps & AnchorHTMLAttributes<HTMLAnchorElement> & { icon?: CtaLinkIcon }) => {
-  const classes = c(
-    [
-      className,
-      styles[rootClassName],
-      styles[`${rootClassName}--${negative ? `${variant}-negative` : variant}`],
-      styles[`${rootClassName}--${size}`],
-    ],
+type DefaultProps = ActionProps & { icon?: CtaLinkIcon };
+
+type AnchorProps = DefaultProps & {
+  href: string;
+  ref?: ForwardedRef<HTMLAnchorElement>;
+} & AnchorHTMLAttributes<HTMLAnchorElement>;
+
+type SpanProps = DefaultProps & {
+  ref?: ForwardedRef<HTMLSpanElement>;
+} & HTMLAttributes<HTMLSpanElement>;
+
+export type CtaLinkProps = AnchorProps | SpanProps;
+
+export const CtaLink = forwardRef<HTMLAnchorElement | HTMLSpanElement, CtaLinkProps>(
+  (
     {
-      [styles[`${rootClassName}--icon-only`]]: iconOnly,
-      [styles[`${rootClassName}--negative`]]: negative,
-      [styles[`${rootClassName}--full-width`]]: fullWidth,
-    }
-  );
-
-  const Tag = props.href ? "a" : "span";
-  const IconComponent = iconMapping[icon];
-
-  return (
-    <Tag className={classes} data-testid={dataTestid} {...props}>
-      {(icon === "back" || icon === "phone") && (
-        <Icon svg={IconComponent} size={size === SIZE.LG ? "sm" : "xs"} />
-      )}
-      {!iconOnly && children}
-      {(icon === "forward" || icon === "external") && (
-        <Icon svg={IconComponent} size={size === SIZE.LG ? "sm" : "xs"} />
-      )}
-    </Tag>
-  );
-};
+      children,
+      className,
+      ["data-testid"]: dataTestid,
+      fullWidth = false,
+      iconOnly,
+      negative = false,
+      size = SIZE.MD,
+      variant,
+      icon = "forward",
+      ...props
+    },
+    ref
+  ) => {
+    const classes = cx(
+      [
+        className,
+        rootClassName,
+        `${rootClassName}--${negative ? `${variant}-negative` : variant}`,
+        `${rootClassName}--${size}`,
+      ],
+      {
+        [`${rootClassName}--icon-only`]: iconOnly,
+        [`${rootClassName}--negative`]: negative,
+        [`${rootClassName}--full-width`]: fullWidth,
+      }
+    );
+
+    const IconComponent = iconMapping[icon];
+
+    const childrenWithIcons = (
+      <>
+        {(icon === "back" || icon === "phone") && (
+          <Icon svg={IconComponent} size={size === SIZE.LG ? "sm" : "xs"} />
+        )}
+        {!iconOnly && children}
+        {(icon === "forward" || icon === "external") && (
+          <Icon svg={IconComponent} size={size === SIZE.LG ? "sm" : "xs"} />
+        )}
+      </>
+    );
+
+    const sharedProps = {
+      ...props,
+      className: classes,
+      ["data-testid"]: dataTestid,
+    };
+
+    return "href" in props && props.href ? (
+      <a {...sharedProps} ref={ref as ForwardedRef<HTMLAnchorElement>}>
+        {childrenWithIcons}
+      </a>
+    ) : (
+      <span {...sharedProps} ref={ref as ForwardedRef<HTMLSpanElement>}>
+        {childrenWithIcons}
+      </span>
+    );
+  }
+);