@purpurds/cta-link 4.1.1 → 4.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/cta-link",
-  "version": "4.1.1",
+  "version": "4.3.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/action": "4.1.1",
-    "@purpurds/icon": "4.1.1",
-    "@purpurds/tokens": "4.1.1"
+    "@purpurds/action": "4.3.0",
+    "@purpurds/icon": "4.3.0",
+    "@purpurds/tokens": "4.3.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.7.0",

package/src/cta-link.stories.tsx

@@ -3,7 +3,7 @@ import { sizes, variants } from "@purpurds/action";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import "@purpurds/icon/styles";
-import { CtaLink } from "./cta-link";
+import { CtaLink, ctaLinkIcons } from "./cta-link";
 
 const meta: Meta<typeof CtaLink> = {
   title: "Components/CtaLink",
@@ -13,7 +13,8 @@ const meta: Meta<typeof CtaLink> = {
       {
         name: "CtaLink",
         type: "figma",
-        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?type=design&node-id=34461%3A39919&mode=design",
+        url:
+          "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?type=design&node-id=34461%3A39919&mode=design",
       },
     ],
   },
@@ -27,6 +28,10 @@ const meta: Meta<typeof CtaLink> = {
       options: variants,
       control: { type: "select" },
     },
+    icon: {
+      options: ctaLinkIcons,
+      control: { type: "select" },
+    },
     ["data-testid"]: { control: { type: "text" } },
     className: { control: { type: "text" } },
     children: { control: { type: "text" } },
@@ -41,6 +46,7 @@ export const Showcase: Story = {
     children: "CTA Link label",
     fullWidth: false,
     variant: "primary",
+    icon: "forward",
     href: "#telia",
   },
 };
@@ -53,6 +59,7 @@ export const CtaLinkWithOnlyIcon: Story = {
   args: {
     variant: "primary",
     iconOnly: true,
+    icon: "forward",
     ["aria-label"]: "CTA Link label",
   },
   render: ({ ...args }) => <CtaLink {...args} />,

package/src/cta-link.tsx

@@ -1,12 +1,23 @@
 import React, { AnchorHTMLAttributes } from "react";
 import { ActionProps, SIZE } from "@purpurds/action";
-import { arrowRight, Icon } from "@purpurds/icon";
+import { arrowLeft, arrowRight, external, Icon, phone } from "@purpurds/icon";
 import c from "classnames";
 
 import styles from "./cta-link.module.scss";
 
 const rootClassName = "purpur-cta-link";
 
+export const ctaLinkIcons = ["forward", "external", "back", "phone"] as const;
+
+export type CtaLinkIcon = typeof ctaLinkIcons[number];
+
+const iconMapping = {
+  forward: arrowRight,
+  external: external,
+  back: arrowLeft,
+  phone: phone,
+};
+
 export const CtaLink = ({
   children,
   className,
@@ -15,8 +26,9 @@ export const CtaLink = ({
   iconOnly,
   size = SIZE.MD,
   variant,
+  icon = "forward",
   ...props
-}: ActionProps & AnchorHTMLAttributes<HTMLAnchorElement>) => {
+}: ActionProps & AnchorHTMLAttributes<HTMLAnchorElement> & { icon?: CtaLinkIcon }) => {
   const classes = c(
     [
       className,
@@ -32,11 +44,17 @@ export const CtaLink = ({
   );
 
   const Tag = props.href ? "a" : "span";
+  const IconComponent = iconMapping[icon];
 
   return (
     <Tag className={classes} data-testid={dataTestid} {...props}>
-      {children && !iconOnly && children}{" "}
-      <Icon svg={arrowRight} size={size === SIZE.LG ? "sm" : "xs"} />
+      {(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>
   );
 };