From b1746bbae0ff40dd9b592c36b282a33180b38c19 Mon Sep 17 00:00:00 2001 From: Rui Martins Date: Wed, 15 Jan 2025 16:14:43 +0000 Subject: [PATCH 1/4] fix: create documentation for TextLink and adjust style --- src/text-link/text-link.module.css | 6 ++--- src/text-link/text-link.stories.mdx | 35 +++++++++++++++++++++++++++++ 2 files changed, 38 insertions(+), 3 deletions(-) create mode 100644 src/text-link/text-link.stories.mdx diff --git a/src/text-link/text-link.module.css b/src/text-link/text-link.module.css index 4c4015bdd..edd854897 100644 --- a/src/text-link/text-link.module.css +++ b/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; } diff --git a/src/text-link/text-link.stories.mdx b/src/text-link/text-link.stories.mdx new file mode 100644 index 000000000..87f24f403 --- /dev/null +++ b/src/text-link/text-link.stories.mdx @@ -0,0 +1,35 @@ +import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' +import { Stack } from '../stack' +import { TextLink } from './text-link' + + + +# TextLink + +A component used to create text-based hyperlinks. + + + + + regular + + open in new tab + + + + + +## Props + + From a771e00972627010520d038e8fb07399bb81247c Mon Sep 17 00:00:00 2001 From: Rui Martins Date: Wed, 15 Jan 2025 16:37:45 +0000 Subject: [PATCH 2/4] test: add unit tests and additional story for as property --- src/text-link/text-link.stories.mdx | 8 ++++ src/text-link/text-link.test.tsx | 65 +++++++++++++++++++++++++++++ 2 files changed, 73 insertions(+) create mode 100644 src/text-link/text-link.test.tsx diff --git a/src/text-link/text-link.stories.mdx b/src/text-link/text-link.stories.mdx index 87f24f403..524d12a98 100644 --- a/src/text-link/text-link.stories.mdx +++ b/src/text-link/text-link.stories.mdx @@ -26,6 +26,14 @@ A component used to create text-based hyperlinks. open in new tab + { + alert('clicked') + }} + > + button link + diff --git a/src/text-link/text-link.test.tsx b/src/text-link/text-link.test.tsx new file mode 100644 index 000000000..2f4c90230 --- /dev/null +++ b/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(Click me) + + const link = screen.getByText('Click me') + expect(link).toHaveAttribute('href', 'https://example.com') + }) + + it('opens in new tab when openInNewTab is true', () => { + render( + + External link + , + ) + + 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( + + Internal link + , + ) + + 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( + { + // noop + }} + > + Button link + , + ) + + const button = screen.getByText('Button link') + expect(button.tagName).toBe('BUTTON') + }) + + it('applies custom className while preserving default styles', () => { + render( + + Styled link + , + ) + + const link = screen.getByText('Styled link') + expect(link).toHaveClass('custom-class') + // Verify it still has the default container class + expect(link).toHaveClass('container') + }) +}) From 712ebd432210dcc046502e64ea5af86fcbd9b8c0 Mon Sep 17 00:00:00 2001 From: Rui Martins Date: Wed, 15 Jan 2025 17:48:37 +0000 Subject: [PATCH 3/4] chore: update CHANGELOG --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 45e496f5b..2a33752c7 100644 --- a/CHANGELOG.md +++ b/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. From 893b0e5139d392326a7defbdb73f9243148118de Mon Sep 17 00:00:00 2001 From: Rui Martins Date: Wed, 15 Jan 2025 17:49:10 +0000 Subject: [PATCH 4/4] chore: bump version --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index fc5d21070..ab0c24f1f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@doist/reactist", - "version": "27.1.0", + "version": "27.2.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@doist/reactist", - "version": "27.1.0", + "version": "27.2.0", "hasInstallScript": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index d29bc3bb8..eaa3e4f24 100644 --- a/package.json +++ b/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": {