diff --git a/src/shared/ui/Link/ui/Link/Link.test.tsx b/src/shared/ui/Link/ui/Link/Link.test.tsx index 5fce10a..49db5b4 100644 --- a/src/shared/ui/Link/ui/Link/Link.test.tsx +++ b/src/shared/ui/Link/ui/Link/Link.test.tsx @@ -12,6 +12,7 @@ import { Link } from './Link'; const PRIMARY = 'underline underline-offset-2 hover:opacity-60 transition-opacity'; const SECONDARY = 'no-underline opacity-60 hover:opacity-100 sm:brutal-border-bottom transition-opacity'; +const TERTIARY = 'no-underline opacity-100 hover:opacity-60 sm:brutal-border-bottom transition-opacity'; describe('internal link', () => { it('renders an anchor element', () => { @@ -92,6 +93,18 @@ describe('variant', () => { } }); + it('tertiary applies reversed-hover classes', () => { + render( + + About + , + ); + const link = screen.getByRole('link', { name: 'About' }); + for (const cls of TERTIARY.split(' ')) { + expect(link).toHaveClass(cls); + } + }); + it('secondary does not apply underline', () => { render( diff --git a/src/shared/ui/Link/ui/Link/Link.tsx b/src/shared/ui/Link/ui/Link/Link.tsx index b1327fa..2e29983 100644 --- a/src/shared/ui/Link/ui/Link/Link.tsx +++ b/src/shared/ui/Link/ui/Link/Link.tsx @@ -2,7 +2,7 @@ import NextLink from 'next/link'; import type { ReactNode } from 'react'; import { cn } from '$shared/lib'; -export type LinkVariant = 'primary' | 'secondary'; +export type LinkVariant = 'primary' | 'secondary' | 'tertiary'; /** * Props for Link. @@ -24,6 +24,7 @@ interface Props { * Visual variant. * primary — text-decoration underline. * secondary — border-bottom at sm+, no underline on mobile (for icon+label links). + * tertiary — like secondary but reversed: bright by default, dims on hover. * @default 'primary' */ variant?: LinkVariant; @@ -37,6 +38,7 @@ interface Props { const VARIANTS = { primary: 'underline underline-offset-2 hover:opacity-60 transition-opacity', secondary: 'no-underline opacity-60 hover:opacity-100 sm:brutal-border-bottom transition-opacity', + tertiary: 'no-underline opacity-100 hover:opacity-60 sm:brutal-border-bottom transition-opacity', } as const satisfies Record; /** diff --git a/src/widgets/Footer/ui/Footer/Footer.tsx b/src/widgets/Footer/ui/Footer/Footer.tsx index 6f78a05..c32b790 100644 --- a/src/widgets/Footer/ui/Footer/Footer.tsx +++ b/src/widgets/Footer/ui/Footer/Footer.tsx @@ -23,7 +23,7 @@ export async function Footer() { {email && ( - + {email.icon && } {email.label} @@ -33,7 +33,7 @@ export async function Footer() { key={social.id} href={social.url} external - variant="secondary" + variant="tertiary" className="flex items-center gap-1.5 text-sm" > {social.icon && }