feat(text-link): text-link package

packages/components/text-link/.npmignore

@@ -0,0 +1,2 @@
+src
+**/*.stories.*

packages/components/text-link/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@spark-ui/text-link",
+  "version": "0.0.0",
+  "description": "TextLink is an accessible element for navigation.",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "@spark-ui",
+    "react",
+    "component",
+    "accessible",
+    "accessibility",
+    "wai-aria",
+    "aria",
+    "a11y",
+    "link"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "vite build"
+  },
+  "peerDependencies": {
+    "react": "^16.8 || ^17.0 || ^18.0",
+    "react-dom": "^16.8 || ^17.0 || ^18.0",
+    "tailwindcss": "^3.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:adevinta/spark.git",
+    "directory": "packages/components/text-link"
+  },
+  "bugs": {
+    "url": "https://github.com/adevinta/spark/issues"
+  },
+  "homepage": "https://sparkui.vercel.app",
+  "license": "MIT"
+}

packages/components/text-link/src/TextLink.doc.mdx

@@ -0,0 +1,58 @@
+import { Meta, Canvas } from '@storybook/addon-docs'
+import { ArgTypes } from '@storybook/blocks'
+
+import { TextLink } from '.'
+
+import * as stories from './TextLink.stories'
+
+<Meta of={stories} />
+
+# TextLink
+
+TextLink is an accessible element for navigation.
+
+## Install
+
+```sh
+npm install @spark-ui/text-link
+```
+
+## Import
+
+```tsx
+import { TextLink } from '@spark-ui/text-link'
+```
+
+## Props
+
+This component support [all HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes) supported by the `a` tag.
+
+<ArgTypes of={TextLink} />
+
+## Usage
+
+### Default
+
+<Canvas of={stories.Default} />
+
+### Sizes
+
+By default, the `TextLink` size adapts to the current font-size of your text.
+
+Simply use `Tailwindcss` to set a difference size if necessary.
+
+<Canvas of={stories.Sizes} />
+
+### Intents
+
+<Canvas of={stories.Intents} />
+
+## Advanced Usage
+
+### Icons
+
+You can use Spark’s `Icon` component inside of the `TextLink` to display an icon.
+
+This can be useful to showcase external links, download links, etc.
+
+<Canvas of={stories.Icons} />

packages/components/text-link/src/TextLink.stories.tsx

@@ -0,0 +1,102 @@
+import { Icon } from '@spark-ui/icon'
+import { Link as LinkSVG } from '@spark-ui/icons/dist/icons/Link'
+import { Meta, StoryFn } from '@storybook/react'
+
+import { TextLink, type TextLinkProps } from '.'
+
+const meta: Meta<typeof TextLink> = {
+  title: 'Experimental/TextLink',
+  component: TextLink,
+}
+
+export default meta
+
+export const Default: StoryFn = _args => {
+  return (
+    <p>
+      You should learn more about{' '}
+      <TextLink href="https://en.wikipedia.org/wiki/Kitten" target="_blank">
+        kitten
+      </TextLink>{' '}
+      and{' '}
+      <TextLink href="https://en.wikipedia.org/wiki/Puppy" target="_blank">
+        puppies
+      </TextLink>
+      .
+    </p>
+  )
+}
+
+export const Sizes: StoryFn = _args => {
+  return (
+    <div className="flex flex-col gap-md">
+      {['text-caption', 'text-body-1', 'text-headline-1'].map(textSize => {
+        return (
+          <p className={textSize}>
+            Have you head about{' '}
+            <TextLink href="/?path=/docs/getting-started--docs" target="_blank">
+              Spark
+            </TextLink>{' '}
+            ? It’s awesome .
+          </p>
+        )
+      })}
+      <p className="text-body-1">
+        Have you head about{' '}
+        <TextLink
+          href="/?path=/docs/getting-started--docs"
+          target="_blank"
+          className="text-display-1"
+        >
+          Spark
+        </TextLink>{' '}
+        ? It’s awesome .
+      </p>
+    </div>
+  )
+}
+
+const intents: TextLinkProps['intent'][] = [
+  'main',
+  'support',
+  'accent',
+  'basic',
+  'success',
+  'alert',
+  'danger',
+  'info',
+  'neutral',
+]
+
+export const Intents: StoryFn = _args => {
+  return (
+    <div className="flex flex-col gap-md">
+      {intents.map(intent => (
+        <p key={intent}>
+          {intent}{' '}
+          <TextLink intent={intent} href="https://en.wikipedia.org/wiki/Kitten" target="_blank">
+            link
+          </TextLink>
+          .
+        </p>
+      ))}
+    </div>
+  )
+}
+
+export const Icons: StoryFn = _args => {
+  return (
+    <div className="flex flex-col gap-md">
+      <p>
+        External{' '}
+        <TextLink href="https://en.wikipedia.org/wiki/Kitten" target="_blank">
+          link
+          <Icon>
+            <LinkSVG />
+          </Icon>
+        </TextLink>
+        .
+      </p>
+    </div>
+  )
+}

packages/components/text-link/src/TextLink.test.tsx

@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { TextLink } from './TextLink'
+
+const urls = {
+  kitten: 'https://en.wikipedia.org/wiki/Kitten',
+}
+
+describe('TextLink', () => {
+  it('should render', () => {
+    render(<TextLink href={urls.kitten}>Kitten</TextLink>)
+
+    const link = screen.getByRole('link', {
+      name: 'Kitten',
+    })
+
+    expect(link).toBeInTheDocument()
+    expect(link).toHaveAttribute('href', urls.kitten)
+  })
+})

packages/components/text-link/src/TextLink.tsx

@@ -0,0 +1,41 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import React, { forwardRef } from 'react'
+
+export type TextLinkProps = React.HTMLProps<HTMLAnchorElement> & StylesProps
+
+const textLinkStyles = cva(
+  [
+    'underline inline-flex gap-sm items-center font-bold',
+    'focus-visible:ring-2 focus-visible:ring-outline-high focus-visible:outline-none',
+  ],
+  {
+    variants: {
+      intent: {
+        main: 'text-main hover:text-main-hovered',
+        support: 'text-support hover:text-support-hovered',
+        accent: 'text-accent hover:text-accent-hovered',
+        basic: 'text-basic hover:text-basic-hovered',
+        success: 'text-success hover:text-success-hovered',
+        alert: 'text-alert hover:text-alert-hovered',
+        danger: 'text-error hover:text-error-hovered',
+        info: 'text-info hover:text-info-hovered',
+        neutral: 'text-neutral hover:text-neutral-hovered',
+      },
+    },
+    defaultVariants: {
+      intent: 'basic',
+    },
+  }
+)
+
+export type StylesProps = VariantProps<typeof textLinkStyles>
+
+export const TextLink = forwardRef<HTMLAnchorElement, TextLinkProps>(
+  ({ children, className, intent = 'basic', ...props }, ref) => {
+    return (
+      <a className={textLinkStyles({ className, intent })} ref={ref} {...props}>
+        {children}
+      </a>
+    )
+  }
+)

packages/components/text-link/src/index.ts

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

packages/components/text-link/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": ["src/**/*", "../../../global.d.ts"]
+}

packages/components/text-link/vite.config.ts

@@ -0,0 +1,6 @@
+import path from 'path'
+import { getComponentConfiguration } from '../../../config/index'
+
+const { name } = require(path.resolve(__dirname, 'package.json'))
+
+export default getComponentConfiguration(process.cwd(), name)