Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lukebennett88/luke-ui. luke-ui.pages.dev
Something went wrong. Try again.
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149import { Stack } from '@luke-ui/react/stack';import { vars } from '@luke-ui/react/theme';import { afterEach, expect, test } from 'vite-plus/test';import { page } from 'vite-plus/test/context';import { breakpoints } from '../../theme/breakpoints.js';import { render, visualAppearances } from '../test-utils/render.js';import { captureVisualAppearance } from '../test-utils/visual.js';
afterEach(async () => { await page.viewport(1024, 800);});
test('flows children on the block axis with no gap by default', () => { const { locator } = render( <Stack data-testid="stack"> <span style={{ blockSize: '1rem' }} /> <span style={{ blockSize: '1rem' }} /> </Stack>, ); const element = locator.getByTestId('stack').element(); if (!(element instanceof HTMLElement)) throw new Error('Expected Stack element.');
expect(getComputedStyle(element).display).toBe('flex'); expect(getComputedStyle(element).flexDirection).toBe('column'); expect(getComputedStyle(element).alignItems).toBe('stretch'); const [first, second] = element.children; if (!(first instanceof HTMLElement) || !(second instanceof HTMLElement)) { throw new Error('Expected Stack children.'); }
expect(second.getBoundingClientRect().top - first.getBoundingClientRect().bottom).toBe(0);});
test('keeps the block axis under RTL', () => { const { locator } = render( <div dir="rtl" style={{ blockSize: '6rem' }}> <Stack data-testid="stack-rtl" gap="sp8"> <span style={{ blockSize: '1rem' }} /> <span style={{ blockSize: '1rem' }} /> </Stack> </div>, ); const rtl = locator.getByTestId('stack-rtl').element(); if (!(rtl instanceof HTMLElement)) throw new Error('Expected Stack element.');
expect(getComputedStyle(rtl).flexDirection).toBe('column');
const [rtlFirst, rtlSecond] = rtl.children; if (!(rtlFirst instanceof HTMLElement) || !(rtlSecond instanceof HTMLElement)) { throw new Error('Expected Stack children.'); }
expect(rtlSecond.getBoundingClientRect().top).toBeGreaterThan( rtlFirst.getBoundingClientRect().top, );});
test('applies a responsive gap from its required initial value', async () => { await page.viewport(breakpoints.bp640, 800); const { locator } = render( <Stack data-testid="stack" gap={{ initial: '0', bp768: 'sp8' }}> <span style={{ blockSize: '1rem' }} /> <span style={{ blockSize: '1rem' }} /> </Stack>, ); const element = locator.getByTestId('stack').element(); if (!(element instanceof HTMLElement)) throw new Error('Expected Stack element.'); const [first, second] = element.children; if (!(first instanceof HTMLElement) || !(second instanceof HTMLElement)) { throw new Error('Expected Stack children.'); }
expect(second.getBoundingClientRect().top - first.getBoundingClientRect().bottom).toBe(0);
await page.viewport(breakpoints.bp768, 800); expect(second.getBoundingClientRect().top).toBeGreaterThan(first.getBoundingClientRect().bottom);});
const itemStyle = { backgroundColor: vars.color.surface.floating, borderRadius: vars.radius.detail, color: vars.color.text.primary, paddingBlock: vars.space.sp8, paddingInline: vars.space.sp12,} as const;
test('kitchen sink', { tags: ['visual'] }, async () => { for (const appearance of visualAppearances) { const { locator: scene } = render( <div style={{ display: 'flex', flexDirection: 'column', gap: vars.space.sp16 }}> <Stack gap="sp12" style={{ backgroundColor: vars.color.surface.recessed, borderRadius: vars.radius.surface, color: vars.color.text.primary, padding: vars.space.sp16, }} > <span style={itemStyle}>Block axis</span> <span style={itemStyle}>Required gap</span> </Stack> <Stack alignItems="center" gap="sp8" style={{ backgroundColor: vars.color.surface.recessed, borderRadius: vars.radius.surface, color: vars.color.text.primary, padding: vars.space.sp16, }} > <span style={itemStyle}>Aligned</span> <span style={itemStyle}>Items</span> </Stack> <Stack elementType="section" gap="0" style={{ backgroundColor: vars.color.surface.recessed, borderRadius: vars.radius.surface, color: vars.color.text.primary, padding: vars.space.sp16, }} > <span style={itemStyle}>Touching</span> <span style={itemStyle}>Items</span> </Stack> <div dir="rtl"> <Stack gap="sp8" style={{ backgroundColor: vars.color.surface.recessed, borderRadius: vars.radius.surface, color: vars.color.text.primary, padding: vars.space.sp16, }} > <span style={itemStyle}>First</span> <span style={itemStyle}>Second</span> </Stack> </div> </div>, { appearance }, ); await captureVisualAppearance(scene, 'stack/kitchen-sink', appearance); }});