[react] feat: Added docs for components/CopyToClipboardButton

packages/react/components/CopyToClipboardButton/index.mjs

@@ -21,29 +21,41 @@ const handleCopied = (content, setCopied, setLoadingStatus, label) => {
   setTimeout(() => setCopied(false), 1000)
 }
 
+/**
+ * A component to copy something to the clipboard
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {JSX.element} props.children - The component children
+ * @param {string} props.content - The content that should be copied to the clipboard
+ * @param {string} props.label - The label to show when the content is copied
+ * @param {boolean} props.sup - Set this to true to render as superscript (above the line)
+ * @returns {JSX.Element}
+ */
 export const CopyToClipboardButton = ({ children, content, label = false, sup = false }) => {
   const [copied, setCopied] = useState(false)
   const { setLoadingStatus } = useContext(LoadingStatusContext)
 
-  const style = sup ? 'tw:w-4 tw:h-4 tw:-mt-4' : 'tw:w-5 tw:h-5'
+  const style = sup ? 'tw:w-4 tw:h-4 tw:-mt-4 tw:-ml-1' : 'tw:w-5 tw:h-5'
 
   return (
     <button
       className={
         (copied ? 'tw:text-success ' : '') +
-        'tw:daisy-btn tw:w-full tw:daisy-btn-ghost tw:lg:w-auto'
+        'tw:daisy-btn tw:w-full tw:daisy-btn-ghost tw:lg:w-auto tw:hover:bg-transparent tw:hover:border-transparent tw:group tw:hover:shadow-none'
       }
       onClick={() => handleCopied(content, setCopied, setLoadingStatus, label)}
     >
+      {sup ? children : null}
       {copied ? (
         <OkIcon
           className={`${style} tw:text-success-content tw:bg-success tw:rounded-full tw:p-1`}
           stroke={4}
         />
       ) : (
-        <CopyIcon className={`${style} tw:text-inherit`} />
+        <CopyIcon className={`${style} tw:text-inherit tw:group-hover:text-secondary`} />
       )}
-      {children}
+        {sup ? null : children}
     </button>
   )
 }

packages/react/mkdocs.sh

@@ -7,3 +7,4 @@ jsdoc -c jsdoc.json components/Breadcrumbs/* > ../../sites/dev/prebuild/jsdoc/re
 jsdoc -c jsdoc.json components/Button/* > ../../sites/dev/prebuild/jsdoc/react/components/button.json
 jsdoc -c jsdoc.json components/Collection/* > ../../sites/dev/prebuild/jsdoc/react/components/collection.json
 jsdoc -c jsdoc.json components/Control/* > ../../sites/dev/prebuild/jsdoc/react/components/control.json
+jsdoc -c jsdoc.json components/CopyToClipboardButton/* > ../../sites/dev/prebuild/jsdoc/react/components/copytoclipboardbutton.json

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

@@ -0,0 +1,9 @@
+import React from 'react'
+import { CopyToClipboardButton } from '@freesewing/react/components/CopyToClipboardButton'
+
+export const CopyToClipboardButtonExample = () => (
+  <>
+    <CopyToClipboardButton content="I am the regular example" label="Regular Example">Regular Example</CopyToClipboardButton>
+    <CopyToClipboardButton content="I am the sup example" label="Sup Example" sup>Sup Example</CopyToClipboardButton>
+  </>
+)

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

@@ -2,6 +2,20 @@
 title: CopyToClipboardButton
 ---
 
-:::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 { jsdocCopyToClipboardButton } from '@site/prebuild/jsdoc/components.copytoclipboardbutton.mjs'
+import { CopyToClipboardButtonExample } from './_examples.js'
+
+<DocusaurusDoc>
+
+The **CopyToClipboardButton** component family provides the following components:
+
+- [CopyToClipboardButton](#copytoclipboardbutton)
+
+## CopyToClipboardButton
+
+<ComponentDocs docs={jsdocCopyToClipboardButton} example={CopyToClipboardButtonExample} />
+
+</DocusaurusDoc>
+