[react] feat: Added docs for components/Popout

sites/dev/docs/reference/packages/react/components/popout/_examples.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Popout } from '@freesewing/react/components/Popout'
+
+const types = [ 'comment', 'error', 'fixme', 'link', 'note', 'related', 'tip', 'warning' ]
+
+export const PopoutExample = () => (
+  <>
+    {types.map(type => <Popout key={type} type={type}>This is a {type}</Popout>)}
+    {types.map(type => <Popout key={type} type={type} title="Custom title here">This is a {type} with a custom title</Popout>)}
+    {types.map(type => <Popout key={type} type={type} compact>This is a compact {type}</Popout>)}
+    {types.map(type => <Popout key={type} type={type} title="Custom title here" compact>This is a compact {type} with a custom title</Popout>)}
+    {types.map(type => <Popout key={type} type={type} compact dense>This is a compact & dense {type}</Popout>)}
+    <Popout type="comment" by="Joost">This is a comment with a <code>by</code> prop to indicate the author</Popout>
+    <Popout type="comment" by="Joost" compact>This is a compact comment with a <code>by</code> prop to indicate the author</Popout>
+    <Popout type="comment" by="Joost" compact dense>This is a compact & dense comment with a <code>by</code> prop to indicate the author</Popout>
+    <Popout type="tip" hideable>This is a <code>hideable</code> tip</Popout>
+  </>
+)

sites/dev/docs/reference/packages/react/components/popout/readme.mdx

@@ -2,6 +2,23 @@
 title: Popout
 ---
 
-:::note
-This page is yet to be created
-:::
+import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
+import { ComponentDocs } from '@site/src/components/component-docs.js'
+import * as jsdoc from '@site/prebuild/jsdoc/components.popout.mjs'
+import { PopoutExample } from './_examples.js'
+
+<DocusaurusDoc>
+
+- [Components](#components)
+
+## Components
+
+The **Popout** component family provides the following components:
+
+- [Popout](#popout)
+
+### Popout
+
+<ComponentDocs docs={jsdoc.jsdocPopout} example={PopoutExample} />
+
+</DocusaurusDoc>