From 4c582bf26fe727d46af399ea439d902666d44a58 Mon Sep 17 00:00:00 2001
From: joostdecock <joost@joost.at>
Date: Sun, 25 May 2025 13:37:24 +0200
Subject: [PATCH] [react] feat: Added docs for components/Newsletter

---
 .../react/components/Newsletter/index.mjs     | 23 ++++++++++++-------
 packages/react/mkdocs.sh                      |  1 +
 .../react/components/newsletter/readme.mdx    | 23 ++++++++++++++++---
 3 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/packages/react/components/Newsletter/index.mjs b/packages/react/components/Newsletter/index.mjs
index d21cf857a28..b327baa6a48 100644
--- a/packages/react/components/Newsletter/index.mjs
+++ b/packages/react/components/Newsletter/index.mjs
@@ -17,11 +17,16 @@ import { Popout } from '@freesewing/react/components/Popout'
 import { IconButton } from '@freesewing/react/components/Button'
 import { MiniTip } from '@freesewing/react/components/Mini'
 
-/*
- * Component for newsletter signup (by visitors)
+/**
+ * Component for newsletter signup by visitors (not logged-in users)
  *
- * @params {object} props - All React props
- * @param {function} props.Link - An optional framework-specific Link component
+ * @component
+ * @param {object} props - All component props
+ * @param {React.FC} [props.Link = false] - An optional framework-specific Link component
+ * @param {boolean} [props.noP = false] - Set this to true to not display the signup message paragraph
+ * @param {boolean} [props.noTitle = false] - Set this to true to not display the signup title
+ * @param {boolean} [props.noBox = false] - Set this to true to not apply the box style
+ * @returns {JSX.Element}
  */
 export const NewsletterSignup = ({ Link = false, noP = false, noTitle = false, noBox = false }) => {
   if (!Link) Link = WebLink
@@ -120,11 +125,13 @@ export const NewsletterSignup = ({ Link = false, noP = false, noTitle = false, n
   )
 }
 
-/*
- * Component to handle newsletter unsubscribe links
+/**
+ * Component for handling newsletter unsubscribe links
  *
- * @params {object} props - All React props
- * @param {function} props.Link - An optional framework-specific Link component
+ * @component
+ * @param {object} props - All component props
+ * @param {React.FC} [props.Link = false] - An optional framework-specific Link component
+ * @returns {JSX.Element}
  */
 export const NewsletterUnsubscribe = ({ Link = false }) => {
   if (!Link) Link = WebLink
diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh
index edc1f9764b8..b7a93a97d65 100755
--- a/packages/react/mkdocs.sh
+++ b/packages/react/mkdocs.sh
@@ -23,3 +23,4 @@ jsdoc -c jsdoc.json components/Link/* > ../../sites/dev/prebuild/jsdoc/react/com
 jsdoc -c jsdoc.json components/Logo/* > ../../sites/dev/prebuild/jsdoc/react/components/logo.json
 jsdoc -c jsdoc.json components/Mini/* > ../../sites/dev/prebuild/jsdoc/react/components/mini.json
 jsdoc -c jsdoc.json components/Modal/* > ../../sites/dev/prebuild/jsdoc/react/components/modal.json
+jsdoc -c jsdoc.json components/Newsletter/* > ../../sites/dev/prebuild/jsdoc/react/components/newsletter.json
diff --git a/sites/dev/docs/reference/packages/react/components/newsletter/readme.mdx b/sites/dev/docs/reference/packages/react/components/newsletter/readme.mdx
index 0976f817462..d732995e9b2 100644
--- a/sites/dev/docs/reference/packages/react/components/newsletter/readme.mdx
+++ b/sites/dev/docs/reference/packages/react/components/newsletter/readme.mdx
@@ -2,6 +2,23 @@
 title: Newsletter
 ---
 
-:::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.newsletter.mjs'
+import { NewsletterSignup, NewsletterUnsubscribe } from '@freesewing/react/components/Newsletter'
+
+<DocusaurusDoc>
+
+The __Newsletter__ component family provides the following components:
+
+- [NewsletterSignup](#newslettersignup)
+- [NewsletterUnsubscribe](#newsletterunsubscribe)
+
+## NewsletterSignup
+<ComponentDocs docs={jsdoc.jsdocNewsletterSignup} example={NewsletterSignup} />
+
+## NewsletterUnsubscribe
+<ComponentDocs docs={jsdoc.jsdocNewsletterUnsubscribe} example={NewsletterUnsubscribe} />
+
+</DocusaurusDoc>
+