diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/grid.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/grid.mdx
new file mode 100644
index 00000000000..2775d72e0d7
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/grid.mdx
@@ -0,0 +1,18 @@
+---
+title: 'Grid'
+description: 'To make it easier to build responsive application layouts in line with defined design sketches, there are a number of components for layout.'
+status: 'new'
+theme: 'sbanken'
+showTabs: true
+tabs:
+ - title: Info
+ key: /info
+ - title: Demos
+ key: /demos
+---
+
+import Info from 'Docs/uilib/components/grid/info'
+import Demos from 'Docs/uilib/components/grid/demos'
+
+
+
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/grid/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/grid/Examples.tsx
new file mode 100644
index 00000000000..4de0d11a6e8
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/grid/Examples.tsx
@@ -0,0 +1,67 @@
+import React from 'react'
+import ComponentBox from '../../../../shared/tags/ComponentBox'
+import { Grid } from '@dnb/eufemia/src'
+import { TestElement } from '@dnb/eufemia/src/extensions/forms'
+
+export const colors = [
+ { background: '#babeee' } as React.CSSProperties,
+ { background: '#dfe0ee' } as React.CSSProperties,
+ { background: '#90d2c3' } as React.CSSProperties,
+ { background: '#ecf4be' } as React.CSSProperties,
+]
+
+export const ResponsiveGridContainer = () => {
+ return (
+
+
+
+ Item A
+
+
+
+ Item B
+
+
+
+ Item C
+
+
+
+ Item D
+
+
+
+ )
+}
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/grid/container.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/grid/container.mdx
new file mode 100644
index 00000000000..d886c259233
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/grid/container.mdx
@@ -0,0 +1,24 @@
+---
+title: 'Grid.Container'
+description: '`Grid.Container` is a building block for CSS Grid based layout of contents and components.'
+hideInMenu: true
+showTabs: true
+tabs:
+ - title: Info
+ key: '/info'
+ - title: Demos
+ key: '/demos'
+ - title: Properties
+ key: '/properties'
+breadcrumb:
+ - text: Grid
+ href: /uilib/components/grid/
+ - text: Container
+ href: /uilib/components/grid/container/
+---
+
+import Info from 'Docs/uilib/components/grid/container/info'
+import Demos from 'Docs/uilib/components/grid/container/demos'
+
+
+
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/GridContainer/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/grid/container/Examples.tsx
similarity index 77%
rename from packages/dnb-design-system-portal/src/docs/uilib/components/layout/GridContainer/Examples.tsx
rename to packages/dnb-design-system-portal/src/docs/uilib/components/grid/container/Examples.tsx
index 7319f5f1220..8e3b679896f 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/GridContainer/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/grid/container/Examples.tsx
@@ -1,9 +1,7 @@
import { TestElement } from '@dnb/eufemia/src/extensions/forms'
import ComponentBox from '../../../../../shared/tags/ComponentBox'
-import { Layout } from '@dnb/eufemia/src'
+import { Grid } from '@dnb/eufemia/src'
-const Grid = Layout.Grid
-const Item = Layout.Grid.Item
const colors = [
{ background: '#babeee' } as React.CSSProperties,
{ background: '#dfe0ee' } as React.CSSProperties,
@@ -14,11 +12,11 @@ const colors = [
export const ResponsiveUsage = () => {
return (
-
- -
+ {
element={TestElement}
>
Item A
-
+
- - {
element={TestElement}
>
Item B
-
+
- - {
element={TestElement}
>
Item C
-
+
- - {
element={TestElement}
>
Item D
-
-
+
+
)
}
export const CustomColumns = () => {
return (
-
-
+
- - {
element={TestElement}
>
Item A
-
+
- - {
element={TestElement}
>
Item B
-
+
- - {
element={TestElement}
>
Item C
-
+
- - {
element={TestElement}
>
Item D
-
-
+
+
)
}
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/GridContainer/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/grid/container/demos.mdx
similarity index 100%
rename from packages/dnb-design-system-portal/src/docs/uilib/components/layout/GridContainer/demos.mdx
rename to packages/dnb-design-system-portal/src/docs/uilib/components/grid/container/demos.mdx
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/grid/container/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/grid/container/info.mdx
new file mode 100644
index 00000000000..8dea606c152
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/grid/container/info.mdx
@@ -0,0 +1,34 @@
+---
+showTabs: true
+---
+
+import * as Examples from '../item/Examples'
+
+## Description
+
+`Grid.Container` is a building block for [CSS grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) based layouts.
+
+Use [Grid.Item](/uilib/components/grid/item) for you inner wrappers so you can apply a `span` to them.
+
+```jsx
+import { Grid } from '@dnb/eufemia'
+
+render(
+
+ Item A
+ Item B
+ ,
+)
+```
+
+The columns do change based on what [breakpoint](/uilib/usage/layout/media-queries/) the browser is in:
+
+- 4 columns when `small`
+- 6 columns when `medium`
+- 12 columns when `large`
+
+
+
+### Gap
+
+By default is no gap given.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/GridContainer/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/grid/container/properties.mdx
similarity index 100%
rename from packages/dnb-design-system-portal/src/docs/uilib/components/layout/GridContainer/properties.mdx
rename to packages/dnb-design-system-portal/src/docs/uilib/components/grid/container/properties.mdx
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/grid/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/grid/demos.mdx
new file mode 100644
index 00000000000..42cd179d931
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/grid/demos.mdx
@@ -0,0 +1,11 @@
+---
+showTabs: true
+---
+
+import * as Examples from './Examples'
+
+## Demos
+
+### Responsive Grid.Container
+
+
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/grid/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/grid/info.mdx
new file mode 100644
index 00000000000..ca01d7b6705
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/grid/info.mdx
@@ -0,0 +1,17 @@
+---
+showTabs: true
+---
+
+## Description
+
+To make it easier to build responsive application layouts in line with defined design sketches, there are a number of components for layout.
+
+- **[Grid.Container](/uilib/components/grid/container)** is a layout system for CSS grid based layout of contents.
+
+- **[Grid.Item](/uilib/components/grid/item)** is a layout system for CSS grid based layout of contents.
+
+You find more related information in the [Layout](/uilib/components/layout) pages.
+
+## Columns
+
+UX designers are using a 12 column system, along with a 4 and 6 column system, during their design processes.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/grid/item.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/grid/item.mdx
new file mode 100644
index 00000000000..dd6d7d23e9d
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/grid/item.mdx
@@ -0,0 +1,24 @@
+---
+title: 'Grid.Item'
+description: '`Grid.Item` is a building block for CSS Grid based layouts.'
+hideInMenu: true
+showTabs: true
+tabs:
+ - title: Info
+ key: '/info'
+ - title: Demos
+ key: '/demos'
+ - title: Properties
+ key: '/properties'
+breadcrumb:
+ - text: Grid
+ href: /uilib/components/grid/
+ - text: Item
+ href: /uilib/components/grid/item/
+---
+
+import Info from 'Docs/uilib/components/grid/item/info'
+import Demos from 'Docs/uilib/components/grid/item/demos'
+
+
+
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/GridItem/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/grid/item/Examples.tsx
similarity index 60%
rename from packages/dnb-design-system-portal/src/docs/uilib/components/layout/GridItem/Examples.tsx
rename to packages/dnb-design-system-portal/src/docs/uilib/components/grid/item/Examples.tsx
index bb457dad17b..604c432a2ff 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/GridItem/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/grid/item/Examples.tsx
@@ -1,15 +1,15 @@
import React from 'react'
import ComponentBox from '../../../../../shared/tags/ComponentBox'
import { TestElement } from '@dnb/eufemia/src/extensions/forms'
-import { Input, Layout } from '@dnb/eufemia/src'
+import { Input, Grid } from '@dnb/eufemia/src'
export const BasicSpan = () => {
return (
-
- uses 50% in width
- uses 50% in width
-
+
+ uses 50% in width
+ uses 50% in width
+
)
}
@@ -17,14 +17,14 @@ export const BasicSpan = () => {
export const ResponsiveSpan = () => {
return (
-
-
+
+
uses 50% or 100% based on the screen size
-
-
+
+
uses 50% or 100% based on the screen size
-
-
+
+
)
}
@@ -39,8 +39,8 @@ const colors = [
export const ResponsiveAdvanced = () => {
return (
-
-
+ {
element={TestElement}
>
Item A
-
+
- {
element={TestElement}
>
Item B
-
+
- {
element={TestElement}
>
Item C
-
+
- {
element={TestElement}
>
Item D
-
-
+
+
)
}
@@ -102,20 +102,20 @@ export const OrderHorizontal = () => {
}
return (
-
-
+
+
- Left top
-
-
+
+
- Right top
-
-
+
+
- Left bottom
-
-
+
+
- Right bottom
-
-
+
+
)
}
@@ -130,20 +130,20 @@ export const OrderVertical = () => {
}
return (
-
-
+
+
- Left top
-
-
+
+
- Left bottom
-
-
+
+
- Right top
-
-
+
+
- Right bottom
-
-
+
+
)
}
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/GridItem/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/grid/item/demos.mdx
similarity index 100%
rename from packages/dnb-design-system-portal/src/docs/uilib/components/layout/GridItem/demos.mdx
rename to packages/dnb-design-system-portal/src/docs/uilib/components/grid/item/demos.mdx
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/GridItem/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/grid/item/info.mdx
similarity index 71%
rename from packages/dnb-design-system-portal/src/docs/uilib/components/layout/GridItem/info.mdx
rename to packages/dnb-design-system-portal/src/docs/uilib/components/grid/item/info.mdx
index 529883aa287..eb01feb022f 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/GridItem/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/grid/item/info.mdx
@@ -6,7 +6,7 @@ import * as Examples from './Examples'
## Description
-`Layout.GridItem` is a building block for [CSS grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) based layout of contents and components. Should be used in combination with [GridContainer](/uilib/components/layout/GridContainer/).
+`Grid.Item` is a building block for [CSS grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) based layout of contents and components. Should be used in combination with [Grid.Container](/uilib/components/grid/container/).
The columns do change based on what [breakpoint](/uilib/usage/layout/media-queries/) the browser is in:
@@ -16,7 +16,7 @@ The columns do change based on what [breakpoint](/uilib/usage/layout/media-queri
### Span
-You need to provide a `span` prop with a number from 1 to 12 (can be changed in [GridContainer](/uilib/components/layout/GridContainer/) with the `columns` property).
+You need to provide a `span` prop with a number from 1 to 12 (can be changed in [Grid.Container](/uilib/components/grid/container/) with the `columns` property).
The span will be used to specify where the item is placed in the grid columns.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/GridItem/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/grid/item/properties.mdx
similarity index 100%
rename from packages/dnb-design-system-portal/src/docs/uilib/components/layout/GridItem/properties.mdx
rename to packages/dnb-design-system-portal/src/docs/uilib/components/grid/item/properties.mdx
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Examples.tsx
index c7590237d0e..d4b969c7fa5 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Examples.tsx
@@ -2,7 +2,7 @@ import React from 'react'
import styled from '@emotion/styled'
import ComponentBox from '../../../../shared/tags/ComponentBox'
import MediaQuery from '@dnb/eufemia/src/shared/MediaQuery'
-import { Layout, Slider, Code, Button, Card, Flex } from '@dnb/eufemia/src'
+import { Grid, Slider, Code, Button, Card, Flex } from '@dnb/eufemia/src'
import {
TestElement,
Field,
@@ -285,8 +285,8 @@ export const MediaQueryLiveExample = () => (
export const ResponsiveGridContainer = () => {
return (
-
-
+ {
element={TestElement}
>
Item A
-
+
- {
element={TestElement}
>
Item B
-
+
- {
element={TestElement}
>
Item C
-
+
- {
element={TestElement}
>
Item D
-
-
+
+
)
}
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/GridContainer.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/layout/GridContainer.mdx
deleted file mode 100644
index 3a77472fb99..00000000000
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/GridContainer.mdx
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: 'GridContainer'
-description: '`Layout.GridContainer` is a building block for flexbox based layout of contents and components.'
-hideInMenu: true
-showTabs: true
-tabs:
- - title: Info
- key: '/info'
- - title: Demos
- key: '/demos'
- - title: Properties
- key: '/properties'
-breadcrumb:
- - text: Layout
- href: /uilib/components/layout/
- - text: GridContainer
- href: /uilib/components/layout/GridContainer/
----
-
-import Info from 'Docs/uilib/components/layout/GridContainer/info'
-import Demos from 'Docs/uilib/components/layout/GridContainer/demos'
-
-
-
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/GridContainer/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/layout/GridContainer/info.mdx
deleted file mode 100644
index 7df93382989..00000000000
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/GridContainer/info.mdx
+++ /dev/null
@@ -1,56 +0,0 @@
----
-showTabs: true
----
-
-import * as Examples from '../GridItem/Examples'
-
-## Description
-
-`Layout.GridContainer` is a building block for [CSS grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) based layouts.
-
-Use [Layout.GridItem](/uilib/components/layout/GridItem) for you inner wrappers so you can apply a `span` to them.
-
-The columns do change based on what [breakpoint](/uilib/usage/layout/media-queries/) the browser is in:
-
-- 4 columns when `small`
-- 6 columns when `medium`
-- 12 columns when `large`
-
-
-
-### Gap
-
-By default is no gap given.
-
-### Imports and aliases
-
-```jsx
-import { Layout } from '@dnb/eufemia'
-
-render(
-
- Item A
- Item B
- ,
-)
-```
-
-For shortening the import name, you can use:
-
-```jsx
-import { Layout } from '@dnb/eufemia'
-
-// Method 1
-const Grid = Layout.Grid
-const Item = Layout.Grid.Item
-
-// Method 2
-const { GridContainer: Grid, GridItem: Item } = Layout
-
-render(
-
- - Item A
- - Item B
- ,
-)
-```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/GridItem.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/layout/GridItem.mdx
deleted file mode 100644
index 733ea8695e0..00000000000
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/GridItem.mdx
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: 'GridItem'
-description: '`Layout.GridItem` is a building block for CSS Grid based layouts.'
-hideInMenu: true
-showTabs: true
-tabs:
- - title: Info
- key: '/info'
- - title: Demos
- key: '/demos'
- - title: Properties
- key: '/properties'
-breadcrumb:
- - text: Layout
- href: /uilib/components/layout/
- - text: GridItem
- href: /uilib/components/layout/GridItem/
----
-
-import Info from 'Docs/uilib/components/layout/GridItem/info'
-import Demos from 'Docs/uilib/components/layout/GridItem/demos'
-
-
-
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/layout/demos.mdx
index e7502f08612..f8d75dadc15 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/layout/demos.mdx
@@ -14,7 +14,7 @@ import * as Examples from './Examples'
-### Responsive GridContainer
+### Responsive Grid.Container
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/layout/info.mdx
index 8bfe8710d09..c574dee6266 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/layout/info.mdx
@@ -6,13 +6,7 @@ showTabs: true
To make it easier to build application layout and [form](/uilib/extensions/forms)-views in line with defined design sketches, there are a number of components for layout.
-### Wrappers
-
-- **[Card](/uilib/components/card)** is a block section element showing the white box with rounded gray borders, adding spacing automatically.
-
-- **[Stack](/uilib/components/flex/stack)** is an outer block element for wrapping content to get the correct layout and spacing between region and region headings.
-
-### Flex layout
+## Flex layout
- **[Flex.Container](/uilib/components/flex/container)** is a building block for CSS flexbox based layout of contents and components.
@@ -21,11 +15,13 @@ To make it easier to build application layout and [form](/uilib/extensions/forms
- **[Flex.Item](/uilib/components/flex/item)** is a building block for CSS flexbox based layout of contents and components.
-### Grid layout
+- **[Stack](/uilib/components/flex/stack)** is an outer block element for wrapping content to get the correct layout and spacing between region and region headings.
+
+## Grid layout
-- **[GridContainer](/uilib/components/layout/GridContainer)** is a layout system for CSS grid based layout of contents.
+- **[Grid.Container](/uilib/components/grid/container)** is a layout system for CSS grid based layout of contents.
-- **[GridItem](/uilib/components/layout/GridItem)** is a layout system for CSS grid based layout of contents.
+- **[Grid.Item](/uilib/components/grid/item)** is a layout system for CSS grid based layout of contents.
## Columns
@@ -68,12 +64,13 @@ Uses CSS `grid`.
- Items can have different order in opposition from what's given in the DOM structure.
```jsx
-import { Layout } from '@dnb/eufemia'
+import { Grid } from '@dnb/eufemia'
+
render(
-
- content
- content
- ,
+
+ content
+ content
+ ,
)
```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/Array/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/Array/Examples.tsx
index fe7523db4a2..1c32f18756a 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/Array/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/Array/Examples.tsx
@@ -1,5 +1,5 @@
import ComponentBox from '../../../../../../../shared/tags/ComponentBox'
-import { Flex, Layout } from '@dnb/eufemia/src'
+import { Flex } from '@dnb/eufemia/src'
import {
Iterate,
Field,
@@ -25,7 +25,7 @@ export const PrimitiveElements = () => {
export const ObjectElements = () => {
return (
-
+
{
export const RenderPropsObjectElements = () => {
return (
-
+
{
export const ArrayFromFormHandler = () => {
return (
-
+
diff --git a/packages/dnb-eufemia/src/components/layout/__tests__/GridContainer.screenshot.test.ts b/packages/dnb-eufemia/src/components/grid/__tests__/Container.screenshot.test.ts
similarity index 76%
rename from packages/dnb-eufemia/src/components/layout/__tests__/GridContainer.screenshot.test.ts
rename to packages/dnb-eufemia/src/components/grid/__tests__/Container.screenshot.test.ts
index 5f2e4b0518a..e28b4ab71e0 100644
--- a/packages/dnb-eufemia/src/components/layout/__tests__/GridContainer.screenshot.test.ts
+++ b/packages/dnb-eufemia/src/components/grid/__tests__/Container.screenshot.test.ts
@@ -5,13 +5,13 @@
import { makeScreenshot } from '../../../core/jest/jestSetupScreenshots'
-describe('Layout.GridContainer', () => {
+describe('Grid.Container', () => {
const selector =
- '[data-visual-test="layout-grid-container-responsive"] .dnb-layout-grid-container'
+ '[data-visual-test="grid-container-responsive"] .dnb-grid-container'
it('have to match responsive size on large viewport', async () => {
const screenshot = await makeScreenshot({
- url: '/uilib/components/layout/GridContainer/demos',
+ url: '/uilib/components/grid/container/demos',
pageViewport: {
width: 1000,
},
@@ -25,7 +25,7 @@ describe('Layout.GridContainer', () => {
it('have to match responsive size on medium viewport', async () => {
const screenshot = await makeScreenshot({
- url: '/uilib/components/layout/GridContainer/demos',
+ url: '/uilib/components/grid/container/demos',
pageViewport: {
width: 800,
},
@@ -36,7 +36,7 @@ describe('Layout.GridContainer', () => {
it('have to match responsive size on small viewport', async () => {
const screenshot = await makeScreenshot({
- url: '/uilib/components/layout/GridContainer/demos',
+ url: '/uilib/components/grid/container/demos',
pageViewport: {
width: 600,
},
diff --git a/packages/dnb-eufemia/src/components/layout/__tests__/GridContainer.test.tsx b/packages/dnb-eufemia/src/components/grid/__tests__/Container.test.tsx
similarity index 52%
rename from packages/dnb-eufemia/src/components/layout/__tests__/GridContainer.test.tsx
rename to packages/dnb-eufemia/src/components/grid/__tests__/Container.test.tsx
index 81e1b8805d9..96a250fc300 100644
--- a/packages/dnb-eufemia/src/components/layout/__tests__/GridContainer.test.tsx
+++ b/packages/dnb-eufemia/src/components/grid/__tests__/Container.test.tsx
@@ -1,18 +1,17 @@
import React from 'react'
import { render } from '@testing-library/react'
import 'mock-match-media/jest-setup'
-import GridContainer from '../GridContainer'
-import GridItem from '../GridItem'
+import Grid from '../Grid'
-describe('Layout.GridContainer', () => {
+describe('Grid.Container', () => {
it('should forward HTML attributes', () => {
render(
-
- Item
-
+
+ Item
+
)
- const element = document.querySelector('.dnb-layout-grid-container')
+ const element = document.querySelector('.dnb-grid-container')
const attributes = Array.from(element.attributes).map(
(attr) => attr.name
)
@@ -23,18 +22,18 @@ describe('Layout.GridContainer', () => {
it('should support spacing props', () => {
const { rerender } = render(
-
- Item
-
+
+ Item
+
)
- const element = document.querySelector('.dnb-layout-grid-container ')
+ const element = document.querySelector('.dnb-grid-container ')
expect(element.classList).toContain('dnb-space__top--large')
rerender(
-
- Item
-
+
+ Item
+
)
expect(element.classList).toContain('dnb-space__top--x-large')
@@ -42,73 +41,73 @@ describe('Layout.GridContainer', () => {
it('should set columnGap and rowGap', () => {
const { rerender } = render(
-
- Item
-
+
+ Item
+
)
- const element = document.querySelector('.dnb-layout-grid-container')
+ const element = document.querySelector('.dnb-grid-container')
expect(element.className).toContain(
- 'dnb-layout-grid-container--column-gap-small'
+ 'dnb-grid-container--column-gap-small'
)
expect(element.className).toContain(
- 'dnb-layout-grid-container--row-gap-small'
+ 'dnb-grid-container--row-gap-small'
)
rerender(
-
- Item
-
+
+ Item
+
)
expect(element.className).toContain(
- 'dnb-layout-grid-container--column-gap-medium'
+ 'dnb-grid-container--column-gap-medium'
)
expect(element.className).toContain(
- 'dnb-layout-grid-container--row-gap-medium'
+ 'dnb-grid-container--row-gap-medium'
)
rerender(
-
- Item
-
+
+ Item
+
)
expect(element.className).toContain(
- 'dnb-layout-grid-container--column-gap-large'
+ 'dnb-grid-container--column-gap-large'
)
expect(element.className).toContain(
- 'dnb-layout-grid-container--row-gap-large'
+ 'dnb-grid-container--row-gap-large'
)
})
it('should contain given classes', () => {
render(
-
- Item
-
+
+ Item
+
)
- const element = document.querySelector('.dnb-layout-grid-container')
+ const element = document.querySelector('.dnb-grid-container')
expect(Array.from(element.classList)).toEqual([
'dnb-space',
- 'dnb-layout-grid-container',
+ 'dnb-grid-container',
'custom-class',
])
})
it('should render children', () => {
render(
-
- Item 1
- Item 2
- Item 3
-
+
+ Item 1
+ Item 2
+ Item 3
+
)
- const element = document.querySelector('.dnb-layout-grid-container')
+ const element = document.querySelector('.dnb-grid-container')
const children = element.children
const childredTextContents = Array.from(children).map((child) =>
child.textContent.replace(/[\u200C]/g, '')
@@ -120,13 +119,13 @@ describe('Layout.GridContainer', () => {
it('should set given columns', () => {
const { rerender } = render(
-
- Item
-
+
+ Item
+
)
const element = document.querySelector(
- '.dnb-layout-grid-container'
+ '.dnb-grid-container'
) as HTMLElement
expect(element.style['_values']).toEqual({
@@ -136,15 +135,15 @@ describe('Layout.GridContainer', () => {
})
rerender(
-
- Item
-
+ Item
+
)
expect(element.style['_values']).toEqual({
@@ -155,9 +154,9 @@ describe('Layout.GridContainer', () => {
})
it('should set element', () => {
- render(content)
+ render(content)
- const element = document.querySelector('.dnb-layout-grid-container')
+ const element = document.querySelector('.dnb-grid-container')
expect(element.tagName).toBe('SECTION')
})
diff --git a/packages/dnb-eufemia/src/components/layout/__tests__/GridItem.test.tsx b/packages/dnb-eufemia/src/components/grid/__tests__/Item.test.tsx
similarity index 71%
rename from packages/dnb-eufemia/src/components/layout/__tests__/GridItem.test.tsx
rename to packages/dnb-eufemia/src/components/grid/__tests__/Item.test.tsx
index 60fd91ed163..fa05ae5a5bf 100644
--- a/packages/dnb-eufemia/src/components/layout/__tests__/GridItem.test.tsx
+++ b/packages/dnb-eufemia/src/components/grid/__tests__/Item.test.tsx
@@ -1,18 +1,17 @@
import React from 'react'
import { render } from '@testing-library/react'
import 'mock-match-media/jest-setup'
-import GridContainer from '../GridContainer'
-import GridItem from '../GridItem'
+import Grid from '../Grid'
-describe('Layout.GridItem', () => {
+describe('Grid.Item', () => {
it('should forward HTML attributes', () => {
render(
-
- Item
-
+
+ Item
+
)
- const element = document.querySelector('.dnb-layout-grid-item')
+ const element = document.querySelector('.dnb-grid-item')
const attributes = Array.from(element.attributes).map(
(attr) => attr.name
)
@@ -23,18 +22,18 @@ describe('Layout.GridItem', () => {
it('should support spacing props', () => {
const { rerender } = render(
-
- Item
-
+
+ Item
+
)
- const element = document.querySelector('.dnb-layout-grid-item ')
+ const element = document.querySelector('.dnb-grid-item ')
expect(element.classList).toContain('dnb-space__top--large')
rerender(
-
- Item
-
+
+ Item
+
)
expect(element.classList).toContain('dnb-space__top--x-large')
@@ -42,24 +41,24 @@ describe('Layout.GridItem', () => {
it('should contain given classes', () => {
render(
-
- Item
-
+
+ Item
+
)
- const element = document.querySelector('.dnb-layout-grid-item')
+ const element = document.querySelector('.dnb-grid-item')
expect(Array.from(element.classList)).toEqual([
'dnb-space',
- 'dnb-layout-grid-item',
+ 'dnb-grid-item',
'custom-class',
])
})
it('should set given span with media', () => {
render(
-
-
+ {
}}
>
Item A
-
+
- {
}}
>
Item B
-
+
- {
}}
>
Item C
-
+
- {
}}
>
Item D
-
-
+
+
)
- const elements: NodeListOf = document.querySelectorAll(
- '.dnb-layout-grid-item'
- )
+ const elements: NodeListOf =
+ document.querySelectorAll('.dnb-grid-item')
expect(elements[0].style['_values']).toEqual({
'--large-c-s': '1',
@@ -141,8 +139,8 @@ describe('Layout.GridItem', () => {
it('should support "end" and "full"', () => {
render(
-
-
+ {
}}
>
Item A
-
+
- {
}}
>
Item B
-
+
- {
}}
>
Item C
-
+
- {
}}
>
Item D
-
-
+
+
)
- const elements: NodeListOf = document.querySelectorAll(
- '.dnb-layout-grid-item'
- )
+ const elements: NodeListOf =
+ document.querySelectorAll('.dnb-grid-item')
expect(elements[0].style['_values']).toEqual({
'--large-c-e': '13',
@@ -224,16 +221,15 @@ describe('Layout.GridItem', () => {
it('should set given span', () => {
render(
-
- Item A
+
+ Item A
- Item B
-
+ Item B
+
)
- const elements: NodeListOf = document.querySelectorAll(
- '.dnb-layout-grid-item'
- )
+ const elements: NodeListOf =
+ document.querySelectorAll('.dnb-grid-item')
expect(elements[0].style['_values']).toEqual({
'--small-c-s': '1',
@@ -254,9 +250,9 @@ describe('Layout.GridItem', () => {
})
it('should set element', () => {
- render(content)
+ render(content)
- const element = document.querySelector('.dnb-layout-grid-item')
+ const element = document.querySelector('.dnb-grid-item')
expect(element.tagName).toBe('SECTION')
})
diff --git a/packages/dnb-eufemia/src/components/layout/__tests__/__image_snapshots__/layoutgridcontainer-have-to-match-responsive-size-on-large-viewport.snap.png b/packages/dnb-eufemia/src/components/grid/__tests__/__image_snapshots__/gridcontainer-have-to-match-responsive-size-on-large-viewport.snap.png
similarity index 100%
rename from packages/dnb-eufemia/src/components/layout/__tests__/__image_snapshots__/layoutgridcontainer-have-to-match-responsive-size-on-large-viewport.snap.png
rename to packages/dnb-eufemia/src/components/grid/__tests__/__image_snapshots__/gridcontainer-have-to-match-responsive-size-on-large-viewport.snap.png
diff --git a/packages/dnb-eufemia/src/components/layout/__tests__/__image_snapshots__/layoutgridcontainer-have-to-match-responsive-size-on-medium-viewport.snap.png b/packages/dnb-eufemia/src/components/grid/__tests__/__image_snapshots__/gridcontainer-have-to-match-responsive-size-on-medium-viewport.snap.png
similarity index 100%
rename from packages/dnb-eufemia/src/components/layout/__tests__/__image_snapshots__/layoutgridcontainer-have-to-match-responsive-size-on-medium-viewport.snap.png
rename to packages/dnb-eufemia/src/components/grid/__tests__/__image_snapshots__/gridcontainer-have-to-match-responsive-size-on-medium-viewport.snap.png
diff --git a/packages/dnb-eufemia/src/components/layout/__tests__/__image_snapshots__/layoutgridcontainer-have-to-match-responsive-size-on-small-viewport.snap.png b/packages/dnb-eufemia/src/components/grid/__tests__/__image_snapshots__/gridcontainer-have-to-match-responsive-size-on-small-viewport.snap.png
similarity index 100%
rename from packages/dnb-eufemia/src/components/layout/__tests__/__image_snapshots__/layoutgridcontainer-have-to-match-responsive-size-on-small-viewport.snap.png
rename to packages/dnb-eufemia/src/components/grid/__tests__/__image_snapshots__/gridcontainer-have-to-match-responsive-size-on-small-viewport.snap.png
diff --git a/packages/dnb-eufemia/src/components/grid/index.ts b/packages/dnb-eufemia/src/components/grid/index.ts
new file mode 100644
index 00000000000..810d55f7468
--- /dev/null
+++ b/packages/dnb-eufemia/src/components/grid/index.ts
@@ -0,0 +1,2 @@
+export { default as Container } from './Container'
+export { default as Item } from './Item'
diff --git a/packages/dnb-eufemia/src/components/layout/stories/Layout.stories.tsx b/packages/dnb-eufemia/src/components/grid/stories/Grid.stories.tsx
similarity index 80%
rename from packages/dnb-eufemia/src/components/layout/stories/Layout.stories.tsx
rename to packages/dnb-eufemia/src/components/grid/stories/Grid.stories.tsx
index 7082aa3a189..90c52bd589f 100644
--- a/packages/dnb-eufemia/src/components/layout/stories/Layout.stories.tsx
+++ b/packages/dnb-eufemia/src/components/grid/stories/Grid.stories.tsx
@@ -5,17 +5,13 @@
import React from 'react'
-import { Layout } from '../..'
+import { Grid } from '../..'
import '../style'
export default {
title: 'Eufemia/Components/Layout',
}
-const Grid = Layout.Grid
-const Item = Layout.Grid.Item
-// const { GridContainer: Grid, GridItem: Item } = Layout
-
export const colors = [
{ background: '#babeee' } as React.CSSProperties,
{ background: '#dfe0ee' } as React.CSSProperties,
@@ -25,13 +21,13 @@ export const colors = [
export const GridLayout = () => {
return (
-
- - {
style={colors[0]}
>
Item A
-
+
- - {
style={colors[1]}
>
Item B
-
+
- - {
style={colors[2]}
>
Item C
-
+
- - {
style={colors[3]}
>
Item D
-
-
+
+
)
}
diff --git a/packages/dnb-eufemia/src/components/layout/style.ts b/packages/dnb-eufemia/src/components/grid/style.ts
similarity index 100%
rename from packages/dnb-eufemia/src/components/layout/style.ts
rename to packages/dnb-eufemia/src/components/grid/style.ts
diff --git a/packages/dnb-eufemia/src/components/grid/style/dnb-grid.scss b/packages/dnb-eufemia/src/components/grid/style/dnb-grid.scss
new file mode 100644
index 00000000000..2dafd8ea1c8
--- /dev/null
+++ b/packages/dnb-eufemia/src/components/grid/style/dnb-grid.scss
@@ -0,0 +1,2 @@
+@import './grid-container.scss';
+@import './grid-item.scss';
diff --git a/packages/dnb-eufemia/src/components/layout/style/layout-grid-container.scss b/packages/dnb-eufemia/src/components/grid/style/grid-container.scss
similarity index 97%
rename from packages/dnb-eufemia/src/components/layout/style/layout-grid-container.scss
rename to packages/dnb-eufemia/src/components/grid/style/grid-container.scss
index 2d8da4c2792..613db7995be 100644
--- a/packages/dnb-eufemia/src/components/layout/style/layout-grid-container.scss
+++ b/packages/dnb-eufemia/src/components/grid/style/grid-container.scss
@@ -1,6 +1,6 @@
@import '../../../style/core/utilities.scss';
-.dnb-layout-grid-container {
+.dnb-grid-container {
display: grid;
grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
grid-auto-flow: dense;
diff --git a/packages/dnb-eufemia/src/components/layout/style/layout-grid-item.scss b/packages/dnb-eufemia/src/components/grid/style/grid-item.scss
similarity index 95%
rename from packages/dnb-eufemia/src/components/layout/style/layout-grid-item.scss
rename to packages/dnb-eufemia/src/components/grid/style/grid-item.scss
index f6d9945706a..8b79b9680cc 100644
--- a/packages/dnb-eufemia/src/components/layout/style/layout-grid-item.scss
+++ b/packages/dnb-eufemia/src/components/grid/style/grid-item.scss
@@ -1,4 +1,4 @@
-.dnb-layout-grid-item {
+.dnb-grid-item {
grid-column: var(--start-c) / var(--end-c);
--start-c: var(--small-c-s, 1);
diff --git a/packages/dnb-eufemia/src/components/layout/style/index.ts b/packages/dnb-eufemia/src/components/grid/style/index.ts
similarity index 54%
rename from packages/dnb-eufemia/src/components/layout/style/index.ts
rename to packages/dnb-eufemia/src/components/grid/style/index.ts
index ed0d0664b7a..a462aed622b 100644
--- a/packages/dnb-eufemia/src/components/layout/style/index.ts
+++ b/packages/dnb-eufemia/src/components/grid/style/index.ts
@@ -3,4 +3,4 @@
*
*/
-import './dnb-layout.scss'
+import './dnb-grid.scss'
diff --git a/packages/dnb-eufemia/src/components/index.ts b/packages/dnb-eufemia/src/components/index.ts
index bb52903e68c..cb0b9986356 100644
--- a/packages/dnb-eufemia/src/components/index.ts
+++ b/packages/dnb-eufemia/src/components/index.ts
@@ -30,6 +30,7 @@ import FormSet from './form-set/FormSet'
import FormStatus from './form-status/FormStatus'
import GlobalError from './global-error/GlobalError'
import GlobalStatus from './global-status/GlobalStatus'
+import Grid from './grid/Grid'
import Heading from './heading/Heading'
import HeightAnimation from './height-animation/HeightAnimation'
import HelpButton from './help-button/HelpButton'
@@ -38,7 +39,6 @@ import IconPrimary from './icon-primary/IconPrimary'
import InfoCard from './info-card/InfoCard'
import Input from './input/Input'
import InputMasked from './input-masked/InputMasked'
-import Layout from './layout/Layout'
import Logo from './logo/Logo'
import Modal from './modal/Modal'
import NumberFormat from './number-format/NumberFormat'
@@ -84,6 +84,7 @@ export {
FormStatus,
GlobalError,
GlobalStatus,
+ Grid,
Heading,
HeightAnimation,
HelpButton,
@@ -92,7 +93,6 @@ export {
InfoCard,
Input,
InputMasked,
- Layout,
Logo,
Modal,
NumberFormat,
diff --git a/packages/dnb-eufemia/src/components/layout/Grid.tsx b/packages/dnb-eufemia/src/components/layout/Grid.tsx
deleted file mode 100644
index f60e57de7b2..00000000000
--- a/packages/dnb-eufemia/src/components/layout/Grid.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import GridContainer from './GridContainer'
-import GridItem from './GridItem'
-
-const Grid = GridContainer as typeof GridContainer & {
- Item: typeof GridItem
-}
-Grid.Item = GridItem
-
-export default Grid
diff --git a/packages/dnb-eufemia/src/components/layout/index.ts b/packages/dnb-eufemia/src/components/layout/index.ts
deleted file mode 100644
index c7260bc0ea0..00000000000
--- a/packages/dnb-eufemia/src/components/layout/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export { default as Card } from '../card/Card'
-export { default as FlexContainer } from '../flex/Container'
-export { default as FlexItem } from '../flex/Item'
-export { default as GridContainer } from './GridContainer'
-export { default as GridItem } from './GridItem'
-export { default as Stack } from '../flex/Stack'
-export { default as Horizontal } from '../flex/Horizontal'
-export { default as Vertical } from '../flex/Vertical'
-export { default as Grid } from './Grid'
diff --git a/packages/dnb-eufemia/src/components/layout/style/dnb-layout.scss b/packages/dnb-eufemia/src/components/layout/style/dnb-layout.scss
deleted file mode 100644
index a792c6fce3b..00000000000
--- a/packages/dnb-eufemia/src/components/layout/style/dnb-layout.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import './layout-grid-container.scss';
-@import './layout-grid-item.scss';
diff --git a/packages/dnb-eufemia/src/components/lib.ts b/packages/dnb-eufemia/src/components/lib.ts
index ee3392af714..ef7842c7183 100644
--- a/packages/dnb-eufemia/src/components/lib.ts
+++ b/packages/dnb-eufemia/src/components/lib.ts
@@ -30,6 +30,7 @@ import FormSet from './form-set/FormSet'
import FormStatus from './form-status/FormStatus'
import GlobalError from './global-error/GlobalError'
import GlobalStatus from './global-status/GlobalStatus'
+import Grid from './grid/Grid'
import Heading from './heading/Heading'
import HeightAnimation from './height-animation/HeightAnimation'
import HelpButton from './help-button/HelpButton'
@@ -38,7 +39,6 @@ import IconPrimary from './icon-primary/IconPrimary'
import InfoCard from './info-card/InfoCard'
import Input from './input/Input'
import InputMasked from './input-masked/InputMasked'
-import Layout from './layout/Layout'
import Logo from './logo/Logo'
import Modal from './modal/Modal'
import NumberFormat from './number-format/NumberFormat'
@@ -84,6 +84,7 @@ export {
FormStatus,
GlobalError,
GlobalStatus,
+ Grid,
Heading,
HeightAnimation,
HelpButton,
@@ -92,7 +93,6 @@ export {
InfoCard,
Input,
InputMasked,
- Layout,
Logo,
Modal,
NumberFormat,
@@ -139,6 +139,7 @@ export const getComponents = () => {
FormStatus,
GlobalError,
GlobalStatus,
+ Grid,
Heading,
HeightAnimation,
HelpButton,
@@ -147,7 +148,6 @@ export const getComponents = () => {
InfoCard,
Input,
InputMasked,
- Layout,
Logo,
Modal,
NumberFormat,
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.screenshot.test.ts b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.screenshot.test.ts
index fe7be5d06e7..080fc2e7947 100644
--- a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.screenshot.test.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.screenshot.test.ts
@@ -8,7 +8,7 @@ import {
setupPageScreenshot,
} from '../../../../core/jest/jestSetupScreenshots'
-describe('Layout.FieldBlock', () => {
+describe('FieldBlock', () => {
setupPageScreenshot({
url: '/uilib/extensions/forms/create-component/FieldBlock/demos/',
})
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/layoutfieldblock-have-to-match-widths.snap.png b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-have-to-match-widths.snap.png
similarity index 100%
rename from packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/layoutfieldblock-have-to-match-widths.snap.png
rename to packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-have-to-match-widths.snap.png
diff --git a/packages/dnb-eufemia/src/index.ts b/packages/dnb-eufemia/src/index.ts
index 128b682f076..9bbc138c258 100644
--- a/packages/dnb-eufemia/src/index.ts
+++ b/packages/dnb-eufemia/src/index.ts
@@ -57,6 +57,7 @@ import FormSet from './components/form-set/FormSet'
import FormStatus from './components/form-status/FormStatus'
import GlobalError from './components/global-error/GlobalError'
import GlobalStatus from './components/global-status/GlobalStatus'
+import Grid from './components/grid/Grid'
import Heading from './components/heading/Heading'
import HeightAnimation from './components/height-animation/HeightAnimation'
import HelpButton from './components/help-button/HelpButton'
@@ -65,7 +66,6 @@ import IconPrimary from './components/icon-primary/IconPrimary'
import InfoCard from './components/info-card/InfoCard'
import Input from './components/input/Input'
import InputMasked from './components/input-masked/InputMasked'
-import Layout from './components/layout/Layout'
import Logo from './components/logo/Logo'
import Modal from './components/modal/Modal'
import NumberFormat from './components/number-format/NumberFormat'
@@ -138,6 +138,7 @@ export {
FormStatus,
GlobalError,
GlobalStatus,
+ Grid,
Heading,
HeightAnimation,
HelpButton,
@@ -146,7 +147,6 @@ export {
InfoCard,
Input,
InputMasked,
- Layout,
Logo,
Modal,
NumberFormat,
diff --git a/packages/dnb-eufemia/src/style/dnb-ui-components.scss b/packages/dnb-eufemia/src/style/dnb-ui-components.scss
index c5285362fa7..b3ab9a9f57c 100644
--- a/packages/dnb-eufemia/src/style/dnb-ui-components.scss
+++ b/packages/dnb-eufemia/src/style/dnb-ui-components.scss
@@ -26,6 +26,7 @@
@import '../components/form-status/style/dnb-form-status.scss';
@import '../components/global-error/style/dnb-global-error.scss';
@import '../components/global-status/style/dnb-global-status.scss';
+@import '../components/grid/style/dnb-grid.scss';
@import '../components/heading/style/dnb-heading.scss';
@import '../components/height-animation/style/dnb-height-animation.scss';
@import '../components/help-button/style/dnb-help-button.scss';
@@ -33,7 +34,6 @@
@import '../components/info-card/style/dnb-info-card.scss';
@import '../components/input/style/dnb-input.scss';
@import '../components/input-masked/style/dnb-input-masked.scss';
-@import '../components/layout/style/dnb-layout.scss';
@import '../components/logo/style/dnb-logo.scss';
@import '../components/modal/style/dnb-modal.scss';
@import '../components/number-format/style/dnb-number-format.scss';