[react] feat: Added docs for components/Logo

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>
+  </>
+)

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>
+