docs(DrawerList): refactor jsx examples to tsx (#2209)

dnbexperience · May 31, 2023 · 3f32856 · 3f32856
1 parent 0e05d32
commit 3f32856
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 13 deletions.
diff --git a/...ges/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/Examples.tsx b/...ges/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/...b-design-system-portal/src/docs/uilib/components/fragments/drawer-list/info.mdx b/...b-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