From 1f9e2f4365a8dec3db1ecf1b18a4d6bb06804954 Mon Sep 17 00:00:00 2001
From: Anders <anderslangseth@gmail.com>
Date: Thu, 13 Apr 2023 09:23:42 +0200
Subject: [PATCH] docs(SkipContent): refactor jsx examples to tsx (#2211)

---
 .../components/skip-content/Examples.tsx      | 38 ++++++++++++++++
 .../uilib/components/skip-content/info.mdx    | 45 ++++---------------
 2 files changed, 46 insertions(+), 37 deletions(-)

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/skip-content/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/skip-content/Examples.tsx
index 391bacfd555..c51f65649be 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/skip-content/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/skip-content/Examples.tsx
@@ -18,6 +18,7 @@ import {
   Dl,
   Dd,
   Dt,
+  H2,
 } from '@dnb/eufemia/src'
 
 export const SkipContentTable = () => (
@@ -100,3 +101,40 @@ const LargeTableWithInteractiveElements = (props) => {
     </Table.ScrollView>
   )
 }
+
+export const SkipContentInfo1 = () => (
+  <ComponentBox hidePreview hideToolbar>
+    <section aria-labelledby="heading-id">
+      <H2 id="heading-id">Description of table</H2>
+
+      <SkipContent selector="#my-selector" text="Skip table content" />
+
+      <Table aria-labelledby="heading-id">table content</Table>
+    </section>
+
+    <section id="my-selector" aria-label="Submit">
+      <div id="submit-form" />
+    </section>
+  </ComponentBox>
+)
+
+export const SkipContentInfo2 = () => (
+  <ComponentBox hidePreview hideToolbar>
+    <section aria-labelledby="table-id">
+      <SkipContent selector=".my-selector">Skip table content</SkipContent>
+
+      <Table id="table-id">
+        <caption>Description of table</caption>
+      </Table>
+
+      <div className="my-selector">
+        <SkipContent.Return
+          selector=".my-selector" // same as SkipContent
+          text="Back to beginning of table"
+        />
+
+        <div id="submit-form" />
+      </div>
+    </section>
+  </ComponentBox>
+)
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/skip-content/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/skip-content/info.mdx
index a6302d32aca..39ea1f2bfc0 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/skip-content/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/skip-content/info.mdx
@@ -3,6 +3,10 @@ showTabs: true
 ---
 
 import { Button } from '@dnb/eufemia/src'
+import {
+  SkipContentInfo1,
+  SkipContentInfo2,
+} from 'Docs/uilib/components/skip-content/Examples'
 
 ## Description
 
@@ -41,46 +45,13 @@ The revealing button needs a clear message to let the user easily understand the
 
 Ensure you put a header or a section before the `SkipContent` component. It should describe the content, so the user understands the context.
 
-- Example with a section landmark (section) and header + `SkipContent.Return`:
+#### Example with a section landmark (section) and header + `SkipContent.Return`:
 
-  ```jsx
-  <section aria-labelledby="heading-id">
-    <H2 id="heading-id">Description of table</H2>
+<SkipContentInfo1 />
 
-    <SkipContent
-      selector="#my-selector"
-      text="Skip table content"
-    />
+#### Example using a section landmark (section) and table caption:
 
-    <Table aria-labelledby="heading-id" />
-
-  </section>
-
-  <section id="my-selector" aria-label="Submit">
-  	<SubmitForm />
-  </section>
-  ```
-
-- Example using a section landmark (section) and table caption:
-
-  ```jsx
-  <section aria-labelledby="table-id">
-    <SkipContent selector=".my-selector">Skip table content</SkipContent>
-
-    <Table id="table-id">
-      <caption>Description of table</caption>
-    </Table>
-
-    <div className="my-selector">
-      <SkipContent.Return
-        selector=".my-selector" // same as SkipContent
-        text="Back to beginning of table"
-      />
-
-      <SubmitForm />
-    </div>
-  </section>
-  ```
+<SkipContentInfo2 />
 
 ### Return button