docs(Space): refactor jsx examples to tsx (#2199)

dnbexperience · May 31, 2023 · de7645c · de7645c
1 parent 6775dfb
commit de7645c
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 29 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
@@ -440,3 +440,46 @@ VisualSpace.defaultProps = {
 }
 
 export { MagicBox, VisualSpace }
+
+export const SpaceExamplesSameResult1 = () => (
+  <ComponentBox hidePreview hideToolbar>
+    {/* All of these methods will result in the same spacing */}
+    <Space top="large x-small" right="2.5" bottom="2.5rem" left="40px" />
+  </ComponentBox>
+)
+
+export const SpaceExamplesSameResult2 = () => (
+  <ComponentBox hidePreview hideToolbar>
+    {/* All of these methods will result in the same spacing */}
+    <Space
+      space={{
+        top: 'large x-small',
+        right: '2.5',
+        bottom: '2.5rem',
+        left: '40px',
+      }}
+    />
+  </ComponentBox>
+)
+
+export const SpaceExamplesComponents = () => (
+  <ComponentBox hidePreview hideToolbar>
+    <Button top="large x-small medium" />
+    <Button space={{ top: 'large x-small medium' }} />
+  </ComponentBox>
+)
+
+export const SpaceExamplesShorthand = () => (
+  <ComponentBox hidePreview hideToolbar>
+    {/* Equivalent to top="small" */}
+    <Button top />
+    {/* Equivalent to top="small" right="small" bottom="small" left="small" */}
+    <Button space />
+  </ComponentBox>
+)
+
+export const SpaceExamplesFourDirections = () => (
+  <ComponentBox hidePreview hideToolbar>
+    <Button space="large x-small medium" />
+  </ComponentBox>
+)
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/space/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/space/info.mdx
@@ -3,6 +3,13 @@ showTabs: true
 ---
 
 import SpacingTable from 'Docs/uilib/usage/layout/spacing-table.mdx'
+import {
+  SpaceExamplesSameResult1,
+  SpaceExamplesSameResult2,
+  SpaceExamplesComponents,
+  SpaceExamplesShorthand,
+  SpaceExamplesFourDirections,
+} from 'Docs/uilib/components/space/Examples'
 
 ## Description
 
@@ -27,51 +34,27 @@ There are a couple of different ways you can define the spacing types and values
 
 To get a spacing of e.g. **2.5rem** (40px)- you may combine types `large` and `x-small`.
 
-```jsx
-/** All of these methods will result in the same spacing */
-<Space top="large x-small" right="2.5" bottom="2.5rem" left="40px" />
-```
+<SpaceExamplesSameResult1 />
 
 With React, you can also use an object with the different directions:
 
-```jsx
-/** All of these methods will result in the same spacing */
-<Space
-  space={{
-    top: 'large x-small',
-    right: '2.5',
-    bottom: '2.5rem',
-    left: '40px',
-  }}
-/>
-```
+<SpaceExamplesSameResult2 />
 
 ### Components and Spacing
 
 Every component supports the spacing patterns, so it's possible to send in the `top`, `right`, `bottom`, `left` and `space` properties directly, like:
 
-```jsx
-<Button top="large x-small medium" />
-<Button space={{ top: "large x-small medium" }} />
-```
+<SpaceExamplesComponents />
 
 ### Spacing shorthands
 
 A shorthand for getting 1rem (most used) is to simply send in a boolean, set as true. No given value in JSX means true, so you only need the property key:
 
-```jsx
-/** Equivalent to top="small" */
-<Button top />
-
-/** Equivalent to top="small" right="small" bottom="small" left="small" */
-<Button space />
-```
+<SpaceExamplesShorthand />
 
 In order to set all four directions at once, you can provide a string as the `space` value:
 
-```jsx
-<Button space="large x-small medium" />
-```
+<SpaceExamplesFourDirections />
 
 ### Does it not work as expected?