docs(FormSet): refactor jsx examples to tsx (#2208)

dnbexperience · May 31, 2023 · 170702f · 170702f
1 parent 3f32856
commit 170702f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-set/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/form-set/Examples.tsx
@@ -72,3 +72,12 @@ export const FormSetSubmit = () => (
     </FormSet>
   </ComponentBox>
 )
+
+export const FormSetInfoVertical = () => (
+  <ComponentBox hidePreview hideToolbar>
+    <FormSet direction="vertical">
+      <FormRow>Components are now vertical aligned</FormRow>
+      <FormRow>Components are now vertical aligned</FormRow>
+    </FormSet>
+  </ComponentBox>
+)
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-set/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/form-set/info.mdx
@@ -2,13 +2,10 @@
 showTabs: true
 ---
 
+import { FormSetInfoVertical } from 'Docs/uilib/components/form-set/Examples'
+
 ## Description
 
 The FormSet component gives you both a HTML form element `<form>` by default and also a React provider for [FormRow](/uilib/components/form-row). This way you can define more globally e.g. if all the rows should be displayed **vertically**.
 
-```jsx
-<FormSet direction="vertical">
-  <FormRow>/** Components are now vertical aligned */</FormRow>
-  <FormRow>/** Components are now vertical aligned */</FormRow>
-</FormSet>
-```
+<FormSetInfoVertical />