docs: add anchor link to reference parameters (#6194)

- Added anchor links to items in parameter components
- Added sectionTitle prop in markdown theme

Note: Due to the second point, the change requires generating references to see the anchor links, which would result in a big diff in this PR. Instead, next time the references are generated for a release, this feature will available for use.

www/packages/docs-ui/src/components/CopyButton/index.tsx

@@ -10,7 +10,8 @@ export type CopyButtonProps = {
   buttonClassName?: string
   tooltipClassName?: string
   tooltipText?: string
-} & React.HTMLAttributes<HTMLDivElement>
+  onCopy?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "onCopy">
 
 export const CopyButton = ({
   text,
@@ -19,6 +20,7 @@ export const CopyButton = ({
   tooltipText = "Copy to Clipboard",
   children,
   className,
+  onCopy,
 }: CopyButtonProps) => {
   const { isCopied, handleCopy } = useCopy(text)
 
@@ -30,7 +32,10 @@ export const CopyButton = ({
     >
       <span
         className={clsx("cursor-pointer", buttonClassName)}
-        onClick={handleCopy}
+        onClick={(e) => {
+          onCopy?.(e)
+          handleCopy()
+        }}
       >
         {children}
       </span>

www/packages/docs-ui/src/components/Details/Summary/index.tsx

@@ -11,6 +11,7 @@ export type DetailsSummaryProps = {
   className?: string
   titleClassName?: string
   hideExpandableIcon?: boolean
+  summaryRef?: React.LegacyRef<HTMLDivElement>
 } & Omit<React.HTMLAttributes<HTMLElement>, "title">
 
 export const DetailsSummary = ({
@@ -23,6 +24,7 @@ export const DetailsSummary = ({
   className,
   titleClassName,
   hideExpandableIcon = false,
+  summaryRef,
   ...rest
 }: DetailsSummaryProps) => {
   return (
@@ -36,6 +38,7 @@ export const DetailsSummary = ({
         "no-marker",
         className
       )}
+      ref={summaryRef}
       {...rest}
     >
       <span className="gap-docs_0.25 flex flex-col">

www/packages/tailwind/base.tailwind.config.js

@@ -577,6 +577,17 @@ module.exports = {
             transform: "scale(1)",
           },
         },
+        flash: {
+          "0%": {
+            backgroundColor: "transparent",
+          },
+          "50%": {
+            backgroundColor: "var(--animation-color)",
+          },
+          "100%": {
+            backgroundColor: "transparent",
+          },
+        },
       }),
       animation: {
         fadeIn: "fadeIn 500ms",
@@ -595,6 +606,7 @@ module.exports = {
         pulsingDots: "pulsingDots 1s alternate infinite",
         minimize: "minimize 500ms",
         maximize: "maximize 500ms",
+        flash: "flash 1500ms 1",
       },
     },
     fontFamily: {
@@ -708,6 +720,9 @@ module.exports = {
           ".flip-y": {
             transform: "rotateY(180deg)",
           },
+          ".animate-bg-surface": {
+            "--animation-color": "var(--docs-bg-subtle-pressed)",
+          },
         })
         addComponents({
           ".btn-secondary-icon": {