docs(SkipContent): refactor jsx examples to tsx (#2211)

dnbexperience · May 31, 2023 · f95d453 · f95d453
1 parent 7778679
commit f95d453
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 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
@@ -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
@@ -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