From ecb941e3dcc809947c6912f1eabc477c956e348e Mon Sep 17 00:00:00 2001
From: Anders <anderslangseth@gmail.com>
Date: Thu, 13 Apr 2023 16:30:25 +0200
Subject: [PATCH] docs(Space): refactor jsx properties to tsx (#2216)

---
 .../src/docs/uilib/components/space/Examples.tsx    | 10 ++++++++++
 .../src/docs/uilib/components/space/properties.mdx  | 13 +++----------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/space/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/space/Examples.tsx
index 1ecafbc5869..f8b8f5fb5d8 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/space/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/space/Examples.tsx
@@ -8,6 +8,7 @@ import PropTypes from 'prop-types'
 import ComponentBox from '../../../../shared/tags/ComponentBox'
 import styled from '@emotion/styled'
 import { Space, Input, FormRow, Button, P, Code } from '@dnb/eufemia/src'
+import { Provider } from '@dnb/eufemia/src/shared'
 
 export const SpaceExamplesMethod1 = () => (
   <TestStyles>
@@ -483,3 +484,12 @@ export const SpaceExamplesFourDirections = () => (
     <Button space="large x-small medium" />
   </ComponentBox>
 )
+
+export const SpaceExampleProvider = () => (
+  <ComponentBox scope={{ Provider }} hidePreview>
+    <Provider space={{ no_collapse: true }}>
+      <Space>I do not collapse</Space>
+      <Space>I do not collapse</Space>
+    </Provider>
+  </ComponentBox>
+)
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/space/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/space/properties.mdx
index ba1db48e6eb..fb550de241a 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/space/properties.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/space/properties.mdx
@@ -2,6 +2,8 @@
 showTabs: true
 ---
 
+import { SpaceExampleProvider } from 'Docs/uilib/components/space/Examples'
+
 ## Global Properties
 
 These properties are available in many other components and elements.
@@ -31,13 +33,4 @@ Use either `0` or `false` (as a number/boolean os string) to set a `margin` of 0
 
 Also, Provider is supporting the `collapse` property.
 
-```jsx
-import Provider from '@dnb/eufemia/shared/Provider'
-
-render(
-  <Provider space={{ no_collapse: true }}>
-    <Space>I do not collapse</Space>
-    <Space>I do not collapse</Space>
-  </Provider>
-)
-```
+<SpaceExampleProvider />