[react] feat: Added docs for components/Link

packages/react/components/Link/index.mjs

@@ -4,10 +4,12 @@ import { linkClasses } from '@freesewing/utils'
 /**
  * An anchor link component
  *
- * @param {object} props - All React props
+ * @component
- * @param {array} props.children - The content to go in the layout
+ * @param {object} props - All component props
- * @param {array} props.id - The ID of the anchor to link to
+ * @param {JSX.Element} props.children - The component children, will be rendered inside the link
- * @param {array} props.title - An optional link title
+ * @param {string} [props.id = ''] - The ID of the anchor to link to
+ * @param {string} [props.title = false] - An optional link title
+ * @returns {JSX.Element}
  */
 export const AnchorLink = ({ children, id = '', title = false }) => (
   <a href={`#${id}`} className={linkClasses} title={title ? title : ''}>
@@ -18,20 +20,23 @@ export const AnchorLink = ({ children, id = '', title = false }) => (
 /**
  * A regular link component
  *
- * @param {object} props - All React props
+ * @component
- * @param {array} props.children - The content to go in the layout
+ * @param {object} props - All component props
- * @param {array} props.href - The target to link to
+ * @param {JSX.Element} props.children - The component children, will be rendered inside the link
- * @param {array} props.title - An optional link title
+ * @param {string} [props.className = @freesewing/utils/linkClasses] - Any non-default CSS classes to apply
- * @param {string} props.className - Any non-default CSS classes to apply
+ * @param {string} props.href - The URL to link to
- * @param {string} props.style - Any non-default styles to apply
+ * @param {object} [props.style = {}] - Any non-default styles to apply
+ * @param {string} [props.target = undefined] - An optional link title
+ * @param {string} [props.title = false] - An optional link title
+ * @returns {JSX.Element}
  */
 export const Link = ({
-  href,
-  title = false,
   children,
   className = linkClasses,
-  target,
+  href,
   style = {},
+  target,
+  title = false,
 }) => (
   <a href={href} target={target} className={className} title={title ? title : ''} style={style}>
     {children}
@@ -41,34 +46,49 @@ export const Link = ({
 const BaseLink = Link
 
 /**
- * A regular link, but on a success background
+ * A regular link, but intended to be used on a success background
  *
- * @param {object} props - All React props
+ * @component
- * @param {array} props.children - The content to go in the layout
+ * @param {object} props - All component props
- * @param {array} props.href - The target to link to
+ * @param {JSX.Element} props.children - The component children, will be rendered inside the link
- * @param {array} props.title - An optional link title
+ * @param {string} props.href - The URL to link to
- * @param {string} props.className - Any non-default CSS classes to apply
+ * @param {string} [props.target = undefined] - An optional link title
- * @param {string} props.style - Any non-default styles to apply
+ * @param {string} [props.title = false] - An optional link title
+ * @param {React.FC} [Link = undefined] - An optional framework-specific Link component
+ * @returns {JSX.Element}
  */
 export const SuccessLink = ({
-  href,
-  title = false,
   children,
-  className = `${linkClasses} tw:text-success-content tw:hover:text-success-content`,
+  href,
-  style = {},
+  target,
+  title = false,
+  Link,
 }) => (
-  <a href={href} className={className} title={title ? title : ''} style={style}>
+  <a href={href} className={linkClasses} title={title ? title : ''}>
-    {children}
+    <span className="tw:text-success-content tw:hover:text-success-content">{children}</span>
   </a>
 )
 
+/**
+ * A link styled as a card
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {JSX.Element} props.children - The component children, will be rendered inside the link
+ * @param {string} [props.className = @freesewing/utils/linkClasses + "tw:text-success-content tw:hover:text-success-content"] - Any non-default CSS classes to apply
+ * @param {string} props.href - The URL to link to
+ * @param {string} [props.title = false] - An optional link title
+ * @param {JSX.Element} props.icon - An icon to render
+ * @param {React.FC} [Link = undefined] - An optional framework-specific Link component
+ * @returns {JSX.Element}
+ */
 export const CardLink = ({
+  children,
+  className = 'tw:bg-base-200 tw:text-base-content',
   href,
   title,
   icon,
-  children,
   Link,
-  className = 'tw:bg-base-200 tw:text-base-content',
 }) => {
   if (!Link) Link = BaseLink
 

packages/react/mkdocs.sh

@@ -19,3 +19,4 @@ jsdoc -c jsdoc.json components/Json/* > ../../sites/dev/prebuild/jsdoc/react/com
 jsdoc -c jsdoc.json components/KeyVal/* > ../../sites/dev/prebuild/jsdoc/react/components/keyval.json
 jsdoc -c jsdoc.json components/Layout/* > ../../sites/dev/prebuild/jsdoc/react/components/layout.json
 jsdoc -c jsdoc.json components/LineDrawing/* > ../../sites/dev/prebuild/jsdoc/react/components/linedrawing.json
+jsdoc -c jsdoc.json components/Link/* > ../../sites/dev/prebuild/jsdoc/react/components/link.json

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
+import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
-This page is yet to be created
+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>