diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/Examples.tsx index 1c947014598..0af16769b22 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/Examples.tsx @@ -1,5 +1,5 @@ import ComponentBox from '../../../../../../shared/tags/ComponentBox' -import { Flex, Table, Td, Th, Tr } from '@dnb/eufemia/src' +import { Avatar, Flex, Table, Td, Th, Tr } from '@dnb/eufemia/src' import { Iterate, Field, @@ -565,3 +565,135 @@ export const WithArrayValidator = () => { ) } + +export const FilledViewAndEditContainer = () => { + return ( + + {() => { + const MyEditItemForm = () => { + return ( + + + + + ) + } + + const EditItemToolbar = () => { + return ( + + + + + + + + + + ) + } + + const MyEditItem = (props) => { + return ( + } + {...props} + > + + + + ) + } + + const CreateNewEntry = () => { + return ( + + } + showOpenButtonWhen={(list) => list.length > 0} + > + + + ) + } + + const ValueWithAvatar = () => { + const { value } = Iterate.useItem() + const firstName = String(value['firstName'] || '') + return ( + + + {firstName.substring(0, 1).toUpperCase()} + + + + ) + } + + const MyViewItem = () => { + return ( + } + > + + + + + + + + + ) + } + + return ( + console.log('onSubmit', data)} + onSubmitRequest={() => console.log('onSubmitRequest')} + > + + Accounts + + + + + + + + + + + + + ) + }} + + ) +} diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/demos.mdx index 7b8e20894be..42d6de4bd4c 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/demos.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/demos.mdx @@ -49,6 +49,13 @@ With an optional `title` and [Iterate.Toolbar](/uilib/extensions/forms/Iterate/T +### Customize the view and edit containers + +- Using `variant="filled"` will render the [ViewContainer](/uilib/extensions/forms/Iterate/ViewContainer) and [EditContainer](/uilib/extensions/forms/Iterate/EditContainer) with a background color. +- Using `toolbarVariant="custom"` will render the [Toolbar](/uilib/extensions/forms/Iterate/Toolbar/) without any spacing so you can customize it to your needs. + + + ### Initially open diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/EditContainer/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/EditContainer/info.mdx index 9dc74e1820f..d761fac1342 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/EditContainer/info.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/EditContainer/info.mdx @@ -55,8 +55,9 @@ You can get the internal item object by using the `Iterate.useItem` hook. import { Iterate, Field, Value } from '@dnb/eufemia/extensions/forms' const MyItemForm = () => { - const item = Iterate.useItem() - console.log('index:', item.index) + // TypeScript type inference + const item = Iterate.useItem<{ foo: string }>() + console.log('My item:', item.index, item.value.foo) return } diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/EditContainerDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/EditContainerDocs.ts index bb5c00b69d6..b561bae98e9 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/EditContainerDocs.ts +++ b/packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/EditContainerDocs.ts @@ -7,7 +7,7 @@ export const EditContainerProperties: PropertiesTableProps = { status: 'optional', }, variant: { - doc: 'Defines the variant of the container. Can be `outline` or `basic`. Defaults to `outline`.', + doc: 'Defines the variant of the container. Can be `outline`, `filled` or `basic`. Defaults to `outline`.', type: 'string', status: 'optional', }, diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/__tests__/EditAndViewContainer.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/__tests__/EditAndViewContainer.test.tsx index ff239574eb0..16c689f6f39 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/__tests__/EditAndViewContainer.test.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/__tests__/EditAndViewContainer.test.tsx @@ -559,7 +559,7 @@ describe('EditContainer and ViewContainer', () => { ) }) - it('should set variant to "basic" when variant is set to "basic"', async () => { + it('should set correct class for variant "basic"', () => { render( @@ -579,6 +579,30 @@ describe('EditContainer and ViewContainer', () => { expect(editBlock).toHaveClass('dnb-forms-section-block--variant-basic') }) + it('should set correct class for variant "filled"', () => { + render( + + + View Content + + + + Edit Content + + + ) + + const [viewBlock, editBlock] = Array.from( + document.querySelectorAll('.dnb-forms-section-block') + ) + expect(viewBlock).toHaveClass( + 'dnb-forms-section-block--variant-filled' + ) + expect(editBlock).toHaveClass( + 'dnb-forms-section-block--variant-filled' + ) + }) + it('should validate on done button click', async () => { render( diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/ViewContainer/ViewContainerDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Form/Section/ViewContainer/ViewContainerDocs.ts index 94d7f6b53ba..9aed0813273 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Form/Section/ViewContainer/ViewContainerDocs.ts +++ b/packages/dnb-eufemia/src/extensions/forms/Form/Section/ViewContainer/ViewContainerDocs.ts @@ -7,7 +7,7 @@ export const ViewContainerProperties: PropertiesTableProps = { status: 'optional', }, variant: { - doc: 'Defines the variant of the container. Can be `outline` or `basic`. Defaults to `outline`.', + doc: 'Defines the variant of the container. Can be `outline`, `filled` or `basic`. Defaults to `outline`.', type: 'string', status: 'optional', }, diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/containers/SectionContainer.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Section/containers/SectionContainer.tsx index b2c52927db5..5c05ab3fabf 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Form/Section/containers/SectionContainer.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Form/Section/containers/SectionContainer.tsx @@ -19,7 +19,7 @@ export type SectionContainerProps = { * Defines the variant of the ViewContainer or EditContainer. Can be `outline`. * Defaults to `outline`. */ - variant?: 'outline' | 'basic' + variant?: 'outline' | 'basic' | 'filled' } export type Props = { @@ -126,6 +126,7 @@ function SectionContainer(props: Props & FlexContainerProps) { + void + variant?: ArrayItemAreaProps['variant'] + toolbarVariant?: ArrayItemAreaProps['toolbarVariant'] } const ArrayItemAreaContext = createContext(null) diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/Array.screenshot.test.ts b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/Array.screenshot.test.ts index a4583a99dcc..90370890ba3 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/Array.screenshot.test.ts +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/Array.screenshot.test.ts @@ -25,6 +25,30 @@ describe('Iterate.Array', () => { expect(screenshot).toMatchImageSnapshot() }) + it('have to match filled view container', async () => { + const screenshot = await makeScreenshot({ + url, + selector: + '[data-visual-test="filled-view-and-edit-container"] .dnb-forms-section-view-block', + }) + + expect(screenshot).toMatchImageSnapshot() + }) + + it('have to match filled edit container', async () => { + const screenshot = await makeScreenshot({ + url, + selector: '[data-visual-test="filled-view-and-edit-container"]', + screenshotSelector: + '[data-visual-test="filled-view-and-edit-container"] .dnb-forms-section-edit-block', + simulate: 'click', + simulateSelector: + '[data-visual-test="filled-view-and-edit-container"] button', + recalculateHeightAfterSimulate: true, + }) + expect(screenshot).toMatchImageSnapshot() + }) + it('have to match view container', async () => { const screenshot = await makeScreenshot({ url, @@ -38,11 +62,13 @@ describe('Iterate.Array', () => { const screenshot = await makeScreenshot({ url, selector: '[data-visual-test="view-and-edit-container"]', - screenshotSelector: '.dnb-forms-section-edit-block', + screenshotSelector: + '[data-visual-test="view-and-edit-container"] .dnb-forms-section-edit-block', waitAfterSimulate: 100, simulate: 'click', simulateSelector: - '[data-visual-test="view-and-edit-container"] .dnb-forms-iterate-open-button', + '[data-visual-test="view-and-edit-container"] button', + recalculateHeightAfterSimulate: true, }) expect(screenshot).toMatchImageSnapshot() }) diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-edit-container.snap.png b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-edit-container.snap.png index 673fd378ebc..9262ce30446 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-edit-container.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-edit-container.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-filled-edit-container.snap.png b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-filled-edit-container.snap.png new file mode 100644 index 00000000000..d778947cab9 Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-filled-edit-container.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-filled-view-container.snap.png b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-filled-view-container.snap.png new file mode 100644 index 00000000000..41c66d6bb7d Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-filled-view-container.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/EditContainer.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/EditContainer.tsx index 72ab1170946..9af697c1542 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/EditContainer.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/EditContainer.tsx @@ -31,10 +31,11 @@ export type Props = { * An alternative toolbar to be shown in the EditContainer. */ toolbar?: React.ReactNode + /** * The variant of the toolbar. */ - toolbarVariant?: 'minimumOneItem' + toolbarVariant?: ArrayItemAreaProps['toolbarVariant'] } export type AllProps = Props & FlexContainerProps & ArrayItemAreaProps @@ -59,13 +60,15 @@ export default function EditContainer(props: AllProps) { toolbar={ hasToolbar ? null - : toolbarElement ?? ( + : toolbarElement ?? + (toolbarVariant !== 'custom' && ( - ) + )) } + toolbarVariant={toolbarVariant} {...rest} > {children} @@ -85,6 +88,7 @@ export function EditContainerWithoutToolbar( title, titleWhenNew, toolbar, + toolbarVariant, ...restProps } = props || {} @@ -103,6 +107,7 @@ export function EditContainerWithoutToolbar( mode="edit" className={classnames('dnb-forms-section-edit-block', className)} ariaLabel={convertJsxToString(itemTitle)} + toolbarVariant={toolbarVariant} {...restProps} > {itemTitle && {itemTitle}} diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/EditContainerDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/EditContainerDocs.ts index 5e7981dc3f1..a2f05d5e84f 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/EditContainerDocs.ts +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/EditContainerDocs.ts @@ -12,7 +12,7 @@ export const EditContainerProperties: PropertiesTableProps = { status: 'optional', }, variant: { - doc: 'Defines the variant of the container. Can be `outline` or `basic`. Defaults to `outline`.', + doc: 'Defines the variant of the container. Can be `outline`, `filled` or `basic`. Defaults to `outline`.', type: 'string', status: 'optional', }, @@ -22,7 +22,7 @@ export const EditContainerProperties: PropertiesTableProps = { status: 'optional', }, toolbarVariant: { - doc: 'Use variants to render the toolbar differently. Currently there is only the `minimumOneItem` variant. See the info section for more info.', + doc: 'Use variants to render the toolbar differently. Currently there are the `minimumOneItem` and `custom` variants. See the info section for more info.', type: 'string', status: 'optional', }, diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/__tests__/EditAndViewContainer.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/__tests__/EditAndViewContainer.test.tsx index 78d1a364a09..a0b29c5d996 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/__tests__/EditAndViewContainer.test.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/__tests__/EditAndViewContainer.test.tsx @@ -1,8 +1,9 @@ import React from 'react' import { render, fireEvent, waitFor } from '@testing-library/react' +import userEvent from '@testing-library/user-event' +import { Flex } from '../../../../../components' import IterateItemContext from '../../IterateItemContext' import { Field, Form, Iterate, Value } from '../../..' -import userEvent from '@testing-library/user-event' import nbNO from '../../../constants/locales/nb-NO' const tr = { @@ -738,59 +739,211 @@ describe('EditContainer and ViewContainer', () => { } }) - it('should render toolbarVariant="minimumOneItem" with correct buttons', () => { - const { rerender } = render( - - - View Content - - - Edit Content - - - ) + describe('toolbarVariant', () => { + it('should render toolbarVariant="minimumOneItem" with correct buttons', () => { + const { rerender } = render( + + + View Content + + + Edit Content + + + ) - { - const elements = document.querySelectorAll( - '.dnb-forms-iterate__element' + { + const elements = document.querySelectorAll( + '.dnb-forms-iterate__element' + ) + expect(elements).toHaveLength(1) + + const [firstElement] = Array.from(elements) + const [viewBlock, editBlock] = Array.from( + firstElement.querySelectorAll('.dnb-forms-section-block') + ) + expect(editBlock.querySelectorAll('button')).toHaveLength(0) + expect(viewBlock.querySelectorAll('button')).toHaveLength(1) + expect(viewBlock.querySelectorAll('button')[0]).toHaveTextContent( + tr.viewContainer.editButton + ) + } + + rerender( + + + View Content + + + Edit Content + + + ) + + { + const elements = document.querySelectorAll( + '.dnb-forms-iterate__element' + ) + expect(elements).toHaveLength(2) + + const [firstElement] = Array.from(elements) + const [viewBlock, editBlock] = Array.from( + firstElement.querySelectorAll('.dnb-forms-section-block') + ) + expect(editBlock.querySelectorAll('button')).toHaveLength(2) + expect(viewBlock.querySelectorAll('button')).toHaveLength(2) + } + }) + + it('should render toolbarVariant="custom" without a toolbar', () => { + render( + + + View Content + + + Edit Content + + ) - expect(elements).toHaveLength(1) - const [firstElement] = Array.from(elements) const [viewBlock, editBlock] = Array.from( - firstElement.querySelectorAll('.dnb-forms-section-block') + document + .querySelector('.dnb-forms-iterate__element') + .querySelectorAll('.dnb-forms-section-block') ) expect(editBlock.querySelectorAll('button')).toHaveLength(0) + expect(viewBlock.querySelectorAll('button')).toHaveLength(0) + }) + + it('should render toolbarVariant="custom" should default toolbar', () => { + render( + + + View Content + + + Edit Content + + + ) + + const [viewBlock, editBlock] = Array.from( + document + .querySelector('.dnb-forms-iterate__element') + .querySelectorAll('.dnb-forms-section-block') + ) + expect(editBlock.querySelectorAll('button')).toHaveLength(0) + expect(viewBlock.querySelectorAll('button')).toHaveLength(0) + }) + + it('should render toolbarVariant="custom" with correct spacing', () => { + render( + + + View Content + + + + + + + + Edit Content + + + + + + + + ) + + const [viewBlock, editBlock] = Array.from( + document + .querySelector('.dnb-forms-iterate__element') + .querySelectorAll('.dnb-forms-section-block') + ) + + expect(editBlock.querySelectorAll('button')).toHaveLength(1) expect(viewBlock.querySelectorAll('button')).toHaveLength(1) - expect(viewBlock.querySelectorAll('button')[0]).toHaveTextContent( - tr.viewContainer.editButton + + const viewToolbars = viewBlock.querySelectorAll( + '.dnb-forms-iterate-toolbar' + ) + const editToolbars = editBlock.querySelectorAll( + '.dnb-forms-iterate-toolbar' ) - } - rerender( - - - View Content - - - Edit Content - - - ) + expect(viewToolbars).toHaveLength(1) + expect(editToolbars).toHaveLength(1) - { - const elements = document.querySelectorAll( - '.dnb-forms-iterate__element' + const viewToolbar = viewToolbars[0] + expect(viewToolbar).toHaveClass('dnb-space__top--zero') + expect(viewToolbar).toHaveClass('dnb-space__right--small') + expect(viewToolbar).toHaveClass('dnb-space__left--zero') + + const editToolbar = editToolbars[0] + expect(editToolbar).toHaveClass('dnb-space__top--zero') + expect(editToolbar).toHaveClass('dnb-space__right--small') + expect(editToolbar).toHaveClass('dnb-space__left--zero') + + const viewSpace = viewToolbars[0].querySelector('.dnb-space') + expect(viewSpace).toHaveClass('dnb-space__top--zero') + expect(viewSpace).toHaveClass('dnb-flex-container--row-gap-small') + + const editSpace = editToolbars[0].querySelector('.dnb-space') + expect(editSpace).toHaveClass('dnb-space__top--zero') + expect(editSpace).toHaveClass('dnb-flex-container--row-gap-small') + }) + + it('should render toolbarVariant="custom" without a hr', () => { + render( + + + View Content + + + + + + + + Edit Content + + + + + + + ) - expect(elements).toHaveLength(2) - const [firstElement] = Array.from(elements) const [viewBlock, editBlock] = Array.from( - firstElement.querySelectorAll('.dnb-forms-section-block') + document + .querySelector('.dnb-forms-iterate__element') + .querySelectorAll('.dnb-forms-section-block') ) - expect(editBlock.querySelectorAll('button')).toHaveLength(2) - expect(viewBlock.querySelectorAll('button')).toHaveLength(2) - } + + expect(editBlock.querySelectorAll('button')).toHaveLength(1) + expect(viewBlock.querySelectorAll('button')).toHaveLength(1) + + const viewToolbars = viewBlock.querySelectorAll( + '.dnb-forms-iterate-toolbar' + ) + const editToolbars = editBlock.querySelectorAll( + '.dnb-forms-iterate-toolbar' + ) + + expect(viewToolbars).toHaveLength(1) + expect(editToolbars).toHaveLength(1) + + const viewToolbar = viewToolbars[0] + const editToolbar = editToolbars[0] + + expect(viewToolbar.querySelectorAll('hr')).toHaveLength(0) + expect(editToolbar.querySelectorAll('hr')).toHaveLength(0) + }) }) it('should validate on submit', () => { @@ -989,4 +1142,46 @@ describe('EditContainer and ViewContainer', () => { expect(containerMode[0]).toBe('edit') expect(containerMode[1]).toBe('edit') }) + + it('should set correct class for variant "basic"', () => { + render( + + + View Content + + + + + + ) + + const [viewBlock, editBlock] = Array.from( + document.querySelectorAll('.dnb-forms-section-block') + ) + expect(viewBlock).toHaveClass('dnb-forms-section-block--variant-basic') + expect(editBlock).toHaveClass('dnb-forms-section-block--variant-basic') + }) + + it('should set correct class for variant "filled"', () => { + render( + + + View Content + + + + + + ) + + const [viewBlock, editBlock] = Array.from( + document.querySelectorAll('.dnb-forms-section-block') + ) + expect(viewBlock).toHaveClass( + 'dnb-forms-section-block--variant-filled' + ) + expect(editBlock).toHaveClass( + 'dnb-forms-section-block--variant-filled' + ) + }) }) diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/PushContainer/PushContainerDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Iterate/PushContainer/PushContainerDocs.ts index fbdffe54f74..25b51bd566d 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/PushContainer/PushContainerDocs.ts +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/PushContainer/PushContainerDocs.ts @@ -43,7 +43,7 @@ export const PushContainerProperties: PropertiesTableProps = { status: 'optional', }, variant: { - doc: 'Defines the variant of the container. Can be `outline` or `basic`. Defaults to `outline`.', + doc: 'Defines the variant of the container. Can be `outline`, `filled` or `basic`. Defaults to `outline`.', type: 'string', status: 'optional', }, diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Toolbar/Toolbar.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/Toolbar/Toolbar.tsx index c41ab227535..8beb409f98f 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/Toolbar/Toolbar.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/Toolbar/Toolbar.tsx @@ -6,6 +6,7 @@ import { SpaceAllProps } from '../../../../components/Space' import IterateItemContext from '../IterateItemContext' import ToolbarContext from './ToolbarContext' import FieldBoundaryContext from '../../DataContext/FieldBoundary/FieldBoundaryContext' +import ArrayItemAreaContext from '../Array/ArrayItemAreaContext' import { useTranslation } from '../../hooks' export type ToolbarParams = { @@ -27,6 +28,7 @@ export default function Toolbar({ value, arrayValue: items, } = useContext(IterateItemContext) || {} + const { toolbarVariant } = useContext(ArrayItemAreaContext) || {} const { errorInContainer } = useTranslation().IterateEditContainer const { hasError, hasVisibleError } = useContext(FieldBoundaryContext) || {} @@ -48,14 +50,17 @@ export default function Toolbar({ return ( -
+ {toolbarVariant !== 'custom' &&
} - + {children} diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/RemoveButton.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/RemoveButton.tsx index 1f26e3467f2..6dfc5a0fad4 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/RemoveButton.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/RemoveButton.tsx @@ -1,9 +1,11 @@ import React from 'react' -import RemoveButton from '../RemoveButton' +import RemoveButton, { Props as RemoveButtonProps } from '../RemoveButton' import useTranslation from '../../hooks/useTranslation' -export default function ViewContainerRemoveButton() { +export default function ViewContainerRemoveButton( + props: RemoveButtonProps +) { const { removeButton } = useTranslation().IterateViewContainer - return + return } diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/ViewContainer.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/ViewContainer.tsx index cc49e27fa4c..92fdba61dc3 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/ViewContainer.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/ViewContainer.tsx @@ -16,14 +16,16 @@ export type Props = { * The title of the ViewContainer. */ title?: React.ReactNode + /** * An alternative toolbar to be shown in the ViewContainer. */ toolbar?: React.ReactNode + /** * The variant of the toolbar. */ - toolbarVariant?: 'minimumOneItem' + toolbarVariant?: ArrayItemAreaProps['toolbarVariant'] } export type AllProps = Props & FlexContainerProps & ArrayItemAreaProps @@ -62,6 +64,7 @@ function ViewContainer(props: AllProps) { mode="view" ariaLabel={convertJsxToString(itemTitle)} className={classnames('dnb-forms-section-view-block', className)} + toolbarVariant={toolbarVariant} {...restProps} > @@ -69,12 +72,13 @@ function ViewContainer(props: AllProps) { {children} {hasToolbar ? null - : toolbarElement ?? ( + : toolbarElement ?? + (toolbarVariant !== 'custom' && ( - )} + ))} ) diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/ViewContainerDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/ViewContainerDocs.ts index dc92473f35b..b776d570a0d 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/ViewContainerDocs.ts +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/ViewContainerDocs.ts @@ -7,7 +7,7 @@ export const ViewContainerProperties: PropertiesTableProps = { status: 'optional', }, variant: { - doc: 'Defines the variant of the container. Can be `outline` or `basic`. Defaults to `outline`.', + doc: 'Defines the variant of the container. Can be `outline`, `filled` or `basic`. Defaults to `outline`.', type: 'string', status: 'optional', }, @@ -17,7 +17,7 @@ export const ViewContainerProperties: PropertiesTableProps = { status: 'optional', }, toolbarVariant: { - doc: 'Use variants to render the toolbar differently. Currently there is only the `minimumOneItem` variant. See the info section for more info.', + doc: 'Use variants to render the toolbar differently. Currently there are the `minimumOneItem` and `custom` variants. See the info section for more info.', type: 'string', status: 'optional', }, diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/hooks/useItem.ts b/packages/dnb-eufemia/src/extensions/forms/Iterate/hooks/useItem.ts index a202eac933d..befdceea108 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/hooks/useItem.ts +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/hooks/useItem.ts @@ -1,7 +1,16 @@ import { useContext } from 'react' -import IterateItemContext from '../IterateItemContext' +import IterateItemContext, { + IterateItemContextState, +} from '../IterateItemContext' -export default function useItem() { +export type UseItemReturn = Omit< + IterateItemContextState, + 'value' +> & { + value: Value +} + +export default function useItem() { const item = useContext(IterateItemContext) - return item + return item as UseItemReturn } diff --git a/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-forms.scss b/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-forms.scss index e41a420d08e..326e15d8a38 100644 --- a/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-forms.scss +++ b/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-forms.scss @@ -17,3 +17,4 @@ $THEME_FALLBACK: 'ui'; @import '../../../extensions/forms/Field/Number/style/themes/dnb-number-theme-sbanken.scss'; @import '../../../extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-sbanken.scss'; @import '../../../extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-sbanken.scss'; +@import '../../../extensions/forms/Form/Section/style/themes/dnb-section-theme-sbanken.scss'; diff --git a/packages/dnb-eufemia/src/style/themes/theme-ui/ui-theme-forms.scss b/packages/dnb-eufemia/src/style/themes/theme-ui/ui-theme-forms.scss index f88b254164d..7215604584f 100644 --- a/packages/dnb-eufemia/src/style/themes/theme-ui/ui-theme-forms.scss +++ b/packages/dnb-eufemia/src/style/themes/theme-ui/ui-theme-forms.scss @@ -17,3 +17,4 @@ $THEME_FALLBACK: 'ui'; @import '../../../extensions/forms/Field/Number/style/themes/dnb-number-theme-ui.scss'; @import '../../../extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-ui.scss'; @import '../../../extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-ui.scss'; +@import '../../../extensions/forms/Form/Section/style/themes/dnb-section-theme-ui.scss';