@purpurds/cta-link 3.0.0

package/dist/styles.css

@@ -0,0 +1 @@
+._purpur-cta-link_e7abc_1{align-items:center;border-radius:var(--purpur-border-radius-full);border-width:0;cursor:pointer;display:inline-flex;font-size:var(--purpur-typography-scale-100);font-family:var(--purpur-typography-family-default),Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:var(--purpur-typography-weight-medium);gap:var(--purpur-spacing-100);justify-content:center;line-height:var(--purpur-spacing-300);outline:0;position:relative;text-decoration:none;transition:all var(--purpur-motion-duration-100) ease;width:auto}._purpur-cta-link_e7abc_1:focus:before{border-radius:var(--purpur-border-radius-full);box-shadow:0 0 0 var(--purpur-border-width-sm) var(--purpur-color-border-interactive-focus);content:"";display:block;inset:calc(var(--purpur-spacing-25) * -1);position:absolute}._purpur-cta-link_e7abc_1:focus:not(:focus-visible):before{box-shadow:none}._purpur-cta-link_e7abc_1 svg{display:block}._purpur-cta-link--sm_e7abc_33{padding:var(--purpur-spacing-100) var(--purpur-spacing-250)}._purpur-cta-link--sm_e7abc_33._purpur-cta-link--icon-only_e7abc_36{padding:var(--purpur-spacing-100)}._purpur-cta-link--md_e7abc_39{padding:var(--purpur-spacing-150) var(--purpur-spacing-300)}._purpur-cta-link--md_e7abc_39._purpur-cta-link--icon-only_e7abc_36{padding:var(--purpur-spacing-150)}._purpur-cta-link--lg_e7abc_45{padding:var(--purpur-spacing-200) var(--purpur-spacing-400)}._purpur-cta-link--lg_e7abc_45._purpur-cta-link--icon-only_e7abc_36{padding:var(--purpur-spacing-200)}._purpur-cta-link--full-width_e7abc_51{width:100%}._purpur-cta-link--primary_e7abc_54{background-color:var(--purpur-color-background-interactive-primary);color:var(--purpur-color-text-interactive-on-primary)}._purpur-cta-link--primary_e7abc_54:hover:not(._purpur-cta-link--disabled_e7abc_58){background-color:var(--purpur-color-background-interactive-primary-hover)}._purpur-cta-link--primary_e7abc_54:active:not(._purpur-cta-link--disabled_e7abc_58){background-color:var(--purpur-color-background-interactive-primary-active)}._purpur-cta-link--primary-negative_e7abc_64{background-color:var(--purpur-color-background-interactive-primary-negative);color:var(--purpur-color-text-interactive-on-primary-negative)}._purpur-cta-link--primary-negative_e7abc_64:hover:not(._purpur-cta-link--disabled_e7abc_58){background-color:var(--purpur-color-background-interactive-primary-negative-hover);border-color:var(--purpur-color-background-interactive-primary-negative-hover)}._purpur-cta-link--primary-negative_e7abc_64:active:not(._purpur-cta-link--disabled_e7abc_58){background-color:var(--purpur-color-background-interactive-primary-negative-active);border-color:var(--purpur-color-background-interactive-primary-negative-active)}._purpur-cta-link--secondary_e7abc_76{background-color:var(--purpur-color-background-interactive-transparent);box-shadow:inset 0 0 0 var(--purpur-border-width-xs) var(--purpur-color-border-interactive-primary);color:var(--purpur-color-text-interactive-primary)}._purpur-cta-link--secondary_e7abc_76:hover:not(._purpur-cta-link--disabled_e7abc_58){background-color:var(--purpur-color-background-interactive-transparent-hover)}._purpur-cta-link--secondary_e7abc_76:active:not(._purpur-cta-link--disabled_e7abc_58){background-color:var(--purpur-color-background-interactive-transparent-active)}._purpur-cta-link--secondary-negative_e7abc_87{background-color:var(--purpur-color-background-interactive-transparent);box-shadow:inset 0 0 0 var(--purpur-border-width-xs) var(--purpur-color-border-interactive-primary-negative);color:var(--purpur-color-text-interactive-primary-negative)}._purpur-cta-link--secondary-negative_e7abc_87:hover:not(._purpur-cta-link--disabled_e7abc_58){background-color:var(--purpur-color-background-interactive-transparent-negative-hover)}._purpur-cta-link--secondary-negative_e7abc_87:active:not(._purpur-cta-link--disabled_e7abc_58){background-color:var(--purpur-color-background-interactive-transparent-negative-active)}._purpur-cta-link--expressive_e7abc_98{background-color:var(--purpur-color-background-interactive-expressive);color:var(--purpur-color-text-interactive-on-expressive)}._purpur-cta-link--expressive_e7abc_98:hover:not(._purpur-cta-link--disabled_e7abc_58){background-color:var(--purpur-color-background-interactive-expressive-hover)}._purpur-cta-link--expressive_e7abc_98:active:not(._purpur-cta-link--disabled_e7abc_58){background-color:var(--purpur-color-background-interactive-expressive-active)}._purpur-cta-link--expressive-negative_e7abc_108{background-color:var(--purpur-color-background-interactive-expressive-negative);color:var(--purpur-color-text-interactive-on-expressive-negative)}._purpur-cta-link--expressive-negative_e7abc_108:hover:not(._purpur-cta-link--disabled_e7abc_58){background-color:var(--purpur-color-background-interactive-expressive-negative-hover);color:var(--purpur-color-text-interactive-on-expressive-negative-hover)}._purpur-cta-link--expressive-negative_e7abc_108:active:not(._purpur-cta-link--disabled_e7abc_58){background-color:var(--purpur-color-background-interactive-expressive-negative-active);color:var(--purpur-color-text-interactive-on-expressive-negative-active)}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@purpurds/cta-link",
+  "version": "3.0.0",
+  "license": "AGPL-3.0-only",
+  "main": "./dist/cta-link.cjs.js",
+  "types": "./dist/cta-link.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/cta-link.cjs.js",
+      "systemjs": "./dist/cta-link.system.js",
+      "types": "./dist/cta-link.d.ts",
+      "default": "./dist/cta-link.es.js"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "source": "src/cta-link.tsx",
+  "dependencies": {
+    "classnames": "~2.5.0",
+    "@purpurds/action": "3.0.0",
+    "@purpurds/icon": "3.0.0",
+    "@purpurds/tokens": "3.0.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "~1.7.0",
+    "@storybook/blocks": "~7.6.0",
+    "@storybook/react": "~7.6.0",
+    "@telia/base-rig": "~8.2.0",
+    "@telia/react-rig": "~3.2.0",
+    "@testing-library/dom": "~9.3.3",
+    "@testing-library/jest-dom": "~6.3.0",
+    "@testing-library/react": "~14.1.2",
+    "@types/node": "18",
+    "@types/react-dom": "~18.2.17",
+    "@types/react": "~18.2.42",
+    "eslint-plugin-testing-library": "~6.2.0",
+    "eslint": "~8.56.0",
+    "jsdom": "~22.1.0",
+    "lint-staged": "~10.5.3",
+    "prettier": "~2.8.8",
+    "react-dom": "~18.2.0",
+    "react": "~18.2.0",
+    "typescript": "~5.2.2",
+    "vite": "~5.0.6",
+    "vitest": "~1.2.0",
+    "@purpurds/component-rig": "1.0.0"
+  },
+  "scripts": {
+    "build:dev": "vite",
+    "build:watch": "vite build --watch",
+    "build": "rm -rf dist && vite build && vite build --mode systemjs",
+    "ci:build": "rushx build",
+    "coverage": "vitest run --coverage",
+    "lint:fix": "eslint . --fix",
+    "lint": "lint-staged --no-stash 2>&1",
+    "sbdev": "rush sbdev",
+    "test:unit": "vitest run --passWithNoTests",
+    "test:watch": "vitest --watch",
+    "test": "rushx test:unit",
+    "typecheck": "tsc -p ./tsconfig.json"
+  }
+}

package/readme.mdx

@@ -0,0 +1,56 @@
+import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
+
+import * as CtaLinkStories from "./src/cta-link.stories";
+import packageInfo from "./package.json";
+
+<Meta name="Docs" title="Components/CtaLink" of={CtaLinkStories} />
+
+# CtaLink
+
+<Subtitle>Version {packageInfo.version}</Subtitle>
+
+### Showcase
+
+<Primary />
+
+### Properties
+
+<ArgTypes />
+
+### Installation
+
+#### Via NPM
+
+Add the dependency to your consumer app like `"@purpurds/cta-link": "x.y.z"`
+
+#### From outside the monorepo (build-time)
+
+To install this package, you need to setup access to the artifactory. [Click here to go to the guide on how to do that](https://github.com/telia-company/jfrog-documentation/blob/main/doc/JFrog/JFrog_Onboarding.md#getting-access-to-artifactory-and-other-jfrog-applications).
+
+---
+
+In MyApp.tsx
+
+```tsx
+import "@purpurds/tokens/index.css";
+```
+
+and
+
+```tsx
+import "@purpurds/cta-link/styles";
+```
+
+In MyComponent.tsx
+
+```tsx
+import { CtaLink } from "@purpurds/cta-link";
+
+export const MyComponent = () => {
+  return (
+    <div>
+      <CtaLink {...someProps}>Some content</CtaLink>
+    </div>
+  );
+};
+```

package/src/cta-link.module.scss

@@ -0,0 +1,5 @@
+@import "@purpurds/action/src/action.scss";
+
+.purpur-cta-link {
+  @include action();
+}

package/src/cta-link.stories.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { sizes, variants } from "@purpurds/action";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import "@purpurds/icon/styles";
+import { CtaLink } from "./cta-link";
+
+const meta: Meta<typeof CtaLink> = {
+  title: "Components/CtaLink",
+  component: CtaLink,
+  parameters: {
+    design: [
+      {
+        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",
+      },
+    ],
+  },
+  argTypes: {
+    fullWidth: { control: { type: "boolean" } },
+    size: {
+      options: sizes,
+      control: { type: "select" },
+    },
+    variant: {
+      options: variants,
+      control: { type: "select" },
+    },
+    ["data-testid"]: { control: { type: "text" } },
+    className: { control: { type: "text" } },
+    children: { control: { type: "text" } },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof CtaLink>;
+
+export const Showcase: Story = {
+  args: {
+    children: "CTA Link label",
+    fullWidth: false,
+    variant: "primary",
+    href: "#telia",
+  },
+};
+
+export const CtaLinkWithOnlyIcon: Story = {
+  name: "CTA Link with only icon",
+  parameters: {
+    controls: { exclude: ["children"] },
+  },
+  args: {
+    variant: "primary",
+    iconOnly: true,
+    ["aria-label"]: "CTA Link label",
+  },
+  render: ({ ...args }) => <CtaLink {...args} />,
+};

package/src/cta-link.test.tsx

@@ -0,0 +1,63 @@
+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 { CtaLink } from "./cta-link";
+
+expect.extend(matchers);
+
+describe("CtaLink", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("should render", () => {
+    render(
+      <CtaLink variant="primary" data-testid="cta-link">
+        Some text content
+      </CtaLink>
+    );
+
+    expect(screen.getByTestId("cta-link")).toHaveTextContent("Some text content");
+  });
+
+  it("should use correct class for primary variant", () => {
+    render(
+      <CtaLink variant="primary" data-testid="cta-link">
+        Some text content
+      </CtaLink>
+    );
+
+    expect(
+      screen.getByTestId("cta-link").classList.contains("purpur-cta-link--primary")
+    ).toBeTruthy();
+  });
+
+  it("should not render children if iconOnly", async () => {
+    render(
+      <CtaLink variant="secondary" iconOnly aria-label="CTA Link label">
+        Link Children
+      </CtaLink>
+    );
+    expect(await screen.queryByText("Link Children")).toBe(null);
+  });
+
+  it("renders href", async () => {
+    render(
+      <CtaLink variant="primary" href="#telia" data-testid="link">
+        Link
+      </CtaLink>
+    );
+    expect(screen.getByTestId("link").getAttribute("href")).toContain("#telia");
+  });
+
+  it("douesn't render href", async () => {
+    render(
+      <CtaLink variant="primary" data-testid="link">
+        Link
+      </CtaLink>
+    );
+    expect(screen.getByTestId("link").getAttribute("href")).toBe(null);
+  });
+});

package/src/cta-link.tsx

@@ -0,0 +1,42 @@
+import React, { AnchorHTMLAttributes } from "react";
+import { ActionProps, SIZE } from "@purpurds/action";
+import { arrowRight, Icon } from "@purpurds/icon";
+import c from "classnames";
+
+import styles from "./cta-link.module.scss";
+
+const rootClassName = "purpur-cta-link";
+
+export const CtaLink = ({
+  children,
+  className,
+  ["data-testid"]: dataTestid,
+  fullWidth = false,
+  iconOnly,
+  size = SIZE.MD,
+  variant,
+  ...props
+}: ActionProps & AnchorHTMLAttributes<HTMLAnchorElement>) => {
+  const classes = c(
+    [
+      className,
+      styles[rootClassName],
+      styles[`${rootClassName}--${variant}`],
+      styles[`${rootClassName}--${size}`],
+    ],
+    {
+      [styles[`${rootClassName}--icon-only`]]: iconOnly,
+      [styles[`${rootClassName}--negative`]]: variant.endsWith("negative"),
+      [styles[`${rootClassName}--full-width`]]: fullWidth,
+    }
+  );
+
+  const Tag = props.href ? "a" : "span";
+
+  return (
+    <Tag className={classes} data-testid={dataTestid} {...props}>
+      {children && !iconOnly && children}{" "}
+      <Icon svg={arrowRight} size={size === SIZE.LG ? "sm" : "xs"} />
+    </Tag>
+  );
+};

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+  const styles: { [className: string]: string };
+  export default styles;
+}