[react] feat: Added docs for components/Tab

packages/react/components/Tab/index.mjs

@@ -4,12 +4,17 @@ import { ModalWrapper } from '@freesewing/react/components/Modal'
 import { KioskIcon } from '@freesewing/react/components/Icon'
 
 /**
- * FreeSewing Tabs component, typically used for dev examples
+ * A component to render Tabs, typically used for dev examples.
  *
- * @param {string} tabs - The list of tabs
- * @param {number} active - The nr of the active tab
- * @param {array} children - Content to render within the tabs
- * @param {bool} withModal - Set to true to load tab content in a modal window when kiosk icon is clicked
+ * Note that children MUST be at least two Tab components.
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.tabs - The list of tabs
+ * @param {number} [props.active = 0] - The index of the active tab
+ * @param {JSX.Element} props.children - The component children, will be rendered if props.js is not set
+ * @param {bool} [props.withModal = false] - Set to true to load tab content in a modal window when kiosk icon is clicked
+ * @returns {JSX.Element}
  */
 export const Tabs = ({ tabs = '', active = 0, children, withModal = false }) => {
   const { setModal } = useContext(ModalContext)
@@ -72,10 +77,16 @@ export const Tabs = ({ tabs = '', active = 0, children, withModal = false }) =>
 }
 
 /**
- * FreeSewing Tab component, use it together with Tabs
+ * A component to render an individual Tab inside Tabs.
  *
- * @param {number} tabId - The ID of this tab
- * @param {number} activeTab - The ID of the active tab
- * @param {array} children - Content to render within the tab
+ * You should not use this component directly, or pass any props to it apart from children.
+ * Instead, use them as direct children in the Tabs component.
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {number} props.activeTab - The id/index of the active tab (do not set this manually)
+ * @param {number} props.tabId - The id/index of this tab (do not set this manually)
+ * @param {JSX.Element} props.children - The component children, will be rendered if props.js is not set
+ * @returns {JSX.Element}
  */
 export const Tab = ({ children, tabId, activeTab }) => (activeTab === tabId ? children : null)

packages/react/mkdocs.sh

@@ -36,3 +36,4 @@ jsdoc -c jsdoc.json components/SignIn/* > ../../sites/dev/prebuild/jsdoc/react/c
 jsdoc -c jsdoc.json components/SignUp/* > ../../sites/dev/prebuild/jsdoc/react/components/signup.json
 jsdoc -c jsdoc.json components/Spinner/* > ../../sites/dev/prebuild/jsdoc/react/components/spinner.json
 jsdoc -c jsdoc.json components/Stats/* > ../../sites/dev/prebuild/jsdoc/react/components/stats.json
+jsdoc -c jsdoc.json components/Tab/* > ../../sites/dev/prebuild/jsdoc/react/components/tab.json

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

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Tab, Tabs } from '@freesewing/react/components/Tab'
+import { MiniNote } from '@freesewing/react/components/Mini'
+
+export const TabExample = () => <MiniNote>Do not use a Tab component on its own, but only as direct children of a Tabs component.</MiniNote>
+export const TabsExample = () => (
+  <Tabs tabs="Apple, Banana, Coconut">
+    <Tab>Apple tab</Tab>
+    <Tab>Banana tab</Tab>
+    <Tab>Coconut tab</Tab>
+  </Tabs>
+)

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

@@ -2,6 +2,28 @@
 title: Tab
 ---
 
-:::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.tab.mjs'
+import { TabExample, TabsExample } from './_examples.js'
+
+<DocusaurusDoc>
+
+- [Components](#components)
+
+## Components
+
+The **Tab** component family provides the following components:
+
+- [Tab](#tab)
+- [Tabs](#tabs)
+
+### Tab
+
+<ComponentDocs docs={jsdoc.jsdocTab} example={TabExample} />
+
+### Tabs
+
+<ComponentDocs docs={jsdoc.jsdocTabs} example={TabsExample} />
+
+</DocusaurusDoc>