@orangesk/orange-design-system 2.0.0-alpha.2 → 2.0.0-alpha.3

package/build/utilities/horizontal-scroll.txt

@@ -1,26 +0,0 @@
-1:"$Sreact.fragment"
-2:I[3640,["7177","static/chunks/app/layout-41aa6f28da614a69.js"],"default"]
-3:I[5085,["7177","static/chunks/app/layout-41aa6f28da614a69.js"],"SpritePathProvider"]
-4:I[7555,[],""]
-5:I[1295,[],""]
-6:I[9665,[],"OutletBoundary"]
-9:I[4911,[],"AsyncMetadataOutlet"]
-b:I[9665,[],"ViewportBoundary"]
-d:I[9665,[],"MetadataBoundary"]
-f:I[6614,[],""]
-:HL["/_next/static/media/671791babd225be4-s.p.woff2","font",{"crossOrigin":"","type":"font/woff2"}]
-:HL["/_next/static/media/c62d990acddde5f0-s.p.woff2","font",{"crossOrigin":"","type":"font/woff2"}]
-:HL["/_next/static/media/dfdbb1c4973e0bd7-s.p.woff2","font",{"crossOrigin":"","type":"font/woff2"}]
-:HL["/_next/static/css/2cb6b1436172662a.css","style"]
-:HL["/_next/static/css/ee49dfd49ae395ac.css","style"]
-:HL["/_next/static/css/57b0c84bbf7d7098.css","style"]
-:HL["/_next/static/css/ac1d2e9b77b16926.css","style"]
-0:{"P":null,"b":"BGy4QLZfZPwswIZT7YGE2","p":"","c":["","utilities","horizontal-scroll"],"i":false,"f":[[["",{"children":["utilities",{"children":["horizontal-scroll",{"children":["__PAGE__",{}]}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/2cb6b1436172662a.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/ee49dfd49ae395ac.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","className":"__className_df92c2","children":["$","body",null,{"children":[["$","$L2",null,{}],["$","div",null,{"id":"root","children":["$","$L3",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]}]}],["$","div",null,{"id":"root-modals"}],["$","div",null,{"id":"root-dropdowns"}],["$","div",null,{"id":"root-tooltips"}]]}]}]]}],{"children":["utilities",["$","$1","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["horizontal-scroll",["$","$1","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":[[["$","div",null,{"className":"section","children":["$","div",null,{"className":"container","ref":"$undefined","children":["$","div",null,{"className":"grid horizontal-scroll","children":[["$","div",null,{"className":"grid__col--5 mb-small","children":["$","code",null,{"children":"1"}]}],["$","div",null,{"className":"grid__col--5 mb-small","children":["$","code",null,{"children":"2"}]}],["$","div",null,{"className":"grid__col--5 mb-small","children":["$","code",null,{"children":"3"}]}],["$","div",null,{"className":"grid__col--5 mb-small","children":["$","code",null,{"children":"4"}]}],["$","div",null,{"className":"grid__col--5 mb-small","children":["$","code",null,{"children":"5"}]}],["$","div",null,{"className":"grid__col--5 mb-small","children":["$","code",null,{"children":"6"}]}],["$","div",null,{"className":"grid__col--5 mb-small","children":["$","code",null,{"children":"7"}]}],["$","div",null,{"className":"grid__col--5 mb-small","children":["$","code",null,{"children":"8"}]}],["$","div",null,{"className":"grid__col--5 mb-small","children":["$","code",null,{"children":"9"}]}],["$","div",null,{"className":"grid__col--5 mb-small","children":["$","code",null,{"children":"10"}]}]]}]}]}],"\n",["$","div",null,{"className":"section","children":["$","div",null,{"className":"container","ref":"$undefined","children":["$","div",null,{"className":"bar horizontal-scroll--md horizontal-scroll--xl-disable horizontal-scroll--xxl","style":{"width":300},"children":[["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"1"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"2"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"3"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"4"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"5"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"6"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"7"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"8"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"9"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"10"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"11"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"12"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"13"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"14"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"15"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"16"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"17"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"18"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"19"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"20"}]}]]}]}]}],"\n",["$","div",null,{"className":"section bg-black","children":["$","div",null,{"className":"container","ref":"$undefined","children":["$","div",null,{"className":"grid horizontal-scroll","children":[["$","div",null,{"className":"grid__col--5 mb-small","children":["$","code",null,{"children":"1"}]}],["$","div",null,{"className":"grid__col--5 mb-small","children":["$","code",null,{"children":"2"}]}],["$","div",null,{"className":"grid__col--5 mb-small","children":["$","code",null,{"children":"3"}]}],["$","div",null,{"className":"grid__col--5 mb-small","children":["$","code",null,{"children":"4"}]}],["$","div",null,{"className":"grid__col--5 mb-small","children":["$","code",null,{"children":"5"}]}],["$","div",null,{"className":"grid__col--5 mb-small","children":["$","code",null,{"children":"6"}]}],["$","div",null,{"className":"grid__col--5 mb-small","children":["$","code",null,{"children":"7"}]}],["$","div",null,{"className":"grid__col--5 mb-small","children":["$","code",null,{"children":"8"}]}],["$","div",null,{"className":"grid__col--5 mb-small","children":["$","code",null,{"children":"9"}]}],["$","div",null,{"className":"grid__col--5 mb-small","children":["$","code",null,{"children":"10"}]}]]}]}]}],"\n",["$","div",null,{"className":"section bg-black","children":["$","div",null,{"className":"container","ref":"$undefined","children":["$","div",null,{"className":"bar horizontal-scroll--md horizontal-scroll--xl-disable horizontal-scroll--xxl","style":{"width":300},"children":[["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"1"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"2"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"3"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"4"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"5"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"6"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"7"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"8"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"9"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"10"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"11"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"12"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"13"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"14"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"15"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"16"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"17"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"18"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"19"}]}],["$","div",null,{"className":"bar__item","size":4,"children":["$","code",null,{"children":"20"}]}]]}]}]}]],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/57b0c84bbf7d7098.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/ac1d2e9b77b16926.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","$L6",null,{"children":["$L7","$L8",["$","$L9",null,{"promise":"$@a"}]]}]]}],{},null,false]},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","jZD_9S4ZiNJktw0-GmPxQv",{"children":[["$","$Lb",null,{"children":"$Lc"}],["$","meta",null,{"name":"next-size-adjust","content":""}]]}],["$","$Ld",null,{"children":"$Le"}]]}],false]],"m":"$undefined","G":["$f","$undefined"],"s":false,"S":true}
-10:"$Sreact.suspense"
-11:I[4911,[],"AsyncMetadata"]
-e:["$","div",null,{"hidden":true,"children":["$","$10",null,{"fallback":null,"children":["$","$L11",null,{"promise":"$@12"}]}]}]
-8:null
-c:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]
-7:null
-a:{"metadata":[],"error":null,"digest":"$undefined"}
-12:{"metadata":"$a:metadata","error":null,"digest":"$undefined"}

package/src/components/Grid/tests/Grid.unit.test.tsx

@@ -1,533 +0,0 @@
-/**
- * Grid component unit tests
- *
- * This test suite verifies the rendering, props, and className logic of the Grid component.
- * It checks default rendering, children rendering, alignment, gap props, and className merging.
- * Also includes complex scenarios with multiple GridCol components and various size combinations.
- * Tests both React component usage and equivalent HTML structure generation.
- */
-
-import React from 'react';
-import { render } from '@testing-library/react';
-import { Grid } from '../Grid';
-import { GridCol } from '../GridCol';
-
-const alignment = {
-  vertical: ['stretch', 'start', 'end', 'center'] as const,
-  horizontal: ['end', 'center', 'space-around', 'space-between'] as const,
-};
-
-describe('Grid', () => {
-  it('renders with default class grid', () => {
-    const { getByTestId } = render(<Grid data-testid="test-id" />);
-    expect(getByTestId('test-id')).toHaveClass('grid');
-  });
-
-  it('renders children', () => {
-    const { getByText } = render(<Grid>test</Grid>);
-    expect(getByText('test')).toBeInTheDocument();
-  });
-
-  alignment.horizontal.forEach(hAlign => {
-    it(`applies justify-content-${hAlign} class when hAlign is ${hAlign}`, () => {
-      const { getByTestId } = render(
-        <Grid data-testid="test-id" hAlign={hAlign} />
-      );
-      expect(getByTestId('test-id')).toHaveClass(`justify-content-${hAlign}`);
-    });
-  });
-
-  alignment.vertical.forEach(vAlign => {
-    it(`applies align-items-${vAlign} class when vAlign is ${vAlign}`, () => {
-      const { getByTestId } = render(
-        <Grid data-testid="test-id" vAlign={vAlign} />
-      );
-      expect(getByTestId('test-id')).toHaveClass(`align-items-${vAlign}`);
-    });
-  });
-
-  it('applies grid--justify-height class when justifyHeight is true', () => {
-    const { getByTestId } = render(
-      <Grid data-testid="test-id" justifyHeight={true} />
-    );
-    expect(getByTestId('test-id')).toHaveClass('grid--justify-height');
-  });
-
-  (['medium', 'large', 'xlarge'] as const).forEach(rowGapSize => {
-    it(`applies grid-row-gap--${rowGapSize} class when rowGapSize is ${rowGapSize}`, () => {
-      const { getByTestId } = render(
-        <Grid data-testid="test-id" rowGapSize={rowGapSize} />
-      );
-      expect(getByTestId('test-id')).toHaveClass(`grid-row-gap--${rowGapSize}`);
-    });
-  });
-
-  it('merges additional className', () => {
-    const { getByTestId } = render(
-      <Grid data-testid="test-id" className="test-class" />
-    );
-    expect(getByTestId('test-id')).toHaveClass('test-class');
-  });
-
-  it('spreads additional props to the rendered element', () => {
-    const { getByTestId } = render(
-      <Grid data-testid="test-id" id="my-grid" data-extra="foo" />
-    );
-    const el = getByTestId('test-id');
-    expect(el).toHaveAttribute('id', 'my-grid');
-    expect(el).toHaveAttribute('data-extra', 'foo');
-  });
-});
-
-describe('Grid with GridCol combinations', () => {
-  it('renders default GridCol with 12-column layout', () => {
-    const { container } = render(
-      <Grid>
-        <GridCol>default 12</GridCol>
-        <GridCol size={6}>6</GridCol>
-      </Grid>
-    );
-    
-    const grid = container.querySelector('.grid');
-    expect(grid).toBeTruthy();
-    const cols = grid ? grid.querySelectorAll(':scope > .grid__col') : [];
-    
-    expect(cols).toHaveLength(2);
-    expect(cols[0]).toHaveClass('grid__col');
-    expect(cols[1]).toHaveClass('grid__col', 'grid__col--6');
-  });
-
-  it('renders auto-sized GridCol with fixed columns', () => {
-    const { container } = render(
-      <Grid>
-        <GridCol size="auto">auto</GridCol>
-        <GridCol size={4}>4</GridCol>
-        <GridCol size={6}>6</GridCol>
-      </Grid>
-    );
-    
-    const grid = container.querySelector('.grid');
-    expect(grid).toBeTruthy();
-    const cols = grid ? grid.querySelectorAll(':scope > .grid__col') : [];
-    expect(cols[0]).toHaveClass('grid__col', 'grid__col--auto');
-    expect(cols[1]).toHaveClass('grid__col', 'grid__col--4');
-    expect(cols[2]).toHaveClass('grid__col', 'grid__col--6');
-  });
-
-  it('renders fill-sized GridCol with fixed columns', () => {
-    const { container } = render(
-      <Grid>
-        <GridCol size="fill">fill</GridCol>
-        <GridCol size={4}>4</GridCol>
-        <GridCol size={6}>6</GridCol>
-      </Grid>
-    );
-    
-    const grid = container.querySelector('.grid');
-    expect(grid).toBeTruthy();
-    const cols = grid ? grid.querySelectorAll(':scope > .grid__col') : [];
-    expect(cols[0]).toHaveClass('grid__col', 'grid__col--fill');
-    expect(cols[1]).toHaveClass('grid__col', 'grid__col--4');
-    expect(cols[2]).toHaveClass('grid__col', 'grid__col--6');
-  });
-
-  it('renders shrink-sized GridCol with fixed column', () => {
-    const { container } = render(
-      <Grid>
-        <GridCol size="shrink">shrink</GridCol>
-        <GridCol size={6}>6</GridCol>
-      </Grid>
-    );
-    
-    const grid = container.querySelector('.grid');
-    expect(grid).toBeTruthy();
-    const cols = grid ? grid.querySelectorAll(':scope > .grid__col') : [];
-    expect(cols[0]).toHaveClass('grid__col', 'grid__col--shrink');
-    expect(cols[1]).toHaveClass('grid__col', 'grid__col--6');
-  });
-
-  it('renders complex layout with mixed sizes and alignment', () => {
-    const { container } = render(
-      <Grid hAlign="center" vAlign="stretch">
-        <GridCol size={3} align="top">top aligned</GridCol>
-        <GridCol size="auto" align="middle">auto middle</GridCol>
-        <GridCol size="fill" align="bottom">fill bottom</GridCol>
-        <GridCol size={2} align="stretch">stretch</GridCol>
-      </Grid>
-    );
-    
-    const grid = container.querySelector('.grid');
-    expect(grid).toBeTruthy();
-    const cols = grid ? grid.querySelectorAll(':scope > .grid__col') : [];
-    
-    expect(grid).toHaveClass('justify-content-center', 'align-items-stretch');
-    expect(cols[0]).toHaveClass('grid__col', 'grid__col--3', 'align-self-top');
-    expect(cols[1]).toHaveClass('grid__col', 'grid__col--auto', 'align-self-middle');
-    expect(cols[2]).toHaveClass('grid__col', 'grid__col--fill', 'align-self-bottom');
-    expect(cols[3]).toHaveClass('grid__col', 'grid__col--2', 'align-self-stretch');
-  });
-
-  it('renders responsive grid with custom tags', () => {
-    const { container } = render(
-      <Grid tag="section" justifyHeight>
-        <GridCol tag="article" size={8}>main content</GridCol>
-        <GridCol tag="aside" size={4}>sidebar</GridCol>
-      </Grid>
-    );
-    
-    const section = container.querySelector('section');
-    const article = container.querySelector('article');
-    const aside = container.querySelector('aside');
-    
-    expect(section).toHaveClass('grid', 'grid--justify-height');
-    expect(article).toHaveClass('grid__col', 'grid__col--8');
-    expect(aside).toHaveClass('grid__col', 'grid__col--4');
-  });
-
-  it('renders nested grid structure', () => {
-    const { container } = render(
-      <Grid>
-        <GridCol size={6}>
-          <Grid>
-            <GridCol size={4}>nested 4</GridCol>
-            <GridCol size={8}>nested 8</GridCol>
-          </Grid>
-        </GridCol>
-        <GridCol size={6}>outer 6</GridCol>
-      </Grid>
-    );
-    
-    const outerGrid = container.querySelector('.grid');
-    const outerCols = outerGrid?.querySelectorAll(':scope > .grid__col');
-    const nestedGrid = outerCols?.[0]?.querySelector('.grid');
-    const nestedCols = nestedGrid?.querySelectorAll(':scope > .grid__col');
-    
-    expect(outerCols).toHaveLength(2);
-    expect(outerCols?.[0]).toHaveClass('grid__col', 'grid__col--6');
-    expect(outerCols?.[1]).toHaveClass('grid__col', 'grid__col--6');
-    expect(nestedCols).toHaveLength(2);
-    expect(nestedCols?.[0]).toHaveClass('grid__col', 'grid__col--4');
-    expect(nestedCols?.[1]).toHaveClass('grid__col', 'grid__col--8');
-  });
-
-  it('renders grid with all size variations', () => {
-    const { container } = render(
-      <Grid>
-        <GridCol size={1}>1</GridCol>
-        <GridCol size={2}>2</GridCol>
-        <GridCol size={3}>3</GridCol>
-        <GridCol size={4}>4</GridCol>
-        <GridCol size={5}>5</GridCol>
-        <GridCol size={6}>6</GridCol>
-        <GridCol size={7}>7</GridCol>
-        <GridCol size={8}>8</GridCol>
-        <GridCol size={9}>9</GridCol>
-        <GridCol size={10}>10</GridCol>
-        <GridCol size={11}>11</GridCol>
-        <GridCol size={12}>12</GridCol>
-      </Grid>
-    );
-    
-    const grid = container.querySelector('.grid');
-    expect(grid).toBeTruthy();
-    const cols = grid ? grid.querySelectorAll(':scope > .grid__col') : [];
-    expect(cols).toHaveLength(12);
-    
-    for (let i = 0; i < 12; i++) {
-      expect(cols[i]).toHaveClass('grid__col', `grid__col--${i + 1}`);
-    }
-  });
-
-  it('renders grid with gap and custom styling', () => {
-    const { container } = render(
-      <Grid rowGapSize="large" columnGapSize="none" className="custom-grid">
-        <GridCol size="auto" className="custom-col">auto</GridCol>
-        <GridCol size="fill" className="custom-col">fill</GridCol>
-        <GridCol size="shrink" className="custom-col">shrink</GridCol>
-      </Grid>
-    );
-    
-    const grid = container.querySelector('.grid');
-    expect(grid).toBeTruthy();
-    const cols = grid ? grid.querySelectorAll(':scope > .grid__col') : [];
-    
-    expect(grid).toHaveClass('grid-row-gap--large', 'grid--column-gap-none', 'custom-grid');
-    expect(cols[0]).toHaveClass('grid__col', 'grid__col--auto', 'custom-col');
-    expect(cols[1]).toHaveClass('grid__col', 'grid__col--fill', 'custom-col');
-    expect(cols[2]).toHaveClass('grid__col', 'grid__col--shrink', 'custom-col');
-  });
-});
-
-describe('Grid and GridCol - Real-world scenarios', () => {
-  it('renders scenario 1: default 12 + size 6', () => {
-    const { container } = render(
-      <Grid>
-        <GridCol>
-          <code>(default) 12</code>
-        </GridCol>
-        <GridCol size={6}>
-          <code>6</code>
-        </GridCol>
-      </Grid>
-    );
-    
-    const grid = container.querySelector('.grid');
-    expect(grid).toBeTruthy();
-    const cols = grid ? grid.querySelectorAll(':scope > .grid__col') : [];
-    const codes = container.querySelectorAll('code');
-    
-    expect(cols).toHaveLength(2);
-    expect(cols[0]).toHaveClass('grid__col');
-    expect(cols[1]).toHaveClass('grid__col', 'grid__col--6');
-    expect(codes[0]).toHaveTextContent('(default) 12');
-    expect(codes[1]).toHaveTextContent('6');
-  });
-
-  it('renders scenario 2: auto + 4 + 6', () => {
-    const { container } = render(
-      <Grid>
-        <GridCol size="auto">
-          <code>auto</code>
-        </GridCol>
-        <GridCol size={4}>
-          <code>5</code>
-        </GridCol>
-        <GridCol size={6}>
-          <code>6</code>
-        </GridCol>
-      </Grid>
-    );
-    
-    const grid = container.querySelector('.grid');
-    expect(grid).toBeTruthy();
-    const cols = grid ? grid.querySelectorAll(':scope > .grid__col') : [];
-    const codes = container.querySelectorAll('code');
-    
-    expect(cols[0]).toHaveClass('grid__col', 'grid__col--auto');
-    expect(cols[1]).toHaveClass('grid__col', 'grid__col--4');
-    expect(cols[2]).toHaveClass('grid__col', 'grid__col--6');
-    expect(codes[0]).toHaveTextContent('auto');
-    expect(codes[1]).toHaveTextContent('5');
-    expect(codes[2]).toHaveTextContent('6');
-  });
-
-  it('renders scenario 3: fill + 4 + 6', () => {
-    const { container } = render(
-      <Grid>
-        <GridCol size="fill">
-          <code>fill</code>
-        </GridCol>
-        <GridCol size={4}>
-          <code>5</code>
-        </GridCol>
-        <GridCol size={6}>
-          <code>6</code>
-        </GridCol>
-      </Grid>
-    );
-    
-    const grid = container.querySelector('.grid');
-    expect(grid).toBeTruthy();
-    const cols = grid ? grid.querySelectorAll(':scope > .grid__col') : [];
-    const codes = container.querySelectorAll('code');
-    
-    expect(cols[0]).toHaveClass('grid__col', 'grid__col--fill');
-    expect(cols[1]).toHaveClass('grid__col', 'grid__col--4');
-    expect(cols[2]).toHaveClass('grid__col', 'grid__col--6');
-    expect(codes[0]).toHaveTextContent('fill');
-    expect(codes[1]).toHaveTextContent('5');
-    expect(codes[2]).toHaveTextContent('6');
-  });
-
-  it('renders scenario 4: shrink + 6', () => {
-    const { container } = render(
-      <Grid>
-        <GridCol size="shrink">
-          <code>shrink</code>
-        </GridCol>
-        <GridCol size={6}>
-          <code>6</code>
-        </GridCol>
-      </Grid>
-    );
-    
-    const grid = container.querySelector('.grid');
-    expect(grid).toBeTruthy();
-    const cols = grid ? grid.querySelectorAll(':scope > .grid__col') : [];
-    const codes = container.querySelectorAll('code');
-    
-    expect(cols[0]).toHaveClass('grid__col', 'grid__col--shrink');
-    expect(cols[1]).toHaveClass('grid__col', 'grid__col--6');
-    expect(codes[0]).toHaveTextContent('shrink');
-    expect(codes[1]).toHaveTextContent('6');
-  });
-
-  it('renders all scenarios together with hr separators', () => {
-    const { container } = render(
-      <>
-        <Grid>
-          <GridCol>
-            <code>(default) 12</code>
-          </GridCol>
-          <GridCol size={6}>
-            <code>6</code>
-          </GridCol>
-        </Grid>
-        <hr />
-        <Grid>
-          <GridCol size="auto">
-            <code>auto</code>
-          </GridCol>
-          <GridCol size={4}>
-            <code>5</code>
-          </GridCol>
-          <GridCol size={6}>
-            <code>6</code>
-          </GridCol>
-        </Grid>
-        <hr />
-        <Grid>
-          <GridCol size="fill">
-            <code>fill</code>
-          </GridCol>
-          <GridCol size={4}>
-            <code>5</code>
-          </GridCol>
-          <GridCol size={6}>
-            <code>6</code>
-          </GridCol>
-        </Grid>
-        <hr />
-        <Grid>
-          <GridCol size="shrink">
-            <code>shrink</code>
-          </GridCol>
-          <GridCol size={6}>
-            <code>6</code>
-          </GridCol>
-        </Grid>
-      </>
-    );
-    
-    const grids = container.querySelectorAll('.grid');
-    const allCols: Element[] = [];
-    grids.forEach(grid => {
-      const cols = grid.querySelectorAll(':scope > .grid__col');
-      cols.forEach(col => allCols.push(col));
-    });
-    const codes = container.querySelectorAll('code');
-    const hrs = container.querySelectorAll('hr');
-    
-    expect(grids).toHaveLength(4);
-    expect(allCols).toHaveLength(10); // 2 + 3 + 3 + 2
-    expect(codes).toHaveLength(10);
-    expect(hrs).toHaveLength(3);
-    // Prvý grid
-    expect(allCols[0]).toHaveClass('grid__col');
-    expect(allCols[1]).toHaveClass('grid__col', 'grid__col--6');
-    // Druhý grid
-    expect(allCols[2]).toHaveClass('grid__col', 'grid__col--auto');
-    expect(allCols[3]).toHaveClass('grid__col', 'grid__col--4');
-    expect(allCols[4]).toHaveClass('grid__col', 'grid__col--6');
-    // Tretí grid
-    expect(allCols[5]).toHaveClass('grid__col', 'grid__col--fill');
-    expect(allCols[6]).toHaveClass('grid__col', 'grid__col--4');
-    expect(allCols[7]).toHaveClass('grid__col', 'grid__col--6');
-    // Štvrtý grid
-    expect(allCols[8]).toHaveClass('grid__col', 'grid__col--shrink');
-    expect(allCols[9]).toHaveClass('grid__col', 'grid__col--6');
-  });
-});
-
-describe('Grid and GridCol - HTML structure verification', () => {
-  it('generates correct HTML structure for scenario 1', () => {
-    const { container } = render(
-      <Grid>
-        <GridCol>
-          <code>(default) 12</code>
-        </GridCol>
-        <GridCol size={6}>
-          <code>6</code>
-        </GridCol>
-      </Grid>
-    );
-    
-    // Verify the generated HTML structure matches expected
-    const html = container.innerHTML;
-    expect(html).toContain('<div class="grid">');
-    expect(html).toContain('<div class="grid__col">');
-    expect(html).toContain('<div class="grid__col grid__col--6">');
-    expect(html).toContain('<code>(default) 12</code>');
-    expect(html).toContain('<code>6</code>');
-  });
-
-  it('generates correct HTML structure for scenario 2', () => {
-    const { container } = render(
-      <Grid>
-        <GridCol size="auto">
-          <code>auto</code>
-        </GridCol>
-        <GridCol size={4}>
-          <code>5</code>
-        </GridCol>
-        <GridCol size={6}>
-          <code>6</code>
-        </GridCol>
-      </Grid>
-    );
-    
-    const html = container.innerHTML;
-    expect(html).toContain('<div class="grid">');
-    expect(html).toContain('<div class="grid__col grid__col--auto">');
-    expect(html).toContain('<div class="grid__col grid__col--4">');
-    expect(html).toContain('<div class="grid__col grid__col--6">');
-    expect(html).toContain('<code>auto</code>');
-    expect(html).toContain('<code>5</code>');
-    expect(html).toContain('<code>6</code>');
-  });
-
-  it('generates correct HTML structure for scenario 3', () => {
-    const { container } = render(
-      <Grid>
-        <GridCol size="fill">
-          <code>fill</code>
-        </GridCol>
-        <GridCol size={4}>
-          <code>5</code>
-        </GridCol>
-        <GridCol size={6}>
-          <code>6</code>
-        </GridCol>
-      </Grid>
-    );
-    
-    const html = container.innerHTML;
-    expect(html).toContain('<div class="grid">');
-    expect(html).toContain('<div class="grid__col grid__col--fill">');
-    expect(html).toContain('<div class="grid__col grid__col--4">');
-    expect(html).toContain('<div class="grid__col grid__col--6">');
-    expect(html).toContain('<code>fill</code>');
-    expect(html).toContain('<code>5</code>');
-    expect(html).toContain('<code>6</code>');
-  });
-
-  it('generates correct HTML structure for scenario 4', () => {
-    const { container } = render(
-      <Grid>
-        <GridCol size="shrink">
-          <code>shrink</code>
-        </GridCol>
-        <GridCol size={6}>
-          <code>6</code>
-        </GridCol>
-      </Grid>
-    );
-    
-    const html = container.innerHTML;
-    expect(html).toContain('<div class="grid">');
-    expect(html).toContain('<div class="grid__col grid__col--shrink">');
-    expect(html).toContain('<div class="grid__col grid__col--6">');
-    expect(html).toContain('<code>shrink</code>');
-    expect(html).toContain('<code>6</code>');
-  });
-});