add changeset

Author: SEEKilian

.changeset/legal-pigs-tan.md

@@ -0,0 +1,29 @@
+---
+'@braid-design-system/docs-ui': minor
+---
+
+**TitleLink:** Added new component for rendering linkable headings with an optional copy-to-clipboard interaction. Should be wrapped in your required typographic component.
+
+
+**EXAMPLE:**
+```jsx
+<Heading level="2">
+  <TitleLink>Getting started</TitleLink>
+</Heading>
+```
+
+With copy-to-clipboard:
+```jsx
+<CategoryHeading component="h3">
+  <TitleLink copyable>Appearance</TitleLink>
+</CategoryHeading>
+```
+
+---
+
+**CategoryHeading:** Added new component for rendering category-style navigation headings.
+
+**EXAMPLE USAGE:**
+```jsx
+<CategoryHeading component="h2">Layout</CategoryHeading>
+```

packages/docs-ui/src/components/CategoryHeading/CategoryHeading.tsx

@@ -1,8 +1,8 @@
 import { Box, Text } from 'braid-design-system';
-import type { ComponentProps } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 
 type CategoryHeadingProps = {
-  children: React.ReactNode;
+  children: ReactNode;
   component?: ComponentProps<typeof Text>['component'];
 };
 

packages/docs-ui/src/components/TitleLink/TitleLink.tsx

@@ -79,14 +79,18 @@ export const TitleLink = ({ copyable = false, ...restProps }: TitleLink) => {
     onCopyClick(url);
   };
 
+  if (!copyable) {
+    return <TitleLinkAnchor slug={slug}>{restProps.children}</TitleLinkAnchor>;
+  }
+
   return (
     <TooltipRenderer placement="right" tooltip={<Text>Copy to clipboard</Text>}>
       {({ triggerProps }) => (
         <TitleLinkAnchor
           slug={slug}
-          onClick={copyable ? handleClick : undefined}
-          triggerProps={copyable ? triggerProps : undefined}
-          copying={copyable ? copying : undefined}
+          onClick={handleClick}
+          triggerProps={triggerProps}
+          copying={copying}
         >
           {restProps.children}
         </TitleLinkAnchor>

packages/docs-ui/src/utils/useCopy.ts

@@ -5,17 +5,17 @@ export const useCopy = () => {
 
   useEffect(() => {
     if (copying) {
-      setTimeout(() => {
+      const timer = setTimeout(() => {
         setCopying(false);
       }, 2000);
+      return () => clearTimeout(timer);
     }
   }, [copying]);
 
   const onCopyClick = async (content: string) => {
     if (!copying) {
       setCopying(true);
-      const clipboardItem = new ClipboardItem({ 'text/plain': content });
-      await navigator.clipboard.write([clipboardItem]);
+      await navigator.clipboard.writeText(content);
     }
   };
 

site/src/App/DocNavigation/DocDetails.tsx

@@ -209,14 +209,13 @@ export const DocDetails = () => {
                   .filter(([, docSectionChildren]) =>
                     docSectionChildren.some(hasContent),
                   )
-                  .map(([sectionKey, docSectionChildren]) => (
+                  .map(([sectionKey, docSectionChildren]) => {
+                    const heading = getSectionHeading(sectionKey);
+                    return (
                     <Stack key={sectionKey} space="medium">
                       <CategoryHeading component="h2">
-                        <TitleLink
-                          copyable
-                          label={getSectionHeading(sectionKey)}
-                        >
-                          {getSectionHeading(sectionKey)}
+                        <TitleLink copyable label={heading}>
+                          {heading}
                         </TitleLink>
                       </CategoryHeading>
 
@@ -257,7 +256,8 @@ export const DocDetails = () => {
                         ) : null}
                       </Stack>
                     </Stack>
-                  ))}
+                    );
+                  })}
 
               {(docs.additional || []).map((example, index) => (
                 <DocSection