diff --git a/packages/react/components/Table/index.mjs b/packages/react/components/Table/index.mjs index 71ad2e81371..d519418a92f 100644 --- a/packages/react/components/Table/index.mjs +++ b/packages/react/components/Table/index.mjs @@ -1,9 +1,32 @@ import React from 'react' -/* +/** + * A component set CSS classes to make your tables look better + * + * @component + * @param {object} props - All component props + * @param {JSX.Element} props.children - The table children, same as for a table HTML tag + * @returns {JSX.Element} + */ +export const Table = ({ children }) => ( + + {children}
+
+) + +/** + * A component to help embed tables into a page + * * Tables on mobile will almost always break the layout - * unless we set the overflow behaviour explicitly + * unless we set the overflow behaviour explicitly. + * This component takes care of that. + * + * @component + * @param {object} props - All component props + * @param {object} [props.js = undefined] - An optional Javascript Object to highlight + * @param {JSX.Element} props.children - The component children, will be rendered if props.js is not set + * @returns {JSX.Element} */ export const TableWrapper = ({ children }) => ( -
{children}
+
{children}
) diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh index 57a9ecf4eb1..b5f149ca67e 100755 --- a/packages/react/mkdocs.sh +++ b/packages/react/mkdocs.sh @@ -37,3 +37,4 @@ jsdoc -c jsdoc.json components/SignUp/* > ../../sites/dev/prebuild/jsdoc/react/c 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 +jsdoc -c jsdoc.json components/Table/* > ../../sites/dev/prebuild/jsdoc/react/components/table.json diff --git a/sites/dev/docs/reference/packages/react/components/table/_examples.js b/sites/dev/docs/reference/packages/react/components/table/_examples.js new file mode 100644 index 00000000000..8528ca5a04e --- /dev/null +++ b/sites/dev/docs/reference/packages/react/components/table/_examples.js @@ -0,0 +1,32 @@ +import React from 'react' +import { Table, TableWrapper } from '@freesewing/react/components/Table' + +export const TableExample = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + +
ColorShapeSize
OrangeRoundSmall
PinkSquareTiny
PurpleRoundLarge
+) +export const TableWrapperExample = () => diff --git a/sites/dev/docs/reference/packages/react/components/table/readme.mdx b/sites/dev/docs/reference/packages/react/components/table/readme.mdx index 7012ab7577b..c85dd10110a 100644 --- a/sites/dev/docs/reference/packages/react/components/table/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/table/readme.mdx @@ -2,6 +2,28 @@ title: Table --- -:::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.table.mjs' +import { TableExample, TableWrapperExample } from './_examples.js' + + + +- [Components](#components) + +## Components + +The **Table** component family provides the following components: + +- [Table](#table) +- [TableWrapper](#tablewrapper) + +### Table + + + +### TableWrapper + + + +