From 3364be6052eb092fe05df3077b629216cf0f2299 Mon Sep 17 00:00:00 2001
From: joostdecock <joost@joost.at>
Date: Sat, 24 May 2025 17:52:31 +0200
Subject: [PATCH] [react] feat: Added docs for components/Logo

---
 packages/react/components/Logo/index.mjs      | 19 +++++----
 packages/react/mkdocs.sh                      |  1 +
 .../react/components/logo/_examples.js        | 41 +++++++++++++++++++
 .../packages/react/components/logo/readme.mdx | 33 ++++++++++++++-
 4 files changed, 84 insertions(+), 10 deletions(-)
 create mode 100644 sites/dev/docs/reference/packages/react/components/logo/_examples.js

diff --git a/packages/react/components/Logo/index.mjs b/packages/react/components/Logo/index.mjs
index d0b38093b7b..24c4be7b2ed 100644
--- a/packages/react/components/Logo/index.mjs
+++ b/packages/react/components/Logo/index.mjs
@@ -1,17 +1,18 @@
 import React from 'react'
 import { logoPath } from '@freesewing/config'
 
-/*
+/**
  * The FreeSewing logo, aka Skully, as a React component
  *
- * @params {object} props - All React props
- * @params {string} className - Custom CSS classes to apply
- * @params {string} theme - The theme, light or dark. Although by default this component will auto-adapt by using currentColor
- * @params {number} stroke - Set this to also stroke the logo
+ * @component
+ * @param {object} props - All component props
+ * @param {string} [props.className = "tw:w-20 tw:h-20"] - Custom CSS classes to apply
+ * @param {string} [props.stroke = undefined] - Set this explicitly to use a different stroke color
+ * @returns {JSX.Element}
  */
-export const FreeSewingLogo = ({ className = 'w-20 h-20', theme = 'light', stroke = false }) => {
+export const FreeSewingLogo = ({ className = 'tw:w-20 tw:h-20', stroke }) => {
   const svgProps = {}
-  const strokes = { light: '#000', darf: '#fff' }
+  const strokes = { dark: '#000', light: 'var(--p)' }
 
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="1 0 25 25" className={className}>
@@ -21,10 +22,12 @@ export const FreeSewingLogo = ({ className = 'w-20 h-20', theme = 'light', strok
       <use
         xlinkHref="#react-logo"
         fill="none"
-        stroke={stroke || strokes[theme]}
         strokeWidth="0.5"
+        style={{ stroke: stroke ? stroke : 'var(--color-base-100)'}}
       />
       <use xlinkHref="#react-logo" fill="currentColor" stroke="none" />
     </svg>
   )
 }
+
+
diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh
index 8de280480b0..27938526ef9 100755
--- a/packages/react/mkdocs.sh
+++ b/packages/react/mkdocs.sh
@@ -20,3 +20,4 @@ jsdoc -c jsdoc.json components/KeyVal/* > ../../sites/dev/prebuild/jsdoc/react/c
 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
+jsdoc -c jsdoc.json components/Logo/* > ../../sites/dev/prebuild/jsdoc/react/components/logo.json
diff --git a/sites/dev/docs/reference/packages/react/components/logo/_examples.js b/sites/dev/docs/reference/packages/react/components/logo/_examples.js
new file mode 100644
index 00000000000..43b88285c28
--- /dev/null
+++ b/sites/dev/docs/reference/packages/react/components/logo/_examples.js
@@ -0,0 +1,41 @@
+import React from 'react'
+import { FreeSewingLogo } from '@freesewing/react/components/Logo'
+import { Highlight } from '@freesewing/react/components/Highlight'
+
+export const FreeSewingLogoExample = () => (
+  <>
+    <div className="tw:flex tw:flex-row tw:flex-wrap tw:gap-4">
+      <div>
+        <h4>Default</h4>
+        <div className="tw:flex tw:flex-row tw:flex-wrap tw:gap-4">
+          <FreeSewingLogo />
+          <div style={{
+            background: `repeating-linear-gradient(45deg, #000 0px, #000 10px, #FFF 10px, #FFF 20px)`
+          }}>
+            <FreeSewingLogo />
+          </div>
+        </div>
+        <small className="tw:block tw:mx-auto tw:leading-4 tw:text-center">the busy background<br />reveals the stroke</small>
+      </div>
+      <div className="tw:grow"><Highlight language="JSX">{`<FreeSewingLogo />`}</Highlight></div>
+    </div>
+    <div className="tw:flex tw:flex-row tw:flex-wrap tw:gap-4">
+      <div>
+        <h4>Different color/size</h4>
+        <FreeSewingLogo className="tw:w-36 tw:h-36 tw:text-primary" />
+      </div>
+      <div className="tw:grow">
+        <Highlight language="JSX">{`<FreeSewingLogo className="tw:w-36 tw:h-36 tw:text-primary" />`}</Highlight>
+      </div>
+    </div>
+    <div className="tw:flex tw:flex-row tw:flex-wrap tw:gap-4">
+      <div>
+        <h4>Different stroke</h4>
+        <FreeSewingLogo stroke="red"/>
+      </div>
+      <div className="tw:grow">
+        <Highlight language="JSX">{`<FreeSewingLogo stroke="red" />`}</Highlight>
+      </div>
+    </div>
+  </>
+)
diff --git a/sites/dev/docs/reference/packages/react/components/logo/readme.mdx b/sites/dev/docs/reference/packages/react/components/logo/readme.mdx
index be8d58e9078..7abac216640 100644
--- a/sites/dev/docs/reference/packages/react/components/logo/readme.mdx
+++ b/sites/dev/docs/reference/packages/react/components/logo/readme.mdx
@@ -1,7 +1,36 @@
 ---
 title: Logo
 ---
+import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
+import { ComponentDocs } from '@site/src/components/component-docs.js'
+import * as jsdoc from '@site/prebuild/jsdoc/components.logo.mjs'
+import { FreeSewingLogoExample } from './_examples.js'
 
-:::note
-This page is yet to be created
+
+<DocusaurusDoc>
+
+The __Logo__ component family provides the following components:
+
+- [FreeSewingLogo](#freesewinglogo)
+
+## FreeSewingLogo
+
+:::tip Understanding the colors of the logo
+The logo will always be filled with `currentColor` which is a specific keyword
+that will be substituted with whatever the current text color is.
+
+Furthermore, two logos will be stacked on top of each other.
+The one filled with `currentColor` sits on top, and below it sits one that is
+not filled, but stroked with `var(--background-base-100)`.
+
+This ensures that if the logo is placed on a background with low contrast, it
+stands out On the default background, the stroked version will be the same
+color, so it will be invisible.
+
+You can also set an explicit stroke color with the `stroke` prop, or control
+`currentColor` by setting the `className` prop.
 :::
+<ComponentDocs docs={jsdoc.jsdocFreeSewingLogo} example={FreeSewingLogoExample} />
+
+</DocusaurusDoc>
+