// Auto-generated by: pnpm test:stylesheets:update import { join } from 'node:path'; import { compileLessWithTokens } from '../../../scripts/testStylesheets/compileLessWithTokens'; import { DEFAULT_LESS_PRELUDES, DEFAULT_TOKEN_CSS_FILES } from '../../../scripts/testStylesheets/config'; describe('components/NestedNavigation/NestedNavigation.less stylesheet snapshot', () => { it('compiled CSS with tokens inlined', async () => { const css = await compileLessWithTokens(join(__dirname, 'NestedNavigation.less'), DEFAULT_TOKEN_CSS_FILES, { lessPreludes: DEFAULT_LESS_PRELUDES, }); expect(css).toMatchTokensInlineSnapshot(` .nestedNavigation { display: flex; flex-direction: column; min-width: 320px; background-color: oklch(1 0 none); } .nestedNavigationContent { overflow-y: auto; flex: 1; padding: 16px; outline: none; } .nestedNavigationHeader { display: flex; flex-direction: column; background-color: oklch(1 0 none); } .nestedNavigationHeader__row { display: flex; align-items: center; padding: 8px; } .nestedNavigationHeader__row--top { gap: 16px; } .nestedNavigationHeader__row--child { gap: 8px; } .nestedNavigationHeader__title { overflow: hidden; flex: 1; padding: 4px 0; text-align: left; text-overflow: ellipsis; white-space: nowrap; } .nestedNavigationHeader h1.nestedNavigationHeader__title, .nestedNavigationHeader h2.nestedNavigationHeader__title, .nestedNavigationHeader h3.nestedNavigationHeader__title, .nestedNavigationHeader h4.nestedNavigationHeader__title, .nestedNavigationHeader h5.nestedNavigationHeader__title, .nestedNavigationHeader h6.nestedNavigationHeader__title { margin: 0; } .nestedNavigationHeader__title--indented { padding-left: 8px; } .nestedNavigationItem { list-style: none; } .nestedNavigationItem > button { cursor: pointer; display: flex; align-items: center; width: 100%; padding: 4px 0; color: oklch(0 0 none); text-align: left; background: transparent; border: none; outline: none; } .nestedNavigationItem > button[data-focused]:not(:disabled) { background-color: oklch(0.8761 0 none); } .nestedNavigationItem > button:disabled { cursor: not-allowed; color: oklch(0.7252 0 none); } .nestedNavigationItem > button[data-focused]:not(:disabled) .nestedNavigationItem__chevron .icon--secondary::before { color: oklch(0 0 none); } .nestedNavigationItem > button:disabled .nestedNavigationItem__icon .icon--primary::before, .nestedNavigationItem > button:disabled .nestedNavigationItem__chevron .icon--secondary::before { color: oklch(0.7252 0 none); } .nestedNavigationItem__row { display: flex; flex: 1; align-items: center; justify-content: space-between; padding-left: 8px; } .nestedNavigationItem__labelGroup { display: flex; gap: 8px; align-items: center; } .nestedNavigationItem__icon { display: flex; } .nestedNavigationItem__label { overflow: hidden; font-size: 14px; font-weight: 400; line-height: 22px; text-overflow: ellipsis; letter-spacing: 0.16px; white-space: nowrap; } .nestedNavigationItem__chevron { display: flex; margin-left: 8px; } .nestedNavigationList { overflow-y: auto; flex: 1; margin: 0; padding: 8px; list-style: none; outline: none; } `); }); });