docs: adds import statement to info doc for layout (#4018)

dnbexperience · Sep 27, 2024 · 0508c4b · 0508c4b
1 parent a9d973a
commit 0508c4b
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 0 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/container/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/container/info.mdx
@@ -4,6 +4,12 @@ showTabs: true
 
 ## Description
 
+## Import
+
+```tsx
+import { Flex } from '@dnb/eufemia'
+```
+
 `Flex.Container` is a building block for [CSS flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout) based layout of contents and components.
 
 **NB:** For form layouts, use [Flex.Stack](/uilib/layout/flex/stack/) instead.

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/item/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/item/info.mdx
@@ -4,6 +4,12 @@ showTabs: true
 
 import * as Examples from './Examples'
 
+## Import
+
+```tsx
+import { Flex } from '@dnb/eufemia'
+```
+
 ## Description
 
 `Flex.Item` is a building block for [CSS flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout) based layout of contents and components. Should be used in combination with [Flex.Container](/uilib/layout/flex/container/).

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/stack/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/stack/info.mdx
@@ -4,6 +4,12 @@ showTabs: true
 
 import * as Examples from './Examples'
 
+## Import
+
+```tsx
+import { Flex } from '@dnb/eufemia'
+```
+
 ## Description
 
 `Flex.Stack` is an outer block element for wrapping content to get the correct layout and spacing between region and region headings.

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/layout/form-row/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/layout/form-row/info.mdx
@@ -12,6 +12,12 @@ import {
 } from 'Docs/uilib/layout/form-row/Examples'
 import DeprecationInfo from 'Docs/uilib/layout/form-set-row-deprecation'
 
+## Import
+
+```tsx
+import { FormRow } from '@dnb/eufemia'
+```
+
 ## Description
 
 The FormRow component is a helper to more easily achieve often used DNB form layout setups.

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/layout/form-set/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/layout/form-set/info.mdx
@@ -5,6 +5,12 @@ showTabs: true
 import { FormSetInfoVertical } from 'Docs/uilib/layout/form-set/Examples'
 import DeprecationInfo from 'Docs/uilib/layout/form-set-row-deprecation'
 
+## Import
+
+```tsx
+import { FormSet } from '@dnb/eufemia'
+```
+
 ## Description
 
 The FormSet component gives you both a HTML form element `<form>` by default and also a React provider for [FormRow](/uilib/layout/form-row). This way you can define more globally e.g. if all the rows should be displayed **vertically**.

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/layout/grid/container/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/layout/grid/container/info.mdx
@@ -4,6 +4,12 @@ showTabs: true
 
 import * as Examples from '../item/Examples'
 
+## Import
+
+```tsx
+import { Grid } from '@dnb/eufemia'
+```
+
 ## Description
 
 `Grid.Container` is a building block for [CSS grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) based layouts.

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/layout/grid/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/layout/grid/info.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { Grid } from '@dnb/eufemia'
+```
+
 ## Description
 
 To make it easier to build responsive application layouts in line with defined design sketches, there are a number of components for layout.

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/layout/grid/item/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/layout/grid/item/info.mdx
@@ -4,6 +4,12 @@ showTabs: true
 
 import * as Examples from './Examples'
 
+## Import
+
+```tsx
+import { Grid } from '@dnb/eufemia'
+```
+
 ## Description
 
 `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/layout/grid/container/).

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/layout/space/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/layout/space/info.mdx
@@ -5,6 +5,12 @@ showTabs: true
 import SpacingTable from 'Docs/uilib/layout/spacing-table.mdx'
 import * as Examples from 'Docs/uilib/layout/space/Examples'
 
+## Import
+
+```tsx
+import { Space } from '@dnb/eufemia'
+```
+
 ## Description
 
 The Space component provides `margins` within the [provided spacing patterns](/uilib/usage/layout/spacing#spacing-helpers).