fix(headings): copies heading link to clipboard (#4805)

* fix(headings): copies heading link to clipboard

* fix(headings): add tooltip to hover of the copy icon button

* fix(headings): prevent flash of original tooltip after copy

* fix(headings): match click size for copy button

Author: srambach

packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.css

@@ -7,8 +7,20 @@
   transform: translate(calc(-100% - var(--pf-t--global--spacer--xs)), -50%);
   opacity: 0;
   position: absolute;
+  display: flex;
   left: 0;
   top: 50%;
+  background: none;
+  border: none;
+  padding: 0;
+  tab-index: -1;
+}
+
+.ws-heading-anchor::before {
+  content: ''; 
+  position: absolute;
+  inset: 0;
+  margin: calc(var(--pf-t--global--spacer--xs) * -1);
 }
 
 .ws-heading-anchor-icon {

packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.js

@@ -1,7 +1,6 @@
-import React from 'react';
-import { Flex, FlexItem, Content } from '@patternfly/react-core';
+import React, { useState } from 'react';
+import { Flex, FlexItem, Content, Tooltip } from '@patternfly/react-core';
 import LinkIcon from '@patternfly/react-icons/dist/esm/icons/link-icon';
-import { Link } from '../link/link';
 import { slugger } from '../../helpers/slugger';
 import { css } from '@patternfly/react-styles';
 
@@ -13,6 +12,15 @@ export const AutoLinkHeader = ({
   className
 }) => {
   const slug = id || slugger(children);
+  const [copied, setCopied] = useState(false);
+
+  const handleCopyUrl = (e) => {
+    e.preventDefault();
+    const url = `${window.location.origin}${window.location.pathname}#${slug}`;
+    navigator.clipboard.writeText(url).then(() => {
+      setCopied(true);
+    });
+  };
 
   return (
     <Flex alignItems={{ default: 'alignItemsCenter'}} spaceItems={{ default: "spaceItemsSm" }}>
@@ -24,9 +32,21 @@ export const AutoLinkHeader = ({
           tabIndex={-1}
           isEditorial
         >
-          <Link href={`#${slug}`} className="ws-heading-anchor" tabIndex="-1" aria-hidden>
-            <LinkIcon className="ws-heading-anchor-icon" style={{ verticalAlign: 'middle' }} />
-          </Link>
+          <Tooltip
+            content={copied ? "Link copied" : "Copy link to clipboard"}
+            exitDelay={copied ? 1600 : 300}
+            onTooltipHidden={() => setCopied(false)}
+          >
+            <button 
+              onClick={handleCopyUrl}
+              className="ws-heading-anchor" 
+              tabIndex="-1" 
+              aria-hidden
+              aria-label={`Copy link to ${children}`}
+            >
+              <LinkIcon className="ws-heading-anchor-icon" />
+            </button>
+          </Tooltip>
           {children}
         </Content>
       </FlexItem>