add screenshot test

Author: langz

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/SummaryList/Examples.tsx

@@ -335,6 +335,36 @@ export const HorizontalLayoutWithoutLabel = () => (
   </ComponentBox>
 )
 
+export const WithHelpInInfoOverlay = () => (
+  <ComponentBox data-visual-test="forms-value-summary-with-help-in-info-overlay">
+    <Form.Handler
+      data={{
+        firstName: 'John',
+        lastName: 'Doe',
+      }}
+    >
+      <Form.InfoOverlay>
+        <Value.SummaryList>
+          <Value.Name.First
+            path="/firstName"
+            help={{
+              title: 'Help title',
+              content: 'Help content.',
+            }}
+          />
+          <Value.Name.Last
+            path="/lastName"
+            help={{
+              title: 'Help title',
+              content: 'Help content.',
+            }}
+          />
+        </Value.SummaryList>
+      </Form.InfoOverlay>
+    </Form.Handler>
+  </ComponentBox>
+)
+
 export function AnimatedVisibility() {
   return (
     <ComponentBox>

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/SummaryList/demos.mdx

@@ -45,4 +45,5 @@ To maintain the semantic structure of the `dl` element, the `Form.Visibility` co
   <Examples.DefaultLayoutWithHelp />
   <Examples.HorizontalLayoutWithHelp />
   <Examples.GridLayoutWithHelp />
+  <Examples.WithHelpInInfoOverlay />
 </VisibleWhenVisualTest>

packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/__tests__/SummaryList.screenshot.test.ts

@@ -44,6 +44,14 @@ describe('Value.SummaryList', () => {
     expect(screenshot).toMatchImageSnapshot()
   })
 
+  it('have to match with help wrapped in info overlay', async () => {
+    const screenshot = await makeScreenshot({
+      selector:
+        '[data-visual-test="forms-value-summary-with-help-in-info-overlay"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
   it('have to match default layout with help', async () => {
     const screenshot = await makeScreenshot({
       selector:

packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/__tests__/__image_snapshots__/valuesummarylist-have-to-match-with-help-wrapped-in-info-overlay.snap.png

@@ -49,6 +49,13 @@
     &__content:has(+ .dnb-help-button) {
       margin-right: 0.5rem;
     }
+    div {
+      // To support when wrapped in a Form.InfoOverlay
+      & > strong:has(+ .dnb-help-button),// To support dt > strong 
+    &__content:has(+ .dnb-help-button) {
+        margin-right: 0.5rem;
+      }
+    }
   }
 
   &__help {