feat(Forms): add EditButton, CancelButton and DoneButton to Form.Sect…

…ion containers

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Section/EditContainer/info.mdx

@@ -29,6 +29,24 @@ render(
 )
 ```
 
+## Customize the Toolbar
+
+```tsx
+import { Form, Field } from '@dnb/eufemia/extensions/forms'
+
+render(
+  <Form.Section>
+    <Form.Section.EditContainer>
+      <Field.Name.Last itemPath="/name" />
+      <Form.Section.Toolbar>
+        <Form.Section.EditContainer.DoneButton />
+        <Form.Section.EditContainer.CancelButton />
+      </Form.Section.Toolbar>
+    </Form.Section.EditContainer>
+  </Form.Section>,
+)
+```
+
 ## Accessibility
 
 The `EditContainer` component has an `aria-label` attribute, which is set to the `title` property value. It uses a section element to wrap the content, which helps users with screen readers to get the needed announcement.

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Section/Toolbar.mdx

@@ -0,0 +1,23 @@
+---
+title: 'Toolbar'
+description: '`Form.Section.Toolbar` is a helper component to be used within an `Form.Section.ViewContainer` and `Form.Section.EditContainer`.'
+showTabs: true
+tabs:
+  - title: Info
+    key: '/info'
+  - title: Demos
+    key: '/demos'
+breadcrumb:
+  - text: Forms
+    href: /uilib/extensions/forms/Form/
+  - text: Section
+    href: /uilib/extensions/forms/Form/Section/
+  - text: Toolbar
+    href: /uilib/extensions/forms/Form/Section/Toolbar/
+---
+
+import Info from 'Docs/uilib/extensions/forms/Form/Section/Toolbar/info'
+import Demos from 'Docs/uilib/extensions/forms/Form/Section/Toolbar/demos'
+
+<Info />
+<Demos />

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Section/Toolbar/Examples.tsx

@@ -0,0 +1,28 @@
+import ComponentBox from '../../../../../../../shared/tags/ComponentBox'
+import { Button } from '@dnb/eufemia/src'
+import { Form } from '@dnb/eufemia/src/extensions/forms'
+
+export const ViewAndEditContainer = () => {
+  return (
+    <ComponentBox>
+      <Form.Section>
+        <Form.Section.ViewContainer>
+          View content
+          <Form.Section.Toolbar>
+            <Button variant="tertiary">Your Tool</Button>
+            <Form.Section.ViewContainer.EditButton />
+          </Form.Section.Toolbar>
+        </Form.Section.ViewContainer>
+
+        <Form.Section.EditContainer>
+          Edit content
+          <Form.Section.Toolbar>
+            <Button variant="tertiary">Your Tool</Button>
+            <Form.Section.EditContainer.DoneButton />
+            <Form.Section.EditContainer.CancelButton />
+          </Form.Section.Toolbar>
+        </Form.Section.EditContainer>
+      </Form.Section>
+    </ComponentBox>
+  )
+}

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Section/Toolbar/demos.mdx

@@ -0,0 +1,12 @@
+---
+showTabs: true
+hideInMenu: true
+---
+
+import * as Examples from './Examples'
+
+## Demos
+
+### Using ViewContainer and EditContainer
+
+<Examples.ViewAndEditContainer />

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Section/Toolbar/info.mdx

@@ -0,0 +1,35 @@
+---
+showTabs: true
+hideInMenu: true
+---
+
+## Description
+
+`Form.Section.Toolbar` is a helper component to be used within the [Form.Section.ViewContainer](/uilib/extensions/forms/Form/Section/ViewContainer/) and the [Form.Section.EditContainer](/uilib/extensions/forms/Form/Section/EditContainer/).
+
+## Customize the Toolbar
+
+You can customize the toolbar by either passing a function as a child or as a JSX element:
+
+```tsx
+import { Form } from '@dnb/eufemia/extensions/forms'
+
+render(
+  <Form.Section>
+    <Form.Section.ViewContainer>
+      View content
+      <Form.Section.Toolbar>
+        <Form.Section.ViewContainer.EditButton />
+      </Form.Section.Toolbar>
+    </Form.Section.ViewContainer>
+
+    <Form.Section.EditContainer>
+      Edit content
+      <Form.Section.Toolbar>
+        <Form.Section.EditContainer.DoneButton />
+        <Form.Section.EditContainer.CancelButton />
+      </Form.Section.Toolbar>
+    </Form.Section.EditContainer>
+  </Form.Section>,
+)
+```

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Section/Toolbar/properties.mdx

@@ -0,0 +1,11 @@
+---
+showTabs: true
+hideInMenu: true
+---
+
+import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
+import { ToolbarProperties } from '@dnb/eufemia/src/extensions/forms/Form/Section/Toolbar/ToolbarDocs'
+
+## Properties
+
+<PropertiesTable props={ToolbarProperties} />

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Section/ViewContainer/info.mdx

@@ -25,6 +25,24 @@ render(
 )
 ```
 
+## Customize the Toolbar
+
+```tsx
+import { Form, Value } from '@dnb/eufemia/extensions/forms'
+
+render(
+  <Form.Section>
+    <Form.Section.ViewContainer>
+      <Value.Name.Last itemPath="/name" />
+
+      <Form.Section.Toolbar>
+        <Form.Section.ViewContainer.EditButton />
+      </Form.Section.Toolbar>
+    </Form.Section.ViewContainer>
+  </Form.Section>,
+)
+```
+
 ## Accessibility
 
 The `ViewContainer` component has an `aria-label` attribute, which is set to the `title` property value. It uses a section element to wrap the content, which helps users with screen readers to get the needed announcement.

packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/CancelButton.tsx

@@ -0,0 +1,59 @@
+import React, { useCallback, useContext } from 'react'
+import SectionContainerContext from '../containers/SectionContainerContext'
+import ToolbarContext from '../Toolbar/ToolbarContext'
+import { useTranslation } from '../../../hooks'
+import { Button } from '../../../../../components'
+import { close } from '../../../../../icons'
+import useContainerDataStore from './useContainerDataStore'
+import FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext'
+
+export default function CancelButton() {
+  const { onCancel, setShowError } = useContext(ToolbarContext) || {}
+  const { restoreOriginalData } = useContainerDataStore()
+  const { switchContainerMode, initialContainerMode } =
+    useContext(SectionContainerContext) || {}
+  const {
+    hasVisibleError,
+    hasSubmitError,
+    hasError,
+    setShowBoundaryErrors,
+  } = useContext(FieldBoundaryContext) || {}
+
+  const translation = useTranslation().SectionEditContainer
+
+  const cancelHandler = useCallback(() => {
+    if (hasSubmitError || (initialContainerMode === 'auto' && hasError)) {
+      setShowBoundaryErrors?.(Date.now())
+      if (hasVisibleError) {
+        setShowError(true)
+      }
+    } else {
+      setShowError(false)
+      setShowBoundaryErrors?.(false)
+      restoreOriginalData()
+      switchContainerMode?.('view')
+      onCancel?.()
+    }
+  }, [
+    hasError,
+    hasSubmitError,
+    hasVisibleError,
+    initialContainerMode,
+    onCancel,
+    restoreOriginalData,
+    setShowBoundaryErrors,
+    setShowError,
+    switchContainerMode,
+  ])
+
+  return (
+    <Button
+      variant="tertiary"
+      icon={close}
+      icon_position="left"
+      on_click={cancelHandler}
+    >
+      {translation.cancelButton}
+    </Button>
+  )
+}

packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/DoneButton.tsx

@@ -0,0 +1,49 @@
+import React, { useCallback, useContext } from 'react'
+import SectionContainerContext from '../containers/SectionContainerContext'
+import ToolbarContext from '../Toolbar/ToolbarContext'
+import { useTranslation } from '../../../hooks'
+import { Button } from '../../../../../components'
+import { check } from '../../../../../icons'
+import FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext'
+
+export default function DoneEditButton() {
+  const { onDone, setShowError } = useContext(ToolbarContext) || {}
+
+  const { switchContainerMode } = useContext(SectionContainerContext) || {}
+  const { hasError, hasVisibleError, setShowBoundaryErrors } =
+    useContext(FieldBoundaryContext) || {}
+
+  const translation = useTranslation().SectionEditContainer
+
+  const doneHandler = useCallback(() => {
+    if (hasError) {
+      setShowBoundaryErrors?.(Date.now())
+      if (hasVisibleError) {
+        setShowError(true)
+      }
+    } else {
+      setShowError(false)
+      setShowBoundaryErrors?.(false)
+      switchContainerMode?.('view')
+      onDone?.()
+    }
+  }, [
+    hasError,
+    hasVisibleError,
+    onDone,
+    setShowBoundaryErrors,
+    setShowError,
+    switchContainerMode,
+  ])
+
+  return (
+    <Button
+      variant="tertiary"
+      icon={check}
+      icon_position="left"
+      on_click={doneHandler}
+    >
+      {translation.doneButton}
+    </Button>
+  )
+}

packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/EditContainer.tsx

@@ -6,11 +6,12 @@ import { Props as FlexContainerProps } from '../../../../../components/flex/Cont
 import { Lead } from '../../../../../elements'
 import FieldBoundaryProvider from '../../../DataContext/FieldBoundary/FieldBoundaryProvider'
 import SectionContainerContext from '../containers/SectionContainerContext'
-import EditToolbarTools from './EditToolbarTools'
+import Toolbar from '../Toolbar/Toolbar'
+import DoneButton from './DoneButton'
+import CancelButton from './CancelButton'
 import SectionContainer, {
   SectionContainerProps,
 } from '../containers/SectionContainer'
-import Toolbar from '../containers/Toolbar'
 import { Path } from '../../../types'
 
 export type Props = {
@@ -47,6 +48,10 @@ function EditContainer(props: AllProps) {
     [containerMode, initialContainerMode, switchContainerMode]
   )
 
+  const hasToolbar = React.Children.toArray(children).some((child) => {
+    return child?.['type'] === Toolbar
+  })
+
   return (
     <FieldBoundaryProvider
       showErrors={validateInitially}
@@ -62,14 +67,19 @@ function EditContainer(props: AllProps) {
         <Flex.Stack>
           {title && <Lead size="basis">{title}</Lead>}
           {children}
-          <Toolbar>
-            <EditToolbarTools onDone={onDone} onCancel={onCancel} />
-          </Toolbar>
+          {hasToolbar ? null : (
+            <Toolbar onDone={onDone} onCancel={onCancel}>
+              <DoneButton />
+              <CancelButton />
+            </Toolbar>
+          )}
         </Flex.Stack>
       </SectionContainer>
     </FieldBoundaryProvider>
   )
 }
 
+EditContainer.DoneButton = DoneButton
+EditContainer.CancelButton = CancelButton
 EditContainer._supportsSpacingProps = true
 export default EditContainer