add default link color to Timeline.Item text

primer · Feb 7, 2024 · 14dacba · 14dacba
1 parent d00cf4e
commit 14dacba
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 0 deletions.
diff --git a/.changeset/giant-experts-give.md b/.changeset/giant-experts-give.md
@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Add default inline link colors to Timeline.Item
diff --git a/packages/react/src/Timeline/Timeline.features.stories.tsx b/packages/react/src/Timeline/Timeline.features.stories.tsx
@@ -42,6 +42,22 @@ export const WithShorterText: StoryFn<typeof Timeline> = () => {
   )
 }
 
+export const WithLinks: StoryFn<typeof Timeline> = () => {
+  return (
+    <Timeline>
+      <Timeline.Item>
+        <em>GitHub Codespaces</em> offers a <a href="/">complete dev environment</a> in seconds.
+      </Timeline.Item>
+      <Timeline.Item>
+        <em>GitHub Copilot</em> is your AI pair programmer that empowers you.
+      </Timeline.Item>
+      <Timeline.Item>
+        <em>GitHub Actions</em> automates your build, test, and deployment workflows.
+      </Timeline.Item>
+    </Timeline>
+  )
+}
+
 export const WithLongerText: StoryFn<typeof Timeline> = () => {
   return (
     <Timeline>

diff --git a/packages/react/src/Timeline/Timeline.module.css b/packages/react/src/Timeline/Timeline.module.css
@@ -53,3 +53,26 @@
   font-style: normal;
   font-weight: 500; /* TODO: update with token when available */
 }
+
+.Timeline__item a {
+  color: var(--brand-InlineLink-color-rest);
+  position: relative;
+  text-decoration: underline;
+  text-decoration-color: var(--brand-InlineLink-color-rest);
+  text-decoration-thickness: var(--brand-borderWidth-thin);
+  text-underline-position: under;
+  transition: var(--brand-InlineLink-transition-timing) text-decoration;
+}
+
+.Timeline__item a:hover {
+  text-decoration-thickness: var(--brand-borderWidth-thick);
+}
+
+.Timeline__item a {
+  font-weight: inherit;
+  color: var(--brand-InlineLink-color-rest);
+}
+
+.Timeline__item a:active {
+  color: var(--brand-InlineLink-color-pressed);
+}
diff --git a/packages/react/src/Timeline/Timeline.visual.spec.ts b/packages/react/src/Timeline/Timeline.visual.spec.ts
@@ -25,6 +25,15 @@ test.describe('Visual Comparison: Timeline', () => {
     expect(await page.screenshot()).toMatchSnapshot()
   })
 
+  test('Timeline / With Links', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-timeline-features--with-links&viewMode=story',
+    )
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot()).toMatchSnapshot()
+  })
+
   test('Timeline / With Longer Text', async ({page}) => {
     await page.goto(
       'http://localhost:6006/iframe.html?args=&id=components-timeline-features--with-longer-text&viewMode=story',

diff --git a/...al.spec.ts-snapshots/Visual-Comparison-Timeline-Timeline-With-Links-1-linux.png b/...al.spec.ts-snapshots/Visual-Comparison-Timeline-Timeline-With-Links-1-linux.png