feat(Forms): add inheritLabel to Value.SummaryList

dnbexperience · Sep 26, 2024 · 606d3d1 · 606d3d1
1 parent d1b31d8
commit 606d3d1
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 5 deletions.
diff --git a/...s/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/SummaryList/Examples.tsx b/...s/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/SummaryList/Examples.tsx
@@ -129,3 +129,21 @@ export function InheritVisibility() {
     </ComponentBox>
   )
 }
+
+export function InheritLabel() {
+  return (
+    <ComponentBox>
+      <Form.Handler>
+        <Card stack>
+          <Field.String path="/foo" defaultValue="foo" label="foo label" />
+          <Field.String path="/bar" defaultValue="bar" label="bar label" />
+
+          <Value.SummaryList inheritLabel>
+            <Value.String path="/foo" />
+            <Value.String path="/bar" />
+          </Value.SummaryList>
+        </Card>
+      </Form.Handler>
+    </ComponentBox>
+  )
+}
diff --git a/...esign-system-portal/src/docs/uilib/extensions/forms/Value/SummaryList/demos.mdx b/...esign-system-portal/src/docs/uilib/extensions/forms/Value/SummaryList/demos.mdx
@@ -27,3 +27,7 @@ Using [Value.Composition](/uilib/extensions/forms/Value/Composition/) to combine
 ### Inherit visibility
 
 <Examples.InheritVisibility />
+
+### Inherit label
+
+<Examples.InheritLabel />
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/SummaryList.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/SummaryList.tsx
@@ -5,12 +5,22 @@ import Dl, { DlAllProps } from '../../../../elements/Dl'
 
 export type Props = Omit<DlAllProps, 'label'> & {
   inheritVisibility?: boolean
+  inheritLabel?: boolean
 }
 
 function SummaryList(props: Props) {
-  const { className, children, layout, inheritVisibility, ...rest } = props
+  const {
+    className,
+    children,
+    layout,
+    inheritVisibility,
+    inheritLabel,
+    ...rest
+  } = props
   return (
-    <SummaryListContext.Provider value={{ layout, inheritVisibility }}>
+    <SummaryListContext.Provider
+      value={{ layout, inheritVisibility, inheritLabel }}
+    >
       <Dl
         className={classnames('dnb-forms-summary-list', className)}
         layout={layout}

diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/SummaryListContext.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/SummaryListContext.tsx
@@ -5,6 +5,7 @@ export type SummaryListContextProps = {
   layout?: DlProps['layout']
   isNested?: boolean
   inheritVisibility?: boolean
+  inheritLabel?: boolean
 }
 
 const SummaryListContext = React.createContext<

diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/SummaryListDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/SummaryListDocs.ts
@@ -11,6 +11,11 @@ export const SummaryListProperties: PropertiesTableProps = {
     type: 'boolean',
     status: 'optional',
   },
+  inheritLabel: {
+    doc: 'Use this property to propagate the `inheritLabel` property to all nested values.',
+    type: 'boolean',
+    status: 'optional',
+  },
   children: {
     doc: 'Contents.',
     type: 'React.Node',

diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/__tests__/SummaryList.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/__tests__/SummaryList.test.tsx
@@ -144,4 +144,27 @@ describe('Field.SummaryList', () => {
       })
     })
   })
+
+  describe('inheritLabel', () => {
+    it('renders labels', async () => {
+      render(
+        <Form.Handler>
+          <Field.String path="/foo" defaultValue="foo" label="foo label" />
+          <Field.String path="/bar" defaultValue="bar" label="bar label" />
+
+          <Value.SummaryList inheritLabel>
+            <Value.String path="/foo" />
+            <Value.String path="/bar" />
+          </Value.SummaryList>
+        </Form.Handler>
+      )
+
+      const [labelFoo, labelBar] = Array.from(
+        document.querySelectorAll('dt')
+      )
+
+      expect(labelFoo).toHaveTextContent('foo label')
+      expect(labelBar).toHaveTextContent('bar label')
+    })
+  })
 })
diff --git a/packages/dnb-eufemia/src/extensions/forms/hooks/useValueProps.ts b/packages/dnb-eufemia/src/extensions/forms/hooks/useValueProps.ts
@@ -24,8 +24,8 @@ export default function useValueProps<
     value: valueProp,
     itemPath,
     defaultValue,
-    inheritLabel,
     inheritVisibility: inheritVisibilityProp,
+    inheritLabel: inheritLabelProp,
     transformIn = (value: Value) => value,
     toInput = (value: Value) => value,
     fromExternal = (value: Value) => value,
@@ -47,11 +47,15 @@ export default function useValueProps<
       transformers,
     }) ?? defaultValue
 
-  const { inheritVisibility: inheritVisibilitySummaryList } =
-    useContext(SummaryListContext) || {}
+  const {
+    inheritVisibility: inheritVisibilitySummaryList,
+    inheritLabel: inheritLabelSummaryList,
+  } = useContext(SummaryListContext) || {}
   const inheritVisibility =
     inheritVisibilityProp ?? inheritVisibilitySummaryList
 
+  const inheritLabel = inheritLabelProp ?? inheritLabelSummaryList
+
   const {
     fieldPropsRef,
     mountedFieldsRef,