fix: ensure TextLink styles are applied to nested elements

Author: rmartins90

src/badge/badge.module.css

@@ -29,6 +29,12 @@
     background-color: var(--reactist-badge-fill);
     line-height: calc(var(--reactist-badge-font-size) + 3px);
     white-space: nowrap;
+    text-decoration: none;
+}
+
+.badge:hover {
+    color: var(--reactist-badge-tint);
+    text-decoration: none;
 }
 
 .badge-info {

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

@@ -14,7 +14,17 @@
     cursor: pointer;
 }
 
-.container:hover {
+.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);
 }

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

@@ -41,3 +41,36 @@ A component used to create text-based hyperlinks.
 ## Props
 
 <ArgsTable of={TextLink} />
+
+## Nested elements
+
+When using nested elements inside a `TextLink`, hover styles are properly applied to all children.
+
+<Canvas>
+    <Story
+        name="Nested elements"
+        parameters={{
+            docs: { source: { type: 'code' } },
+            chromatic: { disableSnapshot: false },
+        }}
+    >
+        <Stack space="medium" align="start">
+            <TextLink href="https://www.doist.com/">
+                <span>Link with nested span</span>
+            </TextLink>
+            <TextLink href="https://www.doist.com/">
+                <div>Link with nested div</div>
+            </TextLink>
+            <TextLink href="https://www.doist.com/">
+                Text with <strong>bold</strong> section
+            </TextLink>
+            <TextLink href="https://www.doist.com/">
+                Text with{' '}
+                <a href="https://www.doist.com" target="_blank">
+                    link
+                </a>{' '}
+                section
+            </TextLink>
+        </Stack>
+    </Story>
+</Canvas>