Skip to content

Commit dfd197f

Browse files
coryrylancoryrylan
committed
feat(code): iframe component
- Added the nve-iframe component to render isolated content with dynamic height and theme synchronization. - Implemented iframe styling and functionality to handle resizing and theme updates. Signed-off-by: Cory Rylan <crylan@nvidia.com>
1 parent 651abf3 commit dfd197f

17 files changed

Lines changed: 791 additions & 3 deletions

‎projects/code/DEVELOPMENT.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
| `pnpm run test` | Run unit tests |
99
| `pnpm run test:watch` | Run unit tests in watch mode |
1010
| `pnpm run test:axe` | Run accessibility tests |
11+
| `pnpm run test:ssr` | Run server-side rendering tests |
1112
| `pnpm run test:coverage` | Run unit tests with coverage |
1213
| `pnpm run test:lighthouse` | Run Lighthouse performance tests |
1314
| `pnpm run ci` | Run the full CI pipeline |

‎projects/code/package.json‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"release": {
55
"extends": "../../release.config.js"
66
},
7-
"description": "Code authoring related components. Providing syntax-highlighted code blocks with support for multiple programming languages.",
7+
"description": "NVIDIA Elements code authoring related components such as syntax-highlighted code blocks and an iframe isolation components.",
88
"keywords": [
99
"nvidia",
1010
"web-components",
@@ -169,6 +169,18 @@
169169
"./codeblock/languages/yaml.js": {
170170
"types": "./dist/codeblock/languages/yaml.d.ts",
171171
"default": "./dist/codeblock/languages/yaml.js"
172+
},
173+
"./iframe": {
174+
"types": "./dist/iframe/index.d.ts",
175+
"default": "./dist/iframe/index.js"
176+
},
177+
"./iframe/index.js": {
178+
"types": "./dist/iframe/index.d.ts",
179+
"default": "./dist/iframe/index.js"
180+
},
181+
"./iframe/define.js": {
182+
"types": "./dist/iframe/define.d.ts",
183+
"default": "./dist/iframe/define.js"
172184
}
173185
},
174186
"sideEffects": [
@@ -184,6 +196,7 @@
184196
"lint": "wireit",
185197
"test": "wireit",
186198
"test:axe": "wireit",
199+
"test:ssr": "wireit",
187200
"test:coverage": "wireit",
188201
"test:watch": "wireit",
189202
"test:lighthouse": "wireit"
@@ -233,6 +246,7 @@
233246
"lint",
234247
"publint",
235248
"test:axe",
249+
"test:ssr",
236250
"test:coverage"
237251
]
238252
},
@@ -368,6 +382,28 @@
368382
"NODE_ENV": "production"
369383
}
370384
},
385+
"test:ssr": {
386+
"command": "vitest run --config=vitest.ssr.ts",
387+
"files": [
388+
"dist/**/*.js",
389+
"src/**/*.test.ssr.ts",
390+
"tsconfig.json",
391+
"vitest.ssr.ts"
392+
],
393+
"output": [
394+
"coverage/ssr/**"
395+
],
396+
"dependencies": [
397+
"../internals/vite:ci",
398+
{
399+
"script": "build",
400+
"cascade": false
401+
}
402+
],
403+
"env": {
404+
"NODE_ENV": "production"
405+
}
406+
},
371407
"lint": {
372408
"dependencies": [
373409
"lint:eslint",

‎projects/code/src/bundle.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,7 @@ import '@nvidia-elements/code/codeblock/languages/typescript.js';
1717
import '@nvidia-elements/code/codeblock/languages/xml.js';
1818
import '@nvidia-elements/code/codeblock/languages/yaml.js';
1919
import '@nvidia-elements/code/codeblock/define.js';
20+
import '@nvidia-elements/code/iframe/define.js';
2021

2122
export * from '@nvidia-elements/code/codeblock';
23+
export * from '@nvidia-elements/code/iframe';

‎projects/code/src/iframe/define.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
4+
import { define } from '@nvidia-elements/core/internal';
5+
import { Iframe } from './iframe.js';
6+
7+
define(Iframe);
8+
9+
declare global {
10+
interface HTMLElementTagNameMap {
11+
'nve-iframe': Iframe;
12+
}
13+
}

‎projects/code/src/iframe/iframe.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */
2+
/* SPDX-License-Identifier: Apache-2.0 */
3+
4+
:host {
5+
--width: var(--_width, fit-content);
6+
--height: var(--_height, fit-content);
7+
--border: none;
8+
display: block;
9+
width: fit-content;
10+
height: fit-content;
11+
border: var(--border);
12+
}
13+
14+
iframe {
15+
width: var(--width);
16+
height: var(--height);
17+
border: 0;
18+
}

‎projects/code/src/iframe/iframe.examples.ts‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
4+
import { html } from 'lit';
5+
import '@nvidia-elements/code/iframe/define.js';
6+
7+
export default {
8+
title: 'Code/Iframe',
9+
component: 'nve-iframe'
10+
};
11+
12+
/**
13+
* @summary Supplies the iframe with Elements themes, utilities, fonts, and component registrations through its head template. Use this structure because iframe documents do not inherit resources from the parent document.
14+
*/
15+
export const Default = {
16+
render: () => html`
17+
<nve-iframe>
18+
<template slot="head">
19+
<title>Elements iframe example</title>
20+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nvidia-elements/themes/dist/bundles/index.css" />
21+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nvidia-elements/themes/dist/fonts/inter.css" />
22+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nvidia-elements/styles/dist/bundles/index.css" />
23+
<script type="module" src="https://cdn.jsdelivr.net/npm/@nvidia-elements/core/dist/bundles/index.min.js"></script>
24+
</template>
25+
<template>
26+
<nve-alert status="success">isolated iframe content</nve-alert>
27+
</template>
28+
</nve-iframe>
29+
`
30+
};
31+
32+
/**
33+
* @summary Synchronizes the iframe height with expandable content so the host layout avoids empty space or internal scrollbars. Use for previews whose intrinsic height changes after interaction.
34+
* @tags test-case
35+
*/
36+
export const DynamicHeight = {
37+
render: () => html`
38+
<nve-iframe style="--border: 1px solid red">
39+
<template slot="head">
40+
<title>Dynamic iframe height</title>
41+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nvidia-elements/themes/dist/bundles/index.css" />
42+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nvidia-elements/themes/dist/fonts/inter.css" />
43+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nvidia-elements/styles/dist/bundles/index.css" />
44+
<script type="module" src="https://cdn.jsdelivr.net/npm/@nvidia-elements/core/dist/bundles/index.min.js"></script>
45+
</template>
46+
<template>
47+
<nve-accordion behavior-expand>
48+
<nve-accordion-header>
49+
<h2 nve-text="heading xs medium" slot="prefix">Dynamic height in iframe</h2>
50+
</nve-accordion-header>
51+
<nve-accordion-content>
52+
The iframe expands when this content opens and contracts when it closes.
53+
</nve-accordion-content>
54+
</nve-accordion>
55+
</template>
56+
</nve-iframe>
57+
`
58+
};
59+
60+
/**
61+
* @summary Overrides intrinsic iframe dimensions with `--width` and `--height` to create a stable preview viewport. Use when you need to inspect embedded content at a fixed size regardless of its rendered bounds.
62+
* @tags test-case
63+
*/
64+
export const FixedSize = {
65+
render: () => html`
66+
<nve-iframe style="--height: 256px; --width: 256px; --border: 1px solid red">
67+
<template><p style="height: 128px; width: 128px; margin: 1px; outline: 1px solid yellow;">override iframe size</p></template>
68+
</nve-iframe>
69+
`
70+
};
71+
72+
/**
73+
* @summary The iframe browsing-context boundary clips popovers at its viewport and prevents them from escaping. Keep overlays inside the frame, or render them outside the iframe when they must overlap surrounding content.
74+
* @tags test-case
75+
*/
76+
export const OverflowClip = {
77+
render: () => html`
78+
<nve-iframe style="--height: 150px; --border: 1px solid red">
79+
<template slot="head">
80+
<title>Clipped iframe popover</title>
81+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nvidia-elements/themes/dist/bundles/index.css" />
82+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nvidia-elements/themes/dist/fonts/inter.css" />
83+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nvidia-elements/styles/dist/bundles/index.css" />
84+
<script type="module" src="https://cdn.jsdelivr.net/npm/@nvidia-elements/core/dist/bundles/index.min.js"></script>
85+
</template>
86+
<template>
87+
<div nve-layout="pad:md">
88+
<nve-dropdown id="dropdown">Popovers <strong>are clipped</strong> by the iframe.</nve-dropdown>
89+
<nve-button popovertarget="dropdown">Open popover</nve-button>
90+
</div>
91+
</template>
92+
</nve-iframe>
93+
`
94+
};
95+
96+
/**
97+
* @summary Regenerates the iframe document when its source template changes. Use for live previews or generated output that must stay synchronized with edits made in the parent document.
98+
* @tags test-case
99+
*/
100+
export const DynamicallyUpdatedContent = {
101+
render: () => html`
102+
<nve-iframe id="property-example">
103+
<template>
104+
<p nve-text="body">Initial iframe content.</p>
105+
</template>
106+
</nve-iframe>
107+
<script type="module">
108+
document.querySelector('#property-example template').innerHTML =
109+
'<p nve-text="body">This template was dynamically updated.</p>';
110+
</script>
111+
`
112+
};

‎projects/code/src/iframe/iframe.test.axe.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
4+
import { html } from 'lit';
5+
import { describe, expect, it, beforeEach, afterEach } from 'vitest';
6+
import { createFixture, elementIsStable, removeFixture } from '@internals/testing';
7+
import { runAxe } from '@internals/testing/axe';
8+
import { Iframe } from '@nvidia-elements/code/iframe';
9+
import '@nvidia-elements/code/iframe/define.js';
10+
11+
describe(Iframe.metadata.tag, () => {
12+
let fixture: HTMLElement;
13+
let element: Iframe;
14+
15+
beforeEach(async () => {
16+
fixture = await createFixture(html`<nve-iframe aria-label="iframe test"></nve-iframe>`);
17+
element = fixture.querySelector(Iframe.metadata.tag);
18+
await elementIsStable(element);
19+
});
20+
21+
afterEach(() => {
22+
removeFixture(fixture);
23+
});
24+
25+
it('should pass axe check', async () => {
26+
const results = await runAxe([Iframe.metadata.tag]);
27+
expect(results.violations.length).toBe(0);
28+
});
29+
});

‎projects/code/src/iframe/iframe.test.lighthouse.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
4+
import { expect, test, describe } from 'vitest';
5+
import { lighthouseRunner } from '@internals/vite';
6+
7+
describe('iframe lighthouse report', () => {
8+
test('iframe should meet lighthouse benchmarks', async () => {
9+
const report = await lighthouseRunner.getReport('nve-iframe', /* html */`
10+
<nve-iframe></nve-iframe>
11+
<script type="module">
12+
import '@nvidia-elements/code/iframe/define.js';
13+
</script>
14+
`);
15+
16+
expect(report.scores.performance).toBe(100);
17+
expect(report.scores.accessibility).toBe(100);
18+
expect(report.scores.bestPractices).toBe(100);
19+
expect(report.payload.javascript.kb).toBeLessThan(10);
20+
});
21+
});

‎projects/code/src/iframe/iframe.test.ssr.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
4+
import { html } from 'lit';
5+
import { describe, expect, it } from 'vitest';
6+
import { ssrRunner } from '@internals/vite';
7+
import { Iframe } from '@nvidia-elements/code/iframe';
8+
import '@nvidia-elements/code/iframe/define.js';
9+
10+
describe(Iframe.metadata.tag, () => {
11+
it('should pass baseline ssr check', async () => {
12+
const result = await ssrRunner.render(html`
13+
<nve-iframe>
14+
<template slot="head"><title>Iframe SSR test</title></template>
15+
<template><p nve-text="body">Iframe SSR content</p></template>
16+
</nve-iframe>
17+
`);
18+
19+
expect(result.includes('shadowroot="open"')).toBe(true);
20+
expect(result.includes('nve-iframe')).toBe(true);
21+
expect(result.includes('sandbox="allow-scripts"')).toBe(true);
22+
expect(result.includes('allow-same-origin')).toBe(false);
23+
});
24+
});

0 commit comments

Comments
 (0)