Skip to content

chore(docs): add component preview to card list #202

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

Open
coryrylan wants to merge 1 commit into
base: main
Choose a base branch
from
Open

chore(docs): add component preview to card list #202

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
2 changes: 1 addition & 1 deletion projects/core/src/dialog/dialog.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import styles from './dialog.css?inline';

/**
* @element nve-dialog
* @description Dialog is a component that appears above main content. A modal dialog displays critical information that requires user attention and interrupts user flow. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
* @description Dialog is a component that appears above main content. A modal dialog displays critical information that requires user attention and interrupts user flow.
* @documentation https://nvidia.github.io/elements/docs/elements/dialog/
* @since 0.6.0
* @entrypoint \@nvidia-elements/core/dialog
Expand Down
2 changes: 1 addition & 1 deletion projects/core/src/drawer/drawer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import styles from './drawer.css?inline';

/**
* @element nve-drawer
* @description Drawer are to display content that is out of context of the rest of the page (notifications, navigation, settings). Or use [Panel](./docs/elements/panel/) inline as its content couples with or closely relates to the content on the page (details, extra actions/options). [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
* @description Drawer are to display content that is out of context of the rest of the page (notifications, navigation, settings).

@coderabbitai coderabbitai Bot Jul 31, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Fix the drawer description grammar.

Drawer are is incorrect. Use a singular subject and a direct description.

As per coding guidelines, TypeScript JSDoc comments are linted by Vale and should follow the repository's technical writing style.

Proposed wording 
- * `@description` Drawer are to display content that is out of context of the rest of the page (notifications, navigation, settings).
+ * `@description` A drawer displays content separate from the rest of the page, such as notifications, navigation, or settings.
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
* @description Drawer are to display content that is out of context of the rest of the page (notifications, navigation, settings).
* `@description` A drawer displays content separate from the rest of the page, such as notifications, navigation, or settings.
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@projects/core/src/drawer/drawer.ts` at line 21, Update the JSDoc description
for the Drawer symbol to use grammatically correct singular wording and a direct
description of its purpose, preserving the existing examples of notifications,
navigation, and settings.

Source: Coding guidelines

* @documentation https://nvidia.github.io/elements/docs/elements/drawer/
* @since 0.16.0
* @entrypoint \@nvidia-elements/core/drawer
Expand Down
5 changes: 1 addition & 4 deletions projects/core/src/gauge/gauge.examples.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,7 @@ export default {
*/
export const Default = {
render: () => html`
<div nve-layout="row gap:sm">
<nve-gauge value="50">50%</nve-gauge>
<nve-gauge status="accent" value="66">66%</nve-gauge>
</div>
<nve-gauge status="accent" value="66">66%</nve-gauge>
`};

/**
Expand Down
2 changes: 1 addition & 1 deletion projects/core/src/notification/notification.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import styles from './notification.css?inline';

/**
* @element nve-notification
* @description Displays real time updates without interrupting the user's workflow to communicate an important message or status. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
* @description Displays real time updates without interrupting the user's workflow to communicate an important message or status.
Comment thread
coryrylan marked this conversation as resolved.
* @documentation https://nvidia.github.io/elements/docs/elements/notification/
* @since 0.6.0
* @entrypoint \@nvidia-elements/core/notification
Expand Down
2 changes: 1 addition & 1 deletion projects/core/src/toast/toast.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import styles from './toast.css?inline';

/**
* @element nve-toast
* @description A contextual popup that displays a status. Toasts are [triggered](https://w3c.github.io/aria/#tooltip) by clicking, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
* @description A contextual popup that displays a status. Toasts are [triggered](https://w3c.github.io/aria/#tooltip) by clicking, focusing, or tapping an element and cannot have interactive elements within them.
* @documentation https://nvidia.github.io/elements/docs/elements/toast/
* @since 0.6.0
* @entrypoint \@nvidia-elements/core/toast
Expand Down
2 changes: 1 addition & 1 deletion projects/core/src/tooltip/tooltip.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import styles from './tooltip.css?inline';

/**
* @element nve-tooltip
* @description A contextual popup that displays a plaintext description. Tooltips are [triggered](https://w3c.github.io/aria/#tooltip) by hovering, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
* @description A contextual popup that displays a plaintext description. Trigger tooltips by hovering, focusing, or tapping an element and cannot have interactive elements within them.
Comment thread
coderabbitai[bot] marked this conversation as resolved.
* @documentation https://nvidia.github.io/elements/docs/elements/tooltip/
* @since 0.6.0
* @entrypoint \@nvidia-elements/core/tooltip
Expand Down
2 changes: 1 addition & 1 deletion projects/markdown/src/markdown/markdown.examples.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const Default = {
render: () => html`
<nve-markdown>
<template>
# Default
## Markdown

This is a default markdown component in its initial state.

Expand Down
30 changes: 9 additions & 21 deletions projects/site/src/_11ty/layouts/common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,7 @@ export const renderDocsNav = data => /* html */ `
<nve-tree-node ${data.page.url.includes('/docs/design-md/') ? 'highlighted selected' : ''}><a href="/docs/design-md/">DESIGN.md</a></nve-tree-node>
</nve-tree-node>

<nve-tree-node ${data.page.url.includes('/docs/elements/') ? 'expanded' : ''} ${data.page.url === '/docs/elements/' ? 'highlighted selected' : ''}>
<nve-tree-node ${data.page.url.includes('/docs/elements/') || data.page.url.includes('/docs/monaco/') || data.page.url.includes('/docs/markdown/') || data.page.url.includes('/docs/code/') ? 'expanded' : ''} ${data.page.url === '/docs/elements/' ? 'highlighted selected' : ''}>

@coderabbitai coderabbitai Bot Aug 4, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

Add regression tests for the relocated navigation entries.

The current tests cover /docs/elements/ and /docs/design-md/, but not the new route branches. Add assertions for /docs/code/codeblock/, /docs/markdown/, /docs/markdown/styles/, and all five Monaco routes. Verify the Elements group expands and the expected entry is selected.

Also applies to: 234-234, 289-297

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@projects/site/src/_11ty/layouts/common.js` at line 222, Add regression
coverage for the navigation rendering logic around the nve-tree-node entries:
extend the existing tests to assert /docs/code/codeblock/, /docs/markdown/,
/docs/markdown/styles/, and each of the five Monaco routes. Verify every route
expands the Elements group where applicable and marks the expected navigation
entry as selected, while preserving the existing /docs/elements/ and
/docs/design-md/ assertions.

<a href="/docs/elements/">Elements</a>
<nve-tree-node ${data.page.url.includes('/docs/elements/accordion/') ? 'highlighted selected' : ''}><a href="/docs/elements/accordion/">Accordion</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/elements/alert/') ? 'highlighted selected' : ''}><a href="/docs/elements/alert/">Alert</a></nve-tree-node>
Expand All @@ -231,6 +231,7 @@ export const renderDocsNav = data => /* html */ `
<nve-tree-node ${data.page.url.includes('/docs/elements/card/') ? 'highlighted selected' : ''}><a href="/docs/elements/card/">Card</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/elements/chat-message/') ? 'highlighted selected' : ''}><a href="/docs/elements/chat-message/">Chat Message</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/elements/checkbox/') ? 'highlighted selected' : ''}><a href="/docs/elements/checkbox/">Checkbox</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/code/codeblock/') ? 'highlighted selected' : ''}><a href="/docs/code/codeblock/">Codeblock</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/elements/color/') ? 'highlighted selected' : ''}><a href="/docs/elements/color/">Color</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/elements/combobox/') ? 'highlighted selected' : ''}><a href="/docs/elements/combobox/">Combobox</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/elements/copy-button/') ? 'highlighted selected' : ''}><a href="/docs/elements/copy-button/">Copy Button</a></nve-tree-node>
Expand Down Expand Up @@ -285,8 +286,15 @@ export const renderDocsNav = data => /* html */ `
<nve-tree-node ${data.page.url.includes('/docs/elements/input/') ? 'highlighted selected' : ''}><a href="/docs/elements/input/">Input</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/elements/input-group/') ? 'highlighted selected' : ''}><a href="/docs/elements/input-group/">Input Group</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/elements/logo/') ? 'highlighted selected' : ''}><a href="/docs/elements/logo/">Logo</a></nve-tree-node>
<nve-tree-node ${data.page.url.endsWith('/docs/markdown/') ? 'highlighted selected' : ''}><a href="/docs/markdown/">Markdown</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/markdown/styles/') ? 'highlighted selected' : ''}><a href="/docs/markdown/styles/">Markdown CSS</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/elements/menu/') ? 'highlighted selected' : ''}><a href="/docs/elements/menu/">Menu</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/elements/month/') ? 'highlighted selected' : ''}><a href="/docs/elements/month/">Month</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/monaco/input/') ? 'highlighted selected' : ''}><a href="/docs/monaco/input/">Monaco Input</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/monaco/diff-input/') ? 'highlighted selected' : ''}><a href="/docs/monaco/diff-input/">Monaco Diff Input</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/monaco/editor/') ? 'highlighted selected' : ''}><a href="/docs/monaco/editor/">Monaco Editor</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/monaco/diff-editor/') ? 'highlighted selected' : ''}><a href="/docs/monaco/diff-editor/">Monaco Diff Editor</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/monaco/problems/') ? 'highlighted selected' : ''}><a href="/docs/monaco/problems/">Monaco Problems</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/elements/notification/') ? 'highlighted selected' : ''}><a href="/docs/elements/notification/">Notification</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/elements/page/') ? 'highlighted selected' : ''}><a href="/docs/elements/page/">Page</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/elements/page-header/') ? 'highlighted selected' : ''}><a href="/docs/elements/page-header/">Page Header</a></nve-tree-node>
Expand Down Expand Up @@ -342,26 +350,6 @@ export const renderDocsNav = data => /* html */ `
<nve-tree-node ${data.page.url.includes('/docs/patterns/trend/') ? 'highlighted selected' : ''}><a href="/docs/patterns/trend/">Trend</a></nve-tree-node>
</nve-tree-node>

<nve-tree-node ${data.page.url.includes('/docs/code/') ? 'expanded' : ''}>
<a href="/docs/code/codeblock/">Code</a>
<nve-tree-node ${data.page.url.includes('/docs/code/codeblock/') ? 'highlighted selected' : ''}><a href="/docs/code/codeblock/">Codeblock</a></nve-tree-node>
</nve-tree-node>

<nve-tree-node ${data.page.url.includes('/docs/monaco/') ? 'expanded' : ''}>
<a href="/docs/monaco/input/">Monaco</a>
<nve-tree-node ${data.page.url.includes('/docs/monaco/input/') ? 'highlighted selected' : ''}><a href="/docs/monaco/input/">Input</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/monaco/diff-input/') ? 'highlighted selected' : ''}><a href="/docs/monaco/diff-input/">Diff Input</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/monaco/editor/') ? 'highlighted selected' : ''}><a href="/docs/monaco/editor/">Editor</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/monaco/diff-editor/') ? 'highlighted selected' : ''}><a href="/docs/monaco/diff-editor/">Diff Editor</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/monaco/problems/') ? 'highlighted selected' : ''}><a href="/docs/monaco/problems/">Problems</a></nve-tree-node>
</nve-tree-node>

<nve-tree-node ${data.page.url.includes('/docs/markdown/') ? 'expanded' : ''}>
<a href="/docs/markdown/">Markdown</a>
<nve-tree-node ${data.page.url.endsWith('/docs/markdown/') ? 'highlighted selected' : ''}><a href="/docs/markdown/">Markdown</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/markdown/styles/') ? 'highlighted selected' : ''}><a href="/docs/markdown/styles/">CSS Utility</a></nve-tree-node>
</nve-tree-node>

<nve-tree-node ${data.page.url.includes('/docs/labs/') ? 'expanded' : ''} ${data.page.url === '/docs/labs/' ? 'highlighted' : ''}>
<a href="/docs/labs/">Labs</a>
<nve-tree-node ${data.page.url.includes('/docs/labs/layout/responsive/') ? 'expanded' : ''} ${data.page.url === '/docs/labs/layout/responsive/' ? 'highlighted' : ''}>
Expand Down
Loading