From 0508c4b00038e1fbcbb2cd91b56b03ac06f1af4b Mon Sep 17 00:00:00 2001 From: Anders Date: Fri, 27 Sep 2024 10:50:54 +0200 Subject: [PATCH] docs: adds import statement to info doc for layout (#4018) --- .../src/docs/uilib/layout/flex/container/info.mdx | 6 ++++++ .../src/docs/uilib/layout/flex/item/info.mdx | 6 ++++++ .../src/docs/uilib/layout/flex/stack/info.mdx | 6 ++++++ .../src/docs/uilib/layout/form-row/info.mdx | 6 ++++++ .../src/docs/uilib/layout/form-set/info.mdx | 6 ++++++ .../src/docs/uilib/layout/grid/container/info.mdx | 6 ++++++ .../src/docs/uilib/layout/grid/info.mdx | 6 ++++++ .../src/docs/uilib/layout/grid/item/info.mdx | 6 ++++++ .../src/docs/uilib/layout/space/info.mdx | 6 ++++++ 9 files changed, 54 insertions(+) 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 index de7f570f4da..01540f9f36f 100644 --- 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 index bd6e1169036..921d6f34a10 100644 --- 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 index 12643b5a5d5..6e975eddacb 100644 --- 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 index f675c5fe5f0..3ae2b800f0e 100644 --- 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 index 8ede3a1f869..0a0d245a7eb 100644 --- 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 `
` 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 index 959af1796af..1ca323c2dfd 100644 --- 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 index 02695d102c5..6a529b28552 100644 --- 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 index 2abcbabaaf5..3685d7cdd2c 100644 --- 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 index c5244c83615..305c3be32d9 100644 --- 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).