Add link component (#1429)

* Added a new `Link` component in `link.tsx`, extending
`react-aria-components`'s `Link` with custom styling and focus
management for accessibility and design consistency.
* Created Storybook stories in `link.stories.tsx` to showcase various
usages of the new `Link` component, including default, external, with
icon, custom styling, and embedded in text.

**Exports and package integration:**

* Updated `index.ts` to export the new `Link` component, ensuring it is
available from the main package entry point.
* Added an export file in the `link` directory to re-export the new
`Link` component, supporting modular imports.

<img width="1154" height="1014" alt="image"
src="https://github.com/user-attachments/assets/9376b1e1-b433-4fa3-bda1-89302387091f"
/>

Fokus:
<img width="407" height="237" alt="image"
src="https://github.com/user-attachments/assets/0b60238f-359f-4de3-944e-5bec4ae81b13"
/>

---------

Co-authored-by: Oscar Carlström <[email protected]>

Author: gabrielwallin

.changeset/moody-knives-hunt.md

@@ -0,0 +1,5 @@
+---
+"@obosbbl/grunnmuren-react": patch
+---
+
+New `<Link>` component in beta. This is a very small style-wrapper for the `<Link>` component from `react-aria-components`.

packages/react/src/index.ts

@@ -29,4 +29,5 @@ export * from './tag-group';
 export * from './hero';
 export * from './carousel';
 export * from './tabs';
+export * from './link';
 export * from './link-list';

packages/react/src/link/index.ts

@@ -0,0 +1 @@
+export * from './link';

packages/react/src/link/link.stories.tsx

@@ -0,0 +1,42 @@
+import { Download, LinkExternal } from '@obosbbl/grunnmuren-icons-react';
+import type { Meta } from '@storybook/react-vite';
+import { Link } from './link';
+
+const meta: Meta<typeof Link> = {
+  title: 'Link',
+  component: Link,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const Default = () => <Link href="/bolig">Bolig</Link>;
+
+export const External = () => (
+  <Link
+    href="https://obos.no"
+    target="_blank"
+    rel="noreferrer"
+    className="group inline-flex items-center gap-1"
+  >
+    Ekstern lenke
+    <LinkExternal className="group-hover:motion-safe:-translate-y-0.5 shrink-0 transition-transform group-hover:motion-safe:translate-x-0.5" />
+  </Link>
+);
+
+export const WithIcon = () => (
+  <Link
+    download
+    href="/document.pdf"
+    className="group inline-flex items-center gap-1"
+  >
+    Last ned dokument{' '}
+    <Download className="shrink-0 transition-transform group-hover:motion-safe:translate-y-1" />
+  </Link>
+);
+
+export const WithLongerText = () => (
+  <p>
+    Dette er et avsnitt med en <Link href="/innebygd">lenke</Link> inni.
+  </p>
+);

packages/react/src/link/link.tsx

@@ -0,0 +1,27 @@
+import { cx } from 'cva';
+import type { ReactNode } from 'react';
+import { Link, type LinkProps } from 'react-aria-components';
+
+type CustomLinkProps = LinkProps & {
+  children: ReactNode;
+};
+
+/**
+ * A basic link component that extends react-aria-components Link with consistent styling.
+ * Provides accessible focus styles and maintains design system consistency.
+ */
+const CustomLink = ({ children, className, ...restProps }: CustomLinkProps) => {
+  return (
+    <Link
+      {...restProps}
+      className={cx(
+        className,
+        'cursor-pointer font-medium focus-visible:outline-focus-offset',
+      )}
+    >
+      {children}
+    </Link>
+  );
+};
+
+export { CustomLink as Link, type CustomLinkProps as LinkProps };