fix: create documentation for TextLink and adjust style

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
 
+# 27.2.0
+
+-   [Feat] Document `TextLink` component in Storybook and change default styling.
+
 # 27.1.0
 
 -   [Feat] Expose CSS variables for customizng the icon color of the `Banner` component system types.

package.json

@@ -6,7 +6,7 @@
         "email": "henning@doist.com",
         "url": "http://doist.com"
     },
-    "version": "27.1.0",
+    "version": "27.2.0",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {

src/text-link/text-link.module.css

@@ -1,7 +1,7 @@
 :root {
-    --reactist-text-link-idle-tint: rgb(36, 111, 224);
-    --reactist-text-link-hover-tint: var(--reactist-text-link-idle-tint);
-    --reactist-text-link-idle-decoration: none;
+    --reactist-text-link-idle-tint: var(--reactist-actionable-tertiary-idle-tint);
+    --reactist-text-link-hover-tint: var(--reactist-actionable-tertiary-hover-tint);
+    --reactist-text-link-idle-decoration: underline;
     --reactist-text-link-hover-decoration: underline;
 }
 

src/text-link/text-link.stories.mdx

@@ -0,0 +1,43 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
+import { Stack } from '../stack'
+import { TextLink } from './text-link'
+
+<Meta
+    title="Design system/TextLink"
+    component={TextLink}
+    parameters={{
+        badges: ['accessible'],
+    }}
+/>
+
+# TextLink
+
+A component used to create text-based hyperlinks.
+
+<Canvas>
+    <Story
+        name="Main demo"
+        parameters={{
+            docs: { source: { type: 'code' } },
+        }}
+    >
+        <Stack space="medium" align="start">
+            <TextLink href="https://www.doist.com/">regular</TextLink>
+            <TextLink href="https://www.doist.com/" openInNewTab={true}>
+                open in new tab
+            </TextLink>
+            <TextLink
+                as="button"
+                onClick={() => {
+                    alert('clicked')
+                }}
+            >
+                button link
+            </TextLink>
+        </Stack>
+    </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={TextLink} />

src/text-link/text-link.test.tsx

@@ -0,0 +1,65 @@
+import { render, screen } from '@testing-library/react'
+import * as React from 'react'
+import { TextLink } from './text-link'
+
+describe('TextLink', () => {
+    it('renders a link with the provided href', () => {
+        render(<TextLink href="https://example.com">Click me</TextLink>)
+
+        const link = screen.getByText('Click me')
+        expect(link).toHaveAttribute('href', 'https://example.com')
+    })
+
+    it('opens in new tab when openInNewTab is true', () => {
+        render(
+            <TextLink href="https://example.com" openInNewTab>
+                External link
+            </TextLink>,
+        )
+
+        const link = screen.getByText('External link')
+        expect(link).toHaveAttribute('target', '_blank')
+        expect(link).toHaveAttribute('rel', 'noopener noreferrer')
+    })
+
+    it('does not add target or rel attributes when openInNewTab is false', () => {
+        render(
+            <TextLink href="https://example.com" openInNewTab={false}>
+                Internal link
+            </TextLink>,
+        )
+
+        const link = screen.getByText('Internal link')
+        expect(link).not.toHaveAttribute('target')
+        expect(link).not.toHaveAttribute('rel')
+    })
+
+    it('can be rendered as a different element using the as prop', () => {
+        render(
+            <TextLink
+                as="button"
+                onClick={() => {
+                    // noop
+                }}
+            >
+                Button link
+            </TextLink>,
+        )
+
+        const button = screen.getByText('Button link')
+        expect(button.tagName).toBe('BUTTON')
+    })
+
+    it('applies custom className while preserving default styles', () => {
+        render(
+            <TextLink href="#" exceptionallySetClassName="custom-class">
+                Styled link
+            </TextLink>,
+        )
+
+        const link = screen.getByText('Styled link')
+        expect(link).toHaveClass('custom-class')
+        // Verify it still has the default container class
+        expect(link).toHaveClass('container')
+    })
+})