Skip to content

feat: ✨ Add navigation item badge template story with notification counts and status indicators [no ci] #3015

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
mariohamann wants to merge 1 commit into
base: feat/issue-workflow-mcp
Choose a base branch
from
Draft

feat: ✨ Add navigation item badge template story with notification counts and status indicators [no ci] #3015

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/navigation-item-badge-template.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@solid-design-system/docs': patch
---

Added a new template story showing `sd-navigation-item` combined with `sd-badge` for horizontal navigation with notification counts and status indicators.
54 changes: 54 additions & 0 deletions packages/docs/src/stories/templates/navigation-item-badge.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import '../../../../components/src/solid-components';
import { html } from 'lit-html';

export default {
tags: ['!dev', 'autodocs'],
title: 'Templates/Navigation Item Badge',
parameters: {
chromatic: { disableSnapshot: true },
design: {
type: 'figma',
url: 'https://www.figma.com/design/VTztxQ5pWG7ARg8hCX6PfR/Solid-DS-%E2%80%93-Component-Library?node-id=5072-26390'
}
}
};

/**
* Navigation items with badges aligned horizontally, showing notification counts and status indicators.
*/
export const NavigationItemWithBadge = {
name: 'Navigation Item with Badge',
render: () => html`
<nav aria-label="Main navigation" class="flex items-center gap-1">
<sd-navigation-item href="#"> Overview </sd-navigation-item>
<sd-navigation-item href="#" current>
<span class="inline-flex items-center gap-2">
Requests
<sd-badge role="status">
12
<span class="sr-only">open requests</span>
</sd-badge>
</span>
</sd-navigation-item>
<sd-navigation-item href="#">
<span class="inline-flex items-center gap-2">
Messages
<sd-badge variant="red" role="status">
3
<span class="sr-only">unread messages</span>
</sd-badge>
</span>
</sd-navigation-item>
<sd-navigation-item href="#">
<span class="inline-flex items-center gap-2">
Notifications
<sd-badge variant="green" role="status">
99+
<span class="sr-only">new notifications</span>
</sd-badge>
</span>
</sd-navigation-item>
<sd-navigation-item href="#"> Reports </sd-navigation-item>
</nav>
`
};
Loading