feat: add ExternalLink component

.storybook/preview.scss

@@ -1 +1,2 @@
 @import "vanilla-framework";
+@include vanilla;

package.json

@@ -100,6 +100,7 @@
     "@types/react-dom": "^17.0.2 || ^18.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-router-dom": "^6.0.0",
     "vanilla-framework": "^4.3.0"
   }
 }

src/lib/elements/ExternalLink/ExternalLink.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta } from "@storybook/react";
+
+import { ExternalLink } from ".";
+
+const meta: Meta<typeof ExternalLink> = {
+  title: "Components/ExternalLink",
+  component: ExternalLink,
+  tags: ["autodocs"],
+};
+export default meta;
+
+export const Example = {
+  args: {
+    children: "maas.io",
+    to: "https://maas.io",
+  },
+};

src/lib/elements/ExternalLink/ExternalLink.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+import { vi } from "vitest";
+
+import { ExternalLink } from "./ExternalLink";
+
+test("renders with correct attributes", () => {
+  render(<ExternalLink to="https://example.com">Example Link</ExternalLink>);
+
+  const linkElement = screen.getByText(/example link/i);
+  expect(linkElement).toBeInTheDocument();
+  expect(linkElement).toHaveAttribute("rel", "noreferrer noopener");
+  expect(linkElement).toHaveAttribute("href", "https://example.com");
+  expect(linkElement).toHaveAttribute("target", "_blank");
+});
+
+test("calls onClick handler when pressed", async () => {
+  const handleClick = vi.fn();
+
+  render(
+    <ExternalLink onClick={handleClick} to="https://example.com">
+      Example Link
+    </ExternalLink>,
+  );
+
+  const linkElement = screen.getByText(/example link/i);
+  await userEvent.click(linkElement);
+
+  expect(handleClick).toHaveBeenCalled();
+});

src/lib/elements/ExternalLink/ExternalLink.tsx

@@ -0,0 +1,10 @@
+import { Link, LinkProps } from "@canonical/react-components";
+import type { LinkProps as RouterLinkProps } from "react-router-dom";
+
+type ExternalLinkProps = Pick<LinkProps, "children"> &
+  Omit<RouterLinkProps, "children"> & { to: string };
+export const ExternalLink = ({ children, to, ...props }: ExternalLinkProps) => (
+  <Link {...props} href={to} rel="noreferrer noopener" target="_blank">
+    {children}
+  </Link>
+);

src/lib/elements/ExternalLink/index.ts

@@ -0,0 +1 @@
+export * from "./ExternalLink";

src/lib/elements/index.ts

@@ -1 +1,2 @@
 export * from "./Meter";
+export * from "./ExternalLink";

vite.config.ts

@@ -30,12 +30,15 @@ export default defineConfig({
         "react/jsx-runtime",
         "react-dom",
         "vanilla-framework",
+        "react-router-dom",
       ],
       output: {
         globals: {
           react: "React",
+          "@canonical/react-components": "@canonical/react-components",
           "react/jsx-runtime": "react/jsx-runtime",
           "react-dom": "ReactDOM",
+          "react-router-dom": "react-router-dom",
         },
       },
     },