docs(ui): add stories for Link

[cylewaitforit]

🔗 Linked issue

Closes: #1731

🧭 Context

Adds stories for the Link component in the storybook.

📚 Description

• Created Link.stories.ts file

Note

One tricky thing I ran into with this one is that for the "WithIcon" story I had to pick an Icon that was already for sure bundled by unocss in the build. Otherwise Storybook wasn't displaying the icon. (Was trying to use i-lucide:scale but switched to i-lucide:check instead)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 28, 2026 2:17am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 28, 2026 2:17am
npmx-lunaria	Ignored		Feb 28, 2026 2:17am

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR extends the Link component API by adding five new public properties to app/components/Link/Base.vue: block (boolean), ariaKeyshortcuts (string), classicon (IconClass), to (NuxtLinkProps['to']), and size ('small' | 'medium'). In parallel, a comprehensive Storybook documentation suite is introduced in app/components/Link/Link.stories.ts, containing 14 story variations that demonstrate the component's usage patterns across external links, anchor links, icons, disabled states, button variants, sizing options, and keyboard shortcut integration.

Possibly related PRs

• refactor: remove unnecessary prop from links #1247: Overlapping modifications to app/components/Link/Base.vue including block prop and icon/size property handling
• refactor: replace links and buttons for compare and code page #1243: Direct code-level modifications to app/components/Link/Base.vue with additions of ariaKeyshortcuts, classicon, to, and size properties

Suggested reviewers

• alexdln
• danielroe

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, explaining the addition of Link.stories.ts and Storybook stories for the Link component.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

app/components/Link/Link.stories.ts (1)

106-132: Consider adding a medium-sized button to the Snapshot for complete size coverage.

The Snapshot story is excellent for visual regression testing. However, it includes only the small size variant (line 125). Consider adding a size="medium" example alongside the small button to ensure both sizes are captured in snapshot tests.

🔧 Suggested enhancement

         <div style="display: flex; gap: 1rem;">
           <LinkBase to="/" variant="button-primary" size="small">Small Button</LinkBase>
+          <LinkBase to="/" variant="button-primary" size="medium">Medium Button</LinkBase>
         </div>

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 85ac3d7 and 3449fd2.

📒 Files selected for processing (2)

• app/components/Link/Base.vue
• app/components/Link/Link.stories.ts

[sacrosanctic]

This would be a good time to discuss how to structure stories for UI Library Components aka atomic components. I've left Input.stories.ts and Button.stories.ts in the original PR as a reference.

I prefer Input.stories.ts, where the first story showcases the variations and the subsequent stories are for tests

[cylewaitforit]

This would be a good time to discuss how to structure stories for UI Library Components aka atomic components. I've left Input.stories.ts and Button.stories.ts in the original PR as a reference.

I prefer Input.stories.ts, where the first story showcases the variations and the subsequent stories are for tests

@sacrosanctic

Great points.

I think when we are able to use autodocs the docs page becomes a sort of showcase. (Obviously there’s the option of using manual doc pages for now but I think those are a lot to manage.)

In my experience having the default/primary component usage as the first story makes the autodoc organization flow well.

That said, I believe for reducing the number of regression test in chromatic I have seen it suggested to only run those test on a combined story like those. So I think we will still find value in a snapshot or showcase story even after we can use autodocs.