chore(Grid): move Grid from layout to components (#2750)

This PR is based on #2748 - E.g. `Layout.GridContainer` => `Grid.Container` etc. - Use `chore` as it is already a part of the change-log. --------- Co-authored-by: Anders <anderslangseth@gmail.com>
dnbexperience · Oct 13, 2023 · 85cbe8c · 85cbe8c
1 parent def1ad1
commit 85cbe8c
Show file tree

Hide file tree

Showing 51 changed files with 437 additions and 378 deletions.
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
@@ -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'
+
+<Info />
+<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
@@ -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 (
+    <ComponentBox scope={{ TestElement, colors }}>
+      <Grid.Container rowGap columnGap>
+        <Grid.Item
+          span={{
+            small: [1, 2],
+            medium: [1, 3],
+            large: [1, 12],
+          }}
+          style={colors[0]}
+          element={TestElement}
+        >
+          Item A
+        </Grid.Item>
+
+        <Grid.Item
+          span={{
+            small: [3, 4],
+            medium: [4, 6],
+            large: [1, 4],
+          }}
+          style={colors[1]}
+          element={TestElement}
+        >
+          Item B
+        </Grid.Item>
+
+        <Grid.Item
+          span={{
+            small: [2, 3],
+            medium: [4, 6],
+            large: [5, 8],
+          }}
+          style={colors[2]}
+          element={TestElement}
+        >
+          Item C
+        </Grid.Item>
+
+        <Grid.Item
+          span={{
+            small: [1, 4],
+            medium: [4, 6],
+            large: [9, 12],
+          }}
+          style={colors[3]}
+          element={TestElement}
+        >
+          Item D
+        </Grid.Item>
+      </Grid.Container>
+    </ComponentBox>
+  )
+}
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
@@ -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'
+
+<Info />
+<Demos />
diff --git a/...ponents/layout/GridContainer/Examples.tsx → ...ib/components/grid/container/Examples.tsx b/...ponents/layout/GridContainer/Examples.tsx → ...ib/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 (
     <ComponentBox
-      scope={{ Grid, Item, TestElement, colors }}
-      data-visual-test="layout-grid-container-responsive"
+      scope={{ TestElement, colors }}
+      data-visual-test="grid-container-responsive"
     >
-      <Grid rowGap columnGap>
-        <Item
+      <Grid.Container rowGap columnGap>
+        <Grid.Item
           span={{
             small: [1, 2],
             medium: [1, 3],
@@ -28,9 +26,9 @@ export const ResponsiveUsage = () => {
           element={TestElement}
         >
           Item A
-        </Item>
+        </Grid.Item>
 
-        <Item
+        <Grid.Item
           span={{
             small: [3, 4],
             medium: [4, 6],
@@ -40,9 +38,9 @@ export const ResponsiveUsage = () => {
           element={TestElement}
         >
           Item B
-        </Item>
+        </Grid.Item>
 
-        <Item
+        <Grid.Item
           span={{
             small: [2, 3],
             medium: [4, 6],
@@ -52,9 +50,9 @@ export const ResponsiveUsage = () => {
           element={TestElement}
         >
           Item C
-        </Item>
+        </Grid.Item>
 
-        <Item
+        <Grid.Item
           span={{
             small: [1, 4],
             medium: [4, 6],
@@ -64,22 +62,22 @@ export const ResponsiveUsage = () => {
           element={TestElement}
         >
           Item D
-        </Item>
-      </Grid>
+        </Grid.Item>
+      </Grid.Container>
     </ComponentBox>
   )
 }
 
 export const CustomColumns = () => {
   return (
-    <ComponentBox scope={{ Grid, Item, TestElement, colors }}>
-      <Grid
+    <ComponentBox scope={{ Grid, TestElement, colors }}>
+      <Grid.Container
         columns={{ small: 4, medium: false }}
         // columns={12} // only 12
         rowGap
         columnGap
       >
-        <Item
+        <Grid.Item
           span={{
             small: 'full',
             large: [1, 12],
@@ -88,9 +86,9 @@ export const CustomColumns = () => {
           element={TestElement}
         >
           Item A
-        </Item>
+        </Grid.Item>
 
-        <Item
+        <Grid.Item
           span={{
             small: [1, 'end'],
             large: [1, 6],
@@ -99,9 +97,9 @@ export const CustomColumns = () => {
           element={TestElement}
         >
           Item B
-        </Item>
+        </Grid.Item>
 
-        <Item
+        <Grid.Item
           span={{
             small: [1, 2],
             large: [7, 'end'],
@@ -110,9 +108,9 @@ export const CustomColumns = () => {
           element={TestElement}
         >
           Item C
-        </Item>
+        </Grid.Item>
 
-        <Item
+        <Grid.Item
           span={{
             small: [3, 4],
             large: 'full',
@@ -121,8 +119,8 @@ export const CustomColumns = () => {
           element={TestElement}
         >
           Item D
-        </Item>
-      </Grid>
+        </Grid.Item>
+      </Grid.Container>
     </ComponentBox>
   )
 }
diff --git a/...components/layout/GridContainer/demos.mdx → ...uilib/components/grid/container/demos.mdx b/...components/layout/GridContainer/demos.mdx → ...uilib/components/grid/container/demos.mdx
diff --git a/...ages/dnb-design-system-portal/src/docs/uilib/components/grid/container/info.mdx b/...ages/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(
+  <Grid.Container>
+    <Grid.Item span={[1, 6]}>Item A</Grid.Item>
+    <Grid.Item span={[7, 12]}>Item B</Grid.Item>
+  </Grid.Container>,
+)
+```
+
+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`
+
+<Examples.BasicSpan />
+
+### Gap
+
+By default is no gap given.
diff --git a/...nents/layout/GridContainer/properties.mdx → .../components/grid/container/properties.mdx b/...nents/layout/GridContainer/properties.mdx → .../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
@@ -0,0 +1,11 @@
+---
+showTabs: true
+---
+
+import * as Examples from './Examples'
+
+## Demos
+
+### Responsive Grid.Container
+
+<Examples.ResponsiveGridContainer />
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
@@ -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
@@ -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'
+
+<Info />
+<Demos />