[react] feat: Added docs for components/Link

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

@@ -0,0 +1,30 @@
+import React from 'react'
+import {
+  AnchorLink,
+  CardLink,
+  Link,
+  SuccessLink,
+} from '@freesewing/react/components/Link'
+import { WarningIcon } from '@freesewing/react/components/Icon'
+
+export const AnchorLinkExample = () => <AnchorLink id="cardlink">This is a AnchorLink</AnchorLink>
+export const CardLinkExample = () => (
+  <CardLink
+    id="cardlink"
+    icon={<WarningIcon />}
+    href="/"
+    title="This is the title"
+  >
+    This is a CardLink with a WarningIcon
+  </CardLink>
+)
+export const LinkExample = () => <Link href="/">This is a Link</Link>
+export const SuccessLinkExample = () => (
+  <>
+    <SuccessLink href="/">This is a SuccessLink, you should not use it on a regular background</SuccessLink> (there is a link on this line)
+    <div className="tw:bg-success tw:p-2 tw:rounded">
+      <SuccessLink href="/">This is a SuccessLink on a success background</SuccessLink>
+    </div>
+  </>
+)
+

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

@@ -2,6 +2,48 @@
 title: Link
 ---
 
-:::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.link.mjs'
+import {
+  AnchorLinkExample,
+  CardLinkExample,
+  LinkExample,
+  SuccessLinkExample,
+} from './_examples.js'
+
+
+<DocusaurusDoc>
+
+:::tip Styling and link behaviour
+##### Styling
+Due to the CSS reset used by Tailwind, one cannot assume links will be styled like you expect them to.
+Use a component from this For this and other reasons, Link components exist.
+##### Link behaviour
+Withing a single-page application (SPA) --- like Docusaurus or NextJS and so on --- there is often a
+`Link` component provided by the framework that provides client-side routing so that clicking a link
+does not completely reload the page/application.
+
+You can pass such a component in some of FreeSewing components to use it for links rather than a traditional `<a>` tag.
 :::
+
+The __Link__ component family provides the following components:
+
+- [AnchorLink](#anchorlink)
+- [CardLink](#cardlink)
+- [Link](#link)
+- [SuccessLink](#successlink)
+
+## AnchorLink
+<ComponentDocs docs={jsdoc.jsdocAnchorLink} example={AnchorLinkExample} />
+
+## CardLink
+<ComponentDocs docs={jsdoc.jsdocCardLink} example={CardLinkExample} />
+
+## Link
+<ComponentDocs docs={jsdoc.jsdocLink} example={LinkExample} />
+
+## SuccessLink
+<ComponentDocs docs={jsdoc.jsdocSuccessLink} example={SuccessLinkExample} />
+
+</DocusaurusDoc>