Add InitiallyOpen example

dnbexperience · Oct 9, 2024 · cf279d4 · cf279d4
1 parent 1150037
commit cf279d4
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 39 deletions.
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
@@ -6,6 +6,7 @@ import {
   Value,
   Form,
   Tools,
+  Wizard,
 } from '@dnb/eufemia/src/extensions/forms'
 export { Default as AnimatedContainer } from '../AnimatedContainer/Examples'
 
@@ -368,7 +369,62 @@ export const WithVisibility = () => {
   )
 }
 
-export const InitialOpen = () => {
+export const InitiallyOpen = () => {
+  return (
+    <ComponentBox scope={{ Iterate, Tools }}>
+      <Form.Handler>
+        <Wizard.Container>
+          <Wizard.Step>
+            <Card stack>
+              <Iterate.Array path="/myList" defaultValue={[{}]}>
+                <Iterate.ViewContainer>
+                  <Value.String label="Item {itemNo}" itemPath="/foo" />
+                </Iterate.ViewContainer>
+                <Iterate.EditContainer>
+                  <Field.String
+                    label="Item {itemNo}"
+                    itemPath="/foo"
+                    defaultValue="foo"
+                  />
+                </Iterate.EditContainer>
+              </Iterate.Array>
+
+              <Iterate.PushButton
+                text="Add"
+                path="/myList"
+                variant="tertiary"
+                pushValue={{}}
+              />
+            </Card>
+
+            <Wizard.Buttons />
+          </Wizard.Step>
+
+          <Wizard.Step>
+            <Iterate.Array path="/myList" defaultValue={[{}]}>
+              <Iterate.EditContainer>
+                <Field.String
+                  label="Item {itemNo}"
+                  itemPath="/foo"
+                  defaultValue="foo"
+                />
+              </Iterate.EditContainer>
+              <Iterate.ViewContainer>
+                <Value.String label="Item {itemNo}" itemPath="/foo" />
+              </Iterate.ViewContainer>
+            </Iterate.Array>
+
+            <Wizard.Buttons />
+          </Wizard.Step>
+        </Wizard.Container>
+
+        <Tools.Log top />
+      </Form.Handler>
+    </ComponentBox>
+  )
+}
+
+export const InitialOpenWithToolbarVariant = () => {
   return (
     <ComponentBox scope={{ Iterate, Tools }}>
       {() => {

diff --git a/...nb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/demos.mdx b/...nb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/demos.mdx
@@ -51,11 +51,15 @@ With an optional `title` and [Iterate.Toolbar](/uilib/extensions/forms/Iterate/T
 
 ### Initially open
 
+<Examples.InitiallyOpen />
+
+### Minium one item
+
 This example uses the container's `toolbarVariant` property with the value `minimumOneItem`.
 
 It hides the toolbar in the `EditContainer` when there is only one item in the array. And it hides the remove button in the `ViewContainer` when there is only one item in the array.
 
-<Examples.InitialOpen />
+<Examples.InitialOpenWithToolbarVariant />
 
 ### With DataContext and add/remove buttons
 

diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/stories/Iterate.stories.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/stories/Iterate.stories.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react'
 import { Field, Form, Iterate, Tools, Value, Wizard } from '../..'
-import { Card, Flex, Section } from '../../../../components'
+import { Card, Flex } from '../../../../components'
 
 export default {
   title: 'Eufemia/Extensions/Forms/Iterate',
@@ -211,7 +211,7 @@ export const InitialOpen = () => {
 
           <Form.SubmitButton variant="send" />
 
-          <Output />
+          <Tools.Log />
 
           {count}
           <button type="button" onClick={() => setCount(count + 1)}>
@@ -223,21 +223,6 @@ export const InitialOpen = () => {
   )
 }
 
-const Output = () => {
-  const { data } = Form.useData()
-
-  return (
-    <Section
-      element="output"
-      backgroundColor="sand-yellow"
-      style={{ maxWidth: '80vw' }}
-      innerSpace
-    >
-      <pre>All data: {JSON.stringify(data)}</pre>
-    </Section>
-  )
-}
-
 export const WithArrayValidator = () => {
   return (
     <Form.Handler>
@@ -287,34 +272,50 @@ export function InWizard() {
       <Form.Handler>
         <Wizard.Container>
           <Wizard.Step>
-            <Field.String
-              label="Regular"
-              path="/regular"
-              defaultValue="123"
-            />
-            <Iterate.Array path="/items" defaultValue={[{}]}>
-              <Field.String
-                label="In Iterate"
-                itemPath="/x"
-                defaultValue="123"
+            <Card stack>
+              <Iterate.Array path="/myList" defaultValue={[{}]}>
+                <Iterate.ViewContainer>
+                  <Value.String label="Item {itemNo}" itemPath="/foo" />
+                </Iterate.ViewContainer>
+                <Iterate.EditContainer>
+                  <Field.String
+                    label="Item {itemNo}"
+                    itemPath="/foo"
+                    defaultValue="foo"
+                  />
+                </Iterate.EditContainer>
+              </Iterate.Array>
+
+              <Iterate.PushButton
+                text="Add"
+                path="/myList"
+                variant="tertiary"
+                pushValue={{}}
               />
-            </Iterate.Array>
+            </Card>
 
             <Wizard.Buttons />
           </Wizard.Step>
 
           <Wizard.Step>
+            <Iterate.Array path="/myList" defaultValue={[{}]}>
+              <Iterate.EditContainer>
+                <Field.String
+                  label="Item {itemNo}"
+                  itemPath="/foo"
+                  defaultValue="foo"
+                />
+              </Iterate.EditContainer>
+              <Iterate.ViewContainer>
+                <Value.String label="Item {itemNo}" itemPath="/foo" />
+              </Iterate.ViewContainer>
+            </Iterate.Array>
+
             <Wizard.Buttons />
           </Wizard.Step>
         </Wizard.Container>
 
-        <Tools.Log />
-      </Form.Handler>
-
-      <Form.Handler>
-        <Iterate.Array path="/myList" defaultValue={[null]}>
-          <Field.String itemPath="/" defaultValue="bar" />
-        </Iterate.Array>
+        <Tools.Log top />
       </Form.Handler>
     </React.StrictMode>
   )

diff --git a/packages/dnb-eufemia/src/extensions/forms/Tools/Log.tsx b/packages/dnb-eufemia/src/extensions/forms/Tools/Log.tsx
@@ -1,11 +1,11 @@
 import React, { useContext } from 'react'
 import DataContext from '../DataContext/Context'
-import Section, { SectionProps } from '../../../components/Section'
+import Section, { SectionAllProps } from '../../../components/Section'
 
 function Log({
   placeholder,
   ...props
-}: SectionProps & {
+}: SectionAllProps & {
   placeholder?: React.ReactNode
 }) {
   const { data } = useContext(DataContext)