From 3f328568834bd16c0961fad7c16d9db42ff519ce Mon Sep 17 00:00:00 2001
From: Anders <anderslangseth@gmail.com>
Date: Thu, 13 Apr 2023 09:25:24 +0200
Subject: [PATCH] docs(DrawerList): refactor jsx examples to tsx (#2209)

---
 .../fragments/drawer-list/Examples.tsx           | 16 ++++++++++++++++
 .../components/fragments/drawer-list/info.mdx    | 16 +++-------------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/Examples.tsx
index 8f801c96d9c..5f03e631126 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/Examples.tsx
@@ -247,3 +247,19 @@ const data = [
     content: ['Item 4 Content A', <>Custom Component</>],
   },
 ]
+
+export const DrawerListExampleOptionsRender = () => (
+  <Wrapper>
+    <ComponentBox scope={{ data }} hidePreview hideToolbar>
+      <DrawerList
+        options_render={({ Items, Item, data }) => (
+          <>
+            <Items />
+            <Item>Addition</Item>
+            {data.length > 1 && <li>Addition</li>}
+          </>
+        )}
+      />
+    </ComponentBox>
+  </Wrapper>
+)
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/info.mdx
index 8736907e31e..08346ea7c25 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/info.mdx
@@ -2,6 +2,8 @@
 showTabs: true
 ---
 
+import { DrawerListExampleOptionsRender } from 'Docs/uilib/components/fragments/drawer-list/Examples'
+
 ## Description
 
 The DrawerList component is a fragment inside other components.
@@ -46,19 +48,7 @@ const data = {
 
 ### Example usage of `options_render`
 
-```jsx
-render(
-  <DrawerList
-    options_render={({ Items, Item, data }) => (
-      <>
-        <Items />
-        <Item>Addition</Item>
-        {data.length > 1 && <li>Addition</li>}
-      </>
-    )}
-  />
-)
-```
+<DrawerListExampleOptionsRender />
 
 ### data-dnb-drawer-list-active