feat(TextLink): Add color and underline styling options (#897)

* feat(TextLink): Add color and underline styling options

- Introduce color prop with 'default' and 'inherit' variants
- Add underline prop to control text decoration
- Update CSS module with new styling classes
- Extend stories and tests to cover new styling options

* refactor(TextLink): Improve CSS styling for hover and child elements

- Update CSS selectors to apply styles to child elements
- Simplify hover state styling for color and text decoration
- Ensure consistent styling across different color and underline variants

* test(TextLink): Enable Chromatic snapshots for stories

Author: rmartins90

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

@@ -9,26 +9,9 @@
     font-size: inherit;
     font-weight: inherit;
     font-family: inherit;
-    text-decoration: var(--reactist-text-link-idle-decoration);
-    color: var(--reactist-text-link-idle-tint);
     cursor: pointer;
 }
 
-.container > * {
-    text-decoration: var(--reactist-text-link-idle-decoration);
-    color: var(--reactist-text-link-idle-tint);
-}
-
-/**
- * We need to target the child elements to ensure that styles are
- * applied to the text independently of the DOM elements hierarchy.
- */
-.container:hover,
-.container:hover > * {
-    text-decoration: var(--reactist-text-link-hover-decoration);
-    color: var(--reactist-text-link-hover-tint);
-}
-
 .container svg {
     display: inline-block;
     width: 1em;
@@ -39,3 +22,45 @@
     fill: currentColor;
     padding: 0 6px;
 }
+
+/* Color variants */
+.default,
+.default * {
+    color: var(--reactist-text-link-idle-tint);
+}
+
+.default:hover,
+.default:hover * {
+    color: var(--reactist-text-link-hover-tint);
+}
+
+.inherit,
+.inherit * {
+    color: inherit;
+}
+
+.inherit:hover,
+.inherit:hover * {
+    color: var(--reactist-text-link-hover-tint);
+}
+
+/* Underline variants */
+.underline,
+.underline * {
+    text-decoration: var(--reactist-text-link-idle-decoration);
+}
+
+.underline:hover,
+.underline:hover * {
+    text-decoration: var(--reactist-text-link-hover-decoration);
+}
+
+.no-underline,
+.no-underline * {
+    text-decoration: none;
+}
+
+.no-underline:hover,
+.no-underline:hover * {
+    text-decoration: var(--reactist-text-link-hover-decoration);
+}

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

@@ -18,7 +18,7 @@ A component used to create text-based hyperlinks.
     <Story
         name="Main demo"
         parameters={{
-            docs: { source: { type: 'code' } },
+            chromatic: { disableSnapshot: false },
         }}
     >
         <Stack space="medium" align="start">
@@ -50,7 +50,6 @@ When using nested elements inside a `TextLink`, hover styles are properly applie
     <Story
         name="Nested elements"
         parameters={{
-            docs: { source: { type: 'code' } },
             chromatic: { disableSnapshot: false },
         }}
     >
@@ -74,3 +73,27 @@ When using nested elements inside a `TextLink`, hover styles are properly applie
         </Stack>
     </Story>
 </Canvas>
+
+## Style
+
+The `color` prop can be used to change the color of the link. The default color sets the link to color defined in `--reactist-text-link-idle-tint` and hover to `--reactist-text-link-hover-tint`. The `color` prop allows to change it to `inherit`.
+
+The `underline` prop can be used to change the underline style of the link. The default is `true`.
+
+<Canvas>
+    <Story
+        name="Colors"
+        parameters={{
+            chromatic: { disableSnapshot: false },
+        }}
+    >
+        <Stack space="medium" align="start">
+            <TextLink href="https://www.doist.com/" color="inherit">
+                inherit color
+            </TextLink>
+            <TextLink href="https://www.doist.com/" underline={false}>
+                no underline
+            </TextLink>
+        </Stack>
+    </Story>
+</Canvas>

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

@@ -62,4 +62,56 @@ describe('TextLink', () => {
         // Verify it still has the default container class
         expect(link).toHaveClass('container')
     })
+
+    it('applies default color class when no color prop is provided', () => {
+        render(<TextLink href="#">Default color</TextLink>)
+
+        const link = screen.getByText('Default color')
+        expect(link).toHaveClass('default')
+    })
+
+    it('applies inherit color class when color prop is set to inherit', () => {
+        render(
+            <TextLink href="#" color="inherit">
+                Inherit color
+            </TextLink>,
+        )
+
+        const link = screen.getByText('Inherit color')
+        expect(link).toHaveClass('inherit')
+    })
+
+    it('applies underline class by default', () => {
+        render(<TextLink href="#">Underlined link</TextLink>)
+
+        const link = screen.getByText('Underlined link')
+        expect(link).toHaveClass('underline')
+    })
+
+    it('applies no-underline class when underline prop is false', () => {
+        render(
+            <TextLink href="#" underline={false}>
+                No underline
+            </TextLink>,
+        )
+
+        const link = screen.getByText('No underline')
+        expect(link).toHaveClass('no-underline')
+    })
+
+    it('combines multiple classes correctly', () => {
+        render(
+            <TextLink
+                href="#"
+                color="inherit"
+                underline={false}
+                exceptionallySetClassName="custom-class"
+            >
+                Combined classes
+            </TextLink>,
+        )
+
+        const link = screen.getByText('Combined classes')
+        expect(link).toHaveClass('container', 'inherit', 'no-underline', 'custom-class')
+    })
 })

src/text-link/text-link.tsx

@@ -4,18 +4,35 @@ import { polymorphicComponent } from '../utils/polymorphism'
 import styles from './text-link.module.css'
 import type { OpenInNewTab } from '../utils/common-types'
 
-type TextLinkProps = OpenInNewTab
+type TextLinkColors = 'default' | 'inherit'
+
+type TextLinkProps = OpenInNewTab & {
+    color?: TextLinkColors
+    underline?: boolean
+}
 
 const TextLink = polymorphicComponent<'a', TextLinkProps>(function TextLink(
-    { as = 'a', openInNewTab = false, exceptionallySetClassName, ...props },
+    {
+        as = 'a',
+        openInNewTab = false,
+        exceptionallySetClassName,
+        color = 'default',
+        underline = true,
+        ...props
+    },
     ref,
 ) {
     return (
         <Box
             {...props}
             as={as}
             display="inline"
-            className={[exceptionallySetClassName, styles.container]}
+            className={[
+                exceptionallySetClassName,
+                styles.container,
+                styles[color],
+                underline ? styles.underline : styles['no-underline'],
+            ]}
             ref={ref}
             target={openInNewTab ? '_blank' : undefined}
             rel={openInNewTab ? 'noopener noreferrer' : undefined}