[react] feat: Added docs for components/Account

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

@@ -0,0 +1,39 @@
+import React from 'react'
+import { Highlight } from '@freesewing/react/components/Highlight'
+import { FingerprintIcon, WarningIcon } from '@freesewing/react/components/Icon'
+import { IconButton } from '@freesewing/react/components/Button'
+import { MiniNote } from '@freesewing/react/components/Mini'
+
+export const IconButtonExample = () => (
+  <>
+    <MiniNote>
+      Note that this component will take up the full width made available to it.
+    </MiniNote>
+    <Highlight language="js">
+      {[
+        `import { FingerprintIcon, WarningIcon } from '@freesewing/react/components/Icon'`,
+        `import { IconButton } from '@freesewing/react/components/Button'`,
+        ``,
+        `<IconButton>`,
+        `  <FingerprintIcon />`,
+        `  Primary (default)`,
+        `</IconButton>`,
+        `<br />`,
+        `<IconButton color="warning">`,
+        `  <WarningIcon />`,
+        `  Warning`,
+        `</IconButton>`,
+      ].join('\n')}
+    </Highlight>
+    <IconButton>
+      <FingerprintIcon />
+      Primary (default)
+    </IconButton>
+    <br />
+    <IconButton color="warning">
+      <WarningIcon />
+      Warning
+    </IconButton>
+  </>
+)
+

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

@@ -3,8 +3,9 @@ title: Button
 ---
 
 import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
-import { jsdocIconButton } from '@site/prebuild/jsdoc/components.button.mjs'
 import { ComponentDocs } from '@site/src/components/component-docs.js'
+import { jsdocIconButton } from '@site/prebuild/jsdoc/components.button.mjs'
+import { IconButtonExample } from './_examples.js'
 
 <DocusaurusDoc>
 
@@ -14,6 +15,6 @@ The **Button** component family provides the following components:
 
 ## IconButton
 
-<ComponentDocs docs={jsdocIconButton} />
+<ComponentDocs docs={jsdocIconButton} example={IconButtonExample} />
 
 </DocusaurusDoc>