From 9630234420a2cabaca53b0ba6031e82c0fffe16e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Wed, 11 Oct 2023 22:25:19 +0200 Subject: [PATCH] feat(Flex): add new Flex layout component --- .../docs/uilib/components/card/Examples.tsx | 6 +- .../src/docs/uilib/components/card/info.mdx | 18 +- .../docs/uilib/components/card/properties.mdx | 18 +- .../src/docs/uilib/components/flex.mdx | 18 ++ .../docs/uilib/components/flex/Examples.tsx | 283 ++++++++++++++++++ .../docs/uilib/components/flex/container.mdx | 19 ++ .../container}/Examples.tsx | 150 +++++----- .../container}/demos.mdx | 8 +- .../uilib/components/flex/container/info.mdx | 51 ++++ .../container}/properties.mdx | 2 +- .../src/docs/uilib/components/flex/demos.mdx | 27 ++ .../src/docs/uilib/components/flex/info.mdx | 18 ++ .../src/docs/uilib/components/flex/item.mdx | 19 ++ .../FlexItem => flex/item}/Examples.tsx | 36 +-- .../{layout/FlexItem => flex/item}/demos.mdx | 0 .../{layout/FlexItem => flex/item}/info.mdx | 16 +- .../FlexItem => flex/item}/properties.mdx | 16 +- .../src/docs/uilib/components/flex/stack.mdx | 19 ++ .../{layout/Stack => flex/stack}/Examples.tsx | 30 +- .../{layout/Stack => flex/stack}/demos.mdx | 0 .../{layout/Stack => flex/stack}/info.mdx | 4 +- .../components/flex/stack/properties.mdx | 13 + .../docs/uilib/components/layout/Examples.tsx | 70 ++--- .../uilib/components/layout/FlexContainer.mdx | 24 -- .../components/layout/FlexContainer/info.mdx | 41 --- .../docs/uilib/components/layout/FlexItem.mdx | 24 -- .../docs/uilib/components/layout/Stack.mdx | 24 -- .../components/layout/Stack/properties.mdx | 13 - .../docs/uilib/components/layout/demos.mdx | 4 +- .../src/docs/uilib/components/layout/info.mdx | 18 +- .../src/docs/uilib/extensions/forms.mdx | 2 +- .../docs/uilib/extensions/forms/Examples.tsx | 22 +- .../DataContext/Provider/Examples.tsx | 34 +-- .../forms/create-component/FieldBlock.mdx | 2 +- .../create-component/FieldBlock/Examples.tsx | 6 +- .../create-component/FieldBlock/info.mdx | 6 +- .../extensions/forms/demo-cases/Examples.tsx | 12 +- .../Form/MainHeading/Examples.tsx | 10 +- .../Form/SubHeading/Examples.tsx | 14 +- .../forms/extended-features/Form/info.mdx | 2 +- .../Iterate/Array/Examples.tsx | 10 +- .../Iterate/Array/properties.mdx | 8 +- .../ArrayRemoveElementButton/Examples.tsx | 14 +- .../StepsLayout/Step/properties.mdx | 12 +- .../src/shared/parts/ListComponents.tsx | 6 +- .../src/shared/parts/ListElements.tsx | 6 +- .../src/shared/parts/ListExtensions.tsx | 6 +- .../src/shared/parts/ListFragments.tsx | 6 +- packages/dnb-eufemia/src/components/Flex.ts | 14 + .../dnb-eufemia/src/components/card/Card.tsx | 15 +- .../components/card/__tests__/Card.test.tsx | 22 +- .../FlexContainer.tsx => flex/Container.tsx} | 4 +- .../dnb-eufemia/src/components/flex/Flex.tsx | 1 + .../{layout => flex}/Horizontal.tsx | 9 +- .../{layout/FlexItem.tsx => flex/Item.tsx} | 12 +- .../src/components/{layout => flex}/Stack.tsx | 11 +- .../components/{layout => flex}/Vertical.tsx | 9 +- .../__tests__/Container.screenshot.test.ts} | 18 +- .../__tests__/Container.test.tsx} | 265 ++++++++-------- .../__tests__/Horizontal.test.tsx | 50 ++-- .../__tests__/Item.screenshot.test.ts} | 12 +- .../__tests__/Item.test.tsx} | 265 ++++++++-------- .../components/flex/__tests__/Stack.test.tsx | 106 +++++++ .../__tests__/Vertical.test.tsx | 52 ++-- ...xcontainer-have-to-match-divider.snap.png} | Bin ...to-match-field-on-large-viewport.snap.png} | Bin ...to-match-field-on-small-viewport.snap.png} | Bin ...-match-field-on-x-small-viewport.snap.png} | Bin ...esponsive-size-on-large-viewport.snap.png} | Bin ...sponsive-size-on-medium-viewport.snap.png} | Bin ...esponsive-size-on-small-viewport.snap.png} | Bin ...ponsive-size-on-x-small-viewport.snap.png} | Bin .../{layout => flex}/__tests__/utils.test.tsx | 2 +- .../dnb-eufemia/src/components/flex/index.ts | 5 + .../dnb-eufemia/src/components/flex/style.ts | 6 + .../src/components/flex/style/dnb-flex.scss | 3 + .../style/flex-container.scss} | 2 +- .../style/flex-item.scss} | 8 +- .../src/components/flex/style/flex-stack.scss | 3 + .../src/components/flex/style/index.ts | 6 + .../src/components/{layout => flex}/types.ts | 0 .../src/components/{layout => flex}/utils.tsx | 0 packages/dnb-eufemia/src/components/index.ts | 2 + .../src/components/layout/Flex.tsx | 9 - .../layout/__tests__/Stack.test.tsx | 104 ------- .../src/components/layout/index.ts | 11 +- .../components/layout/style/dnb-layout.scss | 3 - .../components/layout/style/layout-stack.scss | 3 - packages/dnb-eufemia/src/components/lib.ts | 3 + .../Field/ArraySelection/ArraySelection.tsx | 2 +- .../forms/Field/CountryCode/CountryCode.tsx | 2 +- .../src/extensions/forms/Field/Date/Date.tsx | 2 +- .../extensions/forms/Field/Number/Number.tsx | 2 +- .../forms/Field/PhoneNumber/PhoneNumber.tsx | 2 +- .../forms/Field/Selection/Selection.tsx | 2 +- .../extensions/forms/Field/String/String.tsx | 2 +- .../extensions/forms/Field/Toggle/Toggle.tsx | 2 +- .../style/dnb-form-main-heading.scss | 2 +- .../style/dnb-form-sub-heading.scss | 2 +- .../extensions/forms/Iterate/Array/Array.tsx | 11 +- .../forms/StepsLayout/Step/Step.tsx | 9 +- .../forms/Value/Boolean/Boolean.tsx | 2 +- .../extensions/forms/Value/Number/Number.tsx | 2 +- .../extensions/forms/Value/String/String.tsx | 2 +- .../forms/ValueBlock/ValueBlock.tsx | 2 +- packages/dnb-eufemia/src/index.ts | 2 + .../src/style/dnb-ui-components.scss | 1 + 107 files changed, 1326 insertions(+), 927 deletions(-) create mode 100644 packages/dnb-design-system-portal/src/docs/uilib/components/flex.mdx create mode 100644 packages/dnb-design-system-portal/src/docs/uilib/components/flex/Examples.tsx create mode 100644 packages/dnb-design-system-portal/src/docs/uilib/components/flex/container.mdx rename packages/dnb-design-system-portal/src/docs/uilib/components/{layout/FlexContainer => flex/container}/Examples.tsx (57%) rename packages/dnb-design-system-portal/src/docs/uilib/components/{layout/FlexContainer => flex/container}/demos.mdx (82%) create mode 100644 packages/dnb-design-system-portal/src/docs/uilib/components/flex/container/info.mdx rename packages/dnb-design-system-portal/src/docs/uilib/components/{layout/FlexContainer => flex/container}/properties.mdx (96%) create mode 100644 packages/dnb-design-system-portal/src/docs/uilib/components/flex/demos.mdx create mode 100644 packages/dnb-design-system-portal/src/docs/uilib/components/flex/info.mdx create mode 100644 packages/dnb-design-system-portal/src/docs/uilib/components/flex/item.mdx rename packages/dnb-design-system-portal/src/docs/uilib/components/{layout/FlexItem => flex/item}/Examples.tsx (59%) rename packages/dnb-design-system-portal/src/docs/uilib/components/{layout/FlexItem => flex/item}/demos.mdx (100%) rename packages/dnb-design-system-portal/src/docs/uilib/components/{layout/FlexItem => flex/item}/info.mdx (61%) rename packages/dnb-design-system-portal/src/docs/uilib/components/{layout/FlexItem => flex/item}/properties.mdx (93%) create mode 100644 packages/dnb-design-system-portal/src/docs/uilib/components/flex/stack.mdx rename packages/dnb-design-system-portal/src/docs/uilib/components/{layout/Stack => flex/stack}/Examples.tsx (89%) rename packages/dnb-design-system-portal/src/docs/uilib/components/{layout/Stack => flex/stack}/demos.mdx (100%) rename packages/dnb-design-system-portal/src/docs/uilib/components/{layout/Stack => flex/stack}/info.mdx (54%) create mode 100644 packages/dnb-design-system-portal/src/docs/uilib/components/flex/stack/properties.mdx delete mode 100644 packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexContainer.mdx delete mode 100644 packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexContainer/info.mdx delete mode 100644 packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexItem.mdx delete mode 100644 packages/dnb-design-system-portal/src/docs/uilib/components/layout/Stack.mdx delete mode 100644 packages/dnb-design-system-portal/src/docs/uilib/components/layout/Stack/properties.mdx create mode 100644 packages/dnb-eufemia/src/components/Flex.ts rename packages/dnb-eufemia/src/components/{layout/FlexContainer.tsx => flex/Container.tsx} (98%) create mode 100644 packages/dnb-eufemia/src/components/flex/Flex.tsx rename packages/dnb-eufemia/src/components/{layout => flex}/Horizontal.tsx (59%) rename packages/dnb-eufemia/src/components/{layout/FlexItem.tsx => flex/Item.tsx} (87%) rename packages/dnb-eufemia/src/components/{layout => flex}/Stack.tsx (71%) rename packages/dnb-eufemia/src/components/{layout => flex}/Vertical.tsx (59%) rename packages/dnb-eufemia/src/components/{layout/__tests__/FlexContainer.screenshot.test.ts => flex/__tests__/Container.screenshot.test.ts} (61%) rename packages/dnb-eufemia/src/components/{layout/__tests__/FlexContainer.test.tsx => flex/__tests__/Container.test.tsx} (57%) rename packages/dnb-eufemia/src/components/{layout => flex}/__tests__/Horizontal.test.tsx (60%) rename packages/dnb-eufemia/src/components/{layout/__tests__/FlexItem.screenshot.test.ts => flex/__tests__/Item.screenshot.test.ts} (77%) rename packages/dnb-eufemia/src/components/{layout/__tests__/FlexItem.test.tsx => flex/__tests__/Item.test.tsx} (59%) create mode 100644 packages/dnb-eufemia/src/components/flex/__tests__/Stack.test.tsx rename packages/dnb-eufemia/src/components/{layout => flex}/__tests__/Vertical.test.tsx (62%) rename packages/dnb-eufemia/src/components/{layout/__tests__/__image_snapshots__/layoutflexcontainer-have-to-match-divider.snap.png => flex/__tests__/__image_snapshots__/flexcontainer-have-to-match-divider.snap.png} (100%) rename packages/dnb-eufemia/src/components/{layout/__tests__/__image_snapshots__/layoutflexcontainer-have-to-match-field-on-large-viewport.snap.png => flex/__tests__/__image_snapshots__/flexcontainer-have-to-match-field-on-large-viewport.snap.png} (100%) rename packages/dnb-eufemia/src/components/{layout/__tests__/__image_snapshots__/layoutflexcontainer-have-to-match-field-on-small-viewport.snap.png => flex/__tests__/__image_snapshots__/flexcontainer-have-to-match-field-on-small-viewport.snap.png} (100%) rename packages/dnb-eufemia/src/components/{layout/__tests__/__image_snapshots__/layoutflexcontainer-have-to-match-field-on-x-small-viewport.snap.png => flex/__tests__/__image_snapshots__/flexcontainer-have-to-match-field-on-x-small-viewport.snap.png} (100%) rename packages/dnb-eufemia/src/components/{layout/__tests__/__image_snapshots__/layoutflexitem-have-to-match-responsive-size-on-large-viewport.snap.png => flex/__tests__/__image_snapshots__/flexitem-have-to-match-responsive-size-on-large-viewport.snap.png} (100%) rename packages/dnb-eufemia/src/components/{layout/__tests__/__image_snapshots__/layoutflexitem-have-to-match-responsive-size-on-medium-viewport.snap.png => flex/__tests__/__image_snapshots__/flexitem-have-to-match-responsive-size-on-medium-viewport.snap.png} (100%) rename packages/dnb-eufemia/src/components/{layout/__tests__/__image_snapshots__/layoutflexitem-have-to-match-responsive-size-on-small-viewport.snap.png => flex/__tests__/__image_snapshots__/flexitem-have-to-match-responsive-size-on-small-viewport.snap.png} (100%) rename packages/dnb-eufemia/src/components/{layout/__tests__/__image_snapshots__/layoutflexitem-have-to-match-responsive-size-on-x-small-viewport.snap.png => flex/__tests__/__image_snapshots__/flexitem-have-to-match-responsive-size-on-x-small-viewport.snap.png} (100%) rename packages/dnb-eufemia/src/components/{layout => flex}/__tests__/utils.test.tsx (95%) create mode 100644 packages/dnb-eufemia/src/components/flex/index.ts create mode 100644 packages/dnb-eufemia/src/components/flex/style.ts create mode 100644 packages/dnb-eufemia/src/components/flex/style/dnb-flex.scss rename packages/dnb-eufemia/src/components/{layout/style/layout-flex-container.scss => flex/style/flex-container.scss} (98%) rename packages/dnb-eufemia/src/components/{layout/style/layout-flex-item.scss => flex/style/flex-item.scss} (81%) create mode 100644 packages/dnb-eufemia/src/components/flex/style/flex-stack.scss create mode 100644 packages/dnb-eufemia/src/components/flex/style/index.ts rename packages/dnb-eufemia/src/components/{layout => flex}/types.ts (100%) rename packages/dnb-eufemia/src/components/{layout => flex}/utils.tsx (100%) delete mode 100644 packages/dnb-eufemia/src/components/layout/Flex.tsx delete mode 100644 packages/dnb-eufemia/src/components/layout/__tests__/Stack.test.tsx delete mode 100644 packages/dnb-eufemia/src/components/layout/style/layout-stack.scss diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/card/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/card/Examples.tsx index fa1957aed6d..3a905b4a454 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/card/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/card/Examples.tsx @@ -1,5 +1,5 @@ import ComponentBox from '../../../../shared/tags/ComponentBox' -import { Card, Layout, P } from '@dnb/eufemia/src' +import { Card, Flex, P } from '@dnb/eufemia/src' import { Field, Form } from '@dnb/eufemia/src/extensions/forms' export const Default = () => { @@ -34,10 +34,10 @@ export const VerticalFields = () => { return ( - + - + ) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/card/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/card/info.mdx index 212792477e5..030af23d16f 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/card/info.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/card/info.mdx @@ -8,10 +8,26 @@ import * as Examples from './Examples' `Card` is a block section element showing the white box with rounded gray borders, adding spacing automatically. -It uses [Layout.FlexItem](/uilib/components/layout/FlexItem) under the hood. When one of these props where given, `stack`, `direction` or `spacing` – the [Layout.FlexContainer](/uilib/components/layout/FlexContainer) will be used. +It uses [Flex.Item](/uilib/components/flex/item) under the hood. When one of these props where given, `stack`, `direction` or `spacing` – the [Flex.Container](/uilib/components/flex/container) will be used. **BETA:** The design is not 100% finalised and may change to be officially approved by UX through an RFC. +```jsx +import { Card } from '@dnb/eufemia' +import { Form, Field } from '@dnb/eufemia/extensions/forms' + +render( + + + + + + + + , +) +``` + ## Accessibility It uses a `section` element. Which allows you to add an `aria-label` or `aria-labelledby` to provide screen readers with landmarks. diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/card/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/card/properties.mdx index 275daca53d6..412b54278fe 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/card/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/card/properties.mdx @@ -4,12 +4,12 @@ showTabs: true ## Properties -| Property | Type | Description | -| -------------------------------------------------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------- | -| `stack` | `boolean` | _(optional)_ True to stack the sub components with lines between. The `spacing` will default to `medium`. | -| `direction` | `string` | _(optional)_ Defaults to `vertical`. | -| `alignSelf` | `string` | _(optional)_ Defaults to `stretch`. | -| `element` | `string` or `React.Element` | _(optional)_ Define the type of element. Defaults to `section`. | -| [Layout.FlexContainer](/uilib/components/layout/FlexContainer) | Various | _(optional)_ FlexContainer properties. | -| [Layout.FlexItem](/uilib/components/layout/FlexItem) | Various | _(optional)_ FlexItem properties. | -| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | +| Property | Type | Description | +| -------------------------------------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------- | +| `stack` | `boolean` | _(optional)_ True to stack the sub components with lines between. The `spacing` will default to `medium`. | +| `direction` | `string` | _(optional)_ Defaults to `vertical`. | +| `alignSelf` | `string` | _(optional)_ Defaults to `stretch`. | +| `element` | `string` or `React.Element` | _(optional)_ Define the type of element. Defaults to `section`. | +| [Flex.Container](/uilib/components/flex/container) | Various | _(optional)_ Flex.Container properties. | +| [Flex.Item](/uilib/components/flex/item) | Various | _(optional)_ Flex.Item properties. | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/flex.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/flex.mdx new file mode 100644 index 00000000000..16c224d4078 --- /dev/null +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/flex.mdx @@ -0,0 +1,18 @@ +--- +title: 'Flex' +description: 'To make it easier to build application layout and form-views 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/flex/info' +import Demos from 'Docs/uilib/components/flex/demos' + + + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/flex/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/Examples.tsx new file mode 100644 index 00000000000..6a15a119c7f --- /dev/null +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/Examples.tsx @@ -0,0 +1,283 @@ +import React from 'react' +import styled from '@emotion/styled' +import ComponentBox from '../../../../shared/tags/ComponentBox' +import MediaQuery from '@dnb/eufemia/src/shared/MediaQuery' +import { Slider, Code, Button, Card, Flex } from '@dnb/eufemia/src' +import { + TestElement, + Field, + FieldBlock, + Form, +} from '@dnb/eufemia/src/extensions/forms' +import { defaultBreakpoints } from '@dnb/eufemia/src/shared/MediaQueryUtils' +import { defaultQueries } from '@dnb/eufemia/src/shared/useMedia' +import { useMedia, useMediaQuery } from '@dnb/eufemia/src/shared' + +export const LayoutComponents = () => { + return ( + + + Profile + + + Name + + + + + + + More information + + + + + + + + ) +} + +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 HorizontalFlexItemResponsiveSize = () => { + return ( + + + + FlexItem (8) + + + FlexItem (4) + + + + FlexItem (small: 8, medium: 4) + + + + + FlexItem (small: 4, medium: 8) + + + + + ) +} + +export const HorizontalFlexItemResponsiveSizeCustomColumns = () => { + return ( + + {() => { + const breakpoints = { + ...defaultBreakpoints, + xsmall: '30em', + } + + const queries = { + ...defaultQueries, + xsmall: { min: 0, max: 'xsmall' }, + small: { min: 'xsmall', max: 'small' }, + } + + const CustomMediaQuery = styled.div` + display: flex; + flex-direction: column; + .dnb-flex-container[data-media-key='xsmall'] + .dnb-flex-item--responsive { + --size: var(--xsmall); + } + ` + + return ( + + + + FlexItem + + + FlexItem + + + FlexItem + + + FlexItem + + + + ) + }} + + ) +} + +export const HorizontalAutoSize = () => { + return ( + + + + + + + + + + + + + + + + + + ) +} + +const useWindowWidth = () => { + const [innerWidth, setWidth] = React.useState( + typeof window !== 'undefined' ? window.innerWidth : 0, + ) + + React.useEffect(() => { + const resizeHandler = () => { + setWidth(window.innerWidth) + } + window.addEventListener('resize', resizeHandler) + return () => window.removeEventListener('resize', resizeHandler) + }, []) + + return { innerWidth } +} + +export const MediaQueryUseMedia = () => ( + + {() => { + const Playground = () => { + const { isSmall, isMedium, isLarge, isSSR } = useMedia() + const { innerWidth } = useWindowWidth() + + return ( + + 
+              {JSON.stringify(
+                { isSmall, isMedium, isLarge, isSSR, innerWidth },
+                null,
+                2,
+              )}
+
+ + ) + } + return + }} + +) + +export const MediaQueryLiveExample = () => ( + + {() => { + const Playground = () => { + const [query, updateQuery] = React.useState({ + screen: true, + not: true, + min: 'small', + max: 'large', + }) + + const match1 = useMediaQuery({ + matchOnSSR: true, + when: query, + }) + const match2 = useMediaQuery({ + matchOnSSR: true, + not: true, + when: query, + }) + + React.useEffect(() => { + console.log('mediaQuery:', match1, match2) + }, [match1, match2]) + + return ( + <> + + + when + + + not when + + + ) + } + return + }} + +) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/flex/container.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/container.mdx new file mode 100644 index 00000000000..6c5da492f09 --- /dev/null +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/container.mdx @@ -0,0 +1,19 @@ +--- +title: 'Flex.Container' +description: '`Flex.Container` 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' +--- + +import Info from 'Docs/uilib/components/flex/container/info' +import Demos from 'Docs/uilib/components/flex/container/demos' + + + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexContainer/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/container/Examples.tsx similarity index 57% rename from packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexContainer/Examples.tsx rename to packages/dnb-design-system-portal/src/docs/uilib/components/flex/container/Examples.tsx index 2538e50ddcc..542290bc348 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexContainer/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/container/Examples.tsx @@ -1,24 +1,24 @@ import ComponentBox from '../../../../../shared/tags/ComponentBox' -import { Card, Layout } from '@dnb/eufemia/src' +import { Card, Flex } from '@dnb/eufemia/src' import { TestElement, Field } from '@dnb/eufemia/src/extensions/forms' export const Default = () => { return ( - - + + FlexItem - - + + FlexItem - - + + FlexItem - - + + FlexItem - - + + ) } @@ -27,12 +27,12 @@ export const HorizontalWithFieldString = () => { return ( - + - + ) } @@ -40,20 +40,20 @@ export const HorizontalWithFieldString = () => { export const HorizontalWithFlexItem = () => { return ( - - + + FlexItem - - + + FlexItem - - + + FlexItem - - + + FlexItem - - + + ) } @@ -61,20 +61,20 @@ export const HorizontalWithFlexItem = () => { export const HorizontalWithFlexItemJustifyCenter = () => { return ( - - + + FlexItem - - + + FlexItem - - + + FlexItem - - + + FlexItem - - + + ) } @@ -82,20 +82,20 @@ export const HorizontalWithFlexItemJustifyCenter = () => { export const HorizontalWithFlexItemJustifyFlexEnd = () => { return ( - - + + FlexItem - - + + FlexItem - - + + FlexItem - - + + FlexItem - - + + ) } @@ -103,20 +103,20 @@ export const HorizontalWithFlexItemJustifyFlexEnd = () => { export const VerticalWithFlexItem = () => { return ( - - + + FlexItem - - + + FlexItem - - + + FlexItem - - + + FlexItem - - + + ) } @@ -124,11 +124,11 @@ export const VerticalWithFlexItem = () => { export const VerticalWithCard = () => { return ( - + Card contents Card contents Card contents - + ) } @@ -137,10 +137,10 @@ export const VerticalWithFieldString = () => { return ( - + - + ) @@ -150,13 +150,13 @@ export const VerticalSpaceDivider = () => { return ( - + - + ) @@ -165,26 +165,26 @@ export const VerticalSpaceDivider = () => { export const LayoutHorizontalFlexGrowItems = () => { return ( - - + + Card contents - - + + Card contents - - + + Card contents - - + + Card contents - - + + Card contents - - + + Card contents - - + + ) } diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexContainer/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/container/demos.mdx similarity index 82% rename from packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexContainer/demos.mdx rename to packages/dnb-design-system-portal/src/docs/uilib/components/flex/container/demos.mdx index 29023ce8cec..5b23568b6c7 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexContainer/demos.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/container/demos.mdx @@ -10,15 +10,15 @@ import * as Examples from './Examples' -### Horizontal FlexItem +### Horizontal Flex.Item -### Horizontal FlexItem, `justify="center"` +### Horizontal Flex.Item, `justify="center"` -### Horizontal FlexItem, `justify="flex-end"` +### Horizontal Flex.Item, `justify="flex-end"` @@ -32,7 +32,7 @@ Will wrap on small screens. -### Vertical FlexItem +### Vertical Flex.Item diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/flex/container/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/container/info.mdx new file mode 100644 index 00000000000..96a8b492232 --- /dev/null +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/container/info.mdx @@ -0,0 +1,51 @@ +--- +showTabs: true +--- + +## Description + +`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. + +Ideally, use [Flex.Item](/uilib/components/flex/item) or [Card](/uilib/components/card) for you inner wrappers. + +```jsx +import { Flex } from '@dnb/eufemia' + +render( + + content + , +) +``` + +## How spacing is applied + +Nested components should preferably support [spacing properties](/uilib/components/space/). + +When a element or component was given, that does not support spacing, it will still work out of the box as it gets wrapped in a spacing block. + +You may else wrap your custom component in a `Flex.Item` – this way, you still can change the spacing per component basis. + +Technically, `Flex.Container` checks if a nested component has a property called `_supportsEufemiaSpacingProps`. So if you have a component that supports the [spacing properties](/uilib/components/space/), you can add this property `ComponentName._supportsEufemiaSpacingProps = true`. + +### Horizontal and Vertical aliases + +For shortening the usage of `direction="..."`, you can use: + +- `` instead of `` + +```jsx + + part of vertical alignment + part of vertical alignment + +``` + +- `` instead of `` + +```jsx + + part of horizontal alignment + part of horizontal alignment + +``` diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexContainer/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/container/properties.mdx similarity index 96% rename from packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexContainer/properties.mdx rename to packages/dnb-design-system-portal/src/docs/uilib/components/flex/container/properties.mdx index 47ad414f1fa..cf170f7dab2 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexContainer/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/container/properties.mdx @@ -12,7 +12,7 @@ showTabs: true | `justify` | `string` | _(optional)_ How to place sub components if there is space available in the container. Can be: `flex-start`, `flex-end`, `center`, `space-between`, `space-around` or `space-evenly`. | | `align` | `string` | _(optional)_ How to align sub components. Can be: `flex-start`, `flex-end`, `center`, `stretch` or `baseline`. | | `divider` | `string` | _(optional)_ How to separate sub components. Can be: `space` or `line`. | -| `sizeCount` | `number` | _(optional)_ Define how many parts your layout should be divided in. Should be used in combination with a [Layout.FlexItem](/uilib/components/layout/FlexItem). Defaults to `12`. | +| `sizeCount` | `number` | _(optional)_ Define how many parts your layout should be divided in. Should be used in combination with a [Flex.Item](/uilib/components/flex/item). Defaults to `12`. | | `rowGap` | `string` or `false` | _(optional)_ Defines how much the gap between rows should be. Can be `large`, `medium`, `small` or `false` for no gap. | | `spacing` | `string` or `false` | _(optional)_ How much space between sub components. Can be `medium`, `small` or `false` for no spacing. | | `element` | `string` or `React.Element` | _(optional)_ Define the type of element. Defaults to `div`. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/flex/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/demos.mdx new file mode 100644 index 00000000000..54601c350c7 --- /dev/null +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/demos.mdx @@ -0,0 +1,27 @@ +--- +showTabs: true +--- + +import * as Examples from './Examples' + +## Demos + +### Used in forms + + + +### Responsive forms + + + +### Responsive Flex.Item + +With the default `sizeCount` of 12 parts. + + + +### Customized Flex.Item sizes + +With a custom amount of 4 parts (`sizeCount`) as well as custom breakpoints and media queries. + + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/flex/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/info.mdx new file mode 100644 index 00000000000..f0bcfb17e43 --- /dev/null +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/info.mdx @@ -0,0 +1,18 @@ +--- +showTabs: true +--- + +## Description + +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. + +- **[Flex.Container](/uilib/components/flex/container)** is a building block for CSS flexbox based layout of contents and components. + + - **`Flex.Vertical`** can be used as an alias instead of the property `direction="vertical"`. + - **`Flex.Horizontal`** can be used as an alias instead of the property `direction="horizontal"`. + +- **[Flex.Item](/uilib/components/flex/item)** is a building block for CSS flexbox based layout of contents and components. + +- **[Flex.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. + +You find more related information in the [Layout](/uilib/components/layout) pages. diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/flex/item.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/item.mdx new file mode 100644 index 00000000000..d378ad15017 --- /dev/null +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/item.mdx @@ -0,0 +1,19 @@ +--- +title: 'Flex.Item' +description: '`Flex.Item` 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' +--- + +import Info from 'Docs/uilib/components/flex/item/info' +import Demos from 'Docs/uilib/components/flex/item/demos' + + + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexItem/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/item/Examples.tsx similarity index 59% rename from packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexItem/Examples.tsx rename to packages/dnb-design-system-portal/src/docs/uilib/components/flex/item/Examples.tsx index 592d2635539..a62fbe144da 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexItem/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/item/Examples.tsx @@ -1,24 +1,24 @@ import React from 'react' import ComponentBox from '../../../../../shared/tags/ComponentBox' -import { Layout } from '@dnb/eufemia/src' +import { Flex } from '@dnb/eufemia/src' import { TestElement } from '@dnb/eufemia/src/extensions/forms' import { HorizontalFlexItemResponsiveSize, HorizontalFlexItemResponsiveSizeCustomColumns, HorizontalAutoSize, -} from '../Examples' +} from '../../layout/Examples' export const Default = () => { return ( - - + + FlexItem - - + + FlexItem - - + + ) } @@ -26,10 +26,10 @@ export const Default = () => { export const BasicSize = () => { return ( - - uses 50% in width - uses 50% in width - + + uses 50% in width + uses 50% in width + ) } @@ -37,14 +37,14 @@ export const BasicSize = () => { export const ResponsiveSize = () => { return ( - - + + uses 50% or 100% based on the screen size - - + + uses 50% or 100% based on the screen size - - + + ) } diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexItem/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/item/demos.mdx similarity index 100% rename from packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexItem/demos.mdx rename to packages/dnb-design-system-portal/src/docs/uilib/components/flex/item/demos.mdx diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexItem/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/item/info.mdx similarity index 61% rename from packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexItem/info.mdx rename to packages/dnb-design-system-portal/src/docs/uilib/components/flex/item/info.mdx index 2087d1a0945..be83be67294 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexItem/info.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/item/info.mdx @@ -6,11 +6,21 @@ import * as Examples from './Examples' ## Description -`Layout.FlexItem` 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 [FlexContainer](/uilib/components/layout/FlexContainer/). +`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/components/flex/container/). + +```jsx +import { Flex } from '@dnb/eufemia' + +render( + + content + , +) +``` ### Size adjustment -You can provide a `size` prop with a number from 1 to 12 (can be changed in [FlexContainer](/uilib/components/layout/FlexContainer/) with the `sizeCount` property). +You can provide a `size` prop with a number from 1 to 12 (can be changed in [Flex.Container](/uilib/components/flex/container/) with the `sizeCount` property). The number will be used to set the item size (a part of the container). It set a percentage unit and apply it on the item via CSS. When the container is tilled to 100%, the remaining items will wrap to a new row. @@ -26,4 +36,4 @@ For doing so, provide a `size` prop with an object containing [Media Query](/uil -You need to ensure that `flex-wrap: wrap` is set, so the remaining items wrap to a new row when needed. This is enabled by default in the [FlexContainer](/uilib/components/layout/FlexContainer/). +You need to ensure that `flex-wrap: wrap` is set, so the remaining items wrap to a new row when needed. This is enabled by default in the [Flex.Container](/uilib/components/flex/container/). diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexItem/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/item/properties.mdx similarity index 93% rename from packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexItem/properties.mdx rename to packages/dnb-design-system-portal/src/docs/uilib/components/flex/item/properties.mdx index 126a2c035ae..58558c98d1e 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexItem/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/item/properties.mdx @@ -4,11 +4,11 @@ showTabs: true ## Properties -| Property | Type | Description | -| ----------- | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `className` | `string` | _(optional)_ Outer DOM element class name | -| `grow` | `boolean` | _(optional)_ True to expand in width/height when there is more space available. | -| `shrink` | `boolean` | _(optional)_ True to shrink in width/height when there is not enough space available for all components within the container. | -| `size` | `object` or `number` | _(optional)_ To set the size (parts) in "percentage" with numbers from 1 to 12 (`sizeCount`). You can also provide [Media Query](/uilib/usage/layout/media-queries/) types in an object. You can also use the value `auto` to disable it on a specific screen size. Wrap your FlexItem's inside a [Layout.FlexContainer](/uilib/components/layout/FlexContainer). | -| `element` | `string` or `React.Element` | _(optional)_ Define the type of element. Defaults to `div`. | -| `children` | `React.Node` | _(optional)_ Contents. | +| Property | Type | Description | +| ----------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `className` | `string` | _(optional)_ Outer DOM element class name | +| `grow` | `boolean` | _(optional)_ True to expand in width/height when there is more space available. | +| `shrink` | `boolean` | _(optional)_ True to shrink in width/height when there is not enough space available for all components within the container. | +| `size` | `object` or `number` | _(optional)_ To set the size (parts) in "percentage" with numbers from 1 to 12 (`sizeCount`). You can also provide [Media Query](/uilib/usage/layout/media-queries/) types in an object. You can also use the value `auto` to disable it on a specific screen size. Wrap your Flex.Item's inside a [Flex.Container](/uilib/components/flex/container). | +| `element` | `string` or `React.Element` | _(optional)_ Define the type of element. Defaults to `div`. | +| `children` | `React.Node` | _(optional)_ Contents. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/flex/stack.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/stack.mdx new file mode 100644 index 00000000000..2e7afde1e7b --- /dev/null +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/stack.mdx @@ -0,0 +1,19 @@ +--- +title: 'Flex.Stack' +description: '`Flex.Stack` is an outer block element for wrapping content to get the correct layout and spacing between region and region headings.' +hideInMenu: true +showTabs: true +tabs: + - title: Info + key: '/info' + - title: Demos + key: '/demos' + - title: Properties + key: '/properties' +--- + +import Info from 'Docs/uilib/components/flex/stack/info' +import Demos from 'Docs/uilib/components/flex/stack/demos' + + + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Stack/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/stack/Examples.tsx similarity index 89% rename from packages/dnb-design-system-portal/src/docs/uilib/components/layout/Stack/Examples.tsx rename to packages/dnb-design-system-portal/src/docs/uilib/components/flex/stack/Examples.tsx index d557f14bdc6..9591e5dd8b0 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Stack/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/stack/Examples.tsx @@ -1,17 +1,17 @@ import { Form } from '@dnb/eufemia/src/extensions/forms' import ComponentBox from '../../../../../shared/tags/ComponentBox' -import { Card, Layout, P } from '@dnb/eufemia/src' +import { Card, Flex, P } from '@dnb/eufemia/src' export const Default = () => { return ( - +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus pharetra elit in bibendum. Vivamus tincidunt eleifend tellus at tempus.

- + ) } @@ -19,7 +19,7 @@ export const Default = () => { export const WithParagraphs = () => { return ( - +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus pharetra elit in bibendum. Vivamus tincidunt eleifend @@ -32,7 +32,7 @@ export const WithParagraphs = () => { finibus, lacus leo lobortis lorem, maximus posuere mi justo et ipsum.

- + ) } @@ -40,14 +40,14 @@ export const WithParagraphs = () => { export const WithMainHeading = () => { return ( - + Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus pharetra elit in bibendum. Vivamus tincidunt eleifend tellus at tempus.

- + ) } @@ -55,7 +55,7 @@ export const WithMainHeading = () => { export const WithCard = () => { return ( - +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi @@ -64,7 +64,7 @@ export const WithCard = () => { bibendum ipsum.

- + ) } @@ -72,7 +72,7 @@ export const WithCard = () => { export const WithCardAndHeading = () => { return ( - + Main heading

@@ -82,7 +82,7 @@ export const WithCardAndHeading = () => { bibendum ipsum.

- + ) } @@ -90,7 +90,7 @@ export const WithCardAndHeading = () => { export const WithCardAndHeadings = () => { return ( - + Main heading Sub heading @@ -101,7 +101,7 @@ export const WithCardAndHeadings = () => { bibendum ipsum.

- + ) } @@ -109,12 +109,12 @@ export const WithCardAndHeadings = () => { export const WithHeadingsAndAriaLabel = () => { return ( - + Heading

Content inside a landmark ...

 - + ) } diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Stack/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/stack/demos.mdx similarity index 100% rename from packages/dnb-design-system-portal/src/docs/uilib/components/layout/Stack/demos.mdx rename to packages/dnb-design-system-portal/src/docs/uilib/components/flex/stack/demos.mdx diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Stack/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/stack/info.mdx similarity index 54% rename from packages/dnb-design-system-portal/src/docs/uilib/components/layout/Stack/info.mdx rename to packages/dnb-design-system-portal/src/docs/uilib/components/flex/stack/info.mdx index 305822d30ba..225625b0a89 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Stack/info.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/stack/info.mdx @@ -6,9 +6,9 @@ import * as Examples from './Examples' ## Description -`Layout.Stack` is an outer block element for wrapping content to get the correct layout and spacing between region and region headings. +`Flex.Stack` is an outer block element for wrapping content to get the correct layout and spacing between region and region headings. -It uses [Layout.FlexContainer](/uilib/components/layout/FlexContainer) under the hood. +It uses [Flex.Container](/uilib/components/flex/container) under the hood. ## Accessibility diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/flex/stack/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/stack/properties.mdx new file mode 100644 index 00000000000..dde8504e79d --- /dev/null +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/stack/properties.mdx @@ -0,0 +1,13 @@ +--- +showTabs: true +--- + +## Properties + +| Property | Type | Description | +| -------------------------------------------------- | --------------------------- | --------------------------------------------------------------------- | +| `direction` | `string` | _(optional)_ Defaults to `vertical`. | +| `align` | `string` | _(optional)_ Defaults to `stretch`. | +| `element` | `string` or `React.Element` | _(optional)_ Define the type of element. Defaults to `section`. | +| [Flex.Container](/uilib/components/flex/container) | Various | _(optional)_ Flex.Container properties. | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | 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 a08835f057c..c7590237d0e 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 } from '@dnb/eufemia/src' +import { Layout, Slider, Code, Button, Card, Flex } from '@dnb/eufemia/src' import { TestElement, Field, @@ -21,7 +21,7 @@ export const LayoutComponents = () => { Form, }} > - + Profile @@ -38,7 +38,7 @@ export const LayoutComponents = () => { - + ) } @@ -54,26 +54,26 @@ export const HorizontalFlexItemResponsiveSize = () => { return ( - - + + FlexItem (8) - - + + FlexItem (4) - - + + FlexItem (small: 8, medium: 4) - - + + FlexItem (small: 4, medium: 8) - - + + ) } @@ -88,7 +88,7 @@ export const HorizontalFlexItemResponsiveSizeCustomColumns = () => { defaultBreakpoints, defaultQueries, }} - data-visual-test="layout-flex-item-custom-size" + data-visual-test="flex-item-custom-size" > {() => { const breakpoints = { @@ -105,37 +105,37 @@ export const HorizontalFlexItemResponsiveSizeCustomColumns = () => { const CustomMediaQuery = styled.div` display: flex; flex-direction: column; - .dnb-layout-flex-container[data-media-key='xsmall'] - .dnb-layout-flex-item--responsive { + .dnb-flex-container[data-media-key='xsmall'] + .dnb-flex-item--responsive { --size: var(--xsmall); } ` return ( - - + FlexItem - - + + FlexItem - - + FlexItem - - + FlexItem - - + + ) }} @@ -153,24 +153,24 @@ export const HorizontalAutoSize = () => { hideCode > - - + + - - + + - - + + { alwaysShowTooltip /> - - + + ) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexContainer.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexContainer.mdx deleted file mode 100644 index 84b9873a06a..00000000000 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexContainer.mdx +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: 'FlexContainer' -description: '`Layout.FlexContainer` 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: FlexContainer - href: /uilib/components/layout/FlexContainer/ ---- - -import Info from 'Docs/uilib/components/layout/FlexContainer/info' -import Demos from 'Docs/uilib/components/layout/FlexContainer/demos' - - - diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexContainer/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexContainer/info.mdx deleted file mode 100644 index 5d8a87854dd..00000000000 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexContainer/info.mdx +++ /dev/null @@ -1,41 +0,0 @@ ---- -showTabs: true ---- - -## Description - -`Layout.FlexContainer` 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. - -Ideally, use [Layout.FlexItem](/uilib/components/layout/FlexItem) or [Card](/uilib/components/card) for you inner wrappers. - -## How spacing is applied - -Nested components should preferably support [spacing properties](/uilib/components/space/). - -When a element or component was given, that does not support spacing, it will still work out of the box as it gets wrapped in a spacing block. - -You may else wrap your custom component in a `FlexItem` – this way, you still can change the spacing per component basis. - -Technically, `FlexContainer` checks if a nested component has a property called `_supportsEufemiaSpacingProps`. So if you have a component that supports the [spacing properties](/uilib/components/space/), you can add this property `ComponentName._supportsEufemiaSpacingProps = true`. - -### Horizontal and Vertical aliases - -For shortening the usage of `direction="..."`, you can use: - -- `` instead of `` - -```jsx - - part of vertical alignment - part of vertical alignment - -``` - -- `` instead of `` - -```jsx - - part of horizontal alignment - part of horizontal alignment - -``` diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexItem.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexItem.mdx deleted file mode 100644 index 5f02ea35c79..00000000000 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexItem.mdx +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: 'FlexItem' -description: '`Layout.FlexItem` 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: FlexItem - href: /uilib/components/layout/FlexItem/ ---- - -import Info from 'Docs/uilib/components/layout/FlexItem/info' -import Demos from 'Docs/uilib/components/layout/FlexItem/demos' - - - diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Stack.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Stack.mdx deleted file mode 100644 index 53a2d411616..00000000000 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Stack.mdx +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: 'Stack' -description: '`Layout.Stack` is an outer block element for wrapping content to get the correct layout and spacing between region and region headings.' -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: Stack - href: /uilib/components/layout/Stack/ ---- - -import Info from 'Docs/uilib/components/layout/Stack/info' -import Demos from 'Docs/uilib/components/layout/Stack/demos' - - - diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Stack/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Stack/properties.mdx deleted file mode 100644 index 594980f1832..00000000000 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Stack/properties.mdx +++ /dev/null @@ -1,13 +0,0 @@ ---- -showTabs: true ---- - -## Properties - -| Property | Type | Description | -| -------------------------------------------------------------- | --------------------------- | --------------------------------------------------------------------- | -| `direction` | `string` | _(optional)_ Defaults to `vertical`. | -| `align` | `string` | _(optional)_ Defaults to `stretch`. | -| `element` | `string` or `React.Element` | _(optional)_ Define the type of element. Defaults to `section`. | -| [Layout.FlexContainer](/uilib/components/layout/FlexContainer) | Various | _(optional)_ FlexContainer properties. | -| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | 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 fd2f02f281e..e7502f08612 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 @@ -18,13 +18,13 @@ import * as Examples from './Examples' -### Responsive FlexItem +### Responsive Flex.Item With the default `sizeCount` of 12 parts. -### Customized FlexItem sizes +### Customized Flex.Item sizes With a custom amount of 4 parts (`sizeCount`) as well as custom breakpoints and media queries. 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 4e99e72e93b..8bfe8710d09 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 @@ -10,16 +10,16 @@ To make it easier to build application layout and [form](/uilib/extensions/forms - **[Card](/uilib/components/card)** is a block section element showing the white box with rounded gray borders, adding spacing automatically. -- **[Stack](/uilib/components/layout/Stack)** is an outer block element for wrapping content to get the correct layout and spacing between region and region headings. +- **[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 -- **[FlexContainer](/uilib/components/layout/FlexContainer)** is a building block for CSS flexbox based layout of contents and components. +- **[Flex.Container](/uilib/components/flex/container)** is a building block for CSS flexbox based layout of contents and components. - - **``** can be used as an alias instead of the property `direction="vertical"`. - - **``** can be used as an alias instead of the property `direction="horizontal"`. + - **``** can be used as an alias instead of the property `direction="vertical"`. + - **``** can be used as an alias instead of the property `direction="horizontal"`. -- **[FlexItem](/uilib/components/layout/FlexItem)** is a building block for CSS flexbox based layout of contents and components. +- **[Flex.Item](/uilib/components/flex/item)** is a building block for CSS flexbox based layout of contents and components. ### Grid layout @@ -48,12 +48,12 @@ Uses CSS `flexbox`. - When a size (percentage) is given, they stack horizontally. ```jsx -import { Layout } from '@dnb/eufemia' +import { Flex } from '@dnb/eufemia' render( - - content + + content content - , + , ) ``` diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms.mdx index 4f2508a4b43..822898ea836 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms.mdx @@ -40,7 +40,7 @@ The goal of the Forms extension is to make it easy to build forms and other data When building your application forms, preferably use the following layout components. They seamlessly places all the fields and components of Eufemia Forms correctly into place. -- [Layout](/uilib/components/layout) for easy and consistent application forms. +- [Flex](/uilib/components/flex) layout component for easy and consistent application forms. - [Card](/uilib/components/card) for the default card outline of forms. ### Additional features diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Examples.tsx index de27931fcd6..98aac31b8c5 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Examples.tsx @@ -1,6 +1,6 @@ import React from 'react' import ComponentBox from '../../../../shared/tags/ComponentBox' -import { Layout, Input, Slider, Card } from '@dnb/eufemia/src' +import { Input, Slider, Card, Flex } from '@dnb/eufemia/src' import { Form, StepsLayout, @@ -98,7 +98,7 @@ export const CreateComposedFieldComponent = () => { return ( - + { tooltip /> - + ) } @@ -214,7 +214,7 @@ export const LayoutComponents = () => { Visibility, }} > - + Profile @@ -231,7 +231,7 @@ export const LayoutComponents = () => { - + ) } @@ -262,7 +262,7 @@ export const VisibilityBasedOnData = () => { } onSubmit={(data) => console.log('onSubmit', data)} > - + Profile @@ -271,14 +271,14 @@ export const VisibilityBasedOnData = () => { - + - + More information @@ -286,7 +286,7 @@ export const VisibilityBasedOnData = () => { - + @@ -438,10 +438,10 @@ export const WithSteps = () => { Profile - + - + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/DataContext/Provider/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/DataContext/Provider/Examples.tsx index 3f39ce06919..6a4c5386ba6 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/DataContext/Provider/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/DataContext/Provider/Examples.tsx @@ -6,7 +6,7 @@ import { Field, Value, } from '@dnb/eufemia/src/extensions/forms' -import { Card, Layout } from '@dnb/eufemia/src' +import { Card, Flex } from '@dnb/eufemia/src' export const TestdataSchema: JSONSchema7 = { type: 'object', @@ -97,9 +97,9 @@ export const Default = () => { onSubmitRequest={() => console.log('onSubmitRequest')} sessionStorageId="provider-example-1" > - + - + { />
- + { path="/list/0/itemNumber" label="Item number" /> - - + + { path="/list/1/itemNumber" label="Item number" /> - +
- + - + ) @@ -189,9 +189,9 @@ export const ValidationWithJsonSchema = () => { onSubmit={(data) => console.log('onSubmit', data)} onSubmitRequest={() => console.log('onSubmitRequest')} > - + - + { />
- + { path="/list/0/itemNumber" label="Item number" /> - - + + { path="/list/1/itemNumber" label="Item number" /> - +
- + - + ) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock.mdx index a081a746aa1..72d8ba2277f 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock.mdx @@ -1,6 +1,6 @@ --- title: 'FieldBlock' -description: '`FieldBlock` is a reusable wrapper for building Field-components. It shows surrounding elements through properties from `FieldProps` like `label` and `error`, and ensure that spacing between different fields work as required when put into surrounding components like `FlexContainer` or `Card`. It can also be used to group multiple inner FieldBlock component, composing error messages together as one component.' +description: '`FieldBlock` is a reusable wrapper for building Field-components. It shows surrounding elements through properties from `FieldProps` like `label` and `error`, and ensure that spacing between different fields work as required when put into surrounding components like `Flex.Container` or `Card`. It can also be used to group multiple inner FieldBlock component, composing error messages together as one component.' componentType: 'basis-api' hideInMenu: true showTabs: true diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/Examples.tsx index ed845afb631..a12c3ebded6 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/Examples.tsx @@ -4,7 +4,7 @@ import { Field, TestElement, } from '@dnb/eufemia/src/extensions/forms' -import { Layout } from '@dnb/eufemia/src' +import { Flex } from '@dnb/eufemia/src' export const Default = () => { return ( @@ -136,10 +136,10 @@ export const GroupMultipleFields = () => { return ( - + - + ) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/info.mdx index 0a8f4aa4304..9127a1ce987 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/info.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/info.mdx @@ -8,7 +8,7 @@ import Demos from 'Docs/uilib/extensions/forms/create-component/FieldBlock/demos `FieldBlock` is a reusable wrapper for building [Field](/uilib/extensions/forms/create-component/Field) or [Value](/uilib/extensions/forms/create-component/Value) components. -It shows surrounding elements through properties from `FieldProps` like `label` and `error`, and ensure that spacing between different fields work as required when put into surrounding components like [FlexContainer](/uilib//components/layout/FlexContainer/) or [Card](/uilib/components/card/). +It shows surrounding elements through properties from `FieldProps` like `label` and `error`, and ensure that spacing between different fields work as required when put into surrounding components like [Flex.Container](/uilib/components/flex/container/) or [Card](/uilib/components/card/). It can also be used to group multiple inner FieldBlock components, composing status (error) messages together as one component. @@ -18,10 +18,10 @@ import { FieldBlock } from '@dnb/eufemia/extensions/forms' const YourFieldComponent = () => { return ( - + ... ... - + ) } diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/demo-cases/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/demo-cases/Examples.tsx index 56166d34b82..de9b8dbf01e 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/demo-cases/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/demo-cases/Examples.tsx @@ -1,11 +1,5 @@ import ComponentBox from '../../../../../shared/tags/ComponentBox' -import { - GlobalStatus, - Section, - Code, - Layout, - Card, -} from '@dnb/eufemia/src' +import { GlobalStatus, Section, Code, Card, Flex } from '@dnb/eufemia/src' import * as React from 'react' import { Form, @@ -160,10 +154,10 @@ export const BecomeCorporateCustomer = () => { Profile - + - + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/MainHeading/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/MainHeading/Examples.tsx index d0b5094d169..e92da6b588f 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/MainHeading/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/MainHeading/Examples.tsx @@ -1,5 +1,5 @@ import ComponentBox from '../../../../../../../shared/tags/ComponentBox' -import { Card, Layout, P } from '@dnb/eufemia/src' +import { Card, Flex, P } from '@dnb/eufemia/src' import { Form } from '@dnb/eufemia/src/extensions/forms' export const Default = () => { @@ -17,9 +17,9 @@ export const OverStack = () => { data-visual-test="layout-main-heading-over-stack" > This is a main heading - +

Stack contents

- + ) } @@ -31,11 +31,11 @@ export const OverStackWithCard = () => { data-visual-test="layout-main-heading-over-card" > This is a main heading - +

Card contents

 - + ) } diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/SubHeading/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/SubHeading/Examples.tsx index b51fb64e93e..d85ee552e70 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/SubHeading/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/SubHeading/Examples.tsx @@ -1,5 +1,5 @@ import ComponentBox from '../../../../../../../shared/tags/ComponentBox' -import { Card, Layout, P } from '@dnb/eufemia/src' +import { Card, Flex, P } from '@dnb/eufemia/src' import { Form } from '@dnb/eufemia/src/extensions/forms' export const TextOnly = () => { @@ -26,9 +26,9 @@ export const OverStack = () => { return ( This is a sub heading - +

Stack contents

- + ) } @@ -40,10 +40,10 @@ export const InsideCard = () => { data-visual-test="layout-sub-heading-inside-card" > - + This is a sub heading

Card contents

- + ) @@ -56,11 +56,11 @@ export const OverStackWithCard = () => { data-visual-test="layout-sub-heading-over-card" > This is a sub heading - +

Card contents

 - + ) } diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/info.mdx index 76fc78b729c..6b560084c81 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/info.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/info.mdx @@ -7,7 +7,7 @@ showTabs: true `Form` provides the main forms-helpers including data provider and event handling. ```jsx -import { Layout } from '@dnb/eufemia' +import { Card } from '@dnb/eufemia' import { Form, Field } from '@dnb/eufemia/extensions/forms' render( 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 dbce7387b91..fe7523db4a2 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 { Layout } from '@dnb/eufemia/src' +import { Flex, Layout } from '@dnb/eufemia/src' import { Iterate, Field, @@ -43,10 +43,10 @@ export const ObjectElements = () => {

- + - + ) @@ -125,7 +125,7 @@ export const ArrayFromFormHandler = () => { - + { width="small" /> - + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/Array/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/Array/properties.mdx index 40cfc133599..a68c6cf824d 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/Array/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/Array/properties.mdx @@ -8,7 +8,7 @@ import StandardProperties from '../../../data-value-readwrite-properties.mdx' -| Property | Type | Description | -| --------------------------------------------------------- | ------- | --------------------------------------------------------------------- | -| [FlexContainer](/uilib//components/layout/FlexContainer/) | Various | _(optional)_ All FlexContainer properties. | -| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | +| Property | Type | Description | +| -------------------------------------------------- | ------- | --------------------------------------------------------------------- | +| [FlexContainer](/uilib/components/flex/container/) | Various | _(optional)_ All Flex.Container properties. | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/ArrayRemoveElementButton/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/ArrayRemoveElementButton/Examples.tsx index fb9b2ffbd0d..4c475531b1b 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/ArrayRemoveElementButton/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/ArrayRemoveElementButton/Examples.tsx @@ -1,22 +1,22 @@ import ComponentBox from '../../../../../../../shared/tags/ComponentBox' import { Iterate, Field, Form } from '@dnb/eufemia/src/extensions/forms' -import { Layout } from '@dnb/eufemia/src' +import { Flex } from '@dnb/eufemia/src' import { trash as TrashIcon } from '@dnb/eufemia/src/icons' export const PrimitiveElements = () => { return ( - + console.log('onChange', value)} > - + console.log('onChange', value)} /> - + ) @@ -24,7 +24,7 @@ export const PrimitiveElements = () => { export const ObjectElements = () => { return ( - + { onChange={(value) => console.log('onChange', value)} > - + - + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/Step/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/Step/properties.mdx index c6a0d08bf38..6151f99c41a 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/Step/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/Step/properties.mdx @@ -4,9 +4,9 @@ showTabs: true ## Properties -| Property | Type | Description | -| -------------------------------------------------------- | ------------ | --------------------------------------------------------------------- | -| `title` | `string` | _(optional)_ Title of the step. | -| `children` | `React.Node` | _(required)_ Contents of the step. | -| [FlexContainer](/uilib/components/layout/FlexContainer/) | Various | _(optional)_ All FlexContainer properties. | -| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | +| Property | Type | Description | +| --------------------------------------------------- | ------------ | --------------------------------------------------------------------- | +| `title` | `string` | _(optional)_ Title of the step. | +| `children` | `React.Node` | _(required)_ Contents of the step. | +| [Flex.Container](/uilib/components/flex/container/) | Various | _(optional)_ All Flex.Container properties. | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | diff --git a/packages/dnb-design-system-portal/src/shared/parts/ListComponents.tsx b/packages/dnb-design-system-portal/src/shared/parts/ListComponents.tsx index d452e9fc812..f2845ab9f08 100644 --- a/packages/dnb-design-system-portal/src/shared/parts/ListComponents.tsx +++ b/packages/dnb-design-system-portal/src/shared/parts/ListComponents.tsx @@ -9,7 +9,11 @@ export default function ListComponents() { { allMdx( filter: { - frontmatter: { title: { ne: null }, draft: { ne: true } } + frontmatter: { + title: { ne: null } + draft: { ne: true } + hideInMenu: { ne: true } + } internal: { contentFilePath: { regex: "/(?!uilib/components/fragments|uilib/components/layout/.*)(uilib/components/.*)/" diff --git a/packages/dnb-design-system-portal/src/shared/parts/ListElements.tsx b/packages/dnb-design-system-portal/src/shared/parts/ListElements.tsx index 37086120b26..1ee57f7f322 100644 --- a/packages/dnb-design-system-portal/src/shared/parts/ListElements.tsx +++ b/packages/dnb-design-system-portal/src/shared/parts/ListElements.tsx @@ -9,7 +9,11 @@ export default function ListElements() { { allMdx( filter: { - frontmatter: { title: { ne: "" }, draft: { ne: true } } + frontmatter: { + title: { ne: "" } + draft: { ne: true } + hideInMenu: { ne: true } + } internal: { contentFilePath: { glob: "**/uilib/elements/*" } } } sort: [ diff --git a/packages/dnb-design-system-portal/src/shared/parts/ListExtensions.tsx b/packages/dnb-design-system-portal/src/shared/parts/ListExtensions.tsx index 12c3b310495..0d335a6b748 100644 --- a/packages/dnb-design-system-portal/src/shared/parts/ListExtensions.tsx +++ b/packages/dnb-design-system-portal/src/shared/parts/ListExtensions.tsx @@ -9,7 +9,11 @@ export default function ListExtensions() { { allMdx( filter: { - frontmatter: { title: { ne: "" }, draft: { ne: true } } + frontmatter: { + title: { ne: "" } + draft: { ne: true } + hideInMenu: { ne: true } + } internal: { contentFilePath: { glob: "**/uilib/extensions/*" } } } ) { diff --git a/packages/dnb-design-system-portal/src/shared/parts/ListFragments.tsx b/packages/dnb-design-system-portal/src/shared/parts/ListFragments.tsx index a4bcd7dca0a..85db7650707 100644 --- a/packages/dnb-design-system-portal/src/shared/parts/ListFragments.tsx +++ b/packages/dnb-design-system-portal/src/shared/parts/ListFragments.tsx @@ -9,7 +9,11 @@ export default function ListFragments() { { allMdx( filter: { - frontmatter: { title: { ne: "" }, draft: { ne: true } } + frontmatter: { + title: { ne: "" } + draft: { ne: true } + hideInMenu: { ne: true } + } internal: { contentFilePath: { glob: "**/uilib/components/fragments/*" } } diff --git a/packages/dnb-eufemia/src/components/Flex.ts b/packages/dnb-eufemia/src/components/Flex.ts new file mode 100644 index 00000000000..858b4596100 --- /dev/null +++ b/packages/dnb-eufemia/src/components/Flex.ts @@ -0,0 +1,14 @@ +/** + * ATTENTION: This file is auto generated by using "prepareTemplates". + * Do not change the content! + * + */ + +/** + * Library Index flex to autogenerate all the components and extensions + * Used by "prepareFlexs" + */ + +import Flex from './flex/Flex' +export * from './flex/Flex' +export default Flex diff --git a/packages/dnb-eufemia/src/components/card/Card.tsx b/packages/dnb-eufemia/src/components/card/Card.tsx index cdb734727e5..42eb89f48e6 100644 --- a/packages/dnb-eufemia/src/components/card/Card.tsx +++ b/packages/dnb-eufemia/src/components/card/Card.tsx @@ -1,9 +1,8 @@ import React from 'react' import classnames from 'classnames' -import FlexContainer, { - Props as FlexContainerProps, -} from '../layout/FlexContainer' -import FlexItem, { Props as FlexItemProps } from '../layout/FlexItem' +import Flex from '../flex/Flex' +import type { Props as FlexContainerProps } from '../flex/Container' +import type { Props as FlexItemProps } from '../flex/Item' export type Props = FlexContainerProps & FlexItemProps & { @@ -23,7 +22,7 @@ function Card(props: Props) { if (stack || direction || spacing) { return ( - {children} - + ) } return ( - {children} - + ) } diff --git a/packages/dnb-eufemia/src/components/card/__tests__/Card.test.tsx b/packages/dnb-eufemia/src/components/card/__tests__/Card.test.tsx index 3e2c8828149..e9ad699da2b 100644 --- a/packages/dnb-eufemia/src/components/card/__tests__/Card.test.tsx +++ b/packages/dnb-eufemia/src/components/card/__tests__/Card.test.tsx @@ -55,10 +55,10 @@ describe('Card', () => { expect(Array.from(element.classList)).toEqual([ 'dnb-space', - 'dnb-layout-flex-item', + 'dnb-flex-item', 'dnb-card', 'custom-class', - 'dnb-layout-flex-item--align-self-stretch', + 'dnb-flex-item--align-self-stretch', ]) }) @@ -84,10 +84,8 @@ describe('Card', () => { ) - const element = document.querySelector('.dnb-layout-flex-container') - expect(element.className).not.toContain( - 'dnb-layout-flex-container--wrap' - ) + const element = document.querySelector('.dnb-flex-container') + expect(element.className).not.toContain('dnb-flex-container--wrap') }) it('should stack children divided by lines', () => { @@ -101,9 +99,7 @@ describe('Card', () => { const element = document.querySelector('.dnb-card') const children = element.children - expect(element.className).toContain( - 'dnb-layout-flex-container--divider-line' - ) + expect(element.className).toContain('dnb-flex-container--divider-line') expect(children.length).toBe(4) @@ -135,7 +131,7 @@ describe('Card', () => { const element = document.querySelector('.dnb-card') expect(element.className).toContain( - 'dnb-layout-flex-container--direction-vertical' + 'dnb-flex-container--direction-vertical' ) rerender( @@ -145,7 +141,7 @@ describe('Card', () => { ) expect(element.className).toContain( - 'dnb-layout-flex-container--direction-horizontal' + 'dnb-flex-container--direction-horizontal' ) }) @@ -186,7 +182,7 @@ describe('Card', () => { const children = element.children expect(element.className).toContain( - 'dnb-layout-flex-container--spacing-small' + 'dnb-flex-container--spacing-small' ) expect(children.length).toBe(3) @@ -209,7 +205,7 @@ describe('Card', () => { ) expect(element.className).toContain( - 'dnb-layout-flex-container--spacing-large' + 'dnb-flex-container--spacing-large' ) expect(children[0].className).toContain('dnb-space__top--zero') diff --git a/packages/dnb-eufemia/src/components/layout/FlexContainer.tsx b/packages/dnb-eufemia/src/components/flex/Container.tsx similarity index 98% rename from packages/dnb-eufemia/src/components/layout/FlexContainer.tsx rename to packages/dnb-eufemia/src/components/flex/Container.tsx index b293a17422c..53d0399b491 100644 --- a/packages/dnb-eufemia/src/components/layout/FlexContainer.tsx +++ b/packages/dnb-eufemia/src/components/flex/Container.tsx @@ -173,9 +173,9 @@ function FlexContainer(props: Props) { }) }) - const n = 'dnb-layout-flex-container' + const n = 'dnb-flex-container' const cn = classnames( - 'dnb-layout-flex-container', + 'dnb-flex-container', direction && `${n}--direction-${direction}`, justify && `${n}--justify-${justify}`, align && `${n}--align-${align}`, diff --git a/packages/dnb-eufemia/src/components/flex/Flex.tsx b/packages/dnb-eufemia/src/components/flex/Flex.tsx new file mode 100644 index 00000000000..ab5ad516f09 --- /dev/null +++ b/packages/dnb-eufemia/src/components/flex/Flex.tsx @@ -0,0 +1 @@ +export * as default from './' diff --git a/packages/dnb-eufemia/src/components/layout/Horizontal.tsx b/packages/dnb-eufemia/src/components/flex/Horizontal.tsx similarity index 59% rename from packages/dnb-eufemia/src/components/layout/Horizontal.tsx rename to packages/dnb-eufemia/src/components/flex/Horizontal.tsx index 90dcdc14e92..d14b262f165 100644 --- a/packages/dnb-eufemia/src/components/layout/Horizontal.tsx +++ b/packages/dnb-eufemia/src/components/flex/Horizontal.tsx @@ -1,15 +1,14 @@ import React from 'react' -import FlexContainer, { - Props as FlexContainerProps, -} from './FlexContainer' +import Container from './Container' +import type { Props as FlexContainerProps } from './Container' export type Props = Omit function Horizontal({ children, ...props }: Props) { return ( - + {children} - + ) } diff --git a/packages/dnb-eufemia/src/components/layout/FlexItem.tsx b/packages/dnb-eufemia/src/components/flex/Item.tsx similarity index 87% rename from packages/dnb-eufemia/src/components/layout/FlexItem.tsx rename to packages/dnb-eufemia/src/components/flex/Item.tsx index 5cadb4d0af0..d7307615af5 100644 --- a/packages/dnb-eufemia/src/components/layout/FlexItem.tsx +++ b/packages/dnb-eufemia/src/components/flex/Item.tsx @@ -52,11 +52,11 @@ function FlexItem(props: Props) { } = props const cn = classnames( - 'dnb-layout-flex-item', - grow && 'dnb-layout-flex-item--grow', - shrink && 'dnb-layout-flex-item--shrink', - alignSelf && `dnb-layout-flex-item--align-self-${alignSelf}`, - size && 'dnb-layout-flex-item--responsive', + 'dnb-flex-item', + grow && 'dnb-flex-item--grow', + shrink && 'dnb-flex-item--shrink', + alignSelf && `dnb-flex-item--align-self-${alignSelf}`, + size && 'dnb-flex-item--responsive', className ) @@ -84,7 +84,7 @@ function FlexItem(props: Props) { {...omitSpacingProps(rest)} > {children} diff --git a/packages/dnb-eufemia/src/components/layout/Stack.tsx b/packages/dnb-eufemia/src/components/flex/Stack.tsx similarity index 71% rename from packages/dnb-eufemia/src/components/layout/Stack.tsx rename to packages/dnb-eufemia/src/components/flex/Stack.tsx index 292fd778d83..5a86f946452 100644 --- a/packages/dnb-eufemia/src/components/layout/Stack.tsx +++ b/packages/dnb-eufemia/src/components/flex/Stack.tsx @@ -1,8 +1,7 @@ import React from 'react' import classnames from 'classnames' -import FlexContainer, { - Props as FlexContainerProps, -} from './FlexContainer' +import Container from './Container' +import type { Props as FlexContainerProps } from './Container' export type Props = FlexContainerProps @@ -16,16 +15,16 @@ function Stack(props: Props) { } = props return ( - {children} - + ) } diff --git a/packages/dnb-eufemia/src/components/layout/Vertical.tsx b/packages/dnb-eufemia/src/components/flex/Vertical.tsx similarity index 59% rename from packages/dnb-eufemia/src/components/layout/Vertical.tsx rename to packages/dnb-eufemia/src/components/flex/Vertical.tsx index b4d1c9c0e82..05b2cb313d2 100644 --- a/packages/dnb-eufemia/src/components/layout/Vertical.tsx +++ b/packages/dnb-eufemia/src/components/flex/Vertical.tsx @@ -1,15 +1,14 @@ import React from 'react' -import FlexContainer, { - Props as FlexContainerProps, -} from './FlexContainer' +import Container from './Container' +import type { Props as FlexContainerProps } from './Container' export type Props = Omit function Vertical({ children, ...props }: Props) { return ( - + {children} - + ) } diff --git a/packages/dnb-eufemia/src/components/layout/__tests__/FlexContainer.screenshot.test.ts b/packages/dnb-eufemia/src/components/flex/__tests__/Container.screenshot.test.ts similarity index 61% rename from packages/dnb-eufemia/src/components/layout/__tests__/FlexContainer.screenshot.test.ts rename to packages/dnb-eufemia/src/components/flex/__tests__/Container.screenshot.test.ts index 110ca9fbc13..f88fefa9758 100644 --- a/packages/dnb-eufemia/src/components/layout/__tests__/FlexContainer.screenshot.test.ts +++ b/packages/dnb-eufemia/src/components/flex/__tests__/Container.screenshot.test.ts @@ -5,45 +5,45 @@ import { makeScreenshot } from '../../../core/jest/jestSetupScreenshots' -describe('Layout.FlexContainer', () => { +describe('Flex.Container', () => { it('have to match divider', async () => { const screenshot = await makeScreenshot({ - url: '/uilib/components/layout/FlexContainer/demos', + url: '/uilib/components/flex/container/demos', selector: - '[data-visual-test="layout-flex-container-divider"] .dnb-layout-flex-container', + '[data-visual-test="flex-container-divider"] .dnb-flex-container', }) expect(screenshot).toMatchImageSnapshot() }) it('have to match field on large viewport', async () => { const screenshot = await makeScreenshot({ - url: '/uilib/components/layout/FlexContainer/demos', + url: '/uilib/components/flex/container/demos', selector: - '[data-visual-test="layout-flex-container-field"] .dnb-layout-flex-container', + '[data-visual-test="flex-container-field"] .dnb-flex-container', }) expect(screenshot).toMatchImageSnapshot() }) it('have to match field on small viewport', async () => { const screenshot = await makeScreenshot({ - url: '/uilib/components/layout/FlexContainer/demos', + url: '/uilib/components/flex/container/demos', pageViewport: { width: 600, }, selector: - '[data-visual-test="layout-flex-container-field"] .dnb-layout-flex-container', + '[data-visual-test="flex-container-field"] .dnb-flex-container', }) expect(screenshot).toMatchImageSnapshot() }) it('have to match field on x-small viewport', async () => { const screenshot = await makeScreenshot({ - url: '/uilib/components/layout/FlexContainer/demos', + url: '/uilib/components/flex/container/demos', pageViewport: { width: 300, }, selector: - '[data-visual-test="layout-flex-container-field"] .dnb-layout-flex-container', + '[data-visual-test="flex-container-field"] .dnb-flex-container', }) expect(screenshot).toMatchImageSnapshot() }) diff --git a/packages/dnb-eufemia/src/components/layout/__tests__/FlexContainer.test.tsx b/packages/dnb-eufemia/src/components/flex/__tests__/Container.test.tsx similarity index 57% rename from packages/dnb-eufemia/src/components/layout/__tests__/FlexContainer.test.tsx rename to packages/dnb-eufemia/src/components/flex/__tests__/Container.test.tsx index 38c5dbb2cf6..a763008951d 100644 --- a/packages/dnb-eufemia/src/components/layout/__tests__/FlexContainer.test.tsx +++ b/packages/dnb-eufemia/src/components/flex/__tests__/Container.test.tsx @@ -2,18 +2,17 @@ import React from 'react' import { act, render } from '@testing-library/react' import 'mock-match-media/jest-setup' import { setMedia, matchMedia } from 'mock-match-media' -import FlexContainer from '../FlexContainer' -import FlexItem from '../FlexItem' +import Flex from '../Flex' -describe('Layout.FlexContainer', () => { +describe('Flex.Container', () => { it('should forward HTML attributes', () => { render( - - Flex - + + Flex + ) - const element = document.querySelector('.dnb-layout-flex-container') + const element = document.querySelector('.dnb-flex-container') const attributes = Array.from(element.attributes).map( (attr) => attr.name ) @@ -24,18 +23,18 @@ describe('Layout.FlexContainer', () => { it('should support spacing props', () => { const { rerender } = render( - - Flex - + + Flex + ) - const element = document.querySelector('.dnb-layout-flex-container ') + const element = document.querySelector('.dnb-flex-container ') expect(element.classList).toContain('dnb-space__top--large') rerender( - - Flex - + + Flex + ) expect(element.classList).toContain('dnb-space__top--x-large') @@ -43,47 +42,47 @@ describe('Layout.FlexContainer', () => { it('should have wrap enabled by default', () => { render( - - Flex - + + Flex + ) - const element = document.querySelector('.dnb-layout-flex-container') - expect(element.className).toContain('dnb-layout-flex-container--wrap') + const element = document.querySelector('.dnb-flex-container') + expect(element.className).toContain('dnb-flex-container--wrap') }) it('should contain given classes', () => { render( - - Flex - + + Flex + ) - const element = document.querySelector('.dnb-layout-flex-container') + const element = document.querySelector('.dnb-flex-container') expect(Array.from(element.classList)).toEqual([ 'dnb-space', - 'dnb-layout-flex-container', + 'dnb-flex-container', 'custom-class', - 'dnb-layout-flex-container--direction-horizontal', - 'dnb-layout-flex-container--justify-flex-start', - 'dnb-layout-flex-container--align-flex-start', - 'dnb-layout-flex-container--spacing-small', - 'dnb-layout-flex-container--wrap', - 'dnb-layout-flex-container--divider-space', + 'dnb-flex-container--direction-horizontal', + 'dnb-flex-container--justify-flex-start', + 'dnb-flex-container--align-flex-start', + 'dnb-flex-container--spacing-small', + 'dnb-flex-container--wrap', + 'dnb-flex-container--divider-space', ]) }) it('should render children', () => { render( - - Flex 1 - Flex 2 - Flex 3 - + + Flex 1 + Flex 2 + Flex 3 + ) - const element = document.querySelector('.dnb-layout-flex-container') + const element = document.querySelector('.dnb-flex-container') const children = element.children const childredTextContents = Array.from(children).map((child) => child.textContent.replace(/[\u200C]/g, '') @@ -95,81 +94,79 @@ describe('Layout.FlexContainer', () => { it('should set flow direction of children', () => { const { rerender } = render( - - Flex - + + Flex + ) - const element = document.querySelector('.dnb-layout-flex-container') + const element = document.querySelector('.dnb-flex-container') expect(element.className).toContain( - 'dnb-layout-flex-container--direction-vertical' + 'dnb-flex-container--direction-vertical' ) rerender( - - Flex - + + Flex + ) expect(element.className).toContain( - 'dnb-layout-flex-container--direction-horizontal' + 'dnb-flex-container--direction-horizontal' ) }) it('should set alignment of content', () => { render( - - Flex - Flex - Flex - + + Flex + Flex + Flex + ) }) it('should justify alignment of content', () => { const { rerender } = render( - - Flex - Flex - Flex - + + Flex + Flex + Flex + ) - const element = document.querySelector('.dnb-layout-flex-container') + const element = document.querySelector('.dnb-flex-container') - expect(element.className).toContain( - 'dnb-layout-flex-container--align-center' - ) + expect(element.className).toContain('dnb-flex-container--align-center') rerender( - - Flex - Flex - Flex - + + Flex + Flex + Flex + ) expect(element.className).toContain( - 'dnb-layout-flex-container--align-flex-end' + 'dnb-flex-container--align-flex-end' ) }) it('should add divider between children', () => { const { rerender } = render( - - Flex - Flex - Flex - + + Flex + Flex + Flex + ) - const element = document.querySelector('.dnb-layout-flex-container') + const element = document.querySelector('.dnb-flex-container') const children = element.children expect(children.length).toBe(3) expect(element.className).toContain( - 'dnb-layout-flex-container--divider-space' + 'dnb-flex-container--divider-space' ) expect(children[0].className).toContain('dnb-space__top--zero') @@ -182,21 +179,19 @@ describe('Layout.FlexContainer', () => { expect(children[2].className).toContain('dnb-space__bottom--zero') rerender( - - Flex - Flex - Flex - + + Flex + Flex + Flex + ) expect(children.length).toBe(7) - expect(element.className).toContain( - 'dnb-layout-flex-container--divider-line' - ) + expect(element.className).toContain('dnb-flex-container--divider-line') expect(children[0].className).toContain('dnb-space__top--zero') expect(children[0].className).toContain('dnb-space__bottom--zero') - expect(children[0].className).toContain('dnb-layout-flex-item') + expect(children[0].className).toContain('dnb-flex-item') expect(children[1].tagName).toContain('DIV') expect(children[1].className).toContain('dnb-space') @@ -209,7 +204,7 @@ describe('Layout.FlexContainer', () => { expect(children[3].className).toContain('dnb-space__top--small') expect(children[3].className).toContain('dnb-space__bottom--zero') - expect(children[3].className).toContain('dnb-layout-flex-item') + expect(children[3].className).toContain('dnb-flex-item') expect(children[4].tagName).toContain('DIV') expect(children[4].className).toContain('dnb-space') @@ -222,24 +217,24 @@ describe('Layout.FlexContainer', () => { expect(children[6].className).toContain('dnb-space__top--small') expect(children[6].className).toContain('dnb-space__bottom--zero') - expect(children[6].className).toContain('dnb-layout-flex-item') + expect(children[6].className).toContain('dnb-flex-item') }) it('should set spacing between children', () => { const { rerender } = render( - - Flex - Flex - Flex - + + Flex + Flex + Flex + ) - const element = document.querySelector('.dnb-layout-flex-container') + const element = document.querySelector('.dnb-flex-container') const children = element.children expect(children.length).toBe(3) expect(element.className).toContain( - 'dnb-layout-flex-container--divider-space' + 'dnb-flex-container--divider-space' ) expect(children[0].className).toContain('dnb-space__left--zero') @@ -252,11 +247,11 @@ describe('Layout.FlexContainer', () => { expect(children[2].className).toContain('dnb-space__right--small') rerender( - - Flex - Flex - Flex - + + Flex + Flex + Flex + ) expect(children[0].className).toContain('dnb-space__left--zero') @@ -269,11 +264,11 @@ describe('Layout.FlexContainer', () => { expect(children[2].className).toContain('dnb-space__right--large') rerender( - - Flex - Flex - Flex - + + Flex + Flex + Flex + ) expect(children[0].className).toContain('dnb-space__left--zero') @@ -288,19 +283,19 @@ describe('Layout.FlexContainer', () => { it('should not apply spacing if set to false', () => { render( - - Flex - Flex - Flex - + + Flex + Flex + Flex + ) - const element = document.querySelector('.dnb-layout-flex-container') + const element = document.querySelector('.dnb-flex-container') const children = element.children expect(children.length).toBe(3) expect(element.className).toContain( - 'dnb-layout-flex-container--divider-space' + 'dnb-flex-container--divider-space' ) expect(children[0].className).toContain('dnb-space__left--zero') @@ -316,9 +311,9 @@ describe('Layout.FlexContainer', () => { }) it('should set element', () => { - render(content) + render(content) - const element = document.querySelector('.dnb-layout-flex-container') + const element = document.querySelector('.dnb-flex-container') expect(element.tagName).toBe('SECTION') }) @@ -339,27 +334,27 @@ describe('Layout.FlexContainer', () => { it('should set default "sizeCount" of 12', () => { const { rerender } = render( - - FlexItem - + + FlexItem + ) - const element = document.querySelector('.dnb-layout-flex-container') + const element = document.querySelector('.dnb-flex-container') expect(element.getAttribute('style')).toBe('--sizeCount: 12;') rerender( - - FlexItem - + + FlexItem + ) expect(element.getAttribute('style')).toBe('--sizeCount: 6;') rerender( - - FlexItem - + + FlexItem + ) expect(element.getAttribute('style')).toBe('') @@ -367,37 +362,35 @@ describe('Layout.FlexContainer', () => { it('should set --has-size class', () => { render( - - FlexItem - + + FlexItem + ) - const element = document.querySelector('.dnb-layout-flex-container') + const element = document.querySelector('.dnb-flex-container') - expect(element.className).toContain( - 'dnb-layout-flex-container--has-size' - ) + expect(element.className).toContain('dnb-flex-container--has-size') }) it('should set data-media-key', () => { setMedia({ width: SMALL }) const { rerender } = render( - - FlexItem - + + FlexItem + ) - const element = document.querySelector('.dnb-layout-flex-container') + const element = document.querySelector('.dnb-flex-container') act(() => { setMedia({ width: MEDIUM }) }) rerender( - - FlexItem - + + FlexItem + ) expect(element.getAttribute('data-media-key')).toBe('medium') @@ -407,9 +400,9 @@ describe('Layout.FlexContainer', () => { }) rerender( - - FlexItem - + + FlexItem + ) expect(element.getAttribute('data-media-key')).toBe('large') diff --git a/packages/dnb-eufemia/src/components/layout/__tests__/Horizontal.test.tsx b/packages/dnb-eufemia/src/components/flex/__tests__/Horizontal.test.tsx similarity index 60% rename from packages/dnb-eufemia/src/components/layout/__tests__/Horizontal.test.tsx rename to packages/dnb-eufemia/src/components/flex/__tests__/Horizontal.test.tsx index fc52c5c8a0c..051f7f51d18 100644 --- a/packages/dnb-eufemia/src/components/layout/__tests__/Horizontal.test.tsx +++ b/packages/dnb-eufemia/src/components/flex/__tests__/Horizontal.test.tsx @@ -1,14 +1,16 @@ import React from 'react' import { render } from '@testing-library/react' -import Horizontal from '../Horizontal' import Card from '../../card/Card' +import Flex from '../Flex' -describe('Layout.Horizontal', () => { +describe('Flex.Horizontal', () => { it('should forward HTML attributes', () => { - render(content) + render( + content + ) const element = document.querySelector( - '.dnb-layout-flex-container--direction-horizontal' + '.dnb-flex-container--direction-horizontal' ) const attributes = Array.from(element.attributes).map( (attr) => attr.name @@ -20,50 +22,52 @@ describe('Layout.Horizontal', () => { it('should support spacing props', () => { const { rerender } = render( - content + content ) const element = document.querySelector( - '.dnb-layout-flex-container--direction-horizontal' + '.dnb-flex-container--direction-horizontal' ) expect(element.classList).toContain('dnb-space__top--large') - rerender(content) + rerender(content) expect(element.classList).toContain('dnb-space__top--x-large') }) it('should contain given classes', () => { - render(content) + render( + content + ) const element = document.querySelector( - '.dnb-layout-flex-container--direction-horizontal' + '.dnb-flex-container--direction-horizontal' ) expect(Array.from(element.classList)).toEqual([ 'dnb-space', - 'dnb-layout-flex-container', + 'dnb-flex-container', 'custom-class', - 'dnb-layout-flex-container--direction-horizontal', - 'dnb-layout-flex-container--justify-flex-start', - 'dnb-layout-flex-container--align-flex-start', - 'dnb-layout-flex-container--spacing-small', - 'dnb-layout-flex-container--wrap', - 'dnb-layout-flex-container--divider-space', + 'dnb-flex-container--direction-horizontal', + 'dnb-flex-container--justify-flex-start', + 'dnb-flex-container--align-flex-start', + 'dnb-flex-container--spacing-small', + 'dnb-flex-container--wrap', + 'dnb-flex-container--divider-space', ]) }) it('should render children', () => { render( - + Content 1 Content 2 Content 3 - + ) const element = document.querySelector( - '.dnb-layout-flex-container--direction-horizontal' + '.dnb-flex-container--direction-horizontal' ) const children = element.children const childredTextContents = Array.from(children).map((child) => @@ -80,19 +84,19 @@ describe('Layout.Horizontal', () => { it('should apply spacing to children', () => { render( - + Content 1 Content 2 Content 3 - + ) const element = document.querySelector( - '.dnb-layout-flex-container--direction-horizontal' + '.dnb-flex-container--direction-horizontal' ) expect(element.className).toContain( - 'dnb-layout-flex-container--spacing-small' + 'dnb-flex-container--spacing-small' ) }) }) diff --git a/packages/dnb-eufemia/src/components/layout/__tests__/FlexItem.screenshot.test.ts b/packages/dnb-eufemia/src/components/flex/__tests__/Item.screenshot.test.ts similarity index 77% rename from packages/dnb-eufemia/src/components/layout/__tests__/FlexItem.screenshot.test.ts rename to packages/dnb-eufemia/src/components/flex/__tests__/Item.screenshot.test.ts index 0e4ea60ca97..0ea010612a4 100644 --- a/packages/dnb-eufemia/src/components/layout/__tests__/FlexItem.screenshot.test.ts +++ b/packages/dnb-eufemia/src/components/flex/__tests__/Item.screenshot.test.ts @@ -5,13 +5,13 @@ import { makeScreenshot } from '../../../core/jest/jestSetupScreenshots' -describe('Layout.FlexItem', () => { +describe('Flex.Item', () => { const selector = - '[data-visual-test="layout-flex-item-custom-size"] .dnb-layout-flex-container' + '[data-visual-test="flex-item-custom-size"] .dnb-flex-container' it('have to match responsive size on large viewport', async () => { const screenshot = await makeScreenshot({ - url: '/uilib/components/layout/FlexItem/demos', + url: '/uilib/components/flex/item/demos', pageViewport: { width: 1000, }, @@ -22,7 +22,7 @@ describe('Layout.FlexItem', () => { it('have to match responsive size on medium viewport', async () => { const screenshot = await makeScreenshot({ - url: '/uilib/components/layout/FlexItem/demos', + url: '/uilib/components/flex/item/demos', pageViewport: { width: 800, }, @@ -33,7 +33,7 @@ describe('Layout.FlexItem', () => { it('have to match responsive size on small viewport', async () => { const screenshot = await makeScreenshot({ - url: '/uilib/components/layout/FlexItem/demos', + url: '/uilib/components/flex/item/demos', pageViewport: { width: 600, }, @@ -44,7 +44,7 @@ describe('Layout.FlexItem', () => { it('have to match responsive size on x-small viewport', async () => { const screenshot = await makeScreenshot({ - url: '/uilib/components/layout/FlexItem/demos', + url: '/uilib/components/flex/item/demos', pageViewport: { width: 400, }, diff --git a/packages/dnb-eufemia/src/components/layout/__tests__/FlexItem.test.tsx b/packages/dnb-eufemia/src/components/flex/__tests__/Item.test.tsx similarity index 59% rename from packages/dnb-eufemia/src/components/layout/__tests__/FlexItem.test.tsx rename to packages/dnb-eufemia/src/components/flex/__tests__/Item.test.tsx index 50dcd5bf85e..04c1b7a89e9 100644 --- a/packages/dnb-eufemia/src/components/layout/__tests__/FlexItem.test.tsx +++ b/packages/dnb-eufemia/src/components/flex/__tests__/Item.test.tsx @@ -3,15 +3,14 @@ import { act, render } from '@testing-library/react' import 'mock-match-media/jest-setup' import { setMedia, matchMedia } from 'mock-match-media' import { P } from '../../../elements' -import FlexItem from '../FlexItem' -import FlexContainer from '../FlexContainer' import MainHeading from '../../../extensions/forms/Form/MainHeading' +import Flex from '../Flex' -describe('Layout.FlexItem', () => { +describe('Flex.Item', () => { it('should forward HTML attributes', () => { - render(Flex) + render(Flex) - const element = document.querySelector('.dnb-layout-flex-item') + const element = document.querySelector('.dnb-flex-item') const attributes = Array.from(element.attributes).map( (attr) => attr.name ) @@ -21,36 +20,36 @@ describe('Layout.FlexItem', () => { }) it('should support spacing props', () => { - const { rerender } = render(Flex) - const element = document.querySelector('.dnb-layout-flex-item') + const { rerender } = render(Flex) + const element = document.querySelector('.dnb-flex-item') expect(element.classList).toContain('dnb-space__top--large') - rerender(Flex) + rerender(Flex) expect(element.classList).toContain('dnb-space__top--x-large') }) it('should contain given classes', () => { - render(Flex) + render(Flex) - const element = document.querySelector('.dnb-layout-flex-item') + const element = document.querySelector('.dnb-flex-item') expect(Array.from(element.classList)).toEqual([ 'dnb-space', - 'dnb-layout-flex-item', + 'dnb-flex-item', 'custom-class', ]) }) it('should render children', () => { render( - +

Flex

- + ) - const element = document.querySelector('.dnb-layout-flex-item') + const element = document.querySelector('.dnb-flex-item') const children = element.children expect(children.length).toEqual(1) @@ -58,31 +57,31 @@ describe('Layout.FlexItem', () => { }) it('should grow and shrink', () => { - const { rerender } = render(Flex) + const { rerender } = render(Flex) - const element = document.querySelector('.dnb-layout-flex-item') + const element = document.querySelector('.dnb-flex-item') - expect(element.className).toContain('dnb-layout-flex-item--grow') - expect(element.className).not.toContain('dnb-layout-flex-item--shrink') + expect(element.className).toContain('dnb-flex-item--grow') + expect(element.className).not.toContain('dnb-flex-item--shrink') - rerender(Flex) + rerender(Flex) - expect(element.className).toContain('dnb-layout-flex-item--shrink') - expect(element.className).not.toContain('dnb-layout-flex-item--grow') + expect(element.className).toContain('dnb-flex-item--shrink') + expect(element.className).not.toContain('dnb-flex-item--grow') }) it('should use div as default element', () => { - render(Flex) + render(Flex) - const element = document.querySelector('.dnb-layout-flex-item') + const element = document.querySelector('.dnb-flex-item') expect(element.tagName).toBe('DIV') }) it('should set element', () => { - render(Flex) + render(Flex) - const element = document.querySelector('.dnb-layout-flex-item') + const element = document.querySelector('.dnb-flex-item') expect(element.tagName).toBe('DIV') }) @@ -103,24 +102,24 @@ describe('Layout.FlexItem', () => { it('should contain responsive class', () => { render( - - FlexItem - + + FlexItem + ) - const element = document.querySelector('.dnb-layout-flex-item') + const element = document.querySelector('.dnb-flex-item') - expect(element.classList).toContain( - 'dnb-layout-flex-item--responsive' - ) + expect(element.classList).toContain('dnb-flex-item--responsive') }) it('should unset size when null is given', () => { render( - - FlexItem - FlexItem - + + FlexItem + + FlexItem + + ) expect(getFlexItem(0).getAttribute('style')).toBe( @@ -130,19 +129,17 @@ describe('Layout.FlexItem', () => { '--small: 4; --large: auto;' ) - const element = document.querySelector('.dnb-layout-flex-item') + const element = document.querySelector('.dnb-flex-item') - expect(element.classList).toContain( - 'dnb-layout-flex-item--responsive' - ) + expect(element.classList).toContain('dnb-flex-item--responsive') }) it('should set style attribute based on sizes', () => { const { rerender } = render( - - FlexItem - FlexItem - + + FlexItem + FlexItem + ) expect(getFlexItem(0).getAttribute('style')).toBe( @@ -153,10 +150,10 @@ describe('Layout.FlexItem', () => { ) rerender( - - FlexItem - FlexItem - + + FlexItem + FlexItem + ) expect(getFlexItem(0).getAttribute('style')).toBe( @@ -167,14 +164,14 @@ describe('Layout.FlexItem', () => { ) rerender( - - + + FlexItem - - + + FlexItem - - + + ) expect(getFlexItem(0).getAttribute('style')).toBe( @@ -187,10 +184,10 @@ describe('Layout.FlexItem', () => { it('should set correct spacing', () => { const { rerender } = render( - - FlexItem - FlexItem - + + FlexItem + FlexItem + ) expect(getSpacingClasses()).toEqual([ @@ -199,10 +196,10 @@ describe('Layout.FlexItem', () => { ]) rerender( - - FlexItem - FlexItem - + + FlexItem + FlexItem + ) expect(getSpacingClasses()).toEqual([ @@ -213,17 +210,17 @@ describe('Layout.FlexItem', () => { it('should omit size when heading is a child and direction is horizontal', () => { const { rerender } = render( - + Heading - FlexItem - FlexItem - + FlexItem + FlexItem + ) - const element = document.querySelector('.dnb-layout-flex-container') + const element = document.querySelector('.dnb-flex-container') expect(element.className).not.toContain( - 'dnb-layout-flex-container--has-size' + 'dnb-flex-container--has-size' ) expect(getSpacingClasses()).toEqual([ ['dnb-space__left--zero', 'dnb-space__right--small'], @@ -231,19 +228,19 @@ describe('Layout.FlexItem', () => { ]) rerender( - + Heading - + FlexItem - - + + FlexItem - - + + ) expect(element.className).not.toContain( - 'dnb-layout-flex-container--has-size' + 'dnb-flex-container--has-size' ) expect(getSpacingClasses()).toEqual([ ['dnb-space__left--small', 'dnb-space__right--small'], @@ -253,10 +250,10 @@ describe('Layout.FlexItem', () => { it('should omit size prop logic when FlexContainer "direction" is vertical', () => { const { rerender } = render( - - FlexItem - FlexItem - + + FlexItem + FlexItem + ) expect(getSpacingClasses()).toEqual([ @@ -265,10 +262,10 @@ describe('Layout.FlexItem', () => { ]) rerender( - - FlexItem - FlexItem - + + FlexItem + FlexItem + ) expect(getSpacingClasses()).toEqual([ @@ -279,15 +276,15 @@ describe('Layout.FlexItem', () => { it('should allow custom spacing on item', () => { const { rerender } = render( - - + + FlexItem - - + + FlexItem - - FlexItem - + + FlexItem + ) expect(getSpacingClasses()).toEqual([ @@ -297,17 +294,17 @@ describe('Layout.FlexItem', () => { ]) rerender( - - + + FlexItem - - + + FlexItem - - + + FlexItem - - + + ) expect(getSpacingClasses()).toEqual([ @@ -319,15 +316,15 @@ describe('Layout.FlexItem', () => { it('should omit size prop logic when FlexContainer "divider" is line', () => { const { rerender } = render( - - + + FlexItem - - + + FlexItem - - FlexItem - + + FlexItem + ) expect(getSpacingClasses()).toEqual([ @@ -337,17 +334,17 @@ describe('Layout.FlexItem', () => { ]) rerender( - - + + FlexItem - - + + FlexItem - - + + FlexItem - - + + ) expect(getSpacingClasses()).toEqual([ @@ -359,10 +356,10 @@ describe('Layout.FlexItem', () => { it('should use given "spacing" size from FlexContainer', () => { const { rerender } = render( - - FlexItem - FlexItem - + + FlexItem + FlexItem + ) expect(getSpacingClasses()).toEqual([ @@ -371,10 +368,10 @@ describe('Layout.FlexItem', () => { ]) rerender( - - FlexItem - FlexItem - + + FlexItem + FlexItem + ) expect(getSpacingClasses()).toEqual([ @@ -387,11 +384,11 @@ describe('Layout.FlexItem', () => { setMedia({ width: SMALL }) render( - - FlexItem - FlexItem - FlexItem - + + FlexItem + FlexItem + FlexItem + ) expect(getSpacingClasses()).toEqual([ @@ -415,11 +412,11 @@ describe('Layout.FlexItem', () => { setMedia({ width: SMALL }) render( - - FlexItem - FlexItem - FlexItem - + + FlexItem + FlexItem + FlexItem + ) expect(getSpacingClasses()).toEqual([ @@ -443,10 +440,10 @@ describe('Layout.FlexItem', () => { function getSpacingClasses() { const collection = [] - const elements = document.querySelectorAll('.dnb-layout-flex-item') + const elements = document.querySelectorAll('.dnb-flex-item') elements.forEach((node) => { - const element = node.querySelector('.dnb-layout-flex-item__spacer') + const element = node.querySelector('.dnb-flex-item__spacer') const item = [] @@ -465,4 +462,4 @@ function getSpacingClasses() { } const getFlexItem = (item: number) => - document.querySelectorAll('.dnb-layout-flex-item')[item] as HTMLElement + document.querySelectorAll('.dnb-flex-item')[item] as HTMLElement diff --git a/packages/dnb-eufemia/src/components/flex/__tests__/Stack.test.tsx b/packages/dnb-eufemia/src/components/flex/__tests__/Stack.test.tsx new file mode 100644 index 00000000000..cdaac8f04a2 --- /dev/null +++ b/packages/dnb-eufemia/src/components/flex/__tests__/Stack.test.tsx @@ -0,0 +1,106 @@ +import React from 'react' +import { render } from '@testing-library/react' +import Flex from '../Flex' + +describe('Flex.Stack', () => { + it('should forward HTML attributes', () => { + render(content) + + const element = document.querySelector('.dnb-flex-stack') + const attributes = Array.from(element.attributes).map( + (attr) => attr.name + ) + + expect(attributes).toContain('aria-label') + expect(element.getAttribute('aria-label')).toBe('Aria Label') + }) + + it('should support spacing props', () => { + const { rerender } = render( + content + ) + + const element = document.querySelector('.dnb-flex-stack') + + expect(element.classList).toContain('dnb-space__top--large') + + rerender(content) + + expect(element.classList).toContain('dnb-space__top--x-large') + }) + + it('should contain given classes', () => { + render(content) + + const element = document.querySelector('.dnb-flex-stack') + + expect(Array.from(element.classList)).toEqual([ + 'dnb-space', + 'dnb-flex-container', + 'dnb-flex-stack', + 'custom-class', + 'dnb-flex-container--direction-vertical', + 'dnb-flex-container--justify-flex-start', + 'dnb-flex-container--align-stretch', + 'dnb-flex-container--align-self-stretch', + 'dnb-flex-container--spacing-small', + 'dnb-flex-container--wrap', + 'dnb-flex-container--divider-space', + ]) + }) + + it('should support "spacing" property', () => { + render(content) + + const element = document.querySelector('.dnb-flex-stack') + + expect(element.classList).toContain( + 'dnb-flex-container--spacing-large' + ) + expect(element.classList).toContain( + 'dnb-flex-container--divider-space' + ) + }) + + it('should omit spacing when "spacing" is false', () => { + render(content) + + const element = document.querySelector('.dnb-flex-stack') + + expect(element.className).not.toContain('spacing') + }) + + it('should default to section element', () => { + render(content) + + const element = document.querySelector('.dnb-flex-stack') + + expect(element.tagName).toBe('SECTION') + }) + + it('should default direction to column', () => { + render(content) + + const element = document.querySelector('.dnb-flex-stack') + + expect(element.classList).toContain( + 'dnb-flex-container--direction-vertical' + ) + }) + + it('should set flow direction of content', () => { + const { rerender } = render(content) + + const element = document.querySelector('.dnb-flex-stack') + + expect(element.classList).toContain( + 'dnb-flex-container--direction-vertical' + ) + + rerender(content) + + expect(element.classList).toContain( + 'dnb-flex-container--direction-horizontal' + ) + }) +}) diff --git a/packages/dnb-eufemia/src/components/layout/__tests__/Vertical.test.tsx b/packages/dnb-eufemia/src/components/flex/__tests__/Vertical.test.tsx similarity index 62% rename from packages/dnb-eufemia/src/components/layout/__tests__/Vertical.test.tsx rename to packages/dnb-eufemia/src/components/flex/__tests__/Vertical.test.tsx index a8b42c30b46..55a622d3a91 100644 --- a/packages/dnb-eufemia/src/components/layout/__tests__/Vertical.test.tsx +++ b/packages/dnb-eufemia/src/components/flex/__tests__/Vertical.test.tsx @@ -1,14 +1,14 @@ import React from 'react' import { render } from '@testing-library/react' -import Vertical from '../Vertical' +import Flex from '../Flex' import Card from '../../card/Card' -describe('Layout.Vertical', () => { +describe('Flex.Vertical', () => { it('should forward HTML attributes', () => { - render(content) + render(content) const element = document.querySelector( - '.dnb-layout-flex-container--direction-vertical' + '.dnb-flex-container--direction-vertical' ) const attributes = Array.from(element.attributes).map( (attr) => attr.name @@ -19,49 +19,51 @@ describe('Layout.Vertical', () => { }) it('should support spacing props', () => { - const { rerender } = render(content) + const { rerender } = render( + content + ) const element = document.querySelector( - '.dnb-layout-flex-container--direction-vertical' + '.dnb-flex-container--direction-vertical' ) expect(element.classList).toContain('dnb-space__top--large') - rerender(content) + rerender(content) expect(element.classList).toContain('dnb-space__top--x-large') }) it('should contain given classes', () => { - render(content) + render(content) const element = document.querySelector( - '.dnb-layout-flex-container--direction-vertical' + '.dnb-flex-container--direction-vertical' ) expect(Array.from(element.classList)).toEqual([ 'dnb-space', - 'dnb-layout-flex-container', + 'dnb-flex-container', 'custom-class', - 'dnb-layout-flex-container--direction-vertical', - 'dnb-layout-flex-container--justify-flex-start', - 'dnb-layout-flex-container--align-flex-start', - 'dnb-layout-flex-container--spacing-small', - 'dnb-layout-flex-container--wrap', - 'dnb-layout-flex-container--divider-space', + 'dnb-flex-container--direction-vertical', + 'dnb-flex-container--justify-flex-start', + 'dnb-flex-container--align-flex-start', + 'dnb-flex-container--spacing-small', + 'dnb-flex-container--wrap', + 'dnb-flex-container--divider-space', ]) }) it('should render children', () => { render( - + Content 1 Content 2 Content 3 - + ) const element = document.querySelector( - '.dnb-layout-flex-container--direction-vertical' + '.dnb-flex-container--direction-vertical' ) const children = element.children const childredTextContents = Array.from(children).map((child) => @@ -78,28 +80,28 @@ describe('Layout.Vertical', () => { it('should apply spacing to children', () => { render( - + Content 1 Content 2 Content 3 - + ) const element = document.querySelector( - '.dnb-layout-flex-container--direction-vertical' + '.dnb-flex-container--direction-vertical' ) const children = element.children expect(children[0].className).toContain('dnb-space__top--zero') expect(children[0].className).toContain('dnb-space__bottom--zero') - expect(children[0].className).toContain('dnb-layout-flex-item') + expect(children[0].className).toContain('dnb-flex-item') expect(children[1].className).toContain('dnb-space__top--small') expect(children[1].className).toContain('dnb-space__bottom--zero') - expect(children[1].className).toContain('dnb-layout-flex-item') + expect(children[1].className).toContain('dnb-flex-item') expect(children[2].className).toContain('dnb-space__top--small') expect(children[2].className).toContain('dnb-space__bottom--zero') - expect(children[2].className).toContain('dnb-layout-flex-item') + expect(children[2].className).toContain('dnb-flex-item') }) }) diff --git a/packages/dnb-eufemia/src/components/layout/__tests__/__image_snapshots__/layoutflexcontainer-have-to-match-divider.snap.png b/packages/dnb-eufemia/src/components/flex/__tests__/__image_snapshots__/flexcontainer-have-to-match-divider.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/layout/__tests__/__image_snapshots__/layoutflexcontainer-have-to-match-divider.snap.png rename to packages/dnb-eufemia/src/components/flex/__tests__/__image_snapshots__/flexcontainer-have-to-match-divider.snap.png diff --git a/packages/dnb-eufemia/src/components/layout/__tests__/__image_snapshots__/layoutflexcontainer-have-to-match-field-on-large-viewport.snap.png b/packages/dnb-eufemia/src/components/flex/__tests__/__image_snapshots__/flexcontainer-have-to-match-field-on-large-viewport.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/layout/__tests__/__image_snapshots__/layoutflexcontainer-have-to-match-field-on-large-viewport.snap.png rename to packages/dnb-eufemia/src/components/flex/__tests__/__image_snapshots__/flexcontainer-have-to-match-field-on-large-viewport.snap.png diff --git a/packages/dnb-eufemia/src/components/layout/__tests__/__image_snapshots__/layoutflexcontainer-have-to-match-field-on-small-viewport.snap.png b/packages/dnb-eufemia/src/components/flex/__tests__/__image_snapshots__/flexcontainer-have-to-match-field-on-small-viewport.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/layout/__tests__/__image_snapshots__/layoutflexcontainer-have-to-match-field-on-small-viewport.snap.png rename to packages/dnb-eufemia/src/components/flex/__tests__/__image_snapshots__/flexcontainer-have-to-match-field-on-small-viewport.snap.png diff --git a/packages/dnb-eufemia/src/components/layout/__tests__/__image_snapshots__/layoutflexcontainer-have-to-match-field-on-x-small-viewport.snap.png b/packages/dnb-eufemia/src/components/flex/__tests__/__image_snapshots__/flexcontainer-have-to-match-field-on-x-small-viewport.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/layout/__tests__/__image_snapshots__/layoutflexcontainer-have-to-match-field-on-x-small-viewport.snap.png rename to packages/dnb-eufemia/src/components/flex/__tests__/__image_snapshots__/flexcontainer-have-to-match-field-on-x-small-viewport.snap.png diff --git a/packages/dnb-eufemia/src/components/layout/__tests__/__image_snapshots__/layoutflexitem-have-to-match-responsive-size-on-large-viewport.snap.png b/packages/dnb-eufemia/src/components/flex/__tests__/__image_snapshots__/flexitem-have-to-match-responsive-size-on-large-viewport.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/layout/__tests__/__image_snapshots__/layoutflexitem-have-to-match-responsive-size-on-large-viewport.snap.png rename to packages/dnb-eufemia/src/components/flex/__tests__/__image_snapshots__/flexitem-have-to-match-responsive-size-on-large-viewport.snap.png diff --git a/packages/dnb-eufemia/src/components/layout/__tests__/__image_snapshots__/layoutflexitem-have-to-match-responsive-size-on-medium-viewport.snap.png b/packages/dnb-eufemia/src/components/flex/__tests__/__image_snapshots__/flexitem-have-to-match-responsive-size-on-medium-viewport.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/layout/__tests__/__image_snapshots__/layoutflexitem-have-to-match-responsive-size-on-medium-viewport.snap.png rename to packages/dnb-eufemia/src/components/flex/__tests__/__image_snapshots__/flexitem-have-to-match-responsive-size-on-medium-viewport.snap.png diff --git a/packages/dnb-eufemia/src/components/layout/__tests__/__image_snapshots__/layoutflexitem-have-to-match-responsive-size-on-small-viewport.snap.png b/packages/dnb-eufemia/src/components/flex/__tests__/__image_snapshots__/flexitem-have-to-match-responsive-size-on-small-viewport.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/layout/__tests__/__image_snapshots__/layoutflexitem-have-to-match-responsive-size-on-small-viewport.snap.png rename to packages/dnb-eufemia/src/components/flex/__tests__/__image_snapshots__/flexitem-have-to-match-responsive-size-on-small-viewport.snap.png diff --git a/packages/dnb-eufemia/src/components/layout/__tests__/__image_snapshots__/layoutflexitem-have-to-match-responsive-size-on-x-small-viewport.snap.png b/packages/dnb-eufemia/src/components/flex/__tests__/__image_snapshots__/flexitem-have-to-match-responsive-size-on-x-small-viewport.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/layout/__tests__/__image_snapshots__/layoutflexitem-have-to-match-responsive-size-on-x-small-viewport.snap.png rename to packages/dnb-eufemia/src/components/flex/__tests__/__image_snapshots__/flexitem-have-to-match-responsive-size-on-x-small-viewport.snap.png diff --git a/packages/dnb-eufemia/src/components/layout/__tests__/utils.test.tsx b/packages/dnb-eufemia/src/components/flex/__tests__/utils.test.tsx similarity index 95% rename from packages/dnb-eufemia/src/components/layout/__tests__/utils.test.tsx rename to packages/dnb-eufemia/src/components/flex/__tests__/utils.test.tsx index 2028d35181a..1b5494dbebd 100644 --- a/packages/dnb-eufemia/src/components/layout/__tests__/utils.test.tsx +++ b/packages/dnb-eufemia/src/components/flex/__tests__/utils.test.tsx @@ -2,7 +2,7 @@ import React from 'react' import { MainHeading, SubHeading } from '../../../extensions/forms/Form' import Heading from '../../Heading' import { H1, H2, H3, H4, H5, H6 } from '../../../elements' -import { isHeadingElement, isSpacePropsComponent } from '../utils' +import { isHeadingElement, isSpacePropsComponent } from '../../flex/utils' describe('isHeadingElement', () => { it('should detect if a heading component is given', () => { diff --git a/packages/dnb-eufemia/src/components/flex/index.ts b/packages/dnb-eufemia/src/components/flex/index.ts new file mode 100644 index 00000000000..3d924cf3197 --- /dev/null +++ b/packages/dnb-eufemia/src/components/flex/index.ts @@ -0,0 +1,5 @@ +export { default as Container } from './Container' +export { default as Item } from './Item' +export { default as Stack } from './Stack' +export { default as Horizontal } from './Horizontal' +export { default as Vertical } from './Vertical' diff --git a/packages/dnb-eufemia/src/components/flex/style.ts b/packages/dnb-eufemia/src/components/flex/style.ts new file mode 100644 index 00000000000..ab432a8c304 --- /dev/null +++ b/packages/dnb-eufemia/src/components/flex/style.ts @@ -0,0 +1,6 @@ +/** + * Web Style Import + * + */ + +import './style/dnb-flex.scss' diff --git a/packages/dnb-eufemia/src/components/flex/style/dnb-flex.scss b/packages/dnb-eufemia/src/components/flex/style/dnb-flex.scss new file mode 100644 index 00000000000..296abc57096 --- /dev/null +++ b/packages/dnb-eufemia/src/components/flex/style/dnb-flex.scss @@ -0,0 +1,3 @@ +@import './flex-container.scss'; +@import './flex-item.scss'; +@import './flex-stack.scss'; diff --git a/packages/dnb-eufemia/src/components/layout/style/layout-flex-container.scss b/packages/dnb-eufemia/src/components/flex/style/flex-container.scss similarity index 98% rename from packages/dnb-eufemia/src/components/layout/style/layout-flex-container.scss rename to packages/dnb-eufemia/src/components/flex/style/flex-container.scss index 509234ba293..cf6d0c21757 100644 --- a/packages/dnb-eufemia/src/components/layout/style/layout-flex-container.scss +++ b/packages/dnb-eufemia/src/components/flex/style/flex-container.scss @@ -1,4 +1,4 @@ -.dnb-layout-flex-container { +.dnb-flex-container { display: flex; row-gap: var(--gap, 0); diff --git a/packages/dnb-eufemia/src/components/layout/style/layout-flex-item.scss b/packages/dnb-eufemia/src/components/flex/style/flex-item.scss similarity index 81% rename from packages/dnb-eufemia/src/components/layout/style/layout-flex-item.scss rename to packages/dnb-eufemia/src/components/flex/style/flex-item.scss index 3de0b65ba61..21b2dd2a04d 100644 --- a/packages/dnb-eufemia/src/components/layout/style/layout-flex-item.scss +++ b/packages/dnb-eufemia/src/components/flex/style/flex-item.scss @@ -1,6 +1,6 @@ @import '../../../style/core/utilities.scss'; -.dnb-layout-flex-item { +.dnb-flex-item { &--grow { flex-grow: 1; } @@ -36,13 +36,13 @@ --sizeCount--default: 12; --size--default: var(--small); - .dnb-layout-flex-container[data-media-key='small'] & { + .dnb-flex-container[data-media-key='small'] & { --size: var(--small, var(--medium)); } - .dnb-layout-flex-container[data-media-key='medium'] & { + .dnb-flex-container[data-media-key='medium'] & { --size: var(--medium, var(--large)); } - .dnb-layout-flex-container[data-media-key='large'] & { + .dnb-flex-container[data-media-key='large'] & { --size: var(--large, var(--medium)); } diff --git a/packages/dnb-eufemia/src/components/flex/style/flex-stack.scss b/packages/dnb-eufemia/src/components/flex/style/flex-stack.scss new file mode 100644 index 00000000000..9a491658bc9 --- /dev/null +++ b/packages/dnb-eufemia/src/components/flex/style/flex-stack.scss @@ -0,0 +1,3 @@ +.dnb-flex-stack + .dnb-flex-stack { + margin-top: var(--spacing-large); +} diff --git a/packages/dnb-eufemia/src/components/flex/style/index.ts b/packages/dnb-eufemia/src/components/flex/style/index.ts new file mode 100644 index 00000000000..f15afbdd58b --- /dev/null +++ b/packages/dnb-eufemia/src/components/flex/style/index.ts @@ -0,0 +1,6 @@ +/** + * Web Style Import + * + */ + +import './dnb-flex.scss' diff --git a/packages/dnb-eufemia/src/components/layout/types.ts b/packages/dnb-eufemia/src/components/flex/types.ts similarity index 100% rename from packages/dnb-eufemia/src/components/layout/types.ts rename to packages/dnb-eufemia/src/components/flex/types.ts diff --git a/packages/dnb-eufemia/src/components/layout/utils.tsx b/packages/dnb-eufemia/src/components/flex/utils.tsx similarity index 100% rename from packages/dnb-eufemia/src/components/layout/utils.tsx rename to packages/dnb-eufemia/src/components/flex/utils.tsx diff --git a/packages/dnb-eufemia/src/components/index.ts b/packages/dnb-eufemia/src/components/index.ts index e1908c24f7c..bb52903e68c 100644 --- a/packages/dnb-eufemia/src/components/index.ts +++ b/packages/dnb-eufemia/src/components/index.ts @@ -23,6 +23,7 @@ import DatePicker from './date-picker/DatePicker' import Dialog from './dialog/Dialog' import Drawer from './drawer/Drawer' import Dropdown from './dropdown/Dropdown' +import Flex from './flex/Flex' import FormLabel from './form-label/FormLabel' import FormRow from './form-row/FormRow' import FormSet from './form-set/FormSet' @@ -76,6 +77,7 @@ export { Dialog, Drawer, Dropdown, + Flex, FormLabel, FormRow, FormSet, diff --git a/packages/dnb-eufemia/src/components/layout/Flex.tsx b/packages/dnb-eufemia/src/components/layout/Flex.tsx deleted file mode 100644 index f60e57de7b2..00000000000 --- a/packages/dnb-eufemia/src/components/layout/Flex.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/__tests__/Stack.test.tsx b/packages/dnb-eufemia/src/components/layout/__tests__/Stack.test.tsx deleted file mode 100644 index b7f3d945795..00000000000 --- a/packages/dnb-eufemia/src/components/layout/__tests__/Stack.test.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import React from 'react' -import { render } from '@testing-library/react' -import Stack from '../Stack' - -describe('Layout.Stack', () => { - it('should forward HTML attributes', () => { - render(content) - - const element = document.querySelector('.dnb-layout-stack') - const attributes = Array.from(element.attributes).map( - (attr) => attr.name - ) - - expect(attributes).toContain('aria-label') - expect(element.getAttribute('aria-label')).toBe('Aria Label') - }) - - it('should support spacing props', () => { - const { rerender } = render(content) - - const element = document.querySelector('.dnb-layout-stack') - - expect(element.classList).toContain('dnb-space__top--large') - - rerender(content) - - expect(element.classList).toContain('dnb-space__top--x-large') - }) - - it('should contain given classes', () => { - render(content) - - const element = document.querySelector('.dnb-layout-stack') - - expect(Array.from(element.classList)).toEqual([ - 'dnb-space', - 'dnb-layout-flex-container', - 'dnb-layout-stack', - 'custom-class', - 'dnb-layout-flex-container--direction-vertical', - 'dnb-layout-flex-container--justify-flex-start', - 'dnb-layout-flex-container--align-stretch', - 'dnb-layout-flex-container--align-self-stretch', - 'dnb-layout-flex-container--spacing-small', - 'dnb-layout-flex-container--wrap', - 'dnb-layout-flex-container--divider-space', - ]) - }) - - it('should support "spacing" property', () => { - render(content) - - const element = document.querySelector('.dnb-layout-stack') - - expect(element.classList).toContain( - 'dnb-layout-flex-container--spacing-large' - ) - expect(element.classList).toContain( - 'dnb-layout-flex-container--divider-space' - ) - }) - - it('should omit spacing when "spacing" is false', () => { - render(content) - - const element = document.querySelector('.dnb-layout-stack') - - expect(element.className).not.toContain('spacing') - }) - - it('should default to section element', () => { - render(content) - - const element = document.querySelector('.dnb-layout-stack') - - expect(element.tagName).toBe('SECTION') - }) - - it('should default direction to column', () => { - render(content) - - const element = document.querySelector('.dnb-layout-stack') - - expect(element.classList).toContain( - 'dnb-layout-flex-container--direction-vertical' - ) - }) - - it('should set flow direction of content', () => { - const { rerender } = render(content) - - const element = document.querySelector('.dnb-layout-stack') - - expect(element.classList).toContain( - 'dnb-layout-flex-container--direction-vertical' - ) - - rerender(content) - - expect(element.classList).toContain( - 'dnb-layout-flex-container--direction-horizontal' - ) - }) -}) diff --git a/packages/dnb-eufemia/src/components/layout/index.ts b/packages/dnb-eufemia/src/components/layout/index.ts index a17e033d632..c7260bc0ea0 100644 --- a/packages/dnb-eufemia/src/components/layout/index.ts +++ b/packages/dnb-eufemia/src/components/layout/index.ts @@ -1,10 +1,9 @@ export { default as Card } from '../card/Card' -export { default as FlexContainer } from './FlexContainer' -export { default as FlexItem } from './FlexItem' +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 './Stack' -export { default as Horizontal } from './Horizontal' -export { default as Vertical } from './Vertical' -export { default as Flex } from './Flex' +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 index 224bba8bcec..a792c6fce3b 100644 --- a/packages/dnb-eufemia/src/components/layout/style/dnb-layout.scss +++ b/packages/dnb-eufemia/src/components/layout/style/dnb-layout.scss @@ -1,5 +1,2 @@ -@import './layout-flex-container.scss'; -@import './layout-flex-item.scss'; @import './layout-grid-container.scss'; @import './layout-grid-item.scss'; -@import './layout-stack.scss'; diff --git a/packages/dnb-eufemia/src/components/layout/style/layout-stack.scss b/packages/dnb-eufemia/src/components/layout/style/layout-stack.scss deleted file mode 100644 index 714dce3b574..00000000000 --- a/packages/dnb-eufemia/src/components/layout/style/layout-stack.scss +++ /dev/null @@ -1,3 +0,0 @@ -.dnb-layout-stack + .dnb-layout-stack { - margin-top: var(--spacing-large); -} diff --git a/packages/dnb-eufemia/src/components/lib.ts b/packages/dnb-eufemia/src/components/lib.ts index a83caf8e752..ee3392af714 100644 --- a/packages/dnb-eufemia/src/components/lib.ts +++ b/packages/dnb-eufemia/src/components/lib.ts @@ -23,6 +23,7 @@ import DatePicker from './date-picker/DatePicker' import Dialog from './dialog/Dialog' import Drawer from './drawer/Drawer' import Dropdown from './dropdown/Dropdown' +import Flex from './flex/Flex' import FormLabel from './form-label/FormLabel' import FormRow from './form-row/FormRow' import FormSet from './form-set/FormSet' @@ -76,6 +77,7 @@ export { Dialog, Drawer, Dropdown, + Flex, FormLabel, FormRow, FormSet, @@ -130,6 +132,7 @@ export const getComponents = () => { Dialog, Drawer, Dropdown, + Flex, FormLabel, FormRow, FormSet, diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelection.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelection.tsx index c3e78e6c82c..2c5ab775d53 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelection.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelection.tsx @@ -6,7 +6,7 @@ import Option from '../Option' import FieldBlock from '../../FieldBlock' import { useDataValue } from '../../hooks' import { FieldProps } from '../../types' -import { pickSpacingProps } from '../../../../components/layout/utils' +import { pickSpacingProps } from '../../../../components/flex/utils' interface IOption { title: string diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/CountryCode/CountryCode.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/CountryCode/CountryCode.tsx index 1142041e17a..efbd131249d 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/CountryCode/CountryCode.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/CountryCode/CountryCode.tsx @@ -4,7 +4,7 @@ import classnames from 'classnames' import countries from '../../constants/countries' import { useDataValue } from '../../hooks' import { FormError, FieldProps, FieldHelpProps } from '../../types' -import { pickSpacingProps } from '../../../../components/layout/utils' +import { pickSpacingProps } from '../../../../components/flex/utils' import SharedContext from '../../../../shared/Context' export type Props = FieldHelpProps & diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Date/Date.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Date/Date.tsx index 4fe2079e57b..230abae39b3 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/Date/Date.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/Date/Date.tsx @@ -2,7 +2,7 @@ import React, { useContext } from 'react' import { DatePicker, HelpButton } from '../../../../components' import { useDataValue } from '../../hooks' import { FieldProps, FieldHelpProps } from '../../types' -import { pickSpacingProps } from '../../../../components/layout/utils' +import { pickSpacingProps } from '../../../../components/flex/utils' import SharedContext from '../../../../shared/Context' export type Props = FieldHelpProps & FieldProps diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/Number.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Number/Number.tsx index 4dee35789a4..c26da20374b 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/Number/Number.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/Number/Number.tsx @@ -5,7 +5,7 @@ import classnames from 'classnames' import FieldBlock from '../../FieldBlock' import { useDataValue } from '../../hooks' import { FieldProps, FieldHelpProps } from '../../types' -import { pickSpacingProps } from '../../../../components/layout/utils' +import { pickSpacingProps } from '../../../../components/flex/utils' interface ErrorMessages { required?: string diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx index 62e89086a86..67a892af5ab 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx @@ -6,7 +6,7 @@ import CountryCode from '../CountryCode' import StringComponent from '../String' import { useDataValue } from '../../hooks' import { FieldHelpProps, FieldProps } from '../../types' -import { pickSpacingProps } from '../../../../components/layout/utils' +import { pickSpacingProps } from '../../../../components/flex/utils' import SharedContext from '../../../../shared/Context' export type Props = FieldHelpProps & diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/Selection.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/Selection.tsx index b4a100b7c20..ee2eb7c7d65 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/Selection.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/Selection.tsx @@ -13,7 +13,7 @@ import SharedContext from '../../../../shared/Context' import Option from '../Option' import { useDataValue } from '../../hooks' import { FormError, FieldProps, FieldHelpProps } from '../../types' -import { pickSpacingProps } from '../../../../components/layout/utils' +import { pickSpacingProps } from '../../../../components/flex/utils' interface IOption { title: string | React.ReactNode diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String/String.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/String/String.tsx index dd81e9a39ad..6eead677d0d 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/String/String.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/String/String.tsx @@ -9,7 +9,7 @@ import SharedContext from '../../../../shared/Context' import FieldBlock from '../../FieldBlock' import { useDataValue } from '../../hooks' import { FieldProps, FieldHelpProps } from '../../types' -import { pickSpacingProps } from '../../../../components/layout/utils' +import { pickSpacingProps } from '../../../../components/flex/utils' interface ErrorMessages { required?: string diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/Toggle.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/Toggle.tsx index e2a0f4d1020..c5f72cc1800 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/Toggle.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/Toggle.tsx @@ -10,7 +10,7 @@ import ButtonRow from '../../Form/ButtonRow' import FieldBlock from '../../FieldBlock' import { useDataValue } from '../../hooks' import { FieldProps } from '../../types' -import { pickSpacingProps } from '../../../../components/layout/utils' +import { pickSpacingProps } from '../../../../components/flex/utils' import SharedContext from '../../../../shared/Context' export type Props = FieldProps & { diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/style/dnb-form-main-heading.scss b/packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/style/dnb-form-main-heading.scss index fd3f0473ec0..1015cdfffdb 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/style/dnb-form-main-heading.scss +++ b/packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/style/dnb-form-main-heading.scss @@ -6,7 +6,7 @@ } } - &:has(+ .dnb-layout-stack > .dnb-card, + .dnb-card) { + &:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card) { &:not([class*='space__left']) { margin-left: var(--spacing-medium); } diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/style/dnb-form-sub-heading.scss b/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/style/dnb-form-sub-heading.scss index c7e6b583d34..83015d57fb6 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/style/dnb-form-sub-heading.scss +++ b/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/style/dnb-form-sub-heading.scss @@ -6,7 +6,7 @@ } } - &:has(+ .dnb-layout-stack > .dnb-card, + .dnb-card) { + &:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card) { &:not([class*='space__bottom']) { margin-bottom: var(--spacing-small); } diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/Array.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/Array.tsx index 1ec6901503c..ce2820a9084 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/Array.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/Array.tsx @@ -5,11 +5,12 @@ import IterateElementContext from '../IterateElementContext' import FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock' import { useDataValue } from '../../hooks' import { FieldProps, FieldHelpProps } from '../../types' -import { pickSpacingProps } from '../../../../components/layout/utils' -import FlexContainer, { +import { pickSpacingProps } from '../../../../components/flex/utils' +import { BasicProps as FlexContainerProps, pickFlexContainerProps, -} from '../../../../components/layout/FlexContainer' +} from '../../../../components/flex/Container' +import Flex from '../../../../components/flex/Flex' interface ErrorMessages { required?: string @@ -89,7 +90,7 @@ function ArrayComponent(props: Props) { contentsWidth={width !== false ? width : undefined} {...pickSpacingProps(props)} > - + ) } diff --git a/packages/dnb-eufemia/src/extensions/forms/StepsLayout/Step/Step.tsx b/packages/dnb-eufemia/src/extensions/forms/StepsLayout/Step/Step.tsx index 733b2cbc729..f2aa0739470 100644 --- a/packages/dnb-eufemia/src/extensions/forms/StepsLayout/Step/Step.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/StepsLayout/Step/Step.tsx @@ -1,11 +1,12 @@ import React, { useContext } from 'react' import classnames from 'classnames' import { ComponentProps } from '../../types' -import FlexContainer, { +import { Props as FlexContainerProps, pickFlexContainerProps, -} from '../../../../components/layout/FlexContainer' +} from '../../../../components/flex/Container' import StepsContext from '../StepsContext' +import Flex from '../../../../components/flex/Flex' export type Props = ComponentProps & FlexContainerProps & { @@ -23,13 +24,13 @@ function Step(props: Props) { } return ( - {children} - + ) } diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Boolean/Boolean.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/Boolean/Boolean.tsx index 2f5b4f92208..6865ec7cab5 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Value/Boolean/Boolean.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Value/Boolean/Boolean.tsx @@ -2,7 +2,7 @@ import React, { useContext } from 'react' import ValueBlock from '../../ValueBlock' import { useDataValue } from '../../hooks' import { ValueProps } from '../../types' -import { pickSpacingProps } from '../../../../components/layout/utils' +import { pickSpacingProps } from '../../../../components/flex/utils' import SharedContext from '../../../../shared/Context' export type Props = ValueProps diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Number/Number.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/Number/Number.tsx index 438f5ddbabf..f3244597c86 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Value/Number/Number.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Value/Number/Number.tsx @@ -3,7 +3,7 @@ import { formatNumber } from '../../utils' import ValueBlock from '../../ValueBlock' import { useDataValue } from '../../hooks' import { ValueProps } from '../../types' -import { pickSpacingProps } from '../../../../components/layout/utils' +import { pickSpacingProps } from '../../../../components/flex/utils' export type Props = ValueProps & { // Formatting diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/String/String.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/String/String.tsx index 3a27471b21e..4dd5c37df5f 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Value/String/String.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Value/String/String.tsx @@ -2,7 +2,7 @@ import React from 'react' import ValueBlock from '../../ValueBlock' import { useDataValue } from '../../hooks' import { ValueProps } from '../../types' -import { pickSpacingProps } from '../../../../components/layout/utils' +import { pickSpacingProps } from '../../../../components/flex/utils' export type Props = ValueProps diff --git a/packages/dnb-eufemia/src/extensions/forms/ValueBlock/ValueBlock.tsx b/packages/dnb-eufemia/src/extensions/forms/ValueBlock/ValueBlock.tsx index f7c2ce85841..ecd5845984e 100644 --- a/packages/dnb-eufemia/src/extensions/forms/ValueBlock/ValueBlock.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/ValueBlock/ValueBlock.tsx @@ -3,7 +3,7 @@ import { Span } from '../../../elements' import { FormLabel } from '../../../components' import classnames from 'classnames' import { ValueProps } from '../types' -import { pickSpacingProps } from '../../../components/layout/utils' +import { pickSpacingProps } from '../../../components/flex/utils' export type Props = Omit, 'value'> & { children?: React.ReactNode diff --git a/packages/dnb-eufemia/src/index.ts b/packages/dnb-eufemia/src/index.ts index 496477dab37..128b682f076 100644 --- a/packages/dnb-eufemia/src/index.ts +++ b/packages/dnb-eufemia/src/index.ts @@ -50,6 +50,7 @@ import DatePicker from './components/date-picker/DatePicker' import Dialog from './components/dialog/Dialog' import Drawer from './components/drawer/Drawer' import Dropdown from './components/dropdown/Dropdown' +import Flex from './components/flex/Flex' import FormLabel from './components/form-label/FormLabel' import FormRow from './components/form-row/FormRow' import FormSet from './components/form-set/FormSet' @@ -130,6 +131,7 @@ export { Dialog, Drawer, Dropdown, + Flex, FormLabel, FormRow, FormSet, diff --git a/packages/dnb-eufemia/src/style/dnb-ui-components.scss b/packages/dnb-eufemia/src/style/dnb-ui-components.scss index 519df1cb031..c5285362fa7 100644 --- a/packages/dnb-eufemia/src/style/dnb-ui-components.scss +++ b/packages/dnb-eufemia/src/style/dnb-ui-components.scss @@ -19,6 +19,7 @@ @import '../components/dialog/style/dnb-dialog.scss'; @import '../components/drawer/style/dnb-drawer.scss'; @import '../components/dropdown/style/dnb-dropdown.scss'; +@import '../components/flex/style/dnb-flex.scss'; @import '../components/form-label/style/dnb-form-label.scss'; @import '../components/form-row/style/dnb-form-row.scss'; @import '../components/form-set/style/dnb-form-set.scss';